@eluvio/elv-player-js 2.0.21 → 2.0.23

package/lib/ui/TVControls.jsx

@@ -9,7 +9,14 @@ import {ImageUrl, PlayerClick, Time} from "./Common.js";
 import EluvioPlayerParameters from "../player/PlayerParameters.js";
 
 import EluvioLogo from "../static/images/Logo.png";
-import {CollectionMenu, ContentVerificationMenu, SeekBar, SettingsMenu, SVG, VolumeControls} from "./Components.jsx";
+import {
+  CollectionMenu,
+  ContentVerificationMenu,
+  DVRToggle,
+  SeekBar,
+  SettingsMenu,
+  SVG
+} from "./Components.jsx";
 
 export const IconButton = ({icon, ...props}) => {
   return (
@@ -21,7 +28,7 @@ const TimeIndicator = ({player, videoState}) => {
   const [currentTime, setCurrentTime] = useState(player.video.currentTime);
 
   useEffect(() => {
-    const disposeVideoTimeObserver = ObserveVideoTime({video: player.video, setCurrentTime, rate: 10});
+    const disposeVideoTimeObserver = ObserveVideoTime({player, setCurrentTime, rate: 10});
 
     return () => disposeVideoTimeObserver && disposeVideoTimeObserver();
   }, []);
@@ -250,7 +257,7 @@ const TVControls = ({player, playbackStarted, canPlay, recentlyInteracted, setRe
   useEffect(() => {
     setPlayerClickHandler(PlayerClick({player, setRecentUserAction}));
 
-    const disposeVideoObserver = ObserveVideo({target: player.target, video: player.video, setVideoState});
+    const disposeVideoObserver = ObserveVideo({player, setVideoState});
 
     return () => disposeVideoObserver && disposeVideoObserver();
   }, []);
@@ -290,7 +297,7 @@ const TVControls = ({player, playbackStarted, canPlay, recentlyInteracted, setRe
           // 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"]}`}
+        className={`${ControlStyles["center-play-button"]} ${ControlStyles["icon-button--drop-shadow-focus"]} ${(canPlay && !playbackStarted && !player.casting) ? "" : ControlStyles["center-play-button--hidden"]}`}
       />
       {
         showInfo ?
@@ -309,13 +316,8 @@ const TVControls = ({player, playbackStarted, canPlay, recentlyInteracted, setRe
               <div className={ControlStyles["spacer"]}/>
               {
                 !player.isLive ? null :
-                  player.dvrEnabled ?
-                    <button
-                      onClick={() => player.controls.Seek({time: player.controls.GetDuration() - 2})}
-                      className={`${ControlStyles["live-indicator"]} ${player.isLive && player.behindLiveEdge ? ControlStyles["live-indicator--faded"] : ""}`}
-                    >
-                      Live
-                    </button> :
+                  player.controls.IsDVRAvailable() ?
+                    <DVRToggle player={player} /> :
                     <div className={ControlStyles["live-indicator"]}>
                       Live
                     </div>
@@ -343,6 +345,18 @@ const TVControls = ({player, playbackStarted, canPlay, recentlyInteracted, setRe
               <CenterButtons player={player} videoState={videoState}/>
               <div className={ControlStyles["bottom-right-controls"]}>
                 <ContentVerificationControls player={player} />
+                {
+                  !player.airplayAvailable ? null :
+                    <IconButton
+                      aria-label="Airplay"
+                      onClick={() => player.video.webkitShowPlaybackTargetPicker()}
+                      icon={Icons.AirplayIcon}
+                    />
+                }
+                {
+                  !player.chromecastAvailable ? null :
+                    <google-cast-launcher></google-cast-launcher>
+                }
                 {
                   !player.controls.GetOptions().hasAnyOptions ? null :
                     <MenuButton

package/lib/ui/WebControls.jsx

@@ -9,7 +9,7 @@ import {ImageUrl, PlayerClick, Time} from "./Common.js";
 import EluvioPlayerParameters from "../player/PlayerParameters.js";
 
 import EluvioLogo from "../static/images/Logo.png";
-import {CollectionMenu, ContentVerificationMenu, SeekBar, SettingsMenu, VolumeControls} from "./Components.jsx";
+import {ContentVerificationMenu, DVRToggle, SeekBar, SettingsMenu, VolumeControls} from "./Components.jsx";
 
 export const IconButton = ({icon, className="", ...props}) => {
   return (
@@ -21,12 +21,12 @@ const TimeIndicator = ({player, videoState}) => {
   const [currentTime, setCurrentTime] = useState(player.video.currentTime);
 
   useEffect(() => {
-    const disposeVideoTimeObserver = ObserveVideoTime({video: player.video, setCurrentTime, rate: 10});
+    const disposeVideoTimeObserver = ObserveVideoTime({player, setCurrentTime, rate: 10});
 
     return () => disposeVideoTimeObserver && disposeVideoTimeObserver();
   }, []);
 
-  if(player.isLive && !player.dvrEnabled) {
+  if(player.isLive && !player.controls.IsDVRAvailable()) {
     return (
       <div className={ControlStyles["live-indicator"]}>
         Live
@@ -37,19 +37,17 @@ const TimeIndicator = ({player, videoState}) => {
   return (
     <div className={ControlStyles["time"]}>
       {
-        !player.isLive ? null :
-          <button
-            onClick={() => player.controls.Seek({time: player.controls.GetDuration() - 2})}
-            className={`${ControlStyles["live-indicator"]} ${player.isLive && player.behindLiveEdge ? ControlStyles["live-indicator--faded"] : ""}`}
-          >
-            Live
-          </button>
+        !player.isLive || !player.controls.IsDVRAvailable() ? null :
+          <DVRToggle player={player} />
       }
       {
         player.isLive && !player.behindLiveEdge ? null :
           `${Time(currentTime, videoState.duration)} / `
       }
-      { Time(videoState.duration, videoState.duration) }
+      {
+        !player.dvrEnabled ? null :
+          Time(videoState.duration, videoState.duration)
+      }
     </div>
   );
 };
@@ -171,11 +169,11 @@ const ContentVerificationControls = ({player}) => {
   const [contentVerified, setContentVerified] = useState(false);
 
   useEffect(() => {
-    const UpdateVerification = () => setContentVerified(player.controls.ContentVerified());
+    const UpdateVerification = () => player && player.controls && setContentVerified(player.controls.ContentVerified());
 
     UpdateVerification();
 
-    const disposeSettingsListener = player.controls.RegisterSettingsListener(UpdateVerification);
+    const disposeSettingsListener = player.controls && player.controls.RegisterSettingsListener(UpdateVerification);
 
     return () => disposeSettingsListener && disposeSettingsListener();
   }, []);
@@ -206,12 +204,14 @@ const WebControls = ({player, playbackStarted, canPlay, recentlyInteracted, setR
   const [menuVisible, setMenuVisible] = useState(player.controls.IsMenuVisible());
 
   useEffect(() => {
+    if(!player.controls) { return; }
+
     setPlayerClickHandler(PlayerClick({player, setRecentUserAction}));
 
-    const UpdateMenuVisibility = () => setMenuVisible(player.controls.IsMenuVisible());
+    const UpdateMenuVisibility = () => player && player.controls && setMenuVisible(player.controls.IsMenuVisible());
     const disposeSettingsListener = player.controls.RegisterSettingsListener(UpdateMenuVisibility);
 
-    const disposeVideoObserver = ObserveVideo({target: player.target, video: player.video, setVideoState});
+    const disposeVideoObserver = ObserveVideo({player, setVideoState});
 
     return () => {
       disposeSettingsListener && disposeSettingsListener();
@@ -258,7 +258,7 @@ const WebControls = ({player, playbackStarted, canPlay, recentlyInteracted, setR
                 // 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"]} ${canPlay && !playbackStarted ? "" : ControlStyles["center-play-button--hidden"]}`}
+              className={`${ControlStyles["center-play-button"]} ${canPlay && !playbackStarted && !(player && player.casting) ? "" : ControlStyles["center-play-button--hidden"]}`}
             />
             <div className={`${ControlStyles["bottom-controls-container"]} ${hideControls ? ControlStyles["bottom-controls-container--autohide"] : ""}`}>
               <div className={ControlStyles["bottom-controls-gradient"]} />
@@ -270,23 +270,28 @@ const WebControls = ({player, playbackStarted, canPlay, recentlyInteracted, setR
                   onClick={() => player.controls.TogglePlay()}
                   className={ControlStyles["play-pause-button"]}
                 />
-                <CollectionControls player={player} />
-                <VolumeControls player={player} videoState={videoState} />
+                <CollectionControls player={player}/>
+                <VolumeControls player={player} videoState={videoState}/>
                 <TimeIndicator player={player} videoState={videoState}/>
 
                 <div className={ControlStyles["spacer"]}/>
 
-                <ContentVerificationControls player={player} />
+                <ContentVerificationControls player={player}/>
 
                 {
-                  !collectionInfo ? null :
-                    <MenuButton
-                      label="Collection Menu"
-                      icon={Icons.CollectionIcon}
-                      player={player}
-                      MenuComponent={CollectionMenu}
+                  !player.chromecastAvailable ? null :
+                    <google-cast-launcher></google-cast-launcher>
+                }
+
+                {
+                  !player.airplayAvailable ? null :
+                    <IconButton
+                      aria-label="Airplay"
+                      onClick={() => player.video.webkitShowPlaybackTargetPicker()}
+                      icon={Icons.AirplayIcon}
                     />
                 }
+
                 {
                   !player.controls.IsRotatable() ? null :
                     <IconButton

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eluvio/elv-player-js",
-  "version": "2.0.21",
+  "version": "2.0.23",
   "description": "![Eluvio Logo](lib/static/images/Logo.png \"Eluvio Logo\")",
   "main": "dist/elv-player-js.es.js",
   "license": "MIT",
@@ -36,7 +36,7 @@
     "package-lock.json"
   ],
   "dependencies": {
-    "@eluvio/elv-client-js": "^4.0.92",
+    "@eluvio/elv-client-js": "^4.0.110",
     "dashjs": "~4.7.0",
     "focus-visible": "^5.2.0",
     "hls.js": "~1.5.12",
@@ -47,7 +47,7 @@
     "url-join": "^4.0.1"
   },
   "devDependencies": {
-    "@vitejs/plugin-basic-ssl": "^1.1.0",
+    "@vitejs/plugin-basic-ssl": "^1.2.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "autoprefixer": "^10.4.16",
     "babel-eslint": "^10.1.0",