2020-11-11 14:50:57 +05:30
|
|
|
<template>
|
2021-08-04 10:43:22 +05:30
|
|
|
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 999" v-if="video && isEmbed">
|
|
|
|
<Player
|
|
|
|
ref="videoPlayer"
|
|
|
|
:video="video"
|
|
|
|
:sponsors="sponsors"
|
|
|
|
:selectedAutoPlay="false"
|
|
|
|
:selectedAutoLoop="selectedAutoLoop"
|
|
|
|
:isEmbed="isEmbed"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="uk-container uk-container-xlarge" v-if="video && !isEmbed">
|
2021-06-07 00:42:03 +05:30
|
|
|
<ErrorHandler v-if="video && video.error" :message="video.message" :error="video.error" />
|
2020-11-17 10:45:35 +05:30
|
|
|
|
2021-06-07 00:17:43 +05:30
|
|
|
<div v-show="!video.error">
|
2021-07-05 00:12:10 +05:30
|
|
|
<Player
|
|
|
|
ref="videoPlayer"
|
|
|
|
:video="video"
|
|
|
|
:sponsors="sponsors"
|
|
|
|
:selectedAutoPlay="selectedAutoPlay"
|
|
|
|
:selectedAutoLoop="selectedAutoLoop"
|
|
|
|
/>
|
2021-07-30 00:56:56 +05:30
|
|
|
<div class="uk-text-bold uk-margin-small-top uk-text-large uk-text-emphasis uk-text-break">
|
|
|
|
{{ video.title }}
|
|
|
|
</div>
|
2021-06-07 00:17:43 +05:30
|
|
|
|
2021-07-18 23:17:39 +05:30
|
|
|
<div class="uk-flex uk-flex-middle">
|
|
|
|
<div class="uk-margin-small-right">{{ addCommas(video.views) }} views</div>
|
|
|
|
<div class="uk-margin-small-right">{{ video.uploadDate }}</div>
|
|
|
|
<div class="uk-flex-1"></div>
|
|
|
|
<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>
|
2021-07-01 01:56:04 +05:30
|
|
|
</div>
|
2021-07-18 23:17:39 +05:30
|
|
|
<div class="uk-margin-small-left">
|
|
|
|
<font-awesome-icon class="uk-margin-small-right" icon="thumbs-down"></font-awesome-icon>
|
|
|
|
<b>{{ addCommas(video.dislikes) }}</b>
|
2021-07-01 01:56:04 +05:30
|
|
|
</div>
|
2021-07-18 23:17:39 +05:30
|
|
|
<a
|
|
|
|
:href="'https://youtu.be/' + getVideoId()"
|
|
|
|
class="uk-margin-small-left uk-button uk-button-small"
|
|
|
|
style="background: #222"
|
|
|
|
>
|
2021-08-25 22:00:21 +05:30
|
|
|
<b>{{ $t("player.watch_on") }} </b>
|
2021-07-18 23:17:39 +05:30
|
|
|
<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"
|
|
|
|
style="background: #222"
|
|
|
|
>
|
2021-08-25 22:00:21 +05:30
|
|
|
<b>{{ $t("player.watch_on") }} LBRY</b>
|
2021-07-18 23:17:39 +05:30
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="uk-flex uk-flex-middle uk-margin-small-top">
|
2021-09-01 17:06:00 +05:30
|
|
|
<img :src="video.uploaderAvatar" loading="lazy" class="uk-border-circle" />
|
2021-07-18 23:17:39 +05:30
|
|
|
<router-link class="uk-text-bold uk-margin-small-left" v-if="video.uploaderUrl" :to="video.uploaderUrl">
|
|
|
|
<a>{{ video.uploader }}</a>
|
|
|
|
</router-link>
|
|
|
|
<div class="uk-flex-1"></div>
|
|
|
|
<button
|
|
|
|
v-if="authenticated"
|
|
|
|
@click="subscribeHandler"
|
|
|
|
class="uk-button uk-button-small"
|
|
|
|
style="background: #222"
|
|
|
|
type="button"
|
|
|
|
>
|
2021-08-25 22:00:21 +05:30
|
|
|
{{ subscribed ? $t("actions.unsubscribe") : $t("actions.subscribe") }}
|
2021-07-18 23:17:39 +05:30
|
|
|
</button>
|
2021-07-01 01:56:04 +05:30
|
|
|
</div>
|
|
|
|
|
|
|
|
<hr />
|
|
|
|
|
2021-06-07 00:17:43 +05:30
|
|
|
<a class="uk-button uk-button-small" style="background: #222" @click="showDesc = !showDesc">
|
2021-07-18 23:17:39 +05:30
|
|
|
{{ showDesc ? "Minimize Description" : "Show Description" }}
|
2021-06-07 00:17:43 +05:30
|
|
|
</a>
|
2021-06-29 01:15:03 +05:30
|
|
|
<p v-show="showDesc" :style="[{ colour: foregroundColor }]" v-html="video.description"></p>
|
2021-07-18 23:17:39 +05:30
|
|
|
<div v-if="showDesc && sponsors && sponsors.segments">
|
|
|
|
Sponsors Segments: {{ sponsors.segments.length }}
|
|
|
|
</div>
|
2021-06-07 00:17:43 +05:30
|
|
|
</div>
|
2020-11-17 10:45:35 +05:30
|
|
|
|
|
|
|
<hr />
|
|
|
|
|
2021-07-05 00:12:10 +05:30
|
|
|
<b>Loop this Video:</b>
|
|
|
|
<input class="uk-checkbox" v-model="selectedAutoLoop" @change="onChange($event)" type="checkbox" />
|
|
|
|
<br />
|
2020-12-10 13:23:30 +05:30
|
|
|
<b>Auto Play next Video:</b>
|
2021-04-07 17:15:40 +05:30
|
|
|
<input class="uk-checkbox" v-model="selectedAutoPlay" @change="onChange($event)" type="checkbox" />
|
2020-12-10 13:23:30 +05:30
|
|
|
|
2021-05-26 01:16:21 +05:30
|
|
|
<hr />
|
|
|
|
|
|
|
|
<div uk-grid>
|
2021-08-26 19:29:05 +05:30
|
|
|
<div class="uk-width-4-5@xl uk-width-3-4@s uk-width-1" v-if="comments" ref="comments">
|
2021-05-26 01:16:21 +05:30
|
|
|
<div
|
|
|
|
class="uk-tile-default uk-align-left uk-width-expand"
|
2021-06-29 01:15:03 +05:30
|
|
|
:style="[{ background: backgroundColor }]"
|
2021-05-26 01:16:21 +05:30
|
|
|
v-bind:key="comment.commentId"
|
|
|
|
v-for="comment in comments.comments"
|
|
|
|
>
|
2021-07-21 15:49:51 +05:30
|
|
|
<Comment :comment="comment" :uploader="video.uploader" />
|
2021-05-26 01:16:21 +05:30
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
2021-08-26 19:29:05 +05:30
|
|
|
<div class="uk-width-1-5@xl uk-width-1-4@s uk-width-1 uk-flex-last@s uk-flex-first" v-if="video">
|
2021-05-26 01:16:21 +05:30
|
|
|
<div
|
|
|
|
class="uk-tile-default uk-width-auto"
|
2021-06-29 01:15:03 +05:30
|
|
|
:style="[{ background: backgroundColor }]"
|
2021-05-26 01:16:21 +05:30
|
|
|
v-bind:key="related.url"
|
|
|
|
v-for="related in video.relatedStreams"
|
|
|
|
>
|
2021-06-25 00:08:04 +05:30
|
|
|
<VideoItem :video="related" height="94" width="168" />
|
2021-05-26 01:16:21 +05:30
|
|
|
</div>
|
|
|
|
</div>
|
2020-11-17 10:45:35 +05:30
|
|
|
</div>
|
2020-11-13 02:12:02 +05:30
|
|
|
</div>
|
2020-11-11 14:50:57 +05:30
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2021-04-01 20:43:35 +05:30
|
|
|
import Player from "@/components/Player.vue";
|
2021-06-25 00:08:04 +05:30
|
|
|
import VideoItem from "@/components/VideoItem.vue";
|
2021-06-07 00:17:43 +05:30
|
|
|
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",
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
video: {
|
2021-04-07 17:15:40 +05:30
|
|
|
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,
|
2021-01-15 15:19:46 +05:30
|
|
|
selectedAutoPlay: null,
|
2021-04-07 17:15:40 +05:30
|
|
|
showDesc: true,
|
2021-05-26 01:16:21 +05:30
|
|
|
comments: null,
|
2021-07-18 23:17:39 +05:30
|
|
|
subscribed: false,
|
|
|
|
channelId: null,
|
2021-07-21 03:18:35 +05:30
|
|
|
active: true,
|
2020-11-11 14:50:57 +05:30
|
|
|
};
|
|
|
|
},
|
|
|
|
mounted() {
|
2021-07-07 19:48:09 +05:30
|
|
|
this.getVideoData().then(() => {
|
2021-08-22 15:57:09 +05:30
|
|
|
(async () => {
|
|
|
|
if (window.db) {
|
|
|
|
var tx = window.db.transaction("watch_history", "readwrite");
|
|
|
|
var store = tx.objectStore("watch_history");
|
|
|
|
var video = {
|
|
|
|
videoId: this.getVideoId(),
|
|
|
|
title: this.video.title,
|
|
|
|
duration: this.video.duration,
|
|
|
|
thumbnail: this.video.thumbnailUrl,
|
|
|
|
uploaderUrl: this.video.uploaderUrl,
|
|
|
|
uploaderName: this.video.uploader,
|
|
|
|
watchedAt: Date.now(),
|
|
|
|
};
|
|
|
|
store.add(video);
|
|
|
|
}
|
|
|
|
})();
|
2021-07-21 03:18:35 +05:30
|
|
|
if (this.active) this.$refs.videoPlayer.loadVideo();
|
2021-07-07 19:48:09 +05:30
|
|
|
});
|
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();
|
2021-07-07 19:48:09 +05:30
|
|
|
},
|
|
|
|
activated() {
|
2021-07-21 03:18:35 +05:30
|
|
|
this.active = true;
|
2021-07-07 19:48:09 +05:30
|
|
|
this.selectedAutoPlay = this.getPreferenceBoolean("autoplay", true);
|
2021-07-30 14:33:16 +05:30
|
|
|
this.showDesc = !this.getPreferenceBoolean("minimizeDescription", false);
|
2021-07-21 16:29:53 +05:30
|
|
|
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);
|
|
|
|
},
|
2021-07-07 19:48:09 +05:30
|
|
|
deactivated() {
|
2021-07-21 03:18:35 +05:30
|
|
|
this.active = false;
|
2021-05-26 13:40:22 +05:30
|
|
|
window.removeEventListener("scroll", this.handleScroll);
|
2020-11-11 14:50:57 +05:30
|
|
|
},
|
|
|
|
methods: {
|
2021-02-24 15:05:41 +05:30
|
|
|
fetchVideo() {
|
2021-07-04 23:56:02 +05:30
|
|
|
return this.fetchJson(this.apiUrl() + "/streams/" + this.getVideoId());
|
2020-11-11 14:50:57 +05:30
|
|
|
},
|
|
|
|
async fetchSponsors() {
|
2021-07-04 23:56:02 +05:30
|
|
|
return await this.fetchJson(this.apiUrl() + "/sponsors/" + this.getVideoId(), {
|
2021-06-15 17:07:35 +05:30
|
|
|
category:
|
2021-07-04 00:54:09 +05:30
|
|
|
'["' +
|
|
|
|
this.getPreferenceString("selectedSkip", "sponsor,interaction,selfpromo,music_offtopic").replaceAll(
|
|
|
|
",",
|
|
|
|
'","',
|
|
|
|
) +
|
|
|
|
'"]',
|
2021-06-15 17:07:35 +05:30
|
|
|
});
|
2020-11-11 14:50:57 +05:30
|
|
|
},
|
2021-05-26 01:16:21 +05:30
|
|
|
fetchComments() {
|
2021-07-04 23:56:02 +05:30
|
|
|
return this.fetchJson(this.apiUrl() + "/comments/" + this.getVideoId());
|
2021-05-26 01:16:21 +05:30
|
|
|
},
|
2020-12-10 13:23:30 +05:30
|
|
|
onChange() {
|
2021-07-04 00:54:09 +05:30
|
|
|
this.setPreference("autoplay", this.selectedAutoPlay);
|
2020-12-10 13:23:30 +05:30
|
|
|
},
|
2020-11-11 14:50:57 +05:30
|
|
|
async getVideoData() {
|
2021-07-07 19:48:09 +05:30
|
|
|
await this.fetchVideo()
|
2021-02-24 15:05:41 +05:30
|
|
|
.then(data => {
|
|
|
|
this.video = data;
|
|
|
|
})
|
2020-11-11 14:50:57 +05:30
|
|
|
.then(() => {
|
2021-06-07 00:17:43 +05:30
|
|
|
if (!this.video.error) {
|
|
|
|
document.title = this.video.title + " - Piped";
|
2021-07-18 23:17:39 +05:30
|
|
|
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
|
|
|
|
2021-06-07 00:42:03 +05:30
|
|
|
this.video.description = this.purifyHTML(
|
|
|
|
this.video.description
|
|
|
|
.replaceAll("http://www.youtube.com", "")
|
|
|
|
.replaceAll("https://www.youtube.com", "")
|
|
|
|
.replaceAll("\n", "<br>"),
|
|
|
|
);
|
2021-06-07 00:17:43 +05:30
|
|
|
}
|
2020-11-11 14:50:57 +05:30
|
|
|
});
|
|
|
|
},
|
|
|
|
async getSponsors() {
|
2021-07-04 00:54:09 +05:30
|
|
|
if (this.getPreferenceBoolean("sponsorblock", true))
|
2021-02-25 20:10:40 +05:30
|
|
|
this.fetchSponsors().then(data => (this.sponsors = data));
|
2021-04-07 17:15:40 +05:30
|
|
|
},
|
2021-05-26 01:16:21 +05:30
|
|
|
async getComments() {
|
|
|
|
this.fetchComments().then(data => (this.comments = data));
|
|
|
|
},
|
2021-07-18 23:17:39 +05:30
|
|
|
async fetchSubscribedStatus() {
|
2021-07-21 02:13:03 +05:30
|
|
|
if (!this.channelId || !this.authenticated) return;
|
2021-07-18 23:17:39 +05:30
|
|
|
|
|
|
|
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;
|
2021-07-04 23:56:02 +05:30
|
|
|
this.fetchJson(this.apiUrl() + "/nextpage/comments/" + this.getVideoId(), {
|
2021-07-30 00:56:56 +05:30
|
|
|
nextpage: this.comments.nextpage,
|
2021-06-15 17:07:35 +05:30
|
|
|
}).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));
|
|
|
|
});
|
|
|
|
}
|
|
|
|
},
|
2021-06-07 23:08:19 +05:30
|
|
|
getVideoId() {
|
|
|
|
return this.$route.query.v || this.$route.params.v;
|
|
|
|
},
|
2021-04-01 20:43:35 +05:30
|
|
|
},
|
2021-08-04 10:43:22 +05:30
|
|
|
computed: {
|
|
|
|
isEmbed(_this) {
|
|
|
|
return String(_this.$route.path).indexOf("/embed/") == 0;
|
|
|
|
},
|
|
|
|
},
|
2021-04-01 20:43:35 +05:30
|
|
|
components: {
|
2021-04-07 17:15:40 +05:30
|
|
|
Player,
|
2021-06-25 00:08:04 +05:30
|
|
|
VideoItem,
|
2021-06-07 00:17:43 +05:30
|
|
|
ErrorHandler,
|
2021-07-21 16:29:53 +05:30
|
|
|
Comment,
|
2021-04-07 17:15:40 +05:30
|
|
|
},
|
2020-11-11 14:50:57 +05:30
|
|
|
};
|
|
|
|
</script>
|