diff --git a/src/components/FolderView.tsx b/src/components/FolderView.tsx index 330932448..33c78d38d 100644 --- a/src/components/FolderView.tsx +++ b/src/components/FolderView.tsx @@ -35,7 +35,6 @@ export const FolderView = ({ courseContent, currentfilter, ); - if (filteredCourseContent?.length === 0) { const filterMessages = { watched: "You haven't completed any content in this section yet.", diff --git a/src/components/VideoPlayer2.tsx b/src/components/VideoPlayer2.tsx index 6e317c1ca..00c371f0d 100644 --- a/src/components/VideoPlayer2.tsx +++ b/src/components/VideoPlayer2.tsx @@ -349,7 +349,8 @@ export const VideoPlayer: FunctionComponent = ({ }, [player]); useEffect(() => { - const t = searchParams.get('timestamp'); + const t = searchParams.get('timestamp'); + if (contentId && player && !t) { fetch(`/api/course/videoProgress?contentId=${contentId}`).then( async (res) => { @@ -573,51 +574,45 @@ export const VideoPlayer: FunctionComponent = ({ }, [player]); useEffect(() => { - if (!player) { - return; - } - let interval = 0; - const handleVideoProgress = () => { - if (!player) { - return; - } - interval = window.setInterval( - async () => { - if (!player) { - return; - } - //@ts-ignore - if (player?.paused()) { - return; - } - const currentTime = player.currentTime(); - if (currentTime <= 20) { - return; - } - await fetch('/api/course/videoProgress', { - body: JSON.stringify({ - currentTimestamp: currentTime, - contentId, - }), - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - }); + if (!player) return; + let interval: number | null = null; + + const sendProgress = async () => { + if (!player || player.paused()) return; + const currentTime = player.currentTime(); + await fetch('/api/course/videoProgress', { + body: JSON.stringify({ + currentTimestamp: currentTime, + contentId, + }), + method: 'POST', + headers: { + 'Content-Type': 'application/json', }, - Math.ceil((100 * 1000) / player.playbackRate()), - ); + }); }; - const handleVideoEnded = (interval: number) => { - handleMarkAsCompleted(true, contentId); - window.clearInterval(interval); - onVideoEnd(); + + const startInterval = () => { + if (interval) return; + interval = window.setInterval(sendProgress, 10000); }; - - player.on('play', handleVideoProgress); - player.on('ended', () => handleVideoEnded(interval)); + + const stopInterval = () => { + if (interval) { + clearInterval(interval); + interval = null; + } + }; + + player.on('play', startInterval); + player.on('pause', stopInterval); + player.on('ended', stopInterval); + return () => { - window.clearInterval(interval); + stopInterval(); + player.off('play', startInterval); + player.off('pause', stopInterval); + player.off('ended', stopInterval); }; }, [player, contentId]); diff --git a/src/components/admin/ContentRenderer.tsx b/src/components/admin/ContentRenderer.tsx index eb5b1663e..c441469c6 100644 --- a/src/components/admin/ContentRenderer.tsx +++ b/src/components/admin/ContentRenderer.tsx @@ -154,7 +154,6 @@ export const ContentRenderer = async ({ // @ts-ignore const appxVideoId: string = metadata?.appxVideoJSON?.[appxCourseId] ?? ''; - return (
( - contents.map((content: any) => [ + contents.map((content: any) => { + const metadata = getVideoMetaData.find( + (metadata:any) => metadata.contentId === content.id + ); + // Get the segments array + const segments = metadata?.segments || []; + // Get the last end value + const lastEnd = segments.length > 0 ? segments[segments.length - 1].end : null; + + + return [ content.id, { ...content, @@ -301,11 +321,11 @@ export const getFullCourseContent = async ( markAsCompleted: videoProgress.find( (x) => x.contentId === content.id, )?.markAsCompleted, - videoFullDuration: content.VideoMetadata?.duration, + videoFullDuration: lastEnd } : null, }, - ]), + ]}), ); const rootContents: FullCourseContent[] = [];