@eluvio/elv-player-js 2.0.22 → 2.0.23

package/lib/player/Player.js

@@ -1,10 +1,12 @@
 import EluvioPlayerParameters from "./PlayerParameters.js";
 import {InitializeFairPlayStream} from "./FairPlay.js";
-
+import Cast from "./Cast";
 import {Utils} from "@eluvio/elv-client-js";
 import PlayerControls from "./Controls.js";
 import {MergeDefaultParameters} from "../ui/Common";
 
+const isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);
+
 const PlayerProfiles = {
   default: {
     label: "Default",
@@ -40,6 +42,7 @@ export class EluvioPlayer {
   }
 
   constructor({target, video, parameters, SetErrorMessage}) {
+    this.latest = true;
     this.loading = true;
     this.target = target;
     this.video = video;
@@ -53,8 +56,12 @@ export class EluvioPlayer {
     this.canPlay = false;
     this.isLive = false;
     this.dvrEnabled = false;
+    this.dvrAvailable = false;
     this.behindLiveEdge = false;
     this.publicMetadataUrl = undefined;
+    this.airplayAvailable = false;
+    this.chromecastAvailable = false;
+    this.casting = false;
 
     try {
       // If custom HLS parameters are specified, set profile to custom
@@ -84,11 +91,9 @@ export class EluvioPlayer {
           configUrl: this.clientOptions.network
         });
 
-        this.clientOptions.client.SetStaticToken({
-          token:
-            this.clientOptions.staticToken ||
-            this.clientOptions.client.utils.B64(JSON.stringify({qspace_id: await this.clientOptions.client.ContentSpaceId()}))
-        });
+        if(this.clientOptions.staticToken) {
+          this.clientOptions.client.SetStaticToken({token: this.clientOptions.staticToken});
+        }
 
         return this.clientOptions.client;
       })();
@@ -151,9 +156,9 @@ export class EluvioPlayer {
 
     if(this.sourceOptions.contentInfo.liveDVR === EluvioPlayerParameters.liveDVR.ON && offeringProperties.dvr_available) {
       options.dvr = 1;
-      this.dvrEnabled = true;
+      this.dvrAvailable = true;
     } else {
-      this.dvrEnabled = false;
+      this.dvrAvailable = false;
     }
 
     if(offeringProperties.live) {
@@ -200,6 +205,10 @@ export class EluvioPlayer {
     const versionHash = playoutUrl.split("/").find(segment => segment.startsWith("hq__"));
 
     return {
+      playoutParameters: {
+        ...playoutParameters,
+        options
+      },
       protocol,
       drm,
       playoutUrl,
@@ -294,6 +303,8 @@ export class EluvioPlayer {
 
     this.__Reset();
 
+
+
     this.initialized = false;
     this.loading = true;
     this.initTime = Date.now();
@@ -331,6 +342,24 @@ export class EluvioPlayer {
         }
       }
 
+      // Handle Chromecast
+      this.castHandler = new Cast({
+        player: this,
+        onReady: () => {
+          this.chromecastAvailable = true;
+          this.__SettingsUpdate();
+        },
+        onUpdate: () => {
+          this.__SettingsUpdate();
+        }
+      });
+
+      // Detect Airplay availability
+      this.__RegisterVideoEventListener("webkitplaybacktargetavailabilitychanged", event => {
+        this.airplayAvailable = event.availability === "available";
+        this.__SettingsUpdate();
+      });
+
       this.__RegisterVideoEventListener("play", () => {
         this.reloads = 0;
         this.playbackStarted = true;
@@ -350,7 +379,7 @@ export class EluvioPlayer {
       });
 
       this.__RegisterVideoEventListener("seeking", () => {
-        if(!this.isLive || !this.dvrEnabled) { return; }
+        if(!this.isLive || !this.dvrAvailable) { return; }
         const diff = this.video.duration - this.video.currentTime;
         this.behindLiveEdge = diff > 15;
         this.__SettingsUpdate();
@@ -363,7 +392,7 @@ export class EluvioPlayer {
         this.__RegisterVideoEventListener("ended", () => this.controls && this.controls.CollectionPlayNext({autoplay: true}));
       }
 
-      let { versionHash, playoutUrl, protocol, drm, drms, multiviewOptions } = await this.__PlayoutOptions();
+      let { versionHash, playoutUrl, protocol, drm, drms, multiviewOptions, playoutParameters } = await this.__PlayoutOptions();
 
       this.contentHash = versionHash;
 
@@ -376,6 +405,13 @@ export class EluvioPlayer {
 
       this.authorizationToken = authorizationToken;
 
+      this.playoutUrl = playoutUrl.toString();
+
+      this.castHandler.SetMedia({
+        playoutOptions: this.sourceOptions.playoutOptions,
+        playoutParameters
+      });
+
       if(this.__destroyed) { return; }
 
       if(protocol === "hls") {
@@ -480,7 +516,8 @@ export class EluvioPlayer {
   async __InitializeHLS({playoutUrl, authorizationToken, drm, drms, multiviewOptions}) {
     this.HLS = (await import("hls.js")).default;
 
-    if([EluvioPlayerParameters.drms.FAIRPLAY, EluvioPlayerParameters.drms.SAMPLE_AES].includes(drm) || !this.HLS.isSupported()) {
+    const nativeHLSSupported = this.video.canPlayType("application/vnd.apple.mpegURL");
+    if((nativeHLSSupported && isIOS) || [EluvioPlayerParameters.drms.FAIRPLAY, EluvioPlayerParameters.drms.SAMPLE_AES].includes(drm) || !this.HLS.isSupported()) {
       // HLS JS NOT SUPPORTED - Handle native player
       this.nativeHLS = true;
 
@@ -550,7 +587,7 @@ export class EluvioPlayer {
         ...customProfileSettings
       };
 
-      if(this.dvrEnabled) {
+      if(this.dvrAvailable) {
         delete this.hlsOptions.liveMaxLatencyDuration;
         delete this.hlsOptions.liveMaxLatencyDurationCount;
       }
@@ -670,6 +707,14 @@ export class EluvioPlayer {
 
       this.hlsPlayer = hlsPlayer;
       this.player = hlsPlayer;
+
+      if(nativeHLSSupported) {
+        /* Add alternate source for airplay */
+        const source = document.createElement("source");
+        source.src = this.playoutUrl.toString();
+        this.video.appendChild(source);
+        this.video.disableRemotePlayback = false;
+      }
     }
   }
 
@@ -981,6 +1026,7 @@ export class EluvioPlayer {
   }
 
   __DestroyPlayer() {
+    this.castHandler.Disconnect();
     this.__destroyed = true;
     this.__Reset();
   }
@@ -1014,6 +1060,7 @@ export class EluvioPlayer {
       }
     });
 
+    this.__settingsListeners = [];
     this.__listenerDisposers = [];
     this.__showPlayerProfileForm = false;
 
@@ -1035,8 +1082,12 @@ export class EluvioPlayer {
     this.canPlay = false;
     this.isLive = false;
     this.behindLiveEdge = false;
+    this.dvrAvailable = false;
     this.dvrEnabled = false;
     this.publicMetadataUrl = undefined;
+    this.airplayAvailable = false;
+    this.chromecastAvailable = false;
+    this.casting = false;
   }
 
   async __HardReload(error, delay=6000) {
@@ -1113,6 +1164,17 @@ export class EluvioPlayer {
       }
     }
   }
+
+  __SetCasting(casting) {
+    if(casting) {
+      this.controls.SetDVREnabled(false);
+      this.controls.Pause();
+    }
+
+    this.casting = casting;
+
+    this.__SettingsUpdate();
+  }
 }
 
 EluvioPlayer.EluvioPlayerParameters = EluvioPlayerParameters;

package/lib/static/icons/Icons.js

@@ -32,3 +32,5 @@ export const RotateIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\
 export const ContentBadgeIcon = `<svg width=\"30\" height=\"30\" viewBox=\"0 0 30 30\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M15 27.5C15 27.5 25 22.5 25 15V6.25L15 2.5L5 6.25V15C5 22.5 15 27.5 15 27.5Z\" stroke=\"currentColor\" stroke-width=\"2.14286\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M19.715 11.3574L13.8221 17.8396L11.1436 14.8931\" stroke=\"currentColor\" stroke-width=\"2.14286\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>`;
 export const ContentCredentialsIcon = `<svg width=\"26\" height=\"26\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M23.7508 12.9997V23.7508H13.0003C7.05943 23.7508 2.24919 18.9406 2.24919 12.9997C2.24919 7.05888 7.05943 2.24864 13.0003 2.24864C18.9411 2.24864 23.7508 7.05888 23.7508 12.9997ZM0 12.9997C0 5.82396 5.82396 0 12.9997 0C20.1755 0 26 5.82396 26 12.9997V25.9995H13.0003C5.82396 25.9995 0 20.1755 0 12.9997ZM5.174 13.5197C5.174 16.1976 6.98078 18.4599 9.85371 18.4599C12.2198 18.4599 13.8185 16.9 14.2084 14.8589H11.8686C11.5698 15.7951 10.8155 16.367 9.85371 16.367C8.39758 16.367 7.44886 15.2227 7.44886 13.5202C7.44886 11.8178 8.39813 10.6735 9.85371 10.6735C10.7899 10.6735 11.5305 11.2066 11.8429 12.0903H14.1959C13.7797 10.1011 12.1941 8.58055 9.85371 8.58055C6.96822 8.58001 5.174 10.8418 5.174 13.5197ZM17.3419 8.83999H15.132V18.2131H17.4331V13.3253C17.4331 12.4022 17.6931 11.8041 18.1349 11.4273C18.5249 11.0761 19.0318 10.8942 19.8642 10.8942H20.4491V8.72256H19.8773C18.668 8.72256 17.8624 9.16442 17.3424 9.8406V8.82633V8.83999H17.3419Z\" fill=\"currentColor\"/></svg>`;
 export const CopyIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-copy\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"></rect><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"></path></svg>`;
+export const AirplayIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-airplay\"><path d=\"M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1\"></path><polygon points=\"12 15 17 21 7 21 12 15\"></polygon></svg>`;
+export const ChromecastIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-cast\"><path d=\"M2 16.1A5 5 0 0 1 5.9 20M2 12.05A9 9 0 0 1 9.95 20M2 8V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6\"></path><line x1=\"2\" y1=\"20\" x2=\"2.01\" y2=\"20\"></line></svg>`;

package/lib/static/icons/svgs/airplay.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-airplay"><path d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1"></path><polygon points="12 15 17 21 7 21 12 15"></polygon></svg>

package/lib/static/icons/svgs/cast.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-cast"><path d="M2 16.1A5 5 0 0 1 5.9 20M2 12.05A9 9 0 0 1 9.95 20M2 8V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6"></path><line x1="2" y1="20" x2="2.01" y2="20"></line></svg>

package/lib/static/stylesheets/common.module.scss

@@ -543,6 +543,57 @@
   }
 }
 
+.dvr-toggle {
+  --border-color: #a2a3a3;
+
+  display: flex;
+  height: 30px;
+  position: relative;
+
+  &__border {
+    border: 2px solid var(--border-color);
+    border-radius: 5px;
+    height: 100%;
+    inset: 0;
+    opacity: 0.5;
+    position: absolute;
+    z-index: 0;
+  }
+
+  &__live,
+  &__dvr {
+    align-items: center;
+    border-radius: 5px;
+    color: var(--border-color);
+    cursor: pointer!important;
+    display: flex;
+    font-size: 16px;
+    font-weight: 500;
+    height: 100%;
+    justify-content: center;
+    opacity: 0.5;
+    transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
+    width: 75px;
+    z-index: 1;
+
+    &--active {
+      color: var(--color-text);
+      opacity: 1;
+    }
+  }
+
+  &__live {
+    &--active {
+      background-color: #ea3323;
+    }
+  }
+
+  &__dvr {
+    &--active {
+      background-color: #4666ac;
+    }
+  }
+}
 
 /* Player size/orientation adjustments */
 
@@ -597,6 +648,20 @@
       height: 15px;
     }
   }
+
+  .dvr-toggle {
+    height: 25px;
+
+    &__border {
+      border-width: 1px;
+    }
+
+    &__live,
+    &__dvr {
+      font-size: 10px;
+      width: 40px;
+    }
+  }
 }
 
 :global(.__eluvio-player--size-sm) {

package/lib/static/stylesheets/controls-tv.module.scss

@@ -347,6 +347,7 @@
 
 .menu-control-container {
   position: relative;
+  z-index: var(--layer-menu);
 
   .icon-button {
     height: 45px;

package/lib/static/stylesheets/controls-web.module.scss

@@ -89,6 +89,20 @@
   }
 }
 
+google-cast-launcher {
+  --disconnected-color: var(--color-button)!important;
+  --connected-color: var(--color-text-highlight)!important;
+
+  animation: 0.5s fadein ease!important;
+  cursor: pointer;
+  height: 30px!important;
+  width: 30px!important;
+
+  * {
+    transition: color 0.15s ease;
+  }
+}
+
 /* Content Info */
 
 .info-container {
@@ -342,6 +356,7 @@
 
 .menu-control-container {
   position: relative;
+  z-index: var(--layer-menu);
 
   .icon-button {
     border: 1px solid transparent;

package/lib/static/stylesheets/player.module.scss

@@ -45,6 +45,22 @@
   }
 }
 
+.cast-indicator-container {
+  align-items: center;
+  display: flex;
+  inset: 0;
+  justify-content: center;
+  position: absolute;
+  z-index: var(--layer-center-button);
+
+  svg {
+    color: #FFF;
+    height: 50px;
+    width: 50px;
+  }
+}
+
+
 .controls {
   z-index: var(--layer-controls);
 }

package/lib/ui/BuildIcons.cjs

@@ -35,6 +35,8 @@ const iconSource = {
   ContentBadgeIcon: Path.resolve(__dirname, "../static/icons/svgs/content-badge.svg"),
   ContentCredentialsIcon: Path.resolve(__dirname, "../static/icons/svgs/content-credentials.svg"),
   CopyIcon: Path.resolve(__dirname, "../static/icons/svgs/copy.svg"),
+  AirplayIcon: Path.resolve(__dirname, "../static/icons/svgs/airplay.svg"),
+  ChromecastIcon: Path.resolve(__dirname, "../static/icons/svgs/cast.svg")
 };
 
 let iconFile = "// WARNING: Do not edit this file manually\n"

package/lib/ui/Components.jsx

@@ -61,23 +61,30 @@ export const UserActionIndicator = ({action}) => {
 };
 
 export const SeekBar = ({player, videoState, setRecentUserAction, className=""}) => {
-  const [currentTime, setCurrentTime] = useState(player.video.currentTime);
+  const [currentTime, setCurrentTime] = useState(player.controls.GetCurrentTime());
   const [bufferFraction, setBufferFraction] = useState(0);
   const [seekKeydownHandler, setSeekKeydownHandler] = useState(undefined);
+  const [dvrEnabled, setDVREnabled] = useState(player.controls.IsDVREnabled());
 
   useEffect(() => {
     setSeekKeydownHandler(SeekSliderKeyDown(player, setRecentUserAction));
 
-    const disposeVideoTimeObserver = ObserveVideoTime({video: player.video, setCurrentTime, rate: 60});
+    const disposeVideoTimeObserver = ObserveVideoTime({player, setCurrentTime, rate: 60});
     const disposeVideoBufferObserver = ObserveVideoBuffer({video: player.video, setBufferFraction});
+    const disposeSettingsListener = player.controls.RegisterSettingsListener(() => {
+      if(!player.controls) { return; }
+
+      setDVREnabled(player.controls.IsDVREnabled())
+    });
 
     return () => {
       disposeVideoTimeObserver && disposeVideoTimeObserver();
       disposeVideoBufferObserver && disposeVideoBufferObserver();
+      disposeSettingsListener && disposeSettingsListener();
     };
-  }, []);
+  }, [player && player.controls]);
 
-  if(player.isLive && !player.dvrEnabled) {
+  if(player.isLive && !dvrEnabled) {
     return null;
   }
 
@@ -85,7 +92,7 @@ export const SeekBar = ({player, videoState, setRecentUserAction, className=""})
     <div className={`${className} ${CommonStyles["seek-container"]} ${className}`}>
       <progress
         max={1}
-        value={bufferFraction}
+        value={player.casting ? 0 : bufferFraction}
         className={CommonStyles["seek-buffer"]}
       />
       <progress
@@ -288,6 +295,38 @@ export const SettingsMenu = ({player, Hide, className=""}) => {
   );
 };
 
+export const DVRToggle = ({player}) => {
+  const [dvrEnabled, setDVREnabled] = useState(player.dvrEnabled);
+
+  useEffect(() => {
+    const disposer = player.controls.RegisterSettingsListener(() => {
+      if(!player.controls) { return; }
+
+      setDVREnabled(player.controls.IsDVREnabled())
+    });
+
+    return () => disposer && disposer();
+  }, [player && player.controls]);
+
+  return (
+    <div className={CommonStyles["dvr-toggle"]}>
+      <button
+        onClick={() => player.controls.SetDVREnabled(false)}
+        className={`${CommonStyles["dvr-toggle__live"]} ${!dvrEnabled ? CommonStyles["dvr-toggle__live--active"] : ""}`}
+      >
+        LIVE
+      </button>
+      <button
+        onClick={() => player.controls.SetDVREnabled(true)}
+        className={`${CommonStyles["dvr-toggle__dvr"]} ${dvrEnabled ? CommonStyles["dvr-toggle__dvr--active"] : ""}`}
+      >
+        DVR
+      </button>
+      <div className={CommonStyles["dvr-toggle__border"]}/>
+    </div>
+  );
+};
+
 export const Copy = async (value) => {
   try {
     value = (value || "").toString();

package/lib/ui/Observers.js

@@ -49,12 +49,14 @@ export const RegisterModal = ({element, Hide}) => {
   };
 };
 
-export const ObserveVideo = ({target, video, setVideoState}) => {
+export const ObserveVideo = ({player, setVideoState}) => {
   const UpdateVideoState = function () {
-    const buffer = video.buffered;
+    if(!player || !player.controls) { return; }
+
+    const buffer = player.video.buffered;
     let end = 0;
     for(let i = 0; i < buffer.length; i++) {
-      if(buffer.start(i) > video.currentTime) { continue; }
+      if(buffer.start(i) > player.controls.GetCurrentTime()) { continue; }
 
       if(buffer.end(i) > end) {
         end = buffer.end(i);
@@ -62,11 +64,11 @@ export const ObserveVideo = ({target, video, setVideoState}) => {
     }
 
     setVideoState({
-      playing: !video.paused,
-      duration: video.duration,
-      volume: video.volume,
-      muted: video.muted,
-      rate: video.playbackRate,
+      playing: player.controls.IsPlaying(),
+      duration: player.controls.GetDuration(),
+      volume: player.controls.GetVolume(),
+      muted: player.controls.IsMuted(),
+      rate: player.controls.GetPlaybackRate(),
       fullscreen: !!(document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement)
     });
   };
@@ -80,12 +82,15 @@ export const ObserveVideo = ({target, video, setVideoState}) => {
     "ratechange"
   ];
 
-  events.map(event => video.addEventListener(event, UpdateVideoState));
-  target.addEventListener("fullscreenchange", UpdateVideoState);
+  events.map(event => player.video.addEventListener(event, UpdateVideoState));
+  player.target.addEventListener("fullscreenchange", UpdateVideoState);
+
+  const castListenerDisposer = player.castHandler.RegisterListener(UpdateVideoState);
 
   return () => {
-    events.map(event => video.removeEventListener(event, UpdateVideoState));
-    target.removeEventListener("fullscreenchange", UpdateVideoState);
+    events.map(event => player.video.removeEventListener(event, UpdateVideoState));
+    player.target.removeEventListener("fullscreenchange", UpdateVideoState);
+    castListenerDisposer && castListenerDisposer();
   };
 };
 
@@ -113,10 +118,12 @@ export const ObserveVideoBuffer = ({video, setBufferFraction}) => {
   return () => video.removeEventListener("progress", UpdateBufferState);
 };
 
-export const ObserveVideoTime = ({video, rate=10, setCurrentTime}) => {
+export const ObserveVideoTime = ({player, rate=10, setCurrentTime}) => {
   // Current time doesn't update quickly enough from events for smooth movement - use interval instead
   const currentTimeInterval = setInterval(() => {
-    setCurrentTime(video.currentTime);
+    if(!player.controls) { return; }
+
+    setCurrentTime(player.controls.GetCurrentTime());
   }, 1000 / rate);
 
   return () => {
@@ -334,10 +341,13 @@ export const ObserveKeydown = ({player, setRecentUserAction}) => {
             index: playbackRates.active.index + (event.key === "<" ? -1 : 1)
           });
         }
-        setRecentUserAction({
-          action: result.increase ? ACTIONS.PLAYBACK_RATE_UP : ACTIONS.PLAYBACK_RATE_DOWN,
-          text: `${result.rate.toFixed(2)}x`
-        });
+
+        if(result) {
+          setRecentUserAction({
+            action: result.increase ? ACTIONS.PLAYBACK_RATE_UP : ACTIONS.PLAYBACK_RATE_DOWN,
+            text: `${result.rate.toFixed(2)}x`
+          });
+        }
         break;
       case "c":
         result = player.controls.ToggleTextTrack();

package/lib/ui/PlayerUI.jsx

@@ -19,6 +19,7 @@ import {Spinner, UserActionIndicator} from "./Components.jsx";
 import TVControls from "./TVControls.jsx";
 import PlayerProfileForm from "./PlayerProfileForm.jsx";
 import {ImageUrl, MergeDefaultParameters} from "./Common.js";
+import {ChromecastIcon} from "../static/icons/Icons.js";
 
 const Poster = ({player}) => {
   const [imageUrl, setImageUrl] = useState(undefined);
@@ -64,6 +65,7 @@ const PlayerUI = ({target, parameters, InitCallback, ErrorCallback, Unmount, Res
   const [recentlyInteracted, setRecentlyInteracted] = useState(true);
   const [recentUserAction, setRecentUserAction] = useState(undefined);
   const [allowRotation, setAllowRotation] = useState(undefined);
+  const [casting, setCasting] = useState(false);
   const videoRef = useRef();
 
   const playerSet = !!player;
@@ -110,6 +112,7 @@ const PlayerUI = ({target, parameters, InitCallback, ErrorCallback, Unmount, Res
           setPlaybackStarted(newPlayer.playbackStarted);
           setPlayerInitialized(!newPlayer.loading);
           setShowPlayerProfileForm(newPlayer.__showPlayerProfileForm);
+          setCasting(newPlayer && newPlayer.casting);
         }
       );
 
@@ -225,6 +228,7 @@ const PlayerUI = ({target, parameters, InitCallback, ErrorCallback, Unmount, Res
         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}
+        crossOrigin="anonymous"
         className={PlayerStyles.video}
       />
       {
@@ -237,6 +241,12 @@ const PlayerUI = ({target, parameters, InitCallback, ErrorCallback, Unmount, Res
             <Spinner className={PlayerStyles["spinner"]} />
           </div>
       }
+      {
+        !casting ? null :
+          <div className={PlayerStyles["cast-indicator-container"]}>
+            <div dangerouslySetInnerHTML={{ __html: ChromecastIcon }} />
+          </div>
+      }
       {
         !errorMessage ? null :
           <div className={PlayerStyles["error-message"]}>{ errorMessage }</div>

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