mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update video osd
This commit is contained in:
parent
84679843fe
commit
93ae2c18db
10 changed files with 123 additions and 39 deletions
|
@ -14,12 +14,12 @@
|
|||
},
|
||||
"devDependencies": {},
|
||||
"ignore": [],
|
||||
"version": "1.4.457",
|
||||
"_release": "1.4.457",
|
||||
"version": "1.4.458",
|
||||
"_release": "1.4.458",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "1.4.457",
|
||||
"commit": "a5034b1f89c9097d2ca2849fe987ac5aa1c360d0"
|
||||
"tag": "1.4.458",
|
||||
"commit": "122cc814d3faca2afd6ebc3b406016e382e0b026"
|
||||
},
|
||||
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
|
||||
"_target": "^1.2.1",
|
||||
|
|
|
@ -370,6 +370,16 @@ define(['browser'], function (browser) {
|
|||
|
||||
profile.TranscodingProfiles = [];
|
||||
|
||||
if (canPlayNativeHls() && browser.iOS) {
|
||||
profile.TranscodingProfiles.push({
|
||||
Container: 'ts',
|
||||
Type: 'Audio',
|
||||
AudioCodec: 'aac',
|
||||
Context: 'Streaming',
|
||||
Protocol: 'hls'
|
||||
});
|
||||
}
|
||||
|
||||
['opus', 'mp3', 'aac', 'wav'].filter(canPlayAudioFormat).forEach(function (audioFormat) {
|
||||
|
||||
profile.TranscodingProfiles.push({
|
||||
|
@ -435,7 +445,6 @@ define(['browser'], function (browser) {
|
|||
}
|
||||
|
||||
if (canPlayWebm) {
|
||||
|
||||
profile.TranscodingProfiles.push({
|
||||
Container: 'webm',
|
||||
Type: 'Video',
|
||||
|
|
|
@ -73,15 +73,35 @@ define(['events', 'browser', 'pluginManager', 'apphost', 'appSettings'], functio
|
|||
|
||||
currentSrc = val;
|
||||
|
||||
// Chrome now returns a promise
|
||||
var promise = elem.play();
|
||||
|
||||
if (promise && promise.then) {
|
||||
return promise;
|
||||
}
|
||||
return Promise.resolve();
|
||||
return playWithPromise(elem);
|
||||
};
|
||||
|
||||
function playWithPromise(elem) {
|
||||
|
||||
try {
|
||||
var promise = elem.play();
|
||||
if (promise && promise.then) {
|
||||
// Chrome now returns a promise
|
||||
return promise.catch(function (e) {
|
||||
|
||||
var errorName = (e.name || '').toLowerCase();
|
||||
// safari uses aborterror
|
||||
if (errorName === 'notallowederror' ||
|
||||
errorName === 'aborterror') {
|
||||
// swallow this error because the user can still click the play button on the video element
|
||||
return Promise.resolve();
|
||||
}
|
||||
return Promise.reject();
|
||||
});
|
||||
} else {
|
||||
return Promise.resolve();
|
||||
}
|
||||
} catch (err) {
|
||||
console.log('error calling video.play: ' + err);
|
||||
return Promise.reject();
|
||||
}
|
||||
}
|
||||
|
||||
function getCrossOriginValue(mediaSource) {
|
||||
|
||||
return 'anonymous';
|
||||
|
|
|
@ -17,7 +17,6 @@ define(['browser', 'pluginManager', 'events', 'apphost', 'loading', 'playbackMan
|
|||
var currentSrc;
|
||||
var started = false;
|
||||
var hlsPlayer;
|
||||
var enableCustomControls;
|
||||
|
||||
var winJsPlaybackItem;
|
||||
var currentPlayOptions;
|
||||
|
@ -63,7 +62,6 @@ define(['browser', 'pluginManager', 'events', 'apphost', 'loading', 'playbackMan
|
|||
var enableMkvProgressive = (item.RunTimeTicks && browser.edgeUwp) ? true : false;
|
||||
|
||||
return {
|
||||
supportsCustomSeeking: appHost.supports('htmlvideoautoplay'),
|
||||
enableMkvProgressive: enableMkvProgressive,
|
||||
disableHlsVideoAudioCodecs: disableHlsVideoAudioCodecs
|
||||
};
|
||||
|
@ -76,7 +74,6 @@ define(['browser', 'pluginManager', 'events', 'apphost', 'loading', 'playbackMan
|
|||
require(['browserdeviceprofile', 'environments/windows-uwp/mediacaps'], function (profileBuilder, uwpMediaCaps) {
|
||||
|
||||
var profileOptions = getBaseProfileOptions(item);
|
||||
profileOptions.supportsCustomSeeking = true;
|
||||
profileOptions.supportsDts = uwpMediaCaps.supportsDTS();
|
||||
profileOptions.supportsTrueHd = uwpMediaCaps.supportsDolby();
|
||||
profileOptions.audioChannels = uwpMediaCaps.getAudioChannels();
|
||||
|
@ -130,6 +127,52 @@ define(['browser', 'pluginManager', 'events', 'apphost', 'loading', 'playbackMan
|
|||
});
|
||||
};
|
||||
|
||||
var supportedFeatures;
|
||||
function getSupportedFeatures() {
|
||||
|
||||
var list = [];
|
||||
|
||||
var video = document.createElement('video');
|
||||
if (video.webkitSupportsPresentationMode && video.webkitSupportsPresentationMode('picture-in-picture') && typeof video.webkitSetPresentationMode === "function") {
|
||||
list.push('pictureinpicture');
|
||||
}
|
||||
|
||||
return list;
|
||||
}
|
||||
|
||||
self.supports = function (feature) {
|
||||
|
||||
if (!supportedFeatures) {
|
||||
supportedFeatures = getSupportedFeatures();
|
||||
}
|
||||
|
||||
return supportedFeatures.indexOf(feature) !== -1;
|
||||
};
|
||||
|
||||
self.togglePictureInPicture = function () {
|
||||
return self.setPictureInPictureEnabled(!self.isPictureInPictureEnabled());
|
||||
};
|
||||
|
||||
self.setPictureInPictureEnabled = function (isEnabled) {
|
||||
|
||||
var video = mediaElement;
|
||||
if (video) {
|
||||
if (video.webkitSupportsPresentationMode && typeof video.webkitSetPresentationMode === "function") {
|
||||
video.webkitSetPresentationMode(isEnabled ? "picture-in-picture" : "inline");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
self.isPictureInPictureEnabled = function (isEnabled) {
|
||||
|
||||
var video = mediaElement;
|
||||
if (video) {
|
||||
return video.webkitPresentationMode === "picture-in-picture";
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
function getCrossOriginValue(mediaSource) {
|
||||
|
||||
return 'anonymous';
|
||||
|
@ -619,9 +662,7 @@ define(['browser', 'pluginManager', 'events', 'apphost', 'loading', 'playbackMan
|
|||
|
||||
setCurrentTrackElement(subtitleTrackIndexToSetOnPlaying);
|
||||
|
||||
if (enableCustomControls) {
|
||||
this.removeAttribute('controls');
|
||||
}
|
||||
|
||||
seekOnPlaybackStart(e.target);
|
||||
|
||||
|
@ -766,15 +807,6 @@ define(['browser', 'pluginManager', 'events', 'apphost', 'loading', 'playbackMan
|
|||
return false;
|
||||
}
|
||||
|
||||
function enableCustomVideoControls() {
|
||||
|
||||
if (browser.ipad) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
function setTracks(elem, tracks, mediaSource, serverId) {
|
||||
|
||||
elem.innerHTML = getTracksHtml(tracks, mediaSource, serverId);
|
||||
|
@ -1186,8 +1218,6 @@ define(['browser', 'pluginManager', 'events', 'apphost', 'loading', 'playbackMan
|
|||
|
||||
loading.show();
|
||||
|
||||
enableCustomControls = enableCustomVideoControls();
|
||||
|
||||
var dlg = document.createElement('div');
|
||||
|
||||
dlg.classList.add('videoPlayerContainer');
|
||||
|
@ -1206,8 +1236,8 @@ define(['browser', 'pluginManager', 'events', 'apphost', 'loading', 'playbackMan
|
|||
// https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html
|
||||
|
||||
var html = '';
|
||||
// Can't autoplay in these browsers so we need to use the full controls
|
||||
if (!enableCustomControls || !appHost.supports('htmlvideoautoplay')) {
|
||||
// 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="htmlvideoplayer" preload="metadata" autoplay="autoplay" controls="controls" webkit-playsinline playsinline>';
|
||||
} else {
|
||||
|
||||
|
|
|
@ -208,6 +208,10 @@ define(['events', 'datetime', 'appSettings', 'pluginManager', 'userSettings', 'g
|
|||
list.push('ToggleFullscreen');
|
||||
}
|
||||
|
||||
if (player.supports && player.supports('pictureinpicture')) {
|
||||
list.push('PictureInPicture');
|
||||
}
|
||||
|
||||
return list;
|
||||
}
|
||||
|
||||
|
@ -744,6 +748,11 @@ define(['events', 'datetime', 'appSettings', 'pluginManager', 'userSettings', 'g
|
|||
}
|
||||
};
|
||||
|
||||
self.togglePictureInPicture = function (player) {
|
||||
player = player || currentPlayer;
|
||||
return player.togglePictureInPicture();
|
||||
};
|
||||
|
||||
self.getSubtitleStreamIndex = function (player) {
|
||||
|
||||
player = player || currentPlayer;
|
||||
|
@ -2369,7 +2378,7 @@ define(['events', 'datetime', 'appSettings', 'pluginManager', 'userSettings', 'g
|
|||
startProgressInterval(player);
|
||||
|
||||
events.trigger(player, 'playbackstart', [state]);
|
||||
events.trigger(self, 'playbackstart', [player]);
|
||||
events.trigger(self, 'playbackstart', [player, state]);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
@ -560,6 +560,10 @@
|
|||
|
||||
imageLoader.lazyImage(nowPlayingImageElement, url);
|
||||
|
||||
userdataButtons.destroy({
|
||||
element: nowPlayingUserData
|
||||
});
|
||||
|
||||
if (nowPlayingItem.Id) {
|
||||
ApiClient.getItem(Dashboard.getCurrentUserId(), nowPlayingItem.Id).then(function (item) {
|
||||
userdataButtons.fill({
|
||||
|
@ -568,10 +572,6 @@
|
|||
element: nowPlayingUserData
|
||||
});
|
||||
});
|
||||
} else {
|
||||
userdataButtons.destroy({
|
||||
element: nowPlayingUserData
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -2384,11 +2384,12 @@ var AppInfo = {};
|
|||
list.push('bower_components/emby-webcomponents/htmlaudioplayer/plugin');
|
||||
|
||||
} else {
|
||||
|
||||
// use vlc player
|
||||
list.push('cordova/vlcplayer');
|
||||
window.VlcAudio = true;
|
||||
}
|
||||
|
||||
// Needed for video
|
||||
list.push('cordova/vlcplayer');
|
||||
|
||||
} else if (Dashboard.isRunningInCordova() && browser.safari) {
|
||||
list.push('cordova/audioplayer');
|
||||
} else {
|
||||
|
@ -2535,6 +2536,7 @@ var AppInfo = {};
|
|||
} else if (browserInfo.safari) {
|
||||
|
||||
postInitDependencies.push('cordova/volume');
|
||||
postInitDependencies.push('cordova/statusbar');
|
||||
postInitDependencies.push('cordova/chromecast');
|
||||
postInitDependencies.push('cordova/orientation');
|
||||
postInitDependencies.push('cordova/remotecontrols');
|
||||
|
|
|
@ -448,6 +448,10 @@
|
|||
playbackManager.toggleFullscreen(currentPlayer);
|
||||
});
|
||||
|
||||
view.querySelector('.btnPip').addEventListener('click', function () {
|
||||
playbackManager.togglePictureInPicture(currentPlayer);
|
||||
});
|
||||
|
||||
view.querySelector('.btnSettings').addEventListener('click', onSettingsButtonClick);
|
||||
|
||||
function onPlayerChange() {
|
||||
|
@ -652,6 +656,12 @@
|
|||
view.querySelector('.btnFullscreen').classList.remove('hide');
|
||||
}
|
||||
|
||||
if (supportedCommands.indexOf('PictureInPicture') === -1) {
|
||||
view.querySelector('.btnPip').classList.add('hide');
|
||||
} else {
|
||||
view.querySelector('.btnPip').classList.remove('hide');
|
||||
}
|
||||
|
||||
updateFullscreenIcon();
|
||||
}
|
||||
|
||||
|
|
|
@ -596,6 +596,7 @@
|
|||
"Rewind": "Rewind",
|
||||
"Fullscreen": "Full screen",
|
||||
"ExitFullscreen": "Exit full screen",
|
||||
"PictureInPicture": "Picture in picture",
|
||||
"PlayOnAnotherDevice": "Play on another device",
|
||||
"FastForward": "Fast-forward",
|
||||
"ButtonTakeScreenshot": "Capture Screenshot",
|
||||
|
|
|
@ -234,6 +234,9 @@
|
|||
<button is="paper-icon-button-light" class="btnFullscreen hide autoSize" title="${Fullscreen}">
|
||||
<i class="xlargePaperIconButton md-icon"></i>
|
||||
</button>
|
||||
<button is="paper-icon-button-light" class="btnPip hide autoSize" title="${PictureInPicture}">
|
||||
<i class="xlargePaperIconButton md-icon"></i>
|
||||
</button>
|
||||
|
||||
<div class="osdTimeText"><span class="osdPositionText"></span><span class="osdDurationText"></span><span class="endsAtText"></span></div>
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue