mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
fixes #861 - Add tap hold menus to web client
This commit is contained in:
parent
2c9ebd220c
commit
d1a36e7c73
15 changed files with 206 additions and 48 deletions
|
@ -402,8 +402,8 @@ a.itemTag:hover {
|
|||
}
|
||||
|
||||
.lnkSibling {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
position: fixed;
|
||||
top: 105px;
|
||||
text-decoration: none;
|
||||
font-weight: normal!important;
|
||||
display: none;
|
||||
|
|
|
@ -23,6 +23,12 @@
|
|||
<div class="folderGroupList"></div>
|
||||
<div class="fieldDescription">${LabelSelectFolderGroupsHelp}</div>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<div style="margin: 0 1em;">
|
||||
<label for="chkDisplayCollectionView">${LabelDisplayCollectionsView}</label>
|
||||
<input id="chkDisplayCollectionView" type="checkbox" data-mini="true" />
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<div style="margin: 0 1em;">
|
||||
|
@ -30,6 +36,7 @@
|
|||
<div class="channelGroupList"></div>
|
||||
<div class="fieldDescription">${LabelGroupChannelsIntoViewsHelp}</div>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
|
|
|
@ -36,12 +36,13 @@
|
|||
preferThumb: true,
|
||||
context: 'games',
|
||||
showItemCounts: true,
|
||||
centerText: true
|
||||
centerText: true,
|
||||
lazy: true
|
||||
});
|
||||
|
||||
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
|
||||
|
||||
$('#items', page).html(html).trigger('create');
|
||||
$('#items', page).html(html).trigger('create').createPosterItemMenus();
|
||||
|
||||
$('.btnNextPage', page).on('click', function () {
|
||||
query.StartIndex += query.Limit;
|
||||
|
|
|
@ -23,8 +23,10 @@
|
|||
items: result.Items,
|
||||
transparent: true,
|
||||
borderless: true,
|
||||
shape: 'auto'
|
||||
}));
|
||||
shape: 'auto',
|
||||
lazy: true
|
||||
|
||||
})).trigger('create').createPosterItemMenus();
|
||||
|
||||
});
|
||||
|
||||
|
@ -52,8 +54,10 @@
|
|||
items: result.Items,
|
||||
transparent: true,
|
||||
borderless: true,
|
||||
shape: 'auto'
|
||||
}));
|
||||
shape: 'auto',
|
||||
lazy: true
|
||||
|
||||
})).trigger('create').createPosterItemMenus();
|
||||
|
||||
});
|
||||
|
||||
|
|
|
@ -37,12 +37,14 @@
|
|||
preferThumb: true,
|
||||
context: 'games',
|
||||
showItemCounts: true,
|
||||
centerText: true
|
||||
centerText: true,
|
||||
lazy: true
|
||||
|
||||
});
|
||||
|
||||
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
|
||||
|
||||
$('#items', page).html(html).trigger('create');
|
||||
$('#items', page).html(html).trigger('create').createPosterItemMenus();
|
||||
|
||||
$('.btnNextPage', page).on('click', function () {
|
||||
query.StartIndex += query.Limit;
|
||||
|
|
|
@ -34,12 +34,14 @@
|
|||
shape: "backdrop",
|
||||
context: 'games',
|
||||
showTitle: true,
|
||||
centerText: true
|
||||
centerText: true,
|
||||
lazy: true
|
||||
|
||||
});
|
||||
|
||||
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
|
||||
|
||||
$('#items', page).html(html).trigger('create');
|
||||
$('#items', page).html(html).trigger('create').createPosterItemMenus();
|
||||
|
||||
$('.btnNextPage', page).on('click', function () {
|
||||
query.StartIndex += query.Limit;
|
||||
|
|
|
@ -188,7 +188,6 @@
|
|||
shape: 'autosmall',
|
||||
showTitle: true,
|
||||
centerText: true,
|
||||
context: 'home',
|
||||
lazy: true
|
||||
});
|
||||
html += '</div>';
|
||||
|
@ -220,7 +219,8 @@
|
|||
showTitle: true,
|
||||
centerText: true,
|
||||
lazy: true,
|
||||
preferThumb: true
|
||||
preferThumb: true,
|
||||
context: 'home'
|
||||
});
|
||||
html += '</div>';
|
||||
}
|
||||
|
|
|
@ -300,7 +300,7 @@
|
|||
|
||||
$('.playFlyout').popup("close").remove();
|
||||
|
||||
var html = '<div data-role="popup" class="playFlyout" data-history="false">';
|
||||
var html = '<div data-role="popup" class="playFlyout" data-history="false" data-theme="a">';
|
||||
|
||||
html += '<ul data-role="listview" style="min-width: 180px;">';
|
||||
html += '<li data-role="list-divider">Play Menu</li>';
|
||||
|
@ -345,7 +345,8 @@
|
|||
var href = LibraryBrowser.getHrefInternal(item);
|
||||
|
||||
if (context) {
|
||||
href += "&context=" + context;
|
||||
href += href.indexOf('?') == -1 ? "?context=" : "&context=";
|
||||
href += context;
|
||||
}
|
||||
|
||||
return href;
|
||||
|
@ -741,7 +742,21 @@
|
|||
cssClass += ' posterItemUserData' + item.UserData.Key;
|
||||
}
|
||||
|
||||
html += '<a data-itemid="' + item.Id + '" class="' + cssClass + '" data-mediasourcecount="' + mediaSourceCount + '" href="' + href + '">';
|
||||
var itemCommands = [];
|
||||
|
||||
//if (MediaController.canPlay(item)) {
|
||||
// itemCommands.push('playmenu');
|
||||
//}
|
||||
|
||||
if (item.Type != "Recording" && item.Type != "Program") {
|
||||
itemCommands.push('edit');
|
||||
}
|
||||
|
||||
if (item.LocalTrailerCount) {
|
||||
itemCommands.push('trailer');
|
||||
}
|
||||
|
||||
html += '<a data-commands="' + itemCommands.join(',') + '" data-itemid="' + item.Id + '" class="' + cssClass + '" data-mediasourcecount="' + mediaSourceCount + '" href="' + href + '">';
|
||||
|
||||
var style = "";
|
||||
|
||||
|
|
|
@ -28,7 +28,7 @@
|
|||
});
|
||||
}
|
||||
|
||||
function getOverlayHtml(item, currentUser, posterItem) {
|
||||
function getOverlayHtml(item, currentUser, posterItem, commands) {
|
||||
|
||||
var html = '';
|
||||
|
||||
|
@ -116,12 +116,12 @@
|
|||
buttonCount++;
|
||||
}
|
||||
|
||||
if (item.LocalTrailerCount && item.PlayAccess == 'Full') {
|
||||
if (commands.indexOf('trailer') != -1) {
|
||||
html += '<button type="button" data-mini="true" data-inline="true" data-icon="video" data-iconpos="notext" class="btnPlayTrailer" data-itemid="' + item.Id + '" title="' + Globalize.translate('ButtonPlayTrailer') + '" style="' + buttonMargin + '">' + Globalize.translate('ButtonPlayTrailer') + '</button>';
|
||||
buttonCount++;
|
||||
}
|
||||
|
||||
if (currentUser.Configuration.IsAdministrator && item.Type != "Recording" && item.Type != "Program") {
|
||||
if (currentUser.Configuration.IsAdministrator && commands.indexOf('edit') != -1) {
|
||||
html += '<button type="button" data-mini="true" data-inline="true" data-icon="edit" data-iconpos="notext" title="' + Globalize.translate('ButtonEdit') + '" onclick="Dashboard.navigate(\'edititemmetadata.html?id=' + item.Id + '\');return false;" style="' + buttonMargin + '">' + Globalize.translate('ButtonEdit') + '</button>';
|
||||
buttonCount++;
|
||||
}
|
||||
|
@ -141,40 +141,150 @@
|
|||
MediaController.play({ items: trailers });
|
||||
});
|
||||
|
||||
// Used by the tab menu, not the slide up
|
||||
$('.tapHoldMenu').popup('close');
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function onMenuCommand(command, elem) {
|
||||
function onShuffleButtonClick() {
|
||||
|
||||
var id = elem.getAttribute('data-itemid');
|
||||
var page = $(elem).parents('.page');
|
||||
var id = this.getAttribute('data-itemid');
|
||||
|
||||
if (command == 'SplitVersions') {
|
||||
splitVersions(id, page);
|
||||
}
|
||||
MediaController.shuffle(id);
|
||||
|
||||
// Used by the tab menu, not the slide up
|
||||
$('.tapHoldMenu').popup('close');
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function splitVersions(id, page) {
|
||||
function onInstantMixButtonClick() {
|
||||
|
||||
Dashboard.confirm(Globalize.translate('MessageConfirmSplitMedia'), Globalize.translate('HeaderSplitMedia'), function (confirmResult) {
|
||||
var id = this.getAttribute('data-itemid');
|
||||
|
||||
if (confirmResult) {
|
||||
MediaController.instantMix(id);
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
// Used by the tab menu, not the slide up
|
||||
$('.tapHoldMenu').popup('close');
|
||||
|
||||
$.ajax({
|
||||
type: "DELETE",
|
||||
url: ApiClient.getUrl("Videos/" + id + "/AlternateSources")
|
||||
|
||||
}).done(function () {
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
|
||||
$('.itemsContainer', page).trigger('needsrefresh');
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
function onQueueButtonClick() {
|
||||
|
||||
var id = this.getAttribute('data-itemid');
|
||||
|
||||
MediaController.queue(id);
|
||||
|
||||
// Used by the tab menu, not the slide up
|
||||
$('.tapHoldMenu').popup('close');
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function onPlayButtonClick() {
|
||||
|
||||
var id = this.getAttribute('data-itemid');
|
||||
|
||||
MediaController.play(id);
|
||||
|
||||
// Used by the tab menu, not the slide up
|
||||
$('.tapHoldMenu').popup('close');
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function onResumeButtonClick() {
|
||||
|
||||
var id = this.getAttribute('data-itemid');
|
||||
|
||||
MediaController.play({
|
||||
ids: [id],
|
||||
startPositionTicks: parseInt(this.getAttribute('data-ticks'))
|
||||
});
|
||||
|
||||
// Used by the tab menu, not the slide up
|
||||
$('.tapHoldMenu').popup('close');
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function onPosterItemTapHold(e) {
|
||||
|
||||
$('.tapHoldMenu').popup("close").remove();
|
||||
|
||||
var posterItem = this;
|
||||
|
||||
var itemId = posterItem.getAttribute('data-itemid');
|
||||
var commands = posterItem.getAttribute('data-commands').split(',');
|
||||
|
||||
var promise1 = ApiClient.getItem(Dashboard.getCurrentUserId(), itemId);
|
||||
var promise2 = Dashboard.getCurrentUser();
|
||||
|
||||
$.when(promise1, promise2).done(function (response1, response2) {
|
||||
|
||||
var item = response1[0];
|
||||
var user = response2[0];
|
||||
|
||||
var html = '<div data-role="popup" class="tapHoldMenu" data-theme="a">';
|
||||
|
||||
html += '<ul data-role="listview" style="min-width: 240px;">';
|
||||
html += '<li data-role="list-divider">' + Globalize.translate('HeaderMenu') + '</li>';
|
||||
|
||||
html += '<li><a href="' + posterItem.href + '">' + Globalize.translate('ButtonOpen') + '</a></li>';
|
||||
html += '<li><a href="' + posterItem.href + '" target="_blank">' + Globalize.translate('ButtonOpenInNewTab') + '</a></li>';
|
||||
|
||||
if (MediaController.canPlay(item)) {
|
||||
html += '<li data-icon="play"><a href="#" class="btnPlay" data-itemid="' + itemId + '">' + Globalize.translate('ButtonPlay') + '</a></li>';
|
||||
}
|
||||
|
||||
if (item.UserData.PlaybackPositionTicks && item.MediaType != "Audio" && !item.IsFolder) {
|
||||
html += '<li data-icon="play"><a href="#" class="btnResume" data-ticks="' + item.UserData.PlaybackPositionTicks + '" data-itemid="' + itemId + '">' + Globalize.translate('ButtonResume') + '</a></li>';
|
||||
}
|
||||
|
||||
if (MediaController.canQueueMediaType(item.MediaType)) {
|
||||
html += '<li data-icon="plus"><a href="#" class="btnQueue" data-itemid="' + itemId + '">' + Globalize.translate('ButtonQueue') + '</a></li>';
|
||||
}
|
||||
|
||||
if (item.Type == "Audio" || item.Type == "MusicAlbum" || item.Type == "MusicArtist" || item.Type == "MusicGenre") {
|
||||
html += '<li data-icon="recycle"><a href="#" class="btnInstantMix" data-itemid="' + itemId + '">' + Globalize.translate('ButtonInstantMix') + '</a></li>';
|
||||
}
|
||||
|
||||
if (item.IsFolder || item.Type == "MusicArtist" || item.Type == "MusicGenre") {
|
||||
html += '<li data-icon="recycle"><a href="#" class="btnShuffle" data-itemid="' + itemId + '">' + Globalize.translate('ButtonShuffle') + '</a></li>';
|
||||
}
|
||||
|
||||
if (commands.indexOf('trailer') != -1) {
|
||||
html += '<li data-icon="video"><a href="#" class="btnPlayTrailer" data-itemid="' + itemId + '">' + Globalize.translate('ButtonPlayTrailer') + '</a></li>';
|
||||
}
|
||||
|
||||
if (user.Configuration.IsAdministrator && commands.indexOf('edit') != -1) {
|
||||
html += '<li data-icon="edit"><a href="edititemmetadata.html?id=' + itemId + '">' + Globalize.translate('ButtonEdit') + '</a></li>';
|
||||
}
|
||||
|
||||
html += '</ul>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
$($.mobile.activePage).append(html);
|
||||
|
||||
var elem = $('.tapHoldMenu').popup({ positionTo: e.target }).trigger('create').popup("open").on("popupafterclose", function () {
|
||||
|
||||
$(this).off("popupafterclose").remove();
|
||||
|
||||
});
|
||||
|
||||
$('.btnPlay', elem).on('click', onPlayButtonClick);
|
||||
$('.btnResume', elem).on('click', onResumeButtonClick);
|
||||
$('.btnQueue', elem).on('click', onQueueButtonClick);
|
||||
$('.btnInstantMix', elem).on('click', onInstantMixButtonClick);
|
||||
$('.btnShuffle', elem).on('click', onShuffleButtonClick);
|
||||
$('.btnPlayTrailer', elem).on('click', onShuffleButtonClick);
|
||||
});
|
||||
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
|
||||
$.fn.createPosterItemMenus = function () {
|
||||
|
@ -193,6 +303,7 @@
|
|||
|
||||
var innerElem = $('.posterItemOverlayTarget', elem);
|
||||
var id = elem.getAttribute('data-itemid');
|
||||
var commands = elem.getAttribute('data-commands').split(',');
|
||||
|
||||
var promise1 = ApiClient.getItem(Dashboard.getCurrentUserId(), id);
|
||||
var promise2 = Dashboard.getCurrentUser();
|
||||
|
@ -202,7 +313,7 @@
|
|||
var item = response1[0];
|
||||
var user = response2[0];
|
||||
|
||||
innerElem.html(getOverlayHtml(item, user, elem)).trigger('create');
|
||||
innerElem.html(getOverlayHtml(item, user, elem, commands)).trigger('create');
|
||||
|
||||
$('.btnPlayTrailer', innerElem).on('click', onTrailerButtonClick);
|
||||
});
|
||||
|
@ -241,6 +352,11 @@
|
|||
|
||||
var elems = '.backdropPosterItem,.smallBackdropPosterItem,.portraitPosterItem,.squarePosterItem,.miniBackdropPosterItem';
|
||||
|
||||
if ($.browser.mobile) {
|
||||
this.off('contextmenu.posterItemMenu', elems)
|
||||
.on('contextmenu.posterItemMenu', elems, onPosterItemTapHold);
|
||||
}
|
||||
|
||||
return this.off('.posterItemHoverMenu')
|
||||
.on('mouseenter.posterItemHoverMenu', elems, onHoverIn)
|
||||
.on('mouseleave.posterItemHoverMenu', elems, onHoverOut)
|
||||
|
|
|
@ -129,6 +129,10 @@
|
|||
itemId = "livetv";
|
||||
}
|
||||
|
||||
if (i.Type == 'Channel') {
|
||||
viewMenuCssClass = 'channelsViewMenu';
|
||||
}
|
||||
|
||||
return '<a data-itemid="' + itemId + '" class="lnkMediaFolder viewMenuLink viewMenuTextLink ' + viewMenuCssClass + '" href="' + getItemHref(i) + '">' + i.Name + '</a>';
|
||||
|
||||
}).join('');
|
||||
|
|
|
@ -6,6 +6,7 @@
|
|||
$('#chkDisplayUnairedEpisodes', page).checked(user.Configuration.DisplayUnairedEpisodes || false).checkboxradio("refresh");
|
||||
|
||||
$('#chkGroupMoviesIntoCollections', page).checked(user.Configuration.GroupMoviesIntoBoxSets || false).checkboxradio("refresh");
|
||||
$('#chkDisplayCollectionView', page).checked(user.Configuration.DisplayCollectionsView || false).checkboxradio("refresh");
|
||||
|
||||
ApiClient.getItems(user.Id, {}).done(function (result) {
|
||||
|
||||
|
@ -75,6 +76,8 @@
|
|||
user.Configuration.DisplayUnairedEpisodes = $('#chkDisplayUnairedEpisodes', page).checked();
|
||||
user.Configuration.GroupMoviesIntoBoxSets = $('#chkGroupMoviesIntoCollections', page).checked();
|
||||
|
||||
user.Configuration.DisplayCollectionsView = $('#chkDisplayCollectionView', page).checked();
|
||||
|
||||
user.Configuration.ExcludeFoldersFromGrouping = $(".chkGroupFolder:not(:checked)", page).get().map(function (i) {
|
||||
|
||||
return i.getAttribute('data-folderid');
|
||||
|
|
|
@ -1224,16 +1224,16 @@ $(function () {
|
|||
videoPlayerHtml += '<div class="videoAdvancedControls">';
|
||||
|
||||
videoPlayerHtml += '<button class="imageButton mediaButton videoAudioButton" title="Audio tracks" type="button" data-icon="audiocd" data-iconpos="notext" data-inline="true">Audio Tracks</button>';
|
||||
videoPlayerHtml += '<div data-role="popup" class="videoAudioPopup videoPlayerPopup" data-history="false" data-theme="b" data-corners="false"></div>';
|
||||
videoPlayerHtml += '<div data-role="popup" class="videoAudioPopup videoPlayerPopup" data-history="false" data-theme="b"></div>';
|
||||
|
||||
videoPlayerHtml += '<button class="imageButton mediaButton videoSubtitleButton" title="Subtitles" type="button" data-icon="subtitles" data-iconpos="notext" data-inline="true">Subtitles</button>';
|
||||
videoPlayerHtml += '<div data-role="popup" class="videoSubtitlePopup videoPlayerPopup" data-history="false" data-theme="b" data-corners="false"></div>';
|
||||
videoPlayerHtml += '<div data-role="popup" class="videoSubtitlePopup videoPlayerPopup" data-history="false" data-theme="b"></div>';
|
||||
|
||||
videoPlayerHtml += '<button class="mediaButton videoChaptersButton" title="Scenes" type="button" data-icon="video" data-iconpos="notext" data-inline="true">Scenes</button>';
|
||||
videoPlayerHtml += '<div data-role="popup" class="videoChaptersPopup videoPlayerPopup" data-history="false" data-theme="b" data-corners="false"></div>';
|
||||
videoPlayerHtml += '<div data-role="popup" class="videoChaptersPopup videoPlayerPopup" data-history="false" data-theme="b"></div>';
|
||||
|
||||
videoPlayerHtml += '<button class="mediaButton videoQualityButton" title="Quality" type="button" data-icon="gear" data-iconpos="notext" data-inline="true">Quality</button>';
|
||||
videoPlayerHtml += '<div data-role="popup" class="videoQualityPopup videoPlayerPopup" data-history="false" data-theme="b" data-corners="false"></div>';
|
||||
videoPlayerHtml += '<div data-role="popup" class="videoQualityPopup videoPlayerPopup" data-history="false" data-theme="b"></div>';
|
||||
|
||||
videoPlayerHtml += '<button class="mediaButton" title="Stop" type="button" onclick="MediaPlayer.stop();" data-icon="delete" data-iconpos="notext" data-inline="true">Stop</button>';
|
||||
|
||||
|
|
|
@ -38,12 +38,14 @@
|
|||
context: 'tv',
|
||||
preferThumb: true,
|
||||
showItemCounts: true,
|
||||
centerText: true
|
||||
centerText: true,
|
||||
lazy: true
|
||||
|
||||
});
|
||||
|
||||
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
|
||||
|
||||
$('#items', page).html(html).trigger('create');
|
||||
$('#items', page).html(html).trigger('create').createPosterItemMenus();
|
||||
|
||||
$('.btnNextPage', page).on('click', function () {
|
||||
query.StartIndex += query.Limit;
|
||||
|
|
|
@ -45,7 +45,7 @@
|
|||
|
||||
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount, false, [], false);
|
||||
|
||||
$('#items', page).html(html).trigger('create');
|
||||
$('#items', page).html(html).trigger('create').createPosterItemMenus();
|
||||
|
||||
$('.btnNextPage', page).on('click', function () {
|
||||
query.StartIndex += query.Limit;
|
||||
|
|
|
@ -38,12 +38,14 @@
|
|||
context: 'tv',
|
||||
preferThumb: true,
|
||||
showItemCounts: true,
|
||||
centerText: true
|
||||
centerText: true,
|
||||
lazy: true
|
||||
|
||||
});
|
||||
|
||||
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
|
||||
|
||||
$('#items', page).html(html).trigger('create');
|
||||
$('#items', page).html(html).trigger('create').createPosterItemMenus();
|
||||
|
||||
$('.btnNextPage', page).on('click', function () {
|
||||
query.StartIndex += query.Limit;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue