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

Merge pull request #1845 from MrTimscampi/focus-fixes

Browse source 
Various TV-related fixes
This commit is contained in:
dkanada 2020-08-31 18:09:34 +09:00 • committed by GitHub
commit 6e5a26a887
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 174 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/controllers/itemDetails/index.html
View file

@ -7,11 +7,11 @@
<div class="detailPagePrimaryContainer padded-left padded-right">
<div class="infoWrapper infoText">
<div class="nameContainer"></div>
<div class="itemMiscInfo itemMiscInfo-primary" style="margin-bottom: 0.6em"></div>
<div class="itemMiscInfo itemMiscInfo-secondary" style="margin-bottom: 0.6em"></div>
<div class="itemMiscInfo itemMiscInfo-primary" style="margin-bottom: 0.6em;"></div>
<div class="itemMiscInfo itemMiscInfo-secondary" style="margin-bottom: 0.6em;"></div>
</div>
<div class="mainDetailButtons">
<div class="mainDetailButtons focuscontainer-x">
<button is="emby-button" type="button" class="button-flat btnResume hide detailButton" title="${ButtonResume}" data-mode="resume">
<div class="detailButton-content">
<span class="material-icons detailButton-icon play_arrow"></span>
@ -95,17 +95,17 @@
<div class="itemDetailsGroup">
<div class="detailsGroupItem genresGroup hide">
<div class="genresLabel label"></div>
<div class="genres content"></div>
<div class="genres content focuscontainer-x"></div>
</div>
<div class="detailsGroupItem directorsGroup hide">
<div class="directorsLabel label"></div>
<div class="directors content"></div>
<div class="directors content focuscontainer-x"></div>
</div>
<div class="detailsGroupItem writersGroup hide">
<div class="writersLabel label"></div>
<div class="writers content"></div>
<div class="writers content focuscontainer-x"></div>
</div>
</div>
@ -124,7 +124,7 @@
</div>
</form>
<div class="recordingFields hide" style="margin: .5em 0 1.5em;"></div>
<div class="recordingFields hide" style="margin: 0.5em 0 1.5em;"></div>
<div class="detailSectionContent">
<div class="itemLastPlayed hide"></div>
@ -139,14 +139,14 @@
<p id="itemDeathDate"></p>
<p id="seriesAirTime"></p>
<div class="itemTags hide" style="margin: .7em 0;font-size:92%;"></div>
<div class="itemExternalLinks hide" style="margin: .7em 0;font-size:92%;"></div>
<div class="itemTags focuscontainer-x hide" style="margin: 0.7em 0; font-size: 92%;"></div>
<div class="itemExternalLinks focuscontainer-x hide" style="margin: 0.7em 0; font-size: 92%;"></div>
<div class="seriesRecordingEditor"></div>
</div>
</div>
</div>
<div class="seriesTimerScheduleSection verticalSection detailVerticalSection hide" style="margin-top:-3em;">
<div class="seriesTimerScheduleSection verticalSection detailVerticalSection hide" style="margin-top: -3em;">
<h2 class="sectionTitle">${Schedule}</h2>
<div class="seriesTimerSchedule padded-right"></div>
</div>

36
src/controllers/itemDetails/index.js
View file

