Merge branch 'master' into alfed-bug-4228

.eslintrc.js

@@ -64,6 +64,7 @@ module.exports = {
         'no-throw-literal': ['error'],
         'no-trailing-spaces': ['error'],
         'no-undef-init': ['error'],
+        'no-unneeded-ternary': ['error'],
         'no-unused-expressions': ['off'],
         '@typescript-eslint/no-unused-expressions': ['error', { 'allowShortCircuit': true, 'allowTernary': true, 'allowTaggedTemplates': true }],
         'no-unused-private-class-members': ['error'],

CONTRIBUTORS.md

@@ -69,6 +69,7 @@
  - [v0idMrK](https://github.com/v0idMrK)
  - [tehciolo](https://github.com/tehciolo)
  - [scampower3](https://github.com/scampower3)
+ - [LittleBigOwI] (https://github.com/LittleBigOwI/)
 
 # Emby Contributors
 

src/apps/experimental/components/library/GenresSectionContainer.tsx

@@ -71,8 +71,8 @@ const GenresSectionContainer: FC<GenresSectionContainerProps> = ({
             centerText: true,
             cardLayout: false,
             shape: itemType === BaseItemKind.MusicAlbum ? 'overflowSquare' : 'overflowPortrait',
-            showParentTitle: itemType === BaseItemKind.MusicAlbum ? true : false,
-            showYear: itemType === BaseItemKind.MusicAlbum ? false : true
+            showParentTitle: itemType === BaseItemKind.MusicAlbum,
+            showYear: itemType !== BaseItemKind.MusicAlbum
         }}
     />;
 };

src/components/ConnectionRequired.tsx

@@ -53,8 +53,12 @@ const ConnectionRequired: FunctionComponent<ConnectionRequiredProps> = ({
                 return;
             case ConnectionState.ServerSelection:
                 // Bounce to select server page
-                console.debug('[ConnectionRequired] redirecting to select server page');
-                navigate(BounceRoutes.SelectServer);
+                if (location.pathname === BounceRoutes.SelectServer) {
+                    setIsLoading(false);
+                } else {
+                    console.debug('[ConnectionRequired] redirecting to select server page');
+                    navigate(BounceRoutes.SelectServer);
+                }
                 return;
             case ConnectionState.ServerUpdateNeeded:
                 // Show update needed message and bounce to select server page

src/components/cardbuilder/cardBuilder.js

@@ -11,8 +11,8 @@ import browser from 'scripts/browser';
 import datetime from 'scripts/datetime';
 import dom from 'scripts/dom';
 import globalize from 'scripts/globalize';
-import imageHelper from 'scripts/imagehelper';
 import { getBackdropShape, getPortraitShape, getSquareShape } from 'utils/card';
+import imageHelper from 'utils/image';
 import { randomInt } from 'utils/number';
 
 import focusManager from '../focusManager';

src/components/guide/guide.js

@@ -291,7 +291,7 @@ function Guide(options) {
             showPremiereIndicator: allowIndicators && userSettings.get('guide-indicator-premiere') !== 'false',
             showNewIndicator: allowIndicators && userSettings.get('guide-indicator-new') !== 'false',
             showRepeatIndicator: allowIndicators && userSettings.get('guide-indicator-repeat') === 'true',
-            showEpisodeTitle: layoutManager.tv ? false : true
+            showEpisodeTitle: !layoutManager.tv
         };
 
         apiClient.getLiveTvChannels(channelQuery).then(function (channelsResult) {

src/components/homesections/sections/libraryButtons.ts

@@ -4,7 +4,7 @@ import escapeHtml from 'escape-html';
 import imageLoader from 'components/images/imageLoader';
 import { appRouter } from 'components/router/appRouter';
 import globalize from 'scripts/globalize';
-import imageHelper from 'scripts/imagehelper';
+import imageHelper from 'utils/image';
 
 function getLibraryButtonsHtml(items: BaseItemDto[]) {
     let html = '';

src/components/listview/listview.js

@@ -177,7 +177,7 @@ export function getListViewHtml(options) {
     const isLargeStyle = options.imageSize === 'large';
     const enableOverview = options.enableOverview;
 
-    const clickEntireItem = layoutManager.tv ? true : false;
+    const clickEntireItem = layoutManager.tv;
     const outerTagName = clickEntireItem ? 'button' : 'div';
     const enableSideMediaInfo = options.enableSideMediaInfo != null ? options.enableSideMediaInfo : true;
 

src/components/playback/playbackmanager.js

@@ -2774,6 +2774,12 @@ class PlaybackManager {
                                     });
                                 });
                             } else {
+                                if (item.AlbumId != null) {
+                                    return apiClient.getItem(apiClient.getCurrentUserId(), item.AlbumId).then(function(result) {
+                                        mediaSource.albumLUFS = result.LUFS;
+                                        return mediaSource;
+                                    });
+                                }
                                 return mediaSource;
                             }
                         } else {

src/components/playback/playersettingsmenu.js

@@ -46,7 +46,7 @@ function showQualityMenu(player, btn) {
         const bitrate = parseInt(id, 10);
         if (bitrate !== selectedBitrate) {
             playbackManager.setMaxStreamingBitrate({
-                enableAutomaticBitrateDetection: bitrate ? false : true,
+                enableAutomaticBitrateDetection: !bitrate,
                 maxBitrate: bitrate
             }, player);
         }

src/components/playbackSettings/playbackSettings.js

@@ -173,7 +173,7 @@ function loadForm(context, user, userSettings, apiClient) {
     context.querySelector('.chkPlayDefaultAudioTrack').checked = user.Configuration.PlayDefaultAudioTrack || false;
     context.querySelector('.chkPreferFmp4HlsContainer').checked = userSettings.preferFmp4HlsContainer();
     context.querySelector('.chkEnableCinemaMode').checked = userSettings.enableCinemaMode();
-    context.querySelector('.chkEnableAudioNormalization').checked = userSettings.enableAudioNormalization();
+    context.querySelector('#selectAudioNormalization').value = userSettings.selectAudioNormalization();
     context.querySelector('.chkEnableNextVideoOverlay').checked = userSettings.enableNextVideoInfoOverlay();
     context.querySelector('.chkRememberAudioSelections').checked = user.Configuration.RememberAudioSelections || false;
     context.querySelector('.chkRememberSubtitleSelections').checked = user.Configuration.RememberSubtitleSelections || false;
@@ -218,7 +218,7 @@ function saveUser(context, user, userSettingsInstance, apiClient) {
     user.Configuration.EnableNextEpisodeAutoPlay = context.querySelector('.chkEpisodeAutoPlay').checked;
     userSettingsInstance.preferFmp4HlsContainer(context.querySelector('.chkPreferFmp4HlsContainer').checked);
     userSettingsInstance.enableCinemaMode(context.querySelector('.chkEnableCinemaMode').checked);
-    userSettingsInstance.enableAudioNormalization(context.querySelector('.chkEnableAudioNormalization').checked);
+    userSettingsInstance.selectAudioNormalization(context.querySelector('#selectAudioNormalization').value);
     userSettingsInstance.enableNextVideoInfoOverlay(context.querySelector('.chkEnableNextVideoOverlay').checked);
     user.Configuration.RememberAudioSelections = context.querySelector('.chkRememberAudioSelections').checked;
     user.Configuration.RememberSubtitleSelections = context.querySelector('.chkRememberSubtitleSelections').checked;

src/components/playbackSettings/playbackSettings.template.html

@@ -72,12 +72,13 @@ <h2 class="sectionTitle">
             ${TabAdvanced}
         </h2>
 
-        <div class="checkboxContainer checkboxContainer-withDescription">
-            <label>
-                <input type="checkbox" is="emby-checkbox" class="chkEnableAudioNormalization" />
-                <span>${EnableAudioNormalization}</span>
-            </label>
-            <div class="fieldDescription checkboxFieldDescription">${EnableAudioNormalizationHelp}</div>
+        <div class="selectContainer">
+            <select is="emby-select" id="selectAudioNormalization" label="${LabelSelectAudioNormalization}">
+                <option value="Off">${Off}</option>
+                <option value="TrackGain">${LabelTrackGain}</option>
+                <option value="AlbumGain">${LabelAlbumGain}</option>
+            </select>
+            <div class="fieldDescription">${SelectAudioNormalizationHelp}</div>
         </div>
 
         <div class="checkboxContainer checkboxContainer-withDescription">

src/components/toolbar/AppToolbar.tsx

@@ -6,7 +6,7 @@ import Toolbar from '@mui/material/Toolbar';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import React, { FC, ReactNode } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 
 import appIcon from 'assets/img/icon-transparent.png';
 import { appRouter } from 'components/router/appRouter';
@@ -38,9 +38,13 @@ const AppToolbar: FC<AppToolbarProps> = ({
 }) => {
     const { user } = useApi();
     const isUserLoggedIn = Boolean(user);
+    const currentLocation = useLocation();
 
     const isBackButtonAvailable = appRouter.canGoBack();
 
+    // Handles a specific case to hide the user menu on the select server page while authenticated
+    const isUserMenuAvailable = currentLocation.pathname !== '/selectserver.html';
+
     return (
         <Toolbar
             variant='dense'
@@ -111,7 +115,7 @@ const AppToolbar: FC<AppToolbarProps> = ({
 
             {children}
 
-            {isUserLoggedIn && (
+            {isUserLoggedIn && isUserMenuAvailable && (
                 <>
                     <Box sx={{ display: 'flex', flexGrow: 1, justifyContent: 'flex-end' }}>
                         {buttons}

src/controllers/dashboard/dashboard.js

@@ -12,7 +12,7 @@ import playMethodHelper from '../../components/playback/playmethodhelper';
 import cardBuilder from '../../components/cardbuilder/cardBuilder';
 import imageLoader from '../../components/images/imageLoader';
 import ActivityLog from '../../components/activitylog';
-import imageHelper from '../../scripts/imagehelper';
+import imageHelper from '../../utils/image';
 import indicators from '../../components/indicators/indicators';
 import '../../components/listview/listview.scss';
 import '../../elements/emby-button/emby-button';

src/controllers/dashboard/devices/devices.js

@@ -3,7 +3,7 @@ import cardBuilder from '../../../components/cardbuilder/cardBuilder';
 import loading from '../../../components/loading/loading';
 import dom from '../../../scripts/dom';
 import globalize from '../../../scripts/globalize';
-import imageHelper from '../../../scripts/imagehelper';
+import imageHelper from '../../../utils/image';
 import { formatDistanceToNow } from 'date-fns';
 import { getLocaleWithSuffix } from '../../../utils/dateFnsLocale.ts';
 import '../../../elements/emby-button/emby-button';

src/controllers/dashboard/encodingsettings.html

@@ -254,7 +254,9 @@ <h3 class="checkboxListLabel">${LabelHardwareEncodingOptions}</h3>
                         </div>
                         <button type="button" is="paper-icon-button-light" id="btnSelectFallbackFontPath" class="emby-input-iconbutton"><span class="material-icons search" aria-hidden="true"></span></button>
                     </div>
-                    <div class="fieldDescription">${LabelFallbackFontPathHelp}</div>
+                    <div class="fieldDescription">
+                        <a is="emby-linkbutton" rel="noopener noreferrer" class="button-link" href="https://jellyfin.org/docs/general/administration/configuration#fonts" target="_blank">${LabelFallbackFontPathHelp}</a>
+                    </div>
                 </div>
                 <div class="checkboxContainer checkboxContainer-withDescription">
                     <label>

src/controllers/dashboard/library.js

@@ -5,7 +5,7 @@ import loading from '../../components/loading/loading';
 import libraryMenu from '../../scripts/libraryMenu';
 import globalize from '../../scripts/globalize';
 import dom from '../../scripts/dom';
-import imageHelper from '../../scripts/imagehelper';
+import imageHelper from '../../utils/image';
 import '../../components/cardbuilder/card.scss';
 import '../../elements/emby-itemrefreshindicator/emby-itemrefreshindicator';
 import Dashboard, { pageClassOn, pageIdOn } from '../../utils/dashboard';

src/controllers/itemDetails/index.js

@@ -1381,8 +1381,8 @@ function renderChildren(page, item) {
                     items: result.Items,
                     showIndexNumber: false,
                     enableOverview: true,
-                    enablePlayedButton: layoutManager.mobile ? false : true,
-                    infoButton: layoutManager.mobile ? false : true,
+                    enablePlayedButton: !layoutManager.mobile,
+                    infoButton: !layoutManager.mobile,
                     imageSize: 'large',
                     enableSideMediaInfo: false,
                     highlight: false,

src/elements/emby-checkbox/emby-checkbox.js

@@ -21,7 +21,7 @@ function onKeyDown(e) {
     }
 }
 
-const enableRefreshHack = browser.tizen || browser.orsay || browser.operaTv || browser.web0s ? true : false;
+const enableRefreshHack = browser.tizen || browser.orsay || browser.operaTv || browser.web0s;
 
 function forceRefresh(loading) {
     const elem = this.parentNode;

src/elements/emby-scrollbuttons/ScrollButtons.tsx

@@ -3,11 +3,7 @@ import scrollerFactory from '../../libraries/scroller';
 import globalize from '../../scripts/globalize';
 import IconButton from '../emby-button/IconButton';
 import './emby-scrollbuttons.scss';
-
-enum Direction {
-    RIGHT,
-    LEFT,
-  }
+import { ScrollDirection, scrollerItemSlideIntoView } from './utils';
 
 interface ScrollButtonsProps {
     scrollerFactoryRef: React.MutableRefObject<scrollerFactory | null>;
@@ -22,31 +18,16 @@ const ScrollButtons: FC<ScrollButtonsProps> = ({ scrollerFactoryRef, scrollState
     const [localeScrollPos, setLocaleScrollPos] = useState<number>(0);
     const scrollButtonsRef = useRef<HTMLDivElement>(null);
 
-    const scrollToPosition = useCallback((pos: number, immediate: boolean) => {
-        if (scrollerFactoryRef.current) {
-            scrollerFactoryRef.current.slideTo(pos, immediate, undefined );
-        }
-    }, [scrollerFactoryRef]);
-
-    const onScrollButtonClick = useCallback((direction: Direction) => {
-        let newPos;
-        if (direction === Direction.LEFT) {
-            newPos = Math.max(0, scrollState.scrollPos - scrollState.scrollSize);
-        } else {
-            newPos = scrollState.scrollPos + scrollState.scrollSize;
-        }
-
-        if (globalize.getIsRTL() && direction === Direction.LEFT) {
-            newPos = scrollState.scrollPos + scrollState.scrollSize;
-        } else if (globalize.getIsRTL()) {
-            newPos = Math.min(0, scrollState.scrollPos - scrollState.scrollSize);
-        }
-
-        scrollToPosition(newPos, false);
-    }, [ scrollState.scrollPos, scrollState.scrollSize, scrollToPosition ]);
+    const onScrollButtonClick = useCallback((direction: ScrollDirection) => {
+        scrollerItemSlideIntoView({
+            direction,
+            scroller: scrollerFactoryRef.current,
+            scrollState
+        });
+    }, [scrollState, scrollerFactoryRef]);
 
-    const triggerScrollLeft = useCallback(() => onScrollButtonClick(Direction.LEFT), [ onScrollButtonClick ]);
-    const triggerScrollRight = useCallback(() => onScrollButtonClick(Direction.RIGHT), [ onScrollButtonClick ]);
+    const triggerScrollLeft = useCallback(() => onScrollButtonClick(ScrollDirection.LEFT), [ onScrollButtonClick ]);
+    const triggerScrollRight = useCallback(() => onScrollButtonClick(ScrollDirection.RIGHT), [ onScrollButtonClick ]);
 
     useEffect(() => {
         const parent = scrollButtonsRef.current?.parentNode as HTMLDivElement;
@@ -67,15 +48,15 @@ const ScrollButtons: FC<ScrollButtonsProps> = ({ scrollerFactoryRef, scrollState
                 className='emby-scrollbuttons-button btnPrev'
                 onClick={triggerScrollLeft}
                 icon='chevron_left'
-                disabled={localeScrollPos > 0 ? false : true}
+                disabled={localeScrollPos <= 0}
             />
 
             <IconButton
                 type='button'
                 className='emby-scrollbuttons-button btnNext'
                 onClick={triggerScrollRight}
                 icon='chevron_right'
-                disabled={scrollState.scrollWidth > 0 && localeScrollPos + scrollState.scrollSize >= scrollState.scrollWidth ? true : false}
+                disabled={scrollState.scrollWidth > 0 && localeScrollPos + scrollState.scrollSize >= scrollState.scrollWidth}
             />
         </div>
     );

src/elements/emby-scrollbuttons/emby-scrollbuttons.js

@@ -2,6 +2,7 @@ import './emby-scrollbuttons.scss';
 import 'webcomponents.js/webcomponents-lite';
 import '../emby-button/paper-icon-button-light';
 import globalize from '../../scripts/globalize';
+import { scrollerItemSlideIntoView } from './utils';
 
 const EmbyScrollButtonsPrototype = Object.create(HTMLDivElement.prototype);
 
@@ -128,26 +129,16 @@ function getScrollSize(elem) {
 }
 
 function onScrollButtonClick() {
-    const scroller = this.parentNode.nextSibling;
-
     const direction = this.getAttribute('data-direction');
-    const scrollSize = getScrollSize(scroller);
-    const scrollPos = getScrollPosition(scroller);
-
-    let newPos;
-    if (direction === 'left') {
-        newPos = Math.max(0, scrollPos - scrollSize);
-    } else {
-        newPos = scrollPos + scrollSize;
-    }
-
-    if (globalize.getIsRTL() && direction === 'left') {
-        newPos = scrollPos + scrollSize;
-    } else if (globalize.getIsRTL()) {
-        newPos = Math.min(0, scrollPos - scrollSize);
-    }
-
-    scroller.scrollToPosition(newPos, false);
+    const scroller = this.parentNode.nextSibling;
+    const scrollPosition = getScrollPosition(scroller);
+    scrollerItemSlideIntoView({
+        direction,
+        scroller,
+        scrollState: {
+            scrollPos: scrollPosition
+        }
+    });
 }
 
 EmbyScrollButtonsPrototype.attachedCallback = function () {