mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
item details chapters populated, gallery lightbox
This commit is contained in:
Techywarrior
parent
f286bd8242
commit
5460bb3507
3 changed files with 137 additions and 21 deletions
|
|
@ -849,6 +849,7 @@ progress {
|
|||
width: auto;
|
||||
white-space: nowrap;
|
||||
font-size: 1.1em;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
@media all and (min-width: 650px) {
|
||||
|
|
|
|||
|
|
@ -40,9 +40,20 @@
|
|||
|
||||
ItemDetailPage.renderImage(item);
|
||||
ItemDetailPage.renderOverviewBlock(item);
|
||||
ItemDetailPage.renderScenes(item);
|
||||
ItemDetailPage.renderMediaInfo(item);
|
||||
|
||||
if (item.BackdropImageTags || item.ImageTags.Logo || item.ImageTags.Thumb || item.ImageTags.Menu || item.ImageTags.Disc || item.ImageTags.Art || item.ImageTags.Box) {
|
||||
ItemDetailPage.renderGallery(item);
|
||||
}else {
|
||||
$('#galleryCollapsible', page).remove();
|
||||
}
|
||||
|
||||
if (!item.Chapters || !item.Chapters.length) {
|
||||
$('#scenesCollapsible', page).remove();
|
||||
}else {
|
||||
ItemDetailPage.renderScenes(item);
|
||||
}
|
||||
|
||||
$('#itemName', page).html(name);
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
|
|
@ -248,31 +259,66 @@
|
|||
return html;
|
||||
},
|
||||
|
||||
onScenesExpand: function() {
|
||||
|
||||
if (ItemDetailPage.item) {
|
||||
|
||||
ItemDetailPage.renderScenes(ItemDetailPage.item);
|
||||
|
||||
$(this).off('expand', ItemDetailPage.onScenesExpand);
|
||||
}
|
||||
},
|
||||
|
||||
renderScenes: function (item) {
|
||||
|
||||
var html = '';
|
||||
|
||||
var page = $.mobile.activePage;
|
||||
var chapters = item.Chapters || {};
|
||||
|
||||
if (!item.Chapters || !item.Chapters.length) {
|
||||
$('#scenesCollapsible', page).hide();
|
||||
$('#scenesContent', page).html(html);
|
||||
return;
|
||||
}
|
||||
for (var i = 0, length = chapters.length; i < length; i++) {
|
||||
|
||||
for (var i = 0, length = item.Chapters.length; i < length; i++) {
|
||||
var chapter = chapters[i];
|
||||
var chapter_name = chapter.Name || "Chapter "+i;
|
||||
|
||||
var chapter = item.Chapters[i];
|
||||
html += '<div class="posterViewItem posterViewItemWithDualText">';
|
||||
html += '<a href="#play-Chapter-' + i + '" onclick="ItemDetailPage.play('+chapter.StartPositionTicks+');">';
|
||||
|
||||
if (chapter.ImageTag) {
|
||||
|
||||
var imgUrl = ApiClient.getImageUrl(item.Id, {
|
||||
width: 500,
|
||||
tag: chapter.ImageTag,
|
||||
type: "Chapter",
|
||||
index: i
|
||||
});
|
||||
|
||||
html += '<img src="' + imgUrl + '" />';
|
||||
} else {
|
||||
html += '<img src="css/images/itemDetails/videoDefault.png"/>';
|
||||
}
|
||||
|
||||
html += '<div class="posterViewItemText posterViewItemPrimaryText">' + chapter_name + '</div>';
|
||||
html += '<div class="posterViewItemText">';
|
||||
|
||||
if (chapter.StartPositionTicks != "") {
|
||||
html += ticks_to_human(chapter.StartPositionTicks);
|
||||
}
|
||||
else {
|
||||
html += " ";
|
||||
}
|
||||
html += '</div>';
|
||||
|
||||
html += '</a>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
}
|
||||
|
||||
$('#scenesCollapsible', page).show();
|
||||
$('#scenesContent', page).html(html);
|
||||
},
|
||||
|
||||
play: function () {
|
||||
MediaPlayer.play([ItemDetailPage.item]);
|
||||
play: function (startPosition) {
|
||||
MediaPlayer.play([ItemDetailPage.item], startPosition);
|
||||
},
|
||||
|
||||
onGalleryExpand: function() {
|
||||
|
|
@ -288,76 +334,143 @@
|
|||
renderGallery: function (item) {
|
||||
|
||||
var page = $.mobile.activePage;
|
||||
|
||||
var imageTags = item.ImageTags || {};
|
||||
|
||||
var html = '';
|
||||
|
||||
var downloadWidth = 400;
|
||||
var lightboxWidth = 800;
|
||||
|
||||
if (imageTags.Logo) {
|
||||
|
||||
html += '<a href="#pop'+item.ImageTags.Logo+'" data-transition="fade" data-rel="popup" data-position-to="window">';
|
||||
html += '<img class="galleryImage" src="' + ApiClient.getImageUrl(item.Id, {
|
||||
type: "Logo",
|
||||
width: downloadWidth,
|
||||
tag: item.ImageTags.Logo
|
||||
}) + '" />';
|
||||
html += '<div class="galleryPopup" id="pop'+item.ImageTags.Logo+'" data-role="popup" data-theme="d" data-corners="false" data-overlay-theme="a">';
|
||||
html += '<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>';
|
||||
html += '<img class="" src="' + ApiClient.getImageUrl(item.Id, {
|
||||
type: "Logo",
|
||||
width: lightboxWidth,
|
||||
tag: item.ImageTags.Logo
|
||||
}) + '" />';
|
||||
html += '</div>';
|
||||
}
|
||||
if (imageTags.Thumb) {
|
||||
|
||||
html += '<a href="#pop'+item.ImageTags.Thumb+'" data-transition="fade" data-rel="popup" data-position-to="window">';
|
||||
html += '<img class="galleryImage" src="' + ApiClient.getImageUrl(item.Id, {
|
||||
type: "Thumb",
|
||||
width: downloadWidth,
|
||||
tag: item.ImageTags.Thumb
|
||||
}) + '" />';
|
||||
html += '<div class="galleryPopup" id="pop'+item.ImageTags.Thumb+'" data-role="popup" data-theme="d" data-corners="false" data-overlay-theme="a">';
|
||||
html += '<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>';
|
||||
html += '<img class="" src="' + ApiClient.getImageUrl(item.Id, {
|
||||
type: "Thumb",
|
||||
width: lightboxWidth,
|
||||
tag: item.ImageTags.Thumb
|
||||
}) + '" />';
|
||||
html += '</div>';
|
||||
}
|
||||
if (imageTags.Art) {
|
||||
|
||||
html += '<a href="#pop'+item.ImageTags.Art+'" data-transition="fade" data-rel="popup" data-position-to="window">';
|
||||
html += '<img class="galleryImage" src="' + ApiClient.getImageUrl(item.Id, {
|
||||
type: "Art",
|
||||
width: downloadWidth,
|
||||
tag: item.ImageTags.Art
|
||||
}) + '" />';
|
||||
html += '<div class="galleryPopup" id="pop'+item.ImageTags.Art+'" data-role="popup" data-theme="d" data-corners="false" data-overlay-theme="a">';
|
||||
html += '<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>';
|
||||
html += '<img class="" src="' + ApiClient.getImageUrl(item.Id, {
|
||||
type: "Art",
|
||||
width: lightboxWidth,
|
||||
tag: item.ImageTags.Art
|
||||
}) + '" />';
|
||||
html += '</div>';
|
||||
|
||||
}
|
||||
if (imageTags.Menu) {
|
||||
|
||||
html += '<a href="#pop'+item.ImageTags.Menu+'" data-transition="fade" data-rel="popup" data-position-to="window">';
|
||||
html += '<img class="galleryImage" src="' + ApiClient.getImageUrl(item.Id, {
|
||||
type: "Menu",
|
||||
width: downloadWidth,
|
||||
tag: item.ImageTags.Menu
|
||||
}) + '" />';
|
||||
html += '<div class="galleryPopup" id="pop'+item.ImageTags.Menu+'" data-role="popup" data-theme="d" data-corners="false" data-overlay-theme="a">';
|
||||
html += '<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>';
|
||||
html += '<img class="" src="' + ApiClient.getImageUrl(item.Id, {
|
||||
type: "Menu",
|
||||
width: lightboxWidth,
|
||||
tag: item.ImageTags.Menu
|
||||
}) + '" />';
|
||||
html += '</div>';
|
||||
|
||||
}
|
||||
if (imageTags.Disc) {
|
||||
|
||||
html += '<a href="#pop'+item.ImageTags.Disc+'" data-transition="fade" data-rel="popup" data-position-to="window">';
|
||||
html += '<img class="galleryImage" src="' + ApiClient.getImageUrl(item.Id, {
|
||||
type: "Disc",
|
||||
width: downloadWidth,
|
||||
tag: item.ImageTags.Disc
|
||||
}) + '" />';
|
||||
html += '<div class="galleryPopup" id="pop'+item.ImageTags.Disc+'" data-role="popup" data-theme="d" data-corners="false" data-overlay-theme="a">';
|
||||
html += '<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>';
|
||||
html += '<img class="" src="' + ApiClient.getImageUrl(item.Id, {
|
||||
type: "Disc",
|
||||
width: lightboxWidth,
|
||||
tag: item.ImageTags.Disc
|
||||
}) + '" />';
|
||||
html += '</div>';
|
||||
}
|
||||
if (imageTags.Box) {
|
||||
|
||||
html += '<a href="#pop'+item.ImageTags.Box+'" data-transition="fade" data-rel="popup" data-position-to="window">';
|
||||
html += '<img class="galleryImage" src="' + ApiClient.getImageUrl(item.Id, {
|
||||
type: "Box",
|
||||
width: downloadWidth,
|
||||
tag: item.ImageTags.Box
|
||||
}) + '" />';
|
||||
html += '<div class="galleryPopup" id="pop'+item.ImageTags.Box+'" data-role="popup" data-theme="d" data-corners="false" data-overlay-theme="a">';
|
||||
html += '<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>';
|
||||
html += '<img class="" src="' + ApiClient.getImageUrl(item.Id, {
|
||||
type: "Box",
|
||||
width: lightboxWidth,
|
||||
tag: item.ImageTags.Box
|
||||
}) + '" />';
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
if (item.BackdropImageTags) {
|
||||
|
||||
for (var i = 0, length = item.BackdropImageTags.length; i < length; i++) {
|
||||
html += '<a href="#pop_'+i+'_'+item.BackdropImageTags[0]+'" data-transition="fade" data-rel="popup" data-position-to="window" data-corners="true">';
|
||||
html += '<img class="galleryImage" src="' + ApiClient.getImageUrl(item.Id, {
|
||||
type: "Backdrop",
|
||||
width: downloadWidth,
|
||||
tag: item.BackdropImageTags[0],
|
||||
index: i
|
||||
}) + '" />';
|
||||
html += '<div class="galleryPopup" id="pop_'+i+'_'+item.BackdropImageTags[0]+'" data-role="popup" data-position-to="window">';
|
||||
html += '<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>';
|
||||
html += '<img class="" src="' + ApiClient.getImageUrl(item.Id, {
|
||||
type: "Backdrop",
|
||||
width: lightboxWidth,
|
||||
tag: item.BackdropImageTags[0],
|
||||
index: i
|
||||
}) + '" />';
|
||||
html += '</div>';
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$('#galleryContent', page).html(html);
|
||||
|
||||
$(".galleryPopup").popup();
|
||||
},
|
||||
|
||||
renderMediaInfo: function(item) {
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
return false;
|
||||
},
|
||||
|
||||
play: function (items) {
|
||||
play: function (items, startPosition) {
|
||||
|
||||
if (MediaPlayer.isPlaying()) {
|
||||
MediaPlayer.stop();
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
|
||||
if (item.MediaType === "Video") {
|
||||
|
||||
mediaElement = MediaPlayer.playVideo(items);
|
||||
mediaElement = MediaPlayer.playVideo(items, startPosition);
|
||||
}
|
||||
|
||||
else if (item.MediaType === "Audio") {
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
return $('audio', nowPlayingBar)[0];
|
||||
},
|
||||
|
||||
playVideo: function (items) {
|
||||
playVideo: function (items, startPosition) {
|
||||
|
||||
var item = items[0];
|
||||
|
||||
|
|
@ -122,11 +122,13 @@
|
|||
audioBitrate: 128000,
|
||||
videoBitrate: 500000,
|
||||
maxWidth: screenWidth,
|
||||
maxHeight: screenHeight
|
||||
maxHeight: screenHeight,
|
||||
StartTimeTicks: 0
|
||||
};
|
||||
|
||||
//TODO if you press "stop" button on the nowPlayingBar and restart the same video without refreshing the page
|
||||
//there is an issue since VideoJS is still loaded.
|
||||
if (typeof(startPosition) != "undefined") {
|
||||
baseParams['StartTimeTicks'] = startPosition;
|
||||
}
|
||||
|
||||
var html = '<video id="videoWindow" class="itemVideo video-js vjs-default-skin"></video>';
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue