1
0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-12-15 23:00:28 +05:30
Piped/src/components/WatchVideo.vue

309 lines
11 KiB
Vue
Raw Normal View History

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>
</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>
&nbsp;
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>
<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>
</p>
<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>&nbsp;
<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>
</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,
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-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>