mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Merge pull request #1497 from MrTimscampi/splash
Add defered appLoader and splash screen
This commit is contained in:
commit
66beadea61
3 changed files with 59 additions and 6 deletions
|
@ -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());
|
||||
|
|
|
@ -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 -->
|
||||
|
|
|
@ -11,6 +11,7 @@
|
|||
src += `?v=${self.dashboardVersion}`;
|
||||
}
|
||||
script.src = src;
|
||||
script.setAttribute('async', '');
|
||||
|
||||
if (onload) {
|
||||
script.onload = onload;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue