mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
added play/resume menu to detail page
This commit is contained in:
parent
ddb5a7f595
commit
3232dc1403
2 changed files with 54 additions and 6 deletions
|
@ -16,10 +16,11 @@
|
||||||
<div id="itemImage"></div>
|
<div id="itemImage"></div>
|
||||||
<div id="playButtonShadow" style="display: none; height: 48px; position: absolute; bottom: 0; left: 0; right: 0; background: black; opacity: .75;">
|
<div id="playButtonShadow" style="display: none; height: 48px; position: absolute; bottom: 0; left: 0; right: 0; background: black; opacity: .75;">
|
||||||
</div>
|
</div>
|
||||||
<button id="btnPlay" type="button" class="imageButton" style="display: none; position: absolute; bottom: 5px; left: 10px;" data-role="none" title="Play" onclick="ItemDetailPage.play();">
|
<button id="btnPlay" type="button" class="imageButton" style="display: none; position: absolute; bottom: 5px; left: 10px;" data-role="none" title="Play" onclick="ItemDetailPage.onPlayButtonClick();">
|
||||||
<img src="css/images/media/playCircle.png" style="height: 28px;" />
|
<img src="css/images/media/playCircle.png" style="height: 28px;" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="playMenuAnchor"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="itemDetailBlock">
|
<div class="itemDetailBlock">
|
||||||
|
@ -32,7 +33,7 @@
|
||||||
|
|
||||||
<p id="itemGenres"></p>
|
<p id="itemGenres"></p>
|
||||||
<p id="itemStudios"></p>
|
<p id="itemStudios"></p>
|
||||||
<p id="itemLinks"></p>
|
<p id="itemLinks"></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -60,6 +61,16 @@
|
||||||
<h3>Gallery</h3>
|
<h3>Gallery</h3>
|
||||||
<div id="galleryContent"></div>
|
<div id="galleryContent"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div data-role="popup" id="playMenu" data-corners="false" data-theme="c">
|
||||||
|
<ul data-role="listview" style="min-width: 150px;" data-theme="c">
|
||||||
|
<li data-role="list-divider" data-theme="a">Play Menu</li>
|
||||||
|
<li><a href="#" onclick="ItemDetailPage.play();">Play</a></li>
|
||||||
|
<li><a href="#" onclick="ItemDetailPage.resume();">Resume</a>
|
||||||
|
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -353,9 +353,46 @@
|
||||||
$('#scenesContent', page).html(html);
|
$('#scenesContent', page).html(html);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
onPlayButtonClick: function () {
|
||||||
|
|
||||||
|
var item = ItemDetailPage.item;
|
||||||
|
|
||||||
|
var userdata = item.UserData || {};
|
||||||
|
|
||||||
|
if (userdata.PlaybackPositionTicks) {
|
||||||
|
|
||||||
|
var page = $.mobile.activePage;
|
||||||
|
|
||||||
|
var pos = $('#playMenuAnchor', page).offset();
|
||||||
|
|
||||||
|
$('#playMenu', page).popup("open", {
|
||||||
|
|
||||||
|
x: pos.left + 125,
|
||||||
|
y: pos.top + 20
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
} else {
|
||||||
|
ItemDetailPage.play();
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
play: function (startPosition) {
|
play: function (startPosition) {
|
||||||
|
|
||||||
|
var page = $.mobile.activePage;
|
||||||
|
$('#playMenu', page).popup("close");
|
||||||
MediaPlayer.play([ItemDetailPage.item], startPosition);
|
MediaPlayer.play([ItemDetailPage.item], startPosition);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
resume: function() {
|
||||||
|
|
||||||
|
var item = ItemDetailPage.item;
|
||||||
|
|
||||||
|
var userdata = item.UserData || {};
|
||||||
|
|
||||||
|
ItemDetailPage.play(userdata.PlaybackPositionTicks);
|
||||||
|
},
|
||||||
|
|
||||||
onGalleryExpand: function () {
|
onGalleryExpand: function () {
|
||||||
|
|
||||||
|
@ -475,9 +512,9 @@
|
||||||
html += '<div class="mediaInfoStream">';
|
html += '<div class="mediaInfoStream">';
|
||||||
|
|
||||||
html += '<p class="mediaInfoStreamType">' + type + '</p>';
|
html += '<p class="mediaInfoStreamType">' + type + '</p>';
|
||||||
|
|
||||||
html += '<ul class="mediaInfoDetails">';
|
html += '<ul class="mediaInfoDetails">';
|
||||||
|
|
||||||
if (stream.Codec) {
|
if (stream.Codec) {
|
||||||
html += '<li><span class="mediaInfoLabel">Codec</span> ' + stream.Codec + '</li>';
|
html += '<li><span class="mediaInfoLabel">Codec</span> ' + stream.Codec + '</li>';
|
||||||
}
|
}
|
||||||
|
@ -510,11 +547,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
var framerate = stream.AverageFrameRate || stream.RealFrameRate;
|
var framerate = stream.AverageFrameRate || stream.RealFrameRate;
|
||||||
|
|
||||||
if (framerate) {
|
if (framerate) {
|
||||||
html += '<li><span class="mediaInfoLabel">Framerate</span> ' + framerate + '</li>';
|
html += '<li><span class="mediaInfoLabel">Framerate</span> ' + framerate + '</li>';
|
||||||
}
|
}
|
||||||
|
|
||||||
if (stream.PixelFormat) {
|
if (stream.PixelFormat) {
|
||||||
html += '<li><span class="mediaInfoLabel">Pixel Format</span> ' + stream.PixelFormat + '</li>';
|
html += '<li><span class="mediaInfoLabel">Pixel Format</span> ' + stream.PixelFormat + '</li>';
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue