@vime/core
Version:
Customizable, extensible, accessible and framework agnostic media player.
761 lines (739 loc) • 34.6 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-86498cbd.js');
const withComponentRegistry = require('./withComponentRegistry-90ec334c.js');
const PlayerDispatcher = require('./PlayerDispatcher-00dbedc9.js');
const withPlayerContext = require('./withPlayerContext-77ea833f.js');
const withControlsCollisionDetection = require('./withControlsCollisionDetection-7c7e2319.js');
const LazyLoader = require('./LazyLoader-2d8fc894.js');
const Provider = require('./Provider-b6123cae.js');
const support = require('./support-e1714cb5.js');
require('./PlayerEvents-79156eee.js');
const captionsCss = ":host{position:absolute;left:0;bottom:0;width:100%;pointer-events:none;z-index:var(--vm-captions-z-index)}.captions{width:100%;text-align:center;color:var(--vm-captions-text-color);font-size:var(--vm-captions-font-size);padding:$control-spacing;display:none;pointer-events:none;transition:transform 0.4s ease-in-out, opacity 0.3s ease-in-out}.captions.enabled{display:inline-block}.captions.hidden{display:none !important}.captions.inactive{opacity:0;visibility:hidden}.captions.fontMd{font-size:var(--vm-captions-font-size-medium)}.captions.fontLg{font-size:var(--vm-captions-font-size-large)}.captions.fontXl{font-size:var(--vm-captions-font-size-xlarge)}.cue{display:inline-block;background:var(--vm-captions-cue-bg-color);border-radius:var(--vm-captions-cue-border-radius);box-decoration-break:clone;line-height:185%;padding:var(--vm-captions-cue-padding);white-space:pre-wrap;pointer-events:none}.cue>div{display:inline}.cue:empty{display:none}";
var __awaiter$3 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try {
step(generator.next(value));
}
catch (e) {
reject(e);
} }
function rejected(value) { try {
step(generator["throw"](value));
}
catch (e) {
reject(e);
} }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
const Captions = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.sizeDisposal = new withComponentRegistry.Disposal();
this.textDisposal = new withComponentRegistry.Disposal();
this.isEnabled = false;
this.fontSize = 'sm';
/**
* Whether the captions should be visible or not.
*/
this.hidden = false;
/** @internal */
this.isControlsActive = false;
/** @internal */
this.isVideoView = false;
/** @internal */
this.playbackStarted = false;
/** @internal */
this.textTracks = [];
/** @internal */
this.currentTextTrack = -1;
/** @internal */
this.isTextTrackVisible = true;
withComponentRegistry.withComponentRegistry(this);
withControlsCollisionDetection.withControlsCollisionDetection(this);
withPlayerContext.withPlayerContext(this, [
'isVideoView',
'playbackStarted',
'isControlsActive',
'textTracks',
'currentTextTrack',
'isTextTrackVisible',
]);
}
onEnabledChange() {
this.isEnabled = this.playbackStarted && this.isVideoView;
}
onTextTracksChange() {
const textTrack = this.textTracks[this.currentTextTrack];
const renderCues = () => {
var _a;
const activeCues = Array.from((_a = textTrack.activeCues) !== null && _a !== void 0 ? _a : []);
this.renderCurrentCue(activeCues[0]);
};
this.textDisposal.empty();
if (!withComponentRegistry.isNil(textTrack)) {
renderCues();
this.textDisposal.add(withComponentRegistry.listen(textTrack, 'cuechange', renderCues));
}
}
connectedCallback() {
this.dispatch = PlayerDispatcher.createDispatcher(this);
this.dispatch('shouldRenderNativeTextTracks', false);
this.onTextTracksChange();
this.onPlayerResize();
}
disconnectedCallback() {
this.textDisposal.empty();
this.sizeDisposal.empty();
this.dispatch('shouldRenderNativeTextTracks', true);
}
onPlayerResize() {
return __awaiter$3(this, void 0, void 0, function* () {
const player = yield withComponentRegistry.findPlayer(this);
if (withComponentRegistry.isUndefined(player))
return;
const container = (yield player.getContainer());
const resizeObs = new ResizeObserver(entries => {
const entry = entries[0];
const { width } = entry.contentRect;
if (width >= 1360) {
this.fontSize = 'xl';
}
else if (width >= 1024) {
this.fontSize = 'lg';
}
else if (width >= 768) {
this.fontSize = 'md';
}
else {
this.fontSize = 'sm';
}
});
resizeObs.observe(container);
});
}
renderCurrentCue(cue) {
if (withComponentRegistry.isNil(cue)) {
this.cue = '';
return;
}
const div = document.createElement('div');
div.append(cue.getCueAsHTML());
this.cue = div.innerHTML.trim();
}
render() {
return (index.h("div", { style: {
transform: `translateY(calc(${this.isControlsActive ? 'var(--vm-controls-height)' : '24px'} * -1))`,
}, class: {
captions: true,
enabled: this.isEnabled,
hidden: this.hidden,
fontMd: this.fontSize === 'md',
fontLg: this.fontSize === 'lg',
fontXl: this.fontSize === 'xl',
inactive: !this.isTextTrackVisible,
} }, index.h("span", { class: "cue" }, this.cue)));
}
static get watchers() { return {
"isVideoView": ["onEnabledChange"],
"playbackStarted": ["onEnabledChange"],
"textTracks": ["onTextTracksChange"],
"currentTextTrack": ["onTextTracksChange"]
}; }
};
Captions.style = captionsCss;
const clickToPlayCss = ":host{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:var(--vm-click-to-play-z-index)}.clickToPlay{display:none;width:100%;height:100%;pointer-events:none}.clickToPlay.enabled{display:inline-block;pointer-events:auto}";
var __awaiter$2 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try {
step(generator.next(value));
}
catch (e) {
reject(e);
} }
function rejected(value) { try {
step(generator["throw"](value));
}
catch (e) {
reject(e);
} }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
const ClickToPlay = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
/**
* By default this is disabled on mobile to not interfere with playback, set this to `true` to
* enable it.
*/
this.useOnMobile = false;
/** @internal */
this.paused = true;
/** @internal */
this.isVideoView = false;
/** @internal */
this.isMobile = false;
withComponentRegistry.withComponentRegistry(this);
withPlayerContext.withPlayerContext(this, ['paused', 'isVideoView', 'isMobile']);
}
connectedCallback() {
this.dispatch = PlayerDispatcher.createDispatcher(this);
}
/** @internal */
forceClick() {
return __awaiter$2(this, void 0, void 0, function* () {
this.onClick();
});
}
onClick() {
this.dispatch('paused', !this.paused);
}
render() {
return (index.h("div", { class: {
clickToPlay: true,
enabled: this.isVideoView && (!this.isMobile || this.useOnMobile),
}, onClick: this.onClick.bind(this) }));
}
};
ClickToPlay.style = clickToPlayCss;
const dblClickFullscreenCss = ":host{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:var(--vm-dbl-click-fullscreen-z-index)}.dblClickFullscreen{display:none;width:100%;height:100%;pointer-events:none}.dblClickFullscreen.enabled{display:inline-block;pointer-events:auto}";
var __awaiter$1 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try {
step(generator.next(value));
}
catch (e) {
reject(e);
} }
function rejected(value) { try {
step(generator["throw"](value));
}
catch (e) {
reject(e);
} }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
const DblClickFullscreen = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.canSetFullscreen = false;
/**
* By default this is disabled on mobile to not interfere with playback, set this to `true` to
* enable it.
*/
this.useOnMobile = false;
/** @internal */
this.isFullscreenActive = true;
/** @internal */
this.isVideoView = false;
/** @internal */
this.playbackReady = false;
/** @internal */
this.isMobile = false;
this.clicks = 0;
withComponentRegistry.withComponentRegistry(this);
withPlayerContext.withPlayerContext(this, [
'playbackReady',
'isFullscreenActive',
'isVideoView',
'isMobile',
]);
}
onPlaybackReadyChange() {
return __awaiter$1(this, void 0, void 0, function* () {
const player = yield withComponentRegistry.findPlayer(this);
if (withComponentRegistry.isUndefined(player))
return;
this.canSetFullscreen = yield player.canSetFullscreen();
});
}
onTriggerClickToPlay() {
return __awaiter$1(this, void 0, void 0, function* () {
const [clickToPlay] = withComponentRegistry.getComponentFromRegistry(this, 'vm-click-to-play');
yield (clickToPlay === null || clickToPlay === void 0 ? void 0 : clickToPlay.forceClick());
});
}
onToggleFullscreen() {
return __awaiter$1(this, void 0, void 0, function* () {
const player = yield withComponentRegistry.findPlayer(this);
if (withComponentRegistry.isUndefined(player))
return;
this.isFullscreenActive
? player.exitFullscreen()
: player.enterFullscreen();
});
}
onClick() {
this.clicks += 1;
if (this.clicks === 1) {
setTimeout(() => {
if (this.clicks === 1) {
this.onTriggerClickToPlay();
}
else {
this.onToggleFullscreen();
}
this.clicks = 0;
}, 300);
}
}
render() {
return (index.h("div", { class: {
dblClickFullscreen: true,
enabled: this.playbackReady &&
this.canSetFullscreen &&
this.isVideoView &&
(!this.isMobile || this.useOnMobile),
}, onClick: this.onClick.bind(this) }));
}
static get watchers() { return {
"playbackReady": ["onPlaybackReadyChange"]
}; }
};
DblClickFullscreen.style = dblClickFullscreenCss;
const defaultControlsCss = ":host{display:contents;pointer-events:none;z-index:var(--vm-controls-z-index)}";
const DefaultControls = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
/**
* The length in milliseconds that the controls are active for before fading out. Audio players
* are not effected by this prop.
*/
this.activeDuration = 2750;
/**
* Whether the controls should wait for playback to start before being shown. Audio players
* are not effected by this prop.
*/
this.waitForPlaybackStart = false;
/**
* Whether the controls should show/hide when paused. Audio players are not effected by this prop.
*/
this.hideWhenPaused = false;
/**
* Whether the controls should hide when the mouse leaves the player. Audio players are not
* effected by this prop.
*/
this.hideOnMouseLeave = false;
/** @internal */
this.isMobile = false;
/** @internal */
this.isLive = false;
/** @internal */
this.isAudioView = false;
/** @internal */
this.isVideoView = false;
withComponentRegistry.withComponentRegistry(this);
withPlayerContext.withPlayerContext(this, [
'theme',
'isMobile',
'isAudioView',
'isVideoView',
'isLive',
]);
}
buildAudioControls() {
return (index.h("vm-controls", { fullWidth: true }, index.h("vm-playback-control", { tooltipDirection: "right" }), index.h("vm-volume-control", null), !this.isLive && index.h("vm-current-time", null), this.isLive && index.h("vm-control-spacer", null), !this.isLive && index.h("vm-scrubber-control", null), this.isLive && index.h("vm-live-indicator", null), !this.isLive && index.h("vm-end-time", null), !this.isLive && index.h("vm-settings-control", { tooltipDirection: "left" }), index.h("div", { style: { marginLeft: '0', paddingRight: '2px' } })));
}
buildMobileVideoControls() {
return (index.h(index.Fragment, null, index.h("vm-scrim", { gradient: "up" }), index.h("vm-controls", { pin: "topLeft", fullWidth: true, activeDuration: this.activeDuration, waitForPlaybackStart: this.waitForPlaybackStart, hideWhenPaused: this.hideWhenPaused }, index.h("vm-control-spacer", null), index.h("vm-volume-control", null), !this.isLive && index.h("vm-caption-control", null), !this.isLive && index.h("vm-settings-control", null), this.isLive && index.h("vm-fullscreen-control", null)), index.h("vm-controls", { pin: "center", justify: "center", activeDuration: this.activeDuration, waitForPlaybackStart: this.waitForPlaybackStart, hideWhenPaused: this.hideWhenPaused }, index.h("vm-playback-control", { style: { '--vm-control-scale': '1.3' } })), !this.isLive && (index.h("vm-controls", { pin: "bottomLeft", fullWidth: true, activeDuration: this.activeDuration, waitForPlaybackStart: this.waitForPlaybackStart, hideWhenPaused: this.hideWhenPaused }, index.h("vm-control-group", null, index.h("vm-current-time", null), index.h("vm-control-spacer", null), index.h("vm-end-time", null), index.h("vm-fullscreen-control", null)), index.h("vm-control-group", { space: "top" }, index.h("vm-scrubber-control", null))))));
}
buildDesktopVideoControls() {
return (index.h(index.Fragment, null, this.theme !== 'light' && index.h("vm-scrim", { gradient: "up" }), index.h("vm-controls", { fullWidth: true, pin: "bottomRight", activeDuration: this.activeDuration, waitForPlaybackStart: this.waitForPlaybackStart, hideWhenPaused: this.hideWhenPaused, hideOnMouseLeave: this.hideOnMouseLeave }, !this.isLive && (index.h("vm-control-group", null, index.h("vm-scrubber-control", null))), index.h("vm-control-group", { space: this.isLive ? 'none' : 'top' }, index.h("vm-playback-control", { tooltipDirection: "right" }), index.h("vm-volume-control", null), !this.isLive && index.h("vm-time-progress", null), index.h("vm-control-spacer", null), !this.isLive && index.h("vm-caption-control", null), this.isLive && index.h("vm-live-indicator", null), index.h("vm-pip-control", null), !this.isLive && index.h("vm-settings-control", null), index.h("vm-fullscreen-control", { tooltipDirection: "left" })))));
}
render() {
if (this.isAudioView)
return this.buildAudioControls();
if (this.isVideoView && this.isMobile)
return this.buildMobileVideoControls();
if (this.isVideoView)
return this.buildDesktopVideoControls();
return null;
}
};
DefaultControls.style = defaultControlsCss;
const defaultSettingsCss = ":host{z-index:var(--vm-menu-z-index)}";
var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try {
step(generator.next(value));
}
catch (e) {
reject(e);
} }
function rejected(value) { try {
step(generator["throw"](value));
}
catch (e) {
reject(e);
} }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
const DefaultSettings = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.textTracksDisposal = new withComponentRegistry.Disposal();
this.canSetPlaybackRate = false;
this.canSetPlaybackQuality = false;
this.canSetTextTrack = false;
this.canSetAudioTrack = false;
/**
* Pins the settings to the defined position inside the video player. This has no effect when
* the view is of type `audio`, it will always be `bottomRight`.
*/
this.pin = 'bottomRight';
/** @internal */
this.i18n = {};
/** @internal */
this.playbackReady = false;
/** @internal */
this.playbackRate = 1;
/** @internal */
this.playbackRates = [1];
/** @internal */
this.isVideoView = false;
/** @internal */
this.playbackQualities = [];
/** @internal */
this.textTracks = [];
/** @internal */
this.currentTextTrack = -1;
/** @internal */
this.audioTracks = [];
/** @internal */
this.currentAudioTrack = -1;
/** @internal */
this.isTextTrackVisible = true;
withComponentRegistry.withComponentRegistry(this);
withPlayerContext.withPlayerContext(this, [
'i18n',
'playbackReady',
'playbackRate',
'playbackRates',
'playbackQuality',
'playbackQualities',
'isVideoView',
'textTracks',
'currentTextTrack',
'isTextTrackVisible',
'audioTracks',
'currentAudioTrack',
]);
}
onPlaybackReady() {
return __awaiter(this, void 0, void 0, function* () {
const player = yield withComponentRegistry.findPlayer(this);
if (withComponentRegistry.isUndefined(player))
return;
this.canSetPlaybackQuality = yield player.canSetPlaybackQuality();
this.canSetPlaybackRate = yield player.canSetPlaybackRate();
});
}
onAudioTracksChange() {
var _a;
return __awaiter(this, void 0, void 0, function* () {
const player = withComponentRegistry.getPlayerFromRegistry(this);
this.canSetAudioTrack = (_a = (yield (player === null || player === void 0 ? void 0 : player.canSetAudioTrack()))) !== null && _a !== void 0 ? _a : false;
});
}
onTextTracksChange() {
var _a;
return __awaiter(this, void 0, void 0, function* () {
const player = withComponentRegistry.getPlayerFromRegistry(this);
this.canSetTextTrack = (_a = (yield (player === null || player === void 0 ? void 0 : player.canSetTextTrack()))) !== null && _a !== void 0 ? _a : false;
});
}
connectedCallback() {
this.dispatch = PlayerDispatcher.createDispatcher(this);
}
componentDidLoad() {
this.onTextTracksChange();
}
disconnectedCallback() {
this.textTracksDisposal.empty();
}
onPlaybackRateSelect(event) {
const radio = event.target;
this.dispatch('playbackRate', parseFloat(radio.value));
}
buildPlaybackRateSubmenu() {
if (this.playbackRates.length <= 1 || !this.canSetPlaybackRate) {
return (index.h("vm-menu-item", { label: this.i18n.playbackRate, hint: this.i18n.normal }));
}
const formatRate = (rate) => rate === 1 ? this.i18n.normal : `${rate}`;
return (index.h("vm-submenu", { label: this.i18n.playbackRate, hint: formatRate(this.playbackRate) }, index.h("vm-menu-radio-group", { value: `${this.playbackRate}`, onVmCheck: this.onPlaybackRateSelect.bind(this) }, this.playbackRates.map(rate => (index.h("vm-menu-radio", { label: formatRate(rate), value: `${rate}` }))))));
}
onPlaybackQualitySelect(event) {
const radio = event.target;
this.dispatch('playbackQuality', radio.value);
}
buildPlaybackQualitySubmenu() {
var _a;
if (this.playbackQualities.length <= 1 || !this.canSetPlaybackQuality) {
return (index.h("vm-menu-item", { label: this.i18n.playbackQuality, hint: (_a = this.playbackQuality) !== null && _a !== void 0 ? _a : this.i18n.auto }));
}
// @TODO this doesn't account for audio qualities yet.
const getBadge = (quality) => {
const verticalPixels = parseInt(quality.slice(0, -1), 10);
if (verticalPixels >= 2160)
return 'UHD';
if (verticalPixels >= 1080)
return 'HD';
return undefined;
};
return (index.h("vm-submenu", { label: this.i18n.playbackQuality, hint: this.playbackQuality }, index.h("vm-menu-radio-group", { value: this.playbackQuality, onVmCheck: this.onPlaybackQualitySelect.bind(this) }, this.playbackQualities.map(quality => (index.h("vm-menu-radio", { label: quality, value: quality, badge: getBadge(quality) }))))));
}
onTextTrackSelect(event) {
const radio = event.target;
const trackId = parseInt(radio.value, 10);
const player = withComponentRegistry.getPlayerFromRegistry(this);
if (trackId === -1) {
player === null || player === void 0 ? void 0 : player.setTextTrackVisibility(false);
return;
}
player === null || player === void 0 ? void 0 : player.setTextTrackVisibility(true);
player === null || player === void 0 ? void 0 : player.setCurrentTextTrack(trackId);
}
buildTextTracksSubmenu() {
var _a, _b, _c;
if (this.textTracks.length <= 1 || !this.canSetTextTrack) {
return (index.h("vm-menu-item", { label: this.i18n.subtitlesOrCc, hint: (_b = (_a = this.textTracks[this.currentTextTrack]) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : this.i18n.none }));
}
return (index.h("vm-submenu", { label: this.i18n.subtitlesOrCc, hint: this.isTextTrackVisible
? (_c = this.textTracks[this.currentTextTrack]) === null || _c === void 0 ? void 0 : _c.label
: this.i18n.off }, index.h("vm-menu-radio-group", { value: `${!this.isTextTrackVisible ? -1 : this.currentTextTrack}`, onVmCheck: this.onTextTrackSelect.bind(this) }, [index.h("vm-menu-radio", { label: this.i18n.off, value: "-1" })].concat(this.textTracks.map((track, i) => (index.h("vm-menu-radio", { label: track.label, value: `${i}` })))))));
}
onAudioTrackSelect(event) {
const radio = event.target;
const trackId = parseInt(radio.value, 10);
const player = withComponentRegistry.getPlayerFromRegistry(this);
player === null || player === void 0 ? void 0 : player.setCurrentAudioTrack(trackId);
}
buildAudioTracksMenu() {
var _a, _b, _c;
if (this.audioTracks.length <= 1 || !this.canSetAudioTrack) {
return (index.h("vm-menu-item", { label: this.i18n.audio, hint: (_b = (_a = this.audioTracks[this.currentAudioTrack]) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : this.i18n.default }));
}
return (index.h("vm-submenu", { label: this.i18n.audio, hint: (_c = this.audioTracks[this.currentAudioTrack]) === null || _c === void 0 ? void 0 : _c.label }, index.h("vm-menu-radio-group", { value: `${this.currentAudioTrack}`, onVmCheck: this.onAudioTrackSelect.bind(this) }, this.audioTracks.map((track, i) => (index.h("vm-menu-radio", { label: track.label, value: `${i}` }))))));
}
render() {
return (index.h("vm-settings", { pin: this.pin }, this.buildAudioTracksMenu(), this.buildPlaybackRateSubmenu(), this.buildPlaybackQualitySubmenu(), this.isVideoView && this.buildTextTracksSubmenu(), index.h("slot", null)));
}
static get watchers() { return {
"playbackReady": ["onPlaybackReady", "onAudioTracksChange", "onTextTracksChange"],
"audioTracks": ["onAudioTracksChange"],
"textTracks": ["onTextTracksChange"]
}; }
};
DefaultSettings.style = defaultSettingsCss;
const loadingScreenCss = ":host{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:var(--vm-loading-screen-z-index);display:flex;align-items:center;justify-content:center}.loadingScreen{opacity:100;transition:var(--vm-fade-transition)}.loadingScreen.inactive{opacity:0}.dotPulse{position:relative;left:-9999px;width:var(--vm-loading-screen-dot-size);height:var(--vm-loading-screen-dot-size);border-radius:calc(var(--vm-loading-screen-dot-size) / 2);background-color:var(--vm-loading-screen-dot-color);color:var(--vm-loading-screen-dot-color);box-shadow:9999px 0 0 calc(calc(var(--vm-loading-screen-dot-size) / 2) * -1)\n var(--vm-loading-screen-dot-color);animation:dotPulse var(--vm-loading-screen-pulse-duration) infinite linear;animation-delay:calc(var(--vm-loading-screen-pulse-duration) / 6)}.dotPulse::before,.dotPulse::after{content:'';display:inline-block;position:absolute;top:0;width:var(--vm-loading-screen-dot-size);height:var(--vm-loading-screen-dot-size);border-radius:calc(var(--vm-loading-screen-dot-size) / 2);background-color:var(--vm-loading-screen-dot-color);color:var(--vm-loading-screen-dot-color)}.dotPulse::before{box-shadow:9984px 0 0 calc(calc(var(--vm-loading-screen-dot-size) / 2) * -1)\n var(--vm-loading-screen-dot-color);animation:dotPulseBefore var(--vm-loading-screen-pulse-duration) infinite\n linear;animation-delay:0s}.dotPulse::after{box-shadow:10014px 0 0 calc(calc(var(--vm-loading-screen-dot-size) / 2) * -1)\n var(--vm-loading-screen-dot-color);animation:dotPulseAfter var(--vm-loading-screen-pulse-duration) infinite\n linear;animation-delay:calc(var(--vm-loading-screen-pulse-duration) / 3)}@keyframes dotPulseBefore{0%{box-shadow:9984px 0 0\n calc(calc(var(--vm-loading-screen-dot-size) / 2) * -1)\n var(--vm-loading-screen-dot-color)}30%{box-shadow:9984px 0 0 2px var(--vm-loading-screen-dot-color)}60%,100%{box-shadow:9984px 0 0\n calc(calc(var(--vm-loading-screen-dot-size) / 2) * -1)\n var(--vm-loading-screen-dot-color)}}@keyframes dotPulse{0%{box-shadow:9999px 0 0\n calc(calc(var(--vm-loading-screen-dot-size) / 2) * -1)\n var(--vm-loading-screen-dot-color)}30%{box-shadow:9999px 0 0 2px var(--vm-loading-screen-dot-color)}60%,100%{box-shadow:9999px 0 0\n calc(calc(var(--vm-loading-screen-dot-size) / 2) * -1)\n var(--vm-loading-screen-dot-color)}}@keyframes dotPulseAfter{0%{box-shadow:10014px 0 0\n calc(calc(var(--vm-loading-screen-dot-size) / 2) * -1)\n var(--vm-loading-screen-dot-color)}30%{box-shadow:10014px 0 0 2px var(--vm-loading-screen-dot-color)}60%,100%{box-shadow:10014px 0 0\n calc(calc(var(--vm-loading-screen-dot-size) / 2) * -1)\n var(--vm-loading-screen-dot-color)}}";
const LoadingScreen = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
/** @internal */
this.playbackReady = false;
/**
* Whether the loading dots are hidden or not.
*/
this.hideDots = false;
withComponentRegistry.withComponentRegistry(this);
withPlayerContext.withPlayerContext(this, ['playbackReady']);
}
render() {
return (index.h("div", { class: {
loadingScreen: true,
inactive: this.playbackReady,
} }, index.h("slot", null), !this.hideDots && index.h("div", { class: "dotPulse" })));
}
};
LoadingScreen.style = loadingScreenCss;
const posterCss = ":host{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:var(--vm-poster-z-index)}.poster{width:100%;height:100%;background:#000;opacity:0;visibility:hidden;pointer-events:none;transition:var(--vm-fade-transition)}.poster.hidden{display:none}.poster.active{opacity:1;visibility:visible}img{width:100%;height:100%;pointer-events:none}";
const Poster = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.vmLoaded = index.createEvent(this, "vmLoaded", 3);
this.vmWillShow = index.createEvent(this, "vmWillShow", 3);
this.vmWillHide = index.createEvent(this, "vmWillHide", 3);
this.isHidden = true;
this.isActive = false;
this.hasLoaded = false;
/**
* How the poster image should be resized to fit the container (sets the `object-fit` property).
*/
this.fit = 'cover';
/** @internal */
this.isVideoView = false;
/** @internal */
this.playbackStarted = false;
/** @internal */
this.currentTime = 0;
withComponentRegistry.withComponentRegistry(this);
withPlayerContext.withPlayerContext(this, [
'mediaTitle',
'currentPoster',
'playbackStarted',
'currentTime',
'isVideoView',
]);
}
onCurrentPosterChange() {
var _a;
this.hasLoaded = false;
(_a = this.lazyLoader) === null || _a === void 0 ? void 0 : _a.onMutation();
}
connectedCallback() {
this.lazyLoader = new LazyLoader.LazyLoader(this.host, ['data-src', 'src'], el => {
const src = el.getAttribute('data-src');
el.removeAttribute('src');
if (!withComponentRegistry.isNull(src)) {
el.setAttribute('src', src);
}
});
this.onEnabledChange();
this.onActiveChange();
}
disconnectedCallback() {
this.lazyLoader.destroy();
}
onVisibilityChange() {
!this.isHidden && this.isActive
? this.vmWillShow.emit()
: this.vmWillHide.emit();
}
onEnabledChange() {
this.isHidden = !this.isVideoView;
this.onVisibilityChange();
}
onActiveChange() {
this.isActive = !this.playbackStarted || this.currentTime <= 0.1;
this.onVisibilityChange();
}
onPosterLoad() {
this.vmLoaded.emit();
this.hasLoaded = true;
}
render() {
return (index.h("div", { class: {
poster: true,
hidden: this.isHidden,
active: this.isActive && this.hasLoaded,
} }, index.h("img", { class: "lazy", "data-src": this.currentPoster, alt: !withComponentRegistry.isUndefined(this.mediaTitle)
? `${this.mediaTitle} Poster`
: 'Media Poster', style: { objectFit: this.fit }, onLoad: this.onPosterLoad.bind(this) })));
}
get host() { return index.getElement(this); }
static get watchers() { return {
"currentPoster": ["onCurrentPosterChange"],
"isVideoView": ["onEnabledChange"],
"currentTime": ["onActiveChange"],
"playbackStarted": ["onActiveChange"]
}; }
};
Poster.style = posterCss;
const spinnerCss = ":host{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:var(--vm-spinner-z-index)}.spinner{width:100%;height:100%;display:flex;justify-content:center;align-items:center;opacity:0;visibility:hidden;pointer-events:none;transition:var(--vm-fade-transition)}.spinner.hidden{display:none}.spinner.active{opacity:1;visibility:visible}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.spin{background:transparent;margin:60px auto;font-size:10px;position:relative;text-indent:-9999em;pointer-events:none;border-top:var(--vm-spinner-thickness) solid var(--vm-spinner-fill-color);border-left:var(--vm-spinner-thickness) solid var(--vm-spinner-fill-color);border-right:var(--vm-spinner-thickness) solid var(--vm-spinner-track-color);border-bottom:var(--vm-spinner-thickness) solid var(--vm-spinner-track-color);transform:translateZ(0)}.spin.active{animation:spin var(--vm-spinner-spin-duration) infinite\n var(--vm-spinner-spin-timing-func)}.spin,.spin::after{border-radius:50%;width:var(--vm-spinner-width);height:var(--vm-spinner-height)}";
const Spinner = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.vmWillShow = index.createEvent(this, "vmWillShow", 3);
this.vmWillHide = index.createEvent(this, "vmWillHide", 3);
this.blacklist = [Provider.Provider.YouTube];
this.isHidden = true;
this.isActive = false;
/** @internal */
this.isVideoView = false;
/**
* Whether the spinner should be active when the player is booting or media is loading.
*/
this.showWhenMediaLoading = false;
/** @internal */
this.playbackReady = false;
/** @internal */
this.buffering = false;
withComponentRegistry.withComponentRegistry(this);
withPlayerContext.withPlayerContext(this, [
'isVideoView',
'buffering',
'playbackReady',
'currentProvider',
]);
}
onVideoViewChange() {
this.isHidden = !this.isVideoView;
this.onVisiblityChange();
}
onActiveChange() {
this.isActive =
this.buffering || (this.showWhenMediaLoading && !this.playbackReady);
this.onVisiblityChange();
}
onVisiblityChange() {
!this.isHidden && this.isActive
? this.vmWillShow.emit()
: this.vmWillHide.emit();
}
render() {
return (index.h("div", { class: {
spinner: true,
hidden: this.isHidden || this.blacklist.includes(this.currentProvider),
active: this.isActive,
} }, index.h("div", { class: {
spin: true,
active: this.isActive,
} }, "Loading...")));
}
static get watchers() { return {
"isVideoView": ["onVideoViewChange"],
"buffering": ["onActiveChange"],
"playbackReady": ["onActiveChange"]
}; }
};
Spinner.style = spinnerCss;
const uiCss = ":host{z-index:var(--vm-ui-z-index)}.ui{width:100%;pointer-events:none}.ui.hidden{display:none}.ui.video{position:absolute;top:0;left:0;height:100%}";
const UI = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
/** @internal */
this.isVideoView = false;
/** @internal */
this.playsinline = false;
/** @internal */
this.isFullscreenActive = false;
withComponentRegistry.withComponentRegistry(this);
withPlayerContext.withPlayerContext(this, [
'isVideoView',
'playsinline',
'isFullscreenActive',
]);
}
render() {
const canShowCustomUI = !support.IS_IOS ||
!this.isVideoView ||
(this.playsinline && !this.isFullscreenActive);
return (index.h("div", { class: {
ui: true,
hidden: !canShowCustomUI,
video: this.isVideoView,
} }, canShowCustomUI && index.h("slot", null)));
}
};
UI.style = uiCss;
exports.vm_captions = Captions;
exports.vm_click_to_play = ClickToPlay;
exports.vm_dbl_click_fullscreen = DblClickFullscreen;
exports.vm_default_controls = DefaultControls;
exports.vm_default_settings = DefaultSettings;
exports.vm_loading_screen = LoadingScreen;
exports.vm_poster = Poster;
exports.vm_spinner = Spinner;
exports.vm_ui = UI;