cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-17 10:58:20 -07:00
Code Issues Packages Projects Releases Wiki Activity

As requested by @MrTimscampi + theme adjustement

Browse Source
This commit is contained in:
samuel9554 2020-04-16 15:45:32 -04:00
parent df3a7a75d2
commit a1c40bd8a8
10 changed files with 51 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/nowplayingbar/nowplayingbar.js
View File

@ -439,7 +439,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
text = itemHelper.getDisplayName(item);
}
return '<a>' + text + '</a>';
return `<a>${text}</a>`;
}
function seriesImageUrl(item, options) {
@ -522,10 +522,11 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
var cssClass = nowPlayingName.secondary ? ' class="nowPlayingBarSecondaryText"' : '';
if (nowPlayingName.item) {
return '<div' + cssClass + '>' + getTextActionButton(nowPlayingName.item, nowPlayingName.text) + '</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('');

19
src/components/remotecontrol/remotecontrol.css
View File

@ -40,6 +40,7 @@
.nowPlayingArtist a {
font-weight: normal;
text-align: left !important;
color: inherit !important;
}
.nowPlayingButtonsContainer {
@ -143,6 +144,10 @@
padding: 1.5em 0;
}
.contextMenuList a {
color: inherit !important;
}
.contextMenuList i.listItemIcon {
font-size: x-large;
}
@ -295,6 +300,7 @@
.btnPlayPause {
padding: 0;
margin: 0;
font-size: 1.7em;
}
.btnPlayPause:hover {
@ -332,7 +338,8 @@
display: inline-block;
left: 0;
right: 0;
background: #202020;
/* background: #202020; */
z-index: 1000;
}
@ -344,7 +351,8 @@
right: 0;
padding-left: 7.3%;
padding-right: 7.3%;
background-color: #101010;
/* background-color: #101010; */
}
.playlistSectionButton .btnTogglePlaylist {
@ -486,6 +494,7 @@
.btnPlayPause {
padding: 0;
margin: 0;
font-size: 1.7em;
}
.btnPlayPause:hover {
@ -523,7 +532,8 @@
display: inline-block;
left: 0;
right: 0;
background: #202020;
/* background: #202020; */
z-index: 1000;
}
@ -535,7 +545,8 @@
right: 0;
padding-left: 4.3%;
padding-right: 4.3%;
background-color: #101010;
/* background-color: #101010; */
}
.playlistSectionButton .btnTogglePlaylist {

24
src/components/remotecontrol/remotecontrol.js
View File

@ -113,8 +113,8 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
function updateNowPlayingInfo(context, state, serverId) {
var item = state.NowPlayingItem;
var displayName = item ? getNowPlayingNameHtml(item).replace("<br/>", " - ") : "";
console.debug(JSON.stringify(item, null, 4));
if (typeof item != 'undefined') {
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) {
@ -122,10 +122,10 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
var artistName;
if (item.ArtistItems != null) {
artistName = item.ArtistItems[0].Name;
context.querySelector(".nowPlayingAlbum").innerHTML = '<a style="color:inherit;" class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.AlbumId + '&amp;serverId=' + (item.ServerId || serverId) + '">' + albumName + '</a>';
context.querySelector(".nowPlayingArtist").innerHTML = '<a style="color:inherit;" class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.ArtistItems[0].Id + '&amp;serverId=' + (item.ServerId || serverId) + '">' + artistName + '</a>';
context.querySelector(".contextMenuAlbum").innerHTML = '<a style="color:inherit;" class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.AlbumId + '&amp;serverId=' + (item.ServerId || serverId) + '"><i class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons">album</i> ' + globalize.translate("ViewAlbum") + '</a>';
context.querySelector(".contextMenuArtist").innerHTML = '<a style="color:inherit;" class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.ArtistItems[0].Id + '&amp;serverId=' + (item.ServerId || serverId) + '"><i class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons">person</i> ' + globalize.translate("ViewArtist") + '</a>';
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;
@ -135,13 +135,15 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
context.querySelector(".nowPlayingSongName").innerHTML = songName;
} else if (item.Type == "Episode") {
if (item.SeasonName != null) {
context.querySelector(".nowPlayingSeason").innerHTML = '<a style="color:inherit;" class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.SeasonId + '&amp;serverId=' + (item.ServerId || serverId) + '">' + item.SeasonName + '</a>';
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 style="color:inherit;" class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.SeriesId + '&amp;serverId=' + (item.ServerId || serverId) + '">' + item.SeriesName + '</a>';
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 = item.SeriesName;
context.querySelector(".nowPlayingSerie").innerHTML = seriesName;
}
}
context.querySelector(".nowPlayingEpisode").innerHTML = item.Name;
@ -149,7 +151,7 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
context.querySelector(".nowPlayingPageTitle").innerHTML = displayName;
}
if (displayName.length > 0 && item.Type != "Audio") {
if (displayName.length > 0 && item.Type != "Audio" && item.Type != "Episode") {
context.querySelector(".nowPlayingPageTitle").classList.remove("hide");
} else {
context.querySelector(".nowPlayingPageTitle").classList.add("hide");
@ -379,7 +381,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 ? "play_circle_filled" : "pause_circle_filled";
btnPlayPause.querySelector("i").innerHTML = isPaused ? "&#xE038;" : "&#xE035;";
buttonVisible(btnPlayPause, isActive);
}

9
src/nowplaying.html
View File

@ -163,16 +163,15 @@
</div>
<div class="playlistSection">
<div class="playlistSectionButton flex align-items-center justify-content-center">
<!--<h2 style="margin:0;">${TabPlaylist}</h2>-->
<button id="togglePlaylist" is="paper-icon-button-light" class="btnTogglePlaylist" title="${ButtonTogglePlaylist}">
<i class="material-icons">queue_music</i>
<i class="material-icons queue_music"></i>
</button>
<button is="paper-icon-button-light" class="btnSavePlaylist" title="${ButtonSave}">
<i class="material-icons">save</i>
<i class="material-icons save"></i>
</button>
</div>
<div id="playlist" class="playlist itemsContainer vertical-list hide" is="emby-itemscontainer" data-dragreorder="true"></div>
<div id="contextMenu" class="contextMenu itemsContainer vertical-list hide" is="emby-itemscontainer">
<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">

4
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%;

2
src/themes/blueradiance/theme.css
View File

@ -42,6 +42,8 @@ html {
}
.dialog,
.nowPlayingPlaylist,
.nowPlayingContextMenu,
html {
background-color: #033361;
}

2
src/themes/dark/theme.css
View File

@ -36,6 +36,8 @@ html {
.backgroundContainer,
.dialog,
.nowPlayingPlaylist,
.nowPlayingContextMenu,
html {
background-color: #101010;
}

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

2
src/themes/purplehaze/theme.css
View File

@ -37,6 +37,8 @@ html {
}
.dialog,
.nowPlayingPlaylist,
.nowPlayingContextMenu,
html {
background-color: #230c33;
}

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