mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
1821 lines
56 KiB
JavaScript
1821 lines
56 KiB
JavaScript
import browser from 'browser';
|
|
import events from 'events';
|
|
import appHost from 'apphost';
|
|
import loading from 'loading';
|
|
import dom from 'dom';
|
|
import playbackManager from 'playbackManager';
|
|
import appRouter from 'appRouter';
|
|
import connectionManager from 'connectionManager';
|
|
import {
|
|
bindEventsToHlsPlayer,
|
|
destroyHlsPlayer,
|
|
destroyFlvPlayer,
|
|
destroyCastPlayer,
|
|
getCrossOriginValue,
|
|
enableHlsJsPlayer,
|
|
applySrc,
|
|
playWithPromise,
|
|
onEndedInternal,
|
|
saveVolume,
|
|
seekOnPlaybackStart,
|
|
onErrorInternal,
|
|
handleHlsJsMediaError,
|
|
getSavedVolume,
|
|
isValidDuration,
|
|
getBufferedRanges
|
|
} from 'htmlMediaHelper';
|
|
import itemHelper from 'itemHelper';
|
|
import screenfull from 'screenfull';
|
|
import globalize from 'globalize';
|
|
|
|
/* eslint-disable indent */
|
|
|
|
function tryRemoveElement(elem) {
|
|
const parentNode = elem.parentNode;
|
|
if (parentNode) {
|
|
// Seeing crashes in edge webview
|
|
try {
|
|
parentNode.removeChild(elem);
|
|
} catch (err) {
|
|
console.error(`error removing dialog element: ${err}`);
|
|
}
|
|
}
|
|
}
|
|
|
|
function enableNativeTrackSupport(currentSrc, track) {
|
|
if (track) {
|
|
if (track.DeliveryMethod === 'Embed') {
|
|
return true;
|
|
}
|
|
}
|
|
|
|
if (browser.firefox) {
|
|
if ((currentSrc || '').toLowerCase().includes('.m3u8')) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
if (browser.ps4) {
|
|
return false;
|
|
}
|
|
|
|
if (browser.web0s) {
|
|
return false;
|
|
}
|
|
|
|
// Edge is randomly not rendering subtitles
|
|
if (browser.edge) {
|
|
return false;
|
|
}
|
|
|
|
if (browser.iOS) {
|
|
// works in the browser but not the native app
|
|
if ((browser.iosVersion || 10) < 10) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
if (track) {
|
|
const format = (track.Codec || '').toLowerCase();
|
|
if (format === 'ssa' || format === 'ass') {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
function requireHlsPlayer(callback) {
|
|
import('hlsjs').then(({default: hls}) => {
|
|
window.Hls = hls;
|
|
callback();
|
|
});
|
|
}
|
|
|
|
function getMediaStreamAudioTracks(mediaSource) {
|
|
return mediaSource.MediaStreams.filter(function (s) {
|
|
return s.Type === 'Audio';
|
|
});
|
|
}
|
|
|
|
function getMediaStreamTextTracks(mediaSource) {
|
|
return mediaSource.MediaStreams.filter(function (s) {
|
|
return s.Type === 'Subtitle';
|
|
});
|
|
}
|
|
|
|
function hidePrePlaybackPage() {
|
|
const animatedPage = document.querySelector('.page:not(.hide)');
|
|
animatedPage.classList.add('hide');
|
|
// At this point, we must hide the scrollbar placeholder, so it's not being displayed while the item is being loaded
|
|
document.body.classList.remove('force-scroll');
|
|
}
|
|
|
|
function zoomIn(elem) {
|
|
return new Promise(resolve => {
|
|
const duration = 240;
|
|
elem.style.animation = `htmlvideoplayer-zoomin ${duration}ms ease-in normal`;
|
|
hidePrePlaybackPage();
|
|
dom.addEventListener(elem, dom.whichAnimationEvent(), resolve, {
|
|
once: true
|
|
});
|
|
});
|
|
}
|
|
|
|
function normalizeTrackEventText(text, useHtml) {
|
|
const result = text.replace(/\\N/gi, '\n').replace(/\r/gi, '');
|
|
return useHtml ? result.replace(/\n/gi, '<br>') : result;
|
|
}
|
|
|
|
function getTextTrackUrl(track, item, format) {
|
|
if (itemHelper.isLocalItem(item) && track.Path) {
|
|
return track.Path;
|
|
}
|
|
|
|
let url = playbackManager.getSubtitleUrl(track, item.ServerId);
|
|
if (format) {
|
|
url = url.replace('.vtt', format);
|
|
}
|
|
|
|
return url;
|
|
}
|
|
|
|
function getDefaultProfile() {
|
|
return import('browserdeviceprofile').then(({default: profileBuilder}) => {
|
|
return profileBuilder({});
|
|
});
|
|
}
|
|
|
|
export class HtmlVideoPlayer {
|
|
/**
|
|
* @type {string}
|
|
*/
|
|
name
|
|
/**
|
|
* @type {string}
|
|
*/
|
|
type = 'mediaplayer';
|
|
/**
|
|
* @type {string}
|
|
*/
|
|
id = 'htmlvideoplayer';
|
|
/**
|
|
* Let any players created by plugins take priority
|
|
*
|
|
* @type {number}
|
|
*/
|
|
priority = 1;
|
|
/**
|
|
* @type {boolean}
|
|
*/
|
|
isFetching = false;
|
|
|
|
/**
|
|
* @type {HTMLDivElement | null | undefined}
|
|
*/
|
|
#videoDialog;
|
|
/**
|
|
* @type {number | undefined}
|
|
*/
|
|
#subtitleTrackIndexToSetOnPlaying;
|
|
/**
|
|
* @type {number | null}
|
|
*/
|
|
#audioTrackIndexToSetOnPlaying;
|
|
/**
|
|
* @type {null | undefined}
|
|
*/
|
|
#currentClock;
|
|
/**
|
|
* @type {any | null | undefined}
|
|
*/
|
|
#currentSubtitlesOctopus;
|
|
/**
|
|
* @type {null | undefined}
|
|
*/
|
|
#currentAssRenderer;
|
|
/**
|
|
* @type {number | undefined}
|
|
*/
|
|
#customTrackIndex;
|
|
/**
|
|
* @type {boolean | undefined}
|
|
*/
|
|
#showTrackOffset;
|
|
/**
|
|
* @type {number | undefined}
|
|
*/
|
|
#currentTrackOffset;
|
|
/**
|
|
* @type {HTMLElement | null | undefined}
|
|
*/
|
|
#videoSubtitlesElem;
|
|
/**
|
|
* @type {any | null | undefined}
|
|
*/
|
|
#currentTrackEvents;
|
|
/**
|
|
* @type {string[] | undefined}
|
|
*/
|
|
#supportedFeatures;
|
|
/**
|
|
* @type {HTMLVideoElement | null | undefined}
|
|
*/
|
|
#mediaElement;
|
|
/**
|
|
* @type {number}
|
|
*/
|
|
#fetchQueue = 0;
|
|
/**
|
|
* @type {string | undefined}
|
|
*/
|
|
#currentSrc;
|
|
/**
|
|
* @type {boolean | undefined}
|
|
*/
|
|
#started;
|
|
/**
|
|
* @type {boolean | undefined}
|
|
*/
|
|
#timeUpdated;
|
|
/**
|
|
* @type {number | null | undefined}
|
|
*/
|
|
#currentTime;
|
|
/**
|
|
* @type {any | undefined}
|
|
*/
|
|
#flvPlayer;
|
|
/**
|
|
* @private (used in other files)
|
|
* @type {any | undefined}
|
|
*/
|
|
_hlsPlayer;
|
|
/**
|
|
* @private (used in other files)
|
|
* @type {any | null | undefined}
|
|
*/
|
|
_castPlayer;
|
|
/**
|
|
* @private (used in other files)
|
|
* @type {any | undefined}
|
|
*/
|
|
_currentPlayOptions;
|
|
/**
|
|
* @type {any | undefined}
|
|
*/
|
|
#lastProfile;
|
|
/**
|
|
* @type {MutationObserver | IntersectionObserver | undefined} (Unclear observer typing)
|
|
*/
|
|
#resizeObserver;
|
|
|
|
constructor() {
|
|
if (browser.edgeUwp) {
|
|
this.name = 'Windows Video Player';
|
|
} else {
|
|
this.name = 'Html Video Player';
|
|
}
|
|
}
|
|
|
|
currentSrc() {
|
|
return this.#currentSrc;
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
incrementFetchQueue() {
|
|
if (this.#fetchQueue <= 0) {
|
|
this.isFetching = true;
|
|
events.trigger(this, 'beginFetch');
|
|
}
|
|
|
|
this.#fetchQueue++;
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
decrementFetchQueue() {
|
|
this.#fetchQueue--;
|
|
|
|
if (this.#fetchQueue <= 0) {
|
|
this.isFetching = false;
|
|
events.trigger(this, 'endFetch');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
updateVideoUrl(streamInfo) {
|
|
const isHls = streamInfo.url.toLowerCase().includes('.m3u8');
|
|
|
|
const mediaSource = streamInfo.mediaSource;
|
|
const item = streamInfo.item;
|
|
|
|
// Huge hack alert. Safari doesn't seem to like if the segments aren't available right away when playback starts
|
|
// This will start the transcoding process before actually feeding the video url into the player
|
|
// Edit: Also seeing stalls from hls.js
|
|
if (mediaSource && item && !mediaSource.RunTimeTicks && isHls && streamInfo.playMethod === 'Transcode' && (browser.iOS || browser.osx)) {
|
|
const hlsPlaylistUrl = streamInfo.url.replace('master.m3u8', 'live.m3u8');
|
|
|
|
loading.show();
|
|
|
|
console.debug(`prefetching hls playlist: ${hlsPlaylistUrl}`);
|
|
|
|
return connectionManager.getApiClient(item.ServerId).ajax({
|
|
|
|
type: 'GET',
|
|
url: hlsPlaylistUrl
|
|
|
|
}).then(function () {
|
|
console.debug(`completed prefetching hls playlist: ${hlsPlaylistUrl}`);
|
|
|
|
loading.hide();
|
|
streamInfo.url = hlsPlaylistUrl;
|
|
}, function () {
|
|
console.error(`error prefetching hls playlist: ${hlsPlaylistUrl}`);
|
|
|
|
loading.hide();
|
|
});
|
|
} else {
|
|
return Promise.resolve();
|
|
}
|
|
}
|
|
|
|
play(options) {
|
|
this.#started = false;
|
|
this.#timeUpdated = false;
|
|
|
|
this.#currentTime = null;
|
|
|
|
this.resetSubtitleOffset();
|
|
|
|
return this.createMediaElement(options).then(elem => {
|
|
return this.updateVideoUrl(options).then(() => {
|
|
return this.setCurrentSrc(elem, options);
|
|
});
|
|
});
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
setSrcWithFlvJs(elem, options, url) {
|
|
return import('flvjs').then(({default: flvjs}) => {
|
|
const flvPlayer = flvjs.createPlayer({
|
|
type: 'flv',
|
|
url: url
|
|
},
|
|
{
|
|
seekType: 'range',
|
|
lazyLoad: false
|
|
});
|
|
|
|
flvPlayer.attachMediaElement(elem);
|
|
flvPlayer.load();
|
|
|
|
this.#flvPlayer = flvPlayer;
|
|
|
|
// This is needed in setCurrentTrackElement
|
|
this.#currentSrc = url;
|
|
|
|
return flvPlayer.play();
|
|
});
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
setSrcWithHlsJs(elem, options, url) {
|
|
return new Promise((resolve, reject) => {
|
|
requireHlsPlayer(() => {
|
|
const hls = new Hls({
|
|
manifestLoadingTimeOut: 20000,
|
|
xhrSetup(xhr) {
|
|
xhr.withCredentials = true;
|
|
}
|
|
});
|
|
hls.loadSource(url);
|
|
hls.attachMedia(elem);
|
|
|
|
bindEventsToHlsPlayer(this, hls, elem, this.onError, resolve, reject);
|
|
|
|
this._hlsPlayer = hls;
|
|
|
|
// This is needed in setCurrentTrackElement
|
|
this.#currentSrc = url;
|
|
});
|
|
});
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
setCurrentSrc(elem, options) {
|
|
elem.removeEventListener('error', this.onError);
|
|
|
|
let val = options.url;
|
|
console.debug(`playing url: ${val}`);
|
|
|
|
// Convert to seconds
|
|
const seconds = (options.playerStartPositionTicks || 0) / 10000000;
|
|
if (seconds) {
|
|
val += `#t=${seconds}`;
|
|
}
|
|
|
|
destroyHlsPlayer(this);
|
|
destroyFlvPlayer(this);
|
|
destroyCastPlayer(this);
|
|
|
|
this.#subtitleTrackIndexToSetOnPlaying = options.mediaSource.DefaultSubtitleStreamIndex == null ? -1 : options.mediaSource.DefaultSubtitleStreamIndex;
|
|
if (this.#subtitleTrackIndexToSetOnPlaying != null && this.#subtitleTrackIndexToSetOnPlaying >= 0) {
|
|
const initialSubtitleStream = options.mediaSource.MediaStreams[this.#subtitleTrackIndexToSetOnPlaying];
|
|
if (!initialSubtitleStream || initialSubtitleStream.DeliveryMethod === 'Encode') {
|
|
this.#subtitleTrackIndexToSetOnPlaying = -1;
|
|
}
|
|
}
|
|
|
|
this.#audioTrackIndexToSetOnPlaying = options.playMethod === 'Transcode' ? null : options.mediaSource.DefaultAudioStreamIndex;
|
|
|
|
this._currentPlayOptions = options;
|
|
|
|
const crossOrigin = getCrossOriginValue(options.mediaSource);
|
|
if (crossOrigin) {
|
|
elem.crossOrigin = crossOrigin;
|
|
}
|
|
|
|
if (enableHlsJsPlayer(options.mediaSource.RunTimeTicks, 'Video') && val.includes('.m3u8')) {
|
|
return this.setSrcWithHlsJs(elem, options, val);
|
|
} else if (options.playMethod !== 'Transcode' && options.mediaSource.Container === 'flv') {
|
|
return this.setSrcWithFlvJs(elem, options, val);
|
|
} else {
|
|
elem.autoplay = true;
|
|
|
|
// Safari will not send cookies without this
|
|
elem.crossOrigin = 'use-credentials';
|
|
|
|
return applySrc(elem, val, options).then(() => {
|
|
this.#currentSrc = val;
|
|
|
|
return playWithPromise(elem, this.onError);
|
|
});
|
|
}
|
|
}
|
|
|
|
setSubtitleStreamIndex(index) {
|
|
this.setCurrentTrackElement(index);
|
|
}
|
|
|
|
resetSubtitleOffset() {
|
|
this.#currentTrackOffset = 0;
|
|
this.#showTrackOffset = false;
|
|
}
|
|
|
|
enableShowingSubtitleOffset() {
|
|
this.#showTrackOffset = true;
|
|
}
|
|
|
|
disableShowingSubtitleOffset() {
|
|
this.#showTrackOffset = false;
|
|
}
|
|
|
|
isShowingSubtitleOffsetEnabled() {
|
|
return this.#showTrackOffset;
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
getTextTrack() {
|
|
const videoElement = this.#mediaElement;
|
|
if (videoElement) {
|
|
return Array.from(videoElement.textTracks)
|
|
.find(function (trackElement) {
|
|
// get showing .vtt textTack
|
|
return trackElement.mode === 'showing';
|
|
});
|
|
} else {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
setSubtitleOffset(offset) {
|
|
const offsetValue = parseFloat(offset);
|
|
|
|
// if .ass currently rendering
|
|
if (this.#currentSubtitlesOctopus) {
|
|
this.updateCurrentTrackOffset(offsetValue);
|
|
this.#currentSubtitlesOctopus.timeOffset = (this._currentPlayOptions.transcodingOffsetTicks || 0) / 10000000 + offsetValue;
|
|
} else {
|
|
const trackElement = this.getTextTrack();
|
|
// if .vtt currently rendering
|
|
if (trackElement) {
|
|
this.setTextTrackSubtitleOffset(trackElement, offsetValue);
|
|
} else if (this.#currentTrackEvents) {
|
|
this.setTrackEventsSubtitleOffset(this.#currentTrackEvents, offsetValue);
|
|
} else {
|
|
console.debug('No available track, cannot apply offset: ', offsetValue);
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
updateCurrentTrackOffset(offsetValue) {
|
|
let relativeOffset = offsetValue;
|
|
const newTrackOffset = offsetValue;
|
|
if (this.#currentTrackOffset) {
|
|
relativeOffset -= this.#currentTrackOffset;
|
|
}
|
|
this.#currentTrackOffset = newTrackOffset;
|
|
// relative to currentTrackOffset
|
|
return relativeOffset;
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
setTextTrackSubtitleOffset(currentTrack, offsetValue) {
|
|
if (currentTrack.cues) {
|
|
offsetValue = this.updateCurrentTrackOffset(offsetValue);
|
|
Array.from(currentTrack.cues)
|
|
.forEach(function (cue) {
|
|
cue.startTime -= offsetValue;
|
|
cue.endTime -= offsetValue;
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
setTrackEventsSubtitleOffset(trackEvents, offsetValue) {
|
|
if (Array.isArray(trackEvents)) {
|
|
offsetValue = this.updateCurrentTrackOffset(offsetValue) * 1e7; // ticks
|
|
trackEvents.forEach(function (trackEvent) {
|
|
trackEvent.StartPositionTicks -= offsetValue;
|
|
trackEvent.EndPositionTicks -= offsetValue;
|
|
});
|
|
}
|
|
}
|
|
|
|
getSubtitleOffset() {
|
|
return this.#currentTrackOffset;
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
isAudioStreamSupported(stream, deviceProfile) {
|
|
const codec = (stream.Codec || '').toLowerCase();
|
|
|
|
if (!codec) {
|
|
return true;
|
|
}
|
|
|
|
if (!deviceProfile) {
|
|
// This should never happen
|
|
return true;
|
|
}
|
|
|
|
const profiles = deviceProfile.DirectPlayProfiles || [];
|
|
|
|
return profiles.filter(function (p) {
|
|
if (p.Type === 'Video') {
|
|
if (!p.AudioCodec) {
|
|
return true;
|
|
}
|
|
|
|
return p.AudioCodec.toLowerCase().includes(codec);
|
|
}
|
|
|
|
return false;
|
|
}).length > 0;
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
getSupportedAudioStreams() {
|
|
const profile = this.#lastProfile;
|
|
|
|
return getMediaStreamAudioTracks(this._currentPlayOptions.mediaSource).filter((stream) => {
|
|
return this.isAudioStreamSupported(stream, profile);
|
|
});
|
|
}
|
|
|
|
setAudioStreamIndex(index) {
|
|
const streams = this.getSupportedAudioStreams();
|
|
|
|
if (streams.length < 2) {
|
|
// If there's only one supported stream then trust that the player will handle it on it's own
|
|
return;
|
|
}
|
|
|
|
let audioIndex = -1;
|
|
|
|
for (const stream of streams) {
|
|
audioIndex++;
|
|
|
|
if (stream.Index === index) {
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (audioIndex === -1) {
|
|
return;
|
|
}
|
|
|
|
const elem = this.#mediaElement;
|
|
if (!elem) {
|
|
return;
|
|
}
|
|
|
|
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/audioTracks
|
|
|
|
/**
|
|
* @type {ArrayLike<any>|any[]}
|
|
*/
|
|
const elemAudioTracks = elem.audioTracks || [];
|
|
console.debug(`found ${elemAudioTracks.length} audio tracks`);
|
|
|
|
for (const [i, audioTrack] of Array.from(elemAudioTracks).entries()) {
|
|
if (audioIndex === i) {
|
|
console.debug(`setting audio track ${i} to enabled`);
|
|
audioTrack.enabled = true;
|
|
} else {
|
|
console.debug(`setting audio track ${i} to disabled`);
|
|
audioTrack.enabled = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
stop(destroyPlayer) {
|
|
const elem = this.#mediaElement;
|
|
const src = this.#currentSrc;
|
|
|
|
if (elem) {
|
|
if (src) {
|
|
elem.pause();
|
|
}
|
|
|
|
onEndedInternal(this, elem, this.onError);
|
|
|
|
if (destroyPlayer) {
|
|
this.destroy();
|
|
}
|
|
}
|
|
|
|
this.destroyCustomTrack(elem);
|
|
|
|
return Promise.resolve();
|
|
}
|
|
|
|
destroy() {
|
|
destroyHlsPlayer(this);
|
|
destroyFlvPlayer(this);
|
|
|
|
appRouter.setTransparency('none');
|
|
|
|
const videoElement = this.#mediaElement;
|
|
|
|
if (videoElement) {
|
|
this.#mediaElement = null;
|
|
|
|
this.destroyCustomTrack(videoElement);
|
|
videoElement.removeEventListener('timeupdate', this.onTimeUpdate);
|
|
videoElement.removeEventListener('ended', this.onEnded);
|
|
videoElement.removeEventListener('volumechange', this.onVolumeChange);
|
|
videoElement.removeEventListener('pause', this.onPause);
|
|
videoElement.removeEventListener('playing', this.onPlaying);
|
|
videoElement.removeEventListener('play', this.onPlay);
|
|
videoElement.removeEventListener('click', this.onClick);
|
|
videoElement.removeEventListener('dblclick', this.onDblClick);
|
|
videoElement.removeEventListener('waiting', this.onWaiting);
|
|
|
|
videoElement.parentNode.removeChild(videoElement);
|
|
}
|
|
|
|
const dlg = this.#videoDialog;
|
|
if (dlg) {
|
|
this.#videoDialog = null;
|
|
dlg.parentNode.removeChild(dlg);
|
|
}
|
|
|
|
if (screenfull.isEnabled) {
|
|
screenfull.exit();
|
|
} else {
|
|
// iOS Safari
|
|
if (document.webkitIsFullScreen && document.webkitCancelFullscreen) {
|
|
document.webkitCancelFullscreen();
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
* @param e {Event} The event received from the `<video>` element
|
|
*/
|
|
onEnded = (e) => {
|
|
/**
|
|
* @type {HTMLMediaElement}
|
|
*/
|
|
const elem = e.target;
|
|
this.destroyCustomTrack(elem);
|
|
onEndedInternal(this, elem, this.onError);
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
* @param e {Event} The event received from the `<video>` element
|
|
*/
|
|
onTimeUpdate = (e) => {
|
|
/**
|
|
* @type {HTMLMediaElement}
|
|
*/
|
|
const elem = e.target;
|
|
// get the player position and the transcoding offset
|
|
const time = elem.currentTime;
|
|
|
|
if (time && !this.#timeUpdated) {
|
|
this.#timeUpdated = true;
|
|
this.ensureValidVideo(elem);
|
|
}
|
|
|
|
this.#currentTime = time;
|
|
|
|
const currentPlayOptions = this._currentPlayOptions;
|
|
// Not sure yet how this is coming up null since we never null it out, but it is causing app crashes
|
|
if (currentPlayOptions) {
|
|
let timeMs = time * 1000;
|
|
timeMs += ((currentPlayOptions.transcodingOffsetTicks || 0) / 10000);
|
|
this.updateSubtitleText(timeMs);
|
|
}
|
|
|
|
events.trigger(this, 'timeupdate');
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
* @param e {Event} The event received from the `<video>` element
|
|
*/
|
|
onVolumeChange = (e) => {
|
|
/**
|
|
* @type {HTMLMediaElement}
|
|
*/
|
|
const elem = e.target;
|
|
saveVolume(elem.volume);
|
|
events.trigger(this, 'volumechange');
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
onNavigatedToOsd = () => {
|
|
const dlg = this.#videoDialog;
|
|
if (dlg) {
|
|
dlg.classList.remove('videoPlayerContainer-onTop');
|
|
|
|
this.onStartedAndNavigatedToOsd();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
onStartedAndNavigatedToOsd() {
|
|
// If this causes a failure during navigation we end up in an awkward UI state
|
|
this.setCurrentTrackElement(this.#subtitleTrackIndexToSetOnPlaying);
|
|
|
|
if (this.#audioTrackIndexToSetOnPlaying != null && this.canSetAudioStreamIndex()) {
|
|
this.setAudioStreamIndex(this.#audioTrackIndexToSetOnPlaying);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
* @param e {Event} The event received from the `<video>` element
|
|
*/
|
|
onPlaying = (e) => {
|
|
/**
|
|
* @type {HTMLMediaElement}
|
|
*/
|
|
const elem = e.target;
|
|
if (!this.#started) {
|
|
this.#started = true;
|
|
elem.removeAttribute('controls');
|
|
|
|
loading.hide();
|
|
|
|
seekOnPlaybackStart(this, e.target, this._currentPlayOptions.playerStartPositionTicks, () => {
|
|
if (this.#currentSubtitlesOctopus) {
|
|
this.#currentSubtitlesOctopus.timeOffset = (this._currentPlayOptions.transcodingOffsetTicks || 0) / 10000000 + this.#currentTrackOffset;
|
|
this.#currentSubtitlesOctopus.resize();
|
|
this.#currentSubtitlesOctopus.resetRenderAheadCache(false);
|
|
}
|
|
});
|
|
|
|
if (this._currentPlayOptions.fullscreen) {
|
|
appRouter.showVideoOsd().then(this.onNavigatedToOsd);
|
|
} else {
|
|
appRouter.setTransparency('backdrop');
|
|
this.#videoDialog.classList.remove('videoPlayerContainer-onTop');
|
|
|
|
this.onStartedAndNavigatedToOsd();
|
|
}
|
|
}
|
|
events.trigger(this, 'playing');
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
onPlay = () => {
|
|
events.trigger(this, 'unpause');
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
ensureValidVideo(elem) {
|
|
if (elem !== this.#mediaElement) {
|
|
return;
|
|
}
|
|
|
|
if (elem.videoWidth === 0 && elem.videoHeight === 0) {
|
|
const mediaSource = (this._currentPlayOptions || {}).mediaSource;
|
|
|
|
// Only trigger this if there is media info
|
|
// Avoid triggering in situations where it might not actually have a video stream (audio only live tv channel)
|
|
if (!mediaSource || mediaSource.RunTimeTicks) {
|
|
onErrorInternal(this, 'mediadecodeerror');
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
onClick = () => {
|
|
events.trigger(this, 'click');
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
onDblClick = () => {
|
|
events.trigger(this, 'dblclick');
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
onPause = () => {
|
|
events.trigger(this, 'pause');
|
|
}
|
|
|
|
onWaiting() {
|
|
events.trigger(this, 'waiting');
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
* @param e {Event} The event received from the `<video>` element
|
|
*/
|
|
onError = (e) => {
|
|
/**
|
|
* @type {HTMLMediaElement}
|
|
*/
|
|
const elem = e.target;
|
|
const errorCode = elem.error ? (elem.error.code || 0) : 0;
|
|
const errorMessage = elem.error ? (elem.error.message || '') : '';
|
|
console.error(`media element error: ${errorCode} ${errorMessage}`);
|
|
|
|
let type;
|
|
|
|
switch (errorCode) {
|
|
case 1:
|
|
// MEDIA_ERR_ABORTED
|
|
// This will trigger when changing media while something is playing
|
|
return;
|
|
case 2:
|
|
// MEDIA_ERR_NETWORK
|
|
type = 'network';
|
|
break;
|
|
case 3:
|
|
// MEDIA_ERR_DECODE
|
|
if (this._hlsPlayer) {
|
|
handleHlsJsMediaError(this);
|
|
return;
|
|
} else {
|
|
type = 'mediadecodeerror';
|
|
}
|
|
break;
|
|
case 4:
|
|
// MEDIA_ERR_SRC_NOT_SUPPORTED
|
|
type = 'medianotsupported';
|
|
break;
|
|
default:
|
|
// seeing cases where Edge is firing error events with no error code
|
|
// example is start playing something, then immediately change src to something else
|
|
return;
|
|
}
|
|
|
|
onErrorInternal(this, type);
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
destroyCustomTrack(videoElement) {
|
|
if (this.#resizeObserver) {
|
|
this.#resizeObserver.disconnect();
|
|
this.#resizeObserver = null;
|
|
}
|
|
|
|
if (this.#videoSubtitlesElem) {
|
|
const subtitlesContainer = this.#videoSubtitlesElem.parentNode;
|
|
if (subtitlesContainer) {
|
|
tryRemoveElement(subtitlesContainer);
|
|
}
|
|
this.#videoSubtitlesElem = null;
|
|
}
|
|
|
|
this.#currentTrackEvents = null;
|
|
|
|
if (videoElement) {
|
|
const allTracks = videoElement.textTracks || []; // get list of tracks
|
|
for (const track of allTracks) {
|
|
if (track.label.includes('manualTrack')) {
|
|
track.mode = 'disabled';
|
|
}
|
|
}
|
|
}
|
|
|
|
this.#customTrackIndex = -1;
|
|
this.#currentClock = null;
|
|
this._currentAspectRatio = null;
|
|
|
|
const octopus = this.#currentSubtitlesOctopus;
|
|
if (octopus) {
|
|
octopus.dispose();
|
|
}
|
|
this.#currentSubtitlesOctopus = null;
|
|
|
|
const renderer = this.#currentAssRenderer;
|
|
if (renderer) {
|
|
renderer.setEnabled(false);
|
|
}
|
|
this.#currentAssRenderer = null;
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
fetchSubtitlesUwp(track) {
|
|
return Windows.Storage.StorageFile.getFileFromPathAsync(track.Path).then(function (storageFile) {
|
|
return Windows.Storage.FileIO.readTextAsync(storageFile);
|
|
}).then(function (text) {
|
|
return JSON.parse(text);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
async fetchSubtitles(track, item) {
|
|
if (window.Windows && itemHelper.isLocalItem(item)) {
|
|
return this.fetchSubtitlesUwp(track, item);
|
|
}
|
|
|
|
this.incrementFetchQueue();
|
|
try {
|
|
const response = await fetch(getTextTrackUrl(track, item, '.js'));
|
|
|
|
if (!response.ok) {
|
|
throw new Error(response);
|
|
}
|
|
|
|
return response.json();
|
|
} finally {
|
|
this.decrementFetchQueue();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
setTrackForDisplay(videoElement, track) {
|
|
if (!track) {
|
|
this.destroyCustomTrack(videoElement);
|
|
return;
|
|
}
|
|
|
|
// skip if already playing this track
|
|
if (this.#customTrackIndex === track.Index) {
|
|
return;
|
|
}
|
|
|
|
this.resetSubtitleOffset();
|
|
const item = this._currentPlayOptions.item;
|
|
|
|
this.destroyCustomTrack(videoElement);
|
|
this.#customTrackIndex = track.Index;
|
|
this.renderTracksEvents(videoElement, track, item);
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
renderSsaAss(videoElement, track, item) {
|
|
const attachments = this._currentPlayOptions.mediaSource.MediaAttachments || [];
|
|
const apiClient = connectionManager.getApiClient(item);
|
|
const htmlVideoPlayer = this;
|
|
const options = {
|
|
video: videoElement,
|
|
subUrl: getTextTrackUrl(track, item),
|
|
fonts: attachments.map(function (i) {
|
|
return apiClient.getUrl(i.DeliveryUrl);
|
|
}),
|
|
workerUrl: `${appRouter.baseUrl()}/libraries/subtitles-octopus-worker.js`,
|
|
legacyWorkerUrl: `${appRouter.baseUrl()}/libraries/subtitles-octopus-worker-legacy.js`,
|
|
onError() {
|
|
onErrorInternal(htmlVideoPlayer, 'mediadecodeerror');
|
|
},
|
|
timeOffset: (this._currentPlayOptions.transcodingOffsetTicks || 0) / 10000000,
|
|
|
|
// new octopus options; override all, even defaults
|
|
renderMode: 'blend',
|
|
dropAllAnimations: false,
|
|
libassMemoryLimit: 40,
|
|
libassGlyphLimit: 40,
|
|
targetFps: 24,
|
|
prescaleTradeoff: 0.8,
|
|
softHeightLimit: 1080,
|
|
hardHeightLimit: 2160,
|
|
resizeVariation: 0.2,
|
|
renderAhead: 90
|
|
};
|
|
import('JavascriptSubtitlesOctopus').then(({default: SubtitlesOctopus}) => {
|
|
this.#currentSubtitlesOctopus = new SubtitlesOctopus(options);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
requiresCustomSubtitlesElement() {
|
|
// after a system update, ps4 isn't showing anything when creating a track element dynamically
|
|
// going to have to do it ourselves
|
|
if (browser.ps4) {
|
|
return true;
|
|
}
|
|
|
|
// This is unfortunate, but we're unable to remove the textTrack that gets added via addTextTrack
|
|
if (browser.firefox || browser.web0s) {
|
|
return true;
|
|
}
|
|
|
|
if (browser.edge) {
|
|
return true;
|
|
}
|
|
|
|
if (browser.iOS) {
|
|
const userAgent = navigator.userAgent.toLowerCase();
|
|
// works in the browser but not the native app
|
|
if ((userAgent.includes('os 9') || userAgent.includes('os 8')) && !userAgent.includes('safari')) {
|
|
return true;
|
|
}
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
renderSubtitlesWithCustomElement(videoElement, track, item) {
|
|
this.fetchSubtitles(track, item).then((data) => {
|
|
if (!this.#videoSubtitlesElem) {
|
|
const subtitlesContainer = document.createElement('div');
|
|
subtitlesContainer.classList.add('videoSubtitles');
|
|
subtitlesContainer.innerHTML = '<div class="videoSubtitlesInner"></div>';
|
|
this.#videoSubtitlesElem = subtitlesContainer.querySelector('.videoSubtitlesInner');
|
|
this.setSubtitleAppearance(subtitlesContainer, this.#videoSubtitlesElem);
|
|
videoElement.parentNode.appendChild(subtitlesContainer);
|
|
this.#currentTrackEvents = data.TrackEvents;
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
setSubtitleAppearance(elem, innerElem) {
|
|
Promise.all([import('userSettings'), import('subtitleAppearanceHelper')]).then(([userSettings, subtitleAppearanceHelper]) => {
|
|
subtitleAppearanceHelper.applyStyles({
|
|
text: innerElem,
|
|
window: elem
|
|
}, userSettings.getSubtitleAppearanceSettings());
|
|
});
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
getCueCss(appearance, selector) {
|
|
return `${selector}::cue {
|
|
${appearance.text.map((s) => `${s.name}:${s.value}!important;`).join('')}
|
|
}`;
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
setCueAppearance() {
|
|
Promise.all([import('userSettings'), import('subtitleAppearanceHelper')]).then(([userSettings, subtitleAppearanceHelper]) => {
|
|
const elementId = `${this.id}-cuestyle`;
|
|
|
|
let styleElem = document.querySelector(`#${elementId}`);
|
|
if (!styleElem) {
|
|
styleElem = document.createElement('style');
|
|
styleElem.id = elementId;
|
|
document.getElementsByTagName('head')[0].appendChild(styleElem);
|
|
}
|
|
|
|
styleElem.innerHTML = this.getCueCss(subtitleAppearanceHelper.getStyles(userSettings.getSubtitleAppearanceSettings(), true), '.htmlvideoplayer');
|
|
});
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
renderTracksEvents(videoElement, track, item) {
|
|
if (!itemHelper.isLocalItem(item) || track.IsExternal) {
|
|
const format = (track.Codec || '').toLowerCase();
|
|
if (format === 'ssa' || format === 'ass') {
|
|
this.renderSsaAss(videoElement, track, item);
|
|
return;
|
|
}
|
|
|
|
if (this.requiresCustomSubtitlesElement()) {
|
|
this.renderSubtitlesWithCustomElement(videoElement, track, item);
|
|
return;
|
|
}
|
|
}
|
|
|
|
let trackElement = null;
|
|
if (videoElement.textTracks && videoElement.textTracks.length > 0) {
|
|
trackElement = videoElement.textTracks[0];
|
|
|
|
// This throws an error in IE, but is fine in chrome
|
|
// In IE it's not necessary anyway because changing the src seems to be enough
|
|
try {
|
|
trackElement.mode = 'showing';
|
|
while (trackElement.cues.length) {
|
|
trackElement.removeCue(trackElement.cues[0]);
|
|
}
|
|
} catch (e) {
|
|
console.error('error removing cue from textTrack');
|
|
}
|
|
|
|
trackElement.mode = 'disabled';
|
|
} else {
|
|
// There is a function addTextTrack but no function for removeTextTrack
|
|
// Therefore we add ONE element and replace its cue data
|
|
trackElement = videoElement.addTextTrack('subtitles', 'manualTrack', 'und');
|
|
}
|
|
|
|
// download the track json
|
|
this.fetchSubtitles(track, item).then(function (data) {
|
|
// show in ui
|
|
console.debug(`downloaded ${data.TrackEvents.length} track events`);
|
|
// add some cues to show the text
|
|
// in safari, the cues need to be added before setting the track mode to showing
|
|
for (const trackEvent of data.TrackEvents) {
|
|
const trackCueObject = window.VTTCue || window.TextTrackCue;
|
|
const cue = new trackCueObject(trackEvent.StartPositionTicks / 10000000, trackEvent.EndPositionTicks / 10000000, normalizeTrackEventText(trackEvent.Text, false));
|
|
|
|
trackElement.addCue(cue);
|
|
}
|
|
trackElement.mode = 'showing';
|
|
});
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
updateSubtitleText(timeMs) {
|
|
const clock = this.#currentClock;
|
|
if (clock) {
|
|
try {
|
|
clock.seek(timeMs / 1000);
|
|
} catch (err) {
|
|
console.error(`error in libjass: ${err}`);
|
|
}
|
|
return;
|
|
}
|
|
|
|
const trackEvents = this.#currentTrackEvents;
|
|
const subtitleTextElement = this.#videoSubtitlesElem;
|
|
|
|
if (trackEvents && subtitleTextElement) {
|
|
const ticks = timeMs * 10000;
|
|
let selectedTrackEvent;
|
|
for (const trackEvent of trackEvents) {
|
|
if (trackEvent.StartPositionTicks <= ticks && trackEvent.EndPositionTicks >= ticks) {
|
|
selectedTrackEvent = trackEvent;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (selectedTrackEvent && selectedTrackEvent.Text) {
|
|
subtitleTextElement.innerHTML = normalizeTrackEventText(selectedTrackEvent.Text, true);
|
|
subtitleTextElement.classList.remove('hide');
|
|
} else {
|
|
subtitleTextElement.classList.add('hide');
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
setCurrentTrackElement(streamIndex) {
|
|
console.debug(`setting new text track index to: ${streamIndex}`);
|
|
|
|
const mediaStreamTextTracks = getMediaStreamTextTracks(this._currentPlayOptions.mediaSource);
|
|
|
|
let track = streamIndex === -1 ? null : mediaStreamTextTracks.filter(function (t) {
|
|
return t.Index === streamIndex;
|
|
})[0];
|
|
|
|
this.setTrackForDisplay(this.#mediaElement, track);
|
|
if (enableNativeTrackSupport(this.#currentSrc, track)) {
|
|
if (streamIndex !== -1) {
|
|
this.setCueAppearance();
|
|
}
|
|
} else {
|
|
// null these out to disable the player's native display (handled below)
|
|
streamIndex = -1;
|
|
track = null;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
createMediaElement(options) {
|
|
const dlg = document.querySelector('.videoPlayerContainer');
|
|
|
|
if (!dlg) {
|
|
return import('css!./style').then(() => {
|
|
loading.show();
|
|
|
|
const dlg = document.createElement('div');
|
|
|
|
dlg.classList.add('videoPlayerContainer');
|
|
|
|
if (options.fullscreen) {
|
|
dlg.classList.add('videoPlayerContainer-onTop');
|
|
}
|
|
|
|
let html = '';
|
|
const cssClass = 'htmlvideoplayer';
|
|
|
|
// Can't autoplay in these browsers so we need to use the full controls, at least until playback starts
|
|
if (!appHost.supports('htmlvideoautoplay')) {
|
|
html += '<video class="' + cssClass + '" preload="metadata" autoplay="autoplay" controls="controls" webkit-playsinline playsinline>';
|
|
} else {
|
|
// Chrome 35 won't play with preload none
|
|
html += '<video class="' + cssClass + '" preload="metadata" autoplay="autoplay" webkit-playsinline playsinline>';
|
|
}
|
|
|
|
html += '</video>';
|
|
|
|
dlg.innerHTML = html;
|
|
const videoElement = dlg.querySelector('video');
|
|
|
|
videoElement.volume = getSavedVolume();
|
|
videoElement.addEventListener('timeupdate', this.onTimeUpdate);
|
|
videoElement.addEventListener('ended', this.onEnded);
|
|
videoElement.addEventListener('volumechange', this.onVolumeChange);
|
|
videoElement.addEventListener('pause', this.onPause);
|
|
videoElement.addEventListener('playing', this.onPlaying);
|
|
videoElement.addEventListener('play', this.onPlay);
|
|
videoElement.addEventListener('click', this.onClick);
|
|
videoElement.addEventListener('dblclick', this.onDblClick);
|
|
videoElement.addEventListener('waiting', this.onWaiting);
|
|
if (options.backdropUrl) {
|
|
videoElement.poster = options.backdropUrl;
|
|
}
|
|
|
|
document.body.insertBefore(dlg, document.body.firstChild);
|
|
this.#videoDialog = dlg;
|
|
this.#mediaElement = videoElement;
|
|
|
|
// don't animate on smart tv's, too slow
|
|
if (options.fullscreen && browser.supportsCssAnimation() && !browser.slow) {
|
|
return zoomIn(dlg).then(function () {
|
|
return videoElement;
|
|
});
|
|
} else {
|
|
hidePrePlaybackPage();
|
|
return videoElement;
|
|
}
|
|
});
|
|
} else {
|
|
return Promise.resolve(dlg.querySelector('video'));
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
canPlayMediaType(mediaType) {
|
|
return (mediaType || '').toLowerCase() === 'video';
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
supportsPlayMethod(playMethod, item) {
|
|
if (appHost.supportsPlayMethod) {
|
|
return appHost.supportsPlayMethod(playMethod, item);
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
getDeviceProfile(item, options) {
|
|
return HtmlVideoPlayer.getDeviceProfileInternal(item, options).then((profile) => {
|
|
this.#lastProfile = profile;
|
|
return profile;
|
|
});
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
static getDeviceProfileInternal(item, options) {
|
|
if (appHost.getDeviceProfile) {
|
|
return appHost.getDeviceProfile(item, options);
|
|
}
|
|
|
|
return getDefaultProfile();
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
static getSupportedFeatures() {
|
|
const list = [];
|
|
|
|
const video = document.createElement('video');
|
|
if (video.webkitSupportsPresentationMode && typeof video.webkitSetPresentationMode === 'function' || document.pictureInPictureEnabled) {
|
|
list.push('PictureInPicture');
|
|
} else if (window.Windows) {
|
|
if (Windows.UI.ViewManagement.ApplicationView.getForCurrentView().isViewModeSupported(Windows.UI.ViewManagement.ApplicationViewMode.compactOverlay)) {
|
|
list.push('PictureInPicture');
|
|
}
|
|
}
|
|
|
|
if (browser.safari || browser.iOS || browser.iPad) {
|
|
list.push('AirPlay');
|
|
}
|
|
|
|
if (typeof video.playbackRate === 'number') {
|
|
list.push('PlaybackRate');
|
|
}
|
|
|
|
list.push('SetBrightness');
|
|
list.push('SetAspectRatio');
|
|
|
|
return list;
|
|
}
|
|
|
|
supports(feature) {
|
|
if (!this.#supportedFeatures) {
|
|
this.#supportedFeatures = HtmlVideoPlayer.getSupportedFeatures();
|
|
}
|
|
|
|
return this.#supportedFeatures.includes(feature);
|
|
}
|
|
|
|
// Save this for when playback stops, because querying the time at that point might return 0
|
|
currentTime(val) {
|
|
const mediaElement = this.#mediaElement;
|
|
if (mediaElement) {
|
|
if (val != null) {
|
|
mediaElement.currentTime = val / 1000;
|
|
return;
|
|
}
|
|
|
|
const currentTime = this.#currentTime;
|
|
if (currentTime) {
|
|
return currentTime * 1000;
|
|
}
|
|
|
|
return (mediaElement.currentTime || 0) * 1000;
|
|
}
|
|
}
|
|
|
|
duration() {
|
|
const mediaElement = this.#mediaElement;
|
|
if (mediaElement) {
|
|
const duration = mediaElement.duration;
|
|
if (isValidDuration(duration)) {
|
|
return duration * 1000;
|
|
}
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
canSetAudioStreamIndex() {
|
|
if (browser.tizen || browser.orsay) {
|
|
return true;
|
|
}
|
|
|
|
const video = this.#mediaElement;
|
|
if (video) {
|
|
if (video.audioTracks) {
|
|
return true;
|
|
}
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
static onPictureInPictureError(err) {
|
|
console.error(`Picture in picture error: ${err}`);
|
|
}
|
|
|
|
setPictureInPictureEnabled(isEnabled) {
|
|
const video = this.#mediaElement;
|
|
|
|
if (document.pictureInPictureEnabled) {
|
|
if (video) {
|
|
if (isEnabled) {
|
|
video.requestPictureInPicture().catch(HtmlVideoPlayer.onPictureInPictureError);
|
|
} else {
|
|
document.exitPictureInPicture().catch(HtmlVideoPlayer.onPictureInPictureError);
|
|
}
|
|
}
|
|
} else if (window.Windows) {
|
|
this.isPip = isEnabled;
|
|
if (isEnabled) {
|
|
Windows.UI.ViewManagement.ApplicationView.getForCurrentView().tryEnterViewModeAsync(Windows.UI.ViewManagement.ApplicationViewMode.compactOverlay);
|
|
} else {
|
|
Windows.UI.ViewManagement.ApplicationView.getForCurrentView().tryEnterViewModeAsync(Windows.UI.ViewManagement.ApplicationViewMode.default);
|
|
}
|
|
} else {
|
|
if (video && video.webkitSupportsPresentationMode && typeof video.webkitSetPresentationMode === 'function') {
|
|
video.webkitSetPresentationMode(isEnabled ? 'picture-in-picture' : 'inline');
|
|
}
|
|
}
|
|
}
|
|
|
|
isPictureInPictureEnabled() {
|
|
if (document.pictureInPictureEnabled) {
|
|
return !!document.pictureInPictureElement;
|
|
} else if (window.Windows) {
|
|
return this.isPip || false;
|
|
} else {
|
|
const video = this.#mediaElement;
|
|
if (video) {
|
|
return video.webkitPresentationMode === 'picture-in-picture';
|
|
}
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
static isAirPlayEnabled() {
|
|
if (document.AirPlayEnabled) {
|
|
return !!document.AirplayElement;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
setAirPlayEnabled(isEnabled) {
|
|
const video = this.#mediaElement;
|
|
|
|
if (document.AirPlayEnabled) {
|
|
if (video) {
|
|
if (isEnabled) {
|
|
video.requestAirPlay().catch(function(err) {
|
|
console.error('Error requesting AirPlay', err);
|
|
});
|
|
} else {
|
|
document.exitAirPLay().catch(function(err) {
|
|
console.error('Error exiting AirPlay', err);
|
|
});
|
|
}
|
|
}
|
|
} else {
|
|
video.webkitShowPlaybackTargetPicker();
|
|
}
|
|
}
|
|
|
|
setBrightness(val) {
|
|
const elem = this.#mediaElement;
|
|
|
|
if (elem) {
|
|
val = Math.max(0, val);
|
|
val = Math.min(100, val);
|
|
|
|
let rawValue = val;
|
|
rawValue = Math.max(20, rawValue);
|
|
|
|
const cssValue = rawValue >= 100 ? 'none' : (rawValue / 100);
|
|
elem.style['-webkit-filter'] = `brightness(${cssValue})`;
|
|
elem.style.filter = `brightness(${cssValue})`;
|
|
elem.brightnessValue = val;
|
|
events.trigger(this, 'brightnesschange');
|
|
}
|
|
}
|
|
|
|
getBrightness() {
|
|
const elem = this.#mediaElement;
|
|
if (elem) {
|
|
const val = elem.brightnessValue;
|
|
return val == null ? 100 : val;
|
|
}
|
|
}
|
|
|
|
seekable() {
|
|
const mediaElement = this.#mediaElement;
|
|
if (mediaElement) {
|
|
const seekable = mediaElement.seekable;
|
|
if (seekable && seekable.length) {
|
|
let start = seekable.start(0);
|
|
let end = seekable.end(0);
|
|
|
|
if (!isValidDuration(start)) {
|
|
start = 0;
|
|
}
|
|
if (!isValidDuration(end)) {
|
|
end = 0;
|
|
}
|
|
|
|
return (end - start) > 0;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
}
|
|
|
|
pause() {
|
|
const mediaElement = this.#mediaElement;
|
|
if (mediaElement) {
|
|
mediaElement.pause();
|
|
}
|
|
}
|
|
|
|
// This is a retry after error
|
|
resume() {
|
|
const mediaElement = this.#mediaElement;
|
|
if (mediaElement) {
|
|
mediaElement.play();
|
|
}
|
|
}
|
|
|
|
unpause() {
|
|
const mediaElement = this.#mediaElement;
|
|
if (mediaElement) {
|
|
mediaElement.play();
|
|
}
|
|
}
|
|
|
|
paused() {
|
|
const mediaElement = this.#mediaElement;
|
|
if (mediaElement) {
|
|
return mediaElement.paused;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
setPlaybackRate(value) {
|
|
const mediaElement = this.#mediaElement;
|
|
if (mediaElement) {
|
|
mediaElement.playbackRate = value;
|
|
}
|
|
}
|
|
|
|
getPlaybackRate() {
|
|
const mediaElement = this.#mediaElement;
|
|
if (mediaElement) {
|
|
return mediaElement.playbackRate;
|
|
}
|
|
return null;
|
|
}
|
|
|
|
setVolume(val) {
|
|
const mediaElement = this.#mediaElement;
|
|
if (mediaElement) {
|
|
mediaElement.volume = val / 100;
|
|
}
|
|
}
|
|
|
|
getVolume() {
|
|
const mediaElement = this.#mediaElement;
|
|
if (mediaElement) {
|
|
return Math.min(Math.round(mediaElement.volume * 100), 100);
|
|
}
|
|
}
|
|
|
|
volumeUp() {
|
|
this.setVolume(Math.min(this.getVolume() + 2, 100));
|
|
}
|
|
|
|
volumeDown() {
|
|
this.setVolume(Math.max(this.getVolume() - 2, 0));
|
|
}
|
|
|
|
setMute(mute) {
|
|
const mediaElement = this.#mediaElement;
|
|
if (mediaElement) {
|
|
mediaElement.muted = mute;
|
|
}
|
|
}
|
|
|
|
isMuted() {
|
|
const mediaElement = this.#mediaElement;
|
|
if (mediaElement) {
|
|
return mediaElement.muted;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
setAspectRatio(val) {
|
|
const mediaElement = this.#mediaElement;
|
|
if (mediaElement) {
|
|
if (val === 'auto') {
|
|
mediaElement.style.removeProperty('object-fit');
|
|
} else {
|
|
mediaElement.style['object-fit'] = val;
|
|
}
|
|
}
|
|
this._currentAspectRatio = val;
|
|
}
|
|
|
|
getAspectRatio() {
|
|
return this._currentAspectRatio || 'auto';
|
|
}
|
|
|
|
getSupportedAspectRatios() {
|
|
return [{
|
|
name: 'Auto',
|
|
id: 'auto'
|
|
}, {
|
|
name: 'Cover',
|
|
id: 'cover'
|
|
}, {
|
|
name: 'Fill',
|
|
id: 'fill'
|
|
}];
|
|
}
|
|
|
|
togglePictureInPicture() {
|
|
return this.setPictureInPictureEnabled(!this.isPictureInPictureEnabled());
|
|
}
|
|
|
|
toggleAirPlay() {
|
|
return this.setAirPlayEnabled(!this.isAirPlayEnabled());
|
|
}
|
|
|
|
getBufferedRanges() {
|
|
const mediaElement = this.#mediaElement;
|
|
if (mediaElement) {
|
|
return getBufferedRanges(this, mediaElement);
|
|
}
|
|
|
|
return [];
|
|
}
|
|
|
|
getStats() {
|
|
const mediaElement = this.#mediaElement;
|
|
const playOptions = this._currentPlayOptions || [];
|
|
|
|
const categories = [];
|
|
|
|
if (!mediaElement) {
|
|
return Promise.resolve({
|
|
categories: categories
|
|
});
|
|
}
|
|
|
|
const mediaCategory = {
|
|
stats: [],
|
|
type: 'media'
|
|
};
|
|
categories.push(mediaCategory);
|
|
|
|
if (playOptions.url) {
|
|
// create an anchor element (note: no need to append this element to the document)
|
|
let link = document.createElement('a');
|
|
// set href to any path
|
|
link.setAttribute('href', playOptions.url);
|
|
const protocol = (link.protocol || '').replace(':', '');
|
|
|
|
if (protocol) {
|
|
mediaCategory.stats.push({
|
|
label: globalize.translate('LabelProtocol'),
|
|
value: protocol
|
|
});
|
|
}
|
|
|
|
link = null;
|
|
}
|
|
|
|
if (this._hlsPlayer) {
|
|
mediaCategory.stats.push({
|
|
label: globalize.translate('LabelStreamType'),
|
|
value: 'HLS'
|
|
});
|
|
} else {
|
|
mediaCategory.stats.push({
|
|
label: globalize.translate('LabelStreamType'),
|
|
value: 'Video'
|
|
});
|
|
}
|
|
|
|
const videoCategory = {
|
|
stats: [],
|
|
type: 'video'
|
|
};
|
|
categories.push(videoCategory);
|
|
|
|
const rect = mediaElement.getBoundingClientRect ? mediaElement.getBoundingClientRect() : {};
|
|
let height = parseInt(rect.height);
|
|
let width = parseInt(rect.width);
|
|
|
|
// Don't show player dimensions on smart TVs because the app UI could be lower resolution than the video and this causes users to think there is a problem
|
|
if (width && height && !browser.tv) {
|
|
videoCategory.stats.push({
|
|
label: globalize.translate('LabelPlayerDimensions'),
|
|
value: `${width}x${height}`
|
|
});
|
|
}
|
|
|
|
height = mediaElement.videoHeight;
|
|
width = mediaElement.videoWidth;
|
|
|
|
if (width && height) {
|
|
videoCategory.stats.push({
|
|
label: globalize.translate('LabelVideoResolution'),
|
|
value: `${width}x${height}`
|
|
});
|
|
}
|
|
|
|
if (mediaElement.getVideoPlaybackQuality) {
|
|
const playbackQuality = mediaElement.getVideoPlaybackQuality();
|
|
|
|
const droppedVideoFrames = playbackQuality.droppedVideoFrames || 0;
|
|
videoCategory.stats.push({
|
|
label: globalize.translate('LabelDroppedFrames'),
|
|
value: droppedVideoFrames
|
|
});
|
|
|
|
const corruptedVideoFrames = playbackQuality.corruptedVideoFrames || 0;
|
|
videoCategory.stats.push({
|
|
label: globalize.translate('LabelCorruptedFrames'),
|
|
value: corruptedVideoFrames
|
|
});
|
|
}
|
|
|
|
const audioCategory = {
|
|
stats: [],
|
|
type: 'audio'
|
|
};
|
|
categories.push(audioCategory);
|
|
|
|
const sinkId = mediaElement.sinkId;
|
|
if (sinkId) {
|
|
audioCategory.stats.push({
|
|
label: 'Sink Id:',
|
|
value: sinkId
|
|
});
|
|
}
|
|
|
|
return Promise.resolve({
|
|
categories: categories
|
|
});
|
|
}
|
|
}
|
|
/* eslint-enable indent */
|
|
|
|
export default HtmlVideoPlayer;
|