Piped/src/components/WatchVideo.vue

164 lines
5.1 KiB
Vue
Raw Normal View History

2020-11-11 09:20:57 +00:00
<template>
2020-11-17 05:15:35 +00:00
<div class="uk-container uk-container-xlarge">
<Player
ref="videoPlayer"
:video="video"
:sponsors="sponsors"
:selectedAutoPlay="selectedAutoPlay"
/>
2020-11-22 04:31:14 +00:00
<h1 class="uk-text-bold">{{ video.title }}</h1>
2020-11-17 05:15:35 +00:00
2021-02-24 09:35:41 +00:00
<img :src="video.uploaderAvatar" loading="lazy" />
2020-11-17 05:15:35 +00:00
<router-link class="uk-text-bold" v-bind:to="video.uploaderUrl || '/'">
<a>{{ video.uploader }}</a>
</router-link>
2020-11-17 05:15:35 +00:00
<p class="uk-dark">
<font-awesome-icon icon="thumbs-down"></font-awesome-icon>
2020-11-27 06:46:36 +00:00
<b>{{ video.likes }}</b>
&nbsp;
2020-11-17 05:15:35 +00:00
<font-awesome-icon icon="thumbs-up"></font-awesome-icon>
2020-11-27 06:46:36 +00:00
<b>{{ video.dislikes }}</b>
2020-11-17 05:15:35 +00:00
</p>
<p>
<font-awesome-icon icon="eye"></font-awesome-icon>
2020-11-27 06:46:36 +00:00
<b>{{ video.views }}</b> views
</p>
<p>
Uploaded on <b>{{ video.uploadDate }}</b>
</p>
<a
class="uk-button uk-button-small"
style="background: #222"
@click="showDesc = !showDesc"
>
{{ showDesc ? "+" : "-" }}
</a>
2021-01-20 15:49:21 +00:00
<p v-show="showDesc" class="uk-light" v-html="video.description"></p>
2020-11-17 05:15:35 +00:00
<a v-if="sponsors && sponsors.segments"
>Sponsors Segments: {{ sponsors.segments.length }}</a
>
<hr />
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-11-17 05:15:35 +00:00
<div
class="uk-tile-default uk-text-secondary"
style="background: #0b0e0f; width: 300px"
v-bind:key="related.url"
v-for="related in video.relatedStreams"
>
<router-link class="uk-link-muted" v-bind:to="related.url">
<p class="uk-text-emphasis">{{ related.title }}</p>
2021-02-24 09:35:41 +00:00
<img
style="width: 100%"
v-bind:src="related.thumbnail"
loading="lazy"
/>
2020-11-17 05:15:35 +00:00
</router-link>
<p>
<router-link
class="uk-link-muted"
v-bind:to="related.uploaderUrl || '/'"
>
<p>{{ related.uploaderName }}</p>
</router-link>
<font-awesome-icon icon="eye"></font-awesome-icon>
{{ related.views }} views
</p>
</div>
</div>
2020-11-11 09:20:57 +00:00
</template>
<script>
import Constants from "@/Constants.js";
import Player from "@/components/Player.vue";
2020-11-11 09:20:57 +00:00
export default {
name: "App",
data() {
return {
video: {
2020-11-17 05:15:35 +00:00
title: "Loading..."
2020-11-11 09:20:57 +00:00
},
2020-12-14 13:41:49 +00:00
sponsors: null,
selectedAutoPlay: null,
showDesc: true
2020-11-11 09:20:57 +00:00
};
},
mounted() {
2020-12-14 13:41:49 +00:00
this.selectedAutoPlay = Constants.AUTO_PLAY;
2020-11-11 09:20:57 +00:00
this.getVideoData();
this.getSponsors();
},
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();
}
2020-11-17 05:15:35 +00:00
}
2020-11-11 09:20:57 +00:00
},
methods: {
2021-02-24 09:35:41 +00:00
fetchVideo() {
return this.fetchJson(
Constants.BASE_URL + "/streams/" + this.$route.query.v
);
2020-11-11 09:20:57 +00:00
},
async fetchSponsors() {
2021-02-25 09:54:43 +00:00
return await this.fetchJson(
2021-02-24 09:35:41 +00:00
Constants.BASE_URL +
"/sponsors/" +
this.$route.query.v +
2021-02-25 15:18:59 +00:00
"?category=" +
2021-03-04 14:40:03 +00:00
(localStorage && localStorage.getItem("selectedSkip")
2021-02-25 15:18:59 +00:00
? encodeURIComponent(
2021-02-25 15:45:26 +00:00
'["' +
localStorage
.getItem("selectedSkip")
2021-02-25 19:16:36 +00:00
.replace(",", '","') +
2021-02-25 15:45:26 +00:00
'"]'
2021-02-25 15:18:59 +00:00
)
: encodeURIComponent(
'["sponsor", "interaction", "selfpromo", "music_offtopic"]'
))
2021-02-24 09:35:41 +00:00
);
2020-11-11 09:20:57 +00:00
},
2020-12-10 07:53:30 +00:00
onChange() {
if (localStorage)
localStorage.setItem("autoplay", this.selectedAutoPlay);
},
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(() => {
document.title = this.video.title + " - Piped";
2020-11-17 05:15:35 +00:00
this.video.description = this.video.description
.replaceAll("http://www.youtube.com", "")
2021-01-20 15:49:21 +00:00
.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() {
2021-02-25 14:40:40 +00:00
if (!localStorage || localStorage.getItem("sponsorblock") !== false)
this.fetchSponsors().then(data => (this.sponsors = data));
2020-11-17 05:15:35 +00:00
}
},
components: {
Player
2020-11-17 05:15:35 +00:00
}
2020-11-11 09:20:57 +00:00
};
</script>