-
Notifications
You must be signed in to change notification settings - Fork 28
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
18 changed files
with
321 additions
and
17 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
33 changes: 33 additions & 0 deletions
33
packages/roomkit-react/src/Prebuilt/components/AppData/useSheet.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import { useCallback } from 'react'; | ||
| import { selectAppData, useHMSActions, useHMSStore, useHMSVanillaStore } from '@100mslive/react-sdk'; | ||
| import { APP_DATA } from '../../common/constants'; | ||
|
|
||
| export const useIsSheetTypeOpen = (sheetType: string) => { | ||
| if (!sheetType) { | ||
| throw Error('Pass one of the sheet options'); | ||
| } | ||
| return useHMSStore(selectAppData(APP_DATA.sheet)) === sheetType; | ||
| }; | ||
|
|
||
| export const useSheetState = () => { | ||
| const sheet = useHMSStore(selectAppData(APP_DATA.sheet)); | ||
| return sheet; | ||
| }; | ||
|
|
||
| export const useSheetToggle = (sheetType: string) => { | ||
| const hmsActions = useHMSActions(); | ||
| const vanillaStore = useHMSVanillaStore(); | ||
| const toggleSheet = useCallback(() => { | ||
| const isOpen = vanillaStore.getState(selectAppData(APP_DATA.sheet)) === sheetType; | ||
| hmsActions.setAppData(APP_DATA.sheet, !isOpen ? sheetType : ''); | ||
| }, [vanillaStore, hmsActions, sheetType]); | ||
| return toggleSheet; | ||
| }; | ||
|
|
||
| export const useSheetReset = () => { | ||
| const hmsActions = useHMSActions(); | ||
| const resetSheet = useCallback(() => { | ||
| hmsActions.setAppData(APP_DATA.sheet, ''); | ||
| }, [hmsActions]); | ||
| return resetSheet; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
51 changes: 51 additions & 0 deletions
51
packages/roomkit-react/src/Prebuilt/components/Header/RoomDetailsHeader.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| import React from 'react'; | ||
| import { useMedia } from 'react-use'; | ||
| import { ChevronRightIcon } from '@100mslive/react-icons'; | ||
| import { Flex } from '../../../Layout'; | ||
| import { Text } from '../../../Text'; | ||
| import { config as cssConfig } from '../../../Theme'; | ||
| import { useRoomLayoutHeader } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen'; | ||
| import { useSheetToggle } from '../AppData/useSheet'; | ||
| // @ts-ignore | ||
| import { useSidepaneToggle } from '../AppData/useSidepane'; | ||
| import { SHEET_OPTIONS, SIDE_PANE_OPTIONS } from '../../common/constants'; | ||
|
|
||
| export const RoomDetailsHeader = () => { | ||
| const { title, description } = useRoomLayoutHeader(); | ||
| const isMobile = useMedia(cssConfig.media.md); | ||
| const clipLength = 80; | ||
| const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS); | ||
| const toggleDetailsSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS); | ||
|
|
||
| if ((!title && !description) || (isMobile && !title)) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <Flex direction={isMobile ? 'row' : 'column'} css={{ ml: '$8', alignItems: isMobile ? 'center' : 'start' }}> | ||
| <Text variant="sm" css={{ c: '$on_surface_high', fontWeight: '$semiBold' }}> | ||
| {title} | ||
| </Text> | ||
| {!isMobile && ( | ||
| <Flex align="end" css={{ color: '$on_surface_high' }}> | ||
| <Text variant="xs" css={{ c: '$on_surface_medium' }}> | ||
| {description.slice(0, clipLength)} | ||
| </Text> | ||
| {description.length > clipLength ? ( | ||
| <span | ||
| style={{ fontWeight: '600', fontSize: '12px', cursor: 'pointer', lineHeight: '1rem' }} | ||
| onClick={toggleDetailsPane} | ||
| > | ||
| ...more | ||
| </span> | ||
| ) : null} | ||
| </Flex> | ||
| )} | ||
| {isMobile && description ? ( | ||
| <Flex css={{ color: '$on_surface_medium' }}> | ||
| <ChevronRightIcon height={16} width={16} onClick={toggleDetailsSheet} /> | ||
| </Flex> | ||
| ) : null} | ||
| </Flex> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
24 changes: 15 additions & 9 deletions
24
packages/roomkit-react/src/Prebuilt/components/Polls/common/utils.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,16 +1,22 @@ | ||
| export const getFormattedTime = (milliseconds: number | undefined) => { | ||
| export const getFormattedTime = (milliseconds: number | undefined, precise = true) => { | ||
| if (!milliseconds) return '-'; | ||
|
|
||
| const totalSeconds = milliseconds / 1000; | ||
| const minutes = Math.floor(totalSeconds / 60); | ||
| const seconds = totalSeconds % 60; | ||
| const hours = Math.floor(totalSeconds / 3600); | ||
| const minutes = Math.floor((totalSeconds % 3600) / 60); | ||
| const seconds = precise ? totalSeconds % 60 : Math.floor(totalSeconds % 60); | ||
|
|
||
| let formattedSeconds = ''; | ||
| if (Number.isInteger(seconds) || minutes) { | ||
| formattedSeconds = seconds.toFixed(0); | ||
| } else { | ||
| formattedSeconds = seconds.toFixed(1); | ||
| let formattedTime = ''; | ||
| if (hours) { | ||
| formattedTime += `${hours}h `; | ||
| } | ||
| if (minutes || hours) { | ||
| formattedTime += `${minutes}m `; | ||
| } | ||
| if (!precise && (hours || minutes)) { | ||
| return formattedTime; | ||
| } | ||
| formattedTime += `${seconds}s`; | ||
|
|
||
| return `${minutes ? `${minutes}m ` : ''}${formattedSeconds}s`; | ||
| return formattedTime; | ||
| }; |
26 changes: 26 additions & 0 deletions
26
packages/roomkit-react/src/Prebuilt/components/RoomDetails/Duration.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import React, { useEffect, useState } from 'react'; | ||
| import { Flex } from '../../../Layout'; | ||
| import { Text } from '../../../Text'; | ||
| import { getFormattedTime } from '../Polls/common/utils'; | ||
|
|
||
| export const Duration = ({ timestamp }: { timestamp: Date }) => { | ||
| const [elapsedTime, setElapsedTime] = useState(getFormattedTime(Date.now() - timestamp.getTime(), false)); | ||
|
|
||
| useEffect(() => { | ||
| const timerAdded = setInterval(() => { | ||
| setElapsedTime(getFormattedTime(Date.now() - timestamp.getTime(), false)); | ||
| }, 1000); | ||
|
|
||
| return () => { | ||
| clearInterval(timerAdded); | ||
| }; | ||
| }, [timestamp]); | ||
|
|
||
| return ( | ||
| <Flex css={{ color: '$on_surface_medium' }}> | ||
| <Text variant="xs" css={{ color: 'inherit' }}> | ||
| Started {elapsedTime} ago | ||
| </Text> | ||
| </Flex> | ||
| ); | ||
| }; |
36 changes: 36 additions & 0 deletions
36
packages/roomkit-react/src/Prebuilt/components/RoomDetails/RoomDetailsPane.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import React from 'react'; | ||
| import { CrossIcon } from '@100mslive/react-icons'; | ||
| import { Box, Flex } from '../../../Layout'; | ||
| import { Text } from '../../../Text'; | ||
| import { RoomDetailsRow } from './RoomDetailsRow'; | ||
| import { useRoomLayoutHeader } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen'; | ||
| // @ts-ignore | ||
| import { useSidepaneToggle } from '../AppData/useSidepane'; | ||
| import { SIDE_PANE_OPTIONS } from '../../common/constants'; | ||
|
|
||
| export const RoomDetailsPane = () => { | ||
| const { title, description, details } = useRoomLayoutHeader(); | ||
| const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS); | ||
| return ( | ||
| <Box css={{ flex: '1 1 0' }}> | ||
| <Flex justify="between" align="center" css={{ w: '100%' }}> | ||
| <Text variant="h6">{title}</Text> | ||
| <Flex | ||
| onClick={toggleDetailsPane} | ||
| css={{ color: '$on_surface_high', cursor: 'pointer', '&:hover': { opacity: '0.8' } }} | ||
| > | ||
| <CrossIcon /> | ||
| </Flex> | ||
| </Flex> | ||
|
|
||
| <RoomDetailsRow details={details} /> | ||
|
|
||
| <Box css={{ mt: '$10' }}> | ||
| <Text css={{ color: '$on_surface_high', fontWeight: '$semiBold' }}>Description</Text> | ||
| <Text variant="sm" css={{ c: '$on_surface_medium' }}> | ||
| {description} | ||
| </Text> | ||
| </Box> | ||
| </Box> | ||
| ); | ||
| }; |
23 changes: 23 additions & 0 deletions
23
packages/roomkit-react/src/Prebuilt/components/RoomDetails/RoomDetailsRow.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import React from 'react'; | ||
| import { Box, Flex } from '../../../Layout'; | ||
| import { Text } from '../../../Text'; | ||
| import { Duration } from './Duration'; | ||
|
|
||
| export const RoomDetailsRow = ({ details }: { details: (string | Date)[] }) => { | ||
| return ( | ||
| <Flex align="center" css={{ w: '100%' }}> | ||
| {details.map((detail, index) => ( | ||
| <React.Fragment key={detail.toString()}> | ||
| {index > 0 && <Box css={{ h: '$2', w: '$2', r: '$round', bg: '$on_surface_medium', m: '0 $2' }} />} | ||
| {typeof detail !== 'string' ? ( | ||
| <Duration timestamp={detail} /> | ||
| ) : ( | ||
| <Text variant="xs" css={{ c: '$on_surface_medium' }}> | ||
| {detail} | ||
| </Text> | ||
| )} | ||
| </React.Fragment> | ||
| ))} | ||
| </Flex> | ||
| ); | ||
| }; |
45 changes: 45 additions & 0 deletions
45
packages/roomkit-react/src/Prebuilt/components/RoomDetails/RoomDetailsSheet.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import React from 'react'; | ||
| import { CrossIcon } from '@100mslive/react-icons'; | ||
| import { Box, Flex } from '../../../Layout'; | ||
| import { Sheet } from '../../../Sheet'; | ||
| import { Text } from '../../../Text'; | ||
| // @ts-ignore | ||
| import { Logo } from '../Header/HeaderComponents'; | ||
| import { RoomDetailsRow } from './RoomDetailsRow'; | ||
| import { useRoomLayoutHeader } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen'; | ||
| import { useIsSheetTypeOpen, useSheetToggle } from '../AppData/useSheet'; | ||
| import { SHEET_OPTIONS } from '../../common/constants'; | ||
|
|
||
| export const RoomDetailsSheet = () => { | ||
| const { title, description, details } = useRoomLayoutHeader(); | ||
| const toggleSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS); | ||
| const showRoomDetailsSheet = useIsSheetTypeOpen(SHEET_OPTIONS.ROOM_DETAILS); | ||
| return ( | ||
| <Sheet.Root open={showRoomDetailsSheet} onOpenChange={toggleSheet}> | ||
| <Sheet.Content css={{ py: '$8', pb: '$12' }}> | ||
| <Flex | ||
| justify="between" | ||
| align="center" | ||
| css={{ w: '100%', borderBottom: '1px solid $border_bright', pb: '$4', mb: '$4', px: '$8' }} | ||
| > | ||
| <Text css={{ fontWeight: '$semiBold', color: '$on_surface_high' }}>Description</Text> | ||
| <Sheet.Close css={{ color: '$on_surface_high' }}> | ||
| <CrossIcon /> | ||
| </Sheet.Close> | ||
| </Flex> | ||
| <Flex align="center" css={{ w: '100%', gap: '$4', pb: '$8', px: '$8' }}> | ||
| <Logo /> | ||
| <Box> | ||
| <Text variant="sm" css={{ c: '$on_secondary_high', fontWeight: '$semiBold' }}> | ||
| {title} | ||
| </Text> | ||
| <RoomDetailsRow details={details} /> | ||
| </Box> | ||
| </Flex> | ||
| <Text variant="sm" css={{ color: '$on_surface_medium', px: '$8' }}> | ||
| {description} | ||
| </Text> | ||
| </Sheet.Content> | ||
| </Sheet.Root> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import React from 'react'; | ||
| import { selectAppData, useHMSStore } from '@100mslive/react-sdk'; | ||
| import { RoomDetailsSheet } from '../components/RoomDetails/RoomDetailsSheet'; | ||
| import { Box } from '../../Layout'; | ||
| import { APP_DATA, SHEET_OPTIONS } from '../common/constants'; | ||
|
|
||
| export const Sheet = () => { | ||
| const sheet = useHMSStore(selectAppData(APP_DATA.sheet)); | ||
| let ViewComponent; | ||
| if (sheet === SHEET_OPTIONS.ROOM_DETAILS) { | ||
| ViewComponent = <RoomDetailsSheet />; | ||
| } | ||
| return <Box>{ViewComponent}</Box>; | ||
| }; |
Oops, something went wrong.