mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
add short overview
This commit is contained in:
parent
bb5f0a002b
commit
d01c2a0ba9
7 changed files with 43 additions and 32 deletions
|
@ -15,9 +15,7 @@
|
||||||
|
|
||||||
#videoPlayer {
|
#videoPlayer {
|
||||||
z-index: 99997;
|
z-index: 99997;
|
||||||
background-color: #1d1d1d;
|
|
||||||
position: fixed;
|
position: fixed;
|
||||||
border: 1px solid #333;
|
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
margin-left: -170px;
|
margin-left: -170px;
|
||||||
|
@ -26,20 +24,21 @@
|
||||||
|
|
||||||
.itemVideo {
|
.itemVideo {
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
margin: 5px 5px 75px;
|
margin: 0 0 70px;
|
||||||
width: 320px;
|
width: 320px;
|
||||||
height: 181px;
|
height: 181px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#videoControls {
|
#videoControls {
|
||||||
z-index: 99999;
|
z-index: 99999;
|
||||||
padding: 0 5px 5px;
|
padding: 0 5px 0;
|
||||||
height: 75px;
|
height: 75px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: auto;
|
top: auto;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
background-color: #222;
|
||||||
}
|
}
|
||||||
|
|
||||||
#videoControls .positionSliderContainer .ui-slider-track {
|
#videoControls .positionSliderContainer .ui-slider-track {
|
||||||
|
|
|
@ -44,7 +44,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div data-role="popup" class="ui-content popupSubtitleViewer" data-history="false">
|
<div data-role="popup" class="ui-content popupSubtitleViewer">
|
||||||
<a href="#" data-rel="back" data-role="button" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
|
<a href="#" data-rel="back" data-role="button" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
|
||||||
<div class="subtitleViewerContent">
|
<div class="subtitleViewerContent">
|
||||||
<pre class="subtitleContent" style="margin: 0; border-radius: 0;"></pre>
|
<pre class="subtitleContent" style="margin: 0; border-radius: 0;"></pre>
|
||||||
|
|
|
@ -128,11 +128,11 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div data-role="popup" id="popupAudioTrackMenu" data-history="false" data-transition="flip">
|
<div data-role="popup" id="popupAudioTrackMenu" data-transition="flip">
|
||||||
<div class="trackList"></div>
|
<div class="trackList"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div data-role="popup" id="popupSubtitleTrackMenu" data-history="false" data-transition="flip">
|
<div data-role="popup" id="popupSubtitleTrackMenu" data-transition="flip">
|
||||||
<div class="trackList"></div>
|
<div class="trackList"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -45,9 +45,7 @@
|
||||||
|
|
||||||
Dashboard.getCurrentUser().done(function (user) {
|
Dashboard.getCurrentUser().done(function (user) {
|
||||||
|
|
||||||
var imageHref = user.Configuration.IsAdministrator ? "edititemimages.html?id=" + item.Id : "";
|
renderImage(page, item, user);
|
||||||
|
|
||||||
$('#itemImage', page).html(LibraryBrowser.getDetailImageHtml(item, imageHref));
|
|
||||||
|
|
||||||
setInitialCollapsibleState(page, item, context, user);
|
setInitialCollapsibleState(page, item, context, user);
|
||||||
renderDetails(page, item, context);
|
renderDetails(page, item, context);
|
||||||
|
@ -141,6 +139,13 @@
|
||||||
Dashboard.hideLoadingMsg();
|
Dashboard.hideLoadingMsg();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function renderImage(page, item, user) {
|
||||||
|
|
||||||
|
var imageHref = user.Configuration.IsAdministrator ? "edititemimages.html?id=" + item.Id : "";
|
||||||
|
|
||||||
|
$('#itemImage', page).html(LibraryBrowser.getDetailImageHtml(item, imageHref));
|
||||||
|
}
|
||||||
|
|
||||||
function onWebSocketMessage(e, data) {
|
function onWebSocketMessage(e, data) {
|
||||||
|
|
||||||
var msg = data;
|
var msg = data;
|
||||||
|
@ -158,8 +163,14 @@
|
||||||
})[0];
|
})[0];
|
||||||
|
|
||||||
if (userData) {
|
if (userData) {
|
||||||
|
|
||||||
currentItem.UserData = userData;
|
currentItem.UserData = userData;
|
||||||
renderUserDataIcons(page, currentItem);
|
renderUserDataIcons(page, currentItem);
|
||||||
|
|
||||||
|
Dashboard.getCurrentUser().done(function (user) {
|
||||||
|
|
||||||
|
renderImage(page, currentItem, user);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -879,6 +890,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderUserDataIcons(page, item) {
|
function renderUserDataIcons(page, item) {
|
||||||
|
|
||||||
$('.userDataIcons', page).html(LibraryBrowser.getUserDataIconsHtml(item));
|
$('.userDataIcons', page).html(LibraryBrowser.getUserDataIconsHtml(item));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -301,10 +301,10 @@
|
||||||
|
|
||||||
$('.playFlyout').popup("close").remove();
|
$('.playFlyout').popup("close").remove();
|
||||||
|
|
||||||
var html = '<div data-role="popup" class="playFlyout" style="max-width:300px;" data-theme="a" data-history="false">';
|
var html = '<div data-role="popup" class="playFlyout" data-transition="fade" data-history="false">';
|
||||||
|
|
||||||
html += '<ul data-role="listview" style="min-width: 150px;">';
|
html += '<ul data-role="listview" style="min-width: 180px;">';
|
||||||
html += '<li data-role="list-divider" data-theme="b">Play Menu</li>';
|
html += '<li data-role="list-divider">Play Menu</li>';
|
||||||
|
|
||||||
html += '<li><a href="#" onclick="MediaController.play(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">Play</a></li>';
|
html += '<li><a href="#" onclick="MediaController.play(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">Play</a></li>';
|
||||||
|
|
||||||
|
@ -334,7 +334,7 @@
|
||||||
|
|
||||||
$(this).off("popupafterclose").remove();
|
$(this).off("popupafterclose").remove();
|
||||||
|
|
||||||
}).parents(".ui-popup-container").css("margin-left", 100).css("margin-top", 35);
|
}).parents(".ui-popup-container").css("margin-left", 55);
|
||||||
},
|
},
|
||||||
|
|
||||||
closePlayMenu: function () {
|
closePlayMenu: function () {
|
||||||
|
|
|
@ -104,13 +104,15 @@
|
||||||
|
|
||||||
self.showQualityFlyout = function () {
|
self.showQualityFlyout = function () {
|
||||||
|
|
||||||
var flyout = $('#video-qualityFlyout');
|
var flyout = $('.video-qualityFlyout');
|
||||||
|
|
||||||
if (!flyout.is(':visible')) {
|
if (!flyout.is(':visible')) {
|
||||||
flyout.html(getQualityFlyoutHtml()).scrollTop(0);
|
flyout.html(getQualityFlyoutHtml()).scrollTop(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
toggleFlyout(flyout, '#video-qualityButton');
|
toggleFlyout(flyout, '.video-qualityButton');
|
||||||
|
|
||||||
|
//$('.videoQualityPopup').html(getQualityFlyoutHtml()).trigger('create').popup('open');
|
||||||
};
|
};
|
||||||
|
|
||||||
self.showChaptersFlyout = function () {
|
self.showChaptersFlyout = function () {
|
||||||
|
@ -311,7 +313,7 @@
|
||||||
hideFlyout($('#video-subtitleFlyout'));
|
hideFlyout($('#video-subtitleFlyout'));
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#video-qualityFlyout').on('click', '.mediaFlyoutOption', function () {
|
$('.video-qualityFlyout').on('click', '.mediaFlyoutOption', function () {
|
||||||
|
|
||||||
if (!$(this).hasClass('selectedMediaFlyoutOption')) {
|
if (!$(this).hasClass('selectedMediaFlyoutOption')) {
|
||||||
|
|
||||||
|
@ -327,7 +329,7 @@
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
hideFlyout($('#video-qualityFlyout'));
|
hideFlyout($('.video-qualityFlyout'));
|
||||||
});
|
});
|
||||||
|
|
||||||
var trackChange = false;
|
var trackChange = false;
|
||||||
|
@ -359,12 +361,9 @@
|
||||||
tooltip.remove();
|
tooltip.remove();
|
||||||
});
|
});
|
||||||
|
|
||||||
$(".mediaFlyoutContainer").on("click", "a", function (e) {
|
$('.video-qualityButton').on('click', function () {
|
||||||
if (confirm("This option will close the video player. Proceed?")) {
|
|
||||||
self.stop();
|
self.showQualityFlyout();
|
||||||
} else {
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -1003,7 +1002,7 @@
|
||||||
|
|
||||||
var videoElement = $('#videoElement', mediaPlayerContainer).prepend(html);
|
var videoElement = $('#videoElement', mediaPlayerContainer).prepend(html);
|
||||||
|
|
||||||
$('#video-qualityButton', videoControls).show();
|
$('.video-qualityButton', videoControls).show();
|
||||||
|
|
||||||
if (mediaStreams.filter(function (s) {
|
if (mediaStreams.filter(function (s) {
|
||||||
return s.Type == "Audio";
|
return s.Type == "Audio";
|
||||||
|
|
|
@ -1250,17 +1250,18 @@ $(function () {
|
||||||
videoPlayerHtml += '</div>'; // video-basic-controls
|
videoPlayerHtml += '</div>'; // video-basic-controls
|
||||||
videoPlayerHtml += '<div id="video-advanced-controls">';
|
videoPlayerHtml += '<div id="video-advanced-controls">';
|
||||||
|
|
||||||
videoPlayerHtml += '<button onclick="MediaPlayer.showQualityFlyout();" id="video-qualityButton" class="mediaButton qualityButton" title="Quality" type="button" data-icon="gear" data-iconpos="notext" data-inline="true">Quality</button>';
|
videoPlayerHtml += '<button class="mediaButton video-qualityButton" title="Quality" type="button" data-icon="gear" data-iconpos="notext" data-inline="true">Quality</button>';
|
||||||
videoPlayerHtml += '<div class="mediaFlyoutContainer"><div id="video-qualityFlyout" style="display:none;" class="mediaPlayerFlyout"></div></div>';
|
//videoPlayerHtml += '<div data-role="popup" class="videoQualityPopup videoPlayerPopup" data-transition="flip"></div>';
|
||||||
|
videoPlayerHtml += '<div style="display:none;" id="video-qualityFlyout" class="video-qualityFlyout mediaPlayerFlyout"></div>';
|
||||||
|
|
||||||
videoPlayerHtml += '<button onclick="MediaPlayer.showAudioTracksFlyout();" id="video-audioTracksButton" class="imageButton mediaButton audioTracksButton" title="Audio tracks" type="button" data-icon="audiocd" data-iconpos="notext" data-inline="true">Audio Tracks</button>';
|
videoPlayerHtml += '<button onclick="MediaPlayer.showAudioTracksFlyout();" id="video-audioTracksButton" class="imageButton mediaButton audioTracksButton" title="Audio tracks" type="button" data-icon="audiocd" data-iconpos="notext" data-inline="true">Audio Tracks</button>';
|
||||||
videoPlayerHtml += '<div class="mediaFlyoutContainer"><div id="video-audioTracksFlyout" style="display:none;" class="mediaPlayerFlyout audioTracksFlyout"></div></div>';
|
videoPlayerHtml += '<div id="video-audioTracksFlyout" style="display:none;" class="mediaPlayerFlyout audioTracksFlyout"></div>';
|
||||||
|
|
||||||
videoPlayerHtml += '<button onclick="MediaPlayer.showSubtitleMenu();" id="video-subtitleButton" class="imageButton mediaButton subtitleButton" title="Subtitles" type="button" data-icon="subtitles" data-iconpos="notext" data-inline="true">Subtitles</button>';
|
videoPlayerHtml += '<button onclick="MediaPlayer.showSubtitleMenu();" id="video-subtitleButton" class="imageButton mediaButton subtitleButton" title="Subtitles" type="button" data-icon="subtitles" data-iconpos="notext" data-inline="true">Subtitles</button>';
|
||||||
videoPlayerHtml += '<div class="mediaFlyoutContainer"><div id="video-subtitleFlyout" style="display:none;" class="mediaPlayerFlyout subtitleFlyout"></div></div>';
|
videoPlayerHtml += '<div id="video-subtitleFlyout" style="display:none;" class="mediaPlayerFlyout subtitleFlyout"></div>';
|
||||||
|
|
||||||
videoPlayerHtml += '<button onclick="MediaPlayer.showChaptersFlyout();" id="video-chaptersButton" class="mediaButton chaptersButton" title="Scenes" type="button" data-icon="video" data-iconpos="notext" data-inline="true">Scenes</button>';
|
videoPlayerHtml += '<button onclick="MediaPlayer.showChaptersFlyout();" id="video-chaptersButton" class="mediaButton chaptersButton" title="Scenes" type="button" data-icon="video" data-iconpos="notext" data-inline="true">Scenes</button>';
|
||||||
videoPlayerHtml += '<div class="mediaFlyoutContainer"><div id="video-chaptersFlyout" style="display:none;" class="mediaPlayerFlyout chaptersFlyout"></div></div>';
|
videoPlayerHtml += '<div id="video-chaptersFlyout" style="display:none;" class="mediaPlayerFlyout chaptersFlyout"></div>';
|
||||||
|
|
||||||
videoPlayerHtml += '<button onclick="MediaPlayer.toggleFullscreen();" id="video-fullscreenButton" class="mediaButton fullscreenButton" title="Fullscreen" type="button" data-icon="expand" data-iconpos="notext" data-inline="true">Fullscreen</button>';
|
videoPlayerHtml += '<button onclick="MediaPlayer.toggleFullscreen();" id="video-fullscreenButton" class="mediaButton fullscreenButton" title="Fullscreen" type="button" data-icon="expand" data-iconpos="notext" data-inline="true">Fullscreen</button>';
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue