Merge pull request Stremio#642 from Stremio/feature-player-background…

…-loader Feature: player background splash screen loader
IEduStu · May 17, 2024 · 1d6a6cc · 1d6a6cc
2 parents 911059b + 90a313a
commit 1d6a6cc
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
@@ -611,15 +611,23 @@ const Player = ({ urlParams, queryParams }) => {
                 onDoubleClick={onVideoDoubleClick}
             />
             {
-                video.state.buffering ?
-                    <BufferingLoader className={styles['layer']} logo={player?.metaItem?.content?.logo} />
+                !video.state.loaded ?
+                    <div className={classnames(styles['layer'], styles['background-layer'])}>
+                        <img className={styles['image']} src={player?.metaItem?.content?.background} />
+                    </div>
+                    :
+                    null
+            }
+            {
+                (video.state.buffering || !video.state.loaded) && !error ?
+                    <BufferingLoader className={classnames(styles['layer'], styles['buffering-layer'])} logo={player?.metaItem?.content?.logo} />
                     :
                     null
             }
             {
                 error !== null ?
                     <Error
-                        className={styles['layer']}
+                        className={classnames(styles['layer'], styles['error-layer'])}
                         stream={video.state.stream}
                         {...error}
                     />

diff --git a/src/routes/Player/styles.less b/src/routes/Player/styles.less
@@ -40,6 +40,19 @@ html:not(.active-slider-within) {
         bottom: 0;
         z-index: 0;
 
+        &.buffering-layer, &.error-layer {
+            background: transparent;
+        }
+
+        &.background-layer {
+            .image {
+                width: 100vw;
+                height: 100vh;
+                object-fit: cover;
+                opacity: 0.6;
+            }
+        }
+
         &.nav-bar-layer {
             bottom: initial;
             background: transparent;