TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

Use a slot for displaying the loading indicator content

Browse source
This commit is contained in:
Bnyro 2023-03-13 14:39:07 +01:00
parent cc48fe8e27
commit ae855c2bac
7 changed files with 41 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/components/ChannelPage.vue
View file

@ -1,7 +1,7 @@
<template>
<ErrorHandler v-if="channel && channel.error" :message="channel.message" :error="channel.error" />
<div v-if="channel" v-show="!channel.error">
<LoadingIndicatorPage :show-content="channel != null && !channel.error">
<div class="flex justify-center place-items-center">
<img height="48" width="48" class="rounded-full m-1" :src="channel.avatarUrl" />
<h1 v-text="channel.name" />
@ -61,24 +61,21 @@
hide-channel
/>
</div>
</div>
<div v-else>
<LoadingIndicator />
</div>
</LoadingIndicatorPage>
</template>
<script>
import ErrorHandler from "./ErrorHandler.vue";
import ContentItem from "./ContentItem.vue";
import WatchOnYouTubeButton from "./WatchOnYouTubeButton.vue";
import LoadingIndicator from "./LoadingIndicator.vue";
import LoadingIndicatorPage from "./LoadingIndicatorPage.vue";
export default {
components: {
ErrorHandler,
ContentItem,
WatchOnYouTubeButton,
LoadingIndicator,
LoadingIndicatorPage,
},
data() {
return {

13
src/components/FeedPage.vue
View file

@ -24,32 +24,29 @@
<hr />
<div v-if="videos.length != 0" class="video-grid">
<LoadingIndicatorPage :show-content="videosStore != null" class="video-grid">
<template v-for="video in videos" :key="video.url">
<VideoItem v-if="shouldShowVideo(video)" :is-feed="true" :item="video" />
</template>
</div>
<div v-else>
<LoadingIndicator />
</div>
</LoadingIndicatorPage>
</template>
<script>
import VideoItem from "./VideoItem.vue";
import SortingSelector from "./SortingSelector.vue";
import LoadingIndicator from "./LoadingIndicator.vue";
import LoadingIndicatorPage from "./LoadingIndicatorPage.vue";
export default {
components: {
VideoItem,
SortingSelector,
LoadingIndicator,
LoadingIndicatorPage,
},
data() {
return {
currentVideoCount: 0,
videoStep: 100,
videosStore: [],
videosStore: null,
videos: [],
availableFilters: ["all", "shorts", "videos"],
selectedFilter: "all",

18
src/components/LoadingIndicator.vue → src/components/LoadingIndicatorPage.vue
View file

@ -1,6 +1,9 @@
<template>
<div class="flex min-h-[75vh] w-full justify-center items-center">
<span id="spinner"></span>
<div v-if="!showContent" class="flex min-h-[75vh] w-full justify-center items-center">
<span id="spinner" />
</div>
<div v-else>
<slot />
</div>
</template>
@ -39,3 +42,14 @@
}
}
</style>
<script>
export default {
props: {
showContent: {
type: Boolean,
required: true,
},
},
};
</script>

11
src/components/PlaylistPage.vue
View file

@ -1,7 +1,7 @@
<template>
<ErrorHandler v-if="playlist && playlist.error" :message="playlist.message" :error="playlist.error" />
<div v-if="playlist" v-show="!playlist.error">
<LoadingIndicatorPage :show-content="playlist" v-show="!playlist.error">
<h1 class="text-center my-4" v-text="playlist.name" />
<div class="flex justify-between items-center">
@ -46,15 +46,12 @@
width="168"
/>
</div>
</div>
<div v-else>
<LoadingIndicator />
</div>
</LoadingIndicatorPage>
</template>
<script>
import ErrorHandler from "./ErrorHandler.vue";
import LoadingIndicator from "./LoadingIndicator.vue";
import LoadingIndicatorPage from "./LoadingIndicatorPage.vue";
import VideoItem from "./VideoItem.vue";
import WatchOnYouTubeButton from "./WatchOnYouTubeButton.vue";
@ -63,7 +60,7 @@ export default {
ErrorHandler,
VideoItem,
WatchOnYouTubeButton,
LoadingIndicator,
LoadingIndicatorPage,
},
data() {
return {

11
src/components/SearchResults.vue
View file

@ -18,24 +18,21 @@
</i18n-t>
</div>
<div v-if="results != null && results.items.length != 0" class="video-grid">
<LoadingIndicatorPage :show-content="results != null && results.items?.length" class="video-grid">
<template v-for="result in results.items" :key="result.url">
<ContentItem :item="result" height="94" width="168" />
</template>
</div>
<div v-else>
<LoadingIndicator />
</div>
</LoadingIndicatorPage>
</template>
<script>
import ContentItem from "./ContentItem.vue";
import LoadingIndicator from "./LoadingIndicator.vue";
import LoadingIndicatorPage from "./LoadingIndicatorPage.vue";
export default {
components: {
ContentItem,
LoadingIndicator,
LoadingIndicatorPage,
},
data() {
return {

11
src/components/TrendingPage.vue
View file

@ -3,22 +3,19 @@
<hr />
<div v-if="videos.length != 0" class="video-grid">
<LoadingIndicatorPage :show-content="videos.length != 0" class="video-grid">
<VideoItem v-for="video in videos" :key="video.url" :item="video" height="118" width="210" />
</div>
<div v-else>
<LoadingIndicator />
</div>
</LoadingIndicatorPage>
</template>
<script>
import LoadingIndicator from "./LoadingIndicator.vue";
import LoadingIndicatorPage from "./LoadingIndicatorPage.vue";
import VideoItem from "./VideoItem.vue";
export default {
components: {
VideoItem,
LoadingIndicator,
LoadingIndicatorPage,
},
data() {
return {

11
src/components/WatchVideo.vue
View file

@ -12,7 +12,7 @@
/>
</div>
<div v-if="video && !isEmbed" class="w-full">
<LoadingIndicatorPage :show-content="video && !isEmbed" class="w-full">
<ErrorHandler v-if="video && video.error" :message="video.message" :error="video.error" />
<div v-show="!video.error">
@ -217,10 +217,7 @@
<hr class="sm:hidden" />
</div>
</div>
</div>
<div v-else>
<LoadingIndicator />
</div>
</LoadingIndicatorPage>
</template>
<script>
@ -233,7 +230,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";
import LoadingIndicatorPage from "./LoadingIndicatorPage.vue";
export default {
name: "App",
@ -247,7 +244,7 @@ export default {
ShareModal,
PlaylistVideos,
WatchOnYouTubeButton,
LoadingIndicator,
LoadingIndicatorPage,
},
data() {
const smallViewQuery = window.matchMedia("(max-width: 640px)");