1
0
Fork 0
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:
Luke Pulverenti 2017-01-18 14:53:10 -05:00
parent ad285bf734
commit 3a7bff35d6
11 changed files with 87 additions and 50 deletions

View file

@ -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",

View file

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

View file

@ -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">&#xE037;</i></button>';
html += '<button is="emby-button" class="itemAction autoSize fab cardOverlayFab mini" data-action="resume"><i class="md-icon cardOverlayFab-md-icon">&#xE037;</i></button>';
buttonCount++;
}

View file

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

View file

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

View file

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

View file

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

View file

@ -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">
&nbsp;
<i class="md-icon">more_vert</i>
&nbsp;
</button>
<button is="emby-button" type="button" class="btnDeleteItem fab mini hide" title="${DeleteMedia}" style="margin-left:.5em;"><i class="md-icon">&#xE872;</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">&#xE872;</i></button>
<div class="detailUserDataIcons userDataIcons"></div>
</div>
</div>
<div class="syncLocalContainer hide" style="margin: 1em 0;">
</div>

View file

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

View file

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

View file

@ -39,6 +39,7 @@
"HeaderPaths": "Paths",
"CategorySync": "Sync",
"TabPlaylist": "Playlist",
"HeaderInstantMix": "Instant Mix",
"HeaderEasyPinCode": "Easy Pin Code",
"HeaderInstalledServices": "Installed Services",
"HeaderAvailableServices": "Available Services",