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

Refactor home screen

Browse source
This commit is contained in:
Bill Thornton 2023-10-02 12:22:36 -04:00
parent f7507fbeab
commit f1afaa975e
12 changed files with 949 additions and 754 deletions
Download patch file Download diff file Expand all files Collapse all files

181
src/components/homesections/sections/liveTv.ts Normal file
View file

@ -0,0 +1,181 @@
import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client/models/base-item-dto';
import type { UserDto } from '@jellyfin/sdk/lib/generated-client/models/user-dto';
import type { ApiClient } from 'jellyfin-apiclient';
import { appRouter } from 'components/router/appRouter';
import cardBuilder from 'components/cardbuilder/cardBuilder';
import layoutManager from 'components/layoutManager';
import ServerConnections from 'components/ServerConnections';
import globalize from 'scripts/globalize';
import { getBackdropShape } from 'utils/card';
import type { SectionContainerElement, SectionOptions } from './section';
function getOnNowFetchFn(
serverId: string
) {
return function () {
const apiClient = ServerConnections.getApiClient(serverId);
return apiClient.getLiveTvRecommendedPrograms({
userId: apiClient.getCurrentUserId(),
IsAiring: true,
limit: 24,
ImageTypeLimit: 1,
EnableImageTypes: 'Primary,Thumb,Backdrop',
EnableTotalRecordCount: false,
Fields: 'ChannelInfo,PrimaryImageAspectRatio'
});
};
}
function getOnNowItemsHtmlFn(
{ enableOverflow }: SectionOptions
) {
return (items: BaseItemDto[]) => (
cardBuilder.getCardsHtml({
items: items,
preferThumb: 'auto',
inheritThumb: false,
shape: (enableOverflow ? 'autooverflow' : 'auto'),
showParentTitleOrTitle: true,
showTitle: true,
centerText: true,
coverImage: true,
overlayText: false,
allowBottomPadding: !enableOverflow,
showAirTime: true,
showChannelName: false,
showAirDateTime: false,
showAirEndTime: true,
defaultShape: getBackdropShape(enableOverflow),
lines: 3,
overlayPlayButton: true
})
);
}
function buildSection(
elem: HTMLElement,
serverId: string,
options: SectionOptions
) {
let html = '';
elem.classList.remove('padded-left');
elem.classList.remove('padded-right');
elem.classList.remove('padded-bottom');
elem.classList.remove('verticalSection');
html += '<div class="verticalSection">';
html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">';
html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('LiveTV') + '</h2>';
html += '</div>';
if (options.enableOverflow) {
html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true" data-scrollbuttons="false">';
html += '<div class="padded-top padded-bottom scrollSlider focuscontainer-x">';
} else {
html += '<div class="padded-top padded-bottom focuscontainer-x">';
}
html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl('livetv', {
serverId,
section: 'programs'
}) + '" class="raised"><span>' + globalize.translate('Programs') + '</span></a>';
html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl('livetv', {
serverId,
section: 'guide'
}) + '" class="raised"><span>' + globalize.translate('Guide') + '</span></a>';
html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl('livetv', {
serverId,
section: 'channels'
}) + '" class="raised"><span>' + globalize.translate('Channels') + '</span></a>';
html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl('recordedtv', {
serverId
}) + '" class="raised"><span>' + globalize.translate('Recordings') + '</span></a>';
html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl('livetv', {
serverId,
section: 'dvrschedule'
}) + '" class="raised"><span>' + globalize.translate('Schedule') + '</span></a>';
html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl('livetv', {
serverId,
section: 'seriesrecording'
}) + '" class="raised"><span>' + globalize.translate('Series') + '</span></a>';
html += '</div>';
if (options.enableOverflow) {
html += '</div>';
}
html += '</div>';
html += '</div>';
html += '<div class="verticalSection">';
html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">';
if (!layoutManager.tv) {
html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl('livetv', {
serverId,
section: 'onnow'
}) + '" class="more button-flat button-flat-mini sectionTitleTextButton">';
html += '<h2 class="sectionTitle sectionTitle-cards">';
html += globalize.translate('HeaderOnNow');
html += '</h2>';
html += '<span class="material-icons chevron_right" aria-hidden="true"></span>';
html += '</a>';
} else {
html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('HeaderOnNow') + '</h2>';
}
html += '</div>';
if (options.enableOverflow) {
html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">';
html += '<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x">';
} else {
html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right vertical-wrap focuscontainer-x">';
}
if (options.enableOverflow) {
html += '</div>';
}
html += '</div>';
html += '</div>';
elem.innerHTML = html;
const itemsContainer: SectionContainerElement | null = elem.querySelector('.itemsContainer');
if (!itemsContainer) return;
itemsContainer.parentContainer = elem;
itemsContainer.fetchData = getOnNowFetchFn(serverId);
itemsContainer.getItemsHtml = getOnNowItemsHtmlFn(options);
}
export function loadLiveTV(
elem: HTMLElement,
apiClient: ApiClient,
user: UserDto,
options: SectionOptions
) {
if (!user.Policy?.EnableLiveTvAccess) {
return Promise.resolve();
}
return apiClient.getLiveTvRecommendedPrograms({
userId: apiClient.getCurrentUserId(),
IsAiring: true,
limit: 1,
ImageTypeLimit: 1,
EnableImageTypes: 'Primary,Thumb,Backdrop',
EnableTotalRecordCount: false,
Fields: 'ChannelInfo,PrimaryImageAspectRatio'
}).then(function (result) {
if (result.Items?.length) {
buildSection(elem, apiClient.serverId(), options);
}
});
}