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

Video player fixes

Browse source 
Mobile playback fixed - video no longer hidden by default and unhidden
on playing
Footer notifications fixed
This commit is contained in:
Tim Hobbs 2014-03-17 15:37:05 -07:00
parent 941824a5fb
commit 96e64c4f1f
5 changed files with 79 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

18
dashboard-ui/css/mediaplayer.css
View file

@ -254,8 +254,20 @@ input[type="range"]::-ms-fill-upper {
display: none; /* display and visibility only */
}
@media all and (max-width: 1200px) {
.volumeSliderContainer, .sendMediaButton {
display: none!important;
}
}
@media all and (max-width: 960px) {
.volumeSliderContainer, .audioTracksButton, .chaptersButton, .sendMediaButton {
display: none!important;
}
}
@media all and (max-width: 800px) {
.volumeButton, .volumeSliderContainer, .muteButton, .unmuteButton, .nowPlayingMediaInfo {
.volumeButton, .volumeSliderContainer, .muteButton, .unmuteButton, .nowPlayingMediaInfo, .sendMediaButton {
display: none!important;
}
}
@ -264,10 +276,8 @@ input[type="range"]::-ms-fill-upper {
.positionSliderContainer {
width: 80px;
}
}
@media all and (max-width: 600px) {
.chaptersButton, .audioTracksButton, .sendMediaButton {
.chaptersButton, .audioTracksButton, .qualityButton, .subtitleButton {
display: none!important;
}

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

@ -692,7 +692,7 @@ h1 .imageLink {
.footerNotification {
text-shadow: none;
padding: .75em 1em;
padding: 0 1em .75em;
margin: 0;
font-weight: normal;
border-top: 1px solid #555;

45
dashboard-ui/scripts/mediaplayer-video.js
View file

@ -41,13 +41,26 @@
};
self.resetEnhancements = function () {
var footer = $("#footer");
var videoBackdrop = $("#videoBackdrop", footer);
var mediaElement = $("#mediaElement", videoBackdrop);
var nowPlayingBar = $("#nowPlayingBar", videoBackdrop);
var mediaPlayer = $("#mediaPlayer", footer);
var mediaElement = $("#mediaElement", mediaPlayer);
var nowPlayingBar = $("#nowPlayingBar", mediaPlayer);
mediaElement.html(""); // remove play/pause
footer.hide().append(mediaElement).append(nowPlayingBar);
videoBackdrop.remove();
mediaPlayer.hide().append(nowPlayingBar); // put elements back where they belong
$("#videoBackdrop", footer).hide();
if ($("#footerNotifications", footer).html() == "") { // only hide footer if no notifications
footer.hide();
}
};
self.exitFullScreen = function () {
@ -216,16 +229,14 @@
var play = $("<div id='play' class='status'></div>");
var pause = $("<div id='pause' class='status'></div>");
mediaElement.append(play).append(pause);
var videoBackdrop = $("<div id='videoBackdrop'></div>");
var videoPlayer = $("<div id='videoPlayer'></div>")
.append(mediaElement)
.append(nowPlayingBar);
$("#videoBackdrop", footer).show();
videoPlayer.hide();
videoBackdrop.append(videoPlayer);
footer.append(videoBackdrop);
var videoPlayer = $("#videoPlayer", footer)
//.hide()
.append(nowPlayingBar);
// Stop playback on browser back button nav
$(window).on("popstate", function () {
@ -270,13 +281,13 @@
$("html").css("cursor", "progress");
})
.on("playing", function (e) {
.on("canplay", function () {
$(".ui-loader").hide();
$("html").css("cursor", "default");
videoPlayer.fadeIn();
//videoPlayer.fadeIn();
checkAspectRatio();
@ -319,8 +330,6 @@
}
});
video.play();
fullscreenExited = false;
};
@ -885,9 +894,9 @@
// Can't autoplay in these browsers so we need to use the full controls
if (requiresControls) {
html += '<video class="itemVideo" autoplay controls preload="none">';
html += '<video class="itemVideo" id="itemVideo" autoplay controls preload="none">';
} else {
html += '<video class="itemVideo" autoplay preload="none">';
html += '<video class="itemVideo" id="itemVideo" autoplay preload="none">';
}
if (!isStatic) {

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

@ -231,8 +231,6 @@
self.volumeSlider = $('.volumeSlider').on('slidestop', function () {
console.log("slidestop");
var vol = this.value;
self.updateVolumeButtons(vol);
@ -658,6 +656,8 @@
var mediaElement;
$("#mediaPlayer").show();
if (item.MediaType === "Video") {
videoPlayer(self, item, startPosition, user);
@ -741,10 +741,6 @@
nowPlayingText = (seriesName ? seriesName : "") + "\n" + (name || "---");
}
console.log("name", name);
console.log("seriesName", seriesName);
console.log("nowPlayingText", nowPlayingText);
// Fix for apostrophes and quotes
var htmlTitle = trimTitle(nowPlayingText).replace(/'/g, '&apos;').replace(/"/g, '&quot;');
html += "<div><a href='" + href + "'><img class='nowPlayingBarImage' alt='" + htmlTitle +
@ -1125,22 +1121,24 @@
elem.pause();
$(elem).off('ended.playnext').on('ended', function () {
$(elem).off("ended.playnext").on("ended", function () {
$(this).remove();
elem.src = "";
currentMediaElement = null;
}).trigger('ended');
}).trigger("ended");
var footer = $('#footer');
footer.hide();
$("#mediaPlayer").hide();
if (currentItem.MediaType == "Video") {
if (self.isFullScreen()) {
self.exitFullScreen();
}
self.resetEnhancements();
} else {
var footer = $("#footer");
footer.hide();
}
};

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

@ -292,7 +292,9 @@ var Dashboard = {
options.id = options.id || "notification" + new Date().getTime() + parseInt(Math.random());
var parentElem = $('#footerNotifications');
var footer = $("#footer").show();
var parentElem = $('#footerNotifications', footer);
var elem = $('#' + options.id, parentElem);
@ -300,7 +302,7 @@ var Dashboard = {
elem = $('<p id="' + options.id + '" class="footerNotification"></p>').appendTo(parentElem);
}
var onclick = removeOnHide ? "$(\"#" + options.id + "\").remove();" : "$(\"#" + options.id + "\").hide();";
var onclick = removeOnHide ? "$(\"#" + options.id + "\").trigger(\"notification.remove\").remove();" : "$(\"#" + options.id + "\").trigger(\"notification.hide\").hide();";
if (options.allowHide !== false) {
options.html += "<span style='margin-left: 1em;'><button type='button' onclick='" + onclick + "' data-icon='delete' data-iconpos='notext' data-mini='true' data-inline='true' data-theme='b'>Hide</button></span>";
@ -310,20 +312,29 @@ var Dashboard = {
elem.show();
}
elem.html(options.html).trigger('create');
elem.html(options.html).trigger("create");
if (options.timeout) {
setTimeout(function () {
if (removeOnHide) {
elem.remove();
elem.trigger("notification.remove").remove();
} else {
elem.hide();
elem.trigger("notification.hide").hide();
}
}, options.timeout);
}
footer.on("notification.remove notification.hide", function (e) {
setTimeout(function () { // give the DOM time to catch up
console.log("html", parentElem.html() == "", this);
if (parentElem.html() == "") {
footer.slideUp();
}
}, 50);
});
},
getConfigurationPageUrl: function (name) {
@ -1306,10 +1317,20 @@ $(ApiClient).on("websocketmessage", Dashboard.onWebSocketMessageReceived);
$(function () {
var footerHtml = '<div id="footer" data-theme="b" class="ui-bar-b" style="display: none;">';
footerHtml += '<div id="mediaPlayer" style="display: none;">';
footerHtml += '<div id="videoBackdrop" style="display: none;">';
footerHtml += '<div id="videoPlayer">';
footerHtml += '<div id="mediaElement"></div>';
footerHtml += '</div>';
footerHtml += '</div>';
footerHtml += '<div id="nowPlayingBar" class="nowPlayingBar">';
footerHtml += '<div class="barBackground ui-bar-b">';
footerHtml += '<div style="display:inline-block;width:12px;"></div>';
footerHtml += '<a id="playlistButton" class="mediaButton playlistButton" href="playlist.html" data-role="button" data-icon="bullets" data-iconpos="notext" data-inline="true" title="Playlist">Playlist</a>';
footerHtml += '<button id="previousTrackButton" class="mediaButton previousTrackButton" title="Previous Track" type="button" onclick="MediaPlayer.previousTrack();" data-icon="previous-track" data-iconpos="notext" data-inline="true">Previous Track</button>';
@ -1351,10 +1372,12 @@ $(function () {
footerHtml += '</div>';
footerHtml += '<div id="footerNotifications"></div>';
footerHtml += '</div>';
footerHtml += '</div>';
footerHtml += '<div id="footerNotifications"></div>';
footerHtml += '</div>';
$(document.body).append(footerHtml);