mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Merge pull request #1497 from MrTimscampi/splash

Browse source 
Add defered appLoader and splash screen
This commit is contained in:
dkanada 2020-07-01 14:15:09 +09:00 • committed by GitHub
commit 66beadea61
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 59 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

7
gulpfile.js
View file

@ -184,7 +184,12 @@ function copy(query) {
function injectBundle() { function injectBundle() {
return src(options.injectBundle.query, { base: './src/' }) return src(options.injectBundle.query, { base: './src/' })
.pipe(inject( .pipe(inject(
src(['src/scripts/apploader.js'], { read: false }, { base: './src/' }), { relative: true } src(['src/scripts/apploader.js'], { read: false }, { base: './src/' }), {
relative: true,
transform: function (filepath) {
return `<script src="${filepath}" defer></script>`;
}
}
)) ))
.pipe(dest('dist/')) .pipe(dest('dist/'))
.pipe(browserSync.stream()); .pipe(browserSync.stream());

57
src/index.html
View file

@ -52,7 +52,7 @@
<!-- iPad Pro 1 --> <!-- 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.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" /> <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 --> <!-- 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.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" /> <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> <title>Jellyfin</title>
<style> <style>
.transparentDocument, .backgroundContainer-transparent:not(.withBackdrop) { .transparentDocument,
.backgroundContainer-transparent:not(.withBackdrop) {
background: none !important; background: none !important;
background-color: transparent !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; cursor: none !important;
} }
@ -82,7 +89,9 @@
background-color: #101010; 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; display: none !important;
} }
@ -94,6 +103,42 @@
z-index: 1; z-index: 1;
width: 0.8em; width: 0.8em;
} }
@-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.splashLogo {
-webkit-animation: fadein 0.5s;
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%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style> </style>
</head> </head>
<body> <body>
@ -103,7 +148,9 @@
<div class="mainDrawer-scrollContainer scrollContainer focuscontainer-y"></div> <div class="mainDrawer-scrollContainer scrollContainer focuscontainer-y"></div>
</div> </div>
<div class="skinHeader focuscontainer-x"></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> <div class="mainDrawerHandle"></div>
<!-- inject:js --> <!-- inject:js -->

1
src/scripts/apploader.js
View file

@ -11,6 +11,7 @@
src += `?v=${self.dashboardVersion}`; src += `?v=${self.dashboardVersion}`;
} }
script.src = src; script.src = src;
script.setAttribute('async', '');
if (onload) { if (onload) {
script.onload = onload; script.onload = onload;