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

made playback progress bar wider on larger screens

Browse source
This commit is contained in:
Luke Pulverenti 2013-07-16 17:55:50 -04:00
parent 4bd529a78a
commit a276d5521c
2 changed files with 50 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -272,9 +272,9 @@ form, .readOnlyContent {
color: #fff!important; color: #fff!important;
} }
.invalidEntry { .invalidEntry {
background-color: lightpink!important; background-color: lightpink!important;
} }
/* Tabs (e.g. advanced metadata page) */ /* Tabs (e.g. advanced metadata page) */
.localnav { .localnav {
@ -714,23 +714,23 @@ progress {
border-top: 2px solid #D7742B; border-top: 2px solid #D7742B;
} }
#nowPlayingBar .highPosition { #nowPlayingBar .highPosition {
z-index: 99999; z-index: 99999;
position: relative; position: relative;
} }
#nowPlayingBar .barBackground { #nowPlayingBar .barBackground {
border-top: 2px solid #D7742B; border-top: 2px solid #D7742B;
background: #4C4C4C; background: #4C4C4C;
position: absolute; position: absolute;
margin: -8px -0.5em !important; margin: -8px -0.5em !important;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
#nowPlayingBar > *:not(#mediaElement):not(.mediaFlyoutContainer) { #nowPlayingBar > *:not(#mediaElement):not(.mediaFlyoutContainer) {
margin: 0 1em; margin: 0 1em;
} }
.nowPlayingBarImage { .nowPlayingBarImage {
border: 1px solid #a7a7a7!important; border: 1px solid #a7a7a7!important;
@ -989,6 +989,16 @@ input[type="range"]::-ms-fill-upper {
display: inline-block; display: inline-block;
} }
@media (min-width: 750px) {
.installedPluginTitle {
max-width: 110px;
}
.itemVideo:not(.fullscreenVideo) {
width: 320px;
}
}
@media (min-width: 1200px) { @media (min-width: 1200px) {
.installedPluginTitle { .installedPluginTitle {
max-width: 110px; max-width: 110px;
@ -1007,6 +1017,14 @@ input[type="range"]::-ms-fill-upper {
.itemVideo:not(.fullscreenVideo) { .itemVideo:not(.fullscreenVideo) {
width: 400px; width: 400px;
} }
.positionSlider {
width: 400px;
}
.itemVideo {
left: -560px;
}
} }
#editItemMetadataPage #txtOverview { #editItemMetadataPage #txtOverview {

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

@ -31,7 +31,7 @@
if (requestMethod) { // Native full screen. if (requestMethod) { // Native full screen.
requestMethod.call(element); requestMethod.call(element);
} else{ } else {
$('.itemVideo').addClass('fullscreenVideo'); $('.itemVideo').addClass('fullscreenVideo');
} }
} }
@ -89,7 +89,7 @@
ApiClient.reportPlaybackStopped(Dashboard.getCurrentUserId(), currentItem.Id, position); ApiClient.reportPlaybackStopped(Dashboard.getCurrentUserId(), currentItem.Id, position);
} }
function playNextAfterEnded() { function playNextAfterEnded() {
$(this).off('ended.playnext'); $(this).off('ended.playnext');
@ -159,7 +159,7 @@
$(element).off('ended.playbackstopped').off('ended.playnext').on("play.onceafterseek", function () { $(element).off('ended.playbackstopped').off('ended.playnext').on("play.onceafterseek", function () {
$(this).off('play.onceafterseek').on('ended.playbackstopped', onPlaybackStopped).on('ended.playnext', playNextAfterEnded); $(this).off('play.onceafterseek').on('ended.playbackstopped', onPlaybackStopped).on('ended.playnext', playNextAfterEnded);
startProgressInterval(currentItem.Id); startProgressInterval(currentItem.Id);
sendProgressUpdate(currentItem.Id); sendProgressUpdate(currentItem.Id);
@ -695,7 +695,7 @@
return null; return null;
} }
function idleHandler() { function idleHandler() {
var nowPlayingBar = $("#nowPlayingBar"); var nowPlayingBar = $("#nowPlayingBar");
if (timeout) { if (timeout) {
@ -710,7 +710,7 @@
$(".mediaButton,.currentTime,.nowPlayingMediaInfo,.mediaSlider,.barBackground", nowPlayingBar).removeClass("highPosition"); $(".mediaButton,.currentTime,.nowPlayingMediaInfo,.mediaSlider,.barBackground", nowPlayingBar).removeClass("highPosition");
}, 4000); }, 4000);
} }
self.canPlay = function (item) { self.canPlay = function (item) {
if (item.Type == "MusicAlbum" || item.Type == "MusicArtist") { if (item.Type == "MusicAlbum" || item.Type == "MusicArtist") {
@ -788,7 +788,7 @@
self.playWithWarning = function (items, startPosition, user, localStorageKeyName, header) { self.playWithWarning = function (items, startPosition, user, localStorageKeyName, header) {
localStorageKeyName += new Date().getMonth(); localStorageKeyName += new Date().getMonth();
if (localStorage.getItem(localStorageKeyName) == "1") { if (localStorage.getItem(localStorageKeyName) == "1") {
self.playInternal(items[0], startPosition, user); self.playInternal(items[0], startPosition, user);
@ -834,7 +834,7 @@
if (item == null) { if (item == null) {
throw new Error("item cannot be null"); throw new Error("item cannot be null");
} }
if (self.isPlaying()) { if (self.isPlaying()) {
self.stop(); self.stop();
} }
@ -951,7 +951,7 @@
}; };
self.toggleFullscreen = function () { self.toggleFullscreen = function () {
$('.itemVideo').unbind('mousemove keydown scroll', idleHandler); $('.itemVideo').unbind('mousemove keydown scroll', idleHandler);
if (isFullScreen()) { if (isFullScreen()) {
if (document.cancelFullScreen) { document.cancelFullScreen(); } if (document.cancelFullScreen) { document.cancelFullScreen(); }
@ -996,11 +996,13 @@
var newIndex = currentPlaylistIndex + 1; var newIndex = currentPlaylistIndex + 1;
var newItem = self.playlist[newIndex]; var newItem = self.playlist[newIndex];
Dashboard.getCurrentUser().done(function (user) { if (newItem) {
Dashboard.getCurrentUser().done(function (user) {
self.playInternal(newItem, 0, user); self.playInternal(newItem, 0, user);
currentPlaylistIndex = newIndex; currentPlaylistIndex = newIndex;
}); });
}
}; };
self.queueItem = function (item) { self.queueItem = function (item) {