2020-11-11 14:50:57 +05:30
|
|
|
<template>
|
2020-11-17 10:45:35 +05:30
|
|
|
<div class="uk-container uk-container-xlarge">
|
2021-02-25 12:38:47 +05:30
|
|
|
<div data-shaka-player-container>
|
|
|
|
<video
|
|
|
|
data-shaka-player
|
|
|
|
controls
|
|
|
|
autoplay
|
|
|
|
style="width: 100%; height: 100%"
|
|
|
|
></video>
|
|
|
|
</div>
|
2020-11-22 10:01:14 +05:30
|
|
|
<h1 class="uk-text-bold">{{ video.title }}</h1>
|
2020-11-17 10:45:35 +05:30
|
|
|
|
2021-02-24 15:05:41 +05:30
|
|
|
<img :src="video.uploaderAvatar" loading="lazy" />
|
2020-11-17 10:45:35 +05:30
|
|
|
<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>
|
2021-01-15 15:19:46 +05:30
|
|
|
<a
|
|
|
|
class="uk-button uk-button-small"
|
|
|
|
style="background: #222"
|
|
|
|
@click="showDesc = !showDesc"
|
|
|
|
>
|
|
|
|
{{ showDesc ? "+" : "-" }}
|
|
|
|
</a>
|
2021-01-20 21:19:21 +05:30
|
|
|
<p v-show="showDesc" class="uk-light" v-html="video.description"></p>
|
2020-11-17 10:45:35 +05:30
|
|
|
<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>
|
2021-02-24 15:05:41 +05:30
|
|
|
<img
|
|
|
|
style="width: 100%"
|
|
|
|
v-bind:src="related.thumbnail"
|
|
|
|
loading="lazy"
|
|
|
|
/>
|
2020-11-17 10:45:35 +05:30
|
|
|
</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>
|
2021-02-25 12:38:47 +05:30
|
|
|
import "shaka-player/dist/shaka-player.ui.js";
|
|
|
|
import("shaka-player/dist/controls.css");
|
|
|
|
const shaka = import("shaka-player/dist/shaka-player.ui.js");
|
2020-11-11 14:50:57 +05:30
|
|
|
import Constants from "@/Constants.js";
|
|
|
|
|
|
|
|
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-12-14 19:11:49 +05:30
|
|
|
sponsors: null,
|
2021-01-15 15:19:46 +05:30
|
|
|
selectedAutoPlay: null,
|
|
|
|
showDesc: true
|
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) {
|
2021-02-25 19:36:19 +05:30
|
|
|
window.player.destroy();
|
2021-02-25 15:24:43 +05:30
|
|
|
window.player = undefined;
|
|
|
|
window.ui = undefined;
|
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) {
|
|
|
|
this.getVideoData();
|
|
|
|
this.getSponsors();
|
|
|
|
}
|
2020-11-17 10:45:35 +05:30
|
|
|
}
|
2020-11-11 14:50:57 +05:30
|
|
|
},
|
|
|
|
methods: {
|
2021-02-24 15:05:41 +05:30
|
|
|
fetchVideo() {
|
|
|
|
return this.fetchJson(
|
|
|
|
Constants.BASE_URL + "/streams/" + this.$route.query.v
|
|
|
|
);
|
2020-11-11 14:50:57 +05:30
|
|
|
},
|
|
|
|
async fetchSponsors() {
|
2021-02-25 15:24:43 +05:30
|
|
|
return await this.fetchJson(
|
2021-02-24 15:05:41 +05:30
|
|
|
Constants.BASE_URL +
|
|
|
|
"/sponsors/" +
|
|
|
|
this.$route.query.v +
|
|
|
|
'?category=["sponsor","interaction","selfpromo","music_offtopic"]'
|
|
|
|
);
|
2020-11-11 14:50:57 +05:30
|
|
|
},
|
2020-12-10 13:23:30 +05:30
|
|
|
onChange() {
|
|
|
|
if (localStorage)
|
|
|
|
localStorage.setItem("autoplay", this.selectedAutoPlay);
|
|
|
|
},
|
2021-02-25 15:24:43 +05:30
|
|
|
setPlayerAttrs(player, videoEl, dash, shaka) {
|
|
|
|
player
|
|
|
|
.load(
|
|
|
|
"data:application/dash+xml;charset=utf-8;base64," +
|
|
|
|
btoa(dash)
|
|
|
|
)
|
|
|
|
.then(() => {
|
|
|
|
this.video.subtitles.map(subtitle => {
|
|
|
|
player.addTextTrack(
|
|
|
|
subtitle.url,
|
|
|
|
"eng",
|
|
|
|
"SUBTITLE",
|
|
|
|
subtitle.mimeType,
|
|
|
|
null,
|
|
|
|
"English"
|
|
|
|
);
|
|
|
|
player.setTextTrackVisibility(true);
|
|
|
|
});
|
|
|
|
if (localStorage)
|
|
|
|
videoEl.volume = localStorage.getItem("volume") || 1;
|
|
|
|
|
|
|
|
const ui =
|
|
|
|
window.ui ||
|
|
|
|
(window.ui = new shaka.ui.Overlay(
|
|
|
|
player,
|
|
|
|
document.querySelector(
|
|
|
|
"div[data-shaka-player-container]"
|
|
|
|
),
|
|
|
|
videoEl
|
|
|
|
));
|
|
|
|
const config = {
|
|
|
|
overflowMenuButtons: [
|
|
|
|
"quality",
|
|
|
|
"captions",
|
|
|
|
"playback_rate"
|
|
|
|
]
|
|
|
|
};
|
|
|
|
ui.configure(config);
|
|
|
|
});
|
|
|
|
},
|
2020-11-11 14:50:57 +05:30
|
|
|
async getVideoData() {
|
|
|
|
this.fetchVideo()
|
2021-02-24 15:05:41 +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", "")
|
2021-01-20 21:19:21 +05:30
|
|
|
.replaceAll("https://www.youtube.com", "")
|
|
|
|
.replaceAll("\n", "<br>");
|
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
|
|
|
|
2021-02-24 15:05:41 +05:30
|
|
|
var streams = [];
|
2021-01-07 13:58:31 +05:30
|
|
|
|
2021-02-24 15:05:41 +05:30
|
|
|
streams.push(...this.video.audioStreams);
|
|
|
|
streams.push(...this.video.videoStreams);
|
2020-11-11 14:50:57 +05:30
|
|
|
|
2021-02-24 15:05:41 +05:30
|
|
|
const dash = require("../utils/DashUtils.js").default.generate_dash_file_from_formats(
|
|
|
|
streams,
|
|
|
|
this.video.duration
|
|
|
|
);
|
2020-11-11 14:50:57 +05:30
|
|
|
|
2021-02-25 00:12:11 +05:30
|
|
|
const WatchVideo = this;
|
|
|
|
|
|
|
|
const videoEl = document.querySelector("video");
|
|
|
|
|
2021-02-25 15:24:43 +05:30
|
|
|
setTimeout(function() {
|
|
|
|
shaka
|
|
|
|
.then(shaka => shaka.default)
|
|
|
|
.then(shaka => {
|
|
|
|
if (noPrevPlayer) {
|
2021-02-24 15:05:41 +05:30
|
|
|
shaka.polyfill.installAll();
|
|
|
|
|
2021-02-25 00:12:11 +05:30
|
|
|
const player = new shaka.Player(videoEl);
|
|
|
|
|
2021-02-25 15:24:43 +05:30
|
|
|
WatchVideo.player = player;
|
|
|
|
window.player = player;
|
|
|
|
|
|
|
|
WatchVideo.setPlayerAttrs(
|
|
|
|
player,
|
|
|
|
videoEl,
|
|
|
|
dash,
|
|
|
|
shaka
|
2021-02-24 15:05:41 +05:30
|
|
|
);
|
2021-02-25 15:24:43 +05:30
|
|
|
} else {
|
|
|
|
WatchVideo.setPlayerAttrs(
|
|
|
|
window.player,
|
|
|
|
videoEl,
|
|
|
|
dash,
|
|
|
|
shaka
|
|
|
|
);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}, 0);
|
|
|
|
|
|
|
|
videoEl.setAttribute("poster", this.video.thumbnailUrl);
|
2020-11-22 10:01:14 +05:30
|
|
|
|
2021-02-24 15:05:41 +05:30
|
|
|
if (this.$route.query.t)
|
|
|
|
this.player.currentTime(this.$route.query.t);
|
2021-01-20 21:21:14 +05:30
|
|
|
|
2021-02-25 00:12:11 +05:30
|
|
|
videoEl.addEventListener("loadedmetadata", function() {
|
|
|
|
const track = this.addTextTrack(
|
|
|
|
"captions",
|
|
|
|
"English",
|
|
|
|
"en"
|
|
|
|
);
|
|
|
|
track.mode = "showing";
|
|
|
|
});
|
2020-11-11 14:50:57 +05:30
|
|
|
|
2020-11-16 01:32:11 +05:30
|
|
|
if (noPrevPlayer) {
|
2021-02-25 00:12:11 +05:30
|
|
|
videoEl.addEventListener("timeupdate", () => {
|
|
|
|
if (
|
|
|
|
WatchVideo.sponsors &&
|
|
|
|
WatchVideo.sponsors.segments
|
|
|
|
) {
|
|
|
|
const time = videoEl.currentTime;
|
|
|
|
WatchVideo.sponsors.segments.map(segment => {
|
2020-11-11 14:50:57 +05:30
|
|
|
if (!segment.skipped) {
|
2020-11-17 10:45:35 +05:30
|
|
|
const end = segment.segment[1];
|
|
|
|
if (
|
|
|
|
time >= segment.segment[0] &&
|
|
|
|
time < end
|
|
|
|
) {
|
2021-02-25 00:12:11 +05:30
|
|
|
console.log(
|
|
|
|
"Skipped segment at " + time
|
|
|
|
);
|
|
|
|
videoEl.currentTime = end;
|
2020-11-17 10:45:35 +05:30
|
|
|
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-17 10:45:35 +05:30
|
|
|
});
|
2020-12-10 13:23:30 +05:30
|
|
|
|
2021-02-25 00:12:11 +05:30
|
|
|
videoEl.addEventListener("volumechange", () => {
|
|
|
|
if (localStorage)
|
|
|
|
localStorage.setItem("volume", videoEl.volume);
|
|
|
|
});
|
2021-02-24 15:05:41 +05:30
|
|
|
|
2021-02-25 00:12:11 +05:30
|
|
|
videoEl.addEventListener("ended", () => {
|
|
|
|
if (
|
|
|
|
WatchVideo.selectedAutoPlay &&
|
|
|
|
WatchVideo.video.relatedStreams.length > 0
|
|
|
|
)
|
|
|
|
WatchVideo.$router.push(
|
|
|
|
WatchVideo.video.relatedStreams[0].url
|
|
|
|
);
|
|
|
|
});
|
2020-11-16 01:32:11 +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>
|