mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

update play menus

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

8
dashboard-ui/bower_components/emby-webcomponents/.bower.json vendored
View file

@ -14,12 +14,12 @@
}, },
"devDependencies": {}, "devDependencies": {},
"ignore": [], "ignore": [],
"version": "1.4.475", "version": "1.4.476",
"_release": "1.4.475", "_release": "1.4.476",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "1.4.475", "tag": "1.4.476",
"commit": "ee9afc32bf7c7da8a40158d556cb217bd2c80ef5" "commit": "802991db23eeaba201548ad9987282a2cab2671a"
}, },
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git", "_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
"_target": "^1.2.1", "_target": "^1.2.1",

12
dashboard-ui/bower_components/emby-webcomponents/emby-button/emby-button.css vendored
View file

@ -54,8 +54,8 @@
.emby-button > i { .emby-button > i {
/* For non-fab buttons that have icons */ /* For non-fab buttons that have icons */
font-size: 1.36em; font-size: 1.36em;
width: auto; width: 1em;
height: auto; height: 1em;
} }
.fab { .fab {
@ -72,8 +72,8 @@
} }
.fab > i { .fab > i {
height: auto; height: 1em;
width: auto; width: 1em;
vertical-align: middle; vertical-align: middle;
font-size: 2.85em; font-size: 2.85em;
} }
@ -88,8 +88,8 @@
} }
.fab.mini > i { .fab.mini > i {
height: auto; height: 1em;
width: auto; width: 1em;
font-size: 1.72em; font-size: 1.72em;
} }

2
dashboard-ui/bower_components/emby-webcomponents/itemhovermenu/itemhovermenu.js vendored
View file

@ -128,7 +128,7 @@
if (playbackManager.canPlay(item)) { 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++; buttonCount++;
} }

14
dashboard-ui/bower_components/emby-webcomponents/playmenu.js vendored
View file

@ -1,8 +1,6 @@
define(['actionsheet', 'datetime', 'playbackManager', 'globalize', 'appSettings'], function (actionsheet, datetime, playbackManager, globalize, appSettings) { define(['actionsheet', 'datetime', 'playbackManager', 'globalize', 'appSettings'], function (actionsheet, datetime, playbackManager, globalize, appSettings) {
'use strict'; 'use strict';
var isMobileApp = window.Dashboard != null;
function show(options) { function show(options) {
var item = options.item; var item = options.item;
@ -17,7 +15,7 @@ define(['actionsheet', 'datetime', 'playbackManager', 'globalize', 'appSettings'
var playableItemId = itemType === 'Program' ? channelId : itemId; var playableItemId = itemType === 'Program' ? channelId : itemId;
if (!resumePositionTicks && mediaType !== "Audio" && !isFolder) { if (!resumePositionTicks || isFolder) {
playbackManager.play({ playbackManager.play({
ids: [playableItemId], ids: [playableItemId],
serverId: serverId 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") { if (isFolder || itemType === "MusicArtist" || itemType === "MusicGenre") {
menuItems.push({ menuItems.push({
name: globalize.translate('sharedcomponents#Shuffle'), name: globalize.translate('sharedcomponents#Shuffle'),
@ -84,9 +75,6 @@ define(['actionsheet', 'datetime', 'playbackManager', 'globalize', 'appSettings'
items: [item] items: [item]
}); });
break; break;
case 'instantmix':
playbackManager.instantMix(item);
break;
case 'shuffle': case 'shuffle':
playbackManager.shuffle(item); playbackManager.shuffle(item);
break; break;

4
dashboard-ui/bower_components/emby-webcomponents/shortcuts.js vendored
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'); var startPositionTicks = parseInt(card.getAttribute('data-positionticks') || '0');
@ -431,7 +431,7 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'g
var cmd = e.detail.command; 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'); var card = dom.parentWithClass(e.target, 'itemAction');
if (card) { if (card) {

26
dashboard-ui/components/remotecontrol.js
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) { function onPlaybackStopped(e, stopInfo) {
console.log('remotecontrol event: ' + e.type); console.log('remotecontrol event: ' + e.type);
@ -627,7 +643,7 @@
events.on(player, 'playbackstart', onPlaybackStart); events.on(player, 'playbackstart', onPlaybackStart);
events.on(player, 'statechange', onPlaybackStart); events.on(player, 'statechange', onPlaybackStart);
events.on(player, 'repeatmodechange', onRepeatModeChange); events.on(player, 'repeatmodechange', onRepeatModeChange);
events.on(player, 'playlistitemremove', onPlaylistUpdate); events.on(player, 'playlistitemremove', onPlaylistItemRemoved);
events.on(player, 'playlistitemmove', onPlaylistUpdate); events.on(player, 'playlistitemmove', onPlaylistUpdate);
events.on(player, 'playbackstop', onPlaybackStopped); events.on(player, 'playbackstop', onPlaybackStopped);
events.on(player, 'volumechange', onVolumeChanged); events.on(player, 'volumechange', onVolumeChanged);
@ -646,7 +662,7 @@
function updateCastIcon(context) { function updateCastIcon(context) {
var info = playbackManager.getPlayerInfo(); var info = playbackManager.getPlayerInfo();
var btnCast = context.querySelector('.nowPlayingCastIcon'); var btnCast = context.querySelector('.btnCast');
if (info && !info.isLocalPlayer) { if (info && !info.isLocalPlayer) {
@ -850,7 +866,7 @@
context.querySelector('.sendMessageForm').addEventListener('submit', onMessageSubmit); context.querySelector('.sendMessageForm').addEventListener('submit', onMessageSubmit);
context.querySelector('.typeTextForm').addEventListener('submit', onSendStringSubmit); context.querySelector('.typeTextForm').addEventListener('submit', onSendStringSubmit);
context.querySelector('.nowPlayingCastIcon').addEventListener('click', function () { context.querySelector('.btnCast').addEventListener('click', function () {
var btn = this; var btn = this;
require(['playerSelectionMenu'], function (playerSelectionMenu) { require(['playerSelectionMenu'], function (playerSelectionMenu) {
playerSelectionMenu.show(btn); playerSelectionMenu.show(btn);
@ -866,6 +882,10 @@
//}); //});
events.on(playbackManager, 'playerchange', onPlayerChange); events.on(playbackManager, 'playerchange', onPlayerChange);
if (appHost.supports('remotecontrol')) {
context.querySelector('.btnCast').classList.remove('hide');
}
} }
function onDialogClosed(e) { function onDialogClosed(e) {

10
dashboard-ui/css/librarybrowser.css
View file

@ -250,7 +250,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
background-size: cover; background-size: cover;
background-position: center 15%; background-position: center 15%;
background-repeat: no-repeat; background-repeat: no-repeat;
height: 50vh; height: 45vh;
position: relative; position: relative;
} }
@ -491,7 +491,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
} }
.mainDetailButtons { .mainDetailButtons {
padding: 1em 0; padding: .5em 0;
display: flex; display: flex;
align-items: center; align-items: center;
} }
@ -505,6 +505,12 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
margin-top: 1.5em !important; margin-top: 1.5em !important;
} }
.mainDetailButtons > .raised {
justify-content: center;
padding-left: 1.5em;
padding-right: 1.5em;
}
@media all and (min-width: 800px) { @media all and (min-width: 800px) {
.mainDetailButtons, .itemDetailPage .recordingFields button { .mainDetailButtons, .itemDetailPage .recordingFields button {

22
dashboard-ui/itemdetails.html
View file

@ -39,24 +39,26 @@
<div class="mainDetailButtons"> <div class="mainDetailButtons">
<button is="emby-button" type="button" class="raised subdued btnPlay btnPlaySimple hide"> <button is="emby-button" type="button" class="raised subdued btnPlay btnPlaySimple hide">
<i class="md-icon">play_arrow</i>
<span>${ButtonPlay}</span> <span>${ButtonPlay}</span>
</button> </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"> <button is="emby-button" type="button" class="raised subdued btnPlayTrailer hide">
<i class="md-icon">videocam</i>
<span>${ButtonTrailer}</span> <span>${ButtonTrailer}</span>
</button> </button>
<button is="emby-button" type="button" class="raised subdued btnCancelSeriesTimer hide"> <button is="emby-button" type="button" class="raised subdued btnCancelSeriesTimer hide">
<i class="md-icon">cancel</i>
<span>${ButtonCancelSeries}</span> <span>${ButtonCancelSeries}</span>
</button> </button>
<button is="emby-button" type="button" class="raised subdued btnMoreCommands hide notext">
&nbsp; <div style="margin-left:.5em; display: flex; align-items: center;">
<i class="md-icon">more_vert</i> <button is="emby-button" type="button" class="btnMoreCommands fab mini hide" title="${ButtonMore}"><i class="md-icon">more_vert</i></button>
&nbsp; <button is="emby-button" type="button" class="btnDeleteItem fab mini hide" title="${DeleteMedia}"><i class="md-icon">&#xE872;</i></button>
</button> <div class="detailUserDataIcons userDataIcons"></div>
<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>
<div class="detailUserDataIcons userDataIcons"></div>
</div> </div>
<div class="syncLocalContainer hide" style="margin: 1em 0;"> <div class="syncLocalContainer hide" style="margin: 1em 0;">

2
dashboard-ui/nowplaying.html
View file

@ -54,7 +54,7 @@
<div class="nowPlayingPageUserDataButtons"> <div class="nowPlayingPageUserDataButtons">
</div> </div>
<button is="paper-icon-button-light" class="nowPlayingCastIcon"> <button is="paper-icon-button-light" class="btnCast">
<i class="md-icon">cast</i> <i class="md-icon">cast</i>
</button> </button>

36
dashboard-ui/scripts/itemdetailpage.js
View file

@ -78,7 +78,9 @@
positionTo: button, positionTo: button,
cancelTimer: false, cancelTimer: false,
record: false, record: false,
deleteItem: item.IsFolder === true deleteItem: item.IsFolder === true,
shuffle: false,
instantMix: false
}; };
if (appHost.supports('sync')) { if (appHost.supports('sync')) {
@ -227,13 +229,24 @@
} else { } else {
hideAll(page, 'btnPlay'); hideAll(page, 'btnPlay');
} }
hideAll(page, 'btnInstantMix');
hideAll(page, 'btnShuffle');
} }
else if (playbackManager.canPlay(item)) { else if (playbackManager.canPlay(item)) {
hideAll(page, 'btnPlay', true); 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; canPlay = true;
} }
else { else {
hideAll(page, 'btnPlay'); hideAll(page, 'btnPlay');
hideAll(page, 'btnInstantMix');
hideAll(page, 'btnShuffle');
} }
var hasAnyButton = canPlay; var hasAnyButton = canPlay;
@ -2184,13 +2197,9 @@
function showPlayMenu(item, target) { function showPlayMenu(item, target) {
require(['playMenu'], function (playMenu) { playbackManager.play({
items: [item],
playMenu.show({ startPositionTicks: item.UserData ? item.UserData.PlaybackPositionTicks : 0
item: item,
positionTo: target
});
}); });
} }
@ -2248,6 +2257,14 @@
playCurrentItem(this); playCurrentItem(this);
} }
function onInstantMixClick() {
playbackManager.instantMix(currentItem);
}
function onShuffleClick() {
playbackManager.shuffle(currentItem);
}
function onDeleteClick() { function onDeleteClick() {
require(['deleteHelper'], function (deleteHelper) { require(['deleteHelper'], function (deleteHelper) {
@ -2295,6 +2312,9 @@
elems[i].addEventListener('click', onPlayClick); elems[i].addEventListener('click', onPlayClick);
} }
view.querySelector('.btnInstantMix').addEventListener('click', onInstantMixClick);
view.querySelector('.btnShuffle').addEventListener('click', onShuffleClick);
elems = view.querySelectorAll('.btnPlayTrailer'); elems = view.querySelectorAll('.btnPlayTrailer');
for (i = 0, length = elems.length; i < length; i++) { for (i = 0, length = elems.length; i < length; i++) {
elems[i].addEventListener('click', onPlayTrailerClick); elems[i].addEventListener('click', onPlayTrailerClick);

1
dashboard-ui/strings/en-US.json
View file

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