milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

item details chapters populated, gallery lightbox

Browse source
This commit is contained in:
Techywarrior 2013-03-25 21:44:12 -07:00
parent f286bd8242
commit 5460bb3507
3 changed files with 137 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -849,6 +849,7 @@ progress {
width: auto;
white-space: nowrap;
font-size: 1.1em;
padding-right: 10px;
}
@media all and (min-width: 650px) {

143
dashboard-ui/scripts/ItemDetailPage.js
View file

@ -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 += "&nbsp;";
}
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) {

14
dashboard-ui/scripts/MediaPlayer.js
View file

@ -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>';