@eluvio/elv-player-js 1.0.140 → 2.0.1

package/lib/ui/PlayerUI.jsx

@@ -0,0 +1,317 @@
+import ResetStyle from "../static/stylesheets/reset.module.scss";
+import PlayerStyles from "../static/stylesheets/player.module.scss";
+
+import React, {useEffect, useRef, useState} from "react";
+import ReactDOM from "react-dom/client";
+
+import EluvioPlayer from "../player/Player.js";
+import EluvioPlayerParameters from "../player/PlayerParameters.js";
+import {
+  ObserveInteraction,
+  ObserveKeydown,
+  ObserveMediaSession,
+  ObserveResize,
+  ObserveVisibility
+} from "./Observers.js";
+import WebControls from "./WebControls.jsx";
+import TicketForm from "./TicketForm.jsx";
+import {Spinner, UserActionIndicator} from "./Components.jsx";
+import TVControls from "./TVControls.jsx";
+import PlayerProfileForm from "./PlayerProfileForm.jsx";
+import {ImageUrl, MergeDefaultParameters} from "./Common.js";
+
+const Poster = ({player}) => {
+  const [imageUrl, setImageUrl] = useState(undefined);
+
+  const { posterImage } = (player.controls.GetContentInfo() || {});
+
+  useEffect(() => {
+    setImageUrl(undefined);
+
+    if(!posterImage) { return; }
+
+    ImageUrl({player, pathOrUrl: posterImage, width: 200})
+      .then(imageUrl => setImageUrl(imageUrl));
+  }, [posterImage]);
+
+  if(!imageUrl) { return null; }
+
+  return (
+    <img
+      alt="Video Poster"
+      src={imageUrl}
+      className={PlayerStyles["poster"]}
+    />
+  );
+};
+
+const PlayerUI = ({target, parameters, InitCallback, ErrorCallback, Unmount, Reset}) => {
+  const [player, setPlayer] = useState(undefined);
+  const [client, setClient] = useState(undefined);
+  const [size, setSize] = useState("lg");
+  const [orientation, setOrientation] = useState("landscape");
+  const [dimensions, setDimensions] = useState({
+    width: target.getBoundingClientRect().width,
+    height: target.getBoundingClientRect().height
+  });
+  const [errorMessage, setErrorMessage] = useState(undefined);
+  const [playerInitialized, setPlayerInitialized] = useState(false);
+  const [playbackStarted, setPlaybackStarted] = useState(false);
+  const [canPlay, setCanPlay] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const [showPlayerProfileForm, setShowPlayerProfileForm] = useState(false);
+  const [recentlyInteracted, setRecentlyInteracted] = useState(true);
+  const [recentUserAction, setRecentUserAction] = useState(undefined);
+  const [allowRotation, setAllowRotation] = useState(undefined);
+  const videoRef = useRef();
+
+  const playerSet = !!player;
+
+  const onUserAction = ({action, text}) => setRecentUserAction({action, text, key: Math.random()});
+
+  useEffect(() => {
+    setMounted(true);
+
+    // Observe target portal size
+    const disposeResizeObserver = ObserveResize({target, setSize, setOrientation, setDimensions});
+
+    return () => {
+      setMounted(false);
+      disposeResizeObserver && disposeResizeObserver();
+    };
+  }, []);
+
+  useEffect(() => {
+    if(!videoRef || !videoRef.current || !mounted) {
+      return;
+    }
+
+    try {
+      setPlayerInitialized(false);
+      setPlaybackStarted(false);
+
+      // Use ticket client if present
+      parameters.clientOptions.client = client || parameters.clientOptions.client;
+
+      const newPlayer = new EluvioPlayer({
+        target,
+        video: videoRef.current,
+        parameters,
+        SetErrorMessage: setErrorMessage
+      });
+
+      window.__elvPlayer = newPlayer;
+
+      // Observe player settings to keep track of whether playback has started
+      const disposePlayerSettingsListener = newPlayer.controls.RegisterSettingsListener(
+        () => {
+          setAllowRotation(newPlayer.controls.AllowRotation());
+          setPlaybackStarted(newPlayer.playbackStarted);
+          setPlayerInitialized(!newPlayer.loading);
+          setShowPlayerProfileForm(newPlayer.__showPlayerProfileForm);
+        }
+      );
+
+      // Destroy method for external use - destroys internal player and unmounts react
+      newPlayer.Destroy = () => {
+        newPlayer.__DestroyPlayer();
+        Unmount();
+      };
+
+      newPlayer.Reset = () => {
+        Reset();
+      };
+
+      // Observe whether player is visible for autoplay/mute on visibility functionality
+      const disposeVisibilityObserver = ObserveVisibility({player: newPlayer});
+
+      // Observe interaction for autohiding control elements
+      const disposeInteractionObserver = ObserveInteraction({
+        player: newPlayer,
+        inactivityPeriod: 5000,
+        onWake: () => setRecentlyInteracted(true),
+        onSleep: () => setRecentlyInteracted(false)
+      });
+
+      // Keyboard controls
+      const disposeKeyboardControls = ObserveKeydown({
+        player: newPlayer,
+        setRecentUserAction: onUserAction
+      });
+
+      // Media session
+      const disposeMediaSessionObserver = ObserveMediaSession({player: newPlayer});
+
+      InitCallback(newPlayer);
+      setPlayer(newPlayer);
+
+      // Can play
+      const disposeCanPlayListener = newPlayer.controls.RegisterVideoEventListener("canplay", () => setCanPlay(true));
+
+      return () => {
+        videoRef && videoRef.current && videoRef.current.removeEventListener("play", setPlaybackStarted);
+
+        disposePlayerSettingsListener && disposePlayerSettingsListener();
+        disposeVisibilityObserver && disposeVisibilityObserver();
+        disposeInteractionObserver && disposeInteractionObserver();
+        disposeKeyboardControls && disposeKeyboardControls();
+        disposeMediaSessionObserver && disposeMediaSessionObserver();
+        disposeCanPlayListener && disposeCanPlayListener();
+
+        newPlayer && newPlayer.__DestroyPlayer();
+      };
+    } catch(error) {
+      ErrorCallback(error);
+      Unmount();
+    }
+  }, [videoRef, mounted, client]);
+
+  useEffect(() => {
+    if(!playerSet) { return; }
+
+    // Clean up player when unmounting
+    return () => {
+      player && player.__DestroyPlayer();
+      setPlayer(undefined);
+    };
+  }, [playerSet]);
+
+  if(parameters.clientOptions.promptTicket && !client) {
+    return (
+      <TicketForm
+        parameters={parameters}
+        dimensions={{size, orientation, ...dimensions}}
+        onComplete={ticketClient => setClient(ticketClient)}
+      />
+    );
+  }
+
+  const shouldRotate =
+    parameters.playerOptions.ui === EluvioPlayerParameters.ui.WEB &&
+    player &&
+    player.controls.IsRotatable() &&
+    allowRotation;
+
+  return (
+    <div
+      role="complementary"
+      aria-label="Eluvio Video Player"
+      tabIndex={0}
+      style={{
+        backgroundColor: parameters.playerOptions.backgroundColor || "transparent",
+        "--portal-width": `${dimensions.width}px`,
+        "--portal-height": `${dimensions.height}px`
+      }}
+      className={[PlayerStyles["player-container"], shouldRotate ? PlayerStyles["player-container--rotated"] : "", `__eluvio-player--size-${size}`, `__eluvio-player--orientation-${orientation}`].join(" ")}
+    >
+      {
+        !showPlayerProfileForm || !playerInitialized ? null :
+          <PlayerProfileForm player={player} Close={() => player.controls.HidePlayerProfileForm()} />
+      }
+      <video
+        playsInline
+        disablePictureInPicture
+        ref={videoRef}
+        muted={[EluvioPlayerParameters.muted.ON, EluvioPlayerParameters.muted.WHEN_NOT_VISIBLE].includes(parameters.playerOptions.muted)}
+        controls={parameters.playerOptions.controls === EluvioPlayerParameters.controls.DEFAULT}
+        loop={parameters.playerOptions.loop === EluvioPlayerParameters.loop.ON}
+        className={PlayerStyles.video}
+      />
+      {
+        !player || playbackStarted || !canPlay ? null :
+          <Poster player={player} />
+      }
+      {
+        playerInitialized || errorMessage ? null :
+          <div className={PlayerStyles["spinner-container"]}>
+            <Spinner className={PlayerStyles["spinner"]} />
+          </div>
+      }
+      {
+        !errorMessage ? null :
+          <div className={PlayerStyles["error-message"]}>{ errorMessage }</div>
+      }
+      {
+        !player ? null :
+          parameters.playerOptions.ui === EluvioPlayerParameters.ui.WEB ?
+            <WebControls
+              player={player}
+              playbackStarted={!!playbackStarted}
+              canPlay={canPlay}
+              recentlyInteracted={recentlyInteracted}
+              setRecentUserAction={onUserAction}
+              className={PlayerStyles.controls}
+            /> :
+            <TVControls
+              player={player}
+              playbackStarted={!!playbackStarted}
+              canPlay={canPlay}
+              recentlyInteracted={recentlyInteracted}
+              setRecentUserAction={onUserAction}
+              className={PlayerStyles.controls}
+            />
+      }
+      {
+        !recentUserAction ? null :
+          <UserActionIndicator
+            action={recentUserAction}
+            key={`action-indicator-${recentUserAction && recentUserAction.key}`}
+          />
+      }
+    </div>
+  );
+};
+
+const PlayerWrapper = (args) => {
+  const [playerKey, setPlayerKey] = useState(Math.random());
+
+  return (
+    <PlayerUI
+      {...args}
+      key={`player-${playerKey}`}
+      Reset={() => setPlayerKey(Math.random())}
+    />
+  );
+};
+
+const Initialize = (target, parameters) => {
+  target.innerHTML = "";
+  target.classList.add(ResetStyle.reset);
+  target.classList.add(PlayerStyles["player-target"]);
+
+  parameters = MergeDefaultParameters(parameters);
+
+  if(parameters.playerOptions && parameters.playerOptions.backgroundColor) {
+    target.style.backgroundColor = parameters.playerOptions.backgroundColor;
+  }
+
+  return new Promise((resolve, reject) => {
+    const root = ReactDOM.createRoot(target);
+
+    root.render(
+      <React.StrictMode>
+        <PlayerWrapper
+          target={target}
+          parameters={parameters}
+          InitCallback={resolve}
+          ErrorCallback={reject}
+          Unmount={async () => {
+            try {
+              await root.unmount();
+            } catch(error) {
+              // eslint-disable-next-line no-console
+              console.error("Failed to unmount Eluvio Player");
+              // eslint-disable-next-line no-console
+              console.error(error);
+            }
+          }
+          }
+        />
+      </React.StrictMode>
+    );
+  });
+};
+
+
+export default Initialize;
+

package/lib/ui/TVControls.jsx

@@ -0,0 +1,337 @@
+import ControlStyles from "../static/stylesheets/controls-tv.module.scss";
+
+// eslint-disable-next-line no-unused-vars
+import React, {useEffect, useState} from "react";
+import * as Icons from "../static/icons/Icons.js";
+import {ObserveVideo, ObserveVideoTime} from "./Observers.js";
+import "focus-visible";
+import {ImageUrl, PlayerClick, Time} from "./Common.js";
+import EluvioPlayerParameters from "../player/PlayerParameters.js";
+
+import EluvioLogo from "../static/images/Logo.png";
+import {CollectionMenu, SeekBar, SettingsMenu, SVG, VolumeControls} from "./Components.jsx";
+
+export const IconButton = ({icon, ...props}) => {
+  return (
+    <button {...props} className={`${ControlStyles["icon-button"]} ${props.className || ""}`} dangerouslySetInnerHTML={{__html: icon}} />
+  );
+};
+
+const TimeIndicator = ({player, videoState}) => {
+  const [currentTime, setCurrentTime] = useState(player.video.currentTime);
+
+  useEffect(() => {
+    const disposeVideoTimeObserver = ObserveVideoTime({video: player.video, setCurrentTime, rate: 10});
+
+    return () => disposeVideoTimeObserver && disposeVideoTimeObserver();
+  }, []);
+
+  if(player.isLive) {
+    return null;
+  }
+
+  return (
+    <div className={ControlStyles["time-container"]}>
+      <div className={ControlStyles["time"]}>
+      { Time(currentTime, videoState.duration) }
+      </div>
+      <div className={ControlStyles["spacer"]} />
+      <div className={ControlStyles["time"]}>
+        { Time(videoState.duration, videoState.duration) }
+      </div>
+    </div>
+  );
+};
+
+const CenterButtons = ({player, videoState}) => {
+  const collectionInfo = player.controls.GetCollectionInfo();
+
+  const previousMedia = collectionInfo && collectionInfo.isPlaylist && collectionInfo.content[collectionInfo.mediaIndex - 1];
+  const nextMedia = collectionInfo && collectionInfo.isPlaylist && collectionInfo.content[collectionInfo.mediaIndex + 1];
+
+  const playerReady = player.controls.IsReady();
+  return (
+    <div className={ControlStyles["center-buttons"]}>
+      {
+        !previousMedia && !nextMedia ? null :
+          <IconButton
+            disabled={!playerReady || !previousMedia}
+            icon={Icons.PreviousTrackIcon}
+            onClick={() => player.controls.CollectionPlayPrevious()}
+            className={`${ControlStyles["track-button"]} ${ControlStyles["icon-button--drop-shadow-focus"]}`}
+          />
+      }
+      <IconButton
+        aria-label="Back 10 Seconds"
+        icon={Icons.BackwardCircleIcon}
+        onClick={() => player.controls.Seek({relativeSeconds: -10})}
+        className={ControlStyles["icon-button--drop-shadow-focus"]}
+      />
+      <IconButton
+        aria-label={videoState.playing ? "Pause" : "Play"}
+        icon={videoState.playing ? Icons.PauseCircleIcon : Icons.PlayCircleIcon}
+        onClick={() => player.controls.TogglePlay()}
+        className={`${ControlStyles["play-pause-button"]} ${ControlStyles["icon-button--drop-shadow-focus"]}`}
+      />
+      <IconButton
+        aria-label="Forward 10 Seconds"
+        icon={Icons.ForwardCircleIcon}
+        onClick={() => player.controls.Seek({relativeSeconds: 10})}
+        className={ControlStyles["icon-button--drop-shadow-focus"]}
+      />
+      {
+        !previousMedia && !nextMedia ? null :
+          <IconButton
+            disabled={!playerReady || !nextMedia}
+            icon={Icons.NextTrackIcon}
+            onClick={() => player.controls.CollectionPlayNext()}
+            className={`${ControlStyles["track-button"]} ${ControlStyles["icon-button--drop-shadow-focus"]}`}
+          />
+      }
+    </div>
+  );
+};
+
+const MenuButton = ({label, icon, children, player, setMenuActive, MenuComponent}) => {
+  const [show, setShow] = useState(false);
+
+  return (
+    <div className={ControlStyles["menu-control-container"]}>
+      {
+        icon ?
+          <IconButton
+            aria-label={show ? `Hide ${label} Menu` : label}
+            aria-haspopup
+            icon={icon}
+            onClick={() => {
+              setMenuActive(!show);
+              setShow(!show);
+            }}
+            className={`${ControlStyles["icon-button--circle-focus"]} ${show ? ControlStyles["icon-button-active"] : ""}`}
+          /> :
+          <button
+            onClick={() => {
+              setMenuActive(!show);
+              setShow(!show);
+            }}
+            className={`${ControlStyles["text-button"]} ${show ? ControlStyles["text-button--active"] : ""}`}
+          >
+            { children }
+          </button>
+      }
+      {
+        !show ? null :
+          <MenuComponent
+            player={player}
+            Hide={() => {
+              setShow(false);
+              setMenuActive(false);
+            }}
+            className={ControlStyles["menu"]}
+          />
+      }
+    </div>
+  );
+};
+
+const InfoBox = ({player, Hide}) => {
+  const [imageUrl, setImageUrl] = useState(undefined);
+
+  const {title, description, image, headers} = player.controls.GetContentInfo() || {};
+
+  useEffect(() => {
+    setImageUrl(undefined);
+
+    if(!image) { return; }
+
+    ImageUrl({player, pathOrUrl: image, width: 200})
+      .then(imageUrl => setImageUrl(imageUrl));
+  }, [image]);
+
+  useEffect(() => {
+    const onEscape = event => {
+      if(event && (event.key || "").toLowerCase() === "escape") {
+        Hide();
+      }
+    };
+
+    document.body.addEventListener("keydown", onEscape);
+
+    return () => document.body.removeEventListener("keydown", onEscape);
+  }, []);
+
+  return (
+    <div className={ControlStyles["info-box-container"]}>
+      <button
+        autoFocus
+        onClick={() => Hide()}
+        className={`${ControlStyles["info-box-button"]} ${ControlStyles["info-box-button--info"]}`}
+      >
+        Info
+      </button>
+      <div className={ControlStyles["info-box"]}>
+        {
+          !imageUrl ? null :
+            <div className={ControlStyles["info-box-image-container"]}>
+              <img src={imageUrl} alt="Image" className={ControlStyles["info-box-image"]}/>
+            </div>
+        }
+        <div className={`${ControlStyles["info-box-text"]} ${imageUrl && headers && headers.length === 0 ? ControlStyles["info-box-text--top-padding"] : ""}`}>
+          {
+            !headers || headers.length === 0 ? null :
+              <div className={ControlStyles["info-box-headers"]}>
+                {headers.map((text, index) =>
+                  <div key={`header-${index}`} className={ControlStyles["info-box-header"]}>
+                    { text }
+                  </div>
+                )}
+              </div>
+          }
+          <div className={ControlStyles["info-box-title"]}>
+            { title || "" }
+          </div>
+          <div className={ControlStyles["info-box-description"]}>
+            { description || "" }
+          </div>
+        </div>
+        <div className={ControlStyles["info-box-actions"]}>
+          <button
+            onClick={() => {
+              player.controls.Seek({time: 0});
+              Hide();
+            }}
+            className={`${ControlStyles["info-box-button"]} ${ControlStyles["info-box-button--restart"]}`}
+          >
+            <SVG icon={Icons.PlayIcon} />
+            From Beginning
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+
+const TVControls = ({player, playbackStarted, canPlay, recentlyInteracted, setRecentUserAction, className=""}) => {
+  const [videoState, setVideoState] = useState(undefined);
+  const [playerClickHandler, setPlayerClickHandler] = useState(undefined);
+  const [menuActive, setMenuActive] = useState(false);
+  const [showInfo, setShowInfo] = useState(false);
+
+  useEffect(() => {
+    setPlayerClickHandler(PlayerClick({player, setRecentUserAction}));
+
+    const disposeVideoObserver = ObserveVideo({target: player.target, video: player.video, setVideoState});
+
+    return () => disposeVideoObserver && disposeVideoObserver();
+  }, []);
+
+  if(!videoState) {
+    return null;
+  }
+
+  const { title } = (player.controls.GetContentInfo() || {});
+
+  const collectionInfo = player.controls.GetCollectionInfo();
+
+  // Title autohide is not dependent on controls settings
+  const showUI = recentlyInteracted || !playbackStarted || menuActive;
+  const hideControls = !showUI && player.playerOptions.controls === EluvioPlayerParameters.controls.AUTO_HIDE;
+
+  player.__SetControlsVisibility(!hideControls);
+
+  return (
+    <div
+      key="controls"
+      onClick={playerClickHandler}
+      className={[
+        className,
+        ControlStyles["container"],
+        showUI ? "" : ControlStyles["autohide"],
+        player.playerOptions.controls !== EluvioPlayerParameters.controls.DEFAULT ? "" : ControlStyles["container--default-controls"],
+        menuActive ? "menu-active" : ""
+      ].join(" ")}
+    >
+      <IconButton
+        aria-label="Play"
+        tabIndex={playbackStarted ? -1 : 0}
+        icon={Icons.CenterPlayCircleIcon}
+        onClick={() => {
+          player.controls.Play();
+          // Take focus off of this button because it should no longer be selectable after playback starts
+          player.target.firstChild.focus();
+        }}
+        className={`${ControlStyles["center-play-button"]} ${ControlStyles["icon-button--drop-shadow-focus"]} ${canPlay && !playbackStarted ? "" : ControlStyles["center-play-button--hidden"]}`}
+      />
+      {
+        showInfo ?
+          <InfoBox player={player} Hide={() => setShowInfo(false)} /> :
+          <div className={`${ControlStyles["bottom-controls-container"]} ${hideControls ? ControlStyles["bottom-controls-container--autohide"] : ""}`}>
+            <div className={ControlStyles["bottom-controls-gradient"]} />
+            <div className={ControlStyles["title-container"]}>
+              <div className={ControlStyles["title"]}>
+                {
+                  (
+                    player.playerOptions.title === EluvioPlayerParameters.title.OFF ||
+                    (player.playerOptions.title === EluvioPlayerParameters.title.FULLSCREEN_ONLY && !player.controls.IsFullscreen())
+                  ) ? "" : title || ""
+                }
+              </div>
+              <div className={ControlStyles["spacer"]}/>
+              {
+                !player.isLive ? null :
+                  <div className={ControlStyles["live-indicator"]}>
+                    Live
+                  </div>
+              }
+              {
+                !collectionInfo ? null :
+                  <MenuButton
+                    label="Collection Menu"
+                    icon={Icons.CollectionIcon}
+                    player={player}
+                    setMenuActive={setMenuActive}
+                    MenuComponent={CollectionMenu}
+                  />
+              }
+
+            </div>
+            <SeekBar player={player} videoState={videoState} setRecentUserAction={setRecentUserAction} />
+            <TimeIndicator player={player} videoState={videoState}/>
+            <div className={ControlStyles["bottom-controls"]}>
+              <div className={ControlStyles["bottom-left-controls"]}>
+                {
+                  !title || player.playerOptions.title === EluvioPlayerParameters.title.OFF ? null :
+                    <button className={ControlStyles["text-button"]} onClick={() => setShowInfo(true)}>Info</button>
+                }
+              </div>
+              <CenterButtons player={player} videoState={videoState}/>
+              <div className={ControlStyles["bottom-right-controls"]}>
+                {
+                  !player.controls.GetOptions().hasAnyOptions ? null :
+                    <MenuButton
+                      key="settings-button"
+                      label="Settings"
+                      player={player}
+                      MenuComponent={SettingsMenu}
+                      setMenuActive={setMenuActive}
+                    >
+                      Settings
+                    </MenuButton>
+                }
+              </div>
+            </div>
+          </div>
+      }
+      {
+        // Watermark
+        player.playerOptions.watermark === EluvioPlayerParameters.watermark.OFF ? null :
+          <div className={ControlStyles["watermark"]}>
+            <img src={EluvioLogo} alt="Eluvio" />
+          </div>
+      }
+    </div>
+  );
+};
+
+export default TVControls;