mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
play button refinement
This commit is contained in:
parent
d8a8353cc5
commit
760e6a6f0c
4 changed files with 7 additions and 76 deletions
|
@ -1,6 +1,6 @@
|
||||||
.detailTableContainer {
|
.detailTableContainer {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 1100px;
|
max-width: 1000px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
|
@ -97,13 +97,9 @@
|
||||||
<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>
|
<div id="playButtonShadow" style="display: none; height: 48px; position: absolute; bottom: 0; left: 0; right: 0; background: black; opacity: .75;"></div>
|
||||||
<button id="btnPlayMenu" type="button" class="imageButton" style="display: none; position: absolute; bottom: 5px; left: 10px;" data-role="none" title="Play">
|
<button id="btnPlay" type="button" class="imageButton" style="display: none; position: absolute; bottom: 5px; left: 10px;" data-role="none" title="Play">
|
||||||
<img src="css/images/media/playCircle.png" style="height: 28px;" />
|
<img src="css/images/media/playCircle.png" style="height: 28px;" />
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button id="btnQueueMenu" type="button" class="imageButton" style="display: none; position: absolute; bottom: 5px; left: 50px;" data-role="none" title="Queue">
|
|
||||||
<img src="css/images/media/queue.png" style="height: 28px;" />
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="playMenuAnchor"></div>
|
<div id="playMenuAnchor"></div>
|
||||||
<div id="queueMenuAnchor"></div>
|
<div id="queueMenuAnchor"></div>
|
||||||
|
@ -186,21 +182,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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="#" id="btnPlay">Play</a></li>
|
|
||||||
<li><a href="#" id="btnResume">Resume</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div data-role="popup" id="queueMenu" 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">Queue Menu</li>
|
|
||||||
<li><a href="#" id="btnQueue">Add to Queue</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -61,16 +61,11 @@
|
||||||
renderDetails(page, item, context);
|
renderDetails(page, item, context);
|
||||||
|
|
||||||
if (MediaPlayer.canPlay(item)) {
|
if (MediaPlayer.canPlay(item)) {
|
||||||
$('#btnPlayMenu', page).show();
|
$('#btnPlay', page).show();
|
||||||
$('#playButtonShadow', page).show();
|
$('#playButtonShadow', page).show();
|
||||||
if (MediaPlayer.isPlaying())
|
|
||||||
$('#btnQueueMenu', page).show();
|
|
||||||
else
|
|
||||||
$('#btnQueueMenu', page).hide();
|
|
||||||
} else {
|
} else {
|
||||||
$('#btnPlayMenu', page).hide();
|
$('#btnPlay', page).hide();
|
||||||
$('#playButtonShadow', page).hide();
|
$('#playButtonShadow', page).hide();
|
||||||
$('#btnQueueMenu', page).hide();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
$(".autoNumeric").autoNumeric('init');
|
$(".autoNumeric").autoNumeric('init');
|
||||||
|
@ -552,54 +547,9 @@
|
||||||
|
|
||||||
var page = this;
|
var page = this;
|
||||||
|
|
||||||
$('#btnPlayMenu', page).on('click', function () {
|
|
||||||
|
|
||||||
var userdata = currentItem.UserData || {};
|
|
||||||
|
|
||||||
if (userdata.PlaybackPositionTicks) {
|
|
||||||
|
|
||||||
var pos = $('#playMenuAnchor', page).offset();
|
|
||||||
|
|
||||||
$('#playMenu', page).popup("open", {
|
|
||||||
x: pos.left + 125,
|
|
||||||
y: pos.top + 20
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
play();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$('#btnQueueMenu', page).on('click', function () {
|
|
||||||
var pos = $('#queueMenuAnchor', page).offset();
|
|
||||||
|
|
||||||
$('#queueMenu', page).popup("open", {
|
|
||||||
x: pos.left + 165,
|
|
||||||
y: pos.top + 20
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
$('#btnPlay', page).on('click', function () {
|
$('#btnPlay', page).on('click', function () {
|
||||||
|
|
||||||
$('#playMenu', page).popup("close");
|
|
||||||
play();
|
|
||||||
});
|
|
||||||
|
|
||||||
$('#btnResume', page).on('click', function () {
|
|
||||||
|
|
||||||
$('#playMenu', page).popup("close");
|
|
||||||
|
|
||||||
var userdata = currentItem.UserData || {};
|
var userdata = currentItem.UserData || {};
|
||||||
|
LibraryBrowser.showPlayMenu(this, currentItem.Id, currentItem.MediaType, userdata.PlaybackPositionTicks);
|
||||||
play(userdata.PlaybackPositionTicks);
|
|
||||||
});
|
|
||||||
|
|
||||||
$('#btnQueue', page).on('click', function () {
|
|
||||||
|
|
||||||
$('#queueMenu', page).popup("close");
|
|
||||||
Playlist.add(currentItem);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
}).on('pageshow', "#itemDetailPage", function () {
|
}).on('pageshow', "#itemDetailPage", function () {
|
||||||
|
|
|
@ -303,7 +303,7 @@
|
||||||
html += '<li><a href="#" onclick="MediaPlayer.playById(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">Play</a></li>';
|
html += '<li><a href="#" onclick="MediaPlayer.playById(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">Play</a></li>';
|
||||||
|
|
||||||
if (resumePositionTicks) {
|
if (resumePositionTicks) {
|
||||||
html += '<li><a href="#" onclick="MediaPlayer.playById(\'' + itemId + '\', resumePositionTicks);LibraryBrowser.closePlayMenu();">Play</a></li>';
|
html += '<li><a href="#" onclick="MediaPlayer.playById(\'' + itemId + '\', ' + resumePositionTicks + ');LibraryBrowser.closePlayMenu();">Resume</a></li>';
|
||||||
}
|
}
|
||||||
|
|
||||||
if (isPlaying && MediaPlayer.canQueue(mediaType)) {
|
if (isPlaying && MediaPlayer.canQueue(mediaType)) {
|
||||||
|
@ -321,7 +321,7 @@
|
||||||
|
|
||||||
$(this).off("popupafterclose").remove();
|
$(this).off("popupafterclose").remove();
|
||||||
|
|
||||||
}).parents(".ui-popup-container").css("margin-left", 100);
|
}).parents(".ui-popup-container").css("margin-left", 110).css("margin-top", 50);
|
||||||
},
|
},
|
||||||
|
|
||||||
closePlayMenu: function () {
|
closePlayMenu: function () {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue