highperfocused/nostrudel
1
0
Fork 0
mirror of https://github.com/hzrd149/nostrudel.git synced 2025-04-05 18:38:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

add toggle chat button to mobile stream view

Browse Source
This commit is contained in:
hzrd149 2023-07-02 09:23:26 -05:00
parent f5a78a3f76
commit 5a537ab9ab
12 changed files with 101 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/soft-mugs-march.md Normal file
View File

@ -0,0 +1,5 @@
---
"nostrudel": minor
---
Add toggle chat button to mobile stream view

12
src/app.tsx
View File

@ -35,8 +35,8 @@ import ToolsHomeView from "./views/tools";
import Nip19ToolsView from "./views/tools/nip19";
import UserAboutTab from "./views/user/about";
const LiveStreamsTab = React.lazy(() => import("./views/home/streams"));
const StreamView = React.lazy(() => import("./views/home/streams/stream"));
const LiveStreamsTab = React.lazy(() => import("./views/streams"));
const StreamView = React.lazy(() => import("./views/streams/stream"));
const SearchView = React.lazy(() => import("./views/search"));
const RootPage = () => (
@ -97,6 +97,10 @@ const router = createHashRouter([
{ path: "nip19", element: <Nip19ToolsView /> },
],
},
{
path: "streams",
element: <LiveStreamsTab />,
},
{ path: "l/:link", element: <NostrLinkView /> },
{ path: "t/:hashtag", element: <HashTagView /> },
{
@ -105,10 +109,6 @@ const router = createHashRouter([
children: [
{ path: "", element: <FollowingTab /> },
{ path: "following", element: <FollowingTab /> },
{
path: "streams",
element: <LiveStreamsTab />,
},
{ path: "global", element: <GlobalTab /> },
],
},

6
src/components/icons.tsx
View File

@ -259,3 +259,9 @@ export const AtIcon = createIcon({
d: "M20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C13.6418 20 15.1681 19.5054 16.4381 18.6571L17.5476 20.3214C15.9602 21.3818 14.0523 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12V13.5C22 15.433 20.433 17 18.5 17C17.2958 17 16.2336 16.3918 15.6038 15.4659C14.6942 16.4115 13.4158 17 12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7C13.1258 7 14.1647 7.37209 15.0005 8H17V13.5C17 14.3284 17.6716 15 18.5 15C19.3284 15 20 14.3284 20 13.5V12ZM12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9Z",
defaultProps,
});
export const LiveStreamIcon = createIcon({
displayName: "LiveStreamIcon",
d: "M16 4C16.5523 4 17 4.44772 17 5V9.2L22.2133 5.55071C22.4395 5.39235 22.7513 5.44737 22.9096 5.6736C22.9684 5.75764 23 5.85774 23 5.96033V18.0397C23 18.3158 22.7761 18.5397 22.5 18.5397C22.3974 18.5397 22.2973 18.5081 22.2133 18.4493L17 14.8V19C17 19.5523 16.5523 20 16 20H2C1.44772 20 1 19.5523 1 19V5C1 4.44772 1.44772 4 2 4H16ZM15 6H3V18H15V6ZM7.4 8.82867C7.47607 8.82867 7.55057 8.85036 7.61475 8.8912L11.9697 11.6625C12.1561 11.7811 12.211 12.0284 12.0924 12.2148C12.061 12.2641 12.0191 12.306 11.9697 12.3375L7.61475 15.1088C7.42837 15.2274 7.18114 15.1725 7.06254 14.9861C7.02169 14.9219 7 14.8474 7 14.7713V9.22867C7 9.00776 7.17909 8.82867 7.4 8.82867ZM21 8.84131L17 11.641V12.359L21 15.1587V8.84131Z",
defaultProps
})

5
src/components/page/desktop-side-nav.tsx
View File

@ -7,12 +7,12 @@ import { ConnectedRelays } from "../connected-relays";
import {
ChatIcon,
FeedIcon,
LiveStreamIcon,
LogoutIcon,
NotificationIcon,
ProfileIcon,
RelayIcon,
SearchIcon,
ToolsIcon,
} from "../icons";
import ProfileLink from "./profile-link";
import AccountSwitcher from "./account-switcher";
@ -42,6 +42,9 @@ export default function DesktopSideNav() {
<Button onClick={() => navigate("/search")} leftIcon={<SearchIcon />}>
Search
</Button>
<Button onClick={() => navigate("/streams")} leftIcon={<LiveStreamIcon />}>
Streams
</Button>
<Button onClick={() => navigate("/profile")} leftIcon={<ProfileIcon />}>
Profile
</Button>

18
src/hooks/use-scroll-position.ts
View File

@ -1,18 +0,0 @@
import { MutableRefObject, useState } from "react";
import { useInterval } from "react-use";
export default function useScrollPosition(ref: MutableRefObject<HTMLDivElement | null>, interval = 1000) {
const [percent, setPercent] = useState(0);
useInterval(() => {
if (!ref.current) return;
const scrollBottom = ref.current.scrollTop + ref.current.getClientRects()[0].height;
if (ref.current.scrollHeight === 0) {
return setPercent(1);
}
const scrollPosition = Math.min(scrollBottom / ref.current.scrollHeight, 1);
setPercent(scrollPosition);
}, interval);
return percent;
}

2
src/views/home/index.tsx
View File

@ -3,8 +3,6 @@ import { Outlet, useMatches, useNavigate } from "react-router-dom";
const tabs = [
{ label: "Following", path: "/following" },
// { label: "Discover", path: "/discover" },
{ label: "Streams", path: "/streams" },
{ label: "Global", path: "/global" },
];

0
src/views/home/streams/status-badge.tsx → src/views/streams/components/status-badge.tsx
View File

7
src/views/home/streams/stream-card.tsx → src/views/streams/components/stream-card.tsx
View File

@ -2,8 +2,6 @@ import { useMemo } from "react";
import { ParsedStream } from "../../../helpers/nostr/stream";
import {
Badge,
Button,
ButtonGroup,
Card,
CardBody,
CardFooter,
@ -13,7 +11,6 @@ import {
Heading,
IconButton,
Image,
Link,
LinkBox,
LinkOverlay,
Modal,
@ -33,14 +30,13 @@ import dayjs from "dayjs";
import relayScoreboardService from "../../../services/relay-scoreboard";
import { getEventRelays } from "../../../services/event-relays";
import { nip19 } from "nostr-tools";
import { ExternalLinkIcon } from "@chakra-ui/icons";
import StreamStatusBadge from "./status-badge";
import { CodeIcon } from "../../../components/icons";
import RawValue from "../../../components/debug-modals/raw-value";
import RawJson from "../../../components/debug-modals/raw-json";
export default function StreamCard({ stream, ...props }: CardProps & { stream: ParsedStream }) {
const { title, summary, starts, identifier, status, image } = stream;
const { title, summary, identifier, image } = stream;
const devModal = useDisclosure();
const naddr = useMemo(() => {
@ -71,7 +67,6 @@ export default function StreamCard({ stream, ...props }: CardProps & { stream: P
{title}
</LinkOverlay>
</Heading>
<Text>{summary}</Text>
{stream.tags.length > 0 && (
<Flex gap="2" wrap="wrap">
{stream.tags.map((tag) => (

0
src/views/home/streams/stream-summary-content.tsx → src/views/streams/components/stream-summary-content.tsx
View File

16
src/views/home/streams/index.tsx → src/views/streams/index.tsx
View File

@ -1,13 +1,13 @@
import { Flex, Select } from "@chakra-ui/react";
import { useTimelineLoader } from "../../../hooks/use-timeline-loader";
import { useTimelineLoader } from "../../hooks/use-timeline-loader";
import { useCallback, useMemo, useRef, useState } from "react";
import { useReadRelayUrls } from "../../../hooks/use-client-relays";
import IntersectionObserverProvider from "../../../providers/intersection-observer";
import { useTimelineCurserIntersectionCallback } from "../../../hooks/use-timeline-cursor-intersection-callback";
import useSubject from "../../../hooks/use-subject";
import StreamCard from "./stream-card";
import { ParsedStream, parseStreamEvent } from "../../../helpers/nostr/stream";
import { NostrEvent } from "../../../types/nostr-event";
import { useReadRelayUrls } from "../../hooks/use-client-relays";
import IntersectionObserverProvider from "../../providers/intersection-observer";
import { useTimelineCurserIntersectionCallback } from "../../hooks/use-timeline-cursor-intersection-callback";
import useSubject from "../../hooks/use-subject";
import StreamCard from "./components/stream-card";
import { ParsedStream, parseStreamEvent } from "../../helpers/nostr/stream";
import { NostrEvent } from "../../types/nostr-event";
export default function LiveStreamsTab() {
const readRelays = useReadRelayUrls();

52
src/views/home/streams/stream/index.tsx → src/views/streams/stream/index.tsx
View File

@ -1,21 +1,41 @@
import { useEffect, useState } from "react";
import { useEffect, useRef, useState } from "react";
import { useScroll } from "react-use";
import { Box, Button, Flex, Heading, Spacer, Spinner, Text } from "@chakra-ui/react";
import { Link as RouterLink, useParams, Navigate } from "react-router-dom";
import { ParsedStream, parseStreamEvent } from "../../../../helpers/nostr/stream";
import { nip19 } from "nostr-tools";
import { NostrRequest } from "../../../../classes/nostr-request";
import { useReadRelayUrls } from "../../../../hooks/use-client-relays";
import { unique } from "../../../../helpers/array";
import { LiveVideoPlayer } from "../../../../components/live-video-player";
import { ParsedStream, parseStreamEvent } from "../../../helpers/nostr/stream";
import { NostrRequest } from "../../../classes/nostr-request";
import { useReadRelayUrls } from "../../../hooks/use-client-relays";
import { unique } from "../../../helpers/array";
import { LiveVideoPlayer } from "../../../components/live-video-player";
import StreamChat from "./stream-chat";
import { UserAvatarLink } from "../../../../components/user-avatar-link";
import { UserLink } from "../../../../components/user-link";
import { useIsMobile } from "../../../../hooks/use-is-mobile";
import { AdditionalRelayProvider } from "../../../../providers/additional-relay-context";
import StreamSummaryContent from "../stream-summary-content";
import { UserAvatarLink } from "../../../components/user-avatar-link";
import { UserLink } from "../../../components/user-link";
import { useIsMobile } from "../../../hooks/use-is-mobile";
import { AdditionalRelayProvider } from "../../../providers/additional-relay-context";
import StreamSummaryContent from "../components/stream-summary-content";
import { ArrowDownSIcon, ArrowUpSIcon } from "../../../components/icons";
function StreamPage({ stream }: { stream: ParsedStream }) {
const isMobile = useIsMobile();
const scrollBox = useRef<HTMLDivElement | null>(null);
const scrollState = useScroll(scrollBox);
const action =
scrollState.y < 256 ? (
<Button
size="sm"
onClick={() => scrollBox.current?.scroll(0, scrollBox.current.scrollHeight)}
leftIcon={<ArrowDownSIcon />}
>
View Chat
</Button>
) : (
<Button size="sm" onClick={() => scrollBox.current?.scroll(0, 0)} leftIcon={<ArrowUpSIcon />}>
View Stream
</Button>
);
return (
<Flex
@ -25,6 +45,7 @@ function StreamPage({ stream }: { stream: ParsedStream }) {
direction={isMobile ? "column" : "row"}
p={isMobile ? 0 : "2"}
gap={isMobile ? 0 : "4"}
ref={scrollBox}
>
<Flex gap={isMobile ? "2" : "4"} direction="column" flexGrow={isMobile ? 0 : 1}>
<LiveVideoPlayer stream={stream.streaming} autoPlay poster={stream.image} maxH="100vh" />
@ -43,7 +64,14 @@ function StreamPage({ stream }: { stream: ParsedStream }) {
</Flex>
<StreamSummaryContent stream={stream} px={isMobile ? "2" : 0} />
</Flex>
<StreamChat stream={stream} flexGrow={1} maxW={isMobile ? undefined : "lg"} maxH="100vh" flexShrink={0} />
<StreamChat
stream={stream}
flexGrow={1}
maxW={isMobile ? undefined : "lg"}
maxH="100vh"
flexShrink={0}
actions={isMobile && action}
/>
</Flex>
);
}

59
src/views/home/streams/stream/stream-chat.tsx → src/views/streams/stream/stream-chat.tsx
View File

@ -15,34 +15,32 @@ import {
Text,
useToast,
} from "@chakra-ui/react";
import { ParsedStream, buildChatMessage, getATag } from "../../../../helpers/nostr/stream";
import { useTimelineLoader } from "../../../../hooks/use-timeline-loader";
import { useReadRelayUrls } from "../../../../hooks/use-client-relays";
import { useAdditionalRelayContext } from "../../../../providers/additional-relay-context";
import useSubject from "../../../../hooks/use-subject";
import { truncatedId } from "../../../../helpers/nostr-event";
import { UserAvatar } from "../../../../components/user-avatar";
import { UserLink } from "../../../../components/user-link";
import { DraftNostrEvent, NostrEvent } from "../../../../types/nostr-event";
import IntersectionObserverProvider, {
useRegisterIntersectionEntity,
} from "../../../../providers/intersection-observer";
import { useTimelineCurserIntersectionCallback } from "../../../../hooks/use-timeline-cursor-intersection-callback";
import { embedUrls } from "../../../../helpers/embeds";
import { embedEmoji, renderGenericUrl, renderImageUrl } from "../../../../components/embed-types";
import EmbeddedContent from "../../../../components/embeded-content";
import { ParsedStream, buildChatMessage, getATag } from "../../../helpers/nostr/stream";
import { useTimelineLoader } from "../../../hooks/use-timeline-loader";
import { useReadRelayUrls } from "../../../hooks/use-client-relays";
import { useAdditionalRelayContext } from "../../../providers/additional-relay-context";
import useSubject from "../../../hooks/use-subject";
import { truncatedId } from "../../../helpers/nostr-event";
import { UserAvatar } from "../../../components/user-avatar";
import { UserLink } from "../../../components/user-link";
import { DraftNostrEvent, NostrEvent } from "../../../types/nostr-event";
import IntersectionObserverProvider, { useRegisterIntersectionEntity } from "../../../providers/intersection-observer";
import { useTimelineCurserIntersectionCallback } from "../../../hooks/use-timeline-cursor-intersection-callback";
import { embedUrls } from "../../../helpers/embeds";
import { embedEmoji, renderGenericUrl, renderImageUrl } from "../../../components/embed-types";
import EmbeddedContent from "../../../components/embeded-content";
import { useForm } from "react-hook-form";
import { useSigningContext } from "../../../../providers/signing-provider";
import { nostrPostAction } from "../../../../classes/nostr-post-action";
import { useUserRelays } from "../../../../hooks/use-user-relays";
import { RelayMode } from "../../../../classes/relay";
import { unique } from "../../../../helpers/array";
import { LightningIcon } from "../../../../components/icons";
import { parseZapEvent, requestZapInvoice } from "../../../../helpers/zaps";
import { readablizeSats } from "../../../../helpers/bolt11";
import { useSigningContext } from "../../../providers/signing-provider";
import { nostrPostAction } from "../../../classes/nostr-post-action";
import { useUserRelays } from "../../../hooks/use-user-relays";
import { RelayMode } from "../../../classes/relay";
import { unique } from "../../../helpers/array";
import { LightningIcon } from "../../../components/icons";
import { parseZapEvent, requestZapInvoice } from "../../../helpers/zaps";
import { readablizeSats } from "../../../helpers/bolt11";
import { Kind } from "nostr-tools";
import useUserLNURLMetadata from "../../../../hooks/use-user-lnurl-metadata";
import { useInvoiceModalContext } from "../../../../providers/invoice-modal";
import useUserLNURLMetadata from "../../../hooks/use-user-lnurl-metadata";
import { useInvoiceModalContext } from "../../../providers/invoice-modal";
function ChatMessage({ event, stream }: { event: NostrEvent; stream: ParsedStream }) {
const ref = useRef<HTMLDivElement | null>(null);
@ -103,7 +101,11 @@ function ZapMessage({ zap, stream }: { zap: NostrEvent; stream: ParsedStream })
);
}
export default function StreamChat({ stream, ...props }: CardProps & { stream: ParsedStream }) {
export default function StreamChat({
stream,
actions,
...props
}: CardProps & { stream: ParsedStream; actions?: React.ReactNode }) {
const toast = useToast();
const contextRelays = useAdditionalRelayContext();
const readRelays = useReadRelayUrls(contextRelays);
@ -172,8 +174,9 @@ export default function StreamChat({ stream, ...props }: CardProps & { stream: P
return (
<IntersectionObserverProvider callback={callback} root={scrollBox}>
<Card {...props} overflow="hidden">
<CardHeader py="3">
<CardHeader py="3" display="flex" justifyContent="space-between" alignItems="center">
<Heading size="md">Stream Chat</Heading>
{actions}
</CardHeader>
<CardBody display="flex" flexDirection="column" gap="2" overflow="hidden" p={0}>
<Flex