mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-11-10 02:08:21 +00:00
Add a loading indicator to the player page
This commit is contained in:
parent
889a410cbd
commit
cc48fe8e27
41
src/components/LoadingIndicator.vue
Normal file
41
src/components/LoadingIndicator.vue
Normal 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>
|
@ -218,6 +218,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<LoadingIndicator />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -230,6 +233,7 @@ import PlaylistAddModal from "./PlaylistAddModal.vue";
|
||||
import ShareModal from "./ShareModal.vue";
|
||||
import PlaylistVideos from "./PlaylistVideos.vue";
|
||||
import WatchOnYouTubeButton from "./WatchOnYouTubeButton.vue";
|
||||
import LoadingIndicator from "./LoadingIndicator.vue";
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
@ -243,13 +247,12 @@ export default {
|
||||
ShareModal,
|
||||
PlaylistVideos,
|
||||
WatchOnYouTubeButton,
|
||||
LoadingIndicator,
|
||||
},
|
||||
data() {
|
||||
const smallViewQuery = window.matchMedia("(max-width: 640px)");
|
||||
return {
|
||||
video: {
|
||||
title: "Loading...",
|
||||
},
|
||||
video: null,
|
||||
playlistId: null,
|
||||
playlist: null,
|
||||
index: null,
|
||||
@ -351,7 +354,7 @@ export default {
|
||||
this.showDesc = !this.getPreferenceBoolean("minimizeDescription", false);
|
||||
this.showRecs = !this.getPreferenceBoolean("minimizeRecommendations", false);
|
||||
this.showChapters = !this.getPreferenceBoolean("minimizeChapters", false);
|
||||
if (this.video.duration) {
|
||||
if (this.video?.duration) {
|
||||
document.title = this.video.title + " - Piped";
|
||||
this.$refs.videoPlayer.loadVideo();
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user