mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update play menus
This commit is contained in:
parent
ad285bf734
commit
3a7bff35d6
11 changed files with 87 additions and 50 deletions
|
@ -14,12 +14,12 @@
|
|||
},
|
||||
"devDependencies": {},
|
||||
"ignore": [],
|
||||
"version": "1.4.475",
|
||||
"_release": "1.4.475",
|
||||
"version": "1.4.476",
|
||||
"_release": "1.4.476",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "1.4.475",
|
||||
"commit": "ee9afc32bf7c7da8a40158d556cb217bd2c80ef5"
|
||||
"tag": "1.4.476",
|
||||
"commit": "802991db23eeaba201548ad9987282a2cab2671a"
|
||||
},
|
||||
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
|
||||
"_target": "^1.2.1",
|
||||
|
|
|
@ -54,8 +54,8 @@
|
|||
.emby-button > i {
|
||||
/* For non-fab buttons that have icons */
|
||||
font-size: 1.36em;
|
||||
width: auto;
|
||||
height: auto;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
.fab {
|
||||
|
@ -72,8 +72,8 @@
|
|||
}
|
||||
|
||||
.fab > i {
|
||||
height: auto;
|
||||
width: auto;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
vertical-align: middle;
|
||||
font-size: 2.85em;
|
||||
}
|
||||
|
@ -88,8 +88,8 @@
|
|||
}
|
||||
|
||||
.fab.mini > i {
|
||||
height: auto;
|
||||
width: auto;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
font-size: 1.72em;
|
||||
}
|
||||
|
||||
|
|
|
@ -128,7 +128,7 @@
|
|||
|
||||
if (playbackManager.canPlay(item)) {
|
||||
|
||||
html += '<button is="emby-button" class="itemAction autoSize fab cardOverlayFab mini" data-action="playmenu"><i class="md-icon cardOverlayFab-md-icon"></i></button>';
|
||||
html += '<button is="emby-button" class="itemAction autoSize fab cardOverlayFab mini" data-action="resume"><i class="md-icon cardOverlayFab-md-icon"></i></button>';
|
||||
buttonCount++;
|
||||
}
|
||||
|
||||
|
|
|
@ -1,8 +1,6 @@
|
|||
define(['actionsheet', 'datetime', 'playbackManager', 'globalize', 'appSettings'], function (actionsheet, datetime, playbackManager, globalize, appSettings) {
|
||||
'use strict';
|
||||
|
||||
var isMobileApp = window.Dashboard != null;
|
||||
|
||||
function show(options) {
|
||||
|
||||
var item = options.item;
|
||||
|
@ -17,7 +15,7 @@ define(['actionsheet', 'datetime', 'playbackManager', 'globalize', 'appSettings'
|
|||
|
||||
var playableItemId = itemType === 'Program' ? channelId : itemId;
|
||||
|
||||
if (!resumePositionTicks && mediaType !== "Audio" && !isFolder) {
|
||||
if (!resumePositionTicks || isFolder) {
|
||||
playbackManager.play({
|
||||
ids: [playableItemId],
|
||||
serverId: serverId
|
||||
|
@ -44,13 +42,6 @@ define(['actionsheet', 'datetime', 'playbackManager', 'globalize', 'appSettings'
|
|||
});
|
||||
}
|
||||
|
||||
if (itemType === "Audio" || itemType === "MusicAlbum" || itemType === "MusicArtist" || itemType === "MusicGenre") {
|
||||
menuItems.push({
|
||||
name: globalize.translate('sharedcomponents#InstantMix'),
|
||||
id: 'instantmix'
|
||||
});
|
||||
}
|
||||
|
||||
if (isFolder || itemType === "MusicArtist" || itemType === "MusicGenre") {
|
||||
menuItems.push({
|
||||
name: globalize.translate('sharedcomponents#Shuffle'),
|
||||
|
@ -84,9 +75,6 @@ define(['actionsheet', 'datetime', 'playbackManager', 'globalize', 'appSettings'
|
|||
items: [item]
|
||||
});
|
||||
break;
|
||||
case 'instantmix':
|
||||
playbackManager.instantMix(item);
|
||||
break;
|
||||
case 'shuffle':
|
||||
playbackManager.shuffle(item);
|
||||
break;
|
||||
|
|
|
@ -252,7 +252,7 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'g
|
|||
});
|
||||
}
|
||||
|
||||
else if (action === 'play') {
|
||||
else if (action === 'play' || action === 'resume') {
|
||||
|
||||
var startPositionTicks = parseInt(card.getAttribute('data-positionticks') || '0');
|
||||
|
||||
|
@ -431,7 +431,7 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'g
|
|||
|
||||
var cmd = e.detail.command;
|
||||
|
||||
if (cmd === 'play' || cmd === 'record' || cmd === 'menu' || cmd === 'info') {
|
||||
if (cmd === 'play' || cmd === 'resume' || cmd === 'record' || cmd === 'menu' || cmd === 'info') {
|
||||
var card = dom.parentWithClass(e.target, 'itemAction');
|
||||
|
||||
if (card) {
|
||||
|
|
|
@ -540,6 +540,22 @@
|
|||
});
|
||||
}
|
||||
|
||||
function onPlaylistItemRemoved(e, info) {
|
||||
|
||||
var context = dlg;
|
||||
|
||||
var playlistItemIds = info.playlistItemIds;
|
||||
|
||||
for (var i = 0, length = playlistItemIds.length; i < length; i++) {
|
||||
|
||||
var listItem = context.querySelector('.listItem[data-playlistItemId="' + playlistItemIds[i] + '"]');
|
||||
|
||||
if (listItem) {
|
||||
listItem.parentNode.removeChild(listItem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onPlaybackStopped(e, stopInfo) {
|
||||
|
||||
console.log('remotecontrol event: ' + e.type);
|
||||
|
@ -627,7 +643,7 @@
|
|||
events.on(player, 'playbackstart', onPlaybackStart);
|
||||
events.on(player, 'statechange', onPlaybackStart);
|
||||
events.on(player, 'repeatmodechange', onRepeatModeChange);
|
||||
events.on(player, 'playlistitemremove', onPlaylistUpdate);
|
||||
events.on(player, 'playlistitemremove', onPlaylistItemRemoved);
|
||||
events.on(player, 'playlistitemmove', onPlaylistUpdate);
|
||||
events.on(player, 'playbackstop', onPlaybackStopped);
|
||||
events.on(player, 'volumechange', onVolumeChanged);
|
||||
|
@ -646,7 +662,7 @@
|
|||
function updateCastIcon(context) {
|
||||
|
||||
var info = playbackManager.getPlayerInfo();
|
||||
var btnCast = context.querySelector('.nowPlayingCastIcon');
|
||||
var btnCast = context.querySelector('.btnCast');
|
||||
|
||||
if (info && !info.isLocalPlayer) {
|
||||
|
||||
|
@ -850,7 +866,7 @@
|
|||
context.querySelector('.sendMessageForm').addEventListener('submit', onMessageSubmit);
|
||||
context.querySelector('.typeTextForm').addEventListener('submit', onSendStringSubmit);
|
||||
|
||||
context.querySelector('.nowPlayingCastIcon').addEventListener('click', function () {
|
||||
context.querySelector('.btnCast').addEventListener('click', function () {
|
||||
var btn = this;
|
||||
require(['playerSelectionMenu'], function (playerSelectionMenu) {
|
||||
playerSelectionMenu.show(btn);
|
||||
|
@ -866,6 +882,10 @@
|
|||
//});
|
||||
|
||||
events.on(playbackManager, 'playerchange', onPlayerChange);
|
||||
|
||||
if (appHost.supports('remotecontrol')) {
|
||||
context.querySelector('.btnCast').classList.remove('hide');
|
||||
}
|
||||
}
|
||||
|
||||
function onDialogClosed(e) {
|
||||
|
|
|
@ -250,7 +250,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
|
|||
background-size: cover;
|
||||
background-position: center 15%;
|
||||
background-repeat: no-repeat;
|
||||
height: 50vh;
|
||||
height: 45vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
@ -491,7 +491,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
|
|||
}
|
||||
|
||||
.mainDetailButtons {
|
||||
padding: 1em 0;
|
||||
padding: .5em 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
@ -505,6 +505,12 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
|
|||
margin-top: 1.5em !important;
|
||||
}
|
||||
|
||||
.mainDetailButtons > .raised {
|
||||
justify-content: center;
|
||||
padding-left: 1.5em;
|
||||
padding-right: 1.5em;
|
||||
}
|
||||
|
||||
@media all and (min-width: 800px) {
|
||||
|
||||
.mainDetailButtons, .itemDetailPage .recordingFields button {
|
||||
|
|
|
@ -39,25 +39,27 @@
|
|||
|
||||
<div class="mainDetailButtons">
|
||||
<button is="emby-button" type="button" class="raised subdued btnPlay btnPlaySimple hide">
|
||||
<i class="md-icon">play_arrow</i>
|
||||
<span>${ButtonPlay}</span>
|
||||
</button>
|
||||
<button is="emby-button" type="button" class="raised subdued btnInstantMix hide">
|
||||
<span>${HeaderInstantMix}</span>
|
||||
</button>
|
||||
<button is="emby-button" type="button" class="raised subdued btnShuffle hide">
|
||||
<span>${ButtonShuffle}</span>
|
||||
</button>
|
||||
<button is="emby-button" type="button" class="raised subdued btnPlayTrailer hide">
|
||||
<i class="md-icon">videocam</i>
|
||||
<span>${ButtonTrailer}</span>
|
||||
</button>
|
||||
<button is="emby-button" type="button" class="raised subdued btnCancelSeriesTimer hide">
|
||||
<i class="md-icon">cancel</i>
|
||||
<span>${ButtonCancelSeries}</span>
|
||||
</button>
|
||||
<button is="emby-button" type="button" class="raised subdued btnMoreCommands hide notext">
|
||||
|
||||
<i class="md-icon">more_vert</i>
|
||||
|
||||
</button>
|
||||
<button is="emby-button" type="button" class="btnDeleteItem fab mini hide" title="${DeleteMedia}" style="margin-left:.5em;"><i class="md-icon"></i></button>
|
||||
|
||||
<div style="margin-left:.5em; display: flex; align-items: center;">
|
||||
<button is="emby-button" type="button" class="btnMoreCommands fab mini hide" title="${ButtonMore}"><i class="md-icon">more_vert</i></button>
|
||||
<button is="emby-button" type="button" class="btnDeleteItem fab mini hide" title="${DeleteMedia}"><i class="md-icon"></i></button>
|
||||
<div class="detailUserDataIcons userDataIcons"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="syncLocalContainer hide" style="margin: 1em 0;">
|
||||
</div>
|
||||
|
|
|
@ -54,7 +54,7 @@
|
|||
<div class="nowPlayingPageUserDataButtons">
|
||||
</div>
|
||||
|
||||
<button is="paper-icon-button-light" class="nowPlayingCastIcon">
|
||||
<button is="paper-icon-button-light" class="btnCast">
|
||||
<i class="md-icon">cast</i>
|
||||
</button>
|
||||
|
||||
|
|
|
@ -78,7 +78,9 @@
|
|||
positionTo: button,
|
||||
cancelTimer: false,
|
||||
record: false,
|
||||
deleteItem: item.IsFolder === true
|
||||
deleteItem: item.IsFolder === true,
|
||||
shuffle: false,
|
||||
instantMix: false
|
||||
};
|
||||
|
||||
if (appHost.supports('sync')) {
|
||||
|
@ -227,13 +229,24 @@
|
|||
} else {
|
||||
hideAll(page, 'btnPlay');
|
||||
}
|
||||
hideAll(page, 'btnInstantMix');
|
||||
hideAll(page, 'btnShuffle');
|
||||
}
|
||||
else if (playbackManager.canPlay(item)) {
|
||||
hideAll(page, 'btnPlay', true);
|
||||
|
||||
var enableInstantMix = ['Audio', 'MusicAlbum', 'MusicGenre', 'MusicArtist'].indexOf(item.Type) !== -1;
|
||||
hideAll(page, 'btnInstantMix', enableInstantMix);
|
||||
|
||||
var enableShuffle = item.IsFolder || ['MusicAlbum', 'MusicGenre', 'MusicArtist'].indexOf(item.Type) !== -1;
|
||||
hideAll(page, 'btnShuffle', enableShuffle);
|
||||
|
||||
canPlay = true;
|
||||
}
|
||||
else {
|
||||
hideAll(page, 'btnPlay');
|
||||
hideAll(page, 'btnInstantMix');
|
||||
hideAll(page, 'btnShuffle');
|
||||
}
|
||||
|
||||
var hasAnyButton = canPlay;
|
||||
|
@ -2184,13 +2197,9 @@
|
|||
|
||||
function showPlayMenu(item, target) {
|
||||
|
||||
require(['playMenu'], function (playMenu) {
|
||||
|
||||
playMenu.show({
|
||||
|
||||
item: item,
|
||||
positionTo: target
|
||||
});
|
||||
playbackManager.play({
|
||||
items: [item],
|
||||
startPositionTicks: item.UserData ? item.UserData.PlaybackPositionTicks : 0
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -2248,6 +2257,14 @@
|
|||
playCurrentItem(this);
|
||||
}
|
||||
|
||||
function onInstantMixClick() {
|
||||
playbackManager.instantMix(currentItem);
|
||||
}
|
||||
|
||||
function onShuffleClick() {
|
||||
playbackManager.shuffle(currentItem);
|
||||
}
|
||||
|
||||
function onDeleteClick() {
|
||||
|
||||
require(['deleteHelper'], function (deleteHelper) {
|
||||
|
@ -2295,6 +2312,9 @@
|
|||
elems[i].addEventListener('click', onPlayClick);
|
||||
}
|
||||
|
||||
view.querySelector('.btnInstantMix').addEventListener('click', onInstantMixClick);
|
||||
view.querySelector('.btnShuffle').addEventListener('click', onShuffleClick);
|
||||
|
||||
elems = view.querySelectorAll('.btnPlayTrailer');
|
||||
for (i = 0, length = elems.length; i < length; i++) {
|
||||
elems[i].addEventListener('click', onPlayTrailerClick);
|
||||
|
|
|
@ -39,6 +39,7 @@
|
|||
"HeaderPaths": "Paths",
|
||||
"CategorySync": "Sync",
|
||||
"TabPlaylist": "Playlist",
|
||||
"HeaderInstantMix": "Instant Mix",
|
||||
"HeaderEasyPinCode": "Easy Pin Code",
|
||||
"HeaderInstalledServices": "Installed Services",
|
||||
"HeaderAvailableServices": "Available Services",
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue