Merge branch 'main' into fix--no-timeline-for-videos-with-no-segments

code100x · May 13, 2024 · 3574818 · 3574818
2 parents f555022 + 847e4a1
commit 3574818
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 8 deletions.
diff --git a/src/components/ContentCard.tsx b/src/components/ContentCard.tsx
@@ -70,11 +70,10 @@ export const ContentCard = ({
       {type === 'video' && (
         <div className="relative overflow-hidden rounded-md ">
           <VideoThumbnail
-            contentId={contentId}
+            contentId={contentId ?? 0}
             imageUrl={
               'https://d2szwvl7yo497w.cloudfront.net/courseThumbnails/video.png'
             }
-            duration={1}
           />
         </div>
       )}

diff --git a/src/components/VideoPlayerSegment.tsx b/src/components/VideoPlayerSegment.tsx
@@ -1,6 +1,11 @@
 'use client';
 import React, { FunctionComponent, useRef } from 'react';
-import { VideoPlayer } from '@/components/videoPlayer/VideoPlayer';
+import { VideoPlayer } from '@/components/VideoPlayer2';
+import {
+  createSegmentMarkersWithoutDuration,
+  getCurrentSegmentName,
+} from '@/lib/utils';
+import Player from 'video.js/dist/types/player';
 
 import { Segment } from '@/lib/utils';
 
@@ -30,8 +35,59 @@ export const VideoPlayerSegment: FunctionComponent<VideoProps> = ({
   videoJsOptions,
   onVideoEnd,
 }) => {
+  const playerRef = useRef<Player | null>(null);
+
   const thumbnailPreviewRef = useRef<HTMLDivElement>(null);
 
+  const overrideUpdateTime = (player: Player) => {
+    const seekBar = player
+      .getChild('ControlBar')
+      ?.getChild('ProgressControl')
+      ?.getChild('SeekBar');
+
+    if (seekBar) {
+      const mouseTimeDisplay = seekBar.getChild('mouseTimeDisplay');
+      if (mouseTimeDisplay) {
+        const timeTooltip: any = mouseTimeDisplay.getChild('timeTooltip');
+        if (timeTooltip) {
+          timeTooltip.update = function (
+            seekBarRect: any,
+            seekBarPoint: any,
+            time: string,
+          ) {
+            const segmentName = getCurrentSegmentName(time, segments);
+            this.write(`${time} - ${segmentName}`);
+
+            // Delay the execution to ensure the tooltip width is calculated after the content update
+            setTimeout(() => {
+              const tooltipWidth = this.el().offsetWidth;
+              // Calculate the offset from the right side
+              const rightOffset = tooltipWidth / 2;
+              this.el().style.right = `-${rightOffset}px`;
+
+              // Adjust the left style to 'auto' to avoid conflict with the right property
+              this.el().style.left = 'auto';
+              this.el().style.width = '200px';
+              this.el().style.fontSize = '14px';
+            }, 0);
+          };
+        } else {
+          console.error('TimeTooltip component not found.');
+        }
+      } else {
+        console.error('MouseTimeDisplay component not found.');
+      }
+    } else {
+      console.error('SeekBar component not found.');
+    }
+  };
+  const handlePlayerReady = async (player: Player) => {
+    playerRef.current = player;
+
+    createSegmentMarkersWithoutDuration(player, segments);
+    overrideUpdateTime(player);
+  };
+
   return (
     <div className="mb-6">
       <div className="flex-1 relative">
@@ -41,12 +97,12 @@ export const VideoPlayerSegment: FunctionComponent<VideoProps> = ({
           className="hidden absolute bg-no-repeat bg-cover w-[320px] h-[180px] pointer-events-none z-10"
         />
         <VideoPlayer
-          options={videoJsOptions}
-          subtitles={subtitles}
-          onVideoEnd={onVideoEnd}
-          segments={segments}
           setQuality={setQuality}
           contentId={contentId}
+          subtitles={subtitles}
+          options={videoJsOptions}
+          onVideoEnd={onVideoEnd}
+          onReady={handlePlayerReady}
         />
       </div>
     </div>

diff --git a/src/components/admin/ContentRendererClient.tsx b/src/components/admin/ContentRendererClient.tsx
@@ -97,6 +97,8 @@ export const ContentRendererClient = ({
           thumbnails={[]}
           segments={metadata?.segments || []}
           videoJsOptions={{
+            playbackrates: [0.5, 1, 1.25, 1.5, 1.75, 2],
+            controls: true,
             fluid: true,
             html5: {
               vhs: {

diff --git a/src/components/videoPlayer/videoControls.tsx b/src/components/videoPlayer/videoControls.tsx
@@ -324,7 +324,7 @@ export default function VideoPlayerControls({
         {playerPaused ? <PauseIcon className="" /> : <PlayIcon className="" />}
       </div>
       <div
-        className={`absolute bottom-0 ${playerPaused ? 'opacity-100' : 'opacity-0'} ${!isFullScreen && 'group-hover/v-container:opacity-100'} w-full z-50 transition-all py-1 before:content-[''] before:absolute before:bottom-0 before:pointer-events-none before:w-full before:aspect-[5/1] before:z-[-1] before:bg-gradient-to-t from-[#000000E6] to-transparent`}
+        className={`absolute bottom-0 ${!isFullScreen && 'group-hover/v-container:opacity-100'} w-full z-50 transition-all py-1 before:content-[''] before:absolute before:bottom-0 before:pointer-events-none before:w-full before:aspect-[5/1] before:z-[-1] before:bg-gradient-to-t from-[#000000E6] to-transparent`}
       >
         {/* timeline segments */}
         <div