mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-11-12 19:28:22 +00:00
Add auto play for videos as a preference.
This commit is contained in:
FireMasterK
parent
fcd14d3fcb
commit
5ceda9fd62
@ -1,14 +1,9 @@
|
||||
<template>
|
||||
<div class="uk-container-expand">
|
||||
<div data-shaka-player-container ref="container">
|
||||
<video
|
||||
data-shaka-player
|
||||
autoplay
|
||||
style="width: 100%; height: 100%"
|
||||
ref="videoEl"
|
||||
></video>
|
||||
<div class="uk-container-expand">
|
||||
<div data-shaka-player-container ref="container">
|
||||
<video data-shaka-player :autoplay="shouldAutoPlay" style="width: 100%; height: 100%" ref="videoEl"></video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -16,159 +11,157 @@ import("shaka-player/dist/controls.css");
|
||||
const shaka = import("shaka-player/dist/shaka-player.ui.js");
|
||||
|
||||
export default {
|
||||
props: {
|
||||
video: Object,
|
||||
sponsors: Object,
|
||||
selectedAutoPlay: Boolean,
|
||||
},
|
||||
methods: {
|
||||
loadVideo() {
|
||||
const videoEl = this.$refs.videoEl;
|
||||
|
||||
videoEl.setAttribute("poster", this.video.thumbnailUrl);
|
||||
|
||||
if (this.$route.query.t) videoEl.currentTime = this.$route.query.t;
|
||||
|
||||
const noPrevPlayer = !this.player;
|
||||
|
||||
var streams = [];
|
||||
|
||||
streams.push(...this.video.audioStreams);
|
||||
streams.push(...this.video.videoStreams);
|
||||
|
||||
const dash = require("@/utils/DashUtils.js").default.generate_dash_file_from_formats(
|
||||
streams,
|
||||
this.video.duration
|
||||
);
|
||||
|
||||
if (noPrevPlayer)
|
||||
shaka
|
||||
.then((shaka) => shaka.default)
|
||||
.then((shaka) => {
|
||||
this.shaka = shaka;
|
||||
shaka.polyfill.installAll();
|
||||
|
||||
const player = new shaka.Player(videoEl);
|
||||
|
||||
this.player = player;
|
||||
|
||||
this.setPlayerAttrs(player, videoEl, dash, shaka);
|
||||
});
|
||||
else this.setPlayerAttrs(this.player, videoEl, dash, this.shaka);
|
||||
|
||||
if (noPrevPlayer) {
|
||||
videoEl.addEventListener("timeupdate", () => {
|
||||
if (this.sponsors && this.sponsors.segments) {
|
||||
const time = videoEl.currentTime;
|
||||
this.sponsors.segments.map((segment) => {
|
||||
if (!segment.skipped) {
|
||||
const end = segment.segment[1];
|
||||
if (time >= segment.segment[0] && time < end) {
|
||||
console.log("Skipped segment at " + time);
|
||||
videoEl.currentTime = end;
|
||||
segment.skipped = true;
|
||||
return;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
videoEl.addEventListener("volumechange", () => {
|
||||
if (localStorage) localStorage.setItem("volume", videoEl.volume);
|
||||
});
|
||||
|
||||
videoEl.addEventListener("ended", () => {
|
||||
if (this.selectedAutoPlay && this.video.relatedStreams.length > 0)
|
||||
this.$router.push(this.video.relatedStreams[0].url);
|
||||
});
|
||||
}
|
||||
|
||||
//TODO: Add sponsors on seekbar: https://github.com/ajayyy/SponsorBlock/blob/e39de9fd852adb9196e0358ed827ad38d9933e29/src/js-components/previewBar.ts#L12
|
||||
props: {
|
||||
video: Object,
|
||||
sponsors: Object,
|
||||
selectedAutoPlay: Boolean,
|
||||
},
|
||||
setPlayerAttrs(player, videoEl, dash, shaka) {
|
||||
player
|
||||
.load("data:application/dash+xml;charset=utf-8;base64," + btoa(dash))
|
||||
.then(() => {
|
||||
this.video.subtitles.map((subtitle) => {
|
||||
player.addTextTrackAsync(
|
||||
subtitle.url,
|
||||
subtitle.code,
|
||||
"SUBTITLE",
|
||||
subtitle.mimeType,
|
||||
null,
|
||||
subtitle.name
|
||||
computed: {
|
||||
shouldAutoPlay: () => {
|
||||
const value = localStorage.getItem("playerAutoPlay");
|
||||
return value === null || value === "true";
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
loadVideo() {
|
||||
const videoEl = this.$refs.videoEl;
|
||||
|
||||
videoEl.setAttribute("poster", this.video.thumbnailUrl);
|
||||
|
||||
if (this.$route.query.t) videoEl.currentTime = this.$route.query.t;
|
||||
|
||||
const noPrevPlayer = !this.player;
|
||||
|
||||
var streams = [];
|
||||
|
||||
streams.push(...this.video.audioStreams);
|
||||
streams.push(...this.video.videoStreams);
|
||||
|
||||
const dash = require("@/utils/DashUtils.js").default.generate_dash_file_from_formats(
|
||||
streams,
|
||||
this.video.duration,
|
||||
);
|
||||
});
|
||||
if (localStorage) videoEl.volume = localStorage.getItem("volume") || 1;
|
||||
|
||||
const ui =
|
||||
this.ui ||
|
||||
(this.ui = new shaka.ui.Overlay(player, this.$refs.container, videoEl));
|
||||
if (noPrevPlayer)
|
||||
shaka
|
||||
.then(shaka => shaka.default)
|
||||
.then(shaka => {
|
||||
this.shaka = shaka;
|
||||
shaka.polyfill.installAll();
|
||||
|
||||
const config = {
|
||||
overflowMenuButtons: ["quality", "captions", "playback_rate"],
|
||||
seekBarColors: {
|
||||
base: "rgba(255, 255, 255, 0.3)",
|
||||
buffered: "rgba(255, 255, 255, 0.54)",
|
||||
played: "rgb(255, 0, 0)",
|
||||
},
|
||||
};
|
||||
const player = new shaka.Player(videoEl);
|
||||
|
||||
ui.configure(config);
|
||||
});
|
||||
this.player = player;
|
||||
|
||||
this.setPlayerAttrs(player, videoEl, dash, shaka);
|
||||
});
|
||||
else this.setPlayerAttrs(this.player, videoEl, dash, this.shaka);
|
||||
|
||||
if (noPrevPlayer) {
|
||||
videoEl.addEventListener("timeupdate", () => {
|
||||
if (this.sponsors && this.sponsors.segments) {
|
||||
const time = videoEl.currentTime;
|
||||
this.sponsors.segments.map(segment => {
|
||||
if (!segment.skipped) {
|
||||
const end = segment.segment[1];
|
||||
if (time >= segment.segment[0] && time < end) {
|
||||
console.log("Skipped segment at " + time);
|
||||
videoEl.currentTime = end;
|
||||
segment.skipped = true;
|
||||
return;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
videoEl.addEventListener("volumechange", () => {
|
||||
if (localStorage) localStorage.setItem("volume", videoEl.volume);
|
||||
});
|
||||
|
||||
videoEl.addEventListener("ended", () => {
|
||||
if (this.selectedAutoPlay && this.video.relatedStreams.length > 0)
|
||||
this.$router.push(this.video.relatedStreams[0].url);
|
||||
});
|
||||
}
|
||||
|
||||
//TODO: Add sponsors on seekbar: https://github.com/ajayyy/SponsorBlock/blob/e39de9fd852adb9196e0358ed827ad38d9933e29/src/js-components/previewBar.ts#L12
|
||||
},
|
||||
setPlayerAttrs(player, videoEl, dash, shaka) {
|
||||
player.load("data:application/dash+xml;charset=utf-8;base64," + btoa(dash)).then(() => {
|
||||
this.video.subtitles.map(subtitle => {
|
||||
player.addTextTrackAsync(
|
||||
subtitle.url,
|
||||
subtitle.code,
|
||||
"SUBTITLE",
|
||||
subtitle.mimeType,
|
||||
null,
|
||||
subtitle.name,
|
||||
);
|
||||
});
|
||||
if (localStorage) videoEl.volume = localStorage.getItem("volume") || 1;
|
||||
|
||||
const ui = this.ui || (this.ui = new shaka.ui.Overlay(player, this.$refs.container, videoEl));
|
||||
|
||||
const config = {
|
||||
overflowMenuButtons: ["quality", "captions", "playback_rate"],
|
||||
seekBarColors: {
|
||||
base: "rgba(255, 255, 255, 0.3)",
|
||||
buffered: "rgba(255, 255, 255, 0.54)",
|
||||
played: "rgb(255, 0, 0)",
|
||||
},
|
||||
};
|
||||
|
||||
ui.configure(config);
|
||||
});
|
||||
},
|
||||
onKeyPress(e) {
|
||||
if (document.activeElement.tagName === "INPUT" && document.activeElement.type === "text") return;
|
||||
const videoEl = this.$refs.videoEl;
|
||||
switch (e.code) {
|
||||
case "KeyF":
|
||||
if (document.fullscreenElement) document.exitFullscreen();
|
||||
else this.$refs.container.requestFullscreen();
|
||||
e.preventDefault();
|
||||
break;
|
||||
case "KeyM":
|
||||
videoEl.muted = !videoEl.muted;
|
||||
e.preventDefault();
|
||||
break;
|
||||
case "Space":
|
||||
if (videoEl.paused) videoEl.play();
|
||||
else videoEl.pause();
|
||||
e.preventDefault();
|
||||
break;
|
||||
case "ArrowUp":
|
||||
videoEl.volume = Math.min(videoEl.volume + 0.05, 1);
|
||||
e.preventDefault();
|
||||
break;
|
||||
case "ArrowDown":
|
||||
videoEl.volume = Math.max(videoEl.volume - 0.05, 0);
|
||||
e.preventDefault();
|
||||
break;
|
||||
case "ArrowLeft":
|
||||
videoEl.currentTime = Math.max(videoEl.currentTime - 5, 0);
|
||||
e.preventDefault();
|
||||
break;
|
||||
case "ArrowRight":
|
||||
videoEl.currentTime = videoEl.currentTime + 5;
|
||||
e.preventDefault();
|
||||
break;
|
||||
}
|
||||
},
|
||||
},
|
||||
onKeyPress(e) {
|
||||
if (
|
||||
document.activeElement.tagName === "INPUT" &&
|
||||
document.activeElement.type === "text"
|
||||
)
|
||||
return;
|
||||
const videoEl = this.$refs.videoEl;
|
||||
switch (e.code) {
|
||||
case "KeyF":
|
||||
if (document.fullscreenElement) document.exitFullscreen();
|
||||
else this.$refs.container.requestFullscreen();
|
||||
e.preventDefault();
|
||||
break;
|
||||
case "KeyM":
|
||||
videoEl.muted = !videoEl.muted;
|
||||
e.preventDefault();
|
||||
break;
|
||||
case "Space":
|
||||
if (videoEl.paused) videoEl.play();
|
||||
else videoEl.pause();
|
||||
e.preventDefault();
|
||||
break;
|
||||
case "ArrowUp":
|
||||
videoEl.volume = Math.min(videoEl.volume + 0.05, 1);
|
||||
e.preventDefault();
|
||||
break;
|
||||
case "ArrowDown":
|
||||
videoEl.volume = Math.max(videoEl.volume - 0.05, 0);
|
||||
e.preventDefault();
|
||||
break;
|
||||
case "ArrowLeft":
|
||||
videoEl.currentTime = Math.max(videoEl.currentTime - 5, 0);
|
||||
e.preventDefault();
|
||||
break;
|
||||
case "ArrowRight":
|
||||
videoEl.currentTime = videoEl.currentTime + 5;
|
||||
e.preventDefault();
|
||||
break;
|
||||
}
|
||||
mounted() {
|
||||
document.addEventListener("keydown", this.onKeyPress);
|
||||
},
|
||||
beforeUnmount() {
|
||||
document.removeEventListener("keydown", this.onKeyPress);
|
||||
if (this.player) {
|
||||
this.player.destroy();
|
||||
this.player = undefined;
|
||||
this.ui = undefined;
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
document.addEventListener("keydown", this.onKeyPress);
|
||||
},
|
||||
beforeUnmount() {
|
||||
document.removeEventListener("keydown", this.onKeyPress);
|
||||
if (this.player) {
|
||||
this.player.destroy();
|
||||
this.player = undefined;
|
||||
this.ui = undefined;
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -30,6 +30,10 @@
|
||||
<b>Skip Music: Non-Music Section</b>
|
||||
<br />
|
||||
<input class="uk-checkbox" v-model="skipMusicOffTopic" @change="onChange($event)" type="checkbox" />
|
||||
<br />
|
||||
<b>Autoplay Video</b>
|
||||
<br />
|
||||
<input class="uk-checkbox" v-model="autoPlayVideo" @change="onChange($event)" type="checkbox" />
|
||||
<h2>Instances List</h2>
|
||||
<table class="uk-table">
|
||||
<thead>
|
||||
@ -75,6 +79,7 @@ export default {
|
||||
skipInteraction: true,
|
||||
skipSelfPromo: true,
|
||||
skipMusicOffTopic: true,
|
||||
autoPlayVideo: true,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
@ -133,6 +138,9 @@ export default {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
this.autoPlayVideo =
|
||||
localStorage.getItem("playerAutoPlay") === null || localStorage.getItem("playerAutoPlay") === "true";
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -149,6 +157,8 @@ export default {
|
||||
if (this.skipSelfPromo) sponsorSelected.push("selfpromo");
|
||||
if (this.skipMusicOffTopic) sponsorSelected.push("music_offtopic");
|
||||
localStorage.setItem("selectedSkip", sponsorSelected);
|
||||
|
||||
localStorage.setItem("playerAutoPlay", this.autoPlayVideo);
|
||||
}
|
||||
},
|
||||
sslScore(url) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user