From 3fcb8ed00ef28d3870fad748f9fce4386a20b3f8 Mon Sep 17 00:00:00 2001
From: MrTimscampi <julien.machiels@protonmail.com>
Date: Mon, 29 Jun 2020 11:21:20 +0200
Subject: [PATCH] Add splash screen during app load

---
 src/index.html | 45 ++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 40 insertions(+), 5 deletions(-)
diff --git a/src/index.html b/src/index.html
index ed63ca1a9..d52be4346 100644
--- a/src/index.html
+++ b/src/index.html
@@ -52,7 +52,7 @@
     <!-- iPad Pro 1 -->
     <link href="assets/splash/ipadpro1_splash.png" media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
     <link href="assets/splash/ipadpro1_splash_l.png" media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image" />
-    
+
     <!-- iPad Pro 3 -->
     <link href="assets/splash/ipadpro3_splash.png" media="screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
     <link href="assets/splash/ipadpro3_splash_l.png" media="screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image" />
@@ -69,12 +69,19 @@
     <title>Jellyfin</title>
 
     <style>
-        .transparentDocument, .backgroundContainer-transparent:not(.withBackdrop) {
+        .transparentDocument,
+        .backgroundContainer-transparent:not(.withBackdrop) {
             background: none !important;
             background-color: transparent !important;
         }
 
-        .mouseIdle, .mouseIdle button, .mouseIdle select, .mouseIdle input, .mouseIdle textarea, .mouseIdle a, .mouseIdle label {
+        .mouseIdle,
+        .mouseIdle button,
+        .mouseIdle select,
+        .mouseIdle input,
+        .mouseIdle textarea,
+        .mouseIdle a,
+        .mouseIdle label {
             cursor: none !important;
         }
 
@@ -82,7 +89,9 @@
             background-color: #101010;
         }
 
-        .hide, .mouseIdle .hide-mouse-idle, .mouseIdle-tv .hide-mouse-idle-tv {
+        .hide,
+        .mouseIdle .hide-mouse-idle,
+        .mouseIdle-tv .hide-mouse-idle-tv {
             display: none !important;
         }
 
@@ -94,6 +103,30 @@
             z-index: 1;
             width: 0.8em;
         }
+
+        @keyframes fadein {
+            from {
+                opacity: 0;
+            }
+
+            to {
+                opacity: 1;
+            }
+        }
+
+        .splashLogo {
+            animation: fadein 0.5s;
+            width: 30%;
+            height: 30%;
+            background-image: url(assets/img/banner-light.png);
+            background-position: center center;
+            background-repeat: no-repeat;
+            background-size: contain;
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
     </style>
 </head>
 <body>
@@ -103,7 +136,9 @@
         <div class="mainDrawer-scrollContainer scrollContainer focuscontainer-y"></div>
     </div>
     <div class="skinHeader focuscontainer-x"></div>
-    <div class="mainAnimatedPages skinBody"></div>
+    <div class="mainAnimatedPages skinBody">
+        <div class="splashLogo"></div>
+    </div>
     <div class="mainDrawerHandle"></div>
 
     <!-- inject:js -->
