@eluvio/elv-player-js 2.0.22 → 2.0.24

package/lib/player/Cast.js

@@ -0,0 +1,286 @@
+/* eslint-disable no-undef */
+
+class Cast {
+  constructor({player, onReady, onUpdate}) {
+    this.player = player;
+    this.ready = false;
+    this.onReady = onReady;
+    this.connected = false;
+    this.playbackRate = 1;
+    this.__listeners = [];
+    this.onUpdate = onUpdate;
+
+    if(window.__chromecastAvailable || (window.chrome && window.chrome.cast)) {
+      // Chromecast already initialized
+      this.Initialize();
+    } else {
+      // Initialize chromecast script
+      window["__onGCastApiAvailable"] = isAvailable => {
+        if(isAvailable) {
+          window.__chromecastAvailable = true;
+          this.Initialize();
+        }
+      };
+
+      this.LoadScript();
+    }
+  }
+
+  LoadScript() {
+    const tag = document.createElement("script");
+    tag.src = "https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1";
+    document.querySelector("head").appendChild(tag);
+  }
+
+  Initialize() {
+    cast.framework.CastContext.getInstance().setOptions({
+      receiverApplicationId: chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID,
+      //receiverApplicationId: "8E2BD113",
+      autoJoinPolicy: chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED
+    });
+
+    this.remotePlayer = new cast.framework.RemotePlayer();
+    this.remotePlayerController = new cast.framework.RemotePlayerController(this.remotePlayer);
+
+    this.remotePlayerController.addEventListener(
+      cast.framework.RemotePlayerEventType.ANY_CHANGE,
+      event => this.Update(event)
+    );
+
+    const context = cast.framework.CastContext.getInstance();
+    context.addEventListener(
+      cast.framework.CastContextEventType.SESSION_STATE_CHANGED,
+      event => {
+        switch (event.sessionState) {
+          case cast.framework.SessionState.SESSION_STARTED:
+            this.Start();
+            break;
+          case cast.framework.SessionState.SESSION_RESUMED:
+            break;
+          case cast.framework.SessionState.SESSION_ENDED:
+            this.Disconnect(true);
+            // Update locally as necessary
+            break;
+        }
+      });
+
+    this.ready = true;
+
+    if(this.playoutUrl) {
+      this.onReady && this.onReady();
+    }
+  }
+
+  async SetMedia({playoutOptions, playoutParameters}) {
+    // Get dash options
+    let dashOptions = ((playoutOptions || {}).dash || {}).playoutMethods || {};
+    let options = dashOptions.clear;
+
+    if(!options) {
+      // Dash options might be available under the default_dash offering
+      try {
+        playoutOptions = await (await this.player.__Client()).PlayoutOptions({
+          ...playoutParameters,
+          offering: "default_dash"
+        });
+
+        dashOptions = ((playoutOptions || {}).dash || {}).playoutMethods || {};
+        options = dashOptions.clear || {};
+      } catch(error) {
+        this.player.Log("Unable to find dash playout options for chromecast");
+      }
+    }
+
+    this.playoutUrl = (options || {}).playoutUrl;
+
+    if(this.playoutUrl && this.ready) {
+      this.onReady && this.onReady();
+    }
+  }
+
+  async Start() {
+    this.player && this.player.__SetCasting(true);
+
+    window.addEventListener("beforeunload", () => this.Disconnect(true));
+
+    try {
+      const castSession = cast.framework.CastContext.getInstance().getCurrentSession();
+      const mediaInfo = new chrome.cast.media.MediaInfo(this.playoutUrl, "application/dash+xml");
+
+      mediaInfo.contentUrl = this.playoutUrl;
+      mediaInfo.metadata = new chrome.cast.media.GenericMediaMetadata();
+      mediaInfo.metadata.metadataType = chrome.cast.media.MetadataType.GENERIC;
+      mediaInfo.metadata.title = "Test Chromecast";
+
+      let { title, subtitle, image, headers } = (this.player.controls.GetContentInfo() || {});
+      mediaInfo.metadata.title = title || "Eluvio";
+
+      if(!subtitle && headers && headers.length > 0) {
+        subtitle = headers.join("‎ ‎ ‎ ‎ ");
+      }
+
+      mediaInfo.metadata.subtitle = subtitle || "";
+
+      if(image) {
+        mediaInfo.metadata.images = [
+          new chrome.cast.Image(image)
+        ];
+      }
+
+      const request = new chrome.cast.media.LoadRequest(mediaInfo);
+      await castSession.loadMedia(request);
+
+      this.connected = true;
+    } catch(error) {
+      this.player.Log("Failed to start chromecast stream:", true);
+      this.player.Log(error, true);
+      this.Disconnect(true);
+    }
+  }
+
+  /* Controls */
+  IsPlaying() {
+    return !this.remotePlayer.isPaused;
+  }
+
+  TogglePlay() {
+    this.remotePlayerController.playOrPause();
+  }
+
+  GetCurrentTime() {
+    return this.remotePlayer.currentTime;
+  }
+
+  GetDuration() {
+    return this.remotePlayer.duration || this.player.video.duration;
+  }
+
+  Play() {
+    this.remotePlayer.isPaused && this.remotePlayerController.playOrPause();
+  }
+
+  Pause() {
+    !this.remotePlayer.isPaused && this.remotePlayerController.playOrPause();
+  }
+
+  Stop() {
+    this.remotePlayerController.stop();
+  }
+
+  IsMuted() {
+    return this.remotePlayer.isMuted;
+  }
+
+  Mute() {
+    !this.remotePlayer.isMuted && this.remotePlayerController.muteOrUnmute();
+  }
+
+  Unmute() {
+    this.remotePlayer.isMuted && this.remotePlayerController.muteOrUnmute();
+  }
+
+  ToggleMuted() {
+    this.remotePlayerController.muteOrUnmute();
+  }
+
+  GetVolume() {
+    return this.remotePlayer.volumeLevel;
+  }
+
+  SetVolume({fraction, relativeFraction}) {
+    let volume;
+    if(relativeFraction) {
+      volume = Math.min(1, Math.max(0, this.remotePlayer.volume + relativeFraction));
+    } else {
+      volume = fraction;
+    }
+
+    if(this.player.video.volume > 0) {
+      this.remotePlayer.isMuted && this.remotePlayerController.muteOrUnmute();
+    }
+
+    this.remotePlayer.volumeLevel = volume;
+    this.remotePlayerController.setVolumeLevel();
+
+    return volume;
+  }
+
+  Seek({fraction, time, relativeSeconds}) {
+    const originalTime = this.remotePlayer.currentTime;
+
+    if(relativeSeconds) {
+      time = Math.max(
+        0,
+        Math.min(
+          this.remotePlayer.duration,
+          this.remotePlayer.currentTime + relativeSeconds
+        )
+      );
+    } else if(typeof fraction !== "undefined") {
+      time = this.remotePlayer.duration * fraction;
+    }
+
+    this.remotePlayer.currentTime = time;
+    this.remotePlayerController.seek();
+
+    return originalTime <= this.player.video.currentTime;
+  }
+
+  GetPlaybackRate() {
+    return this.playbackRate || 1;
+  }
+
+  SetPlaybackRate({index, rate}) {
+    if(typeof index !== "undefined") {
+      const option = this.player.controls.GetPlaybackRates().options[index];
+
+      if(option) {
+        rate = option.rate || 1;
+      }
+    }
+
+    const castSession = cast.framework.CastContext.getInstance().getCurrentSession();
+    const media = castSession.getMediaSession();
+    castSession.sendMessage("urn:x-cast:com.google.cast.media",{
+      type: "SET_PLAYBACK_RATE",
+      playbackRate: rate,
+      mediaSessionId: media.mediaSessionId,
+      requestId: 2
+    })
+      .then(() => this.playbackRate = rate);
+  }
+
+  Disconnect(force) {
+    (this.connected || force) && cast.framework.CastContext.getInstance().endCurrentSession();
+    this.connected = false;
+    this.player && this.player.__SetCasting(false);
+  }
+
+  // Register a listener that will be called any time the video settings have changed
+  RegisterListener(listener) {
+    this.__listeners.push(listener);
+
+    return () => this.__listeners = this.__listeners.filter(l => l !== listener);
+  }
+
+  // Indicate to controls that the settings have updated
+  Update(event) {
+    try {
+      this.onUpdate && this.onUpdate(event);
+    } catch(error) {
+      this.player.Log("Failed to call update listener", true);
+      this.player.Log(error, true);
+    }
+
+    this.__listeners.forEach(listener => {
+      try {
+        listener(event);
+      } catch (error) {
+        this.player.Log("Failed to call cast listener", true);
+        this.player.Log(error, true);
+      }
+    });
+  }
+}
+
+export default Cast;

package/lib/player/Controls.js

@@ -72,6 +72,8 @@ class PlayerControls {
    * @returns {boolean} - Whether or not the video is currently playing
    */
   IsPlaying() {
+    if(this.player.casting) { return this.player.castHandler.IsPlaying(); }
+
     return !this.player.video.paused;
   }
 
@@ -93,6 +95,8 @@ class PlayerControls {
    * @returns {boolean} - Whether or not the video was able to start playing. Browser autoplay policies may block video from playing without user interaction.
    */
   async Play() {
+    if(this.player.casting) { return this.player.castHandler.Play(); }
+
     return await this.player.__Play();
   }
 
@@ -102,6 +106,8 @@ class PlayerControls {
    * @methodGroup Playback
    */
   Pause() {
+    if(this.player.casting) { return this.player.castHandler.Pause(); }
+
     this.player.video.pause();
   }
 
@@ -112,6 +118,8 @@ class PlayerControls {
    * @returns {boolean} - False if the video was paused, true if playback was started
    */
   TogglePlay() {
+    if(this.player.casting) { return this.player.castHandler.TogglePlay(); }
+
     if(this.player.video.paused) {
       this.Play();
       return true;
@@ -127,6 +135,8 @@ class PlayerControls {
    * @methodGroup Playback
    */
   Stop() {
+    if(this.player.casting) { return this.player.castHandler.Stop(); }
+
     this.Pause();
     this.Seek({time: 0});
     this.player.playbackStarted = false;
@@ -142,6 +152,8 @@ class PlayerControls {
    * @returns {number} - The current time of the video
    */
   GetCurrentTime() {
+    if(this.player.casting) { return this.player.castHandler.GetCurrentTime(); }
+
     return this.player.video.currentTime;
   }
 
@@ -153,6 +165,8 @@ class PlayerControls {
    * @returns {number} - The duration of the video. May be Infinity if content is live
    */
   GetDuration() {
+    if(this.player.casting) { return this.player.castHandler.GetDuration(); }
+
     return this.player.video.duration;
   }
 
@@ -168,6 +182,8 @@ class PlayerControls {
    * @returns {boolean} - False if the video was paused, true if playback was started
    */
   Seek({fraction, time, relativeSeconds}) {
+    if(this.player.casting) { return this.player.castHandler.Seek({fraction, time, relativeSeconds}); }
+
     if(!this.player.video || (fraction && !this.player.video.duration)) {
       return;
     }
@@ -199,6 +215,8 @@ class PlayerControls {
    * @returns {number} - The current volume of the video
    */
   GetVolume() {
+    if(this.player.casting) { return this.player.castHandler.GetVolume(); }
+
     return this.player.video.volume;
   }
 
@@ -213,6 +231,8 @@ class PlayerControls {
    * @returns {boolean} - The resulting volume of the video
    */
   SetVolume({fraction, relativeFraction}) {
+    if(this.player.casting) { return this.player.castHandler.SetVolume({fraction, relativeFraction}); }
+
     if(relativeFraction) {
       this.player.video.volume = Math.min(1, Math.max(0, this.GetVolume() + relativeFraction));
     } else {
@@ -234,6 +254,8 @@ class PlayerControls {
    * @returns {boolean} - Whether or not the video is currently muted
    */
   IsMuted() {
+    if(this.player.casting) { return this.player.castHandler.IsMuted(); }
+
     return this.player.video.muted;
   }
 
@@ -243,6 +265,8 @@ class PlayerControls {
    * @methodGroup Volume
    */
   Mute() {
+    if(this.player.casting) { return this.player.castHandler.Mute(); }
+
     this.player.video.muted = true;
   }
 
@@ -252,6 +276,8 @@ class PlayerControls {
    * @methodGroup Volume
    */
   Unmute() {
+    if(this.player.casting) { return this.player.castHandler.Unmute(); }
+
     this.player.video.muted = false;
   }
 
@@ -263,6 +289,8 @@ class PlayerControls {
    * @returns {boolean} - True if the video was muted, false if unmuted
    */
   ToggleMuted() {
+    if(this.player.casting) { return this.player.castHandler.ToggleMuted(); }
+
     this.player.video.muted = !this.player.video.muted;
     return this.player.video.muted;
   }
@@ -717,6 +745,19 @@ class PlayerControls {
     }
   }
 
+  /**
+   * Retrieve the current playback rate
+   *
+   * @methodGroup Playback Rate
+   *
+   * @returns {number} - The current playback rate
+   */
+  GetPlaybackRate() {
+    if(this.player.casting) { return this.player.castHandler.GetPlaybackRate(); }
+
+    return this.player.video.playbackRate || 1;
+  }
+
   /**
    * Retrieve the currently available playback rates
    *
@@ -725,12 +766,20 @@ class PlayerControls {
    * @returns {Object} - All options, as well as the active option.
    */
   GetPlaybackRates() {
-    const options = ["0.25", "0.5", "0.75", "1", "1.25", "1.5", "1.75", "2"]
+    const currentPlaybackRate = this.GetPlaybackRate();
+    let options = ["0.25", "0.5", "0.75", "1", "1.25", "1.5", "1.75", "2"];
+
+    // Chromecast doesn't support < 0.5
+    if(this.player.casting) {
+      options = ["0.5", "0.75", "1", "1.25", "1.5", "1.75", "2"];
+    }
+
+    options = options
       .map((speed, index) => ({
         index,
         rate: parseFloat(speed),
         label: `${speed}x`,
-        active: this.player.video.playbackRate.toFixed(2) === parseFloat(speed).toFixed(2)
+        active: currentPlaybackRate.toFixed(2) === parseFloat(speed).toFixed(2)
       }));
 
     let active = options.find(option => option.active);
@@ -738,8 +787,8 @@ class PlayerControls {
     if(!active) {
       active = {
         index: -1,
-        rate: this.player.video.playbackRate,
-        label: `${this.player.video.playbackRate}x`,
+        rate: this.GetPlaybackRate(),
+        label: `${this.GetPlaybackRate()}x`,
         active: true
       };
     }
@@ -761,6 +810,8 @@ class PlayerControls {
    * @returns {Object} - The rate that was set, as well as whether the rate was increased or decreased
    */
   SetPlaybackRate({index, rate}) {
+    if(this.player.casting) { return this.player.castHandler.SetPlaybackRate({index, rate}); }
+
     const originalSpeed = this.player.video.playbackRate;
 
     if(rate) {
@@ -782,6 +833,51 @@ class PlayerControls {
     }
   }
 
+  /**
+   * Retrieve whether or not DVR is available for the current content
+   *
+   * @methodGroup DVR
+   *
+   * @returns {boolean} - Whether or not DVR is available for the current content
+   */
+  IsDVRAvailable() {
+    return this.player.dvrAvailable && !this.player.casting && isFinite(this.GetDuration());
+  }
+
+  /**
+   * Retrieve whether or not DVR is active for the current content
+   *
+   * @methodGroup DVR
+   *
+   * @returns {boolean} - Whether or not DVR is active for the current content
+   */
+  IsDVREnabled() {
+    return this.player.dvrEnabled;
+  }
+
+  /**
+   * Activate or deactivate DVR (if available)
+   *
+   * @methodGroup DVR
+   * @param {boolean} enabled - Whether or not DVR should be enabled
+   *
+   * @returns {boolean} - If DVR is enabled or disabled
+   */
+  SetDVREnabled(enabled) {
+    const originallyEnabled = this.player.dvrEnabled;
+
+    this.player.dvrEnabled = this.IsDVRAvailable() && enabled;
+
+    this.player.__SettingsUpdate();
+
+    if(originallyEnabled && !this.player.dvrEnabled) {
+      // Seek to live edge if DVR was disabled
+      this.Seek({time: this.GetDuration() - 2});
+    }
+
+    return this.player.dvrEnabled;
+  }
+
   /**
    * Retrieve the currently available player profiles
    *