Piped/src/components/WatchVideo.vue

477 lines
20 KiB
Vue
Raw Normal View History

2020-11-11 09:20:57 +00:00
<template>
<div v-if="video && isEmbed" class="absolute top-0 left-0 h-full w-full bg-black z-50">
<VideoPlayer
2021-08-04 05:13:22 +00:00
ref="videoPlayer"
:video="video"
:sponsors="sponsors"
2022-04-08 21:29:50 +00:00
:playlist="playlist"
:index="index"
:selected-auto-play="false"
:selected-auto-loop="selectedAutoLoop"
:is-embed="isEmbed"
2021-08-04 05:13:22 +00:00
/>
</div>
2021-12-27 14:46:26 +00:00
<div v-if="video && !isEmbed" class="w-full">
<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">
<div :class="isMobile ? 'flex-col' : 'flex'">
<VideoPlayer
ref="videoPlayer"
:video="video"
:sponsors="sponsors"
:playlist="playlist"
:index="index"
:selected-auto-play="selectedAutoPlay"
:selected-auto-loop="selectedAutoLoop"
@timeupdate="onTimeUpdate"
/>
<ChaptersBar
:mobileLayout="isMobile"
v-if="video?.chapters?.length > 0"
:chapters="video.chapters"
:player-position="currentTime"
@seek="navigate"
/>
</div>
<!-- video title -->
2021-12-27 16:29:25 +00:00
<div class="font-bold mt-2 text-2xl break-words" v-text="video.title" />
<div class="flex flex-wrap mt-3 mb-3">
<!-- views / date -->
<div class="flex flex-auto children:ml-2">
<span v-t="{ path: 'video.views', args: { views: addCommas(video.views) } }" />
<span> | </span>
<span v-text="uploadDate" />
</div>
<!-- Likes/dilikes -->
<div class="flex children:mr-2">
<template v-if="video.likes >= 0">
<div>
2021-12-27 22:33:55 +00:00
<font-awesome-icon icon="thumbs-up" />
2021-12-27 16:29:25 +00:00
<strong class="ml-2" v-text="addCommas(video.likes)" />
</div>
<div>
2021-12-27 22:33:55 +00:00
<font-awesome-icon icon="thumbs-down" />
2021-12-27 16:29:25 +00:00
<strong class="ml-2" v-text="video.dislikes >= 0 ? addCommas(video.dislikes) : '?'" />
</div>
</template>
<template v-if="video.likes < 0">
<div>
<strong v-t="'video.ratings_disabled'" />
</div>
</template>
</div>
</div>
<!-- Channel info & options flex container -->
<div class="flex">
2022-07-02 04:45:07 +00:00
<!-- Channel Image & Info -->
<div class="flex items-center">
<img :src="video.uploaderAvatar" alt="" loading="lazy" class="rounded-full" />
2022-05-19 21:17:58 +00:00
<router-link v-if="video.uploaderUrl" class="link ml-1.5" :to="video.uploaderUrl">{{
video.uploader
}}</router-link>
2022-07-02 04:45:07 +00:00
<!-- Verified Badge -->
2021-12-27 22:33:55 +00:00
<font-awesome-icon class="ml-1" v-if="video.uploaderVerified" icon="check" />
</div>
<div class="relative ml-auto children:mx-2">
<button class="btn" v-if="authenticated" @click="showModal = !showModal">
{{ $t("actions.add_to_playlist") }}<font-awesome-icon class="ml-1" icon="circle-plus" />
</button>
<button
class="btn"
v-if="authenticated"
@click="subscribeHandler"
v-t="{
path: `actions.${subscribed ? 'unsubscribe' : 'subscribe'}`,
args: { count: numberFormat(video.uploaderSubscriberCount) },
}"
/>
</div>
<PlaylistAddModal v-if="showModal" :video-id="getVideoId()" @close="showModal = !showModal" />
<div class="flex <lg:basis-7/12">
<div class="self-center children:mr-1">
<!-- RSS Feed button -->
<a
aria-label="RSS feed"
title="RSS feed"
role="button"
v-if="video.uploaderUrl"
:href="`https://www.youtube.com/feeds/videos.xml?channel_id=${
video.uploaderUrl.split('/')[2]
}`"
target="_blank"
class="btn flex-col"
>
<font-awesome-icon icon="rss" />
</a>
<!-- watch on youtube button -->
<a :href="`https://youtu.be/${getVideoId()}`" class="btn <lg:hidden">
<i18n-t keypath="player.watch_on" tag="strong">
<font-awesome-icon class="mx-1.5" :icon="['fab', 'youtube']" />
</i18n-t>
</a>
<!-- only visible on small screens -->
<a :href="`https://youtu.be/${getVideoId()}`" class="btn sm:hidden">
<font-awesome-icon class="mx-1.5" :icon="['fab', 'youtube']" />
</a>
<!-- LBRY -->
<a v-if="video.lbryId" :href="'https://odysee.com/' + video.lbryId" class="btn">
<i18n-t keypath="player.watch_on" tag="strong">LBRY</i18n-t>
</a>
<!-- listen / watch toggle -->
<router-link
:to="toggleListenUrl"
:aria-label="(isListening ? 'Watch ' : 'Listen to ') + video.title"
:title="(isListening ? 'Watch ' : 'Listen to ') + video.title"
class="btn flex-col"
>
<font-awesome-icon :icon="isListening ? 'tv' : 'headphones'" />
</router-link>
</div>
</div>
2021-06-30 20:26:04 +00:00
</div>
<hr />
2021-12-27 16:29:25 +00:00
<button
class="btn mb-2"
@click="showDesc = !showDesc"
v-t="`actions.${showDesc ? 'minimize_description' : 'show_description'}`"
2021-12-27 16:29:25 +00:00
/>
<!-- eslint-disable-next-line vue/no-v-html -->
<div v-show="showDesc" class="break-words" v-html="purifyHTML(video.description)" />
2021-12-27 16:29:25 +00:00
<div
v-if="showDesc && sponsors && sponsors.segments"
v-text="`${$t('video.sponsor_segments')}: ${sponsors.segments.length}`"
/>
</div>
2020-11-17 05:15:35 +00:00
<hr />
2021-12-27 16:29:25 +00:00
<label for="chkAutoLoop"><strong v-text="`${$t('actions.loop_this_video')}:`" /></label>
<input id="chkAutoLoop" v-model="selectedAutoLoop" class="ml-1.5" type="checkbox" @change="onChange($event)" />
2021-07-04 18:42:10 +00:00
<br />
2021-12-27 16:29:25 +00:00
<label for="chkAutoPlay"><strong v-text="`${$t('actions.auto_play_next_video')}:`" /></label>
<input id="chkAutoPlay" v-model="selectedAutoPlay" class="ml-1.5" type="checkbox" @change="onChange($event)" />
2020-12-10 07:53:30 +00:00
<hr />
2021-12-27 14:46:26 +00:00
<div class="grid xl:grid-cols-5 sm:grid-cols-4 grid-cols-1">
<div v-if="!comments" class="xl:col-span-4 sm:col-span-3">
<p class="text-center mt-8">Comments are loading...</p>
</div>
<div v-else-if="comments.disabled" class="xl:col-span-4 sm:col-span-3">
<p class="text-center mt-8">Comments are turned off.</p>
</div>
<div v-else ref="comments" class="xl:col-span-4 sm:col-span-3">
<CommentItem
v-for="comment in comments.comments"
:key="comment.commentId"
:comment="comment"
:uploader="video.uploader"
:video-id="getVideoId()"
/>
</div>
<div v-if="video" class="order-first sm:order-last">
2022-04-08 21:29:50 +00:00
<PlaylistVideos
v-if="playlist"
:playlist-id="playlistId"
:playlist="playlist"
:selected-index="index"
/>
2021-12-27 16:29:25 +00:00
<a
class="btn mb-2 sm:hidden"
@click="showRecs = !showRecs"
v-t="`actions.${showRecs ? 'minimize_recommendations' : 'show_recommendations'}`"
2021-12-27 16:29:25 +00:00
/>
2022-01-12 22:17:22 +00:00
<hr v-show="showRecs" />
<div v-show="showRecs || !smallView">
<VideoItem
v-for="related in video.relatedStreams"
:key="related.url"
:video="related"
height="94"
width="168"
/>
</div>
2021-12-27 14:46:26 +00:00
<hr class="sm:hidden" />
</div>
2020-11-17 05:15:35 +00:00
</div>
</div>
2020-11-11 09:20:57 +00:00
</template>
<script>
2022-04-08 15:46:49 +00:00
import VideoPlayer from "./VideoPlayer.vue";
import VideoItem from "./VideoItem.vue";
import ErrorHandler from "./ErrorHandler.vue";
import CommentItem from "./CommentItem.vue";
2022-05-19 21:17:58 +00:00
import ChaptersBar from "./ChaptersBar.vue";
import PlaylistAddModal from "./PlaylistAddModal.vue";
2022-04-08 21:29:50 +00:00
import PlaylistVideos from "./PlaylistVideos.vue";
2020-11-11 09:20:57 +00:00
export default {
name: "App",
components: {
VideoPlayer,
VideoItem,
ErrorHandler,
CommentItem,
2022-05-19 21:17:58 +00:00
ChaptersBar,
PlaylistAddModal,
2022-04-08 21:29:50 +00:00
PlaylistVideos,
},
2020-11-11 09:20:57 +00:00
data() {
const smallViewQuery = window.matchMedia("(max-width: 640px)");
2020-11-11 09:20:57 +00:00
return {
video: {
title: "Loading...",
2020-11-11 09:20:57 +00:00
},
2022-04-08 21:29:50 +00:00
playlistId: null,
playlist: null,
index: null,
2020-12-14 13:41:49 +00:00
sponsors: null,
2021-07-04 18:42:10 +00:00
selectedAutoLoop: false,
selectedAutoPlay: null,
showDesc: true,
showRecs: true,
comments: null,
subscribed: false,
channelId: null,
active: true,
smallViewQuery: smallViewQuery,
smallView: smallViewQuery.matches,
showModal: false,
isMobile: true,
currentTime: 0,
2020-11-11 09:20:57 +00:00
};
},
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.pathname + url.search;
},
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 09:20:57 +00:00
mounted() {
// check screen size
if (window.innerWidth >= 1024) {
this.isMobile = false;
}
// add an event listener to watch for screen size changes
window.addEventListener("resize", () => {
if (window.innerWidth >= 1024) {
this.isMobile = false;
} else {
this.isMobile = true;
}
});
this.getVideoData().then(() => {
(async () => {
const videoId = this.getVideoId();
const instance = this;
2021-10-31 18:36:47 +00:00
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);
2022-01-01 14:53:55 +00:00
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();
});
2022-04-08 21:29:50 +00:00
this.playlistId = this.$route.query.list;
this.index = Number(this.$route.query.index);
this.getPlaylistData();
2020-11-11 09:20:57 +00:00
this.getSponsors();
2021-08-04 05:13:22 +00:00
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 08:10:22 +00:00
window.addEventListener("scroll", this.handleScroll);
},
deactivated() {
this.active = false;
2021-05-26 08:10:22 +00:00
window.removeEventListener("scroll", this.handleScroll);
2020-11-11 09:20:57 +00:00
},
2021-09-05 21:01:26 +00:00
unmounted() {
window.removeEventListener("scroll", this.handleScroll);
},
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() {
await this.fetchVideo()
2021-02-24 09:35:41 +00:00
.then(data => {
this.video = data;
this.video.id = this.getVideoId();
2021-02-24 09:35:41 +00:00
})
2020-11-11 09:20:57 +00:00
.then(() => {
if (!this.video.error) {
document.title = this.video.title + " - Piped";
this.channelId = this.video.uploaderUrl.split("/")[2];
2021-08-04 05:13:22 +00:00
if (!this.isEmbed) this.fetchSubscribedStatus();
2020-11-11 09:20:57 +00:00
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(this.video.description, "text/html");
xmlDoc.querySelectorAll("a").forEach(elem => (elem.outerHTML = elem.getAttribute("href")));
xmlDoc.querySelectorAll("br").forEach(elem => (elem.outerHTML = "\n"));
this.video.description = this.urlify(xmlDoc.querySelector("body").innerHTML)
.replaceAll(/(?:http(?:s)?:\/\/)?(?:www\.)?youtube\.com(\/[/a-zA-Z0-9_?=&-]*)/gm, "$1")
2022-01-31 04:05:43 +00:00
.replaceAll(
/(?:http(?:s)?:\/\/)?(?:www\.)?youtu\.be\/(?:watch\?v=)?([/a-zA-Z0-9_?=&-]*)/gm,
2022-01-31 04:05:43 +00:00
"/watch?v=$1",
)
.replaceAll("\n", "<br>");
}
2020-11-11 09:20:57 +00:00
});
},
2022-04-08 21:29:50 +00:00
async getPlaylistData() {
if (this.playlistId) {
await this.fetchJson(this.apiUrl() + "/playlists/" + this.playlistId).then(data => {
this.playlist = data;
});
await this.fetchPlaylistPages().then(() => {
if (!(this.index >= 0)) {
for (let i = 0; i < this.playlist.relatedStreams.length; i++)
if (this.playlist.relatedStreams[i].url.substr(-11) == this.getVideoId()) {
this.index = i + 1;
this.$router.replace({
query: { ...this.$route.query, index: this.index },
});
break;
}
}
});
}
},
async fetchPlaylistPages() {
if (this.playlist.nextpage) {
await this.fetchJson(this.apiUrl() + "/nextpage/playlists/" + this.playlistId, {
nextpage: this.playlist.nextpage,
}).then(json => {
this.playlist.relatedStreams = this.playlist.relatedStreams.concat(json.relatedStreams);
this.playlist.nextpage = json.nextpage;
});
await this.fetchPlaylistPages();
}
},
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));
},
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 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(), {
nextpage: 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;
},
navigate(time) {
this.$refs.videoPlayer.seek(time);
},
onTimeUpdate(time) {
this.currentTime = time;
},
},
2020-11-11 09:20:57 +00:00
};
</script>