Skip to content
This repository has been archived by the owner on Jun 16, 2024. It is now read-only.

Chat log only mode (wip) #70

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Chat log only mode (wip) #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 14 additions & 2 deletions app/javascript/TrackPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { Navigate, useParams, useNavigate } from "react-router-dom";
import { Link as RouterLink } from "react-router-dom";
import { motion } from "framer-motion";

import { HStack, Box, AspectRatio, Container, Skeleton, Flex } from "@chakra-ui/react";
import { HStack, Box, AspectRatio, Container, Skeleton, Flex, Switch, FormControl, FormLabel } from "@chakra-ui/react";
import { Tabs, Tab, TabList, TabPanels, TabPanel } from "@chakra-ui/react";

import { Api, Track } from "./Api";
Expand All @@ -27,6 +27,7 @@ export const TrackPageInner: React.FC = () => {
const navigate = useNavigate();
const streamOptionState = Api.useTrackStreamOptions();
const { slug: trackSlug } = useParams();
const [chatOnly, setChatOnly] = React.useState(false);
if (!trackSlug) throw new Error("?"); // XXX:

const { data: conferenceData, error: conferenceError } = Api.useConference();
Expand Down Expand Up @@ -73,7 +74,18 @@ export const TrackPageInner: React.FC = () => {
return (
<TabPanel key={t.slug} p={0}>
<React.Suspense fallback={<TrackViewSkeleton />}>
<TrackView track={t} streamOptionsState={streamOptionState} />
<TrackView track={t} streamOptionsState={streamOptionState} chatOnly={chatOnly} />
<FormControl display="flex" alignItems="center" h="30px">
<FormLabel htmlFor={`chatonly_${trackIndex}`} aria-hidden="true" m={0} mr={1}>
Show only chat
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Icon ?

</FormLabel>
<Switch
aria-label="Show Chat only"
id={`chatonly_${trackIndex}`}
isChecked={chatOnly}
onChange={() => setChatOnly(!chatOnly)}
/>
</FormControl>
</React.Suspense>
</TabPanel>
);
Expand Down
57 changes: 31 additions & 26 deletions app/javascript/TrackView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,10 @@ const AppVersionAlert = loadable(() => import("./AppVersionAlert"));
export type Props = {
track: Track;
streamOptionsState: TrackStreamOptionsState;
chatOnly: boolean;
};

export const TrackView: React.FC<Props> = ({ track, streamOptionsState }) => {
export const TrackView: React.FC<Props> = ({ track, streamOptionsState, chatOnly }) => {
const [streamOptions, setStreamOptions] = streamOptionsState;
const trackOptionsSelector = (instance: string) => (
<TrackStreamOptionsSelector track={track} streamOptionsState={streamOptionsState} instance={instance} />
Expand All @@ -49,38 +50,42 @@ export const TrackView: React.FC<Props> = ({ track, streamOptionsState }) => {
return (
<Container maxW={["auto", "auto", "auto", "1700px"]} px={["0px", "0px", "15px", "15px"]} py="22px">
<Flex alignItems="top" justifyContent="space-between" direction={["column", "column", "column", "row"]}>
<Box w="100%">
<React.Suspense
fallback={
<AspectRatio ratio={16 / 9}>
<Skeleton w="100%" h="100%" />
</AspectRatio>
}
>
<TrackVideo track={track} streamOptions={streamOptionsState[0]} />
</React.Suspense>
{/* TODO: hide caption while offline */}
{streamOptions.caption ? (
<React.Suspense fallback={<Skeleton w="100%" h="80px" />}>
<TrackCaption
track={track}
onUnsubscribe={() => {
setStreamOptions({ ...streamOptions, caption: false });
}}
/>
{!chatOnly ? (
<Box w="100%">
<React.Suspense
fallback={
<AspectRatio ratio={16 / 9}>
<Skeleton w="100%" h="100%" />
</AspectRatio>
}
>
<TrackVideo track={track} streamOptions={streamOptionsState[0]} />
<Box>{chatOnly}</Box>
</React.Suspense>
) : null}
{/* TODO: hide caption while offline */}
{streamOptions.caption ? (
<React.Suspense fallback={<Skeleton w="100%" h="80px" />}>
<TrackCaption
track={track}
onUnsubscribe={() => {
setStreamOptions({ ...streamOptions, caption: false });
}}
/>
</React.Suspense>
) : null}

<Box display={["flex", "flex", "none", "none"]} justifyContent="end" my={2}>
<Box w="150px">{trackOptionsSelector("1")}</Box>
<Box display={["flex", "flex", "none", "none"]} justifyContent="end" my={2}>
<Box w="150px">{trackOptionsSelector("1")}</Box>
</Box>
</Box>
</Box>
) : null}

<Flex
maxW={["auto", "auto", "auto", "400px"]}
maxW={["auto", "auto", "auto", chatOnly ? "100%" : "400px"]}
h={["650px", "650px", "650px", "auto"]}
minH={["650px"]}
w="100%"
ml={["0", "0", "0", "30px"]}
ml={["0", "0", "0", chatOnly ? "0" : "30px"]}
direction="column"
>
{lightningTimer ? (
Expand Down