mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

changed queue to have it's own menu on item details

Browse source
This commit is contained in:
Techywarrior 2013-04-10 23:22:34 -07:00
parent ba196ca640
commit e579e0a6b6
3 changed files with 36 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
dashboard-ui/css/images/media/btn_queue.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.8 KiB

17
dashboard-ui/itemdetails.html
View file

@ -14,13 +14,20 @@
<div class="itemImageBlock"> <div class="itemImageBlock">
<div id="itemMedia" style="position: relative;"> <div id="itemMedia" style="position: relative;">
<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="btnPlayMenu" 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>
<div id="queueButtonShadow" style="display: none; height: 48px; position: absolute; bottom: 0; left: 0; right: 0; background: black; opacity: .75;"></div>
<button id="btnQueueMenu" type="button" class="imageButton" style=" position: absolute; bottom: 5px; left: 50px;" data-role="none" title="Queue">
<img src="css/images/media/btn_queue.png" style="height: 28px;" />
</button>
</div> </div>
<div id="playMenuAnchor"></div> <div id="playMenuAnchor"></div>
<div id="queueMenuAnchor"></div>
</div> </div>
<div class="itemDetailBlock"> <div class="itemDetailBlock">
@ -67,6 +74,12 @@
<li data-role="list-divider" data-theme="a">Play Menu</li> <li data-role="list-divider" data-theme="a">Play Menu</li>
<li><a href="#" id="btnPlay">Play</a></li> <li><a href="#" id="btnPlay">Play</a></li>
<li><a href="#" id="btnResume">Resume</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> <li><a href="#" id="btnQueue">Add to Queue</a></li>
</ul> </ul>
</div> </div>

27
dashboard-ui/scripts/Itemdetailpage.js
View file

@ -38,9 +38,13 @@
if (MediaPlayer.canPlay(item)) { if (MediaPlayer.canPlay(item)) {
$('#btnPlayMenu', page).show(); $('#btnPlayMenu', page).show();
$('#playButtonShadow', page).show(); $('#playButtonShadow', page).show();
//$('#btnQueueMenu', page).show();
//$('#queueButtonShadow', page).show();
} else { } else {
$('#btnPlayMenu', page).hide(); $('#btnPlayMenu', page).hide();
$('#playButtonShadow', page).hide(); $('#playButtonShadow', page).hide();
$('#btnQueueMenu', page).hide();
$('#queueButtonShadow', page).hide();
} }
Dashboard.hideLoadingMsg(); Dashboard.hideLoadingMsg();
@ -474,8 +478,7 @@
var userdata = currentItem.UserData || {}; var userdata = currentItem.UserData || {};
//always pop menu now so we can have a queue link if (userdata.PlaybackPositionTicks) {
//if (userdata.PlaybackPositionTicks) {
var pos = $('#playMenuAnchor', page).offset(); var pos = $('#playMenuAnchor', page).offset();
@ -484,12 +487,22 @@
y: pos.top + 20 y: pos.top + 20
}); });
//} }
//else { else {
// play(); 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"); $('#playMenu', page).popup("close");
@ -507,7 +520,7 @@
$('#btnQueue', page).on('click', function () { $('#btnQueue', page).on('click', function () {
$('#playMenu', page).popup("close"); $('#queueMenu', page).popup("close");
Playlist.add(currentItem); Playlist.add(currentItem);
}); });