Piped/src/components/WatchVideo.vue

352 lines
15 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">
<video
controls
ref="player"
class="video-js preview-player-dimensions"
></video>
2020-11-22 04:31:14 +00:00
<h1 class="uk-text-bold">{{ video.title }}</h1>
2020-11-17 05:15:35 +00:00
<img :src="video.uploaderAvatar" />
<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>
<img style="width: 100%" v-bind:src="related.thumbnail" />
</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>
2021-01-01 20:05:44 +00:00
import("video.js/dist/video-js.css");
import("@silvermine/videojs-quality-selector/dist/css/quality-selector.css");
2020-11-11 09:20:57 +00:00
import videojs from "video.js";
2021-01-01 20:05:44 +00:00
import("videojs-hotkeys");
2020-11-11 09:20:57 +00:00
import Constants from "@/Constants.js";
2021-01-01 20:05:44 +00:00
import("@silvermine/videojs-quality-selector").then(module => {
module.default(videojs);
});
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
},
player: null,
2020-11-15 20:02:11 +00:00
audioplayer: null,
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();
},
beforeUnmount() {
if (this.player) {
this.player.dispose();
}
2020-11-15 20:02:11 +00:00
if (this.audioplayer) {
2020-11-17 05:15:35 +00:00
this.audioplayer.pause();
2020-11-15 20:02:11 +00:00
}
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) {
2020-11-17 05:15:35 +00:00
if (this.audioplayer) this.audioplayer.pause();
2020-11-11 09:20:57 +00:00
this.getVideoData();
this.getSponsors();
}
2020-11-17 05:15:35 +00:00
}
2020-11-11 09:20:57 +00:00
},
methods: {
async fetchVideo() {
return await (
2020-11-17 05:15:35 +00:00
await fetch(
Constants.BASE_URL + "/streams/" + this.$route.query.v
)
2020-11-11 09:20:57 +00:00
).json();
},
async fetchSponsors() {
return await (
2020-11-17 05:15:35 +00:00
await fetch(
Constants.BASE_URL +
"/sponsors/" +
this.$route.query.v +
'?category=["sponsor","interaction","selfpromo","music_offtopic"]'
)
2020-11-11 09:20:57 +00:00
).json();
},
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()
2020-11-17 05:15:35 +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
const options = {
autoplay: false,
controlBar: {
children: [
"playToggle",
"currentTimeDisplay",
"progressControl",
"volumePanel",
"qualitySelector",
"captionsButton",
2020-11-17 05:15:35 +00:00
"fullscreenToggle"
]
2020-11-11 09:20:57 +00:00
},
responsive: false,
2020-11-17 05:15:35 +00:00
aspectRatio: "16:9"
2020-11-11 09:20:57 +00:00
};
2020-11-17 05:15:35 +00:00
const noPrevPlayer = !this.player;
2020-11-11 09:20:57 +00:00
2021-01-07 05:34:21 +00:00
if (noPrevPlayer) {
2020-11-17 05:15:35 +00:00
this.player = videojs(this.$refs.player, options);
2021-01-07 05:34:21 +00:00
if (localStorage)
this.player.volume(
localStorage.getItem("volume") || 1
);
}
2020-11-11 09:20:57 +00:00
2021-01-07 08:28:31 +00:00
if (this.$route.query.t)
this.player.currentTime(this.$route.query.t);
2020-11-11 09:20:57 +00:00
this.player.hotkeys({
volumeStep: 0.1,
seekStep: 5,
enableModifiersForNumbers: false,
2020-11-17 05:15:35 +00:00
enableHoverScroll: true
2020-11-11 09:20:57 +00:00
});
this.player.poster(this.video.thumbnailUrl);
var src = [];
2020-11-22 04:31:14 +00:00
// src.push({
// src:
// "data:application/dash+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPE1QRCB0eXBlPSJzdGF0aWMiIHhtbG5zPSJ1cm46bXBlZzpkYXNoOnNjaGVtYTptcGQ6MjAxMSIgbWluQnVmZmVyVGltZT0iUFQxLjVTIiBtZWRpYVByZXNlbnRhdGlvbkR1cmF0aW9uPSJQVDIyMC43NjIyMDgzMzMzMzMzMlMiIHByb2ZpbGVzPSJ1cm46bXBlZzpkYXNoOnByb2ZpbGU6aXNvZmYtbWFpbjoyMDExIj4KICA8UGVyaW9kIHN0YXJ0PSJQVDBTIj4KICAgIDxBZGFwdGF0aW9uU2V0PgogICAgICA8UmVwcmVzZW50YXRpb24gaWQ9InZpZGVvMDEiIG1pbWVUeXBlPSJ2aWRlby9tcDQiIGNvZGVjcz0iYXZjMS42NDAwMjgiIGJhbmR3aWR0aD0iMjgxNjM0Ij4KICAgICAgICAgIDxCYXNlVVJMPmh0dHBzOi8vcGlwZWRwcm94eS5rYXZpbi5yb2Nrcy92aWRlb3BsYXliYWNrP2V4cGlyZT0xNjA1NjkxNTMzJmVpPUxaUzBYLVA5RG9TLWh3YU95Sl9vRHcmaXA9MjA5LjE0MS40Ni4zOCZpZD0wN2FmZTI0MmY2ODg4ZDdjJml0YWc9MjQ4JmFpdGFncz0xMzMlMkMxMzQlMkMxMzUlMkMxMzYlMkMxMzclMkMxNjAlMkMyNDIlMkMyNDMlMkMyNDQlMkMyNDclMkMyNDglMkMyNzgmc291cmNlPXlvdXR1YmUmcmVxdWlyZXNzbD15ZXMmbWg9U0EmbW09MzElMkMyOSZtbj1zbi1uNHY3c243cyUyQ3NuLW40djdrbmxrJm1zPWF1JTJDcmR1Jm12PW0mbXZpPTUmcGw9MjMmZ2NyPXVzJmluaXRjd25kYnBzPTExMTI1MCZ2cHJ2PTEmbWltZT12aWRlbyUyRndlYm0mbnM9dllDakpkUFdQTWVjeHhrS3NlXzF4QUFGJmdpcj15ZXMmY2xlbj01MDE0MDM4NyZkdXI9MjIwLjc2MiZsbXQ9MTYwNTY0ODY5MjQyNjI0NSZtdD0xNjA1NjY5ODg1JmZ2aXA9NSZrZWVwYWxpdmU9eWVzJmM9V0VCJnR4cD01NDMyNDM0Jm49blYweDdYZXlodTV4R2ZIJnNwYXJhbXM9ZXhwaXJlJTJDZWklMkNpcCUyQ2lkJTJDYWl0YWdzJTJDc291cmNlJTJDcmVxdWlyZXNzbCUyQ2djciUyQ3ZwcnYlMkNtaW1lJTJDbnMlMkNnaXIlMkNjbGVuJTJDZHVyJTJDbG10JmxzcGFyYW1zPW1oJTJDbW0lMkNtbiUyQ21zJTJDbXYlMkNtdmklMkNwbCUyQ2luaXRjd25kYnBzJmxzaWc9QUczQ194QXdSQUlnUGh1ZklrTzBfZFBSdnFNRFhvRVZsYV9Dbzk1ZkpOYXdwbEM4QWE4eDJCd0NJRVhlOHdnTFJKeUFvZ2xNZmVPak1YTTF0d2hkcnRVWEV3eWowRVZOajFXTSZzaWc9QU9xMFFKOHdSUUloQVA5VDNQNXBCemJpZ3FoaXd2OXVlZjJDMlVoWFlmOHNfbDU2RzFla1VjV25BaUFCU0pSNFdLRlMxS05nUkhjRkUtVGJFRWFiWUtSYlA4YnItcVlzRTczVFFnPT0maG9zdD1yNS0tLXNuLW40djdzbjdzLmdvb2dsZXZpZGVvLmNvbTwvQmFzZVVSTD4KICAgICAgICA8U2VnbWVudEJhc2UgaW5kZXhSYW5nZT0iNzQwLTYyMTc0ODMxIj4KICAgICAgICAgIDxJbml0aWFsaXphdGlvbiByYW5nZT0iMC03NDAiLz4KICAgICAgICA8L1NlZ21lbnRCYXNlPgogICAgICAgIDwvUmVwcmVzZW50YXRpb24+CiAgICA8L0FkYXB0YXRpb25TZXQ+CiAgPC9QZXJpb2Q+CjwvTVBEPgo=",
// type: "application/dash+xml",
// label: "DASH"
// });
this.video.videoStreams.map(stream =>
2020-11-11 09:20:57 +00:00
src.push({
src: stream.url,
type: stream.mimeType,
label: stream.quality,
videoOnly: stream.videoOnly
})
);
2020-11-11 09:20:57 +00:00
2020-11-17 05:15:35 +00:00
this.video.audioStreams.map(stream =>
src.push({
src: stream.url,
type: stream.mimeType,
label: stream.quality
2021-01-20 15:57:43 +00:00
})
);
this.video.subtitles.map(subtitle => {
this.player.addRemoteTextTrack({
kind: "captions",
src: subtitle.url.replace("fmt=ttml", "fmt=vtt"),
label: "Track",
language: "en",
type: "captions/captions.vtt"
});
});
2021-01-20 15:57:43 +00:00
this.player.src(src);
const currentSrc = src.filter(
src => src.src == this.player.currentSrc()
)[0];
2020-11-15 20:02:11 +00:00
2021-01-20 15:57:43 +00:00
if (currentSrc.videoOnly)
if (!this.audioplayer)
this.audioplayer = new Audio(
this.video.audioStreams.slice(-1)[0].url
2020-11-22 04:31:14 +00:00
);
2020-12-10 12:10:15 +00:00
else
this.audioplayer.src = this.video.audioStreams.slice(
2021-01-20 15:57:43 +00:00
-1
)[0].url;
2020-11-11 09:20:57 +00:00
2020-11-15 20:02:11 +00:00
if (noPrevPlayer) {
2020-11-17 05:15:35 +00:00
this.player.on("timeupdate", () => {
2020-11-11 09:20:57 +00:00
if (this.sponsors && this.sponsors.segments) {
2020-11-17 05:15:35 +00:00
const time = this.player.currentTime();
2020-11-11 09:20:57 +00:00
this.sponsors.segments.map(segment => {
if (!segment.skipped) {
2020-11-17 05:15:35 +00:00
const end = segment.segment[1];
if (
time >= segment.segment[0] &&
time < end
) {
this.player.currentTime(end);
2021-01-20 15:57:43 +00:00
if (this.audioplayer)
this.audioplayer.currentTime = end;
2020-11-17 05:15:35 +00:00
segment.skipped = true;
return;
2020-11-11 09:20:57 +00:00
}
}
2020-11-17 05:15:35 +00:00
});
2020-11-11 09:20:57 +00:00
}
2020-11-15 20:02:11 +00:00
if (this.audioplayer) {
2020-11-17 05:15:35 +00:00
const delay =
2020-11-22 04:31:14 +00:00
this.audioplayer.currentTime -
this.player.currentTime(),
absdelay = Math.abs(delay);
console.log(delay);
2020-11-16 10:05:25 +00:00
2020-11-22 04:31:14 +00:00
if (absdelay > 0.05) {
2020-11-17 05:15:35 +00:00
this.audioplayer.currentTime =
2020-11-22 04:31:14 +00:00
absdelay > 0.2
2020-11-17 05:46:24 +00:00
? this.player.currentTime()
2020-11-22 04:31:14 +00:00
: this.player.currentTime() - delay;
2020-11-15 20:02:11 +00:00
}
}
2020-11-11 09:20:57 +00:00
});
2020-11-17 05:15:35 +00:00
this.player.on("play", () => {
2021-01-20 15:57:43 +00:00
if (this.audioplayer) this.audioplayer.play();
2020-11-15 20:02:11 +00:00
});
2020-11-17 05:15:35 +00:00
this.player.on("pause", () => {
2021-01-20 15:57:43 +00:00
if (this.audioplayer) {
this.audioplayer.currentTime = this.player.currentTime();
this.audioplayer.pause();
}
2020-11-15 20:02:11 +00:00
});
2020-11-17 05:15:35 +00:00
this.player.on("volumechange", () => {
this.audioplayer.volume = this.player.volume();
2021-01-07 05:34:21 +00:00
if (localStorage)
localStorage.setItem(
"volume",
this.player.volume()
);
2020-11-17 05:15:35 +00:00
});
2020-12-10 07:53:30 +00:00
this.player.on("ended", () => {
if (
this.selectedAutoPlay &&
this.video.relatedStreams.length > 0
)
this.$router.push(
this.video.relatedStreams[0].url
);
});
2020-11-15 20:02:11 +00:00
}
if (!noPrevPlayer)
2020-11-17 05:15:35 +00:00
this.player
.remoteTextTracks()
.map(track =>
this.player.removeRemoteTextTrack(track)
);
2020-11-11 09:20:57 +00:00
this.video.subtitles.map(subtitle => {
2020-11-17 05:15:35 +00:00
this.player.addRemoteTextTrack(
{
kind: "captions",
src: subtitle.url.replace(
"fmt=ttml",
"fmt=vtt"
),
label: "Track",
type: "captions/captions.vtt"
},
false
).mode = "showing";
});
2020-11-11 09:20:57 +00:00
2020-11-17 05:15:35 +00:00
//const parent = this.player.el().querySelector(".vjs-progress-holder")
2020-11-11 09:20:57 +00:00
//TODO: Add sponsors on seekbar: https://github.com/ajayyy/SponsorBlock/blob/e39de9fd852adb9196e0358ed827ad38d9933e29/src/js-components/previewBar.ts#L12
});
},
async getSponsors() {
2020-11-17 05:15:35 +00:00
this.fetchSponsors().then(data => (this.sponsors = data));
}
}
2020-11-11 09:20:57 +00:00
};
</script>
<style>
.vjs-current-time {
display: block;
}
</style>