Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

bitmovin-player-ui

Package Overview
Dependencies
Maintainers
1
Versions
141
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

bitmovin-player-ui - npm Package Compare versions

Comparing version 3.7.0 to 3.8.0

spec/components/subtitleoverlay.spec.ts

5

CHANGELOG.md

@@ -7,2 +7,7 @@ # Change Log

## [3.8.0]
### Added
- Support for regions in TTML subtitles
## [3.7.0]

@@ -9,0 +14,0 @@

import { Container, ContainerConfig } from './container';
import { UIInstanceManager } from '../uimanager';
import { Label, LabelConfig } from './label';
import { PlayerAPI } from 'bitmovin-player';

@@ -12,2 +13,3 @@ /**

private preprocessLabelEventCallback;
private subtitleContainerManager;
private static readonly CLASS_CONTROLBAR_VISIBLE;

@@ -25,1 +27,33 @@ private static readonly CLASS_CEA_608;

}
interface SubtitleLabelConfig extends LabelConfig {
region?: string;
regionStyle?: string;
}
declare class SubtitleLabel extends Label<SubtitleLabelConfig> {
constructor(config?: SubtitleLabelConfig);
readonly region: string;
readonly regionStyle: string;
}
export declare class SubtitleRegionContainerManager {
private subtitleOverlay;
private subtitleRegionContainers;
/**
* @param subtitleOverlay Reference to the subtitle overlay for adding and removing the containers.
*/
constructor(subtitleOverlay: SubtitleOverlay);
/**
* Creates and wraps a subtitle label into a container div based on the subtitle region.
* If the subtitle has positioning information it is added to the container.
* @param label The subtitle label to wrap
*/
addLabel(label: SubtitleLabel): void;
/**
* Removes a subtitle label from a container.
*/
removeLabel(label: SubtitleLabel): void;
/**
* Removes all subtitle containers.
*/
clear(): void;
}
export {};

116

dist/js/framework/components/subtitleoverlay.js

@@ -42,2 +42,3 @@ "use strict";

this.subtitleManager = subtitleManager;
this.subtitleContainerManager = new SubtitleRegionContainerManager(this);
player.on(player.exports.PlayerEvent.CueEnter, function (event) {

@@ -53,5 +54,5 @@ // Sanitize cue data (must be done before the cue ID is generated in subtitleManager.cueEnter)

if (_this.previewSubtitleActive) {
_this.removeComponent(_this.previewSubtitle);
_this.subtitleContainerManager.removeLabel(_this.previewSubtitle);
}
_this.addComponent(labelToAdd);
_this.subtitleContainerManager.addLabel(labelToAdd);
_this.updateComponents();

@@ -63,3 +64,3 @@ _this.show();

if (labelToRemove) {
_this.removeComponent(labelToRemove);
_this.subtitleContainerManager.removeLabel(labelToRemove);
_this.updateComponents();

@@ -72,3 +73,3 @@ }

else {
_this.addComponent(_this.previewSubtitle);
_this.subtitleContainerManager.addLabel(_this.previewSubtitle);
_this.updateComponents();

@@ -80,2 +81,3 @@ }

_this.hide();
_this.subtitleContainerManager.clear();
subtitleManager.clear();

@@ -226,3 +228,3 @@ _this.removeComponents();

if (!this.subtitleManager.hasCues) {
this.addComponent(this.previewSubtitle);
this.subtitleContainerManager.addLabel(this.previewSubtitle);
this.updateComponents();

@@ -234,3 +236,3 @@ this.show();

this.previewSubtitleActive = false;
this.removeComponent(this.previewSubtitle);
this.subtitleContainerManager.removeLabel(this.previewSubtitle);
this.updateComponents();

@@ -261,2 +263,16 @@ };

}
Object.defineProperty(SubtitleLabel.prototype, "region", {
get: function () {
return this.config.region;
},
enumerable: true,
configurable: true
});
Object.defineProperty(SubtitleLabel.prototype, "regionStyle", {
get: function () {
return this.config.regionStyle;
},
enumerable: true,
configurable: true
});
return SubtitleLabel;

@@ -297,2 +313,4 @@ }(label_1.Label));

text: event.html || ActiveSubtitleManager.generateImageTagText(event.image) || event.text,
region: event.region,
regionStyle: event.regionStyle,
});

