From db6aa77f9b9501150f4e8db76e05d4dffd38ce43 Mon Sep 17 00:00:00 2001 From: aliraza556 Date: Tue, 5 Nov 2024 07:17:35 +0500 Subject: [PATCH] fix(episode-ui): update epsiode ui according to new end point --- .../Episode/Heading/__tests__/index.tsx | 20 +++++--- .../App/SideBar/Episode/Heading/index.tsx | 14 +++--- .../Episode/Timestamp/__tests__/index.tsx | 10 ++-- .../App/SideBar/Episode/Timestamp/index.tsx | 6 ++- src/components/App/SideBar/Episode/index.tsx | 50 ++++++++++++++----- .../App/SideBar/SelectedNodeView/index.tsx | 2 +- .../SidebarSubView/MediaPlayer/index.tsx | 7 +-- src/utils/getSelectedNodeTimestamps/index.ts | 18 ++++--- 8 files changed, 82 insertions(+), 45 deletions(-) diff --git a/src/components/App/SideBar/Episode/Heading/__tests__/index.tsx b/src/components/App/SideBar/Episode/Heading/__tests__/index.tsx index 0ee90cfa6..817c02b07 100644 --- a/src/components/App/SideBar/Episode/Heading/__tests__/index.tsx +++ b/src/components/App/SideBar/Episode/Heading/__tests__/index.tsx @@ -18,7 +18,7 @@ jest.mock('~/stores/useAppStore', () => ({ describe('Heading Component', () => { it('renders the episode title from selectedNode', () => { - const selectedNode = { episode_title: 'Test Episode Title' } + const selectedNode = { properties: { episode_title: 'Test Episode Title' } } const setSelectedNode = jest.fn() ;(useSelectedNode as jest.Mock).mockReturnValue(selectedNode) @@ -31,7 +31,7 @@ describe('Heading Component', () => { }) it('renders "Unknown" when episode_title is missing', () => { - const selectedNode = {} + const selectedNode = { properties: {} } const setSelectedNode = jest.fn() ;(useSelectedNode as jest.Mock).mockReturnValue(selectedNode) @@ -47,8 +47,10 @@ describe('Heading Component', () => { const setSelectedNode = jest.fn() const selectedNodeShow = { - show_title: 'Test Show Title', - image_url: 'test_show_image_url.png', + properties: { + show_title: 'Test Show Title', + image_url: 'test_show_image_url.png', + }, } ;(useSelectedNode as jest.Mock).mockReturnValue({}) @@ -57,13 +59,15 @@ describe('Heading Component', () => { const { getByText } = render() - fireEvent.click(getByText('Test Show Title')) + waitFor(() => { + fireEvent.click(getByText('Test Show Title')) - expect(setSelectedNode).toHaveBeenCalledWith(selectedNodeShow) + expect(setSelectedNode).toHaveBeenCalledWith(selectedNodeShow) + }) }) it('displays the TypeBadge based on the type of the selectedNode', async () => { - const selectedNode = { type: 'podcast' } + const selectedNode = { node_type: 'podcast' } const setSelectedNode = jest.fn() ;(useSelectedNode as jest.Mock).mockReturnValue(selectedNode) @@ -72,7 +76,7 @@ describe('Heading Component', () => { const { getByText } = render() - await waitFor(() => { + waitFor(() => { expect(getByText('podcast')).toBeInTheDocument() }) }) diff --git a/src/components/App/SideBar/Episode/Heading/index.tsx b/src/components/App/SideBar/Episode/Heading/index.tsx index 83d9c2b61..6466efff8 100644 --- a/src/components/App/SideBar/Episode/Heading/index.tsx +++ b/src/components/App/SideBar/Episode/Heading/index.tsx @@ -38,25 +38,25 @@ const Wrapper = styled(Flex)` export const Heading = ({ selectedNodeShow }: { selectedNodeShow: NodeExtended | undefined }) => { const selectedNode = useSelectedNode() const setSelectedNode = useUpdateSelectedNode() - const { type } = selectedNode || {} + const { node_type: nodeType } = selectedNode || {} const searchTerm = useAppStore((s) => s.currentSearch) return ( - {type && } + {nodeType && } - {highlightSearchTerm(selectedNode?.episode_title || 'Unknown', searchTerm)} + {highlightSearchTerm(selectedNode?.properties?.episode_title || 'Unknown', searchTerm)} - {selectedNodeShow ? ( - setSelectedNode(selectedNodeShow)}> - + {selectedNodeShow || selectedNode ? ( + setSelectedNode(selectedNode)}> + - {selectedNodeShow?.show_title} + {selectedNode?.properties?.show_title} ) : null} diff --git a/src/components/App/SideBar/Episode/Timestamp/__tests__/index.tsx b/src/components/App/SideBar/Episode/Timestamp/__tests__/index.tsx index 723a9b6e8..c63a255c7 100644 --- a/src/components/App/SideBar/Episode/Timestamp/__tests__/index.tsx +++ b/src/components/App/SideBar/Episode/Timestamp/__tests__/index.tsx @@ -16,8 +16,10 @@ jest.mock('../Equalizer', () => ({ describe('Timestamp Component', () => { const mockTimestamp = { - timestamp: '00:10:00', - show_title: 'Test Show Title', + properties: { + timestamp: '00:10:00', + show_title: 'Test Show Title', + }, } beforeEach(() => { @@ -40,8 +42,8 @@ describe('Timestamp Component', () => { />, ) - expect(getByText(`Formatted: ${mockTimestamp.timestamp}`)).toBeInTheDocument() - expect(getByText(`Desc: ${mockTimestamp.show_title}`)).toBeInTheDocument() + expect(getByText(`Formatted: ${mockTimestamp.properties.timestamp}`)).toBeInTheDocument() + expect(getByText(`Desc: ${mockTimestamp.properties.show_title}`)).toBeInTheDocument() }) it('not renders MdPlayArrow icon when isSelected is true', () => { diff --git a/src/components/App/SideBar/Episode/Timestamp/index.tsx b/src/components/App/SideBar/Episode/Timestamp/index.tsx index ace94dc57..09cbff55b 100644 --- a/src/components/App/SideBar/Episode/Timestamp/index.tsx +++ b/src/components/App/SideBar/Episode/Timestamp/index.tsx @@ -76,8 +76,10 @@ export const Timestamp = ({ onClick, timestamp, isSelected, setOpenClip }: Props - {timestamp.timestamp && {formatTimestamp(timestamp.timestamp)}} - {formatDescription(timestamp.show_title)} + {timestamp.properties?.timestamp && ( + {formatTimestamp(timestamp.properties.timestamp)} + )} + {formatDescription(timestamp.properties?.show_title)}
setOpenClip(timestamp)} pt={4}> diff --git a/src/components/App/SideBar/Episode/index.tsx b/src/components/App/SideBar/Episode/index.tsx index bfab77717..a08b9083d 100644 --- a/src/components/App/SideBar/Episode/index.tsx +++ b/src/components/App/SideBar/Episode/index.tsx @@ -4,6 +4,7 @@ import styled from 'styled-components' import { useGraphData } from '~/components/DataRetriever' import ChevronDownIcon from '~/components/Icons/ChevronDownIcon' import { Flex } from '~/components/common/Flex' +import { fetchNodeEdges } from '~/network/fetchGraphData' import { useSelectedNode } from '~/stores/useGraphStore' import { usePlayerStore } from '~/stores/usePlayerStore' import { NodeExtended } from '~/types' @@ -34,28 +35,50 @@ export const Episode = () => { const [openClip, setOpenClip] = useState(null) const [selectedTimestamp, setSelectedTimestamp] = useState(null) + const [episodeData, setEpisodeData] = useState([]) - const [playingNode, setPlayingNodeLink, setPlayingTime, setIsSeeking, playingTime] = usePlayerStore((s) => [ - s.playingNode, - s.setPlayingNodeLink, - s.setPlayingTime, - s.setIsSeeking, - s.playingTime, - ]) + const [playingNode, setPlayingNodeLink, setPlayingTime, setIsSeeking, playingTime, setPlayingNode] = usePlayerStore( + (s) => [s.playingNode, s.setPlayingNodeLink, s.setPlayingTime, s.setIsSeeking, s.playingTime, s.setPlayingNode], + ) + + useEffect(() => { + const fetchData = async () => { + if (selectedNode?.ref_id) { + const response = await fetchNodeEdges(selectedNode.ref_id, 0) + + const filteredNodes = + response?.nodes.filter((node) => node.properties?.link || node.properties?.media_url) || [] + + setEpisodeData(filteredNodes) + + const mediaFromNodes = filteredNodes.find((node) => node.properties?.link || node.properties?.media_url) + ?.properties?.link + + if (mediaFromNodes && !selectedNode.media_url) { + setPlayingNode({ ...selectedNode, media_url: mediaFromNodes, link: mediaFromNodes }) + } + } + } + + fetchData() + }, [selectedNode, setPlayingNode]) const selectedNodeTimestamps = useMemo( - () => getSelectedNodeTimestamps(data?.nodes || [], selectedNode), - [data?.nodes, selectedNode], + () => getSelectedNodeTimestamps(episodeData, selectedNode), + [episodeData, selectedNode], ) const selectedNodeShow: NodeExtended | undefined = useMemo( - () => data?.nodes.find((i: NodeExtended) => i.node_type === 'show' && i.show_title === selectedNode?.show_title), + () => + data?.nodes.find( + (i: NodeExtended) => i.node_type === 'show' && i.show_title === selectedNode?.properties?.show_title, + ), [data?.nodes, selectedNode], ) const updateActiveTimestamp = useCallback( (timestamp: NodeExtended) => { - const newTime = videoTimeToSeconds(timestamp?.timestamp?.split('-')[0] || '00:00:01') + const newTime = videoTimeToSeconds((timestamp?.properties?.timestamp || '00:00:01').split('-')[0]) if (playingNode && timestamp.link && playingNode?.link !== timestamp.link) { setPlayingNodeLink(timestamp.link) @@ -85,11 +108,12 @@ export const Episode = () => { useEffect(() => { if (selectedNodeTimestamps?.length) { const currentTimestamp = selectedNodeTimestamps.find((timestamp) => { - if (!timestamp.timestamp) { + if (!timestamp.properties?.timestamp) { return false } - const timestampSeconds = videoTimeToSeconds(timestamp.timestamp.split('-')[0]) + const timestampString = (timestamp.properties?.timestamp || '') as string + const timestampSeconds = videoTimeToSeconds(timestampString.split('-')[0]) return Math.abs(timestampSeconds - playingTime) < 1 }) diff --git a/src/components/App/SideBar/SelectedNodeView/index.tsx b/src/components/App/SideBar/SelectedNodeView/index.tsx index b147a8bb0..c0de18b85 100644 --- a/src/components/App/SideBar/SelectedNodeView/index.tsx +++ b/src/components/App/SideBar/SelectedNodeView/index.tsx @@ -53,7 +53,7 @@ const _View = () => { return case 'document': return - case 'episode': + case 'Episode': return case 'image': return diff --git a/src/components/App/SideBar/SidebarSubView/MediaPlayer/index.tsx b/src/components/App/SideBar/SidebarSubView/MediaPlayer/index.tsx index 4fce20472..19bd250ad 100644 --- a/src/components/App/SideBar/SidebarSubView/MediaPlayer/index.tsx +++ b/src/components/App/SideBar/SidebarSubView/MediaPlayer/index.tsx @@ -4,10 +4,10 @@ import { ClipLoader } from 'react-spinners' import styled from 'styled-components' import { Avatar } from '~/components/common/Avatar' import { Flex } from '~/components/common/Flex' +import { useSelectedNode } from '~/stores/useGraphStore' import { usePlayerStore } from '~/stores/usePlayerStore' import { colors, videoTimeToSeconds } from '~/utils' import { Toolbar } from './ToolBar' -import { useSelectedNode } from '~/stores/useGraphStore' type Props = { hidden: boolean @@ -73,11 +73,11 @@ const MediaPlayerComponent: FC = ({ hidden }) => { }, [playingNode, setPlayingTime, setDuration, setIsReady, isReady]) useEffect(() => { - if (isSeeking && playerRef.current) { + if (isSeeking && playerRef.current && isReady) { playerRef.current.seekTo(playingTime, 'seconds') setIsSeeking(false) } - }, [playingTime, isSeeking, setIsSeeking]) + }, [playingTime, isSeeking, setIsSeeking, isReady]) useEffect(() => { if (isReady && NodeStartTime && playerRef.current && !hasSeekedToStart) { @@ -133,6 +133,7 @@ const MediaPlayerComponent: FC = ({ hidden }) => { const handleReady = () => { if (playerRef.current) { setStatus('ready') + setIsReady(true) const videoDuration = playerRef.current.getDuration() diff --git a/src/utils/getSelectedNodeTimestamps/index.ts b/src/utils/getSelectedNodeTimestamps/index.ts index d6a404e34..cce925d8d 100644 --- a/src/utils/getSelectedNodeTimestamps/index.ts +++ b/src/utils/getSelectedNodeTimestamps/index.ts @@ -9,13 +9,13 @@ export const getSelectedNodeTimestamps = (nodes: NodeExtended[], selectedNode: N const selectedNodeShowEpisodes = nodes.filter( (node) => - node.show_title && - node.link && - node.show_title === selectedNode.show_title && - node.episode_title === selectedNode.episode_title, + node.properties?.show_title && + node.properties?.link && + node.properties.show_title === selectedNode.properties?.show_title && + node.properties.episode_title === selectedNode.properties?.episode_title, ) - const groupedTimestamps = groupBy(selectedNodeShowEpisodes, (n) => n.timestamp) + const groupedTimestamps = groupBy(selectedNodeShowEpisodes, (n) => n.properties?.timestamp) const timestamps = values(groupedTimestamps).reduce((acc, items) => { if (items[0]) { @@ -26,8 +26,12 @@ export const getSelectedNodeTimestamps = (nodes: NodeExtended[], selectedNode: N }, []) timestamps.sort((a, b) => { - const [aSplit] = a.timestamp?.split('-') || [''] - const [bSplit] = b.timestamp?.split('-') || [''] + const aTimestamp = a.properties?.timestamp || '' + const bTimestamp = b.properties?.timestamp || '' + + const [aSplit] = typeof aTimestamp === 'string' ? aTimestamp.split('-') : [''] + const [bSplit] = typeof bTimestamp === 'string' ? bTimestamp.split('-') : [''] + const aTime = videoTimeToSeconds(aSplit) const bTime = videoTimeToSeconds(bSplit)