1
0
Fork 0
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:
Luke Pulverenti 2014-06-30 22:29:27 -04:00
parent 2c9ebd220c
commit d1a36e7c73
15 changed files with 206 additions and 48 deletions

View file

@ -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;

View file

@ -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 />

View file

@ -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;

View file

@ -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();
});

View file

@ -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;

View file

@ -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;

View file

@ -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>';
}

View file

@ -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 = "";

View file

@ -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)

View file

@ -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('');

View file

@ -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');

View file

@ -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>';

View file

@ -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;

View file

@ -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;

View file

@ -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;