@mux/mux-data-theoplayer 4.8.5

package/src/index.js

@@ -0,0 +1,551 @@
+import window from 'global/window'; // Remove if you do not need to access the global `window`
+import mux from 'mux-embed';
+
+const log = mux.log;
+const assign = mux.utils.assign;
+const ManifestParser = mux.utils.manifestParser;
+const {secondsToMs, safeCall, extractHostname} = mux.utils;
+const players = [];
+
+const findPlayerObject = function (player) {
+  for (var i = 0; i < players.length; i++) {
+    if (players[i]['player'] === player) {
+      return players[i];
+    }
+  }
+
+  return false;
+};
+
+const getAdInformation = function ({ ads }) {
+  // Bail out if we don't have an ad module, or if we don't have any current ads
+  if (!ads) { return {}; }
+
+  const { currentAds } = ads;
+
+  // Also if there is not a current ad
+  if (!currentAds || currentAds.length === 0) { return {}; }
+
+  // I haven't seen anything where it's more than one, so we'll just take the first
+  const currentAd = currentAds[0];
+  let adData = {};
+
+  if (currentAd.integration === 'google-ima') {
+    adData.ad_creative_id = currentAd.creativeId;
+    adData.ad_id = currentAd.id;
+    adData.ad_asset_url = currentAd.mediaUrl;
+  } else if (currentAd.integration === 'theo') {
+    // For THEO's, we need to try to get what we can
+    adData.ad_id = currentAd.id;
+    adData.ad_creative_id = currentAd.id;
+    adData.ad_asset_url = (currentAd.mediaFiles[0] || {}).resourceURI;
+  }
+
+  return adData;
+};
+
+const initTHEOplayerMux = function (player, options, theoplayer = window.THEOplayer || window.theoplayer) {
+  const defaults = {
+    // Allow customers to be in full control of the "errors" that are fatal
+    automaticErrorTracking: true
+  };
+
+  // Make sure we got a player - Check properties to ensure that a player was passed
+  if (typeof player !== 'object' || !theoplayer || typeof player.seeking === 'undefined') {
+    log.warn('[theoplayer-mux] You must provide a valid THEOplayer to initTHEOplayerMux.');
+    return;
+  }
+
+  // Make sure this isn't the second time
+  let playerObject = findPlayerObject(player);
+
+  if (playerObject) {
+    log.warn('[theoplayer-mux] You have already initialized Mux on this player.');
+    return;
+  }
+
+  // Remember this for later
+  playerObject = {
+    'player': player,
+    'id': mux.utils.generateShortID()
+  };
+  players.push(playerObject);
+
+  // Prepare the data passed in
+  options = assign(defaults, options);
+
+  options.data = assign({
+    player_software_name: 'THEOplayer',
+    player_software_version: theoplayer.version, // Replace with method to retrieve the version of the player as necessary
+    player_mux_plugin_name: 'theoplayer-mux',
+    player_mux_plugin_version: '[AIV]{version}[/AIV]'
+  }, options.data);
+
+  // Retrieve the ID and the player element
+  const playerID = playerObject.id;
+
+  let destroyed = false;
+
+  // Enable customers to emit events through the player instance
+  // player.mux = {};
+  // player.mux.emit = function (eventType, data) {
+  //   mux.emit(playerID, eventType, data);
+  // };
+  const emit = function (eventType, data) {
+    mux.emit(playerID, eventType, data);
+  };
+
+  // Allow mux to retrieve the current time - used to track buffering from the mux side
+  // Return current playhead time in milliseconds
+  options.getPlayheadTime = () => {
+    if (destroyed || !player) { return; }
+    return secondsToMs(player.currentTime);
+  };
+
+  // Allow mux to automatically retrieve state information about the player on each event sent
+  // If these properties are not accessible through getters at runtime, you may need to set them
+  // on certain events and store them in a local variable, and return them in the method e.g.
+  //    let playerWidth, playerHeight;
+  //    player.on('resize', (width, height) => {
+  //      playerWidth = width;
+  //      playerHeight = height;
+  //    });
+  //    options.getStateData = () => {
+  //      return {
+  //        ...
+  //        player_width: playerWidth,
+  //        player_height: playerHeight
+  //      };
+  //    };
+  let currentManifest;
+  let sessionData = {};
+
+  options.getStateData = () => {
+    if (destroyed || !player) { return {}; }
+
+    let width, height, fullscreen, language;
+    let latencyMetrics = {partHoldBack: undefined, holdBack: undefined, targetDuration: undefined, partTargetDuration: undefined, newestProgramTime: undefined};
+    let parseManifest = () => {
+      try {
+        if (currentManifest) {
+          latencyMetrics.targetDuration = currentManifest.targetDuration;
+          latencyMetrics.partTargetDuration = currentManifest.partTargetDuration;
+          const {segments} = currentManifest;
+
+          if (segments.length > 0) {
+            const latestFrag = segments[segments.length - 1];
+
+            if (latestFrag.dateTimeObject) {
+              latencyMetrics.newestProgramTime = latestFrag && latestFrag.dateTimeObject.getTime() + secondsToMs(latestFrag.duration);
+            }
+          }
+
+          if (currentManifest.serverControl) {
+            latencyMetrics.partHoldBack = currentManifest.serverControl.partHoldBack;
+            latencyMetrics.holdBack = currentManifest.serverControl.holdBack;
+          }
+        }
+      } catch (e) {
+      }
+    };
+
+    parseManifest();
+
+    // 2.x THEOplayer with the UI "feature"
+    if (player.ui) {
+      if (player.ui.fluid()) {
+        width = player.element && player.element.offsetWidth;
+        height = player.element && player.element.offsetHeight;
+      } else {
+        width = player.ui.width();
+        height = player.ui.height();
+      }
+
+      fullscreen = player.ui.isFullscreen();
+      language = player.ui.language();
+    } else { // 1.x, or 2.x where they don't have the UI "feature"
+      width = player.width || (player.element && player.element.offsetWidth);
+      height = player.height || (player.element && player.element.offsetHeight);
+      fullscreen = player.fullscreenEnabled;
+    }
+
+    let data = {
+      // Required properties - these must be provided every time this is called
+      // You _should_ only provide these values if they are defined (i.e. not 'undefined')
+      player_is_paused: player.paused, // Return whether the player is paused, stopped, or complete (i.e. in any state that is not actively trying to play back the video)
+      player_width: width, // Return the width, in pixels, of the player on screen
+      player_height: height, // Return the height, in pixels, of the player on screen
+      video_source_height: player.videoHeight, // Return the height, in pixels, of the current rendition playing in the player
+      video_source_width: player.videoWidth, // Return the height, in pixels, of the current rendition playing in the player
+
+      // Preferred properties - these should be provided in this callback if possible
+      // If any are missing, that is okay, but this will be a lack of data for the customer at a later time
+      player_is_fullscreen: fullscreen, // Return true if the player is fullscreen
+      player_autoplay_on: player.autoplay, // Return true if the player is autoplay
+      player_preload_on: !!(player.preload && (player.preload !== 'none')), // Return true if the player is preloading data (metadata, on, auto are all "true")
+      video_source_url: player.src, // Return the playback URL (i.e. URL to master manifest or MP4 file)
+      // video_source_mime_type: 'dash', // Return the mime type (if possible), otherwise the source type (hls, dash, mp4, flv, etc). This won't be static n the near future!
+      video_source_duration: isNaN(player.duration) ? undefined : secondsToMs(player.duration), // Return the duration of the source as reported by the player (could be different than is reported by the customer)
+      video_source_is_live: player.duration === Infinity,
+      // Optional properties - if you have them, send them, but if not, no big deal
+      video_poster_url: player.poster, // Return the URL of the poster image used
+      player_language_code: language, // Return the language code (e.g. `en`, `en-us`)
+      // Latency metrics
+      player_program_time: safeCall(player.currentProgramDateTime, 'getTime'),
+      video_part_holdback: latencyMetrics.partHoldBack && secondsToMs(latencyMetrics.partHoldBack),
+      video_holdback: latencyMetrics.holdBack && secondsToMs(latencyMetrics.holdBack),
+      video_target_duration: latencyMetrics.targetDuration && secondsToMs(latencyMetrics.targetDuration),
+      video_part_target_duration: latencyMetrics.partTargetDuration && secondsToMs(latencyMetrics.partTargetDuration),
+      player_manifest_newest_program_time: isNaN(latencyMetrics.newestProgramTime) ? undefined : latencyMetrics.newestProgramTime
+    };
+
+    assign(data, sessionData);
+    sessionData = {};
+    return data;
+  };
+
+  var isAdBreak = false;
+  var adPlayEventSeen = false;
+  var currentSourceUrl = null;
+  var firstPlay = true;
+  var sendPlay = false;
+  let emitPlayBugFlag = false;
+
+  // The following are linking events that the Mux core SDK requires with events from the player.
+  // There may be some cases where the player will send the same Mux event on multiple different
+  // events at the player level (e.g. mux.emit('play') may be as a result of multiple player events)
+  // OR multiple mux events will be sent as the result of a single player event (e.g. if there is
+  // a single event for breaking to a midroll ad, and mux requires a `pause` and an `adbreakstart` event both)
+
+  // Start initializing early, so playerready event is correct. // Lastly, initialize the tracking.
+  mux.init(playerID, options);
+
+  // Emit the `playerready` event when the player has finished initialization and is ready to begin
+  // playback.
+  emit('playerready');
+
+  // Emit the `pause` event when the player is instructed to pause playback. Examples are:
+  // 1) User clicks pause to halt playback
+  // 2) Playback of content is paused in order to break to an ad (may require simulating the `pause` event when the ad break starts if player is not explicitly paused)
+  player.addEventListener('pause', () => {
+    if (player.ads && isAdBreak && adPlayEventSeen) { // tiny workaround
+      adPlayEventSeen = false;
+      emit('adpause', getAdInformation(player));
+    } else {
+      if (firstPlay === false) {
+        emitPlayBugFlag = true;
+      }
+      emit('pause');
+    }
+  });
+
+  // Emit the `play` event when the player is instructed to start playback of the content. Examples are:
+  // 1) Initial playback of the content via an autoplay mechanism
+  // 2) The user clicking play on the player
+  // 3) The user resuming playback of the video (by clicking play) after the player has been paused
+  // 4) Content playback is resuming after having been paused for an ad to be played inline (may require additional event tracking than the one below)
+  player.addEventListener('play', () => {
+    if (player.ads && isAdBreak) {
+      adPlayEventSeen = true; // upcoming pause events are adpause events
+      emit('adplay', getAdInformation(player));
+    } else {
+      // We have to do this to catch when player.play() is called right after player.sources is updated,
+      // But they didn't wait for the sourcechange player event before attempting to play
+      if (currentSourceUrl && !firstPlay && player.src !== currentSourceUrl) {
+        // The source has changed!
+        // Annoyingly, we can't send the metadata here because it's not included in the event
+        // So flag that we need to emit a play event later when sourcechange comes in and we have the new metadata
+        sendPlay = true;
+      } else {
+        // hacky fix for THEOplayer bug where player.ads.playing is updated
+        // to 'true' even though an ad isn't playing which then causes 'play'
+        // event to be emitted twice in a row.
+        if (emitPlayBugFlag === false && firstPlay === false) {
+          return;
+        }
+        currentSourceUrl = player.src;
+        emit('play');
+      }
+    };
+    firstPlay = false;
+  });
+
+  // Emit the `playing` event when the player begins actual playback of the content after the most recent
+  // `play` event. This should refer to when the first frame is displayed to the user (and when the next
+  // frame is presented for resuming from a paused state)
+  player.addEventListener('playing', () => {
+    if (player.ads && isAdBreak) {
+      emit('adplaying', getAdInformation(player));
+    } else {
+      emit('playing');
+    }
+  });
+
+  // Emit the `seeking` event when the player begins seeking to a new position in playback
+  player.addEventListener('seeking', () => {
+    emit('seeking');
+  });
+
+  // Emit the `seeked` event when the player completes the seeking event (the new playhead position
+  // is available, and the player is beginnig to play back at the new location)
+  player.addEventListener('seeked', () => {
+    emit('seeked');
+  });
+
+  // Emit the `timeupdate` event when the current playhead position has progressed in playback
+  // This event should happen at least every 250 milliseconds
+  player.addEventListener('timeupdate', () => {
+    emit('timeupdate', {
+      player_playhead_time: player.currentTime // If you have the time passed in as a param to your event, use that
+    });
+  });
+  let prevBytesLoaded = 0;
+
+  const getTotalBytesLoaded = () => {
+    const totalBytesLoaded = player.metrics.totalBytesLoaded;
+
+    if (totalBytesLoaded) {
+      const diffBytes = totalBytesLoaded - prevBytesLoaded;
+
+      prevBytesLoaded = totalBytesLoaded;
+
+      if (diffBytes === 0) {
+        return undefined;
+      }
+      if (diffBytes < 0) {
+        return totalBytesLoaded;
+      }
+      return diffBytes;
+    }
+  };
+  let networkRequestMap = new Map();
+
+  const getRequestProperties = (req) => {
+    let request;
+
+    if (req.type === 'manifest' || req.type === 'segment') {
+      const { url, headers, body, useCredentials, type, subType, mediaType, responseType } = req;
+
+      request = { url, headers, body, useCredentials, type, subType, mediaType, responseType };
+    } else {
+      request = req;
+    };
+    return JSON.stringify(request);
+  };
+
+  const requestInterceptor = (req) => {
+    let request;
+
+    if (req.type === 'manifest' || req.type === 'segment') {
+      request = getRequestProperties(req);
+    } else {
+      request = req;
+    }
+    networkRequestMap.set(request, Date.now());
+  };
+
+  const responseInterceptor = (res) => {
+    const manifest = res.body;
+    const bytesLoaded = getTotalBytesLoaded();
+    const request = getRequestProperties(res.request);
+
+    if (res.status >= 400 && res.status <= 599) {
+      emit('requestfailed', {
+        request_error_code: res.status,
+        request_error_text: res.statusText,
+        request_hostname: res.request.url,
+        request_type: res.request.type,
+        request_start: networkRequestMap.get(request)
+      });
+    };
+    if (res.request.type === 'segment') {
+      emit('requestcompleted', {
+        request_type: 'media',
+        request_hostname: extractHostname(res.url),
+        request_response_headers: res.headers,
+        request_start: networkRequestMap.get(request),
+        request_response_start: undefined,
+        request_total_bytes_loaded: bytesLoaded, // only supports DASH videos
+        request_response_end: Date.now()
+      });
+    };
+    if (res.request.type === 'manifest' && typeof (manifest) === 'string') {
+      currentManifest = new ManifestParser(manifest);
+
+      // Only assign if data is coming. The reset happens in getStateData
+      if (!isJSONEmpty(currentManifest.sessionData)) {
+        sessionData = currentManifest.sessionData;
+      }
+    }
+    networkRequestMap.delete(request);
+  };
+
+  player.network.addRequestInterceptor(requestInterceptor);
+  player.network.addResponseInterceptor(responseInterceptor);
+
+  // Emit the `error` event when the current playback has encountered a fatal
+  // error. Ensure to pass the error code and error message to Mux in this
+  // event. You _must_ include at least one of error code and error message
+  // (but both is better)
+  if (options.automaticErrorTracking) {
+    player.addEventListener('error', (event) => {
+      // media aborted error code 5004
+      if (event.errorObject.code === 5004) {
+        emit('requestcanceled', {
+          request_hostname: undefined,
+          request_url: undefined,
+          request_type: 'media'
+        });
+      }
+      emit('error', {
+        player_error_code: player.error.code, // The code of the error
+        player_error_message: event.error // The message of the error
+      });
+    });
+  }
+
+  // Emit the `ended` event when the current asset has played to completion,
+  // without error.
+  player.addEventListener('ended', () => {
+    emit('ended');
+  });
+
+  // THEOplayer has a nice sourcechange event that can have metadata, which does
+  // exactly what we want on videochange, unless immediately after the player.sources is updated
+  // a player.play() is called before the sourcechange has first taken affect
+  // which causes the view to be incorrectly split
+  player.addEventListener('sourcechange', (event) => {
+    // Only do this if they provde `mux` under metadata and the source has changed
+    if (event.source && event.source.metadata && event.source.metadata.mux) {
+      if (player.src !== currentSourceUrl) {
+        currentSourceUrl = player.src;
+        emit('videochange', event.source.metadata.mux);
+        if (sendPlay) {
+          emit('play');
+          sendPlay = false;
+        }
+      } else {
+        // we need to do this to inject the metadata even if the source url hasn't changed
+        // because there is a corner case where setting an update as the first play won't have any metadata
+        emit('hb', event.source.metadata.mux);
+      }
+    }
+  });
+
+  // And clean up on destroy
+  player.addEventListener('destroy', () => {
+    destroyed = true;
+    emit('destroy');
+  });
+
+  /* AD EVENTS */
+  // Depending on your player, you may have separate ad events to track, or
+  // the standard playback events may double as ad events. If the latter is the
+  // case, you should track the state of the player (ad vs content) and then
+  // just prepend the Mux events above with 'ad' when those events fire and
+  // the player is in ad mode.
+
+  // THEOplayer 1.x does not have this module, so we can't track the ads
+  if (player.ads) {
+    // Emit the `adbreakstart` event when the player breaks to an ad slot. This
+    // may be directly at the beginning (before a play event) for pre-rolls, or
+    // (for both pre-rolls and mid/post-rolls) may be when the content is paused
+    // in order to break to ad.
+    player.ads.addEventListener('adbreakbegin', () => {
+      emitPlayBugFlag = true;
+      isAdBreak = true;
+      emit('adbreakstart', getAdInformation(player));
+    });
+
+    // Emit the `adbreakend` event when the ad break is over and content is about
+    // to be resumed.
+    player.ads.addEventListener('adbreakend', () => {
+      isAdBreak = false;
+      emit('adbreakend', getAdInformation(player));
+    });
+
+    // Emit the `adplay` event when an individual ad within an ad break is instructed
+    // to play. This should match the `play` event, but specific to ads (e.g. should
+    // fire on initial play as well as plays after a pause)
+    // player.ads.addEventListener('adbegin', () => {
+    //   emit('adplay');
+    // });
+
+    // Emit the `adended` event when an individual ad within an ad break is played to
+    // completion. This should match the `ended` event, but specific to ads
+    player.ads.addEventListener('adend', () => {
+      emit('adended', getAdInformation(player));
+    });
+
+    // Emit the `aderror` event when an individual ad within an ad break encounters
+    // an error. This should match the `error` event, but specific to ads
+    player.ads.addEventListener('aderror', () => {
+      isAdBreak = false;
+      emit('aderror', getAdInformation(player));
+    });
+  }
+
+  const currentBitrate = {
+    video: undefined,
+    audio: undefined,
+    total: undefined
+  };
+
+  const dispatchBandWidthEvent = () => {
+    const videoBitrate = currentBitrate.video || 0;
+    const audioBitrate = currentBitrate.audio || 0;
+
+    // For HLS streams, video and audio report the total bitrate (the same value), so
+    // only add if the two values aren't exactly the same.
+    const total = videoBitrate === audioBitrate ? videoBitrate : videoBitrate + audioBitrate;
+
+    if (total > 0 && total !== currentBitrate.total) {
+      currentBitrate.total = total;
+      emit('renditionchange', {
+        video_source_bitrate: currentBitrate.total
+      });
+    }
+  };
+
+  player.videoTracks.addEventListener('addtrack', (trackEvent) => {
+    trackEvent.track.addEventListener('activequalitychanged', function (qualityEvent) {
+      currentBitrate.video = qualityEvent.quality.bandwidth;
+      dispatchBandWidthEvent();
+    });
+  });
+
+  player.audioTracks.addEventListener('addtrack', (trackEvent) => {
+    trackEvent.track.addEventListener('activequalitychanged', function (qualityEvent) {
+      currentBitrate.audio = qualityEvent.quality.bandwidth;
+      dispatchBandWidthEvent();
+    });
+  });
+
+  return {
+    emit
+  };
+};
+
+function isJSONEmpty (jsonObj) {
+  return jsonObj &&
+    Object.keys(jsonObj).length === 0 &&
+    Object.getPrototypeOf(jsonObj) === Object.prototype;
+}
+
+// Because THEOplayer's player object is not extensible, we have to expose the
+// videochange capability directly on the window
+window.changeMuxVideo = function (player, data) {
+  log.info('[theoplayer-mux] `changeMuxVideo` has been deprecated in favor of ' +
+  'setting Mux metadata when directly changing source, or simply emitting a ' +
+  '`videochange` event. See https://docs.mux.com/docs/web-integration-guide?muxLang=THEOplayer#section-6-changing-the-video');
+
+  const playerObject = findPlayerObject(player);
+
+  if (playerObject) {
+    mux.emit(playerObject.id, 'videochange', data);
+  } else {
+    log.warn('[theoplayer-mux] The provided player has not been tracked by Mux before.');
+  }
+};
+
+export default initTHEOplayerMux;