@@ -389,1 +407,87 @@ // Create array for id if it does not exist

}());
var SubtitleRegionContainerManager = /** @class */ (function () {
/**
* @param subtitleOverlay Reference to the subtitle overlay for adding and removing the containers.
*/
function SubtitleRegionContainerManager(subtitleOverlay) {
this.subtitleOverlay = subtitleOverlay;
this.subtitleRegionContainers = {};
this.subtitleOverlay = subtitleOverlay;
}
/**
* Creates and wraps a subtitle label into a container div based on the subtitle region.
* If the subtitle has positioning information it is added to the container.
* @param label The subtitle label to wrap
*/
SubtitleRegionContainerManager.prototype.addLabel = function (label) {
var regionName = label.region || 'default';
if (!this.subtitleRegionContainers[regionName]) {
var regionContainer = new SubtitleRegionContainer({
cssClass: "subtitle-position-" + regionName,
});
this.subtitleRegionContainers[regionName] = regionContainer;
if (label.regionStyle) {
regionContainer.getDomElement().attr('style', label.regionStyle);
}
else {
// getDomElement needs to be called at least once to ensure the component exists
regionContainer.getDomElement();
}
for (var regionName_1 in this.subtitleRegionContainers) {
this.subtitleOverlay.addComponent(this.subtitleRegionContainers[regionName_1]);
}
}
this.subtitleRegionContainers[regionName].addLabel(label);
};
/**
* Removes a subtitle label from a container.
*/
SubtitleRegionContainerManager.prototype.removeLabel = function (label) {
var region = label.region || 'default';
for (var regionName in this.subtitleRegionContainers) {
this.subtitleRegionContainers[regionName].removeLabel(label);
}
// Remove container if no more labels are displayed
if (this.subtitleRegionContainers[region].isEmpty()) {
this.subtitleOverlay.removeComponent(this.subtitleRegionContainers[region]);
delete this.subtitleRegionContainers[region];
}
};
/**
* Removes all subtitle containers.
*/
SubtitleRegionContainerManager.prototype.clear = function () {
for (var regionName in this.subtitleRegionContainers) {
this.subtitleOverlay.removeComponent(this.subtitleRegionContainers[regionName]);
}
this.subtitleRegionContainers = {};
};
return SubtitleRegionContainerManager;
}());
exports.SubtitleRegionContainerManager = SubtitleRegionContainerManager;
var SubtitleRegionContainer = /** @class */ (function (_super) {
__extends(SubtitleRegionContainer, _super);
function SubtitleRegionContainer(config) {
if (config === void 0) { config = {}; }
var _this = _super.call(this, config) || this;
_this.labelCount = 0;
_this.config = _this.mergeConfig(config, {
cssClasses: ['subtitle-region-container'],
}, _this.config);
return _this;
}
SubtitleRegionContainer.prototype.addLabel = function (labelToAdd) {
this.labelCount++;
this.addComponent(labelToAdd);
this.updateComponents();
};
SubtitleRegionContainer.prototype.removeLabel = function (labelToRemove) {
this.labelCount--;
this.removeComponent(labelToRemove);
this.updateComponents();
};
SubtitleRegionContainer.prototype.isEmpty = function () {
return this.labelCount === 0;
};
return SubtitleRegionContainer;
}(container_1.Container));

2

dist/js/framework/main.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.version = '3.7.0';
exports.version = '3.8.0';
// Management

@@ -5,0 +5,0 @@ var uimanager_1 = require("./uimanager");

