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 #1370 from grafixeyehero/es6-listview

Browse source 
Migration listview to ES6 modules
This commit is contained in:
dkanada 2020-06-27 00:19:48 +09:00 • committed by GitHub
commit 4439cd00d3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 97 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -100,6 +100,7 @@
"src/components/images/imageLoader.js", "src/components/images/imageLoader.js",
"src/components/indicators/indicators.js", "src/components/indicators/indicators.js",
"src/components/lazyLoader/lazyLoaderIntersectionObserver.js", "src/components/lazyLoader/lazyLoaderIntersectionObserver.js",
"src/components/listview/listview.js",
"src/components/playback/brightnessosd.js", "src/components/playback/brightnessosd.js",
"src/components/playback/mediasession.js", "src/components/playback/mediasession.js",
"src/components/playback/nowplayinghelper.js", "src/components/playback/nowplayinghelper.js",

169
src/components/listview/listview.js
View file

@ -1,5 +1,20 @@
define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutManager', 'globalize', 'datetime', 'apphost', 'css!./listview', 'emby-ratingbutton', 'emby-playstatebutton'], function (itemHelper, mediaInfo, indicators, connectionManager, layoutManager, globalize, datetime, appHost) { /* eslint-disable indent */
'use strict';
/**
* Module for display list view.
* @module components/listview/listview
*/
import itemHelper from 'itemHelper';
import mediaInfo from 'mediaInfo';
import indicators from 'indicators';
import connectionManager from 'connectionManager';
import layoutManager from 'layoutManager';
import globalize from 'globalize';
import datetime from 'datetime';
import 'css!./listview';
import 'emby-ratingbutton';
import 'emby-playstatebutton';
function getIndex(item, options) { function getIndex(item, options) {
@ -8,9 +23,9 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
return item.ParentIndexNumber == null ? '' : globalize.translate('ValueDiscNumber', item.ParentIndexNumber); return item.ParentIndexNumber == null ? '' : globalize.translate('ValueDiscNumber', item.ParentIndexNumber);
} }
var sortBy = (options.sortBy || '').toLowerCase(); const sortBy = (options.sortBy || '').toLowerCase();
var code; let code;
var name; let name;
if (sortBy.indexOf('sortname') === 0) { if (sortBy.indexOf('sortname') === 0) {
@ -69,10 +84,10 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
function getImageUrl(item, width) { function getImageUrl(item, width) {
var apiClient = connectionManager.getApiClient(item.ServerId); const apiClient = connectionManager.getApiClient(item.ServerId);
let itemId; let itemId;
var options = { const options = {
maxWidth: width * 2, maxWidth: width * 2,
type: 'Primary' type: 'Primary'
}; };
@ -102,8 +117,8 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
function getChannelImageUrl(item, width) { function getChannelImageUrl(item, width) {
var apiClient = connectionManager.getApiClient(item.ServerId); const apiClient = connectionManager.getApiClient(item.ServerId);
var options = { const options = {
maxWidth: width * 2, maxWidth: width * 2,
type: 'Primary' type: 'Primary'
}; };
@ -121,13 +136,13 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
function getTextLinesHtml(textlines, isLargeStyle) { function getTextLinesHtml(textlines, isLargeStyle) {
var html = ''; let html = '';
var largeTitleTagName = layoutManager.tv ? 'h2' : 'div'; const largeTitleTagName = layoutManager.tv ? 'h2' : 'div';
for (var i = 0, length = textlines.length; i < length; i++) { for (let i = 0, length = textlines.length; i < length; i++) {
var text = textlines[i]; const text = textlines[i];
if (!text) { if (!text) {
continue; continue;
@ -135,7 +150,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
if (i === 0) { if (i === 0) {
if (isLargeStyle) { if (isLargeStyle) {
html += '<' + largeTitleTagName + ' class="listItemBodyText">'; html += `<${largeTitleTagName} class="listItemBodyText">`;
} else { } else {
html += '<div class="listItemBodyText">'; html += '<div class="listItemBodyText">';
} }
@ -144,7 +159,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
} }
html += (textlines[i] || '&nbsp;'); html += (textlines[i] || '&nbsp;');
if (i === 0 && isLargeStyle) { if (i === 0 && isLargeStyle) {
html += '</' + largeTitleTagName + '>'; html += `</${largeTitleTagName}>`;
} else { } else {
html += '</div>'; html += '</div>';
} }
@ -155,13 +170,13 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
function getRightButtonsHtml(options) { function getRightButtonsHtml(options) {
var html = ''; let html = '';
for (var i = 0, length = options.rightButtons.length; i < length; i++) { for (let i = 0, length = options.rightButtons.length; i < length; i++) {
var button = options.rightButtons[i]; const button = options.rightButtons[i];
html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="custom" data-customaction="' + button.id + '" title="' + button.title + '"><span class="material-icons ' + button.icon + '"></span></button>'; html += `<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="custom" data-customaction="${button.id}" title="${button.title}"><span class="material-icons ${button.icon}"></span></button>`;
} }
return html; return html;
@ -171,34 +186,34 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
return item.Id; return item.Id;
} }
function getListViewHtml(options) { export function getListViewHtml(options) {
var items = options.items; const items = options.items;
var groupTitle = ''; let groupTitle = '';
var action = options.action || 'link'; const action = options.action || 'link';
var isLargeStyle = options.imageSize === 'large'; const isLargeStyle = options.imageSize === 'large';
var enableOverview = options.enableOverview; const enableOverview = options.enableOverview;
var clickEntireItem = layoutManager.tv ? true : false; const clickEntireItem = layoutManager.tv ? true : false;
var outerTagName = clickEntireItem ? 'button' : 'div'; const outerTagName = clickEntireItem ? 'button' : 'div';
var enableSideMediaInfo = options.enableSideMediaInfo != null ? options.enableSideMediaInfo : true; const enableSideMediaInfo = options.enableSideMediaInfo != null ? options.enableSideMediaInfo : true;
var outerHtml = ''; let outerHtml = '';
var enableContentWrapper = options.enableOverview && !layoutManager.tv; const enableContentWrapper = options.enableOverview && !layoutManager.tv;
var containerAlbumArtistIds = (options.containerAlbumArtists || []).map(getId); const containerAlbumArtistIds = (options.containerAlbumArtists || []).map(getId);
for (var i = 0, length = items.length; i < length; i++) { for (let i = 0, length = items.length; i < length; i++) {
var item = items[i]; const item = items[i];
var html = ''; let html = '';
if (options.showIndex) { if (options.showIndex) {
var itemGroupTitle = getIndex(item, options); const itemGroupTitle = getIndex(item, options);
if (itemGroupTitle !== groupTitle) { if (itemGroupTitle !== groupTitle) {
@ -220,7 +235,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
} }
} }
var cssClass = 'listItem'; let cssClass = 'listItem';
if (options.border || (options.highlight !== false && !layoutManager.tv)) { if (options.border || (options.highlight !== false && !layoutManager.tv)) {
cssClass += ' listItem-border'; cssClass += ' listItem-border';
@ -234,28 +249,28 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
cssClass += ' listItem-focusscale'; cssClass += ' listItem-focusscale';
} }
var downloadWidth = 80; let downloadWidth = 80;
if (isLargeStyle) { if (isLargeStyle) {
cssClass += ' listItem-largeImage'; cssClass += ' listItem-largeImage';
downloadWidth = 500; downloadWidth = 500;
} }
var playlistItemId = item.PlaylistItemId ? (' data-playlistitemid="' + item.PlaylistItemId + '"') : ''; const playlistItemId = item.PlaylistItemId ? (` data-playlistitemid="${item.PlaylistItemId}"`) : '';
var positionTicksData = item.UserData && item.UserData.PlaybackPositionTicks ? (' data-positionticks="' + item.UserData.PlaybackPositionTicks + '"') : ''; const positionTicksData = item.UserData && item.UserData.PlaybackPositionTicks ? (` data-positionticks="${item.UserData.PlaybackPositionTicks}"`) : '';
var collectionIdData = options.collectionId ? (' data-collectionid="' + options.collectionId + '"') : ''; const collectionIdData = options.collectionId ? (` data-collectionid="${options.collectionId}"`) : '';
var playlistIdData = options.playlistId ? (' data-playlistid="' + options.playlistId + '"') : ''; const playlistIdData = options.playlistId ? (` data-playlistid="${options.playlistId}"`) : '';
var mediaTypeData = item.MediaType ? (' data-mediatype="' + item.MediaType + '"') : ''; const mediaTypeData = item.MediaType ? (` data-mediatype="${item.MediaType}"`) : '';
var collectionTypeData = item.CollectionType ? (' data-collectiontype="' + item.CollectionType + '"') : ''; const collectionTypeData = item.CollectionType ? (` data-collectiontype="${item.CollectionType}"`) : '';
var channelIdData = item.ChannelId ? (' data-channelid="' + item.ChannelId + '"') : ''; const channelIdData = item.ChannelId ? (` data-channelid="${item.ChannelId}"`) : '';
if (enableContentWrapper) { if (enableContentWrapper) {
cssClass += ' listItem-withContentWrapper'; cssClass += ' listItem-withContentWrapper';
} }
html += '<' + outerTagName + ' class="' + cssClass + '"' + playlistItemId + ' data-action="' + action + '" data-isfolder="' + item.IsFolder + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-type="' + item.Type + '"' + mediaTypeData + collectionTypeData + channelIdData + positionTicksData + collectionIdData + playlistIdData + '>'; html += `<${outerTagName} class="${cssClass}"${playlistItemId} data-action="${action}" data-isfolder="${item.IsFolder}" data-id="${item.Id}" data-serverid="${item.ServerId}" data-type="${item.Type}"${mediaTypeData}${collectionTypeData}${channelIdData}${positionTicksData}${collectionIdData}${playlistIdData}>`;
if (enableContentWrapper) { if (enableContentWrapper) {
@ -278,37 +293,37 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
imageClass += ' listItemImage-large-tv'; imageClass += ' listItemImage-large-tv';
} }
var playOnImageClick = options.imagePlayButton && !layoutManager.tv; const playOnImageClick = options.imagePlayButton && !layoutManager.tv;
if (!clickEntireItem) { if (!clickEntireItem) {
imageClass += ' itemAction'; imageClass += ' itemAction';
} }
var imageAction = playOnImageClick ? 'resume' : action; const imageAction = playOnImageClick ? 'resume' : action;
let blurhashAttrib = ''; let blurhashAttrib = '';
if (blurhash && blurhash.length > 0) { if (blurhash && blurhash.length > 0) {
blurhashAttrib = 'data-blurhash="' + blurhash + '"'; blurhashAttrib = `data-blurhash="${blurhash}"`;
} }
if (imgUrl) { if (imgUrl) {
html += '<div data-action="' + imageAction + '" class="' + imageClass + ' lazy" data-src="' + imgUrl + '" ' + blurhashAttrib + ' item-icon>'; html += `<div data-action="${imageAction}" class="${imageClass} lazy" data-src="${imgUrl}" ${blurhashAttrib} item-icon>`;
} else { } else {
html += '<div class="' + imageClass + '">'; html += `<div class="${imageClass}">`;
} }
var indicatorsHtml = ''; let indicatorsHtml = '';
indicatorsHtml += indicators.getPlayedIndicatorHtml(item); indicatorsHtml += indicators.getPlayedIndicatorHtml(item);
if (indicatorsHtml) { if (indicatorsHtml) {
html += '<div class="indicators listItemIndicators">' + indicatorsHtml + '</div>'; html += `<div class="indicators listItemIndicators">${indicatorsHtml}</div>`;
} }
if (playOnImageClick) { if (playOnImageClick) {
html += '<button is="paper-icon-button-light" class="listItemImageButton itemAction" data-action="resume"><span class="material-icons listItemImageButton-icon play_arrow"></span></button>'; html += '<button is="paper-icon-button-light" class="listItemImageButton itemAction" data-action="resume"><span class="material-icons listItemImageButton-icon play_arrow"></span></button>';
} }
var progressHtml = indicators.getProgressBarHtml(item, { const progressHtml = indicators.getProgressBarHtml(item, {
containerClass: 'listItemProgressBar' containerClass: 'listItemProgressBar'
}); });
@ -325,7 +340,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
html += '</div>'; html += '</div>';
} }
var textlines = []; const textlines = [];
if (options.showProgramDateTime) { if (options.showProgramDateTime) {
textlines.push(datetime.toLocaleString(datetime.parseISO8601Date(item.StartDate), { textlines.push(datetime.toLocaleString(datetime.parseISO8601Date(item.StartDate), {
@ -348,7 +363,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
} }
} }
var parentTitle = null; let parentTitle = null;
if (options.showParentTitle) { if (options.showParentTitle) {
if (item.Type === 'Episode') { if (item.Type === 'Episode') {
@ -358,12 +373,12 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
} }
} }
var displayName = itemHelper.getDisplayName(item, { let displayName = itemHelper.getDisplayName(item, {
includeParentInfo: options.includeParentInfoInTitle includeParentInfo: options.includeParentInfoInTitle
}); });
if (options.showIndexNumber && item.IndexNumber != null) { if (options.showIndexNumber && item.IndexNumber != null) {
displayName = item.IndexNumber + '. ' + displayName; displayName = `${item.IndexNumber}. ${displayName}`;
} }
if (options.showParentTitle && options.parentTitleWithTitle) { if (options.showParentTitle && options.parentTitleWithTitle) {
@ -394,14 +409,14 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
} }
} else { } else {
var showArtist = options.artist === true; let showArtist = options.artist === true;
var artistItems = item.ArtistItems; const artistItems = item.ArtistItems;
if (!showArtist && options.artist !== false) { if (!showArtist && options.artist !== false) {
if (!artistItems || !artistItems.length) { if (!artistItems || !artistItems.length) {
showArtist = true; showArtist = true;
} else if (artistItems.length > 1 || containerAlbumArtistIds.indexOf(artistItems[0].Id) === -1) { } else if (artistItems.length > 1 || !containerAlbumArtistIds.includes(artistItems[0].Id)) {
showArtist = true; showArtist = true;
} }
} }
@ -409,7 +424,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
if (showArtist) { if (showArtist) {
if (artistItems && item.Type !== 'MusicAlbum') { if (artistItems && item.Type !== 'MusicAlbum') {
textlines.push(artistItems.map(function (a) { textlines.push(artistItems.map(a => {
return a.Name; return a.Name;
}).join(', ')); }).join(', '));
} }
@ -432,7 +447,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
cssClass += ' listItemBody-noleftpadding'; cssClass += ' listItemBody-noleftpadding';
} }
html += '<div class="' + cssClass + '">'; html += `<div class="${cssClass}">`;
const moreIcon = 'more_vert'; const moreIcon = 'more_vert';
@ -441,14 +456,16 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
if (options.mediaInfo !== false) { if (options.mediaInfo !== false) {
if (!enableSideMediaInfo) { if (!enableSideMediaInfo) {
var mediaInfoClass = 'secondary listItemMediaInfo listItemBodyText'; const mediaInfoClass = 'secondary listItemMediaInfo listItemBodyText';
html += '<div class="' + mediaInfoClass + '">' + mediaInfo.getPrimaryMediaInfoHtml(item, { html += `<div class="${mediaInfoClass}">`;
html += mediaInfo.getPrimaryMediaInfoHtml(item, {
episodeTitle: false, episodeTitle: false,
originalAirDate: false, originalAirDate: false,
subtitles: false subtitles: false
}) + '</div>'; });
html += '</div>';
} }
} }
@ -462,7 +479,8 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
if (options.mediaInfo !== false) { if (options.mediaInfo !== false) {
if (enableSideMediaInfo) { if (enableSideMediaInfo) {
html += '<div class="secondary listItemMediaInfo">' + mediaInfo.getPrimaryMediaInfoHtml(item, { html += '<div class="secondary listItemMediaInfo">';
html += mediaInfo.getPrimaryMediaInfoHtml(item, {
year: false, year: false,
container: false, container: false,
@ -470,7 +488,8 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
criticRating: false, criticRating: false,
endsAt: false endsAt: false
}) + '</div>'; });
html += '</div>';
} }
} }
@ -487,7 +506,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
} }
if (options.moreButton !== false) { if (options.moreButton !== false) {
html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="menu"><span class="material-icons ' + moreIcon + '"></span></button>'; html += `<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="menu"><span class="material-icons ${moreIcon}"></span></button>`;
} }
if (options.infoButton) { if (options.infoButton) {
@ -500,15 +519,15 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
if (options.enableUserDataButtons !== false) { if (options.enableUserDataButtons !== false) {
var userData = item.UserData || {}; const userData = item.UserData || {};
var likes = userData.Likes == null ? '' : userData.Likes; const likes = userData.Likes == null ? '' : userData.Likes;
if (itemHelper.canMarkPlayed(item)) { if (itemHelper.canMarkPlayed(item)) {
html += '<button is="emby-playstatebutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><span class="material-icons check"></span></button>'; html += `<button is="emby-playstatebutton" type="button" class="listItemButton paper-icon-button-light" data-id="${item.Id}" data-serverid="${item.ServerId}" data-itemtype="${item.Type}" data-played="${userData.Played}"><span class="material-icons check"></span></button>`;
} }
if (itemHelper.canRate(item)) { if (itemHelper.canRate(item)) {
html += '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><span class="material-icons favorite"></span></button>'; html += `<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="${item.Id}" data-serverid="${item.ServerId}" data-itemtype="${item.Type}" data-likes="${likes}" data-isfavorite="${userData.IsFavorite}"><span class="material-icons favorite"></span></button>`;
} }
} }
} }
@ -524,7 +543,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
} }
} }
html += '</' + outerTagName + '>'; html += `</${outerTagName}>`;
outerHtml += html; outerHtml += html;
} }
@ -532,7 +551,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
return outerHtml; return outerHtml;
} }
return { /* eslint-enable indent */
export default {
getListViewHtml: getListViewHtml getListViewHtml: getListViewHtml
}; };
});