rx-player
Version:
Canal+ HTML5 Video Player
74 lines (73 loc) • 3.28 kB
JavaScript
;
/**
* Copyright 2015 CANAL+ Group
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = toHTML;
var is_non_empty_string_1 = require("../../../../utils/is_non_empty_string");
var convert_payload_to_html_1 = require("./convert_payload_to_html");
var create_style_attribute_1 = require("./create_style_attribute");
/**
* Parse cue block into an object with the following properties:
* - start {number}: start time at which the cue should be displayed
* - end {number}: end time at which the cue should be displayed
* - element {HTMLElement}: the cue text, translated into an HTMLElement
*
* Returns undefined if the cue block could not be parsed.
* @param {Object} cueObj
* @param {Number} cueObj.start
* @param {Number} cueObj.end
* @param {Object} cueObj.settings;
* @param {string|undefined} cueObj.header
* @param {Array.<string>} cueObj.payload
* @param {Object} styling
* @param {Object} styling.classes
* @param {string|undefined} styling.global
* @returns {Object|undefined}
*/
function toHTML(cueObj, styling) {
var start = cueObj.start, end = cueObj.end, settings = cueObj.settings, header = cueObj.header, payload = cueObj.payload;
var region = document.createElement("div");
var regionAttr = document.createAttribute("style");
regionAttr.value =
"width:100%;" +
"height:100%;" +
"display:flex;" +
"flex-direction:column;" +
"justify-content:flex-end;" +
"align-items:center;";
region.setAttributeNode(regionAttr);
// Get content, format and apply style.
var pElement = document.createElement("p");
var pAttr = (0, create_style_attribute_1.default)(settings);
pElement.setAttributeNode(pAttr);
var spanElement = document.createElement("span");
var attr = document.createAttribute("style");
// set color and background-color default values, as indicated in:
// https://www.w3.org/TR/webvtt1/#applying-css-properties
attr.value = "background-color:rgba(0,0,0,0.8);" + "color:white;";
spanElement.setAttributeNode(attr);
var global = styling.global, classes = styling.classes;
var localStyle = (0, is_non_empty_string_1.default)(header) ? classes[header] : undefined;
var styles = [global, localStyle].filter(function (s) { return s !== undefined; }).join("");
attr.value += styles;
spanElement.setAttributeNode(attr);
(0, convert_payload_to_html_1.default)(payload.join("\n"), classes).forEach(function (element) {
spanElement.appendChild(element);
});
region.appendChild(pElement);
pElement.appendChild(spanElement);
return { start: start, end: end, element: region };
}