From 3ce8a57bc3e90224ee711bad012ec2474d90cf85 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Thu, 15 Jul 2021 10:46:50 +0200
Subject: [PATCH] refactor(Player): fix markup hierarchy, remove gap and
 declare flex props in style

---
 src/routes/Player/Player.js   | 37 +++++++++++++++++++----------------
 src/routes/Player/styles.less |  6 ++----
 2 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index d96048ed5..10e896ce9 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -428,29 +428,32 @@ const Player = ({ urlParams, queryParams }) => {
                 videoState.buffering ?
                     <BufferingLoader className={styles['layer']} />
                     :
-                    error !== null ?
-                        <div className={classnames(styles['layer'], styles['error-layer'])}>
-                            <div className={styles['error-label']}>{error.message}</div>
-                            {
-                                playlist ?
-                                    <div className={styles['error-details']}>
-                                        <Button className={styles['error-details-button']} title={'Download MU3 Playlist'} href={playlist.file} download={playlist.name}>
-                                            <Icon className={styles['icon']} icon={'ic_downloads'} />
-                                            <div className={styles['label']}>Download Playlist</div>
-                                        </Button>
-                                    </div>
-                                    :
-                                    null
-                            }
-                        </div>
-                        :
-                        null
+                    null
             }
             <div
                 className={styles['layer']}
                 onClick={onVideoClick}
                 onDoubleClick={onVideoDoubleClick}
             />
+            {
+                error !== null ?
+                    <div className={classnames(styles['layer'], styles['error-layer'])}>
+                        <div className={styles['error-label']}>{error.message}</div>
+                        {
+                            playlist ?
+                                <div className={styles['error-details']}>
+                                    <Button className={styles['error-details-button']} title={'Download MU3 Playlist'} href={playlist.file} download={playlist.name}>
+                                        <Icon className={styles['icon']} icon={'ic_downloads'} />
+                                        <div className={styles['label']}>Download Playlist</div>
+                                    </Button>
+                                </div>
+                                :
+                                null
+                        }
+                    </div>
+                    :
+                    null
+            }
             {
                 subtitlesMenuOpen || infoMenuOpen ?
                     <div className={styles['layer']} />
diff --git a/src/routes/Player/styles.less b/src/routes/Player/styles.less
index 07ba94378..6ada11277 100644
--- a/src/routes/Player/styles.less
+++ b/src/routes/Player/styles.less
@@ -38,7 +38,6 @@ html:not(.active-slider-within) {
         bottom: 0;
 
         &.error-layer {
-            z-index: 1;
             display: flex;
             flex-direction: column;
             align-items: center;
@@ -55,8 +54,7 @@ html:not(.active-slider-within) {
             }
 
             .error-details {
-                display: flex;
-                gap: 0.8rem;
+                flex: 0 1 auto;
                 font-size: 1.5rem;
                 margin-top: 1.5rem;
                 color: @color-surface-light5-90;
@@ -66,7 +64,6 @@ html:not(.active-slider-within) {
                     display: flex;
                     flex-direction: row;
                     align-items: center;
-                    gap: 1rem;
                     height: 3.5rem;
                     padding: 0.5rem 1rem;
                     font-weight: 500;
@@ -80,6 +77,7 @@ html:not(.active-slider-within) {
                     .icon {
                         width: 1.5rem;
                         height: 1.5rem;
+                        margin-right: 1rem;
                         fill: @color-surface-light5-90;
                     }
                 }