1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

add fullscreen button

This commit is contained in:
Luke Pulverenti 2017-01-04 16:25:15 -05:00
parent 5516e8b168
commit fa50a882d3
3 changed files with 30 additions and 1 deletions

View file

@ -38,5 +38,14 @@ define([], function () {
return document.fullscreen || document.mozFullScreen || document.webkitIsFullScreen || document.msFullscreenElement ? true : false; return document.fullscreen || document.mozFullScreen || document.webkitIsFullScreen || document.msFullscreenElement ? true : false;
}; };
fullscreenManager.prototype.toggleFullscreen = function () {
if (this.isFullScreen()) {
this.exitFullscreen();
} else {
this.requestFullscreen();
}
};
return new fullscreenManager(); return new fullscreenManager();
}); });

View file

@ -1,4 +1,4 @@
define(['playbackManager', 'dom', 'inputmanager', 'datetime', 'itemHelper', 'mediaInfo', 'focusManager', 'imageLoader', 'scrollHelper', 'events', 'connectionManager', 'browser', 'globalize', 'apphost', 'scrollStyles', 'emby-slider'], function (playbackManager, dom, inputManager, datetime, itemHelper, mediaInfo, focusManager, imageLoader, scrollHelper, events, connectionManager, browser, globalize, appHost) { define(['playbackManager', 'dom', 'inputmanager', 'datetime', 'itemHelper', 'mediaInfo', 'focusManager', 'imageLoader', 'scrollHelper', 'events', 'connectionManager', 'browser', 'globalize', 'apphost', 'fullscreenManager', 'scrollStyles', 'emby-slider'], function (playbackManager, dom, inputManager, datetime, itemHelper, mediaInfo, focusManager, imageLoader, scrollHelper, events, connectionManager, browser, globalize, appHost, fullscreenManager) {
'use strict'; 'use strict';
function seriesImageUrl(item, options) { function seriesImageUrl(item, options) {
@ -378,6 +378,14 @@
} }
} }
function updateFullscreenIcon() {
if (fullscreenManager.isFullScreen()) {
view.querySelector('.btnFullscreen i').innerHTML = '';
} else {
view.querySelector('.btnFullscreen i').innerHTML = '';
}
}
view.addEventListener('viewbeforeshow', function (e) { view.addEventListener('viewbeforeshow', function (e) {
getHeaderElement().classList.add('osdHeader'); getHeaderElement().classList.add('osdHeader');
@ -395,6 +403,7 @@
showOsd(); showOsd();
inputManager.on(window, onInputCommand); inputManager.on(window, onInputCommand);
updateFullscreenIcon();
}); });
view.addEventListener('viewbeforehide', function () { view.addEventListener('viewbeforehide', function () {
@ -412,6 +421,10 @@
view.querySelector('.btnCast').classList.remove('hide'); view.querySelector('.btnCast').classList.remove('hide');
} }
if (appHost.supports('fullscreenchange')) {
view.querySelector('.btnFullscreen').classList.remove('hide');
}
view.querySelector('.btnCast').addEventListener('click', function () { view.querySelector('.btnCast').addEventListener('click', function () {
var btn = this; var btn = this;
require(['playerSelectionMenu'], function (playerSelectionMenu) { require(['playerSelectionMenu'], function (playerSelectionMenu) {
@ -419,6 +432,10 @@
}); });
}); });
view.querySelector('.btnFullscreen').addEventListener('click', function () {
fullscreenManager.toggleFullscreen();
});
view.querySelector('.btnSettings').addEventListener('click', onSettingsButtonClick); view.querySelector('.btnSettings').addEventListener('click', onSettingsButtonClick);
function onPlayerChange() { function onPlayerChange() {

View file

@ -210,6 +210,9 @@
<button is="paper-icon-button-light" class="btnSettings hide autoSize"> <button is="paper-icon-button-light" class="btnSettings hide autoSize">
<i class="largePaperIconButton md-icon">&#xE8B8;</i> <i class="largePaperIconButton md-icon">&#xE8B8;</i>
</button> </button>
<button is="paper-icon-button-light" class="btnFullscreen hide autoSize">
<i class="xlargePaperIconButton md-icon">&#xE5D0;</i>
</button>
<div class="osdTimeText"><span class="osdPositionText"></span><span class="osdDurationText"></span><span class="endsAtText"></span></div> <div class="osdTimeText"><span class="osdPositionText"></span><span class="osdDurationText"></span><span class="endsAtText"></span></div>