mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-08-14 23:57:27 +00:00
Add error handling for Videos, Channels, and Playlists.
This commit is contained in:
parent
db5681297f
commit
20ddaab9e3
4 changed files with 73 additions and 34 deletions
|
@ -1,8 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<div v-if="channel">
|
<ErrorHandler v-if="channel && channel.error" :message="channel.message" :error="channel.error" />
|
||||||
|
|
||||||
|
<div v-if="channel" v-show="!channel.error">
|
||||||
<h1 class="uk-text-center"><img height="48" width="48" v-bind:src="channel.avatarUrl" />{{ channel.name }}</h1>
|
<h1 class="uk-text-center"><img height="48" width="48" v-bind:src="channel.avatarUrl" />{{ channel.name }}</h1>
|
||||||
<img v-if="channel.bannerUrl" v-bind:src="channel.bannerUrl" style="width: 100%" loading="lazy" />
|
<img v-if="channel.bannerUrl" v-bind:src="channel.bannerUrl" style="width: 100%" loading="lazy" />
|
||||||
<p v-html="this.channel.description.replaceAll('\n', '<br>')"></p>
|
<p v-html="this.channel.description" style="white-space: pre"></p>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
|
@ -35,6 +37,7 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Constants from "@/Constants.js";
|
import Constants from "@/Constants.js";
|
||||||
|
import ErrorHandler from "@/components/ErrorHandler.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
|
@ -63,7 +66,9 @@ export default {
|
||||||
async getChannelData() {
|
async getChannelData() {
|
||||||
this.fetchChannel()
|
this.fetchChannel()
|
||||||
.then(data => (this.channel = data))
|
.then(data => (this.channel = data))
|
||||||
.then(() => (document.title = this.channel.name + " - Piped"));
|
.then(() => {
|
||||||
|
if (!this.channel.error) document.title = this.channel.name + " - Piped";
|
||||||
|
});
|
||||||
},
|
},
|
||||||
handleScroll() {
|
handleScroll() {
|
||||||
if (this.loading || !this.channel || !this.channel.nextpage) return;
|
if (this.loading || !this.channel || !this.channel.nextpage) return;
|
||||||
|
@ -84,5 +89,8 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
components: {
|
||||||
|
ErrorHandler,
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
16
src/components/ErrorHandler.vue
Normal file
16
src/components/ErrorHandler.vue
Normal file
|
@ -0,0 +1,16 @@
|
||||||
|
<template>
|
||||||
|
<p>{{ message }}</p>
|
||||||
|
<button uk-toggle="target: #stacktrace" class="uk-button uk-button-small" style="background: #222" type="button">
|
||||||
|
Show More
|
||||||
|
</button>
|
||||||
|
<p id="stacktrace" style="white-space: pre" hidden>{{ error }}</p>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
error: String,
|
||||||
|
message: String,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
|
@ -1,5 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div v-if="playlist">
|
<ErrorHandler v-if="playlist && playlist.error" :message="playlist.message" :error="playlist.error" />
|
||||||
|
|
||||||
|
<div v-if="playlist" v-show="!playlist.error">
|
||||||
<h1 class="uk-text-center">
|
<h1 class="uk-text-center">
|
||||||
<img v-bind:src="playlist.avatarUrl" height="48" width="48" loading="lazy" />
|
<img v-bind:src="playlist.avatarUrl" height="48" width="48" loading="lazy" />
|
||||||
{{ playlist.name }}
|
{{ playlist.name }}
|
||||||
|
@ -44,6 +46,7 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Constants from "@/Constants.js";
|
import Constants from "@/Constants.js";
|
||||||
|
import ErrorHandler from "@/components/ErrorHandler.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
|
@ -86,5 +89,8 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
components: {
|
||||||
|
ErrorHandler,
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,5 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="uk-container uk-container-xlarge">
|
<div class="uk-container uk-container-xlarge">
|
||||||
|
<ErrorHandler v-if="video.error" :message="video.message" :error="video.error" />
|
||||||
|
|
||||||
|
<div v-show="!video.error">
|
||||||
<Player ref="videoPlayer" :video="video" :sponsors="sponsors" :selectedAutoPlay="selectedAutoPlay" />
|
<Player ref="videoPlayer" :video="video" :sponsors="sponsors" :selectedAutoPlay="selectedAutoPlay" />
|
||||||
<h1 class="uk-text-bold">{{ video.title }}</h1>
|
<h1 class="uk-text-bold">{{ video.title }}</h1>
|
||||||
|
|
||||||
|
@ -26,6 +29,8 @@
|
||||||
{{ showDesc ? "+" : "-" }}
|
{{ showDesc ? "+" : "-" }}
|
||||||
</a>
|
</a>
|
||||||
<p v-show="showDesc" class="uk-light" v-html="video.description"></p>
|
<p v-show="showDesc" class="uk-light" v-html="video.description"></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<a v-if="sponsors && sponsors.segments">Sponsors Segments: {{ sponsors.segments.length }}</a>
|
<a v-if="sponsors && sponsors.segments">Sponsors Segments: {{ sponsors.segments.length }}</a>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
@ -100,6 +105,7 @@
|
||||||
<script>
|
<script>
|
||||||
import Constants from "@/Constants.js";
|
import Constants from "@/Constants.js";
|
||||||
import Player from "@/components/Player.vue";
|
import Player from "@/components/Player.vue";
|
||||||
|
import ErrorHandler from "@/components/ErrorHandler.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "App",
|
name: "App",
|
||||||
|
@ -160,6 +166,7 @@ export default {
|
||||||
this.video = data;
|
this.video = data;
|
||||||
})
|
})
|
||||||
.then(() => {
|
.then(() => {
|
||||||
|
if (!this.video.error) {
|
||||||
document.title = this.video.title + " - Piped";
|
document.title = this.video.title + " - Piped";
|
||||||
|
|
||||||
this.video.description = this.video.description
|
this.video.description = this.video.description
|
||||||
|
@ -168,6 +175,7 @@ export default {
|
||||||
.replaceAll("\n", "<br>");
|
.replaceAll("\n", "<br>");
|
||||||
|
|
||||||
this.$refs.videoPlayer.loadVideo();
|
this.$refs.videoPlayer.loadVideo();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
async getSponsors() {
|
async getSponsors() {
|
||||||
|
@ -197,6 +205,7 @@ export default {
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Player,
|
Player,
|
||||||
|
ErrorHandler,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in a new issue