@ -414,7 +414,7 @@ function renderName(item, container, context) {
}, {
context: context
});
parentNameHtml.push('<a style="color:inherit;" class="button-link" is="emby-linkbutton" href="' + parentRoute + '">' + item.SeriesName + '</a>');
parentNameHtml.push('<a style="color:inherit;" class="button-link" tabindex="-1" is="emby-linkbutton" href="' + parentRoute + '">' + item.SeriesName + '</a>');
} else if (item.IsSeries || item.EpisodeTitle) {
parentNameHtml.push(item.Name);
}
@ -429,7 +429,7 @@ function renderName(item, container, context) {
}, {
context: context
});
parentNameHtml.push('<a style="color:inherit;" class="button-link" is="emby-linkbutton" href="' + parentRoute + '">' + item.SeriesName + '</a>');
parentNameHtml.push('<a style="color:inherit;" class="button-link" tabindex="-1" is="emby-linkbutton" href="' + parentRoute + '">' + item.SeriesName + '</a>');
} else if (item.ParentIndexNumber != null && item.Type === 'Episode') {
parentRoute = appRouter.getRouteUrl({
Id: item.SeasonId,
@ -440,7 +440,7 @@ function renderName(item, container, context) {
}, {
context: context
});
parentNameHtml.push('<a style="color:inherit;" class="button-link" is="emby-linkbutton" href="' + parentRoute + '">' + item.SeasonName + '</a>');
parentNameHtml.push('<a style="color:inherit;" class="button-link" tabindex="-1" is="emby-linkbutton" href="' + parentRoute + '">' + item.SeasonName + '</a>');
} 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')) {
@ -453,7 +453,7 @@ function renderName(item, container, context) {
}, {
context: context
});
parentNameHtml.push('<a style="color:inherit;" class="button-link" is="emby-linkbutton" href="' + parentRoute + '">' + item.Album + '</a>');
parentNameHtml.push('<a style="color:inherit;" class="button-link" tabindex="-1" is="emby-linkbutton" href="' + parentRoute + '">' + item.Album + '</a>');
} else if (item.Album) {
parentNameHtml.push(item.Album);
}
@ -570,9 +570,12 @@ function reloadFromItem(instance, page, params, item, user) {
// Start rendering the artwork first
renderImage(page, item);
renderLogo(page, item, apiClient);
// Save 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');
@ -764,6 +767,9 @@ function renderDetailImage(elem, item, imageLoader) {
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) {
@ -1059,7 +1065,12 @@ function renderDetails(page, item, apiClient, context, isStatic) {
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);
}
@ -1990,6 +2001,17 @@ export default function (view, params) {
let currentItem;
const self = this;
const apiClient = params.serverId ? connectionManager.getApiClient(params.serverId) : ApiClient;
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');
}
view.querySelectorAll('.btnPlay');
bindAll(view, '.btnPlay', 'click', onPlayClick);
bindAll(view, '.btnResume', 'click', onPlayClick);

2
src/controllers/user/menu/index.html
View file

@ -57,7 +57,7 @@
</div>
</a>
</div>
<div class="adminSection verticalSection verticalSection-extrabottompadding">
<div class="adminSection verticalSection verticalSection-extrabottompadding hide">
<h2 class="sectionTitle" style="padding-left:.25em;">${HeaderAdmin}</h2>
<a is="emby-linkbutton" href="dashboard.html" style="display:block;padding:0;margin:0;" class="listItem-border">
<div class="listItem">

17
src/controllers/user/menu/index.js
View file

@ -1,4 +1,5 @@
import appHost from 'apphost';
import layoutManager from 'layoutManager';
import 'listViewStyle';
import 'emby-button';
@ -38,19 +39,19 @@ export default function (view, params) {
page.querySelector('.selectServer').classList.add('hide');
}
// hide the actions if user preferences are being edited for a different user
ApiClient.getUser(userId).then(function (user) {
page.querySelector('.headerUsername').innerHTML = user.Name;
if (user.Policy.IsAdministrator && !layoutManager.tv) {
page.querySelector('.adminSection').classList.remove('hide');
}
});
// Hide the actions if user preferences are being edited for a different user
if (params.userId && params.userId !== Dashboard.getCurrentUserId) {
page.querySelector('.userSection').classList.add('hide');
page.querySelector('.adminSection').classList.add('hide');
}
ApiClient.getUser(userId).then(function (user) {
page.querySelector('.headerUsername').innerHTML = user.Name;
if (!user.Policy.IsAdministrator) {
page.querySelector('.adminSection').classList.add('hide');
}
});
import('autoFocuser').then(({default: autoFocuser}) => {
autoFocuser.autoFocus(view);
});