Piped/src/components/WatchVideo.vue

228 lines
8.6 KiB
Vue
Raw Normal View History

2020-11-11 09:20:57 +00:00
<template>
2021-06-30 20:26:04 +00:00
<div class="uk-container uk-container-xlarge" v-if="video">
<ErrorHandler v-if="video && video.error" :message="video.message" :error="video.error" />
2020-11-17 05:15:35 +00:00
<div v-show="!video.error">
2021-07-04 18:42:10 +00:00
<Player
ref="videoPlayer"
:video="video"
:sponsors="sponsors"
:selectedAutoPlay="selectedAutoPlay"
:selectedAutoLoop="selectedAutoLoop"
/>
<h1 class="uk-text-bold">{{ video.title }}</h1>
2021-06-30 20:26:04 +00:00
<div uk-grid>
<div class="uk-width-1-2 uk-text-left">
<img :src="video.uploaderAvatar" loading="lazy" />
<router-link class="uk-text-bold" v-if="video.uploaderUrl" :to="video.uploaderUrl">
<a>{{ video.uploader }}</a>
</router-link>
<div :style="[{ colour: foregroundColor }]">
<font-awesome-icon icon="thumbs-up"></font-awesome-icon>
<b>{{ addCommas(video.likes) }}</b>
&nbsp;
<font-awesome-icon icon="thumbs-down"></font-awesome-icon>
<b>{{ addCommas(video.dislikes) }}</b>
</div>
<div>
<font-awesome-icon icon="eye"></font-awesome-icon>
<b>{{ addCommas(video.views) }}</b> views
</div>
<div>
Uploaded on <b>{{ video.uploadDate }}</b>
</div>
</div>
<div class="uk-width-1-2 uk-text-right">
<a :href="'https://youtu.be/' + getVideoId()"
>Watch on <font-awesome-icon :icon="['fab', 'youtube']"></font-awesome-icon
></a>
</div>
</div>
<hr />
<a class="uk-button uk-button-small" style="background: #222" @click="showDesc = !showDesc">
{{ showDesc ? "+" : "-" }}
</a>
<p v-show="showDesc" :style="[{ colour: foregroundColor }]" v-html="video.description"></p>
</div>
2020-11-17 05:15:35 +00:00
<a v-if="sponsors && sponsors.segments">Sponsors Segments: {{ sponsors.segments.length }}</a>
2020-11-17 05:15:35 +00:00
<hr />
2021-07-04 18:42:10 +00:00
<b>Loop this Video:</b>&nbsp;
<input class="uk-checkbox" v-model="selectedAutoLoop" @change="onChange($event)" type="checkbox" />
<br />
2020-12-10 07:53:30 +00:00
<b>Auto Play next Video:</b>&nbsp;
<input class="uk-checkbox" v-model="selectedAutoPlay" @change="onChange($event)" type="checkbox" />
2020-12-10 07:53:30 +00:00
<hr />
<div uk-grid>
2021-05-26 08:24:20 +00:00
<div class="uk-width-4-5@xl uk-width-3-4@l uk-width-2-3" v-if="comments" ref="comments">
<div
class="uk-tile-default uk-align-left uk-width-expand"
:style="[{ background: backgroundColor }]"
v-bind:key="comment.commentId"
v-for="comment in comments.comments"
>
<div align="left">
<div v-if="comment.pinned">
<font-awesome-icon icon="thumbtack"></font-awesome-icon>&nbsp; Pinned by
{{ video.uploader }}
</div>
<img
:src="comment.thumbnail"
2021-05-27 20:12:36 +00:00
style="width: 10vmin"
height="176"
width="176"
loading="lazy"
alt="avatar"
/>
<br />
<router-link class="uk-link-muted" v-bind:to="comment.commentorUrl">
{{ comment.author }} </router-link
>&thinsp;<font-awesome-icon v-if="comment.verified" icon="check"></font-awesome-icon>
</div>
2021-06-15 11:51:01 +00:00
<p style="white-space: pre-wrap">{{ comment.commentText }}</p>
<div>
2021-05-30 22:06:35 +00:00
<b>{{ numberFormat(comment.likeCount) }}</b>
&nbsp;
<font-awesome-icon icon="thumbs-up"></font-awesome-icon>
&nbsp;
<font-awesome-icon v-if="comment.hearted" icon="heart"></font-awesome-icon>
</div>
<hr />
</div>
</div>
2021-05-26 08:10:22 +00:00
<div class="uk-width-1-5@xl uk-width-1-4@l uk-width-1-3" v-if="video">
<div
class="uk-tile-default uk-width-auto"
:style="[{ background: backgroundColor }]"
v-bind:key="related.url"
v-for="related in video.relatedStreams"
>
2021-06-24 18:38:04 +00:00
<VideoItem :video="related" height="94" width="168" />
</div>
</div>
2020-11-17 05:15:35 +00:00
</div>
</div>
2020-11-11 09:20:57 +00:00
</template>
<script>
import Player from "@/components/Player.vue";
2021-06-24 18:38:04 +00:00
import VideoItem from "@/components/VideoItem.vue";
import ErrorHandler from "@/components/ErrorHandler.vue";
2020-11-11 09:20:57 +00:00
export default {
name: "App",
data() {
return {
video: {
title: "Loading...",
2020-11-11 09:20:57 +00:00
},
2020-12-14 13:41:49 +00:00
sponsors: null,
2021-07-04 18:42:10 +00:00
selectedAutoLoop: false,
selectedAutoPlay: null,
showDesc: true,
comments: null,
2020-11-11 09:20:57 +00:00
};
},
mounted() {
this.selectedAutoPlay = this.getPreferenceBoolean("autoplay", true);
2020-11-11 09:20:57 +00:00
this.getVideoData();
this.getSponsors();
this.getComments();
2021-05-26 08:10:22 +00:00
window.addEventListener("scroll", this.handleScroll);
},
unmounted() {
window.removeEventListener("scroll", this.handleScroll);
2020-11-11 09:20:57 +00:00
},
watch: {
2020-11-17 05:15:35 +00:00
"$route.query.v": function(v) {
2020-11-11 09:20:57 +00:00
if (v) {
this.getVideoData();
this.getSponsors();
this.getComments();
window.scrollTo(0, 0);
2020-11-11 09:20:57 +00:00
}
},
2020-11-11 09:20:57 +00:00
},
methods: {
2021-02-24 09:35:41 +00:00
fetchVideo() {
return this.fetchJson(this.apiUrl() + "/streams/" + this.getVideoId());
2020-11-11 09:20:57 +00:00
},
async fetchSponsors() {
return await this.fetchJson(this.apiUrl() + "/sponsors/" + this.getVideoId(), {
category:
'["' +
this.getPreferenceString("selectedSkip", "sponsor,interaction,selfpromo,music_offtopic").replaceAll(
",",
'","',
) +
'"]',
});
2020-11-11 09:20:57 +00:00
},
fetchComments() {
return this.fetchJson(this.apiUrl() + "/comments/" + this.getVideoId());
},
2020-12-10 07:53:30 +00:00
onChange() {
this.setPreference("autoplay", this.selectedAutoPlay);
2020-12-10 07:53:30 +00:00
},
2020-11-11 09:20:57 +00:00
async getVideoData() {
this.fetchVideo()
2021-02-24 09:35:41 +00:00
.then(data => {
this.video = data;
})
2020-11-11 09:20:57 +00:00
.then(() => {
if (!this.video.error) {
document.title = this.video.title + " - Piped";
2020-11-11 09:20:57 +00:00
this.video.description = this.purifyHTML(
this.video.description
.replaceAll("http://www.youtube.com", "")
.replaceAll("https://www.youtube.com", "")
.replaceAll("\n", "<br>"),
);
2020-11-11 09:20:57 +00:00
this.$refs.videoPlayer.loadVideo();
}
2020-11-11 09:20:57 +00:00
});
},
async getSponsors() {
if (this.getPreferenceBoolean("sponsorblock", true))
2021-02-25 14:40:40 +00:00
this.fetchSponsors().then(data => (this.sponsors = data));
},
async getComments() {
this.fetchComments().then(data => (this.comments = data));
},
2021-05-26 08:10:22 +00:00
handleScroll() {
if (this.loading || !this.comments || !this.comments.nextpage) return;
2021-05-26 08:24:20 +00:00
if (window.innerHeight + window.scrollY >= this.$refs.comments.offsetHeight - window.innerHeight) {
2021-05-26 08:10:22 +00:00
this.loading = true;
this.fetchJson(this.apiUrl() + "/nextpage/comments/" + this.getVideoId(), {
url: this.comments.nextpage,
}).then(json => {
2021-05-26 08:10:22 +00:00
this.comments.nextpage = json.nextpage;
this.loading = false;
json.comments.map(comment => this.comments.comments.push(comment));
});
}
},
getVideoId() {
return this.$route.query.v || this.$route.params.v;
},
},
components: {
Player,
2021-06-24 18:38:04 +00:00
VideoItem,
ErrorHandler,
},
2020-11-11 09:20:57 +00:00
};
</script>