Skip to content

Commit

Permalink
fixed the bug: UI of video page is cluttered
Browse files Browse the repository at this point in the history
  • Loading branch information
TANMAY authored and TANMAY committed Apr 12, 2024
1 parent 8aa26af commit 1afd703
Show file tree
Hide file tree
Showing 7 changed files with 99 additions and 92 deletions.
2 changes: 1 addition & 1 deletion src/components/FolderView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export const FolderView = ({
return (
<div>
<div></div>
<div className="max-w-screen-xl justify-between mx-auto p-4 cursor-pointer grid grid-cols-1 gap-5 md:grid-cols-3">
<div className="max-w-screen-xl justify-between p-4 cursor-pointer grid grid-cols-1 gap-5 md:grid-cols-3">
{courseContent.map((content) => {
const videoProgressPercent =
content.type === 'video' &&
Expand Down
7 changes: 1 addition & 6 deletions src/components/Sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,13 +122,8 @@ export function Sidebar({
}

return (
<div className="overflow-y-scroll h-sidebar w-[300px] min-w-[133px] bg-gray-50 dark:bg-gray-800 cursor-pointer sticky top-[64px] self-start w-84">
<div className="overflow-y-scroll h-sidebar w-[300px] min-w-[133px] bg-gray-50 dark:bg-gray-800 cursor-pointer absolute z-30 top-[64px] self-start w-84">
<div className="flex">
{/* <ToggleButton
onClick={() => {
setSidebarOpen((s) => !s);
}}
/> */}
<GoBackButton />
</div>
<Accordion type="single" collapsible className="w-full">
Expand Down
2 changes: 1 addition & 1 deletion src/components/VideoContentChapters.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const VideoContentChapters = ({
}, [player]);

return (
<div className="w-full lg:w-1/3 rounded-md shadow-md border text-sm">
<div className="w-full rounded-md shadow-md border lg:w-[35%] text-sm">
<div className="flex items-center justify-between p-2 py-3 dark:bg-[#212020] bg-[#F5F5F5]">
<span>Chapters</span>
<X onClick={onCancel} className="cursor-pointer" />
Expand Down
144 changes: 80 additions & 64 deletions src/components/VideoPlayer2.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import React, { useEffect, useRef, FunctionComponent, useState } from 'react';
import videojs from 'video.js';
import Player from 'video.js/dist/types/player';
import 'video.js/dist/video-js.css';
import { useRecoilValue } from 'recoil';
import { sidebarOpen } from '@/store/atoms/sidebar';
import 'videojs-contrib-eme';
import 'videojs-mobile-ui/dist/videojs-mobile-ui.css';
import 'videojs-seek-buttons/dist/videojs-seek-buttons.css';
Expand Down Expand Up @@ -38,6 +40,8 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
const playerRef = useRef<Player | null>(null);
const [player, setPlayer] = useState<any>(null);
const searchParams = useSearchParams();
const isSidebarOpen = useRecoilValue(sidebarOpen);

useEffect(() => {
const t = searchParams.get('timestamp');
if (contentId && player && !t) {
Expand Down Expand Up @@ -125,71 +129,73 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
) {
return; // Do nothing if the active element is an input or textarea
}
switch (event.code) {
case 'Space': // Space bar for play/pause
if (player.paused()) {
player.play();
if (!isSidebarOpen) {
switch (event.code) {
case 'Space': // Space bar for play/pause
if (player.paused()) {
player.play();
event.stopPropagation();
} else {
player.pause();
event.stopPropagation();
}
event.preventDefault();
break;
case 'ArrowRight': // Right arrow for seeking forward 5 seconds
player.currentTime(player.currentTime() + 5);
event.stopPropagation();
} else {
player.pause();
break;
case 'ArrowLeft': // Left arrow for seeking backward 5 seconds
player.currentTime(player.currentTime() - 5);
event.stopPropagation();
}
event.preventDefault();
break;
case 'ArrowRight': // Right arrow for seeking forward 5 seconds
player.currentTime(player.currentTime() + 5);
event.stopPropagation();
break;
case 'ArrowLeft': // Left arrow for seeking backward 5 seconds
player.currentTime(player.currentTime() - 5);
event.stopPropagation();
break;
case 'KeyF': // F key for fullscreen
if (player.isFullscreen_) document.exitFullscreen();
else player.requestFullscreen();
event.stopPropagation();
break;
case 'KeyR': // 'R' key to restart playback from the beginning
player.currentTime(0);
event.stopPropagation();
break;
case 'KeyM': // 'M' key to toggle mute/unmute
if (player.volume() === 0) {
player.volume(1);
} else {
player.volume(0);
}
event.stopPropagation();
break;
case 'KeyK': // 'K' key for play/pause toggle
if (player.paused()) {
player.play();
} else {
player.pause();
}
event.stopPropagation();
break;
case 'KeyJ': // 'J' key for seeking backward 10 seconds multiplied by the playback rate
player.currentTime(
player.currentTime() - 10 * player.playbackRate(),
);
event.stopPropagation();
break;
case 'KeyL': // 'L' key for seeking forward 10 seconds multiplied by the playback rate
player.currentTime(
player.currentTime() + 10 * player.playbackRate(),
);
event.stopPropagation();
break;
case 'KeyC':
if (subtitles && player.textTracks().length) {
if (player.textTracks()[0].mode === 'showing') {
player.textTracks()[0].mode = 'hidden';
break;
case 'KeyF': // F key for fullscreen
if (player.isFullscreen_) document.exitFullscreen();
else player.requestFullscreen();
event.stopPropagation();
break;
case 'KeyR': // 'R' key to restart playback from the beginning
player.currentTime(0);
event.stopPropagation();
break;
case 'KeyM': // 'M' key to toggle mute/unmute
if (player.volume() === 0) {
player.volume(1);
} else {
player.textTracks()[0].mode = 'showing';
player.volume(0);
}
}
break;
event.stopPropagation();
break;
case 'KeyK': // 'K' key for play/pause toggle
if (player.paused()) {
player.play();
} else {
player.pause();
}
event.stopPropagation();
break;
case 'KeyJ': // 'J' key for seeking backward 10 seconds multiplied by the playback rate
player.currentTime(
player.currentTime() - 10 * player.playbackRate(),
);
event.stopPropagation();
break;
case 'KeyL': // 'L' key for seeking forward 10 seconds multiplied by the playback rate
player.currentTime(
player.currentTime() + 10 * player.playbackRate(),
);
event.stopPropagation();
break;
case 'KeyC':
if (subtitles && player.textTracks().length) {
if (player.textTracks()[0].mode === 'showing') {
player.textTracks()[0].mode = 'hidden';
} else {
player.textTracks()[0].mode = 'showing';
}
}
break;
}
}
}
};
Expand All @@ -207,7 +213,7 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
return () => {
document.removeEventListener('keydown', handleKeyPress);
};
}, [player]);
}, [player, isSidebarOpen]);

useEffect(() => {
if (!player) {
Expand Down Expand Up @@ -250,13 +256,23 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
window.clearInterval(interval);
onVideoEnd();
};
if (isSidebarOpen === true) {
// Detach event listeners
player.off('play', handleVideoProgress);
player.off('ended', handleVideoEnded);
player.controls(false);
} else {
player.on('play', handleVideoProgress);
player.on('ended', () => handleVideoEnded(interval));
player.controls(true);
}

player.on('play', handleVideoProgress);
player.on('ended', () => handleVideoEnded(interval));
return () => {
window.clearInterval(interval);
};
}, [player, contentId]);
}, [player, contentId, isSidebarOpen]);

useEffect(() => {
if (!playerRef.current && videoRef.current) {
Expand Down Expand Up @@ -355,7 +371,7 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
return (
<div
data-vjs-player
className="mx-auto md:max-w-[calc(100vw-3rem)] 2xl:max-w-[calc(100vw-17rem)]"
className=" md:max-w-[calc(100vw-3rem)] 2xl:max-w-[calc(100vw-17rem)]"
>
<div ref={videoRef} />
</div>
Expand Down
6 changes: 4 additions & 2 deletions src/components/VideoPlayerSegment.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
'use client';
import React, { FunctionComponent, useRef } from 'react';
import { VideoPlayer } from '@/components/VideoPlayer2';
import { useRecoilValue } from 'recoil';
import { sidebarOpen } from '@/store/atoms/sidebar';

import {
createSegmentMarkersWithoutDuration,
Expand Down Expand Up @@ -36,7 +38,7 @@ export const VideoPlayerSegment: FunctionComponent<VideoProps> = ({
onVideoEnd,
}) => {
const playerRef = useRef<Player | null>(null);

const isSidebarOpen = useRecoilValue(sidebarOpen);
const thumbnailPreviewRef = useRef<HTMLDivElement>(null);

const overrideUpdateTime = (player: Player) => {
Expand Down Expand Up @@ -89,7 +91,7 @@ export const VideoPlayerSegment: FunctionComponent<VideoProps> = ({
};

return (
<div className="">
<div className={`${isSidebarOpen ? 'opacity-20' : 'opacity-100'}`}>
<div className="flex-1 relative">
<div
id="thumbnail-preview"
Expand Down
28 changes: 11 additions & 17 deletions src/components/admin/ContentRendererClient.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,31 +137,25 @@ export const ContentRendererClient = ({
<div>
{/* <QualitySelector /> */}
<br />
{metadata.slides ? (

{!showChapters && metadata.segments?.length > 0 && (
<div
style={{
display: 'flex',
flexDirection: 'row-reverse',
gap: '10px',
}}
>
<a href={metadata.slides} target="_blank">
<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold rounded p-2">
Slides
</button>
</a>
<button
className="bg-blue-500 hover:bg-blue-700 text-white font-bold rounded p-2 my-6 lg:my-4"
onClick={() => {
scrollTo({ top: 0, behavior: 'smooth' });
toggleShowChapters();
}}
>
View All Chapters
</button>
</div>
) : null}
{!showChapters && metadata.segments?.length > 0 && (
<button
className="bg-blue-500 hover:bg-blue-700 text-white font-bold rounded p-2"
onClick={() => {
scrollTo({ top: 0, behavior: 'smooth' });
toggleShowChapters();
}}
>
View All Chapters
</button>
)}
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/store/atoms/sidebar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,5 @@ import { atom } from 'recoil';

export const sidebarOpen = atom({
key: 'sidebarOpen',
default: true,
default: false,
});

0 comments on commit 1afd703

Please sign in to comment.