bitmovin-player-ui 3.78.0 → 3.80.0

package/dist/js/framework/components/subtitleoverlay.d.ts

@@ -25,7 +25,6 @@ export declare class SubtitleOverlay extends Container<ContainerConfig> {
     private static readonly CLASS_CEA_608;
     private static readonly CEA608_NUM_ROWS;
     private static readonly CEA608_NUM_COLUMNS;
-    private static readonly CEA608_ROW_OFFSET;
     private static readonly CEA608_COLUMN_OFFSET;
     constructor(config?: ContainerConfig);
     configure(player: PlayerAPI, uimanager: UIInstanceManager): void;
@@ -46,6 +45,7 @@ export declare class SubtitleLabel extends Label<SubtitleLabelConfig> {
     get vtt(): VTTProperties;
     get region(): string;
     get regionStyle(): string;
+    set regionStyle(style: string);
 }
 export declare class SubtitleRegionContainerManager {
     private subtitleOverlay;

package/dist/js/framework/components/subtitleoverlay.js

@@ -154,17 +154,19 @@ var SubtitleOverlay = exports.SubtitleOverlay = /** @class */ (function (_super)
     };
     SubtitleOverlay.prototype.generateLabel = function (event) {
         // Sanitize cue data (must be done before the cue ID is generated in subtitleManager.cueEnter / update)
+        var region = event.region;
         if (event.position) {
             // Sometimes the positions are undefined, we assume them to be zero
             event.position.row = event.position.row || 0;
             event.position.column = event.position.column || 0;
+            region = region || "cea608-row-".concat(event.position.row);
         }
         var label = new SubtitleLabel({
             // Prefer the HTML subtitle text if set, else try generating a image tag as string from the image attribute,
             // else use the plain text
             text: event.html || ActiveSubtitleManager.generateImageTagText(event.image) || event.text,
             vtt: event.vtt,
-            region: event.region,
+            region: region,
             regionStyle: event.regionStyle,
         });
         return label;
@@ -235,6 +237,7 @@ var SubtitleOverlay = exports.SubtitleOverlay = /** @class */ (function (_super)
                         'font-size': "".concat(fontSize, "px"),
                         'letter-spacing': "".concat(fontLetterSpacing, "px"),
                     });
+                    label.regionStyle = "line-height: ".concat(fontSize, "px;");
                 }
             }
         };
@@ -265,11 +268,11 @@ var SubtitleOverlay = exports.SubtitleOverlay = /** @class */ (function (_super)
                 }
             }
             label.getDomElement().css({
-                'left': "".concat(event.position.column * SubtitleOverlay.CEA608_COLUMN_OFFSET, "%"),
-                'top': "".concat(event.position.row * SubtitleOverlay.CEA608_ROW_OFFSET, "%"),
+                'margin-left': "".concat(event.position.column * SubtitleOverlay.CEA608_COLUMN_OFFSET, "%"),
                 'font-size': "".concat(fontSize, "px"),
                 'letter-spacing': "".concat(fontLetterSpacing, "px"),
             });
+            label.regionStyle = "line-height: ".concat(fontSize, "px;");
         });
         var reset = function () {
             _this.getDomElement().removeClass(_this.prefixCss(SubtitleOverlay.CLASS_CEA_608));
@@ -283,7 +286,7 @@ var SubtitleOverlay = exports.SubtitleOverlay = /** @class */ (function (_super)
             }
         });
         player.on(player.exports.PlayerEvent.SourceUnloaded, reset);
-        player.on(player.exports.PlayerEvent.SubtitleEnabled, reset);
+        player.on(player.exports.PlayerEvent.SubtitleEnable, reset);
         player.on(player.exports.PlayerEvent.SubtitleDisabled, reset);
     };
     SubtitleOverlay.prototype.enablePreviewSubtitleLabel = function () {
@@ -307,8 +310,6 @@ var SubtitleOverlay = exports.SubtitleOverlay = /** @class */ (function (_super)
     SubtitleOverlay.CEA608_NUM_ROWS = 15;
     // The number of columns in a cea608 grid
     SubtitleOverlay.CEA608_NUM_COLUMNS = 32;
-    // The offset in percent for one row (which is also the height of a row)
-    SubtitleOverlay.CEA608_ROW_OFFSET = 100 / SubtitleOverlay.CEA608_NUM_ROWS;
     // The offset in percent for one column (which is also the width of a column)
     SubtitleOverlay.CEA608_COLUMN_OFFSET = 100 / SubtitleOverlay.CEA608_NUM_COLUMNS;
     return SubtitleOverlay;
@@ -341,6 +342,9 @@ var SubtitleLabel = /** @class */ (function (_super) {
         get: function () {
             return this.config.regionStyle;
         },
+        set: function (style) {
+            this.config.regionStyle = style;
+        },
         enumerable: false,
         configurable: true
     });

package/dist/js/framework/main.js

@@ -16,7 +16,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ClickOverlay = exports.VolumeControlButton = exports.TitleBar = exports.SubtitleSelectBox = exports.SubtitleOverlay = exports.SeekBarLabel = exports.RecommendationOverlay = exports.ErrorMessageOverlay = exports.Component = exports.CastToggleButton = exports.CastStatusOverlay = exports.AudioTrackSelectBox = exports.AudioQualitySelectBox = exports.Label = exports.Container = exports.UIContainer = exports.Watermark = exports.VRToggleButton = exports.VolumeToggleButton = exports.VideoQualitySelectBox = exports.ToggleButton = exports.SettingsToggleButton = exports.SettingsPanel = exports.ItemSelectionList = exports.SelectBox = exports.SeekBar = exports.PlaybackToggleButton = exports.PlaybackTimeLabelMode = exports.PlaybackTimeLabel = exports.HugePlaybackToggleButton = exports.FullscreenToggleButton = exports.ControlBar = exports.Button = exports.ListOrientation = exports.ListNavigationGroup = exports.RootNavigationGroup = exports.NavigationGroup = exports.SpatialNavigation = exports.I18n = exports.i18n = exports.ErrorUtils = exports.StorageUtils = exports.BrowserUtils = exports.UIUtils = exports.PlayerUtils = exports.StringUtils = exports.ArrayUtils = exports.DemoFactory = exports.UIFactory = exports.version = void 0;
 exports.ListSelector = exports.QuickSeekButton = exports.ReplayButton = exports.SettingsPanelItem = exports.SubtitleSettingsPanelPage = exports.SettingsPanelPageOpenButton = exports.SettingsPanelPageBackButton = exports.SettingsPanelPage = exports.AudioTrackListBox = exports.SubtitleListBox = exports.ListBox = exports.SubtitleSettingsResetButton = exports.WindowOpacitySelectBox = exports.WindowColorSelectBox = exports.SubtitleSettingsLabel = exports.SubtitleSettingSelectBox = exports.FontSizeSelectBox = exports.FontOpacitySelectBox = exports.FontFamilySelectBox = exports.FontColorSelectBox = exports.CharacterEdgeSelectBox = exports.BackgroundOpacitySelectBox = exports.BackgroundColorSelectBox = exports.Spacer = exports.PictureInPictureToggleButton = exports.VolumeSlider = exports.AirPlayToggleButton = exports.MetadataLabelContent = exports.MetadataLabel = exports.CloseButton = exports.PlaybackToggleOverlay = exports.CastUIContainer = exports.BufferingOverlay = exports.HugeReplayButton = exports.PlaybackSpeedSelectBox = exports.AdClickOverlay = exports.AdMessageLabel = exports.AdSkipButton = void 0;
-exports.version = '3.78.0';
+exports.version = '3.80.0';
 // Management
 __exportStar(require("./uimanager"), exports);
 __exportStar(require("./uiconfig"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bitmovin-player-ui",
-  "version": "3.78.0",
+  "version": "3.80.0",
   "description": "Bitmovin Player UI Framework",
   "main": "./dist/js/framework/main.js",
   "types": "./dist/js/framework/main.d.ts",

package/src/scss/skin-modern/components/_subtitleoverlay-cea608.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 .#{$prefix}-ui-subtitle-overlay {
   &.#{$prefix}-cea608 {
 
@@ -6,18 +8,26 @@
     right: 3em;
     top: 2em;
 
-    .#{$prefix}-subtitle-region-container.#{$prefix}-subtitle-position-default {
-      bottom: 0;
+    .#{$prefix}-subtitle-region-container {
+      height: math.div(100%, 15);
       left: 0;
+      line-height: 1em;
       right: 0;
-      top: 0;
+      text-align: left;
+
+      // Define positions for all 15 rows
+      @for $i from 0 through 14 {
+        &.#{$prefix}-subtitle-position-cea608-row-#{$i} {
+          top: math.div($i, 15) * 100%;
+        }
+      }
     }
 
     .#{$prefix}-ui-subtitle-label {
+      display: inline-block;
       font-family: 'Courier New', Courier, 'Nimbus Mono L', 'Cutive Mono', monospace;
-      line-height: 1em;
-      position: absolute;
       text-transform: uppercase;
+      vertical-align: bottom;
 
       // sass-lint:disable force-pseudo-nesting nesting-depth
       &:nth-child(1n-1)::after {

package/src/ts/components/subtitleoverlay.ts

@@ -38,8 +38,6 @@ export class SubtitleOverlay extends Container<ContainerConfig> {
   private static readonly CEA608_NUM_ROWS = 15;
   // The number of columns in a cea608 grid
   private static readonly CEA608_NUM_COLUMNS = 32;
-  // The offset in percent for one row (which is also the height of a row)
-  private static readonly CEA608_ROW_OFFSET = 100 / SubtitleOverlay.CEA608_NUM_ROWS;
   // The offset in percent for one column (which is also the width of a column)
   private static readonly CEA608_COLUMN_OFFSET = 100 / SubtitleOverlay.CEA608_NUM_COLUMNS;
 
@@ -198,10 +196,14 @@ export class SubtitleOverlay extends Container<ContainerConfig> {
 
   generateLabel(event: SubtitleCueEvent): SubtitleLabel {
     // Sanitize cue data (must be done before the cue ID is generated in subtitleManager.cueEnter / update)
+    let region = event.region;
+
     if (event.position) {
       // Sometimes the positions are undefined, we assume them to be zero
       event.position.row = event.position.row || 0;
       event.position.column = event.position.column || 0;
+
+      region = region || `cea608-row-${event.position.row}`;
     }
 
     const label = new SubtitleLabel({
@@ -209,7 +211,7 @@ export class SubtitleOverlay extends Container<ContainerConfig> {
       // else use the plain text
       text: event.html || ActiveSubtitleManager.generateImageTagText(event.image) || event.text,
       vtt: event.vtt,
-      region: event.region,
+      region: region,
       regionStyle: event.regionStyle,
     });
 
@@ -287,6 +289,8 @@ export class SubtitleOverlay extends Container<ContainerConfig> {
             'font-size': `${fontSize}px`,
             'letter-spacing': `${fontLetterSpacing}px`,
           });
+
+          label.regionStyle = `line-height: ${fontSize}px;`;
         }
       }
     };
@@ -321,11 +325,12 @@ export class SubtitleOverlay extends Container<ContainerConfig> {
       }
 
       label.getDomElement().css({
-        'left': `${event.position.column * SubtitleOverlay.CEA608_COLUMN_OFFSET}%`,
-        'top': `${event.position.row * SubtitleOverlay.CEA608_ROW_OFFSET}%`,
+        'margin-left': `${event.position.column * SubtitleOverlay.CEA608_COLUMN_OFFSET}%`,
         'font-size': `${fontSize}px`,
         'letter-spacing': `${fontLetterSpacing}px`,
       });
+
+      label.regionStyle = `line-height: ${fontSize}px;`;
     });
 
     const reset = () => {
@@ -342,7 +347,7 @@ export class SubtitleOverlay extends Container<ContainerConfig> {
     });
 
     player.on(player.exports.PlayerEvent.SourceUnloaded, reset);
-    player.on(player.exports.PlayerEvent.SubtitleEnabled, reset);
+    player.on(player.exports.PlayerEvent.SubtitleEnable, reset);
     player.on(player.exports.PlayerEvent.SubtitleDisabled, reset);
   }
 
@@ -400,6 +405,10 @@ export class SubtitleLabel extends Label<SubtitleLabelConfig> {
   get regionStyle(): string {
     return this.config.regionStyle;
   }
+
+  set regionStyle(style: string) {
+    this.config.regionStyle = style;
+  }
 }
 
 class ActiveSubtitleManager {