2020-11-11 14:50:57 +05:30
|
|
|
<template>
|
2020-11-17 10:45:35 +05:30
|
|
|
<div class="uk-container uk-container-xlarge">
|
|
|
|
<video
|
|
|
|
controls
|
|
|
|
ref="player"
|
|
|
|
class="video-js preview-player-dimensions"
|
|
|
|
></video>
|
2020-11-22 10:01:14 +05:30
|
|
|
<h1 class="uk-text-bold">{{ video.title }}</h1>
|
2020-11-17 10:45:35 +05:30
|
|
|
|
|
|
|
<img :src="video.uploaderAvatar" />
|
|
|
|
<router-link class="uk-text-bold" v-bind:to="video.uploaderUrl || '/'">
|
|
|
|
<a>{{ video.uploader }}</a>
|
2020-11-13 02:12:02 +05:30
|
|
|
</router-link>
|
2020-11-17 10:45:35 +05:30
|
|
|
|
|
|
|
<p class="uk-dark">
|
|
|
|
<font-awesome-icon icon="thumbs-down"></font-awesome-icon>
|
2020-11-27 12:16:36 +05:30
|
|
|
<b>{{ video.likes }}</b>
|
|
|
|
|
2020-11-17 10:45:35 +05:30
|
|
|
<font-awesome-icon icon="thumbs-up"></font-awesome-icon>
|
2020-11-27 12:16:36 +05:30
|
|
|
<b>{{ video.dislikes }}</b>
|
2020-11-17 10:45:35 +05:30
|
|
|
</p>
|
2020-11-13 02:12:02 +05:30
|
|
|
<p>
|
|
|
|
<font-awesome-icon icon="eye"></font-awesome-icon>
|
2020-11-27 12:16:36 +05:30
|
|
|
<b>{{ video.views }}</b> views
|
|
|
|
</p>
|
|
|
|
<p>
|
|
|
|
Uploaded on <b>{{ video.uploadDate }}</b>
|
2020-11-13 02:12:02 +05:30
|
|
|
</p>
|
2020-11-17 10:45:35 +05:30
|
|
|
<p class="uk-light" v-html="video.description"></p>
|
|
|
|
<a v-if="sponsors && sponsors.segments"
|
|
|
|
>Sponsors Segments: {{ sponsors.segments.length }}</a
|
|
|
|
>
|
|
|
|
|
|
|
|
<hr />
|
|
|
|
|
2020-12-10 13:23:30 +05:30
|
|
|
<b>Auto Play next Video:</b>
|
|
|
|
<input
|
|
|
|
class="uk-checkbox"
|
|
|
|
v-model="selectedAutoPlay"
|
|
|
|
@change="onChange($event)"
|
|
|
|
type="checkbox"
|
|
|
|
/>
|
|
|
|
|
2020-11-17 10:45:35 +05:30
|
|
|
<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>
|
2020-11-13 02:12:02 +05:30
|
|
|
</div>
|
2020-11-11 14:50:57 +05:30
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import "video.js/dist/video-js.css";
|
|
|
|
import "@silvermine/videojs-quality-selector/dist/css/quality-selector.css";
|
|
|
|
import videojs from "video.js";
|
2020-11-13 17:35:02 +05:30
|
|
|
require("videojs-hotkeys");
|
2020-11-11 14:50:57 +05:30
|
|
|
import Constants from "@/Constants.js";
|
|
|
|
require("@silvermine/videojs-quality-selector")(videojs);
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: "App",
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
video: {
|
2020-11-17 10:45:35 +05:30
|
|
|
title: "Loading..."
|
2020-11-11 14:50:57 +05:30
|
|
|
},
|
|
|
|
player: null,
|
2020-11-16 01:32:11 +05:30
|
|
|
audioplayer: null,
|
2020-12-14 19:11:49 +05:30
|
|
|
sponsors: null,
|
|
|
|
selectedAutoPlay: null
|
2020-11-11 14:50:57 +05:30
|
|
|
};
|
|
|
|
},
|
|
|
|
mounted() {
|
2020-12-14 19:11:49 +05:30
|
|
|
this.selectedAutoPlay = Constants.AUTO_PLAY;
|
2020-11-11 14:50:57 +05:30
|
|
|
this.getVideoData();
|
|
|
|
this.getSponsors();
|
|
|
|
},
|
|
|
|
beforeUnmount() {
|
|
|
|
if (this.player) {
|
|
|
|
this.player.dispose();
|
|
|
|
}
|
2020-11-16 01:32:11 +05:30
|
|
|
if (this.audioplayer) {
|
2020-11-17 10:45:35 +05:30
|
|
|
this.audioplayer.pause();
|
2020-11-16 01:32:11 +05:30
|
|
|
}
|
2020-11-11 14:50:57 +05:30
|
|
|
},
|
|
|
|
watch: {
|
2020-11-17 10:45:35 +05:30
|
|
|
"$route.query.v": function(v) {
|
2020-11-11 14:50:57 +05:30
|
|
|
if (v) {
|
2020-11-17 10:45:35 +05:30
|
|
|
if (this.audioplayer) this.audioplayer.pause();
|
2020-11-11 14:50:57 +05:30
|
|
|
this.getVideoData();
|
|
|
|
this.getSponsors();
|
|
|
|
}
|
2020-11-17 10:45:35 +05:30
|
|
|
}
|
2020-11-11 14:50:57 +05:30
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
async fetchVideo() {
|
|
|
|
return await (
|
2020-11-17 10:45:35 +05:30
|
|
|
await fetch(
|
|
|
|
Constants.BASE_URL + "/streams/" + this.$route.query.v
|
|
|
|
)
|
2020-11-11 14:50:57 +05:30
|
|
|
).json();
|
|
|
|
},
|
|
|
|
async fetchSponsors() {
|
|
|
|
return await (
|
2020-11-17 10:45:35 +05:30
|
|
|
await fetch(
|
|
|
|
Constants.BASE_URL +
|
|
|
|
"/sponsors/" +
|
|
|
|
this.$route.query.v +
|
|
|
|
'?category=["sponsor","interaction","selfpromo","music_offtopic"]'
|
|
|
|
)
|
2020-11-11 14:50:57 +05:30
|
|
|
).json();
|
|
|
|
},
|
2020-12-10 13:23:30 +05:30
|
|
|
onChange() {
|
|
|
|
if (localStorage)
|
|
|
|
localStorage.setItem("autoplay", this.selectedAutoPlay);
|
|
|
|
},
|
2020-11-11 14:50:57 +05:30
|
|
|
async getVideoData() {
|
|
|
|
this.fetchVideo()
|
2020-11-17 10:45:35 +05:30
|
|
|
.then(data => (this.video = data))
|
2020-11-11 14:50:57 +05:30
|
|
|
.then(() => {
|
|
|
|
document.title = this.video.title + " - Piped";
|
|
|
|
|
2020-11-17 10:45:35 +05:30
|
|
|
this.video.description = this.video.description
|
|
|
|
.replaceAll("http://www.youtube.com", "")
|
|
|
|
.replaceAll("https://www.youtube.com", "");
|
2020-11-11 14:50:57 +05:30
|
|
|
|
|
|
|
const options = {
|
|
|
|
autoplay: false,
|
|
|
|
controlBar: {
|
|
|
|
children: [
|
|
|
|
"playToggle",
|
|
|
|
"currentTimeDisplay",
|
|
|
|
"progressControl",
|
|
|
|
"volumePanel",
|
|
|
|
"qualitySelector",
|
2020-11-13 02:12:02 +05:30
|
|
|
"captionsButton",
|
2020-11-17 10:45:35 +05:30
|
|
|
"fullscreenToggle"
|
|
|
|
]
|
2020-11-11 14:50:57 +05:30
|
|
|
},
|
2020-11-13 02:12:02 +05:30
|
|
|
responsive: false,
|
2020-11-17 10:45:35 +05:30
|
|
|
aspectRatio: "16:9"
|
2020-11-11 14:50:57 +05:30
|
|
|
};
|
|
|
|
|
2020-11-17 10:45:35 +05:30
|
|
|
const noPrevPlayer = !this.player;
|
2020-11-11 14:50:57 +05:30
|
|
|
|
2020-11-17 10:45:35 +05:30
|
|
|
if (noPrevPlayer)
|
|
|
|
this.player = videojs(this.$refs.player, options);
|
2020-11-11 14:50:57 +05:30
|
|
|
|
|
|
|
this.player.hotkeys({
|
|
|
|
volumeStep: 0.1,
|
|
|
|
seekStep: 5,
|
|
|
|
enableModifiersForNumbers: false,
|
2020-11-17 10:45:35 +05:30
|
|
|
enableHoverScroll: true
|
2020-11-11 14:50:57 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
this.player.poster(this.video.thumbnailUrl);
|
|
|
|
|
|
|
|
var src = [];
|
|
|
|
|
2020-11-22 10:01:14 +05:30
|
|
|
// src.push({
|
|
|
|
// src:
|
|
|
|
// "data:application/dash+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPE1QRCB0eXBlPSJzdGF0aWMiIHhtbG5zPSJ1cm46bXBlZzpkYXNoOnNjaGVtYTptcGQ6MjAxMSIgbWluQnVmZmVyVGltZT0iUFQxLjVTIiBtZWRpYVByZXNlbnRhdGlvbkR1cmF0aW9uPSJQVDIyMC43NjIyMDgzMzMzMzMzMlMiIHByb2ZpbGVzPSJ1cm46bXBlZzpkYXNoOnByb2ZpbGU6aXNvZmYtbWFpbjoyMDExIj4KICA8UGVyaW9kIHN0YXJ0PSJQVDBTIj4KICAgIDxBZGFwdGF0aW9uU2V0PgogICAgICA8UmVwcmVzZW50YXRpb24gaWQ9InZpZGVvMDEiIG1pbWVUeXBlPSJ2aWRlby9tcDQiIGNvZGVjcz0iYXZjMS42NDAwMjgiIGJhbmR3aWR0aD0iMjgxNjM0Ij4KICAgICAgICAgIDxCYXNlVVJMPmh0dHBzOi8vcGlwZWRwcm94eS5rYXZpbi5yb2Nrcy92aWRlb3BsYXliYWNrP2V4cGlyZT0xNjA1NjkxNTMzJmVpPUxaUzBYLVA5RG9TLWh3YU95Sl9vRHcmaXA9MjA5LjE0MS40Ni4zOCZpZD0wN2FmZTI0MmY2ODg4ZDdjJml0YWc9MjQ4JmFpdGFncz0xMzMlMkMxMzQlMkMxMzUlMkMxMzYlMkMxMzclMkMxNjAlMkMyNDIlMkMyNDMlMkMyNDQlMkMyNDclMkMyNDglMkMyNzgmc291cmNlPXlvdXR1YmUmcmVxdWlyZXNzbD15ZXMmbWg9U0EmbW09MzElMkMyOSZtbj1zbi1uNHY3c243cyUyQ3NuLW40djdrbmxrJm1zPWF1JTJDcmR1Jm12PW0mbXZpPTUmcGw9MjMmZ2NyPXVzJmluaXRjd25kYnBzPTExMTI1MCZ2cHJ2PTEmbWltZT12aWRlbyUyRndlYm0mbnM9dllDakpkUFdQTWVjeHhrS3NlXzF4QUFGJmdpcj15ZXMmY2xlbj01MDE0MDM4NyZkdXI9MjIwLjc2MiZsbXQ9MTYwNTY0ODY5MjQyNjI0NSZtdD0xNjA1NjY5ODg1JmZ2aXA9NSZrZWVwYWxpdmU9eWVzJmM9V0VCJnR4cD01NDMyNDM0Jm49blYweDdYZXlodTV4R2ZIJnNwYXJhbXM9ZXhwaXJlJTJDZWklMkNpcCUyQ2lkJTJDYWl0YWdzJTJDc291cmNlJTJDcmVxdWlyZXNzbCUyQ2djciUyQ3ZwcnYlMkNtaW1lJTJDbnMlMkNnaXIlMkNjbGVuJTJDZHVyJTJDbG10JmxzcGFyYW1zPW1oJTJDbW0lMkNtbiUyQ21zJTJDbXYlMkNtdmklMkNwbCUyQ2luaXRjd25kYnBzJmxzaWc9QUczQ194QXdSQUlnUGh1ZklrTzBfZFBSdnFNRFhvRVZsYV9Dbzk1ZkpOYXdwbEM4QWE4eDJCd0NJRVhlOHdnTFJKeUFvZ2xNZmVPak1YTTF0d2hkcnRVWEV3eWowRVZOajFXTSZzaWc9QU9xMFFKOHdSUUloQVA5VDNQNXBCemJpZ3FoaXd2OXVlZjJDMlVoWFlmOHNfbDU2RzFla1VjV25BaUFCU0pSNFdLRlMxS05nUkhjRkUtVGJFRWFiWUtSYlA4YnItcVlzRTczVFFnPT0maG9zdD1yNS0tLXNuLW40djdzbjdzLmdvb2dsZXZpZGVvLmNvbTwvQmFzZVVSTD4KICAgICAgICA8U2VnbWVudEJhc2UgaW5kZXhSYW5nZT0iNzQwLTYyMTc0ODMxIj4KICAgICAgICAgIDxJbml0aWFsaXphdGlvbiByYW5nZT0iMC03NDAiLz4KICAgICAgICA8L1NlZ21lbnRCYXNlPgogICAgICAgIDwvUmVwcmVzZW50YXRpb24+CiAgICA8L0FkYXB0YXRpb25TZXQ+CiAgPC9QZXJpb2Q+CjwvTVBEPgo=",
|
|
|
|
// type: "application/dash+xml",
|
|
|
|
// label: "DASH"
|
|
|
|
// });
|
|
|
|
|
2020-11-16 01:32:11 +05:30
|
|
|
if (this.video.livestream) {
|
2020-11-11 14:50:57 +05:30
|
|
|
src.push({
|
2020-11-16 01:32:11 +05:30
|
|
|
src: this.video.hls,
|
2020-11-17 10:45:35 +05:30
|
|
|
type: "application/x-mpegURL"
|
|
|
|
});
|
2020-11-16 01:32:11 +05:30
|
|
|
} else {
|
2020-11-17 10:45:35 +05:30
|
|
|
this.video.videoStreams.map(stream =>
|
2020-11-16 01:32:11 +05:30
|
|
|
src.push({
|
|
|
|
src: stream.url,
|
2020-11-17 10:45:35 +05:30
|
|
|
type: stream.mimeType,
|
|
|
|
label: stream.quality
|
|
|
|
})
|
|
|
|
);
|
2020-11-11 14:50:57 +05:30
|
|
|
|
2020-11-17 10:45:35 +05:30
|
|
|
this.video.audioStreams.map(stream =>
|
|
|
|
src.push({
|
|
|
|
src: stream.url,
|
|
|
|
type: stream.mimeType,
|
|
|
|
label: stream.quality
|
2020-11-16 01:32:11 +05:30
|
|
|
})
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-12-10 17:40:15 +05:30
|
|
|
if (!this.audioplayer)
|
2020-11-22 10:01:14 +05:30
|
|
|
this.audioplayer = new Audio(
|
|
|
|
this.video.audioStreams.slice(-1)[0].url
|
|
|
|
);
|
2020-12-10 17:40:15 +05:30
|
|
|
else
|
|
|
|
this.audioplayer.src = this.video.audioStreams.slice(
|
|
|
|
-1
|
|
|
|
)[0].url;
|
2020-11-13 02:12:02 +05:30
|
|
|
|
2020-11-11 14:50:57 +05:30
|
|
|
this.player.src(src);
|
|
|
|
|
2020-11-16 01:32:11 +05:30
|
|
|
if (noPrevPlayer) {
|
2020-11-17 10:45:35 +05:30
|
|
|
this.player.on("timeupdate", () => {
|
2020-11-11 14:50:57 +05:30
|
|
|
if (this.sponsors && this.sponsors.segments) {
|
2020-11-17 10:45:35 +05:30
|
|
|
const time = this.player.currentTime();
|
2020-11-11 14:50:57 +05:30
|
|
|
this.sponsors.segments.map(segment => {
|
|
|
|
if (!segment.skipped) {
|
2020-11-17 10:45:35 +05:30
|
|
|
const end = segment.segment[1];
|
|
|
|
if (
|
|
|
|
time >= segment.segment[0] &&
|
|
|
|
time < end
|
|
|
|
) {
|
|
|
|
this.player.currentTime(end);
|
|
|
|
this.audioplayer.currentTime = end;
|
|
|
|
segment.skipped = true;
|
|
|
|
return;
|
2020-11-11 14:50:57 +05:30
|
|
|
}
|
|
|
|
}
|
2020-11-17 10:45:35 +05:30
|
|
|
});
|
2020-11-11 14:50:57 +05:30
|
|
|
}
|
2020-11-16 01:32:11 +05:30
|
|
|
|
|
|
|
if (this.audioplayer) {
|
2020-11-17 10:45:35 +05:30
|
|
|
const delay =
|
2020-11-22 10:01:14 +05:30
|
|
|
this.audioplayer.currentTime -
|
|
|
|
this.player.currentTime(),
|
|
|
|
absdelay = Math.abs(delay);
|
|
|
|
|
|
|
|
console.log(delay);
|
2020-11-16 15:35:25 +05:30
|
|
|
|
2020-11-22 10:01:14 +05:30
|
|
|
if (absdelay > 0.05) {
|
2020-11-17 10:45:35 +05:30
|
|
|
this.audioplayer.currentTime =
|
2020-11-22 10:01:14 +05:30
|
|
|
absdelay > 0.2
|
2020-11-17 11:16:24 +05:30
|
|
|
? this.player.currentTime()
|
2020-11-22 10:01:14 +05:30
|
|
|
: this.player.currentTime() - delay;
|
2020-11-16 01:32:11 +05:30
|
|
|
}
|
|
|
|
}
|
2020-11-11 14:50:57 +05:30
|
|
|
});
|
|
|
|
|
2020-11-17 10:45:35 +05:30
|
|
|
this.player.on("play", () => {
|
|
|
|
this.audioplayer.play();
|
2020-11-16 01:32:11 +05:30
|
|
|
});
|
|
|
|
|
2020-11-17 10:45:35 +05:30
|
|
|
this.player.on("pause", () => {
|
|
|
|
this.audioplayer.currentTime = this.player.currentTime();
|
|
|
|
this.audioplayer.pause();
|
2020-11-16 01:32:11 +05:30
|
|
|
});
|
|
|
|
|
2020-11-17 10:45:35 +05:30
|
|
|
this.player.on("volumechange", () => {
|
|
|
|
this.audioplayer.volume = this.player.volume();
|
|
|
|
});
|
2020-12-10 13:23:30 +05:30
|
|
|
|
|
|
|
this.player.on("ended", () => {
|
|
|
|
if (
|
|
|
|
this.selectedAutoPlay &&
|
|
|
|
this.video.relatedStreams.length > 0
|
|
|
|
)
|
|
|
|
this.$router.push(
|
|
|
|
this.video.relatedStreams[0].url
|
|
|
|
);
|
|
|
|
});
|
2020-11-16 01:32:11 +05:30
|
|
|
}
|
|
|
|
|
2020-11-13 02:12:02 +05:30
|
|
|
if (!noPrevPlayer)
|
2020-11-17 10:45:35 +05:30
|
|
|
this.player
|
|
|
|
.remoteTextTracks()
|
|
|
|
.map(track =>
|
|
|
|
this.player.removeRemoteTextTrack(track)
|
|
|
|
);
|
2020-11-11 14:50:57 +05:30
|
|
|
|
|
|
|
this.video.subtitles.map(subtitle => {
|
2020-11-17 10:45:35 +05:30
|
|
|
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 14:50:57 +05:30
|
|
|
|
2020-11-17 10:45:35 +05:30
|
|
|
//const parent = this.player.el().querySelector(".vjs-progress-holder")
|
2020-11-11 14:50:57 +05:30
|
|
|
//TODO: Add sponsors on seekbar: https://github.com/ajayyy/SponsorBlock/blob/e39de9fd852adb9196e0358ed827ad38d9933e29/src/js-components/previewBar.ts#L12
|
|
|
|
});
|
|
|
|
},
|
|
|
|
async getSponsors() {
|
2020-11-17 10:45:35 +05:30
|
|
|
this.fetchSponsors().then(data => (this.sponsors = data));
|
|
|
|
}
|
|
|
|
}
|
2020-11-11 14:50:57 +05:30
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
.vjs-current-time {
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
</style>
|