shaka-video-element
Version:
Custom element (web component) for Shaka Player
186 lines (185 loc) • 6.98 kB
JavaScript
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var shaka_video_element_exports = {};
__export(shaka_video_element_exports, {
default: () => shaka_video_element_default
});
module.exports = __toCommonJS(shaka_video_element_exports);
var import_custom_media_element = require("custom-media-element");
var import_media_tracks = require("media-tracks");
var import_server_safe_globals = require("./server-safe-globals.js");
var import_shaka_player = __toESM(require("shaka-player"), 1);
function onErrorEvent(event) {
onError(event.detail);
}
function onError(error) {
console.error("Error code", error.code, "object", error);
}
class ShakaVideoElement extends (0, import_media_tracks.MediaTracksMixin)(import_custom_media_element.CustomVideoElement) {
static shadowRootOptions = { ...import_custom_media_element.CustomVideoElement.shadowRootOptions };
static getTemplateHTML = (attrs) => {
const { src, ...rest } = attrs;
return import_custom_media_element.CustomVideoElement.getTemplateHTML(rest);
};
#hasTracksInit = false;
constructor() {
super();
if (import_shaka_player.default.Player.isBrowserSupported()) {
this.api = new import_shaka_player.default.Player();
this.api.addEventListener("error", onErrorEvent);
} else {
console.error("Browser does not support Shaka Player");
}
}
attributeChangedCallback(attrName, oldValue, newValue) {
if (attrName !== "src") {
super.attributeChangedCallback(attrName, oldValue, newValue);
}
if (attrName === "src" && oldValue != newValue) {
this.load();
}
}
get src() {
return this.getAttribute("src");
}
set src(val) {
if (val !== this.src) {
this.setAttribute("src", val);
}
}
#removeAllMediaTracks = () => {
for (const videoTrack of this.videoTracks) {
this.removeVideoTrack(videoTrack);
}
for (const audioTrack of this.audioTracks) {
this.removeAudioTrack(audioTrack);
}
};
#addMediaTracks() {
this.#removeAllMediaTracks();
const variantTracks = this.api.getVariantTracks();
let videoTrack = this.videoTracks.getTrackById("main");
if (!videoTrack) {
videoTrack = this.addVideoTrack("main");
videoTrack.id = "main";
videoTrack.selected = true;
}
const seen = /* @__PURE__ */ new Set();
for (const [index, variant] of variantTracks.entries()) {
if (!variant.width && !variant.height) continue;
const key = `${variant.width}x${variant.height}@${variant.videoBandwidth ?? variant.bandwidth}`;
if (seen.has(key)) continue;
seen.add(key);
const rendition = videoTrack.addRendition(
variant.originalVideoId ?? `${variant.id}`,
variant.width,
variant.height,
variant.videoCodec,
variant.videoBandwidth ?? variant.bandwidth
);
rendition.id = `${index}`;
rendition.label = `${variant.height}p`;
}
const audioLanguages = this.api.getAudioLanguagesAndRoles();
for (let [id, audio] of audioLanguages.entries()) {
const kind = id === 0 ? "main" : "alternative";
const audioTrack = this.addAudioTrack(kind, audio.language, audio.language);
audioTrack.id = `${id}`;
if (id === 0) {
audioTrack.enabled = true;
}
}
}
#initTracksListeners() {
var _a;
if (this.#hasTracksInit) return;
this.#hasTracksInit = true;
const switchRendition = () => {
const selectedIndex = this.videoRenditions.selectedIndex;
if (selectedIndex >= 0) {
const variantTracks = this.api.getVariantTracks();
const variantTrack = variantTracks[selectedIndex];
if (variantTrack) {
this.api.configure({ abr: { enabled: false } });
this.api.selectVariantTrack(variantTrack, true);
}
} else {
this.api.configure({ abr: { enabled: true } });
}
};
(_a = this.videoRenditions) == null ? void 0 : _a.addEventListener("change", switchRendition);
this.audioTracks.addEventListener("change", () => {
const enabledTrack = [...this.audioTracks].find((t) => t.enabled);
if (enabledTrack) {
const audioLanguages = this.api.getAudioLanguagesAndRoles();
const audio = audioLanguages[+enabledTrack.id];
if (audio) {
this.api.selectAudioLanguage(audio.language, audio.role);
}
}
});
this.api.addEventListener("trackschanged", () => {
const videoTrack = this.videoTracks[this.videoTracks.selectedIndex ?? 0];
if (!videoTrack) return;
const variantTracks = this.api.getVariantTracks();
const variantIds = variantTracks.map((_, i) => `${i}`);
for (const rendition of this.videoRenditions) {
if (rendition.id && !variantIds.includes(rendition.id)) {
videoTrack.removeRendition(rendition);
}
}
});
}
async load() {
if (!this.api) return;
await Promise.resolve();
await this.api.attach(this.nativeEl);
if (!this.src) {
this.#removeAllMediaTracks();
this.api.unload();
} else {
try {
await this.api.load(this.src);
} catch (e) {
onError(e);
return;
}
if (this.nativeEl.autoplay && this.nativeEl.paused) {
this.nativeEl.play().catch((err) => {
console.warn("Autoplay failed:", err);
});
}
this.#addMediaTracks();
this.#initTracksListeners();
}
}
}
if (globalThis.customElements && !globalThis.customElements.get("shaka-video")) {
globalThis.customElements.define("shaka-video", ShakaVideoElement);
}
var shaka_video_element_default = ShakaVideoElement;