playable/dist/src/modules/ui/subtitles/subtitles.js

Video player based on HTML5Video

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var constants_1 = require("../../../constants");
var logger_1 = (0, tslib_1.__importDefault)(require("../../../utils/logger"));
var player_api_decorator_1 = (0, tslib_1.__importDefault)(require("../../../core/player-api-decorator"));
var subtitles_view_1 = (0, tslib_1.__importDefault)(require("./subtitles.view"));
function isSameOrigin(url) {
    var _a = window.location, protocol = _a.protocol, hostname = _a.hostname, port = _a.port;
    var a = document.createElement('a');
    a.setAttribute('href', url);
    return a.protocol === protocol && a.hostname === hostname && a.port === port;
}
var Subtitles = /** @class */ (function () {
    function Subtitles(_a) {
        var rootContainer = _a.rootContainer, engine = _a.engine, eventEmitter = _a.eventEmitter;
        this._activeSubtitleIndex = null;
        this._trackList = [];
        this._eventEmitter = eventEmitter;
        this._video = engine.getElement();
        this._initUI();
        this._bindCallbacks();
        this._bindEvents();
        rootContainer.appendComponentElement(this.getElement());
    }
    Subtitles.prototype.setSubtitles = function (subtitles) {
        var _this = this;
        this.removeSubtitles();
        if (!subtitles) {
            return;
        }
        var hasCrossOriginAttribute = this._video.hasAttribute('crossorigin');
        var hasCrossOriginTrack = false;
        (Array.isArray(subtitles) ? subtitles : [subtitles]).forEach(function (subtitle) {
            subtitle = typeof subtitle === 'string' ? { src: subtitle } : subtitle;
            hasCrossOriginTrack = hasCrossOriginTrack || !isSameOrigin(subtitle.src);
            _this._addSubtitle(subtitle);
        });
        if (!hasCrossOriginAttribute && hasCrossOriginTrack) {
            logger_1.default.warn("Subtitle are being loaded from another origin but video crossorigin attribute isn't used. " +
                'This may prevent text tracks from loading.');
        }
    };
    Subtitles.prototype.setActiveSubtitle = function (index) {
        this._clearActiveSubtitle();
        this._setActiveSubtitle(index);
    };
    Subtitles.prototype.showSubtitles = function () {
        this.view.show();
    };
    Subtitles.prototype.hideSubtitles = function () {
        this.view.hide();
    };
    Subtitles.prototype._addSubtitle = function (subtitle) {
        var track = document.createElement('track');
        track.setAttribute('src', subtitle.src);
        track.setAttribute('kind', 'subtitles');
        if (subtitle.lang) {
            track.setAttribute('srclang', subtitle.lang);
        }
        if (subtitle.label) {
            track.setAttribute('label', subtitle.label);
        }
        this._video.appendChild(track);
        this._trackList.push(this._video.textTracks[this._video.textTracks.length - 1]);
    };
    Subtitles.prototype.removeSubtitles = function () {
        var _this = this;
        this._clearActiveSubtitle();
        var subtitleTracks = this._video.querySelectorAll('track[kind="subtitles"]');
        Array.prototype.forEach.call(subtitleTracks, function (trackElement) { return _this._video.removeChild(trackElement); });
        this._trackList = [];
    };
    Subtitles.prototype._clearActiveSubtitle = function () {
        if (this._activeSubtitleIndex) {
            var textTrack = this._trackList[this._activeSubtitleIndex];
            textTrack.removeEventListener('cuechange', this._showSubtitles);
            textTrack.mode = 'disabled';
            this._activeSubtitleIndex = null;
        }
        this.view.clearSubtitles();
    };
    Subtitles.prototype._setActiveSubtitle = function (index) {
        var textTrack = this._trackList[index];
        if (textTrack) {
            textTrack.mode = 'hidden';
            textTrack.addEventListener('cuechange', this._showSubtitles);
            textTrack.activeCues &&
                this.view.showSubtitles(Array.prototype.map.call(textTrack.activeCues, function (cue) { return cue.text; }));
        }
        this._activeSubtitleIndex = index;
    };
    Subtitles.prototype.getElement = function () {
        return this.view.getElement();
    };
    Subtitles.prototype._initUI = function () {
        this.view = new Subtitles.View();
    };
    Subtitles.prototype._bindCallbacks = function () {
        this._showSubtitles = this._showSubtitles.bind(this);
    };
    Subtitles.prototype._bindEvents = function () {
        this._unbindEvents = this._eventEmitter.bindEvents([
            [constants_1.UIEvent.MAIN_BLOCK_SHOW, this.view.moveSubtitlesUp, this.view],
            [constants_1.UIEvent.MAIN_BLOCK_HIDE, this.view.moveSubtitlesDown, this.view],
        ], this);
    };
    Subtitles.prototype._showSubtitles = function (event) {
        var textTrack = event.target;
        this.view.showSubtitles(Array.prototype.map.call(textTrack.activeCues, function (cue) { return cue.text; }));
    };
    Subtitles.prototype.destroy = function () {
        this._unbindEvents();
        this.view.destroy();
    };
    Subtitles.moduleName = 'subtitle';
    Subtitles.dependencies = ['rootContainer', 'engine', 'eventEmitter'];
    Subtitles.View = subtitles_view_1.default;
    (0, tslib_1.__decorate)([
        (0, player_api_decorator_1.default)()
    ], Subtitles.prototype, "setSubtitles", null);
    (0, tslib_1.__decorate)([
        (0, player_api_decorator_1.default)()
    ], Subtitles.prototype, "setActiveSubtitle", null);
    (0, tslib_1.__decorate)([
        (0, player_api_decorator_1.default)()
    ], Subtitles.prototype, "showSubtitles", null);
    (0, tslib_1.__decorate)([
        (0, player_api_decorator_1.default)()
    ], Subtitles.prototype, "hideSubtitles", null);
    (0, tslib_1.__decorate)([
        (0, player_api_decorator_1.default)()
    ], Subtitles.prototype, "removeSubtitles", null);
    return Subtitles;
}());
exports.default = Subtitles;
//# sourceMappingURL=subtitles.js.map