Merge pull request #1610 from canalplus/demo/initial-seek-sooner

Demo: allow seeking even when LOADING/RELOADING
canalplus · Dec 23, 2024 · 5e0767c · 5e0767c
2 parents 0988a00 + b66df10
commit 5e0767c
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 15 deletions.
diff --git a/demo/scripts/controllers/ProgressBar.tsx b/demo/scripts/controllers/ProgressBar.tsx
@@ -4,6 +4,7 @@ import ToolTip from "../components/ToolTip";
 import VideoThumbnail from "../components/VideoThumbnail";
 import useModuleState from "../lib/useModuleState";
 import type { IPlayerModule } from "../modules/player/index";
+import isNullOrUndefined from "../../../src/utils/is_null_or_undefined";
 
 function ProgressBar({
   player,
@@ -13,10 +14,10 @@ function ProgressBar({
   player: IPlayerModule;
   enableVideoThumbnails: boolean;
   onSeek: () => void;
-}): JSX.Element {
+}): JSX.Element | null {
   const bufferGap = useModuleState(player, "bufferGap");
   const currentTime = useModuleState(player, "currentTime");
-  const isContentLoaded = useModuleState(player, "isContentLoaded");
+  const isStopped = useModuleState(player, "isStopped");
   const isLive = useModuleState(player, "isLive");
   const minimumPosition = useModuleState(player, "minimumPosition");
   const livePosition = useModuleState(player, "livePosition");
@@ -111,19 +112,15 @@ function ProgressBar({
     [player, showTimeIndicator, showThumbnail],
   );
 
+  if (isStopped) {
+    return null;
+  }
+
   const toolTipOffset =
     wrapperElementRef.current !== null
       ? wrapperElementRef.current.getBoundingClientRect().left
       : 0;
 
-  if (!isContentLoaded) {
-    return (
-      <div className="progress-bar-parent" ref={wrapperElementRef}>
-        <div className="progress-bar-wrapper" />
-      </div>
-    );
-  }
-
   let thumbnailElement: JSX.Element | null = null;
   if (thumbnailIsVisible) {
     const xThumbnailPosition = tipPosition - toolTipOffset;
@@ -134,6 +131,7 @@ function ProgressBar({
     }
   }
 
+  const progressBarMaximum = livePosition ?? maximumPosition;
   return (
     <div className="progress-bar-parent" ref={wrapperElementRef}>
       {timeIndicatorVisible ? (
@@ -145,14 +143,16 @@ function ProgressBar({
         />
       ) : null}
       {thumbnailElement}
-      {currentTime === undefined ? null : (
+      {currentTime === undefined ||
+      isNullOrUndefined(minimumPosition) ||
+      isNullOrUndefined(progressBarMaximum) ? null : (
         <ProgressbarComponent
           seek={seek}
           onMouseOut={hideToolTips}
           onMouseMove={onMouseMove}
           position={currentTime}
           minimumPosition={minimumPosition}
-          maximumPosition={livePosition ?? maximumPosition}
+          maximumPosition={progressBarMaximum}
           bufferGap={bufferGap}
         />
       )}

diff --git a/demo/scripts/modules/player/events.ts b/demo/scripts/modules/player/events.ts
@@ -216,6 +216,7 @@ function linkPlayerEventsToState(
 
     switch (playerState) {
       case "LOADING":
+        startPositionUpdates();
         stateUpdates.useWorker = player.getCurrentModeInformation()?.useWorker === true;
         break;
       case "ENDED":
@@ -230,7 +231,6 @@ function linkPlayerEventsToState(
         stateUpdates.isPaused = false;
         break;
       case "LOADED":
-        startPositionUpdates();
         stateUpdates.isPaused = true;
         stateUpdates.isLive = player.isLive();
         break;

diff --git a/demo/styles/style.css b/demo/styles/style.css
@@ -360,7 +360,7 @@ header .right {
   cursor: pointer;
   display: flex;
   position: relative;
-  background-color: #000;
+  background-color: #333333;
   width: 100%;
   margin: auto;
   transition: all 0.2s ease;
@@ -387,7 +387,7 @@ header .right {
 .progress-bar-buffered {
   position: absolute;
   height: 100%;
-  background-color: #333;
+  background-color: #686868;
   z-index: 2;
   transition-duration: 0.3s;
 }