Add Subtitles Always on Top option (#397)

Author: ShiningTrapez

src/bigscreenplayer.js

@@ -109,7 +109,7 @@ function BigscreenPlayer() {
     }
   }
 
-  function bigscreenPlayerDataLoaded({ media, enableSubtitles, enableAudioDescribed }) {
+  function bigscreenPlayerDataLoaded({ media, enableSubtitles, subtitlesAlwaysOnTop, enableAudioDescribed }) {
     abortSignal.throwIfAborted(AbortStages.DATA_LOADED)
 
     const initialPresentationTime =
@@ -136,14 +136,11 @@ function BigscreenPlayer() {
       PlayerComponent.getLiveSupport(),
       () => {
         _callbacks.playerReady && _callbacks.playerReady()
-        subtitles = Subtitles(
-          playerComponent,
-          enableSubtitles,
-          playbackElement,
-          media.subtitleCustomisation,
-          mediaSources,
-          callSubtitlesCallbacks
-        )
+        subtitles = Subtitles(playerComponent, playbackElement, mediaSources, callSubtitlesCallbacks, {
+          alwaysOnTop: subtitlesAlwaysOnTop,
+          autoStart: enableSubtitles,
+          defaultStyleOpts: media.subtitleCustomisation,
+        })
       }
     )
   }

src/bigscreenplayer.test.js

@@ -209,11 +209,12 @@ describe("Bigscreen Player", () => {
 
       expect(jest.mocked(Subtitles)).toHaveBeenCalledWith(
         expect.any(Object),
-        true,
         expect.any(HTMLDivElement),
-        undefined,
         expect.any(Object),
-        expect.any(Function)
+        expect.any(Function),
+        expect.objectContaining({
+          autoStart: true,
+        })
       )
     })
 

src/subtitles/embeddedsubtitles.js

@@ -4,7 +4,7 @@ import Utils from "../utils/playbackutils"
 import DebugTool from "../debugger/debugtool"
 import Plugins from "../plugins"
 
-function EmbeddedSubtitles(mediaPlayer, autoStart, parentElement, _mediaSources, defaultStyleOpts) {
+function EmbeddedSubtitles(mediaPlayer, parentElement, { autoStart = false, defaultStyleOpts = {} } = {}) {
   let exampleSubtitlesElement
   let imscRenderOpts = transformStyleOptions(defaultStyleOpts)
   let subtitlesEnabled = false
@@ -43,6 +43,7 @@ function EmbeddedSubtitles(mediaPlayer, autoStart, parentElement, _mediaSources,
     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)

src/subtitles/embeddedsubtitles.test.js

@@ -72,9 +72,7 @@ describe("Embedded Subtitles", () => {
 
   describe("construction", () => {
     it("returns the correct interface", () => {
-      const autoStart = false
-
-      subtitles = EmbeddedSubtitles(mockMediaPlayer, autoStart, targetElement, null, {})
+      subtitles = EmbeddedSubtitles(mockMediaPlayer, targetElement)
 
       expect(subtitles).toEqual(
         expect.objectContaining({
@@ -91,7 +89,10 @@ describe("Embedded Subtitles", () => {
     it("triggers the MSE player to enable subtitles immediately when autoplay is true", () => {
       const autoStart = true
 
-      subtitles = EmbeddedSubtitles(mockMediaPlayer, autoStart, targetElement, null, {})
+      subtitles = EmbeddedSubtitles(mockMediaPlayer, targetElement, {
+        autoStart,
+        defaultStyleOpts: {},
+      })
 
       progressTime(1.5)
       expect(mockMediaPlayer.setSubtitles).toHaveBeenCalledTimes(1)
@@ -100,7 +101,7 @@ describe("Embedded Subtitles", () => {
     it("does not trigger the MSE player to enable subtitles immediately when autoplay is false", () => {
       const autoStart = false
 
-      subtitles = EmbeddedSubtitles(mockMediaPlayer, autoStart, targetElement, null, {})
+      subtitles = EmbeddedSubtitles(mockMediaPlayer, targetElement, { autoStart })
 
       progressTime(1.5)
       expect(mockMediaPlayer.setSubtitles).toHaveBeenCalledTimes(0)
@@ -111,9 +112,11 @@ describe("Embedded Subtitles", () => {
     it("overrides the subtitles styling metadata with supplied defaults when rendering", () => {
       const expectedStyles = { spanBackgroundColorAdjust: { transparent: "black" }, fontFamily: "Arial" }
 
-      subtitles = EmbeddedSubtitles(mockMediaPlayer, false, targetElement, null, {
-        backgroundColour: "black",
-        fontFamily: "Arial",
+      subtitles = EmbeddedSubtitles(mockMediaPlayer, targetElement, {
+        defaultStyleOpts: {
+          backgroundColour: "black",
+          fontFamily: "Arial",
+        },
       })
 
       subtitles.start()
@@ -124,7 +127,7 @@ describe("Embedded Subtitles", () => {
     })
 
     it("overrides the subtitles styling metadata with supplied custom styles when rendering", () => {
-      subtitles = EmbeddedSubtitles(mockMediaPlayer, false, targetElement, null, {})
+      subtitles = EmbeddedSubtitles(mockMediaPlayer, targetElement)
 
       const styleOpts = { size: 0.7, lineHeight: 0.9 }
       const expectedOpts = { sizeAdjust: 0.7, lineHeightAdjust: 0.9 }
@@ -147,7 +150,7 @@ describe("Embedded Subtitles", () => {
         lineHeightAdjust: 0.9,
       }
 
-      subtitles = EmbeddedSubtitles(mockMediaPlayer, false, targetElement, null, defaultStyleOpts)
+      subtitles = EmbeddedSubtitles(mockMediaPlayer, targetElement, { defaultStyleOpts })
 
       mockMediaPlayer.getCurrentTime.mockReturnValueOnce(1)
 
@@ -161,7 +164,7 @@ describe("Embedded Subtitles", () => {
       const defaultStyleOpts = { backgroundColour: "black", fontFamily: "Arial" }
       const customStyleOpts = { size: 0.7, lineHeight: 0.9 }
 
-      subtitles = EmbeddedSubtitles(mockMediaPlayer, false, targetElement, null, defaultStyleOpts)
+      subtitles = EmbeddedSubtitles(mockMediaPlayer, targetElement, { defaultStyleOpts })
 
       mockMediaPlayer.getCurrentTime.mockReturnValueOnce(1)
 
@@ -179,7 +182,7 @@ describe("Embedded Subtitles", () => {
 
   describe("example rendering", () => {
     it("should call fromXML, generate and render when renderExample is called", () => {
-      subtitles = EmbeddedSubtitles(mockMediaPlayer, false, targetElement, null, {})
+      subtitles = EmbeddedSubtitles(mockMediaPlayer, targetElement)
 
       subtitles.renderExample("", {}, {})
 
@@ -189,7 +192,7 @@ describe("Embedded Subtitles", () => {
     })
 
     it("should call renderHTML with a preview element with the correct structure when no position info", () => {
-      subtitles = EmbeddedSubtitles(mockMediaPlayer, false, targetElement, null, {})
+      subtitles = EmbeddedSubtitles(mockMediaPlayer, targetElement)
 
       let exampleSubsElement = null
       let height = null
@@ -215,7 +218,7 @@ describe("Embedded Subtitles", () => {
     })
 
     it("should call renderHTML with a preview element with the correct structure when there is position info", () => {
-      subtitles = EmbeddedSubtitles(mockMediaPlayer, false, targetElement, null, {})
+      subtitles = EmbeddedSubtitles(mockMediaPlayer, targetElement)
 
       let exampleSubsElement = null
       let height = null

src/subtitles/imscsubtitles.js

@@ -9,7 +9,12 @@ import findSegmentTemplate from "../utils/findtemplate"
 const SEGMENTS_BUFFER_SIZE = 3
 const LOAD_ERROR_COUNT_MAX = 3
 
-function IMSCSubtitles(mediaPlayer, autoStart, parentElement, mediaSources, defaultStyleOpts) {
+function IMSCSubtitles(
+  mediaPlayer,
+  parentElement,
+  mediaSources,
+  { alwaysOnTop = false, autoStart = false, defaultStyleOpts = {} } = {}
+) {
   let imscRenderOpts = transformStyleOptions(defaultStyleOpts)
   let currentSegmentRendered = {}
   let loadErrorCount = 0
@@ -19,9 +24,7 @@ function IMSCSubtitles(mediaPlayer, autoStart, parentElement, mediaSources, defa
   let currentSubtitlesElement
   let updateInterval
 
-  if (autoStart) {
-    start()
-  }
+  if (autoStart) start()
 
   function hasOffset() {
     const { presentationTimeOffsetInMilliseconds } = mediaSources.time()
@@ -176,7 +179,9 @@ function IMSCSubtitles(mediaPlayer, autoStart, parentElement, mediaSources, defa
 
   // Opts: { backgroundColour: string (css colour, hex), fontFamily: string , size: number, lineHeight: number }
   function transformStyleOptions(opts) {
-    if (opts === undefined) return
+    if (opts === undefined || Object.keys(opts).length === 0) {
+      return {}
+    }
 
     const customStyles = {}
 
@@ -243,6 +248,9 @@ function IMSCSubtitles(mediaPlayer, autoStart, parentElement, mediaSources, defa
     currentSubtitlesElement = document.createElement("div")
     currentSubtitlesElement.id = "bsp_subtitles"
     currentSubtitlesElement.style.position = "absolute"
+
+    if (alwaysOnTop) currentSubtitlesElement.style.zIndex = 2147483647
+
     parentElement.appendChild(currentSubtitlesElement)
 
     renderSubtitle(
@@ -280,6 +288,9 @@ function IMSCSubtitles(mediaPlayer, autoStart, parentElement, mediaSources, defa
     exampleSubtitlesElement.style.right = `${rightPixels}px`
     exampleSubtitlesElement.style.bottom = `${bottomPixels}px`
     exampleSubtitlesElement.style.left = `${leftPixels}px`
+
+    if (alwaysOnTop) exampleSubtitlesElement.style.zIndex = 2147483647
+
     parentElement.appendChild(exampleSubtitlesElement)
 
     renderSubtitle(exampleXml, 1, exampleSubtitlesElement, exampleStyle, renderHeight, renderWidth)