Demo: allow seeking even when LOADING/RELOADING

This commit builds on #1607 to allow users of the demo to seek in the
content even as it is still loading.

In real use cases, a final user might rely on e.g. seeking thumbnails to
already know where to seek to without having to wait for initial
segments to be loaded.
This is a functionality we do see with other media players, YouTube also
does this for example.

To make the seeking bar more visible, I lightly changed its CSS rules.

Also, I conditioned the appearance of the "ProgressBar" based on if the
minimum and maximum seekable positions are known, as else, seeking in
that bar is not going to lead to a precize seek. This makes the content
not seekable until the Manifest has been loaded.

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;
-}): React.JSX.Element {
+}): React.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,11 +112,16 @@ function ProgressBar({
     [player, showTimeIndicator, showThumbnail],
   );
 
+  if (isStopped) {
+    return null;
+  }
+
   const toolTipOffset =
     wrapperElementRef.current !== null
       ? wrapperElementRef.current.getBoundingClientRect().left
       : 0;
 
+<<<<<<< HEAD
   if (!isContentLoaded) {
     return (
       <div className="progress-bar-parent" ref={wrapperElementRef}>
@@ -125,6 +131,19 @@ function ProgressBar({
   }
 
   let thumbnailElement: React.JSX.Element | null = null;
+||||||| parent of 50a5f66f4 (Demo: allow seeking even when LOADING/RELOADING)
+  if (!isContentLoaded) {
+    return (
+      <div className="progress-bar-parent" ref={wrapperElementRef}>
+        <div className="progress-bar-wrapper" />
+      </div>
+    );
+  }
+
+  let thumbnailElement: JSX.Element | null = null;
+=======
+  let thumbnailElement: JSX.Element | null = null;
+>>>>>>> 50a5f66f4 (Demo: allow seeking even when LOADING/RELOADING)
   if (thumbnailIsVisible) {
     const xThumbnailPosition = tipPosition - toolTipOffset;
     if (enableVideoThumbnails && imageTime !== null) {
@@ -134,6 +153,7 @@ function ProgressBar({
     }
   }
 
+  const progressBarMaximum = livePosition ?? maximumPosition;
   return (
     <div className="progress-bar-parent" ref={wrapperElementRef}>
       {timeIndicatorVisible ? (
@@ -145,14 +165,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}
         />
       )}

demo/scripts/modules/player/events.ts

@@ -229,6 +229,7 @@ function linkPlayerEventsToState(
 
     switch (playerState) {
       case "LOADING":
+        startPositionUpdates();
         stateUpdates.useWorker = player.getCurrentModeInformation()?.useWorker === true;
         break;
       case "ENDED":
@@ -243,7 +244,6 @@ function linkPlayerEventsToState(
         stateUpdates.isPaused = false;
         break;
       case "LOADED":
-        startPositionUpdates();
         stateUpdates.isPaused = true;
         stateUpdates.isLive = player.isLive();
         break;

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;
 }