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

close #380 - display video controls on fullscreen

Browse source
This commit is contained in:
Luis Miguel Almánzar 2013-07-09 22:00:13 -04:00
parent 40c734f088
commit 98c1b53937
3 changed files with 39 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

19
dashboard-ui/css/site.css
View file

@ -710,10 +710,23 @@ progress {
border-top: 2px solid #D7742B; border-top: 2px solid #D7742B;
} }
#nowPlayingBar .highPosition {
z-index: 99999;
position: relative;
}
#nowPlayingBar > *:not(#mediaElement):not(.mediaFlyoutContainer) { #nowPlayingBar .barBackground {
margin: 0 1em; border-top: 2px solid #D7742B;
} background: #4C4C4C;
position: absolute;
margin: -8px -0.5em !important;
width: 100%;
height: 100%;
}
#nowPlayingBar > *:not(#mediaElement):not(.mediaFlyoutContainer) {
margin: 0 1em;
}
.nowPlayingBarImage { .nowPlayingBarImage {
border: 1px solid #a7a7a7!important; border: 1px solid #a7a7a7!important;

24
dashboard-ui/scripts/mediaplayer.js
View file

@ -19,6 +19,8 @@
var curentDurationTicks; var curentDurationTicks;
var isStaticStream; var isStaticStream;
var culturesPromise; var culturesPromise;
var timeout;
var idleState = true;
self.playlist = []; self.playlist = [];
var currentPlaylistIndex = 0; var currentPlaylistIndex = 0;
@ -687,7 +689,22 @@
return null; return null;
} }
function idleHandler() {
var nowPlayingBar = $("#nowPlayingBar");
if (timeout) {
window.clearTimeout(timeout);
}
if (idleState == true) {
$(".mediaButton,.currentTime,.nowPlayingMediaInfo,.mediaSlider,.barBackground", nowPlayingBar).addClass("highPosition");
}
idleState = false;
timeout = window.setTimeout(function () {
idleState = true;
$(".mediaButton,.currentTime,.nowPlayingMediaInfo,.mediaSlider,.barBackground", nowPlayingBar).removeClass("highPosition");
}, 4000);
}
self.canPlay = function (item) { self.canPlay = function (item) {
if (item.Type == "MusicAlbum" || item.Type == "MusicArtist") { if (item.Type == "MusicAlbum" || item.Type == "MusicArtist") {
@ -924,7 +941,8 @@
}; };
self.toggleFullscreen = function () { self.toggleFullscreen = function () {
$('.itemVideo').unbind('mousemove keydown scroll', idleHandler);
if (isFullScreen()) { if (isFullScreen()) {
if (document.cancelFullScreen) { document.cancelFullScreen(); } if (document.cancelFullScreen) { document.cancelFullScreen(); }
else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); }
@ -935,6 +953,8 @@
} }
} else { } else {
idleState = true;
$('.itemVideo').bind('mousemove keydown scroll', idleHandler).trigger('mousemove');
requestFullScreen(document.body); requestFullScreen(document.body);
} }
}; };

1
dashboard-ui/scripts/site.js
View file

@ -1054,6 +1054,7 @@ $(function () {
var footerHtml = '<div id="footer" class="ui-bar-a">'; var footerHtml = '<div id="footer" class="ui-bar-a">';
footerHtml += '<div id="nowPlayingBar" style="display:none;">'; footerHtml += '<div id="nowPlayingBar" style="display:none;">';
footerHtml += '<div class="barBackground"></div>';
footerHtml += '<a id="playlistButton" class="imageButton mediaButton" href="playlist.html"><img src="css/images/media/playlist.png" /></a>'; footerHtml += '<a id="playlistButton" class="imageButton mediaButton" href="playlist.html"><img src="css/images/media/playlist.png" /></a>';
footerHtml += '<button id="previousTrackButton" class="imageButton mediaButton" title="Previous Track" type="button"><img src="css/images/media/previoustrack.png" /></button>'; footerHtml += '<button id="previousTrackButton" class="imageButton mediaButton" title="Previous Track" type="button"><img src="css/images/media/previoustrack.png" /></button>';
footerHtml += '<button id="playButton" class="imageButton mediaButton" title="Play" type="button" onclick="MediaPlayer.unpause();"><img src="css/images/media/play.png" /></button>'; footerHtml += '<button id="playButton" class="imageButton mediaButton" title="Play" type="button" onclick="MediaPlayer.unpause();"><img src="css/images/media/play.png" /></button>';