Merge branch 'develop' into feature/add-lint-hook

CHANGELOG.md

@@ -9,6 +9,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ### Added
 - Chore: Pre-commit hook for linting TypeScript file changes
 
+## [3.81.0] - 2025-01-10
+
+### Fixed
+- Positioning of CEA-608 caption cues when multiple cues are displayed on the same line
+
 ## [3.80.0] - 2025-01-08
 
 ### Fixed
@@ -1052,6 +1057,7 @@ Version 2.0 of the UI framework is built for player 7.1. If absolutely necessary
 ## 1.0.0 (2017-02-03)
 - First release
 
+[3.81.0]: https://github.com/bitmovin/bitmovin-player-ui/compare/v3.80.0...v3.81.0
 [3.80.0]: https://github.com/bitmovin/bitmovin-player-ui/compare/v3.79.0...v3.80.0
 [3.79.0]: https://github.com/bitmovin/bitmovin-player-ui/compare/v3.78.0...v3.79.0
 [3.78.0]: https://github.com/bitmovin/bitmovin-player-ui/compare/v3.77.0...v3.78.0

package.json

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

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

@@ -26,6 +26,7 @@
     .#{$prefix}-ui-subtitle-label {
       display: inline-block;
       font-family: 'Courier New', Courier, 'Nimbus Mono L', 'Cutive Mono', monospace;
+      position: absolute;
       text-transform: uppercase;
       vertical-align: bottom;
 

src/ts/components/subtitleoverlay.ts

@@ -325,7 +325,7 @@ export class SubtitleOverlay extends Container<ContainerConfig> {
       }
 
       label.getDomElement().css({
-        'margin-left': `${event.position.column * SubtitleOverlay.CEA608_COLUMN_OFFSET}%`,
+        'left': `${event.position.column * SubtitleOverlay.CEA608_COLUMN_OFFSET}%`,
         'font-size': `${fontSize}px`,
         'letter-spacing': `${fontLetterSpacing}px`,
       });