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() {
return src(options.injectBundle.query, { base: './src/' })
.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(browserSync.stream());

55
src/index.html
View file

@ -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,42 @@
z-index: 1;
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>
</head>
<body>
@ -103,7 +148,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 -->

1
src/scripts/apploader.js
View file

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