mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-17 19:08:18 -07:00
added play buttons to song table
This commit is contained in:
Luke Pulverenti
parent
3dc52fabbc
commit
7d55230e20
@ -1,6 +1,6 @@
|
||||
.detailTableContainer {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
max-width: 1100px;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@ -472,7 +472,7 @@
|
||||
|
||||
var item = items[i];
|
||||
|
||||
html += '<a class="posterItem backdropPosterItem" href="#" onclick="ItemDetailPage.playById(\'' + item.Id + '\');">';
|
||||
html += '<a class="posterItem backdropPosterItem" href="#" onclick="MediaPlayer.playById(\'' + item.Id + '\');">';
|
||||
|
||||
var imageTags = item.ImageTags || {};
|
||||
|
||||
@ -618,12 +618,6 @@
|
||||
var self = this;
|
||||
|
||||
self.play = play;
|
||||
|
||||
self.playById = function (id) {
|
||||
ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(function (item) {
|
||||
MediaPlayer.play([item]);
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
window.ItemDetailPage = new itemDetailPage();
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
var LibraryBrowser = (function (window, $) {
|
||||
var LibraryBrowser = (function (window, document, $) {
|
||||
|
||||
var defaultBackground = "#999;";
|
||||
|
||||
@ -213,6 +213,7 @@
|
||||
|
||||
html += '<tr>';
|
||||
|
||||
html += '<th></th>';
|
||||
html += '<th></th>';
|
||||
|
||||
html += '<th>Track</th>';
|
||||
@ -236,6 +237,8 @@
|
||||
|
||||
html += '<tr>';
|
||||
|
||||
html += '<td><button data-icon="play" data-mini="true" data-iconpos="notext" onclick="LibraryBrowser.showPlayMenu(this, \'' + item.Id + '\', \'Audio\');">Options</button></td>';
|
||||
|
||||
var num = item.IndexNumber;
|
||||
|
||||
if (num && item.ParentIndexNumber) {
|
||||
@ -281,6 +284,50 @@
|
||||
return html;
|
||||
},
|
||||
|
||||
showPlayMenu: function (positionTo, itemId, mediaType, resumePositionTicks) {
|
||||
|
||||
var isPlaying = MediaPlayer.isPlaying();
|
||||
|
||||
if (!isPlaying && !resumePositionTicks) {
|
||||
MediaPlayer.playById(itemId);
|
||||
return;
|
||||
}
|
||||
|
||||
$('.playFlyout').popup("close").remove();
|
||||
|
||||
var html = '<div data-role="popup" class="playFlyout" style="max-width:300px;" data-corners="false" data-theme="c" data-history="false">';
|
||||
|
||||
html += '<ul data-role="listview" style="min-width: 150px;" data-theme="c">';
|
||||
html += '<li data-role="list-divider" data-theme="a">Play Menu</li>';
|
||||
|
||||
html += '<li><a href="#" onclick="MediaPlayer.playById(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">Play</a></li>';
|
||||
|
||||
if (resumePositionTicks) {
|
||||
html += '<li><a href="#" onclick="MediaPlayer.playById(\'' + itemId + '\', resumePositionTicks);LibraryBrowser.closePlayMenu();">Play</a></li>';
|
||||
}
|
||||
|
||||
if (isPlaying && MediaPlayer.canQueue(mediaType)) {
|
||||
html += '<li><a href="#" onclick="MediaPlayer.playNext(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">Play Next</a></li>';
|
||||
html += '<li><a href="#" onclick="MediaPlayer.playLast(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">Play Last</a></li>';
|
||||
}
|
||||
|
||||
html += '</ul>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
$($.mobile.activePage).append(html);
|
||||
|
||||
$('.playFlyout').popup({ positionTo: positionTo || "window" }).trigger('create').popup("open").on("popupafterclose", function () {
|
||||
|
||||
$(this).off("popupafterclose").remove();
|
||||
|
||||
}).parents(".ui-popup-container").css("margin-left", 100);
|
||||
},
|
||||
|
||||
closePlayMenu: function () {
|
||||
$('.playFlyout').popup("close").remove();
|
||||
},
|
||||
|
||||
getHref: function (item, itemByNameContext) {
|
||||
|
||||
if (item.url) {
|
||||
@ -1472,4 +1519,4 @@
|
||||
|
||||
};
|
||||
|
||||
})(window, jQuery);
|
||||
})(window, document, jQuery);
|
||||
@ -1,4 +1,4 @@
|
||||
(function (document, clearTimeout, screen, localStorage, _V_, $, setInterval) {
|
||||
(function (document, clearTimeout, screen, localStorage, _V_, $, setInterval, window) {
|
||||
|
||||
function mediaPlayer() {
|
||||
var self = this;
|
||||
@ -8,8 +8,7 @@
|
||||
var currentMediaElement;
|
||||
var currentProgressInterval;
|
||||
|
||||
function playAudio(items, params) {
|
||||
var item = items[0];
|
||||
function playAudio(item, params) {
|
||||
|
||||
var volume = localStorage.getItem("volume") || 0.5;
|
||||
|
||||
@ -57,7 +56,7 @@
|
||||
});
|
||||
|
||||
$(".itemAudio").on("ended", function () {
|
||||
MediaPlayer.stopAudio(item.Id);
|
||||
MediaPlayer.stopAudio(item.Id);
|
||||
|
||||
Playlist.playNext();
|
||||
});
|
||||
@ -66,30 +65,29 @@
|
||||
localStorage.setItem("volume", this.volume);
|
||||
});
|
||||
|
||||
$(".itemAudio").on("play", updateAudioProgress(item.Id));
|
||||
$(".itemAudio").on("play", updateAudioProgress(item.Id));
|
||||
|
||||
return $('audio', nowPlayingBar)[0];
|
||||
}
|
||||
|
||||
function updateAudioProgress(itemId) {
|
||||
ApiClient.reportPlaybackStart(Dashboard.getCurrentUserId(), itemId);
|
||||
function updateAudioProgress(itemId) {
|
||||
ApiClient.reportPlaybackStart(Dashboard.getCurrentUserId(), itemId);
|
||||
|
||||
currentProgressInterval = setInterval(function () {
|
||||
var position;
|
||||
$(".itemAudio").each(function () {
|
||||
position = Math.floor(10000000 * this.currentTime);
|
||||
});
|
||||
currentProgressInterval = setInterval(function () {
|
||||
var position;
|
||||
$(".itemAudio").each(function () {
|
||||
position = Math.floor(10000000 * this.currentTime);
|
||||
});
|
||||
|
||||
ApiClient.reportPlaybackProgress(Dashboard.getCurrentUserId(), itemId, position);
|
||||
}, 30000);
|
||||
}
|
||||
ApiClient.reportPlaybackProgress(Dashboard.getCurrentUserId(), itemId, position);
|
||||
}, 30000);
|
||||
}
|
||||
|
||||
function playVideo(item, startPosition) {
|
||||
|
||||
function playVideo(items, startPosition) {
|
||||
//stop/kill videoJS
|
||||
if (currentMediaElement) self.stop();
|
||||
|
||||
var item = items[0];
|
||||
|
||||
// Account for screen rotation. Use the larger dimension as the width.
|
||||
var screenWidth = Math.max(screen.height, screen.width);
|
||||
var screenHeight = Math.min(screen.height, screen.width);
|
||||
@ -223,11 +221,11 @@
|
||||
}
|
||||
|
||||
function updateProgress() {
|
||||
var player = _V_("videoWindow");
|
||||
var itemString = player.tag.src.match(new RegExp("Videos/[0-9a-z\-]+", "g"));
|
||||
var itemId = itemString[0].replace("Videos/", "");
|
||||
var player = _V_("videoWindow");
|
||||
var itemString = player.tag.src.match(new RegExp("Videos/[0-9a-z\-]+", "g"));
|
||||
var itemId = itemString[0].replace("Videos/", "");
|
||||
|
||||
ApiClient.reportPlaybackStart(Dashboard.getCurrentUserId(), itemId);
|
||||
ApiClient.reportPlaybackStart(Dashboard.getCurrentUserId(), itemId);
|
||||
|
||||
currentProgressInterval = setInterval(function () {
|
||||
var player = _V_("videoWindow");
|
||||
@ -282,10 +280,10 @@
|
||||
|
||||
if (item.MediaType === "Video") {
|
||||
|
||||
mediaElement = playVideo(items, startPosition);
|
||||
mediaElement = playVideo(item, startPosition);
|
||||
} else if (item.MediaType === "Audio") {
|
||||
|
||||
mediaElement = playAudio(items);
|
||||
mediaElement = playAudio(item);
|
||||
}
|
||||
|
||||
if (!mediaElement) {
|
||||
@ -357,6 +355,28 @@
|
||||
$('#mediaInfo', nowPlayingBar).html(html);
|
||||
};
|
||||
|
||||
self.playById = function (id, startPositionTicks) {
|
||||
|
||||
ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(function (item) {
|
||||
|
||||
self.play([item], startPositionTicks);
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
self.canQueue = function (mediaType) {
|
||||
return mediaType == "Audio";
|
||||
};
|
||||
|
||||
self.playLast = function(itemId) {
|
||||
|
||||
};
|
||||
|
||||
self.playNext = function (itemId) {
|
||||
|
||||
};
|
||||
|
||||
self.stop = function () {
|
||||
|
||||
var elem = currentMediaElement;
|
||||
@ -382,7 +402,7 @@
|
||||
//player.tech.destroy();
|
||||
player.destroy();
|
||||
} else {
|
||||
self.stopAudio();
|
||||
self.stopAudio();
|
||||
|
||||
elem.pause();
|
||||
elem.src = "";
|
||||
@ -411,23 +431,23 @@
|
||||
if (currentProgressInterval) {
|
||||
clearTimeout(currentProgressInterval);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
self.stopAudio = function () {
|
||||
var itemString = $(".itemAudio source").attr('src').match(new RegExp("Audio/[0-9a-z\-]+", "g"));
|
||||
var itemId = itemString[0].replace("Audio/", "");
|
||||
self.stopAudio = function () {
|
||||
var itemString = $(".itemAudio source").attr('src').match(new RegExp("Audio/[0-9a-z\-]+", "g"));
|
||||
var itemId = itemString[0].replace("Audio/", "");
|
||||
|
||||
var position;
|
||||
$(".itemAudio").each(function () {
|
||||
position = Math.floor(10000000 * this.currentTime);
|
||||
});
|
||||
var position;
|
||||
$(".itemAudio").each(function () {
|
||||
position = Math.floor(10000000 * this.currentTime);
|
||||
});
|
||||
|
||||
ApiClient.reportPlaybackStopped(Dashboard.getCurrentUserId(), itemId, position);
|
||||
ApiClient.reportPlaybackStopped(Dashboard.getCurrentUserId(), itemId, position);
|
||||
|
||||
if (currentProgressInterval) {
|
||||
clearTimeout(currentProgressInterval);
|
||||
}
|
||||
}
|
||||
if (currentProgressInterval) {
|
||||
clearTimeout(currentProgressInterval);
|
||||
}
|
||||
};
|
||||
|
||||
self.isPlaying = function () {
|
||||
return currentMediaElement;
|
||||
@ -436,4 +456,4 @@
|
||||
|
||||
window.MediaPlayer = new mediaPlayer();
|
||||
|
||||
})(document, clearTimeout, screen, localStorage, _V_, $, setInterval);
|
||||
})(document, clearTimeout, screen, localStorage, _V_, $, setInterval, window);
|
||||
@ -8,7 +8,7 @@
|
||||
IncludeItemTypes: "Audio",
|
||||
Recursive: true,
|
||||
Fields: "ItemCounts,DateCreated,UserData,AudioInfo,ParentId",
|
||||
Limit: 300,
|
||||
Limit: 200,
|
||||
StartIndex: 0
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user