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)