mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
trailers and special features display/play
This commit is contained in:
parent
9cafa17580
commit
053bb8bde5
2 changed files with 147 additions and 7 deletions
|
@ -44,17 +44,17 @@
|
||||||
<h3>Scenes</h3>
|
<h3>Scenes</h3>
|
||||||
<div id="scenesContent"></div>
|
<div id="scenesContent"></div>
|
||||||
</div>
|
</div>
|
||||||
<div data-role="collapsible" data-content-theme="a">
|
<div data-role="collapsible" data-content-theme="a" id="specialsCollapsible">
|
||||||
<h3>Special Features</h3>
|
<h3>Special Features</h3>
|
||||||
<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
|
<div id="specialsContent"></div>
|
||||||
</div>
|
</div>
|
||||||
<div data-role="collapsible" data-content-theme="a">
|
<div data-role="collapsible" data-content-theme="a" id="trailersCollapsible">
|
||||||
<h3>Trailers</h3>
|
<h3>Trailers</h3>
|
||||||
<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
|
<div id="trailersContent"></div>
|
||||||
</div>
|
</div>
|
||||||
<div data-role="collapsible" data-content-theme="a">
|
<div data-role="collapsible" data-content-theme="a" id="castCollapsible">
|
||||||
<h3>Cast & Crew</h3>
|
<h3>Cast & Crew</h3>
|
||||||
<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
|
<div id="castContent"></div>
|
||||||
</div>
|
</div>
|
||||||
<div data-role="collapsible" data-content-theme="a" id="galleryCollapsible">
|
<div data-role="collapsible" data-content-theme="a" id="galleryCollapsible">
|
||||||
<h3>Gallery</h3>
|
<h3>Gallery</h3>
|
||||||
|
|
|
@ -41,7 +41,6 @@
|
||||||
ItemDetailPage.renderImage(item);
|
ItemDetailPage.renderImage(item);
|
||||||
ItemDetailPage.renderOverviewBlock(item);
|
ItemDetailPage.renderOverviewBlock(item);
|
||||||
ItemDetailPage.renderMediaInfo(item);
|
ItemDetailPage.renderMediaInfo(item);
|
||||||
|
|
||||||
ItemDetailPage.renderGallery(item);
|
ItemDetailPage.renderGallery(item);
|
||||||
|
|
||||||
if (!item.Chapters || !item.Chapters.length) {
|
if (!item.Chapters || !item.Chapters.length) {
|
||||||
|
@ -49,6 +48,16 @@
|
||||||
}else {
|
}else {
|
||||||
ItemDetailPage.renderScenes(item);
|
ItemDetailPage.renderScenes(item);
|
||||||
}
|
}
|
||||||
|
if (!item.LocalTrailerCount || item.LocalTrailerCount == 0) {
|
||||||
|
$('#trailersCollapsible', page).remove();
|
||||||
|
}else {
|
||||||
|
ItemDetailPage.renderTrailers(item);
|
||||||
|
}
|
||||||
|
if (!item.SpecialFeatureCount || item.SpecialFeatureCount == 0) {
|
||||||
|
$('#specialsCollapsible', page).remove();
|
||||||
|
}else {
|
||||||
|
ItemDetailPage.renderSpecials(item);
|
||||||
|
}
|
||||||
|
|
||||||
$('#itemName', page).html(name);
|
$('#itemName', page).html(name);
|
||||||
|
|
||||||
|
@ -409,6 +418,137 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
$('#mediaInfoCollapsible', page).show();
|
$('#mediaInfoCollapsible', page).show();
|
||||||
|
},
|
||||||
|
|
||||||
|
playTrailer: function (index) {
|
||||||
|
ApiClient.getLocalTrailers(Dashboard.getCurrentUserId(), ItemDetailPage.item.Id).done(function (trailers) {
|
||||||
|
MediaPlayer.play([trailers[index]]);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
onTrailersExpand: function() {
|
||||||
|
|
||||||
|
if (ItemDetailPage.item) {
|
||||||
|
|
||||||
|
ItemDetailPage.renderTrailers(ItemDetailPage.item);
|
||||||
|
|
||||||
|
$(this).off('expand', ItemDetailPage.onTrailersExpand);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
renderTrailers: function (item) {
|
||||||
|
|
||||||
|
var html = '';
|
||||||
|
var page = $.mobile.activePage;
|
||||||
|
|
||||||
|
ApiClient.getLocalTrailers(Dashboard.getCurrentUserId(), item.Id).done(function (trailers) {
|
||||||
|
|
||||||
|
for (var i = 0, length = trailers.length; i < length; i++) {
|
||||||
|
|
||||||
|
var trailer = trailers[i];
|
||||||
|
|
||||||
|
html += '<div class="posterViewItem posterViewItemWithDualText">';
|
||||||
|
html += '<a href="#play-Trailer-' + i + '" onclick="ItemDetailPage.playTrailer('+i+');">';
|
||||||
|
|
||||||
|
if (trailer.ImageTag) {
|
||||||
|
|
||||||
|
var imgUrl = ApiClient.getImageUrl(item.Id, {
|
||||||
|
width: 500,
|
||||||
|
tag: trailer.ImageTag,
|
||||||
|
type: "Trailer",
|
||||||
|
index: i
|
||||||
|
});
|
||||||
|
|
||||||
|
html += '<img src="' + imgUrl + '" />';
|
||||||
|
} else {
|
||||||
|
html += '<img src="css/images/itemDetails/videoDefault.png"/>';
|
||||||
|
}
|
||||||
|
|
||||||
|
html += '<div class="posterViewItemText posterViewItemPrimaryText">' + trailer.Name + '</div>';
|
||||||
|
html += '<div class="posterViewItemText">';
|
||||||
|
|
||||||
|
if (trailer.RunTimeTicks != "") {
|
||||||
|
html += ticks_to_human(trailer.RunTimeTicks);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
html += " ";
|
||||||
|
}
|
||||||
|
html += '</div>';
|
||||||
|
|
||||||
|
html += '</a>';
|
||||||
|
|
||||||
|
html += '</div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
$('#trailersContent', page).html(html);
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
playSpecial: function (index) {
|
||||||
|
ApiClient.getSpecialFeatures(Dashboard.getCurrentUserId(), ItemDetailPage.item.Id).done(function (specials) {
|
||||||
|
MediaPlayer.play([specials[index]]);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
onSpecialsExpand: function() {
|
||||||
|
|
||||||
|
if (ItemDetailPage.item) {
|
||||||
|
|
||||||
|
ItemDetailPage.renderSpecials(ItemDetailPage.item);
|
||||||
|
|
||||||
|
$(this).off('expand', ItemDetailPage.onSpecialsExpand);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
renderSpecials: function (item) {
|
||||||
|
|
||||||
|
var html = '';
|
||||||
|
var page = $.mobile.activePage;
|
||||||
|
|
||||||
|
ApiClient.getSpecialFeatures(Dashboard.getCurrentUserId(), item.Id).done(function (specials) {
|
||||||
|
|
||||||
|
for (var i = 0, length = specials.length; i < length; i++) {
|
||||||
|
|
||||||
|
var special = specials[i];
|
||||||
|
|
||||||
|
html += '<div class="posterViewItem posterViewItemWithDualText">';
|
||||||
|
html += '<a href="#play-Special-' + i + '" onclick="ItemDetailPage.playSpecial('+i+');">';
|
||||||
|
|
||||||
|
if (special.ImageTag) {
|
||||||
|
|
||||||
|
var imgUrl = ApiClient.getImageUrl(item.Id, {
|
||||||
|
width: 500,
|
||||||
|
tag: special.ImageTag,
|
||||||
|
type: "Special",
|
||||||
|
index: i
|
||||||
|
});
|
||||||
|
|
||||||
|
html += '<img src="' + imgUrl + '" />';
|
||||||
|
} else {
|
||||||
|
html += '<img src="css/images/itemDetails/videoDefault.png"/>';
|
||||||
|
}
|
||||||
|
|
||||||
|
html += '<div class="posterViewItemText posterViewItemPrimaryText">' + special.Name + '</div>';
|
||||||
|
html += '<div class="posterViewItemText">';
|
||||||
|
|
||||||
|
if (special.RunTimeTicks != "") {
|
||||||
|
html += ticks_to_human(special.RunTimeTicks);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
html += " ";
|
||||||
|
}
|
||||||
|
html += '</div>';
|
||||||
|
|
||||||
|
html += '</a>';
|
||||||
|
|
||||||
|
html += '</div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
$('#specialsContent', page).html(html);
|
||||||
|
|
||||||
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue