milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #1056 from samuel9554/master

Browse source 
Revamp player (nowplaying.html, remotecontrol.js)
This commit is contained in:
Vasily 2020-04-21 14:03:15 +03:00 • committed by GitHub
commit bc24a9f296
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 730 additions and 204 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/itemcontextmenu.js
View file

@ -90,7 +90,7 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
});
}
if (itemHelper.supportsAddingToPlaylist(item)) {
if (itemHelper.supportsAddingToPlaylist(item) && options.playlist !== false) {
commands.push({
name: globalize.translate("AddToPlaylist"),
id: "addtoplaylist",

40
src/components/nowplayingbar/nowplayingbar.js
View file

@ -1,4 +1,4 @@
define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader', 'layoutManager', 'playbackManager', 'nowPlayingHelper', 'apphost', 'dom', 'connectionManager', 'paper-icon-button-light', 'emby-ratingbutton'], function (require, datetime, itemHelper, events, browser, imageLoader, layoutManager, playbackManager, nowPlayingHelper, appHost, dom, connectionManager) {
define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader', 'layoutManager', 'playbackManager', 'nowPlayingHelper', 'apphost', 'dom', 'connectionManager', 'itemContextMenu', 'paper-icon-button-light', 'emby-ratingbutton'], function (require, datetime, itemHelper, events, browser, imageLoader, layoutManager, playbackManager, nowPlayingHelper, appHost, dom, connectionManager, itemContextMenu) {
'use strict';
var currentPlayer;
@ -66,7 +66,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
html += '</div>';
html += '<button is="paper-icon-button-light" class="playPauseButton mediaButton"><i class="material-icons">pause</i></button>';
html += '<button is="paper-icon-button-light" class="remoteControlButton mediaButton"><i class="material-icons playlist_play"></i></button>';
html += '<button is="paper-icon-button-light" class="btnToggleContextMenu"><i class="material-icons more_vert"></i></button>';
html += '</div>';
html += '</div>';
@ -155,8 +155,6 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
}
});
elem.querySelector('.remoteControlButton').addEventListener('click', showRemoteControl);
toggleRepeatButton = elem.querySelector('.toggleRepeatButton');
toggleRepeatButton.addEventListener('click', function () {
@ -226,7 +224,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
elem.addEventListener('click', function (e) {
if (!dom.parentWithTag(e.target, ['BUTTON', 'INPUT', 'A'])) {
if (!dom.parentWithTag(e.target, ['BUTTON', 'INPUT'])) {
showRemoteControl();
}
});
@ -435,17 +433,13 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
}
}
function getTextActionButton(item, text, serverId) {
function getTextActionButton(item, text) {
if (!text) {
text = itemHelper.getDisplayName(item);
}
var html = '<button data-id="' + item.Id + '" data-serverid="' + (item.ServerId || serverId) + '" data-type="' + item.Type + '" data-mediatype="' + item.MediaType + '" data-channelid="' + item.ChannelId + '" data-isfolder="' + item.IsFolder + '" type="button" class="itemAction textActionButton" data-action="link">';
html += text;
html += '</button>';
return html;
return `<a>${text}</a>`;
}
function seriesImageUrl(item, options) {
@ -523,16 +517,16 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
if (textLines.length > 1) {
textLines[1].secondary = true;
}
var serverId = nowPlayingItem ? nowPlayingItem.ServerId : null;
nowPlayingTextElement.innerHTML = textLines.map(function (nowPlayingName) {
var cssClass = nowPlayingName.secondary ? ' class="nowPlayingBarSecondaryText"' : '';
if (nowPlayingName.item) {
return '<div' + cssClass + '>' + getTextActionButton(nowPlayingName.item, nowPlayingName.text, serverId) + '</div>';
var nowPlayingText = getTextActionButton(nowPlayingName.item, nowPlayingName.text);
return `<div ${cssClass}>${nowPlayingText}</div>`;
}
return '<div' + cssClass + '>' + nowPlayingName.text + '</div>';
return `<div ${cssClass}>${nowPlayingText}</div>`;
}).join('');
@ -561,15 +555,25 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
if (isRefreshing) {
var apiClient = connectionManager.getApiClient(nowPlayingItem.ServerId);
apiClient.getItem(apiClient.getCurrentUserId(), nowPlayingItem.Id).then(function (item) {
var userData = item.UserData || {};
var likes = userData.Likes == null ? '' : userData.Likes;
var contextButton = document.querySelector('.btnToggleContextMenu');
var options = {
play: false,
queue: false,
positionTo: contextButton
};
nowPlayingUserData.innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton mediaButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="material-icons">favorite</i></button>';
apiClient.getCurrentUser().then(function(user) {
contextButton.addEventListener('click', function () {
itemContextMenu.show(Object.assign({
item: item,
user: user
}, options ));
});
});
});
}
} else {
nowPlayingUserData.innerHTML = '';

566
src/components/remotecontrol/remotecontrol.css
View file

@ -1,3 +1,7 @@
.nowPlayingPage {
padding: 5em 0 0 0 !important;
}
.nowPlayingInfoContainer {
display: -webkit-box;
display: -webkit-flex;
@ -36,8 +40,30 @@
margin: 0 0 0.5em 0.5em;
}
.nowPlayingAlbum a,
.nowPlayingArtist a {
font-weight: normal;
text-align: left !important;
color: inherit !important;
}
.nowPlayingButtonsContainer {
display: flex;
}
.nowPlayingInfoContainerMedia {
text-align: left;
margin-bottom: 1em;
}
.nowPlayingPositionSlider {
width: stretch;
}
.nowPlayingPositionSliderContainer {
margin: 0.7em 0 0.7em 1em;
margin: 0.2em 1em 0.2em 1em;
width: 100%;
z-index: 0;
}
.nowPlayingInfoButtons {
@ -59,17 +85,32 @@
}
.nowPlayingPageImageContainer {
width: 20%;
margin-right: 0.25em;
width: 16%;
margin-right: 1em;
position: relative;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
@media all and (min-width: 50em) {
.nowPlayingPageImageContainer {
width: 16%;
}
.nowPlayingPageImageContainerNoAlbum {
width: 100%;
position: relative;
}
.nowPlayingPageImageContainerNoAlbum button {
cursor: default;
}
.nowPlayingPageImageContainerNoAlbum::after {
content: "";
display: block;
padding-bottom: 100%;
}
.btnPlayPause {
font-size: xx-large;
padding: 0;
margin: 0;
}
.nowPlayingInfoControls {
@ -87,14 +128,15 @@
}
.nowPlayingPageImage {
display: block;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 100%;
-webkit-box-shadow: 0 0 1.9vh #000;
box-shadow: 0 0 1.9vh #000;
border: 0.1em solid #222;
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
@ -102,60 +144,16 @@
-ms-user-select: none;
}
@media all and (orientation: portrait) and (max-width: 50em) {
.nowPlayingInfoContainer {
-webkit-box-orient: vertical !important;
-webkit-box-direction: normal !important;
-webkit-flex-direction: column !important;
flex-direction: column !important;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
}
.nowPlayingPageTitle {
text-align: center;
margin: 0.5em 0 0.75em;
}
.nowPlayingPositionSliderContainer {
margin: 0.7em 1em;
}
.nowPlayingInfoButtons {
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.nowPlayingPageImageContainer {
width: auto;
margin-right: 0;
}
.nowPlayingInfoControls {
margin-top: 1em;
max-width: 100%;
}
.nowPlayingPageImage {
width: auto;
height: 36vh;
}
.contextMenuList {
padding: 1.5em 0;
}
@media all and (orientation: portrait) and (max-width: 40em) {
.nowPlayingPageImage {
height: 30vh;
}
.contextMenuList a {
color: inherit !important;
}
.nowPlayingTime {
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
margin: 0 1em;
.contextMenuList i.listItemIcon {
font-size: x-large;
}
.nowPlayingSecondaryButtons {
@ -167,12 +165,17 @@
align-items: center;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
z-index: 0;
}
@media all and (min-width: 50em) {
@media all and (min-width: 63em) {
.nowPlayingPage {
padding: 8em 0 0 0 !important;
}
.nowPlayingSecondaryButtons {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
@ -181,6 +184,16 @@
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
.nowPlayingPageUserDataButtonsTitle {
display: none !important;
}
.playlistSectionButton,
.nowPlayingPlaylist,
.nowPlayingContextMenu {
background: unset !important;
}
}
@media all and (min-width: 80em) {
@ -189,6 +202,414 @@
}
}
@media all and (orientation: portrait) and (max-width: 47em) {
.remoteControlContent {
padding-left: 7.3% !important;
padding-right: 7.3% !important;
display: flex;
height: 100%;
flex-direction: column;
}
.nowPlayingInfoContainer {
-webkit-box-orient: vertical !important;
-webkit-box-direction: normal !important;
-webkit-flex-direction: column !important;
flex-direction: column !important;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
width: 100%;
height: calc(100% - 4.2em);
}
.nowPlayingPageTitle {
/* text-align: center; */
margin: 0;
}
.nowPlayingAlbum,
.nowPlayingArtist {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nowPlayingInfoContainerMedia {
text-align: left !important;
width: 80%;
}
.nowPlayingPositionSliderContainer {
margin: 0.2em 1em 0.2em 1em;
}
.nowPlayingInfoButtons {
/* margin: 1.5em 0 0 0; */
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
font-size: x-large;
height: 100%;
}
.nowPlayingPageImageContainer {
width: 100%;
margin: auto auto 0.5em;
}
.nowPlayingPageImageContainerNoAlbum .cardImageContainer .cardImageIcon {
font-size: 15em;
color: inherit;
}
.nowPlayingInfoControls {
margin: 0.5em 0 1em 0;
width: 100%;
-webkit-box-pack: start !important;
-webkit-justify-content: start !important;
justify-content: start !important;
}
.nowPlayingSecondaryButtons {
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.nowPlayingInfoControls .nowPlayingPageUserDataButtonsTitle {
width: 20%;
font-size: large;
}
.nowPlayingInfoControls .nowPlayingPageUserDataButtonsTitle button {
padding-top: 0;
padding-right: 0;
margin-right: 0;
float: right;
border-radius: 0;
}
.nowPlayingInfoButtons .btnRewind {
position: absolute;
left: 0;
margin-left: 0;
padding-left: 7.3%;
font-size: smaller;
}
.nowPlayingInfoButtons .btnFastForward {
position: absolute;
right: 0;
margin-right: 0;
padding-right: 7.3%;
font-size: smaller;
}
.paper-icon-button-light:hover {
color: #fff !important;
background-color: transparent !important;
}
.btnPlayPause {
padding: 0;
margin: 0;
font-size: 1.7em;
}
.btnPlayPause:hover {
background-color: transparent !important;
}
.nowPlayingPageImage {
/* width: inherit; */
overflow-y: hidden;
overflow: hidden;
margin: 0 auto;
}
.nowPlayingPageImage.nowPlayingPageImageAudio {
width: 100%;
}
.nowPlayingPageImageContainer.nowPlayingPageImagePoster {
height: 50%;
overflow: hidden;
}
.nowPlayingPageImageContainer.nowPlayingPageImagePoster img {
height: 100%;
width: auto;
}
#nowPlayingPage .playlistSection .playlist,
#nowPlayingPage .playlistSection .contextMenu {
position: absolute;
top: 12.2em;
bottom: 4.2em;
overflow: scroll;
padding: 0 1em;
display: inline-block;
left: 0;
right: 0;
z-index: 1000;
}
.playlistSectionButton {
position: fixed;
bottom: 0;
left: 0;
height: 4.2em;
right: 0;
padding-left: 7.3%;
padding-right: 7.3%;
}
.playlistSectionButton .btnTogglePlaylist {
font-size: larger;
margin: 0;
padding-left: 0;
}
.playlistSectionButton .btnSavePlaylist {
margin: 0;
padding-right: 0;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
border-radius: 0;
}
.playlistSectionButton .btnToggleContextMenu {
font-size: larger;
margin: 0;
padding-right: 0;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
border-radius: 0;
}
.playlistSectionButton .volumecontrol {
width: 100%;
}
.remoteControlSection {
margin: 0;
padding: 0 0 4.2em 0;
}
.nowPlayingButtonsContainer {
display: flex;
height: 100%;
flex-direction: column;
}
}
@media all and (orientation: landscape) and (max-width: 63em) {
.remoteControlContent {
padding-left: 4.3% !important;
padding-right: 4.3% !important;
display: flex;
height: 100%;
flex-direction: column;
}
.nowPlayingInfoContainer {
-webkit-box-orient: horizontal !important;
-webkit-box-direction: normal !important;
-webkit-flex-direction: row !important;
flex-direction: row !important;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
width: 100%;
height: calc(100% - 4.2em);
}
.nowPlayingPageTitle {
/* text-align: center; */
margin: 0;
}
.nowPlayingInfoContainerMedia {
text-align: left !important;
width: 80%;
}
.nowPlayingPositionSliderContainer {
margin: 0.2em 1em 0.2em 1em;
}
.nowPlayingInfoButtons {
/* margin: 1.5em 0 0 0; */
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
font-size: x-large;
height: 100%;
}
.nowPlayingPageImageContainer {
width: 30%;
margin: auto 1em auto auto;
}
.nowPlayingPageImageContainerNoAlbum .cardImageContainer .cardImageIcon {
font-size: 12em;
color: inherit;
}
.nowPlayingInfoControls {
margin: 0.5em 0 1em 0;
width: 100%;
-webkit-box-pack: start !important;
-webkit-justify-content: start !important;
justify-content: start !important;
}
.nowPlayingSecondaryButtons {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.nowPlayingInfoControls .nowPlayingPageUserDataButtonsTitle {
width: 20%;
font-size: large;
}
.nowPlayingInfoControls .nowPlayingPageUserDataButtonsTitle button {
padding-top: 0;
padding-right: 0;
margin-right: 0;
float: right;
border-radius: 0;
}
.paper-icon-button-light:hover {
color: #fff !important;
background-color: transparent !important;
}
.btnPlayPause {
padding: 0;
margin: 0;
font-size: 1.7em;
}
.btnPlayPause:hover {
background-color: transparent !important;
}
.nowPlayingPageImage {
/* width: inherit; */
overflow-y: hidden;
overflow: hidden;
margin: 0 auto;
}
.nowPlayingPageImage.nowPlayingPageImageAudio {
width: 100%;
}
.nowPlayingPageImageContainer.nowPlayingPageImagePoster {
height: 100%;
overflow: hidden;
}
.nowPlayingPageImageContainer.nowPlayingPageImagePoster img {
height: 100%;
width: auto;
}
#nowPlayingPage .playlistSection .playlist,
#nowPlayingPage .playlistSection .contextMenu {
position: absolute;
top: 7.2em;
bottom: 4.2em;
overflow: scroll;
padding: 0 1em;
display: inline-block;
left: 0;
right: 0;
z-index: 1000;
}
.playlistSectionButton {
position: fixed;
bottom: 0;
left: 0;
height: 4.2em;
right: 0;
padding-left: 4.3%;
padding-right: 4.3%;
}
.playlistSectionButton .btnTogglePlaylist {
font-size: larger;
margin: 0;
padding-left: 0;
}
.playlistSectionButton .btnSavePlaylist {
margin: 0;
padding-right: 0;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
border-radius: 0;
}
.playlistSectionButton .btnToggleContextMenu {
font-size: larger;
margin: 0;
padding-right: 0;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
border-radius: 0;
}
.playlistSectionButton .volumecontrol {
width: 100%;
}
.remoteControlSection {
margin: 4.2em 0 0 0;
padding: 0 0 4.2em 0;
}
.nowPlayingButtonsContainer {
display: flex;
height: 100%;
flex-direction: column;
}
}
.nowPlayingTime {
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
margin: 0 1em;
}
.nowPlayingNavButtonContainer {
width: 30em;
}
@ -214,8 +635,11 @@
width: 9em;
}
@media all and (max-width: 50em) {
.nowPlayingInfoButtons .nowPlayingPageUserDataButtons {
@media all and (max-width: 63em) {
.nowPlayingSecondaryButtons .nowPlayingPageUserDataButtons,
.nowPlayingSecondaryButtons .repeatToggleButton,
.nowPlayingInfoButtons .playlist .listItemMediaInfo,
.nowPlayingInfoButtons .btnStop {
display: none !important;
}
@ -223,17 +647,3 @@
font-size: 4em;
}
}
@media all and (max-width: 47em) {
.nowPlayingInfoButtons .repeatToggleButton {
display: none !important;
}
}
@media all and (max-width: 34em) {
.nowPlayingInfoButtons .btnNowPlayingFastForward,
.nowPlayingInfoButtons .btnNowPlayingRewind,
.nowPlayingInfoButtons .playlist .listItemMediaInfo {
display: none !important;
}
}

161
src/components/remotecontrol/remotecontrol.js
View file

@ -1,4 +1,4 @@
define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageLoader", "playbackManager", "nowPlayingHelper", "events", "connectionManager", "apphost", "globalize", "layoutManager", "userSettings", "cardStyle", "emby-itemscontainer", "css!./remotecontrol.css", "emby-ratingbutton"], function (browser, datetime, backdrop, libraryBrowser, listView, imageLoader, playbackManager, nowPlayingHelper, events, connectionManager, appHost, globalize, layoutManager, userSettings) {
define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageLoader", "playbackManager", "nowPlayingHelper", "events", "connectionManager", "apphost", "globalize", "layoutManager", "userSettings", "cardBuilder", "cardStyle", "emby-itemscontainer", "css!./remotecontrol.css", "emby-ratingbutton"], function (browser, datetime, backdrop, libraryBrowser, listView, imageLoader, playbackManager, nowPlayingHelper, events, connectionManager, appHost, globalize, layoutManager, userSettings, cardBuilder) {
"use strict";
function showAudioMenu(context, player, button, item) {
@ -110,49 +110,93 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
return null;
}
function updateNowPlayingInfo(context, state) {
function updateNowPlayingInfo(context, state, serverId) {
var item = state.NowPlayingItem;
var displayName = item ? getNowPlayingNameHtml(item).replace("<br/>", " - ") : "";
context.querySelector(".nowPlayingPageTitle").innerHTML = displayName;
if (typeof item !== 'undefined') {
var nowPlayingServerId = (item.ServerId || serverId);
if (item.Type == "Audio" || item.MediaStreams[0].Type == "Audio") {
var songName = item.Name;
if (item.Album != null && item.Artists != null) {
var albumName = item.Album;
var artistName;
if (item.ArtistItems != null) {
artistName = item.ArtistItems[0].Name;
context.querySelector(".nowPlayingAlbum").innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.AlbumId + `&amp;serverId=${nowPlayingServerId}">${albumName}</a>`;
context.querySelector(".nowPlayingArtist").innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.ArtistItems[0].Id + `&amp;serverId=${nowPlayingServerId}">${artistName}</a>`;
context.querySelector(".contextMenuAlbum").innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.AlbumId + `&amp;serverId=${nowPlayingServerId}"><i class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons album"></i> ` + globalize.translate("ViewAlbum") + '</a>';
context.querySelector(".contextMenuArtist").innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.ArtistItems[0].Id + `&amp;serverId=${nowPlayingServerId}"><i class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons person"></i> ` + globalize.translate("ViewArtist") + '</a>';
} else {
artistName = item.Artists;
context.querySelector(".nowPlayingAlbum").innerHTML = albumName;
context.querySelector(".nowPlayingArtist").innerHTML = artistName;
}
}
context.querySelector(".nowPlayingSongName").innerHTML = songName;
} else if (item.Type == "Episode") {
if (item.SeasonName != null) {
var seasonName = item.SeasonName;
context.querySelector(".nowPlayingSeason").innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.SeasonId + `&amp;serverId=${nowPlayingServerId}">${seasonName}</a>`;
}
if (item.SeriesName != null) {
var seriesName = item.SeriesName;
if (item.SeriesId !=null) {
context.querySelector(".nowPlayingSerie").innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.SeriesId + `&amp;serverId=${nowPlayingServerId}">${seriesName}</a>`;
} else {
context.querySelector(".nowPlayingSerie").innerHTML = seriesName;
}
}
context.querySelector(".nowPlayingEpisode").innerHTML = item.Name;
} else {
context.querySelector(".nowPlayingPageTitle").innerHTML = displayName;
}
if (displayName.length > 0) {
context.querySelector(".nowPlayingPageTitle").classList.remove("hide");
} else {
context.querySelector(".nowPlayingPageTitle").classList.add("hide");
}
if (displayName.length > 0 && item.Type != "Audio" && item.Type != "Episode") {
context.querySelector(".nowPlayingPageTitle").classList.remove("hide");
} else {
context.querySelector(".nowPlayingPageTitle").classList.add("hide");
}
var url = item ? seriesImageUrl(item, {
maxHeight: 300 * 2
}) || imageUrl(item, {
maxHeight: 300 * 2
}) : null;
var url = item ? seriesImageUrl(item, {
maxHeight: 300 * 2
}) || imageUrl(item, {
maxHeight: 300 * 2
}) : null;
console.debug("updateNowPlayingInfo");
setImageUrl(context, url);
if (item) {
backdrop.setBackdrops([item]);
var apiClient = connectionManager.getApiClient(item.ServerId);
apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) {
var userData = fullItem.UserData || {};
var likes = null == userData.Likes ? "" : userData.Likes;
context.querySelector(".nowPlayingPageUserDataButtons").innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + fullItem.Id + '" data-serverid="' + fullItem.ServerId + '" data-itemtype="' + fullItem.Type + '" data-likes="' + likes + '" data-isfavorite="' + userData.IsFavorite + '"><i class="material-icons">favorite</i></button>';
});
} else {
backdrop.clear();
context.querySelector(".nowPlayingPageUserDataButtons").innerHTML = "";
console.debug("updateNowPlayingInfo");
setImageUrl(context, state, url);
if (item) {
backdrop.setBackdrops([item]);
var apiClient = connectionManager.getApiClient(item.ServerId);
apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) {
var userData = fullItem.UserData || {};
var likes = null == userData.Likes ? "" : userData.Likes;
context.querySelector(".nowPlayingPageUserDataButtonsTitle").innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + fullItem.Id + '" data-serverid="' + fullItem.ServerId + '" data-itemtype="' + fullItem.Type + '" data-likes="' + likes + '" data-isfavorite="' + userData.IsFavorite + '"><i class="material-icons">favorite</i></button>';
context.querySelector(".nowPlayingPageUserDataButtons").innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + fullItem.Id + '" data-serverid="' + fullItem.ServerId + '" data-itemtype="' + fullItem.Type + '" data-likes="' + likes + '" data-isfavorite="' + userData.IsFavorite + '"><i class="material-icons">favorite</i></button>';
});
} else {
backdrop.clear();
context.querySelector(".nowPlayingPageUserDataButtons").innerHTML = "";
}
}
}
function setImageUrl(context, url) {
function setImageUrl(context, state, url) {
currentImgUrl = url;
var item = state.NowPlayingItem;
var imgContainer = context.querySelector(".nowPlayingPageImageContainer");
if (url) {
imgContainer.innerHTML = '<img class="nowPlayingPageImage" src="' + url + '" />';
imgContainer.classList.remove("hide");
if (item.Type == "Audio") {
context.querySelector(".nowPlayingPageImage").classList.add("nowPlayingPageImageAudio");
context.querySelector(".nowPlayingPageImageContainer").classList.remove("nowPlayingPageImageAudio");
} else {
context.querySelector(".nowPlayingPageImageContainer").classList.add("nowPlayingPageImagePoster");
context.querySelector(".nowPlayingPageImage").classList.remove("nowPlayingPageImageAudio");
}
} else {
imgContainer.classList.add("hide");
imgContainer.innerHTML = "";
imgContainer.innerHTML = '<div class="nowPlayingPageImageContainerNoAlbum"><button data-action="link" class="cardContent-button cardImageContainer coveredImage ' + cardBuilder.getDefaultBackgroundClass(item.Name) + ' cardContent cardContent-shadow itemAction"><i class="cardImageIcon material-icons">album</i></button></div>';
}
}
@ -199,28 +243,35 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
var supportedCommands = playerInfo.supportedCommands;
currentPlayerSupportedCommands = supportedCommands;
var playState = state.PlayState || {};
buttonVisible(context.querySelector(".btnToggleFullscreen"), item && "Video" == item.MediaType && -1 != supportedCommands.indexOf("ToggleFullscreen"));
var isSupportedCommands = supportedCommands.includes("DisplayMessage") || supportedCommands.includes("SendString") || supportedCommands.includes("Select");
buttonVisible(context.querySelector(".btnToggleFullscreen"), item && "Video" == item.MediaType && supportedCommands.includes("ToggleFullscreen"));
updateAudioTracksDisplay(player, context);
updateSubtitleTracksDisplay(player, context);
if (-1 != supportedCommands.indexOf("DisplayMessage") && !currentPlayer.isLocalPlayer) {
if (supportedCommands.includes("DisplayMessage") && !currentPlayer.isLocalPlayer) {
context.querySelector(".sendMessageSection").classList.remove("hide");
} else {
context.querySelector(".sendMessageSection").classList.add("hide");
}
if (-1 != supportedCommands.indexOf("SendString") && !currentPlayer.isLocalPlayer) {
if (supportedCommands.includes("SendString") && !currentPlayer.isLocalPlayer) {
context.querySelector(".sendTextSection").classList.remove("hide");
} else {
context.querySelector(".sendTextSection").classList.add("hide");
}
if (-1 != supportedCommands.indexOf("Select") && !currentPlayer.isLocalPlayer) {
if (supportedCommands.includes("Select") && !currentPlayer.isLocalPlayer) {
context.querySelector(".navigationSection").classList.remove("hide");
} else {
context.querySelector(".navigationSection").classList.add("hide");
}
if (isSupportedCommands && !currentPlayer.isLocalPlayer) {
context.querySelector(".remoteControlSection").classList.remove("hide");
} else {
context.querySelector(".remoteControlSection").classList.add("hide");
}
buttonVisible(context.querySelector(".btnStop"), null != item);
buttonVisible(context.querySelector(".btnNextTrack"), null != item);
buttonVisible(context.querySelector(".btnPreviousTrack"), null != item);
@ -331,7 +382,7 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
function updatePlayPauseState(isPaused, isActive) {
var context = dlg;
var btnPlayPause = context.querySelector(".btnPlayPause");
btnPlayPause.querySelector("i").innerHTML = isPaused ? "&#xE037;" : "pause";
btnPlayPause.querySelector("i").innerHTML = isPaused ? "&#xE038;" : "&#xE035;";
buttonVisible(btnPlayPause, isActive);
}
@ -374,9 +425,9 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
});
if (items.length) {
context.querySelector(".playlistSection").classList.remove("hide");
context.querySelector(".btnTogglePlaylist").classList.remove("hide");
} else {
context.querySelector(".playlistSection").classList.add("hide");
context.querySelector(".btnTogglePlaylist").classList.add("hide");
}
var itemsContainer = context.querySelector(".playlist");
@ -393,6 +444,9 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
}
imageLoader.lazyChildren(itemsContainer);
context.querySelector(".playlist").classList.add("hide");
context.querySelector(".contextMenu").classList.add("hide");
context.querySelector(".btnSavePlaylist").classList.add("hide");
});
}
@ -618,6 +672,18 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
playbackManager.setVolume(this.value, currentPlayer);
}
var contextmenuHtml = '<button id="toggleContextMenu" is="paper-icon-button-light" class="btnToggleContextMenu" title=' + globalize.translate('ButtonToggleContextMenu') + '><i class="material-icons more_vert"></i></button>';
var volumecontrolHtml = '<div class="volumecontrol flex align-items-center flex-wrap-wrap justify-content-center">';
volumecontrolHtml += '<button is="paper-icon-button-light" class="buttonMute autoSize" title=' + globalize.translate('Mute') + '><i class="xlargePaperIconButton material-icons"></i></button>';
volumecontrolHtml += '<div class="sliderContainer nowPlayingVolumeSliderContainer"><input is="emby-slider" type="range" step="1" min="0" max="100" value="0" class="nowPlayingVolumeSlider"/></div>';
volumecontrolHtml += '</div>';
if (!layoutManager.mobile) {
context.querySelector(".nowPlayingSecondaryButtons").innerHTML += volumecontrolHtml;
context.querySelector(".playlistSectionButton").innerHTML += contextmenuHtml;
} else {
context.querySelector(".playlistSectionButton").innerHTML += volumecontrolHtml + contextmenuHtml;
}
context.querySelector(".nowPlayingVolumeSlider").addEventListener("change", setVolume);
context.querySelector(".nowPlayingVolumeSlider").addEventListener("mousemove", setVolume);
context.querySelector(".nowPlayingVolumeSlider").addEventListener("touchmove", setVolume);
@ -634,6 +700,27 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
playbackManager.movePlaylistItem(playlistItemId, newIndex, currentPlayer);
});
context.querySelector(".btnSavePlaylist").addEventListener("click", savePlaylist);
context.querySelector(".btnTogglePlaylist").addEventListener("click", function () {
if (context.querySelector(".playlist").classList.contains("hide")) {
context.querySelector(".playlist").classList.remove("hide");
context.querySelector(".btnSavePlaylist").classList.remove("hide");
context.querySelector(".contextMenu").classList.add("hide");
context.querySelector(".volumecontrol").classList.add("hide");
} else {
context.querySelector(".playlist").classList.add("hide");
context.querySelector(".btnSavePlaylist").classList.add("hide");
context.querySelector(".volumecontrol").classList.remove("hide");
}
});
context.querySelector(".btnToggleContextMenu").addEventListener("click", function () {
if (context.querySelector(".contextMenu").classList.contains("hide")) {
context.querySelector(".contextMenu").classList.remove("hide");
context.querySelector(".btnSavePlaylist").classList.add("hide");
context.querySelector(".playlist").classList.add("hide");
} else {
context.querySelector(".contextMenu").classList.add("hide");
}
});
}
function onPlayerChange() {

129
src/nowplaying.html
View file

@ -1,57 +1,71 @@
<div id="nowPlayingPage" data-role="page" class="page libraryPage nowPlayingPage noSecondaryNavPage selfBackdropPage" data-title="-" style="padding:6em 0 0!important;">
<div id="nowPlayingPage" data-role="page" class="page libraryPage nowPlayingPage noSecondaryNavPage selfBackdropPage" data-title="-">
<div class="remoteControlContent padded-left padded-right">
<div class="nowPlayingInfoContainer">
<div class="nowPlayingPageImageContainer"></div>
<div class="nowPlayingInfoControls">
<div class="flex">
<h2 class="nowPlayingPageTitle"></h2>
<div class="sliderContainer nowPlayingPositionSliderContainer">
<input type="range" is="emby-slider" pin step="1" min="0" max="100" value="0" class="nowPlayingPositionSlider" data-slider-keep-progress="true" />
<div class="nowPlayingInfoContainerMedia">
<h2 class="nowPlayingPageTitle"></h2>
<div style="font-weight: bold;" class="nowPlayingSongName nowPlayingEpisode"></div>
<div class="nowPlayingAlbum nowPlayingSeason"></div>
<div class="nowPlayingArtist nowPlayingSerie"></div>
</div>
<div class="nowPlayingPageUserDataButtonsTitle"></div>
</div>
<div class="sliderContainer flex">
<div class="positionTime"></div>
<div class="nowPlayingPositionSliderContainer">
<input type="range" is="emby-slider" pin step="1" min="0" max="100" value="0" class="nowPlayingPositionSlider" data-slider-keep-progress="true" />
</div>
<div class="runtime"></div>
</div>
<div class="nowPlayingButtonsContainer">
<div class="nowPlayingInfoButtons focuscontainer-x">
<button is="paper-icon-button-light" class="btnRewind btnNowPlayingRewind btnPlayStateCommand autoSize" title="${Rewind}">
<i class="material-icons replay_10"></i>
</button>
<button is="paper-icon-button-light" class="btnPreviousTrack btnPlayStateCommand autoSize" title="${ButtonPreviousTrack}">
<i class="material-icons skip_previous"></i>
</button>
<div class="nowPlayingInfoButtons focuscontainer-x">
<button is="paper-icon-button-light" class="btnPreviousTrack btnPlayStateCommand autoSize" title="${ButtonPreviousTrack}">
<i class="material-icons skip_previous"></i>
</button>
<button is="paper-icon-button-light" class="btnPlayPause btnPlayStateCommand autoSize" title="${ButtonPause}">
<i class="material-icons">pause</i>
</button>
<button is="paper-icon-button-light" class="btnRewind btnNowPlayingRewind btnPlayStateCommand autoSize" title="${Rewind}">
<i class="material-icons fast_rewind"></i>
</button>
<button is="paper-icon-button-light" class="btnPlayStateCommand btnStop autoSize" title="${ButtonStop}">
<i class="material-icons">stop</i>
</button>
<button is="paper-icon-button-light" class="btnPlayPause btnPlayStateCommand autoSize" title="${ButtonPause}">
<i class="material-icons">pause</i>
</button>
<button is="paper-icon-button-light" class="btnPlayStateCommand btnStop autoSize" title="${ButtonStop}">
<i class="material-icons">stop</i>
</button>
<button is="paper-icon-button-light" class="btnPlayStateCommand btnFastForward btnNowPlayingFastForward autoSize" title="${FastForward}">
<i class="material-icons fast_forward"></i>
</button>
<button is="paper-icon-button-light" class="btnPlayStateCommand btnNextTrack autoSize" title="${ButtonNextTrack}">
<i class="material-icons skip_next"></i>
</button>
<button is="paper-icon-button-light" class="btnAudioTracks videoButton btnPlayStateCommand autoSize" title="${ButtonAudioTracks}" data-command="GoToSearch">
<i class="material-icons">audiotrack</i>
</button>
<button is="paper-icon-button-light" class="btnSubtitles videoButton btnPlayStateCommand autoSize" title="${ButtonSubtitles}" data-command="GoToSearch">
<i class="material-icons closed_caption"></i>
</button>
<div class="nowPlayingTime">
<div class="positionTime"></div>
<div style="margin: 0 .25em;">/</div>
<div class="runtime"></div>
<button is="paper-icon-button-light" class="btnPlayStateCommand btnNextTrack autoSize" title="${ButtonNextTrack}">
<i class="material-icons skip_next"></i>
</button>
<button is="paper-icon-button-light" class="btnPlayStateCommand btnFastForward btnNowPlayingFastForward autoSize" title="${FastForward}">
<i class="material-icons forward_30"></i>
</button>
</div>
<div class="nowPlayingSecondaryButtons">
<button is="paper-icon-button-light" class="btnAudioTracks videoButton btnPlayStateCommand autoSize" title="${ButtonAudioTracks}" data-command="GoToSearch">
<i class="material-icons">audiotrack</i>
</button>
<button is="paper-icon-button-light" class="btnSubtitles videoButton btnPlayStateCommand autoSize" title="${ButtonSubtitles}" data-command="GoToSearch">
<i class="material-icons closed_caption"></i>
</button>
<div class="nowPlayingPageUserDataButtons"></div>
<button is="paper-icon-button-light" class="btnToggleFullscreen videoButton btnPlayStateCommand autoSize" title="${ButtonFullscreen}" data-command="ToggleFullscreen">
@ -62,17 +76,11 @@
<i class="material-icons">repeat</i>
</button>
<button is="paper-icon-button-light" class="buttonMute autoSize" title="${Mute}">
<i class="xlargePaperIconButton material-icons"></i>
</button>
<div class="sliderContainer nowPlayingVolumeSliderContainer">
<input is="emby-slider" type="range" step="1" min="0" max="100" value="0" class="nowPlayingVolumeSlider" />
</div>
</div>
</div>
</div>
</div>
<div>
<div class="remoteControlSection">
<div class="navigationSection">
<div is="emby-collapse" title="${HeaderNavigation}">
<div class="collapseContent">
@ -120,8 +128,6 @@
</div>
</div>
</div>
</div>
<div>
<div class="sendMessageSection">
<div is="emby-collapse" title="${HeaderSendMessage}">
<div class="collapseContent" style="text-align: left;">
@ -155,21 +161,22 @@
</div>
</div>
</div>
<br />
<div class="playlistSection hide">
<div style="display: flex; align-items: center;margin:2em 0 1em">
<h2 style="margin:0;">${TabPlaylist}</h2>
<button is="paper-icon-button-light" class="btnSavePlaylist" title="${ButtonSave}" style="margin-left:1em;">
<i class="material-icons">save</i>
<div class="playlistSection">
<div class="playlistSectionButton flex align-items-center justify-content-center">
<button id="togglePlaylist" is="paper-icon-button-light" class="btnTogglePlaylist" title="${ButtonTogglePlaylist}">
<i class="material-icons queue_music"></i>
</button>
<button is="paper-icon-button-light" class="btnSavePlaylist" title="${ButtonSave}">
<i class="material-icons save"></i>
</button>
</div>
<div class="playlist itemsContainer vertical-list" is="emby-itemscontainer" data-dragreorder="true">
<div id="playlist" class="playlist itemsContainer vertical-list nowPlayingPlaylist hide" is="emby-itemscontainer" data-dragreorder="true"></div>
<div id="contextMenu" class="contextMenu itemsContainer vertical-list nowPlayingContextMenu hide" is="emby-itemscontainer">
<div class="listItem listItem-border contextMenuList contextMenuArtist">
</div>
<div class="listItem listItem-border contextMenuList contextMenuAlbum">
</div>
</div>
</div>
<br />
<br />
<br />
<br />
</div>
</div>

7
src/themes/appletv/theme.css
View file

@ -43,7 +43,9 @@ html {
}
.backgroundContainer,
.dialog {
.dialog,
.nowPlayingPlaylist,
.nowPlayingContextMenu {
background: #d5e9f2;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
@ -186,7 +188,8 @@ html {
}
.appfooter,
.formDialogFooter:not(.formDialogFooter-clear) {
.formDialogFooter:not(.formDialogFooter-clear),
.playlistSectionButton {
color: rgba(0, 0, 0, 0.7);
background: #303030;
background: -webkit-gradient(linear, left top, right top, from(#bcbcbc), color-stop(#a7b4b7), color-stop(#beb5a5), color-stop(#adbec2), to(#b9c7cb));

5
src/themes/blueradiance/theme.css
View file

@ -42,6 +42,8 @@ html {
}
.dialog,
.nowPlayingPlaylist,
.nowPlayingContextMenu,
html {
background-color: #033361;
}
@ -179,7 +181,8 @@ html {
color: rgba(255, 255, 255, 0.87);
}
.appfooter {
.appfooter,
.playlistSectionButton {
background: #033664;
color: #ccc;
color: rgba(255, 255, 255, 0.78);

5
src/themes/dark/theme.css
View file

@ -36,6 +36,8 @@ html {
.backgroundContainer,
.dialog,
.nowPlayingPlaylist,
.nowPlayingContextMenu,
html {
background-color: #101010;
}
@ -161,7 +163,8 @@ html {
color: rgba(255, 255, 255, 0.87);
}
.appfooter {
.appfooter,
.playlistSectionButton {
background: #202020;
color: #ccc;
color: rgba(255, 255, 255, 0.78);

7
src/themes/light/theme.css
View file

@ -51,7 +51,9 @@ html {
background-color: rgba(255, 255, 255, 0.8);
}
.dialog {
.dialog,
.nowPlayingPlaylist,
.nowPlayingContextMenu {
background-color: #f0f0f0;
}
@ -183,7 +185,8 @@ html {
color: rgba(255, 255, 255, 0.87);
}
.appfooter {
.appfooter,
.playlistSectionButton {
background: #282828;
color: #ccc;
color: rgba(255, 255, 255, 0.78);

5
src/themes/purplehaze/theme.css
View file

@ -37,6 +37,8 @@ html {
}
.dialog,
.nowPlayingPlaylist,
.nowPlayingContextMenu,
html {
background-color: #230c33;
}
@ -269,7 +271,8 @@ a[data-role=button] {
color: rgba(255, 255, 255, 0.87);
}
.appfooter {
.appfooter,
.playlistSectionButton {
background: #06256f;
color: #ccc;
color: rgba(255, 255, 255, 0.78);

7
src/themes/wmc/theme.css
View file

@ -48,7 +48,9 @@ html {
}
.backgroundContainer,
.dialog {
.dialog,
.nowPlayingPlaylist,
.nowPlayingContextMenu {
background: -webkit-gradient(linear, left top, left bottom, from(#0f3562), color-stop(#1162a4), to(#03215f));
background: -webkit-linear-gradient(top, #0f3562, #1162a4, #03215f);
background: -o-linear-gradient(top, #0f3562, #1162a4, #03215f);
@ -172,7 +174,8 @@ html {
}
.appfooter,
.formDialogFooter:not(.formDialogFooter-clear) {
.formDialogFooter:not(.formDialogFooter-clear),
.playlistSectionButton {
background: #0c2450;
background: -webkit-gradient(linear, left bottom, left top, from(#0c2450), to(#081b3b));
background: -webkit-linear-gradient(bottom, #0c2450, #081b3b);