Expose imsc.js styling through Dash.js

Author: ryanmccartney

src/core/Settings.js

@@ -503,7 +503,18 @@ import Events from './events/Events';
  * Enable/disable subtitle rendering by default.
  * @property {boolean} [extendSegmentedCues=true]
  * Enable/disable patching of segmented cues in order to merge as a single cue by extending cue end time.
- * @property {object} [webvtt={customRenderingEnabled=false}]
+ * @property {boolean} [imsc.displayForcedOnlyMode=false]
+ * Enable/disable forced only mode in IMSC captions.
+ * When true, only those captions where itts:forcedDisplay="true" will be displayed.
+ * @property {boolean} [imsc.enableRollUp=true]
+ * Enable/disable rollUp style display of IMSC captions.
+ * @property {number} [imsc.options.sizeAdjust=1]
+ * IMSC styling options - adjust text size, scales the text size and line padding 
+ * @property {number} [imsc.options.lineHeightAdjust=1]
+ * IMSC styling options - scales the line height 
+ * @property {number} [imsc.options.backgroundOpacityScale=1]
+ * IMSC styling options - scales the backgroundColor opacity 
+ * @property {object} [webvtt.customRenderingEnabled=false]
  * Enables the custom rendering for WebVTT captions. For details refer to the "Subtitles and Captions" sample section of dash.js.
  * Custom WebVTT rendering requires the external library vtt.js that can be found in the contrib folder.
  */
@@ -982,6 +993,15 @@ function Settings() {
             text: {
                 defaultEnabled: true,
                 extendSegmentedCues: true,
+                imsc: {
+                    displayForcedOnlyMode: false,
+                    enableRollUp: true,
+                    options: {
+                        sizeAdjust: 1,
+                        lineHeightAdjust: 1,
+                        backgroundOpacityScale: 1
+                    },
+                },
                 webvtt: {
                     customRenderingEnabled: false
                 }

src/streaming/text/TextTracks.js

@@ -411,12 +411,22 @@ function TextTracks(config) {
         if (captionContainer) {
             const finalCue = document.createElement('div');
             captionContainer.appendChild(finalCue);
-            previousISDState = renderHTML(cue.isd, finalCue, function (src) {
-                return _resolveImageSrc(cue, src);
-            }, captionContainer.clientHeight, captionContainer.clientWidth, false/*displayForcedOnlyMode*/, function (err) {
-                logger.info('renderCaption :', err);
-                //TODO add ErrorHandler management
-            }, previousISDState, true /*enableRollUp*/);
+            previousISDState = renderHTML(
+                cue.isd,
+                finalCue,
+                function (src) {
+                    return _resolveImageSrc(cue, src)
+                },
+                captionContainer.clientHeight,
+                captionContainer.clientWidth,
+                settings.get().streaming.text.imsc.displayForcedOnlyMode,
+                function (err) {
+                    logger.info('renderCaption :', err) /*TODO: add ErrorHandler management*/
+                },
+                previousISDState,
+                settings.get().streaming.text.imsc.enableRollUp,
+                settings.get().streaming.text.imsc.options
+            );
             finalCue.id = cue.cueID;
             eventBus.trigger(MediaPlayerEvents.CAPTION_RENDERED, { captionDiv: finalCue, currentTrackIdx });
         }