bigscreen-player 10.5.0 → 10.6.0

package/dist/esm/embeddedsubtitles-ac97f821.js

@@ -0,0 +1,122 @@
+import { fromXML, generateISD, renderHTML } from 'smp-imsc';
+import { U as Utils, a as DebugTool, P as Plugins, D as DOMHelpers } from './main-131c2f25.js';
+import 'tslib';
+
+function EmbeddedSubtitles(mediaPlayer, autoStart, parentElement, _mediaSources, defaultStyleOpts) {
+  let exampleSubtitlesElement;
+  let imscRenderOpts = transformStyleOptions(defaultStyleOpts);
+  let subtitlesEnabled = false;
+
+  if (autoStart) start();
+
+  function removeExampleSubtitlesElement() {
+    if (exampleSubtitlesElement) {
+      DOMHelpers.safeRemoveElement(exampleSubtitlesElement);
+      exampleSubtitlesElement = undefined;
+    }
+  }
+
+  function renderExample(exampleXmlString, styleOpts, safePosition = {}) {
+    const exampleXml = fromXML(exampleXmlString);
+    removeExampleSubtitlesElement();
+
+    const customStyleOptions = transformStyleOptions(styleOpts);
+    const exampleStyle = Utils.merge(imscRenderOpts, customStyleOptions);
+
+    exampleSubtitlesElement = document.createElement("div");
+    exampleSubtitlesElement.id = "subtitlesPreview";
+    exampleSubtitlesElement.style.position = "absolute";
+
+    const elementWidth = parentElement.clientWidth;
+    const elementHeight = parentElement.clientHeight;
+    const topPixels = ((safePosition.top || 0) / 100) * elementHeight;
+    const rightPixels = ((safePosition.right || 0) / 100) * elementWidth;
+    const bottomPixels = ((safePosition.bottom || 0) / 100) * elementHeight;
+    const leftPixels = ((safePosition.left || 0) / 100) * elementWidth;
+
+    const renderWidth = elementWidth - leftPixels - rightPixels;
+    const renderHeight = elementHeight - topPixels - bottomPixels;
+
+    exampleSubtitlesElement.style.top = `${topPixels}px`;
+    exampleSubtitlesElement.style.right = `${rightPixels}px`;
+    exampleSubtitlesElement.style.bottom = `${bottomPixels}px`;
+    exampleSubtitlesElement.style.left = `${leftPixels}px`;
+    parentElement.appendChild(exampleSubtitlesElement);
+
+    renderSubtitle(exampleXml, 1, exampleSubtitlesElement, exampleStyle, renderHeight, renderWidth);
+  }
+
+  function renderSubtitle(xml, currentTime, subsElement, styleOpts, renderHeight, renderWidth) {
+    try {
+      const isd = generateISD(xml, currentTime);
+      renderHTML(isd, subsElement, null, renderHeight, renderWidth, false, null, null, false, styleOpts);
+    } catch (error) {
+      error.name = "SubtitlesRenderError";
+      DebugTool.error(error);
+
+      Plugins.interface.onSubtitlesRenderError();
+    }
+  }
+
+  function start() {
+    subtitlesEnabled = true;
+    mediaPlayer.setSubtitles(true);
+    mediaPlayer.customiseSubtitles(imscRenderOpts);
+  }
+
+  function stop() {
+    subtitlesEnabled = false;
+    mediaPlayer.setSubtitles(false);
+  }
+
+  function tearDown() {
+    stop();
+  }
+
+  function customise(styleOpts) {
+    const customStyleOptions = transformStyleOptions(styleOpts);
+    imscRenderOpts = Utils.merge(imscRenderOpts, customStyleOptions);
+    mediaPlayer.customiseSubtitles(imscRenderOpts);
+    if (subtitlesEnabled) {
+      stop();
+      start();
+    }
+  }
+
+  // Opts: { backgroundColour: string (css colour, hex), fontFamily: string , size: number, lineHeight: number }
+  function transformStyleOptions(opts) {
+    if (opts === undefined) return
+
+    const customStyles = {};
+
+    if (opts.backgroundColour) {
+      customStyles.spanBackgroundColorAdjust = { transparent: opts.backgroundColour };
+    }
+
+    if (opts.fontFamily) {
+      customStyles.fontFamily = opts.fontFamily;
+    }
+
+    if (opts.size > 0) {
+      customStyles.sizeAdjust = opts.size;
+    }
+
+    if (opts.lineHeight) {
+      customStyles.lineHeightAdjust = opts.lineHeight;
+    }
+
+    return customStyles
+  }
+
+  return {
+    start,
+    stop,
+    updatePosition: () => {},
+    customise,
+    renderExample,
+    clearExample: removeExampleSubtitlesElement,
+    tearDown,
+  }
+}
+
+export { EmbeddedSubtitles as default };

package/dist/esm/{imscsubtitles-51232442.js → imscsubtitles-db19e99f.js}

@@ -1,5 +1,5 @@
 import { fromXML, generateISD, renderHTML } from 'smp-imsc';
-import { f as findSegmentTemplate, L as LoadUrl, a as DebugTool, P as Plugins, U as Utils, D as DOMHelpers } from './main-ab11c548.js';
+import { f as findSegmentTemplate, L as LoadUrl, a as DebugTool, P as Plugins, U as Utils, D as DOMHelpers } from './main-131c2f25.js';
 import 'tslib';
 
 const SEGMENTS_BUFFER_SIZE = 3;

package/dist/esm/{legacysubtitles-6d275496.js → legacysubtitles-b9bb8bbf.js}

@@ -1,4 +1,4 @@
-import { D as DOMHelpers, a as DebugTool, P as Plugins, L as LoadUrl, T as TransportControlPosition } from './main-ab11c548.js';
+import { D as DOMHelpers, a as DebugTool, P as Plugins, L as LoadUrl, T as TransportControlPosition } from './main-131c2f25.js';
 import 'tslib';
 
 /**

package/dist/esm/{main-ab11c548.js → main-131c2f25.js}

@@ -5710,7 +5710,7 @@ BasicStrategy.getLiveSupport = () => LiveSupport.SEEKABLE;
 function StrategyPicker() {
   return new Promise((resolve, reject) => {
     if (window.bigscreenPlayer.playbackStrategy === PlaybackStrategy.MSE) {
-      return import('./msestrategy-5d1b0362.js')
+      return import('./msestrategy-9a85e747.js')
         .then(({ default: MSEStrategy }) => resolve(MSEStrategy))
         .catch((reason) => {
           const error = new Error(isError(reason) ? reason.message : undefined);
@@ -6051,6 +6051,7 @@ function PlayerComponent(
   errorCallback,
   audioDescribedCallback
 ) {
+  let setSubtitlesState;
   let _stateUpdateCallback = stateUpdateCallback;
 
   let mediaKind = bigscreenPlayerData.media.kind;
@@ -6085,6 +6086,8 @@ function PlayerComponent(
       mediaMetaData = bigscreenPlayerData.media;
 
       loadMedia(bigscreenPlayerData.media.type, bigscreenPlayerData.initialPlaybackTime);
+
+      if (setSubtitlesState) playbackStrategy.setSubtitles(setSubtitlesState);
     })
     .catch((error) => {
       errorCallback && errorCallback(error);
@@ -6104,6 +6107,22 @@ function PlayerComponent(
     }
   }
 
+  function isSubtitlesAvailable() {
+    return playbackStrategy && playbackStrategy.isSubtitlesAvailable()
+  }
+
+  function setSubtitles(state) {
+    if (playbackStrategy) {
+      playbackStrategy.setSubtitles(state);
+    } else {
+      setSubtitlesState = state;
+    }
+  }
+
+  function customiseSubtitles(styleOpts) {
+    return playbackStrategy && playbackStrategy.customiseSubtitles(styleOpts)
+  }
+
   function getDuration() {
     return playbackStrategy?.getDuration()
   }
@@ -6436,8 +6455,10 @@ function PlayerComponent(
   return {
     play,
     pause,
+    customiseSubtitles,
     transitions,
     isEnded,
+    isSubtitlesAvailable,
     setPlaybackRate,
     getPlaybackRate,
     setCurrentTime,
@@ -6450,6 +6471,7 @@ function PlayerComponent(
     isAudioDescribedAvailable,
     isAudioDescribedEnabled,
     setAudioDescribed,
+    setSubtitles,
   }
 }
 
@@ -6465,7 +6487,7 @@ const PauseTriggers = {
     DEVICE: 3,
 };
 
-var Version = "10.5.0";
+var Version = "10.6.0";
 
 /* eslint-disable no-use-before-define */
 
@@ -7641,6 +7663,8 @@ function findSegmentTemplate(url) {
 
 function Subtitles(mediaPlayer, autoStart, playbackElement, defaultStyleOpts, mediaSources, callback) {
   const useLegacySubs = window.bigscreenPlayer?.overrides?.legacySubtitles ?? false;
+  const embeddedSubs = window.bigscreenPlayer?.overrides?.embeddedSubtitles ?? false;
+
   const isSeekableLiveSupport =
     window.bigscreenPlayer.liveSupport == null || window.bigscreenPlayer.liveSupport === "seekable";
 
@@ -7649,7 +7673,7 @@ function Subtitles(mediaPlayer, autoStart, playbackElement, defaultStyleOpts, me
 
   if (available()) {
     if (useLegacySubs) {
-      import('./legacysubtitles-6d275496.js')
+      import('./legacysubtitles-b9bb8bbf.js')
         .then(({ default: LegacySubtitles }) => {
           subtitlesContainer = LegacySubtitles(mediaPlayer, autoStart, playbackElement, mediaSources, defaultStyleOpts);
           callback(subtitlesEnabled);
@@ -7657,8 +7681,23 @@ function Subtitles(mediaPlayer, autoStart, playbackElement, defaultStyleOpts, me
         .catch(() => {
           Plugins.interface.onSubtitlesDynamicLoadError();
         });
+    } else if (embeddedSubs) {
+      import('./embeddedsubtitles-ac97f821.js')
+        .then(({ default: EmbeddedSubtitles }) => {
+          subtitlesContainer = EmbeddedSubtitles(
+            mediaPlayer,
+            autoStart,
+            playbackElement,
+            mediaSources,
+            defaultStyleOpts
+          );
+          callback(subtitlesEnabled);
+        })
+        .catch(() => {
+          Plugins.interface.onSubtitlesDynamicLoadError();
+        });
     } else {
-      import('./imscsubtitles-51232442.js')
+      import('./imscsubtitles-db19e99f.js')
         .then(({ default: IMSCSubtitles }) => {
           subtitlesContainer = IMSCSubtitles(mediaPlayer, autoStart, playbackElement, mediaSources, defaultStyleOpts);
           callback(subtitlesEnabled);
@@ -7705,6 +7744,10 @@ function Subtitles(mediaPlayer, autoStart, playbackElement, defaultStyleOpts, me
   }
 
   function available() {
+    if (embeddedSubs) {
+      return mediaPlayer && mediaPlayer.isSubtitlesAvailable()
+    }
+
     const url = mediaSources.currentSubtitlesSource();
 
     if (!(typeof url === "string" && url !== "")) {
@@ -7852,13 +7895,6 @@ function BigscreenPlayer() {
       !initialPresentationTime &&
       initialPresentationTime !== 0;
 
-    readyHelper = ReadyHelper(
-      initialPresentationTime,
-      mediaSources.time().manifestType,
-      PlayerComponent.getLiveSupport(),
-      _callbacks.playerReady
-    );
-
     playerComponent = PlayerComponent(
       playbackElement,
       { media, enableAudioDescribed, initialPlaybackTime: initialPresentationTime },
@@ -7868,13 +7904,21 @@ function BigscreenPlayer() {
       callAudioDescribedCallbacks
     );
 
-    subtitles = Subtitles(
-      playerComponent,
-      enableSubtitles,
-      playbackElement,
-      media.subtitleCustomisation,
-      mediaSources,
-      callSubtitlesCallbacks
+    readyHelper = ReadyHelper(
+      initialPresentationTime,
+      mediaSources.time().manifestType,
+      PlayerComponent.getLiveSupport(),
+      () => {
+        _callbacks.playerReady();
+        subtitles = Subtitles(
+          playerComponent,
+          enableSubtitles,
+          playbackElement,
+          media.subtitleCustomisation,
+          mediaSources,
+          callSubtitlesCallbacks
+        );
+      }
     );
   }
 

package/dist/esm/main.js

@@ -1,2 +1,2 @@
-export { B as BigscreenPlayer, a as DebugTool, E as EntryCategory, b as LiveSupport, c as ManifestType, M as MediaKinds, d as MediaState, g as MockBigscreenPlayer, h as PauseTriggers, i as PlaybackStrategy, k as Timeline, j as TransferFormat, T as TransportControlPosition, W as WindowTypes, l as isMessage, m as isMetric, n as isTrace } from './main-ab11c548.js';
+export { B as BigscreenPlayer, a as DebugTool, E as EntryCategory, b as LiveSupport, c as ManifestType, M as MediaKinds, d as MediaState, g as MockBigscreenPlayer, h as PauseTriggers, i as PlaybackStrategy, k as Timeline, j as TransferFormat, T as TransportControlPosition, W as WindowTypes, l as isMessage, m as isMetric, n as isTrace } from './main-131c2f25.js';
 import 'tslib';

package/dist/esm/{msestrategy-5d1b0362.js → msestrategy-9a85e747.js}

@@ -1,5 +1,5 @@
 import { MediaPlayer } from 'dashjs/index';
-import { U as Utils, M as MediaKinds, b as LiveSupport, a as DebugTool, c as ManifestType, d as MediaState, P as Plugins, e as autoResumeAtStartOfRange, D as DOMHelpers } from './main-ab11c548.js';
+import { U as Utils, M as MediaKinds, b as LiveSupport, a as DebugTool, c as ManifestType, d as MediaState, P as Plugins, e as autoResumeAtStartOfRange, D as DOMHelpers } from './main-131c2f25.js';
 import 'tslib';
 
 function filter(manifest, representationOptions) {
@@ -136,6 +136,8 @@ function MSEStrategy(
 
   let mediaPlayer;
   let mediaElement;
+  let subtitleElement;
+  let subtitlesEnabled = false;
   const manifestType = mediaSources.time().manifestType;
 
   const playerSettings = Utils.merge(
@@ -145,12 +147,15 @@ function MSEStrategy(
       },
       streaming: {
         blacklistExpiryTime: mediaSources.failoverResetTime(),
+        lastMediaSettingsCachingInfo: { enabled: false },
         buffer: {
           bufferToKeep: 4,
           bufferTimeAtTopQuality: 12,
           bufferTimeAtTopQualityLongForm: 15,
         },
-        lastMediaSettingsCachingInfo: { enabled: false },
+        text: {
+          defaultEnabled: false,
+        },
       },
     },
     customPlayerSettings
@@ -216,6 +221,7 @@ function MSEStrategy(
     STREAM_INITIALIZED: "streamInitialized",
     FRAGMENT_CONTENT_LENGTH_MISMATCH: "fragmentContentLengthMismatch",
     QUOTA_EXCEEDED: "quotaExceeded",
+    TEXT_TRACKS_ADDED: "allTextTracksAdded",
     CURRENT_TRACK_CHANGED: "currentTrackChanged",
   };
 
@@ -616,13 +622,16 @@ function MSEStrategy(
   function onCurrentTrackChanged(event) {
     if (!isAudioDescribedAvailable()) return
 
+    audioDescribed.enable = isAudioDescribedEnabled();
     const mediaType = event.newMediaInfo.type;
+
     DebugTool.info(
       `${mediaType} track changed.${
-        mediaType === "audio" ? (isAudioDescribedEnabled() ? " Audio Described on." : " Audio Described off.") : ""
+        mediaType === "audio" ? (audioDescribed.enable ? " Audio Described on." : " Audio Described off.") : ""
       }`
     );
-    audioDescribed.callback && audioDescribed.callback(isAudioDescribedEnabled());
+
+    audioDescribed.callback && audioDescribed.callback(audioDescribed.enable);
   }
 
   function publishMediaState(mediaState) {
@@ -660,6 +669,13 @@ function MSEStrategy(
     }
   }
 
+  function setUpSubtitleElement(playbackElement) {
+    subtitleElement = document.createElement("div");
+    subtitleElement.id = "bsp_subtitles";
+    subtitleElement.style.position = "absolute";
+    playbackElement.appendChild(subtitleElement, playbackElement.firstChild);
+  }
+
   function setUpMediaElement(playbackElement) {
     mediaElement = mediaKind === MediaKinds.AUDIO ? document.createElement("audio") : document.createElement("video");
 
@@ -683,6 +699,7 @@ function MSEStrategy(
 
   function setUpMediaPlayer(presentationTimeInSeconds) {
     const dashSettings = getDashSettings(playerSettings);
+    const embeddedSubs = window.bigscreenPlayer?.overrides?.embeddedSubtitles ?? false;
     const protectionData = mediaSources.currentProtectionData();
 
     mediaPlayer = MediaPlayer().create();
@@ -694,6 +711,21 @@ function MSEStrategy(
 
     mediaPlayer.initialize(mediaElement, null);
 
+    if (embeddedSubs) {
+      setUpSubtitleElement(playbackElement);
+      mediaPlayer.attachTTMLRenderingDiv(subtitleElement);
+    }
+
+    modifySource(presentationTimeInSeconds);
+  }
+
+  function modifySource(presentationTimeInSeconds) {
+    if (mediaPlayer.isReady()) {
+      // Reset source to apply media settings for the new source
+      // dash.js will reset media settings if a new source is attached while its initialised with a source
+      mediaPlayer.attachSource(null);
+    }
+
     mediaPlayer.setInitialMediaSettingsFor(
       "audio",
       audioDescribed.enable
@@ -706,10 +738,6 @@ function MSEStrategy(
           }
     );
 
-    modifySource(presentationTimeInSeconds);
-  }
-
-  function modifySource(presentationTimeInSeconds) {
     const source = mediaSources.currentSource();
     const anchor = buildSourceAnchor(presentationTimeInSeconds);
 
@@ -769,10 +797,15 @@ function MSEStrategy(
     mediaPlayer.on(DashJSEvents.GAP_JUMP, onGapJump);
     mediaPlayer.on(DashJSEvents.GAP_JUMP_TO_END, onGapJump);
     mediaPlayer.on(DashJSEvents.QUOTA_EXCEEDED, onQuotaExceeded);
+    mediaPlayer.on(DashJSEvents.TEXT_TRACKS_ADDED, handleTextTracks);
     mediaPlayer.on(DashJSEvents.MANIFEST_LOADING_FINISHED, manifestLoadingFinished);
     mediaPlayer.on(DashJSEvents.CURRENT_TRACK_CHANGED, onCurrentTrackChanged);
   }
 
+  function handleTextTracks() {
+    mediaPlayer.enableText(subtitlesEnabled);
+  }
+
   function manifestLoadingFinished(event) {
     manifestLoadCount++;
     manifestRequestTime = event.request.requestEndDate.getTime() - event.request.requestStartDate.getTime();
@@ -799,6 +832,10 @@ function MSEStrategy(
       : { start: 0, end: getDuration() }
   }
 
+  function customiseSubtitles(options) {
+    return mediaPlayer && mediaPlayer.updateSettings({ streaming: { text: { imsc: { options } } } })
+  }
+
   function getDuration() {
     const duration = mediaPlayer && mediaPlayer.isReady() && mediaPlayer.duration();
 
@@ -876,6 +913,11 @@ function MSEStrategy(
     );
   }
 
+  function isSubtitlesAvailable() {
+    const textTracks = mediaPlayer.getTracksFor("text");
+    return (textTracks && textTracks.length > 0) ?? false
+  }
+
   function isTrackAudioDescribed(track) {
     return (
       track.roles.includes("alternate") &&
@@ -954,9 +996,13 @@ function MSEStrategy(
       mediaElement.removeEventListener("ratechange", onRateChange);
 
       DOMHelpers.safeRemoveElement(mediaElement);
-
       mediaElement = undefined;
     }
+
+    if (subtitleElement) {
+      DOMHelpers.safeRemoveElement(subtitleElement);
+      subtitleElement = undefined;
+    }
   }
 
   function getSafelySeekableRange() {
@@ -1051,9 +1097,17 @@ function MSEStrategy(
     getCurrentTime,
     isAudioDescribedAvailable,
     isAudioDescribedEnabled,
+    isSubtitlesAvailable,
     setAudioDescribedOn,
     setAudioDescribedOff,
     getDuration,
+    setSubtitles: (state) => {
+      subtitlesEnabled = state ?? false;
+
+      if (mediaPlayer) {
+        mediaPlayer.enableText(subtitlesEnabled);
+      }
+    },
     getPlayerElement: () => mediaElement,
     tearDown,
     reset: () => {
@@ -1063,6 +1117,7 @@ function MSEStrategy(
     },
     isEnded: () => isEnded,
     isPaused,
+    customiseSubtitles,
     pause,
     play: () => mediaPlayer.play(),
     setCurrentTime,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bigscreen-player",
-  "version": "10.5.0",
+  "version": "10.6.0",
   "type": "module",
   "description": "Simplified media playback for bigscreen devices.",
   "main": "dist/esm/main.js",
@@ -30,7 +30,7 @@
     "@babel/plugin-transform-runtime": "^7.23.9",
     "@babel/preset-env": "^7.23.8",
     "@babel/preset-typescript": "^7.23.3",
-    "@rollup/plugin-alias": "^5.1.0",
+    "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-inject": "^5.0.5",
@@ -64,7 +64,7 @@
     "typescript-eslint": "^7.2.0"
   },
   "dependencies": {
-    "dashjs": "github:bbc/dash.js#smp-v4.7.3-6",
+    "dashjs": "github:bbc/dash.js#smp-v4.7.3-7",
     "smp-imsc": "github:bbc/imscJS#v1.0.3"
   },
   "repository": {