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;
-}): 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}
         />
       )}

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

doc/api/Player_States.md

@@ -124,8 +124,7 @@ limitation.
 While this state is active, multiple player API are unavailable:
 
 - you cannot play or pause
-- you cannot seek
-- you cannot obtain the last playing position or the content duration
+- you cannot obtain the previous playing position or the content duration
 
 This is why we sometime recommend to manage this state as if it was the `LOADING` state
 (where those APIs - and other - are also not available).