+
diff --git a/src/controllers/itemDetails/index.js b/src/controllers/itemDetails/index.js
index f837d3fc1d..fe5f8419d6 100644
--- a/src/controllers/itemDetails/index.js
+++ b/src/controllers/itemDetails/index.js
@@ -383,7 +383,7 @@ import 'emby-select';
itemType: 'MusicArtist',
serverId: serverId
});
- html.push('
' + artist.Name + '');
+ html.push('
' + artist.Name + '');
}
return html.join(' / ');
@@ -416,7 +416,7 @@ import 'emby-select';
}, {
context: context
});
- parentNameHtml.push('
' + item.SeriesName + '');
+ parentNameHtml.push('
' + item.SeriesName + '');
} else if (item.IsSeries || item.EpisodeTitle) {
parentNameHtml.push(item.Name);
}
@@ -431,7 +431,7 @@ import 'emby-select';
}, {
context: context
});
- parentNameHtml.push('
' + item.SeriesName + '');
+ parentNameHtml.push('
' + item.SeriesName + '');
} else if (item.ParentIndexNumber != null && item.Type === 'Episode') {
parentRoute = appRouter.getRouteUrl({
Id: item.SeasonId,
@@ -442,7 +442,7 @@ import 'emby-select';
}, {
context: context
});
- parentNameHtml.push('
' + item.SeasonName + '');
+ parentNameHtml.push('
' + item.SeasonName + '');
} else if (item.ParentIndexNumber != null && item.IsSeries) {
parentNameHtml.push(item.SeasonName || 'S' + item.ParentIndexNumber);
} else if (item.Album && item.AlbumId && (item.Type === 'MusicVideo' || item.Type === 'Audio')) {
@@ -455,7 +455,7 @@ import 'emby-select';
}, {
context: context
});
- parentNameHtml.push('
' + item.Album + '');
+ parentNameHtml.push('
' + item.Album + '');
} else if (item.Album) {
parentNameHtml.push(item.Album);
}
@@ -572,9 +572,13 @@ import 'emby-select';
// Start rendering the artwork first
renderImage(page, item);
- renderLogo(page, item, apiClient);
+
+ // Same some screen real estate in TV mode
+ if (!layoutManager.tv) {
+ renderLogo(page, item, apiClient);
+ renderDetailPageBackdrop(page, item, apiClient);
+ }
renderBackdrop(item);
- renderDetailPageBackdrop(page, item, apiClient);
// Render the main information for the item
page.querySelector('.detailPagePrimaryContainer').classList.add('detailRibbon');
@@ -766,6 +770,9 @@ import 'emby-select';
elem.innerHTML = cardHtml;
imageLoader.lazyChildren(elem);
+
+ // Avoid breaking the design by preventing focus of the poster using the keyboard.
+ elem.querySelector('button').tabIndex = -1;
}
function renderImage(page, item) {
@@ -1061,7 +1068,12 @@ import 'emby-select';
renderOverview(page, item);
renderMiscInfo(page, item);
reloadUserDataButtons(page, item);
- renderLinks(page, item);
+
+ // Don't allow redirection to other websites from the TV layout
+ if (!layoutManager.tv) {
+ renderLinks(page, item);
+ }
+
renderTags(page, item);
renderSeriesAirTime(page, item, isStatic);
}
@@ -1672,12 +1684,6 @@ import 'emby-select';
hideAll(page, 'btnPlay', false);
hideAll(page, 'btnShuffle', false);
}
-
- // HACK: Call autoFocuser again because btnPlay may be hidden, but focused by reloadFromItem
- // FIXME: Sometimes focus does not move until all (?) sections are loaded
- import('autoFocuser').then(({default: autoFocuser}) => {
- autoFocuser.autoFocus(page);
- });
}
function renderCollectionItemType(page, parentItem, type, items) {
@@ -1982,7 +1988,16 @@ import 'emby-select';
let currentItem;
const self = this;
const apiClient = params.serverId ? connectionManager.getApiClient(params.serverId) : ApiClient;
- view.querySelectorAll('.btnPlay');
+
+ const btnResume = view.querySelector('.mainDetailButtons .btnResume');
+ const btnPlay = view.querySelector('.mainDetailButtons .btnPlay');
+ if (layoutManager.tv && !btnResume.classList.contains('hide')) {
+ btnResume.classList.add('fab');
+ btnResume.classList.add('detailFloatingButton');
+ } else if (layoutManager.tv && btnResume.classList.contains('hide')) {
+ btnPlay.classList.add('fab');
+ btnPlay.classList.add('detailFloatingButton');
+ }
bindAll(view, '.btnPlay', 'click', onPlayClick);
bindAll(view, '.btnResume', 'click', onPlayClick);
bindAll(view, '.btnInstantMix', 'click', onInstantMixClick);
diff --git a/src/themes/appletv/theme.css b/src/themes/appletv/theme.css
index 8b91bda65a..ad18bf24c5 100644
--- a/src/themes/appletv/theme.css
+++ b/src/themes/appletv/theme.css
@@ -23,17 +23,17 @@ html {
.skinHeader-withBackground {
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));
- background: -webkit-linear-gradient(left, #bcbcbc, #a7b4b7, #beb5a5, #adbec2, #b9c7cb);
- background: -o-linear-gradient(left, #bcbcbc, #a7b4b7, #beb5a5, #adbec2, #b9c7cb);
background: linear-gradient(to right, #bcbcbc, #a7b4b7, #beb5a5, #adbec2, #b9c7cb);
}
.skinHeader.semiTransparent {
- -webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
+.layout-tv .skinHeader.semiTransparent {
+ background: none;
+}
+
.pageTitleWithDefaultLogo {
background-image: url(../../assets/img/banner-dark.png);
}
@@ -238,12 +238,13 @@ html {
.detailRibbon {
background: #303030;
- background: -webkit-gradient(linear, left top, right top, from(#bcbcbc), color-stop(#a7b4b7), color-stop(#beb5a5), color-stop(#adbec2), to(#b9c7cb));
- background: -webkit-linear-gradient(left, #bcbcbc, #a7b4b7, #beb5a5, #adbec2, #b9c7cb);
- background: -o-linear-gradient(left, #bcbcbc, #a7b4b7, #beb5a5, #adbec2, #b9c7cb);
background: linear-gradient(to right, #bcbcbc, #a7b4b7, #beb5a5, #adbec2, #b9c7cb);
}
+.layout-tv .detailRibbon {
+ background: none;
+}
+
.detailTableBodyRow-shaded:nth-child(even) {
background: #f8f8f8;
background: rgba(0, 0, 0, 0.1);
diff --git a/src/themes/blueradiance/theme.css b/src/themes/blueradiance/theme.css
index e503ba8416..85795c90c3 100644
--- a/src/themes/blueradiance/theme.css
+++ b/src/themes/blueradiance/theme.css
@@ -21,22 +21,20 @@ html {
.skinHeader-withBackground {
background: #303030;
- background: -webkit-gradient(linear, left top, right top, from(#291a31), color-stop(#033664), color-stop(#011432), color-stop(#141a3a), to(#291a31));
- background: -webkit-linear-gradient(left, #291a31, #033664, #011432, #141a3a, #291a31);
- background: -o-linear-gradient(left, #291a31, #033664, #011432, #141a3a, #291a31);
background: linear-gradient(to right, #291a31, #033664, #011432, #141a3a, #291a31);
}
.skinHeader.semiTransparent {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
- background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0)));
- background: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
- background: -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
background-color: rgba(0, 0, 0, 0.3);
}
+.layout-tv .skinHeader.semiTransparent {
+ background: none;
+}
+
.pageTitleWithDefaultLogo {
background-image: url(../../assets/img/banner-light.png);
}
@@ -235,6 +233,10 @@ html {
background: linear-gradient(to right, #291a31, #033664, #011432, #141a3a, #291a31);
}
+.layout-tv .detailRibbon {
+ background: none;
+}
+
.detailTableBodyRow-shaded:nth-child(even) {
background: #1c1c1c;
background: rgba(30, 30, 30, 0.9);
diff --git a/src/themes/dark/theme.css b/src/themes/dark/theme.css
index 3acc425ddf..1024770c7c 100644
--- a/src/themes/dark/theme.css
+++ b/src/themes/dark/theme.css
@@ -30,6 +30,10 @@ html {
background-color: rgba(0, 0, 0, 0.4);
}
+.layout-tv .skinHeader.semiTransparent {
+ background: none;
+}
+
.pageTitleWithDefaultLogo {
background-image: url(../../assets/img/banner-light.png);
}
@@ -211,6 +215,10 @@ html {
background: rgba(32, 32, 32, 0.8);
}
+.layout-tv .detailRibbon {
+ background: none;
+}
+
.noBackdrop .detailRibbon {
background: #202020;
}
@@ -458,3 +466,8 @@ html {
background-color: #00a4dc;
color: #fff;
}
+
+.layout-tv .emby-button.detailFloatingButton:focus {
+ background-color: #f2f2f2;
+ color: #00a4dc;
+}
diff --git a/src/themes/light/theme.css b/src/themes/light/theme.css
index d5eb94e1dc..ec618138cd 100644
--- a/src/themes/light/theme.css
+++ b/src/themes/light/theme.css
@@ -38,6 +38,10 @@ html {
background-color: rgba(0, 0, 0, 0.4);
}
+.layout-tv .skinHeader.semiTransparent {
+ background: none;
+}
+
.pageTitleWithDefaultLogo {
background-image: url(../../assets/img/banner-light.png);
}
@@ -237,6 +241,10 @@ html {
box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
}
+.layout-tv .detailRibbon {
+ background: none;
+}
+
.detailTableBodyRow-shaded:nth-child(even) {
background: #f8f8f8;
}
diff --git a/src/themes/purplehaze/theme.css b/src/themes/purplehaze/theme.css
index 7849c91658..4b2451cfe4 100644
--- a/src/themes/purplehaze/theme.css
+++ b/src/themes/purplehaze/theme.css
@@ -17,21 +17,20 @@ html {
.skinHeader-withBackground {
background: #000420;
- background: -moz-linear-gradient(left, #000420 0%, #06256f 18%, #2b052b 38%, #2b052b 68%, #06256f 81%, #000420 100%);
- background: -webkit-linear-gradient(left, #000420 0%, #06256f 18%, #2b052b 38%, #2b052b 68%, #06256f 81%, #000420 100%);
background: linear-gradient(to right, #000420 0%, #06256f 18%, #2b052b 38%, #2b052b 68%, #06256f 81%, #000420 100%);
}
.skinHeader.semiTransparent {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
- background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0)));
- background: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
- background: -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
background-color: rgba(0, 0, 0, 0.3);
}
+.layout-tv .skinHeader.semiTransparent {
+ background: none;
+}
+
.pageTitleWithDefaultLogo {
background-image: url(../../assets/img/banner-light.png);
}
@@ -322,6 +321,10 @@ a[data-role=button] {
background: linear-gradient(to right, #000420 0%, #06256f 18%, #2b052b 38%, #2b052b 68%, #06256f 81%, #000420 100%);
}
+.layout-tv .detailRibbon {
+ background: none;
+}
+
.detailTableBodyRow-shaded:nth-child(even) {
background: #1c1c1c;
background: rgba(30, 30, 30, 0.9);
diff --git a/src/themes/wmc/theme.css b/src/themes/wmc/theme.css
index 01a6aa5efd..a0db089625 100644
--- a/src/themes/wmc/theme.css
+++ b/src/themes/wmc/theme.css
@@ -26,9 +26,6 @@ html {
.formDialogHeader:not(.formDialogHeader-clear),
.skinHeader-withBackground {
- background: -webkit-gradient(linear, left top, left bottom, from(#0c2450), to(#081b3b));
- background: -webkit-linear-gradient(top, #0c2450, #081b3b);
- background: -o-linear-gradient(top, #0c2450, #081b3b);
background: linear-gradient(to bottom, #0c2450, #081b3b);
background-color: #0c2450;
}
@@ -36,13 +33,14 @@ html {
.skinHeader.semiTransparent {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
- background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0)));
- background: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
- background: -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
background-color: rgba(0, 0, 0, 0.3);
}
+.layout-tv .skinHeader.semiTransparent {
+ background: none;
+}
+
.pageTitleWithDefaultLogo {
background-image: url(../../assets/img/banner-light.png);
}
@@ -217,6 +215,10 @@ html {
background-color: #081b3b;
}
+.layout-tv .detailRibbon {
+ background: none;
+}
+
.detailTableBodyRow-shaded:nth-child(even) {
background: #1c1c1c;
background: rgba(0, 0, 0, 0.3);