diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index 2df767bb4..3517405c9 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -1,5 +1,5 @@ 'use client'; -import { useRouter } from 'next/navigation'; +import { usePathname, useRouter } from 'next/navigation'; import { Accordion, AccordionContent, @@ -23,7 +23,34 @@ export function Sidebar({ courseId: string; }) { const router = useRouter(); + const pathName = usePathname(); + const [sidebarOpen, setSidebarOpen] = useRecoilState(sidebarOpenAtom); + const [currentActiveContentIds, setCurrentActiveContentIds] = useState< + number[] + >([]); + + useEffect(() => { + const urlRegex = /\/courses\/.*./; + const courseUrlRegex = /\/courses\/\d+((?:\/\d+)+)/; + + if (urlRegex.test(pathName)) { + const matchArray = pathName.match(courseUrlRegex); + let currentUrlContentId; + // if matchArray is not null + if (matchArray) { + const urlPathString = matchArray[1]; + currentUrlContentId = Number( + urlPathString.slice(urlPathString.length - 1), + ); // get last content id from pathString e.g '/1/2' => 2 (number) + } + const pathArray = findPathToContent( + fullCourseContent, + currentUrlContentId, + ); + setCurrentActiveContentIds(pathArray); + } + }, [pathName]); useEffect(() => { if (window.innerWidth < 500) { @@ -65,13 +92,20 @@ export function Sidebar({ const renderContent = (contents: any) => { return contents.map((content: any) => { + const isActiveContent = currentActiveContentIds?.some( + (id) => content.id === id, + ); if (content.children && content.children.length > 0) { // This is a folder with children return ( {content.title} @@ -87,7 +121,11 @@ export function Sidebar({ return (
{ navigateToContent(content.id); }} diff --git a/src/components/VideoPlayer2.tsx b/src/components/VideoPlayer2.tsx index 87342c837..bafee82d6 100644 --- a/src/components/VideoPlayer2.tsx +++ b/src/components/VideoPlayer2.tsx @@ -12,6 +12,7 @@ import 'videojs-seek-buttons'; import { handleMarkAsCompleted } from '@/lib/utils'; import { useSearchParams } from 'next/navigation'; import './QualitySelectorControllBar'; +import { YoutubeRenderer } from './YoutubeRenderer'; // todo correct types interface VideoPlayerProps { @@ -38,6 +39,7 @@ export const VideoPlayer: FunctionComponent = ({ const playerRef = useRef(null); const [player, setPlayer] = useState(null); const searchParams = useSearchParams(); + const vidUrl = options.sources[0].src; useEffect(() => { const t = searchParams.get('timestamp'); if (contentId && player && !t) { @@ -352,6 +354,16 @@ export const VideoPlayer: FunctionComponent = ({ player.currentTime(parseInt(t, 10)); } }, [searchParams, player]); + + const isYoutubeUrl = (url: string) => { + const regex = /^https:\/\/www\.youtube\.com\/embed\/[a-zA-Z0-9_-]+/; + return regex.test(url); + }; + + if (isYoutubeUrl(vidUrl)) { + return ; + } + return (
= ({ }; return ( -
+
= ({ + url, +}) => { + return ( +
+ +
+ ); +}; diff --git a/src/components/admin/ContentRendererClient.tsx b/src/components/admin/ContentRendererClient.tsx index d864a5f3a..46344a3f7 100644 --- a/src/components/admin/ContentRendererClient.tsx +++ b/src/components/admin/ContentRendererClient.tsx @@ -118,7 +118,6 @@ export const ContentRendererClient = ({ setContentCompleted(true); }} /> -
@@ -136,7 +135,6 @@ export const ContentRendererClient = ({
{/* */} -
{metadata.slides ? (
0 && (