Merge pull request #665 from bitmovin/feature/fix-cea-caption-styling

CHANGELOG.md

@@ -4,6 +4,14 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+
+### Fixed
+- CEA-608 caption window covering almost the entire video area
+
+### Changed
+- Create separate region components for each CEA-608 row
+
 ## [3.78.0] - 2025-01-08
 
 ### Changed

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

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 .#{$prefix}-ui-subtitle-overlay {
   &.#{$prefix}-cea608 {
 
@@ -6,17 +8,24 @@
     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;
 
       // sass-lint:disable force-pseudo-nesting nesting-depth

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,18 +196,22 @@ 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({
       // 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,
     });
 
@@ -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 = () => {
@@ -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 {