Add a loading indicator to the player page

This commit is contained in:
Bnyro 2023-03-12 16:03:24 +01:00
parent 889a410cbd
commit cc48fe8e27
2 changed files with 48 additions and 4 deletions

View file

@ -0,0 +1,41 @@
<template>
<div class="flex min-h-[75vh] w-full justify-center items-center">
<span id="spinner"></span>
</div>
</template>
<style>
#spinner:after {
--spinner-color: #000;
}
.dark #spinner:after {
--spinner-color: #fff;
}
#spinner {
display: inline-block;
width: 70px;
height: 70px;
}
#spinner:after {
content: " ";
display: block;
width: 54px;
height: 54px;
margin: 8px;
border-radius: 50%;
border: 4px solid var(--spinner-color);
border-color: var(--spinner-color) transparent var(--spinner-color) transparent;
animation: spinner 1.2s linear infinite;
}
@keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>

View file

@ -218,6 +218,9 @@
</div> </div>
</div> </div>
</div> </div>
<div v-else>
<LoadingIndicator />
</div>
</template> </template>
<script> <script>
@ -230,6 +233,7 @@ import PlaylistAddModal from "./PlaylistAddModal.vue";
import ShareModal from "./ShareModal.vue"; import ShareModal from "./ShareModal.vue";
import PlaylistVideos from "./PlaylistVideos.vue"; import PlaylistVideos from "./PlaylistVideos.vue";
import WatchOnYouTubeButton from "./WatchOnYouTubeButton.vue"; import WatchOnYouTubeButton from "./WatchOnYouTubeButton.vue";
import LoadingIndicator from "./LoadingIndicator.vue";
export default { export default {
name: "App", name: "App",
@ -243,13 +247,12 @@ export default {
ShareModal, ShareModal,
PlaylistVideos, PlaylistVideos,
WatchOnYouTubeButton, WatchOnYouTubeButton,
LoadingIndicator,
}, },
data() { data() {
const smallViewQuery = window.matchMedia("(max-width: 640px)"); const smallViewQuery = window.matchMedia("(max-width: 640px)");
return { return {
video: { video: null,
title: "Loading...",
},
playlistId: null, playlistId: null,
playlist: null, playlist: null,
index: null, index: null,
@ -351,7 +354,7 @@ export default {
this.showDesc = !this.getPreferenceBoolean("minimizeDescription", false); this.showDesc = !this.getPreferenceBoolean("minimizeDescription", false);
this.showRecs = !this.getPreferenceBoolean("minimizeRecommendations", false); this.showRecs = !this.getPreferenceBoolean("minimizeRecommendations", false);
this.showChapters = !this.getPreferenceBoolean("minimizeChapters", false); this.showChapters = !this.getPreferenceBoolean("minimizeChapters", false);
if (this.video.duration) { if (this.video?.duration) {
document.title = this.video.title + " - Piped"; document.title = this.video.title + " - Piped";
this.$refs.videoPlayer.loadVideo(); this.$refs.videoPlayer.loadVideo();
} }