Update CEA cue positioning:

- vertically position region/row (absolute) - horizontally position cue itself (not abs.)
bitmovin · Jan 7, 2025 · afcfa82 · afcfa82
1 parent 19d34aa
commit afcfa82
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/src/scss/skin-modern/components/_subtitleoverlay-cea608.scss b/src/scss/skin-modern/components/_subtitleoverlay-cea608.scss
@@ -6,18 +6,20 @@
     right: 3em;
     top: 2em;
 
-    .#{$prefix}-subtitle-region-container.#{$prefix}-subtitle-position-default {
-      bottom: 0;
+    .#{$prefix}-subtitle-region-container {
       left: 0;
       right: 0;
-      top: 0;
+      height: calc(100% / 15);
+      text-align: left;
+      line-height: 1em;
     }
 
     .#{$prefix}-ui-subtitle-label {
       font-family: 'Courier New', Courier, 'Nimbus Mono L', 'Cutive Mono', monospace;
-      line-height: 1em;
-      position: absolute;
+      //line-height: 1em;
+      //position: absolute;
       text-transform: uppercase;
+      display: inline-block;
 
       // sass-lint:disable force-pseudo-nesting nesting-depth
       &:nth-child(1n-1)::after {

diff --git a/src/ts/components/subtitleoverlay.ts b/src/ts/components/subtitleoverlay.ts
@@ -291,6 +291,9 @@ export class SubtitleOverlay extends Container<ContainerConfig> {
             'font-size': `${fontSize}px`,
             'letter-spacing': `${fontLetterSpacing}px`,
           });
+
+          // TODO set top and line-height on region
+          // label.regionStyle = `font-size: ${fontSize}px;`;
         }
       }
     };
@@ -325,11 +328,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; top: ${event.position.row * SubtitleOverlay.CEA608_ROW_OFFSET}%;`;
     });
 
     const reset = () => {
@@ -404,6 +408,10 @@ export class SubtitleLabel extends Label<SubtitleLabelConfig> {
   get regionStyle(): string {
     return this.config.regionStyle;
   }
+
+  set regionStyle(style: string) {
+    this.config.regionStyle = style;
+  }
 }
 
 class ActiveSubtitleManager {