1
0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-12-17 07:40:27 +05:30
Piped/src/components/WatchVideo.vue

350 lines
14 KiB
Vue
Raw Normal View History

2020-11-11 14:50:57 +05:30
<template>
<div v-if="video && isEmbed" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 999">
2021-08-04 10:43:22 +05:30
<Player
ref="videoPlayer"
:video="video"
:sponsors="sponsors"
:selected-auto-play="false"
:selected-auto-loop="selectedAutoLoop"
:is-embed="isEmbed"
2021-08-04 10:43:22 +05:30
/>
</div>
2021-12-27 20:16:26 +05:30
<div v-if="video && !isEmbed" class="w-full">
<ErrorHandler v-if="video && video.error" :message="video.message" :error="video.error" />
2020-11-17 10:45:35 +05:30
<div v-show="!video.error">
2021-07-05 00:12:10 +05:30
<Player
ref="videoPlayer"
:video="video"
:sponsors="sponsors"
:selected-auto-play="selectedAutoPlay"
:selected-auto-loop="selectedAutoLoop"
2021-07-05 00:12:10 +05:30
/>
2021-12-27 20:16:26 +05:30
<div class="font-bold uk-margin-small-top text-lg break-words">
{{ video.title }}
</div>
<div class="uk-flex uk-flex-middle">
<div class="uk-margin-small-right">{{ addCommas(video.views) }} views</div>
2021-10-08 22:22:55 +05:30
<div class="uk-margin-small-right">{{ uploadDate }}</div>
<div class="uk-flex-1"></div>
<template v-if="video.likes >= 0">
<div class="uk-margin-small-left">
<font-awesome-icon class="uk-margin-small-right" icon="thumbs-up"></font-awesome-icon>
<b>{{ addCommas(video.likes) }}</b>
</div>
<div class="uk-margin-small-left">
<font-awesome-icon class="uk-margin-small-right" icon="thumbs-down"></font-awesome-icon>
<b>{{ video.dislikes >= 0 ? addCommas(video.dislikes) : "?" }}</b>
</div>
</template>
<template v-if="video.likes < 0">
<div class="uk-margin-small-left">
<b v-t="'video.ratings_disabled'" />
</div>
</template>
2021-11-01 00:06:47 +05:30
<a :href="'https://youtu.be/' + getVideoId()" class="uk-margin-small-left uk-button uk-button-small">
<b>{{ $t("player.watch_on") }}&nbsp;</b>
<font-awesome-icon class="uk-margin-small-right" :icon="['fab', 'youtube']"></font-awesome-icon>
2021-08-08 16:48:35 +05:30
</a>
<a
v-if="video.lbryId"
:href="'https://odysee.com/' + video.lbryId"
class="uk-margin-small-left uk-button uk-button-small"
>
<b>{{ $t("player.watch_on") }} LBRY</b>
</a>
<router-link
:to="toggleListenUrl"
:aria-label="(isListening ? 'Watch ' : 'Listen to ') + video.title"
:title="(isListening ? 'Watch ' : 'Listen to ') + video.title"
class="uk-margin-small-left uk-button uk-button-small"
>
<font-awesome-icon :icon="isListening ? 'tv' : 'headphones'"></font-awesome-icon>
</router-link>
</div>
<div class="uk-flex uk-flex-middle uk-margin-small-top">
2021-12-27 20:16:26 +05:30
<img :src="video.uploaderAvatar" alt="" loading="lazy" class="rounded-full" />
<router-link v-if="video.uploaderUrl" class="uk-link uk-margin-small-left" :to="video.uploaderUrl">
{{ video.uploader }} </router-link
>&thinsp;<font-awesome-icon v-if="video.uploaderVerified" icon="check"></font-awesome-icon>
<div class="uk-flex-1"></div>
2021-12-27 20:16:26 +05:30
<button v-if="authenticated" class="uk-button uk-button-small" @click="subscribeHandler">
{{ subscribed ? $t("actions.unsubscribe") : $t("actions.subscribe") }}
</button>
2021-07-01 01:56:04 +05:30
</div>
<hr />
2021-11-01 00:06:47 +05:30
<a class="uk-button uk-button-small" @click="showDesc = !showDesc">
{{ showDesc ? $t("actions.minimize_description") : $t("actions.show_description") }}
</a>
<!-- eslint-disable-next-line vue/no-v-html -->
<p v-show="showDesc" :style="[{ colour: foregroundColor }]" v-html="purifyHTML(video.description)"></p>
<div v-if="showDesc && sponsors && sponsors.segments">
{{ $t("video.sponsor_segments") }}: {{ sponsors.segments.length }}
</div>
</div>
2020-11-17 10:45:35 +05:30
<hr />
<label for="chkAutoLoop"
><b>{{ $t("actions.loop_this_video") }}:</b></label
>&nbsp;
<input
id="chkAutoLoop"
v-model="selectedAutoLoop"
class="uk-checkbox"
type="checkbox"
@change="onChange($event)"
/>
2021-07-05 00:12:10 +05:30
<br />
<label for="chkAutoPlay"
><b>{{ $t("actions.auto_play_next_video") }}:</b></label
>&nbsp;
<input
id="chkAutoPlay"
v-model="selectedAutoPlay"
class="uk-checkbox"
type="checkbox"
@change="onChange($event)"
/>
2020-12-10 13:23:30 +05:30
<hr />
2021-12-27 20:16:26 +05:30
<div class="grid xl:grid-cols-5 sm:grid-cols-4 grid-cols-1">
<div v-if="comments" ref="comments" class="xl:col-span-4 sm:col-span-3">
<div
v-for="comment in comments.comments"
:key="comment.commentId"
class="uk-tile-default uk-align-left uk-width-expand"
:style="[{ background: backgroundColor }]"
>
2021-11-02 01:53:04 +05:30
<Comment :comment="comment" :uploader="video.uploader" :video-id="getVideoId()" />
</div>
</div>
<div v-if="video" class="uk-width-1-5@xl uk-width-1-4@s uk-width-1 uk-flex-last@s uk-flex-first">
2021-12-27 20:16:26 +05:30
<a class="uk-button uk-button-small uk-margin-small-bottom sm:hidden" @click="showRecs = !showRecs">
{{ showRecs ? $t("actions.minimize_recommendations") : $t("actions.show_recommendations") }}
</a>
<div
v-for="related in video.relatedStreams"
v-show="showRecs || !smallView"
:key="related.url"
2021-12-27 20:16:29 +05:30
class="uk-tile-default w-auto"
:style="[{ background: backgroundColor }]"
>
2021-06-25 00:08:04 +05:30
<VideoItem :video="related" height="94" width="168" />
</div>
2021-12-27 20:16:26 +05:30
<hr class="sm:hidden" />
</div>
2020-11-17 10:45:35 +05:30
</div>
</div>
2020-11-11 14:50:57 +05:30
</template>
<script>
import Player from "@/components/Player.vue";
2021-06-25 00:08:04 +05:30
import VideoItem from "@/components/VideoItem.vue";
import ErrorHandler from "@/components/ErrorHandler.vue";
2021-07-21 15:49:51 +05:30
import Comment from "@/components/Comment.vue";
2020-11-11 14:50:57 +05:30
export default {
name: "App",
components: {
Player,
VideoItem,
ErrorHandler,
Comment,
},
2020-11-11 14:50:57 +05:30
data() {
const smallViewQuery = window.matchMedia("(max-width: 640px)");
2020-11-11 14:50:57 +05:30
return {
video: {
title: "Loading...",
2020-11-11 14:50:57 +05:30
},
2020-12-14 19:11:49 +05:30
sponsors: null,
2021-07-05 00:12:10 +05:30
selectedAutoLoop: false,
selectedAutoPlay: null,
showDesc: true,
showRecs: true,
comments: null,
subscribed: false,
channelId: null,
active: true,
smallViewQuery: smallViewQuery,
smallView: smallViewQuery.matches,
2020-11-11 14:50:57 +05:30
};
},
computed: {
isListening(_this) {
return _this.getPreferenceBoolean("listen", false);
},
toggleListenUrl(_this) {
const url = new URL(window.location.href);
url.searchParams.set("listen", _this.isListening ? "0" : "1");
return url.href;
},
isEmbed(_this) {
return String(_this.$route.path).indexOf("/embed/") == 0;
},
uploadDate(_this) {
return new Date(_this.video.uploadDate).toLocaleString(undefined, {
month: "short",
day: "numeric",
year: "numeric",
});
},
},
2020-11-11 14:50:57 +05:30
mounted() {
this.getVideoData().then(() => {
(async () => {
const videoId = this.getVideoId();
const instance = this;
2021-11-01 00:06:47 +05:30
if (window.db && !this.video.error) {
var tx = window.db.transaction("watch_history", "readwrite");
var store = tx.objectStore("watch_history");
var request = store.get(videoId);
request.onsuccess = function(event) {
var video = event.target.result;
if (video) {
video.watchedAt = Date.now();
} else {
video = {
videoId: videoId,
title: instance.video.title,
duration: instance.video.duration,
thumbnail: instance.video.thumbnailUrl,
uploaderUrl: instance.video.uploaderUrl,
uploaderName: instance.video.uploader,
watchedAt: Date.now(),
};
}
store.put(video);
};
}
})();
if (this.active) this.$refs.videoPlayer.loadVideo();
});
2020-11-11 14:50:57 +05:30
this.getSponsors();
2021-08-04 10:43:22 +05:30
if (!this.isEmbed && this.getPreferenceBoolean("comments", true)) this.getComments();
window.addEventListener("resize", () => {
this.smallView = this.smallViewQuery.matches;
});
},
activated() {
this.active = true;
this.selectedAutoPlay = this.getPreferenceBoolean("autoplay", false);
this.showDesc = !this.getPreferenceBoolean("minimizeDescription", false);
if (this.video.duration) {
document.title = this.video.title + " - Piped";
this.$refs.videoPlayer.loadVideo();
}
2021-05-26 13:40:22 +05:30
window.addEventListener("scroll", this.handleScroll);
},
deactivated() {
this.active = false;
2021-05-26 13:40:22 +05:30
window.removeEventListener("scroll", this.handleScroll);
2020-11-11 14:50:57 +05:30
},
2021-09-06 02:31:26 +05:30
unmounted() {
window.removeEventListener("scroll", this.handleScroll);
},
2020-11-11 14:50:57 +05:30
methods: {
2021-02-24 15:05:41 +05:30
fetchVideo() {
return this.fetchJson(this.apiUrl() + "/streams/" + this.getVideoId());
2020-11-11 14:50:57 +05:30
},
async fetchSponsors() {
return await this.fetchJson(this.apiUrl() + "/sponsors/" + this.getVideoId(), {
category:
'["' +
this.getPreferenceString("selectedSkip", "sponsor,interaction,selfpromo,music_offtopic").replaceAll(
",",
'","',
) +
'"]',
});
2020-11-11 14:50:57 +05:30
},
fetchComments() {
return this.fetchJson(this.apiUrl() + "/comments/" + this.getVideoId());
},
2020-12-10 13:23:30 +05:30
onChange() {
this.setPreference("autoplay", this.selectedAutoPlay);
2020-12-10 13:23:30 +05:30
},
2020-11-11 14:50:57 +05:30
async getVideoData() {
await this.fetchVideo()
2021-02-24 15:05:41 +05:30
.then(data => {
this.video = data;
this.video.id = this.getVideoId();
2021-02-24 15:05:41 +05:30
})
2020-11-11 14:50:57 +05:30
.then(() => {
if (!this.video.error) {
document.title = this.video.title + " - Piped";
this.channelId = this.video.uploaderUrl.split("/")[2];
2021-08-04 10:43:22 +05:30
if (!this.isEmbed) this.fetchSubscribedStatus();
2020-11-11 14:50:57 +05:30
this.video.description = this.video.description
.replaceAll("http://www.youtube.com", "")
.replaceAll("https://www.youtube.com", "")
.replaceAll("\n", "<br>");
}
2020-11-11 14:50:57 +05:30
});
},
async getSponsors() {
if (this.getPreferenceBoolean("sponsorblock", true))
2021-02-25 20:10:40 +05:30
this.fetchSponsors().then(data => (this.sponsors = data));
},
async getComments() {
this.fetchComments().then(data => (this.comments = data));
},
async fetchSubscribedStatus() {
if (!this.channelId || !this.authenticated) return;
this.fetchJson(
this.apiUrl() + "/subscribed",
{
channelId: this.channelId,
},
{
headers: {
Authorization: this.getAuthToken(),
},
},
).then(json => {
this.subscribed = json.subscribed;
});
},
subscribeHandler() {
this.fetchJson(this.apiUrl() + (this.subscribed ? "/unsubscribe" : "/subscribe"), null, {
method: "POST",
body: JSON.stringify({
channelId: this.channelId,
}),
headers: {
Authorization: this.getAuthToken(),
"Content-Type": "application/json",
},
});
this.subscribed = !this.subscribed;
},
2021-05-26 13:40:22 +05:30
handleScroll() {
if (this.loading || !this.comments || !this.comments.nextpage) return;
2021-05-26 13:54:20 +05:30
if (window.innerHeight + window.scrollY >= this.$refs.comments.offsetHeight - window.innerHeight) {
2021-05-26 13:40:22 +05:30
this.loading = true;
this.fetchJson(this.apiUrl() + "/nextpage/comments/" + this.getVideoId(), {
nextpage: this.comments.nextpage,
}).then(json => {
2021-05-26 13:40:22 +05:30
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;
},
},
2020-11-11 14:50:57 +05:30
};
</script>