Merge pull request #6771 from thornbill/splash-screen-login

src/apps/dashboard/routes/branding/index.tsx

@@ -19,13 +19,13 @@ import Loading from 'components/loading/LoadingComponent';
 import Image from 'components/Image';
 import Page from 'components/Page';
 import ServerConnections from 'components/ServerConnections';
+import { SPLASHSCREEN_URL } from 'constants/branding';
 import { useApi } from 'hooks/useApi';
 import globalize from 'lib/globalize';
 import { queryClient } from 'utils/query/queryClient';
 import { ActionData } from 'types/actionData';
 
 const BRANDING_CONFIG_KEY = 'branding';
-const SPLASHSCREEN_URL = '/Branding/Splashscreen';
 const BrandingOption = {
     CustomCss: 'CustomCss',
     LoginDisclaimer: 'LoginDisclaimer',

src/components/Backdrop.tsx

@@ -1,15 +1,5 @@
-import Box from '@mui/material/Box';
 import React, { useEffect } from 'react';
 
-import layoutManager from './layoutManager';
-import { DRAWER_WIDTH } from './ResponsiveDrawer';
-
-const styles = layoutManager.experimental ? {
-    left: {
-        md: DRAWER_WIDTH
-    }
-} : {};
-
 const Backdrop = () => {
     useEffect(() => {
         // Initialize the UI components after first render
@@ -18,10 +8,7 @@ const Backdrop = () => {
 
     return (
         <>
-            <Box
-                className='backdropContainer'
-                sx={styles}
-            />
+            <div className='backdropContainer' />
             <div className='backgroundContainer' />
         </>
     );

src/components/backdrop/backdrop.js

@@ -213,19 +213,19 @@ function enabled() {
 let rotationInterval;
 let currentRotatingImages = [];
 let currentRotationIndex = -1;
-export function setBackdrops(items, imageOptions, enableImageRotation, isEnabled = false) {
+export function setBackdrops(items, imageOptions, isEnabled = false) {
     if (isEnabled || enabled()) {
         const images = getImageUrls(items, imageOptions);
 
         if (images.length) {
-            startRotation(images, enableImageRotation);
+            setBackdropImages(images);
         } else {
             clearBackdrop();
         }
     }
 }
 
-function startRotation(images, enableImageRotation) {
+export function setBackdropImages(images) {
     if (isEqual(images, currentRotatingImages)) {
         return;
     }
@@ -235,7 +235,7 @@ function startRotation(images, enableImageRotation) {
     currentRotatingImages = images;
     currentRotationIndex = -1;
 
-    if (images.length > 1 && enableImageRotation !== false && enableRotation()) {
+    if (images.length > 1 && enableRotation()) {
         rotationInterval = setInterval(onRotationInterval, 24000);
     }
 

src/constants/branding.ts

@@ -0,0 +1 @@
+export const SPLASHSCREEN_URL = '/Branding/Splashscreen';

src/controllers/itemDetails/index.js

@@ -503,7 +503,7 @@ function renderBackdrop(page, item) {
         // If backdrops are disabled, but the header banner is enabled, add a class to the page to disable the transparency
         page.classList.toggle('noBackdropTransparency', isBannerEnabled && !userSettings.enableBackdrops());
 
-        setBackdrops([item], null, null, isBannerEnabled);
+        setBackdrops([item], null, isBannerEnabled);
     } else {
         clearBackdrop();
     }

src/controllers/session/login/index.html

@@ -1,4 +1,4 @@
-<div id="loginPage" data-role="page" class="page standalonePage" data-backbutton="false">
+<div id="loginPage" data-role="page" class="page standalonePage backdropPage" data-backbutton="false" data-backdroptype="splashscreen">
     <div class="padded-left padded-right padded-bottom-page margin-auto-y">
         <form class="manualLoginForm margin-auto-x hide">
             <div class="padded-left padded-right flex align-items-center justify-content-center">

src/scripts/autoBackdrops.js

@@ -1,7 +1,11 @@
-import { clearBackdrop, setBackdrops } from '../components/backdrop/backdrop';
+import { clearBackdrop, setBackdropImages, setBackdrops } from '../components/backdrop/backdrop';
 import * as userSettings from './settings/userSettings';
 import libraryMenu from './libraryMenu';
 import { pageClassOn } from '../utils/dashboard';
+import { queryClient } from 'utils/query/queryClient';
+import { getBrandingOptionsQuery } from 'apps/dashboard/features/branding/api/useBrandingOptions';
+import ServerConnections from 'components/ServerConnections';
+import { SPLASHSCREEN_URL } from 'constants/branding';
 
 const cache = {};
 
@@ -43,7 +47,7 @@ function getBackdropItemIds(apiClient, userId, types, parentId) {
 }
 
 function showBackdrop(type, parentId) {
-    const apiClient = window.ApiClient;
+    const apiClient = ServerConnections.currentApiClient();
 
     if (apiClient) {
         getBackdropItemIds(apiClient, apiClient.getCurrentUserId(), type, parentId).then(function (images) {
@@ -59,13 +63,27 @@ function showBackdrop(type, parentId) {
     }
 }
 
+async function showSplashScreen() {
+    const api = ServerConnections.getCurrentApi();
+    const brandingOptions = await queryClient.fetchQuery(getBrandingOptionsQuery(api));
+    if (brandingOptions.SplashscreenEnabled) {
+        setBackdropImages([
+            api.getUri(SPLASHSCREEN_URL, { t: Date.now() })
+        ]);
+    } else {
+        clearBackdrop();
+    }
+}
+
 pageClassOn('pageshow', 'page', function () {
     const page = this;
 
     if (!page.classList.contains('selfBackdropPage')) {
         if (page.classList.contains('backdropPage')) {
-            if (enabled()) {
-                const type = page.getAttribute('data-backdroptype');
+            const type = page.getAttribute('data-backdroptype');
+            if (type === 'splashscreen') {
+                showSplashScreen();
+            } else if (enabled()) {
                 const parentId = page.classList.contains('globalBackdropPage') ? '' : libraryMenu.getTopParentId();
                 showBackdrop(type, parentId);
             } else {