{
"name": "bitmovin-player-ui",
"version": "3.7.0",
"version": "3.8.0",
"description": "Bitmovin Player UI Framework",

@@ -5,0 +5,0 @@ "main": "./dist/js/framework/main.js",

@@ -14,2 +14,3 @@ import {

SeekEvent,
SubtitleCueEvent,
SubtitleEvent,

@@ -272,2 +273,22 @@ SubtitleTrack,

fireSubtitleCueEnterEvent(): void {
this.fireEvent<SubtitleCueEvent>({
subtitleId: 'subtitleId',
start: 0,
end: 10,
text: 'Test Subtitle',
type: PlayerEvent.CueEnter,
} as SubtitleCueEvent);
}
fireSubtitleCueExitEvent(): void {
this.fireEvent<SubtitleCueEvent>({
subtitleId: 'subtitleId',
start: 0,
end: 10,
text: 'Test Subtitle',
type: PlayerEvent.CueExit,
} as SubtitleCueEvent);
}
// Period switch

@@ -274,0 +295,0 @@ firePeriodSwitchedEvent(): void {

@@ -20,5 +20,7 @@ import {Container, ContainerConfig} from './container';

private preprocessLabelEventCallback = new EventDispatcher<SubtitleCueEvent, SubtitleLabel>();
private subtitleContainerManager: SubtitleRegionContainerManager;
private static readonly CLASS_CONTROLBAR_VISIBLE = 'controlbar-visible';
private static readonly CLASS_CEA_608 = 'cea608';
// The number of rows in a cea608 grid

@@ -50,2 +52,4 @@ private static readonly CEA608_NUM_ROWS = 15;

this.subtitleContainerManager = new SubtitleRegionContainerManager(this);
player.on(player.exports.PlayerEvent.CueEnter, (event: SubtitleCueEvent) => {

@@ -64,7 +68,7 @@ // Sanitize cue data (must be done before the cue ID is generated in subtitleManager.cueEnter)

if (this.previewSubtitleActive) {
this.removeComponent(this.previewSubtitle);
this.subtitleContainerManager.removeLabel(this.previewSubtitle);
}
this.addComponent(labelToAdd);
this.subtitleContainerManager.addLabel(labelToAdd);
this.updateComponents();
this.show();

@@ -77,3 +81,3 @@ });

if (labelToRemove) {
this.removeComponent(labelToRemove);
this.subtitleContainerManager.removeLabel(labelToRemove);
this.updateComponents();

@@ -86,3 +90,3 @@ }

} else {
this.addComponent(this.previewSubtitle);
this.subtitleContainerManager.addLabel(this.previewSubtitle);
this.updateComponents();

@@ -95,2 +99,3 @@ }

this.hide();
this.subtitleContainerManager.clear();
subtitleManager.clear();

@@ -258,3 +263,3 @@ this.removeComponents();

if (!this.subtitleManager.hasCues) {
this.addComponent(this.previewSubtitle);
this.subtitleContainerManager.addLabel(this.previewSubtitle);
this.updateComponents();

@@ -267,3 +272,3 @@ this.show();

this.previewSubtitleActive = false;
this.removeComponent(this.previewSubtitle);
this.subtitleContainerManager.removeLabel(this.previewSubtitle);
this.updateComponents();

@@ -282,5 +287,10 @@ }

class SubtitleLabel extends Label<LabelConfig> {
interface SubtitleLabelConfig extends LabelConfig {
region?: string;
regionStyle?: string;
}
constructor(config: LabelConfig = {}) {
class SubtitleLabel extends Label<SubtitleLabelConfig> {
constructor(config: SubtitleLabelConfig = {}) {
super(config);

@@ -292,2 +302,10 @@

}
get region(): string {
return this.config.region;
}
get regionStyle(): string {
return this.config.regionStyle;
}
}

@@ -337,2 +355,4 @@

text: event.html || ActiveSubtitleManager.generateImageTagText(event.image) || event.text,
region: event.region,
regionStyle: event.regionStyle,
});

@@ -430,1 +450,96 @@

}
export class SubtitleRegionContainerManager {
private subtitleRegionContainers: { [regionName: string]: SubtitleRegionContainer } = {};
/**
* @param subtitleOverlay Reference to the subtitle overlay for adding and removing the containers.
*/
constructor(private subtitleOverlay: SubtitleOverlay) {
this.subtitleOverlay = subtitleOverlay;
}
/**
* Creates and wraps a subtitle label into a container div based on the subtitle region.
* If the subtitle has positioning information it is added to the container.
* @param label The subtitle label to wrap
*/
addLabel(label: SubtitleLabel): void {
const regionName = label.region || 'default';
if (!this.subtitleRegionContainers[regionName]) {
const regionContainer = new SubtitleRegionContainer({
cssClass: `subtitle-position-${regionName}`,
});
this.subtitleRegionContainers[regionName] = regionContainer;
if (label.regionStyle) {
regionContainer.getDomElement().attr('style', label.regionStyle);
} else {
// getDomElement needs to be called at least once to ensure the component exists
regionContainer.getDomElement();
}
for (const regionName in this.subtitleRegionContainers) {
this.subtitleOverlay.addComponent(this.subtitleRegionContainers[regionName]);
}
}
this.subtitleRegionContainers[regionName].addLabel(label);
}
/**
* Removes a subtitle label from a container.
*/
removeLabel(label: SubtitleLabel): void {
const region = label.region || 'default';
for (const regionName in this.subtitleRegionContainers) {
this.subtitleRegionContainers[regionName].removeLabel(label);
}
// Remove container if no more labels are displayed
if (this.subtitleRegionContainers[region].isEmpty()) {
this.subtitleOverlay.removeComponent(this.subtitleRegionContainers[region]);
delete this.subtitleRegionContainers[region];
}
}
/**
* Removes all subtitle containers.
*/
clear(): void {
for (const regionName in this.subtitleRegionContainers) {
this.subtitleOverlay.removeComponent(this.subtitleRegionContainers[regionName]);
}
this.subtitleRegionContainers = {};
}
}
class SubtitleRegionContainer extends Container<ContainerConfig> {
private labelCount = 0;
constructor(config: ContainerConfig = {}) {
super(config);
this.config = this.mergeConfig(config, {
cssClasses: ['subtitle-region-container'],
}, this.config);
}
addLabel(labelToAdd: SubtitleLabel) {
this.labelCount++;
this.addComponent(labelToAdd);
this.updateComponents();
}
removeLabel(labelToRemove: SubtitleLabel): void {
this.labelCount--;
this.removeComponent(labelToRemove);
this.updateComponents();
}
public isEmpty(): boolean {
return this.labelCount === 0;
}
}

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc