Merge branch 'master' into fix/incorrect-redirect-after-delete-v2

Author: robert-md-or

src/apps/dashboard/features/backups/components/RestoreConfirmationDialog.tsx

@@ -26,7 +26,7 @@ const RestoreConfirmationDialog: FunctionComponent<IProps> = ({ open, onClose, o
             </DialogTitle>
 
             <DialogContent>
-                <DialogContentText>
+                <DialogContentText sx={{ whiteSpace: 'pre-line' }}>
                     {globalize.translate('MessageRestoreDisclaimer')}
                 </DialogContentText>
             </DialogContent>

src/components/cardbuilder/card.scss

@@ -448,6 +448,11 @@ button::-moz-focus-inner {
     z-index: 1;
     padding: 0.75em;
     font-size: 88%;
+
+    /* The "modern" layout needs additional specificity to prevent MUI styles from overriding */
+    &.paper-icon-button-light {
+        color: rgba(255, 255, 255, 0.76);
+    }
 }
 
 .cardOverlayButton-br {

src/components/metadataEditor/metadataEditor.js

@@ -142,6 +142,7 @@ function onSubmit(e) {
         Album: form.querySelector('#txtAlbum').value,
         AlbumArtists: getAlbumArtists(form),
         ArtistItems: getArtists(form),
+        SeriesName: form.querySelector('#txtseriesName').value,
         Overview: form.querySelector('#txtOverview').value,
         Status: form.querySelector('#selectStatus').value,
         AirDays: getSelectedAirDays(form),
@@ -580,6 +581,12 @@ function setFieldVisibilities(context, item) {
         hideElement('#fldCriticRating', context);
     }
 
+    if (item.Type === BaseItemKind.Book) {
+        showElement('#seriesName', context);
+    } else {
+        hideElement('#seriesName', context);
+    }
+
     if (item.Type === 'Series') {
         showElement('#fldStatus', context);
         showElement('#fldAirDays', context);
@@ -819,6 +826,10 @@ function fillItemInfo(context, item, parentalRatingOptions) {
 
     context.querySelector('#selectDisplayOrder').value = item.DisplayOrder || '';
 
+    if (item.Type == 'Book') {
+        context.querySelector('#txtseriesName').value = item.SeriesName || '';
+    }
+
     context.querySelector('#txtArtist').value = (item.ArtistItems || []).map(function (a) {
         return a.Name;
     }).join(';');

src/components/metadataEditor/metadataEditor.template.html

@@ -60,6 +60,9 @@ <h3 class="formDialogHeaderTitle">
                     <input is="emby-input" id="txtAlbumArtist" type="text" label="${LabelAlbumArtists}" />
                     <div class="fieldDescription">${LabelArtistsHelp}</div>
                 </div>
+                <div id="seriesName" class="hide inputContainer">
+                    <input is="emby-input" id="txtseriesName" type="text" label="${SeriesName}" aria-label="${SeriesName}" />
+                </div>
                 <div id="fldAlbum" class="hide inputContainer">
                     <input is="emby-input" id="txtAlbum" type="text" label="${LabelAlbum}" />
                 </div>

src/plugins/bookPlayer/BookOsd/BookOsd.scss

@@ -4,6 +4,7 @@
     z-index: 1002;
     display: flex;
     justify-content: space-between;
+    pointer-events: none;
     flex-direction: column;
 }
 
@@ -14,6 +15,7 @@
     height: 5vh;
     padding: 0 0.8vw;
     background-color: var(--jf-palette-AppBar-defaultBg);
+    pointer-events: auto;
 }
 
 // TODO disable landscape on mobile devices
@@ -23,6 +25,10 @@
     }
 }
 
+.bookOsdSpacer {
+    flex: 1;
+}
+
 .bookOsdTop {
     padding-top: env(safe-area-inset-top);
 }
@@ -31,10 +37,6 @@
     padding-bottom: env(safe-area-inset-bottom);
 }
 
-.bookOsdMargin {
-    margin-left: auto;
-}
-
 .bookOsdTitle {
     font-size: 1.1rem;
     margin-left: 0.35rem;

src/plugins/bookPlayer/BookOsd/BookOsd.tsx

@@ -3,32 +3,57 @@ import React, { type FC, useCallback, useState } from 'react';
 import './BookOsd.scss';
 import IconButton from '../../../elements/emby-button/IconButton';
 import globalize from 'lib/globalize';
+import * as userSettings from '../../../scripts/settings/userSettings';
+import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
 
 interface BookOsdProps {
-    title: string;
+    item: BaseItemDto;
     onExit: () => void;
     onPrevious: () => void;
     onNext: () => void;
     onOpenTableOfContents?: () => void;
     onRotateTheme?: () => void;
     onDecreaseFontSize?: () => void;
     onIncreaseFontSize?: () => void;
+    onToggleDirection?: () => void;
+    onToggleLayout?: () => void;
     onToggleFullscreen?: () => void;
 }
 
+interface ComicsPlayerSettings {
+    langDir?: string;
+    pagesPerView?: number;
+}
+
 const BookOsd: FC<BookOsdProps> = ({
-    title,
+    item,
     onExit,
     onPrevious,
     onNext,
     onOpenTableOfContents,
     onRotateTheme,
     onDecreaseFontSize,
     onIncreaseFontSize,
+    onToggleDirection,
+    onToggleLayout,
     onToggleFullscreen
 }) => {
+    const settings = userSettings.getComicsPlayerSettings(item.Id!) as ComicsPlayerSettings;
+
+    const [direction, setDirection] = useState(settings.langDir === 'rtl');
+    const [layout, setLayout] = useState(settings.pagesPerView === 2);
     const [fullscreen, setFullscreen] = useState(false);
 
+    const onClickDirection = useCallback(() => {
+        onToggleDirection?.();
+        setDirection(state => !state);
+    }, [onToggleDirection]);
+
+    const onClickLayout = useCallback(() => {
+        onToggleLayout?.();
+        setLayout(state => !state);
+    }, [onToggleLayout]);
+
     const onClickFullscreen = useCallback(() => {
         onToggleFullscreen?.();
         setFullscreen(state => !state);
@@ -38,19 +63,19 @@ const BookOsd: FC<BookOsdProps> = ({
         <div className='bookOsd'>
             <div className='bookOsdRow bookOsdTop'>
                 <IconButton onClick={onExit} icon='arrow_back' title={globalize.translate('ButtonBack')} />
-                <span className='bookOsdTitle'>{title}</span>
+                <span className='bookOsdTitle'>{item.Name}</span>
             </div>
 
             <div className='bookOsdRow bookOsdBottom'>
                 <IconButton onClick={onPrevious} icon='navigate_before' title={globalize.translate('Previous')} />
                 <IconButton onClick={onNext} icon='navigate_next' title={globalize.translate('Next')} />
+                <div className='bookOsdSpacer' />
 
                 {onOpenTableOfContents && (
                     <IconButton
                         onClick={onOpenTableOfContents}
                         icon='toc'
                         title={globalize.translate('TableOfContents')}
-                        className='bookOsdMargin'
                     />
                 )}
 
@@ -78,6 +103,22 @@ const BookOsd: FC<BookOsdProps> = ({
                     />
                 )}
 
+                {onToggleDirection && (
+                    <IconButton
+                        onClick={onClickDirection}
+                        icon={direction ? 'arrow_circle_left' : 'arrow_circle_right'}
+                        title={globalize.translate(direction ? 'ViewRightToLeft' : 'ViewLeftToRight')}
+                    />
+                )}
+
+                {onToggleLayout && (
+                    <IconButton
+                        onClick={onClickLayout}
+                        icon={layout ? 'import_contacts' : 'devices_fold'}
+                        title={globalize.translate(layout ? 'ViewDoublePage' : 'ViewSinglePage')}
+                    />
+                )}
+
                 {onToggleFullscreen && (
                     <IconButton
                         onClick={onClickFullscreen}

src/plugins/bookPlayer/plugin.js

@@ -192,8 +192,7 @@ export class BookPlayer {
         this.rendition?.on('keydown', this.onWindowKeyDown);
 
         if (browser.safari) {
-            const player = document.querySelector('.bookOsd');
-            this.addSwipeGestures(player);
+            this.addSwipeGestures(document.querySelector('#bookPlayerContainer'));
         } else {
             this.rendition?.on('rendered', (e, i) => this.addSwipeGestures(i.document.documentElement));
         }
@@ -298,7 +297,7 @@ export class BookPlayer {
 
         this.mediaElement = elem;
         this.unmountBookOsd = renderComponent(BookOsd, {
-            title: options.items[0].Name,
+            item: options.items[0],
             onExit: this.onDialogClosed,
             onPrevious: this.previous,
             onNext: this.next,