mirror of https://github.com/VueTubeApp/VueTube
split & fix progressbar, sb error checker
This commit is contained in:
parent
7e7e8d9e46
commit
96525a527a
|
@ -152,7 +152,12 @@
|
||||||
@fullscreen="(controls = $refs.player.paused), handleFullscreenChange()"
|
@fullscreen="(controls = $refs.player.paused), handleFullscreenChange()"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<!-- NOTE: breaks in fullscreen -->
|
<progressbar
|
||||||
|
v-if="$refs.player"
|
||||||
|
:video="$refs.player"
|
||||||
|
:fullscreen="isFullscreen"
|
||||||
|
:current-time="$refs.player.currentTime"
|
||||||
|
/>
|
||||||
<seekbar
|
<seekbar
|
||||||
v-if="$refs.player"
|
v-if="$refs.player"
|
||||||
v-show="!isFullscreen || controls"
|
v-show="!isFullscreen || controls"
|
||||||
|
@ -160,6 +165,7 @@
|
||||||
:video="$refs.player"
|
:video="$refs.player"
|
||||||
:sources="sources"
|
:sources="sources"
|
||||||
:controls="controls"
|
:controls="controls"
|
||||||
|
:current-time="$refs.player.currentTime"
|
||||||
@seeking="seeking = !seeking"
|
@seeking="seeking = !seeking"
|
||||||
/>
|
/>
|
||||||
<sponsorblock
|
<sponsorblock
|
||||||
|
@ -181,10 +187,12 @@ import captions from "~/components/Player/captions.vue";
|
||||||
import playpause from "~/components/Player/playpause.vue";
|
import playpause from "~/components/Player/playpause.vue";
|
||||||
import watchtime from "~/components/Player/watchtime.vue";
|
import watchtime from "~/components/Player/watchtime.vue";
|
||||||
import fullscreen from "~/components/Player/fullscreen.vue";
|
import fullscreen from "~/components/Player/fullscreen.vue";
|
||||||
|
import progressbar from "~/components/Player/progressbar.vue";
|
||||||
import sponsorblock from "~/components/Player/sponsorblock.vue";
|
import sponsorblock from "~/components/Player/sponsorblock.vue";
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
sponsorblock,
|
sponsorblock,
|
||||||
|
progressbar,
|
||||||
fullscreen,
|
fullscreen,
|
||||||
watchtime,
|
watchtime,
|
||||||
playpause,
|
playpause,
|
||||||
|
|
|
@ -0,0 +1,47 @@
|
||||||
|
<template>
|
||||||
|
<v-progress-linear
|
||||||
|
style="width: 100%; background: #ffffff22"
|
||||||
|
background-opacity="0.5"
|
||||||
|
background-color="primary"
|
||||||
|
:buffer-value="buffered"
|
||||||
|
:value="(currentTime / video.duration) * 100"
|
||||||
|
color="primary"
|
||||||
|
height="2"
|
||||||
|
:style="
|
||||||
|
fullscreen
|
||||||
|
? 'width: calc(100% - 2rem); left: 1rem; position: absolute; bottom: 3rem;'
|
||||||
|
: 'width: 100%'
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
video: {
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
fullscreen: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
currentTime: {
|
||||||
|
type: Number,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: () => ({
|
||||||
|
buffered: 0,
|
||||||
|
}),
|
||||||
|
mounted() {
|
||||||
|
this.video.addEventListener("loadeddata", (e) => {
|
||||||
|
if (this.video.readyState >= 3) {
|
||||||
|
this.video.addEventListener("progress", () => {
|
||||||
|
this.buffered =
|
||||||
|
(this.video.buffered.end(0) / this.video.duration) * 100;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
|
@ -7,22 +7,6 @@
|
||||||
style="display: none"
|
style="display: none"
|
||||||
:src="vidWrs"
|
:src="vidWrs"
|
||||||
/>
|
/>
|
||||||
<v-progress-linear
|
|
||||||
query
|
|
||||||
active
|
|
||||||
style="width: 100%; background: #ffffff22"
|
|
||||||
background-opacity="0.5"
|
|
||||||
background-color="white"
|
|
||||||
:buffer-value="buffered"
|
|
||||||
:value="percent"
|
|
||||||
color="primary"
|
|
||||||
height="3"
|
|
||||||
:style="
|
|
||||||
fullscreen
|
|
||||||
? 'width: calc(100% - 2rem); left: 1rem; position: absolute; bottom: 3rem;'
|
|
||||||
: 'width: 100%'
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<!-- Scrubber -->
|
<!-- Scrubber -->
|
||||||
<v-slider
|
<v-slider
|
||||||
id="scrubber"
|
id="scrubber"
|
||||||
|
@ -31,7 +15,7 @@
|
||||||
dense
|
dense
|
||||||
track-color="transparent"
|
track-color="transparent"
|
||||||
:class="!controls && !fullscreen && !scrubbing ? 'invisible' : ''"
|
:class="!controls && !fullscreen && !scrubbing ? 'invisible' : ''"
|
||||||
style="position: absolute; z-index: 2"
|
style="position: absolute; z-index: 3"
|
||||||
:style="
|
:style="
|
||||||
fullscreen
|
fullscreen
|
||||||
? 'width: calc(100% - 2rem); left: 1rem; bottom: 3rem;'
|
? 'width: calc(100% - 2rem); left: 1rem; bottom: 3rem;'
|
||||||
|
@ -70,43 +54,64 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props: ["sources", "video", "controls", "fullscreen"],
|
props: {
|
||||||
|
video: {
|
||||||
data() {
|
type: Object,
|
||||||
return {
|
required: true,
|
||||||
scrubbing: false,
|
|
||||||
percent: 0,
|
|
||||||
progress: 0,
|
|
||||||
buffered: 0,
|
|
||||||
duration: 0,
|
|
||||||
vidSrc: "",
|
|
||||||
vidWrs: "",
|
|
||||||
};
|
|
||||||
},
|
},
|
||||||
|
controls: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
fullscreen: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
sources: {
|
||||||
|
type: Array,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
currentTime: {
|
||||||
|
type: Number,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: () => ({
|
||||||
|
scrubbing: false,
|
||||||
|
progress: 0,
|
||||||
|
duration: 0,
|
||||||
|
vidWrs: "",
|
||||||
|
}),
|
||||||
mounted() {
|
mounted() {
|
||||||
console.log("sources", this.sources);
|
// this.vidWrs = this.sources[1].url;
|
||||||
this.vidSrc = this.sources[this.sources.length - 1].url;
|
this.video.addEventListener("loadeddata", (e) => {
|
||||||
this.vidWrs = this.sources[1].url;
|
if (this.video.readyState >= 3) {
|
||||||
let vid = this.video;
|
this.video.addEventListener("timeupdate", () => {
|
||||||
vid.addEventListener("loadeddata", (e) => {
|
this.duration = this.video.duration;
|
||||||
// console.log("%c loadeddata", "color: #00ff00");
|
if (!this.scrubbing) this.progress = this.currentTime;
|
||||||
console.log(e);
|
});
|
||||||
//Video should now be loaded but we can add a second check
|
|
||||||
if (vid.readyState >= 3) {
|
|
||||||
vid.ontimeupdate = () => {
|
|
||||||
// console.log("%c timeupdate", "color: #aaaaff");
|
|
||||||
this.duration = vid.duration;
|
|
||||||
if (!this.scrubbing) this.progress = vid.currentTime;
|
|
||||||
this.percent = (vid.currentTime / vid.duration) * 100;
|
|
||||||
};
|
|
||||||
vid.onprogress = () => {
|
|
||||||
// console.log("%c progress", "color: #ff00ff");
|
|
||||||
this.buffered = (vid.buffered.end(0) / vid.duration) * 100;
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
seek(e) {
|
||||||
|
// console.log(`scrubbing ${e}`);
|
||||||
|
let vid = this.$refs.playerfake;
|
||||||
|
let canvas = this.$refs.preview;
|
||||||
|
this.$refs.playerfake.currentTime = e;
|
||||||
|
canvas
|
||||||
|
.getContext("2d")
|
||||||
|
.drawImage(
|
||||||
|
vid,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
this.video.clientWidth / 3,
|
||||||
|
this.video.clientHeight / 3
|
||||||
|
);
|
||||||
|
},
|
||||||
|
scrub(e) {
|
||||||
|
this.video.currentTime = e;
|
||||||
|
},
|
||||||
// TODO: better scrubbing preview
|
// TODO: better scrubbing preview
|
||||||
loadVideoFrames() {
|
loadVideoFrames() {
|
||||||
// Exit loop if desired number of frames have been extracted
|
// Exit loop if desired number of frames have been extracted
|
||||||
|
@ -228,24 +233,6 @@ export default {
|
||||||
console.log(this.frames);
|
console.log(this.frames);
|
||||||
},
|
},
|
||||||
// TODO: scrubbing preview end
|
// TODO: scrubbing preview end
|
||||||
seek(e) {
|
|
||||||
// console.log(`scrubbing ${e}`);
|
|
||||||
let vid = this.$refs.playerfake;
|
|
||||||
let canvas = this.$refs.preview;
|
|
||||||
this.$refs.playerfake.currentTime = e;
|
|
||||||
canvas
|
|
||||||
.getContext("2d")
|
|
||||||
.drawImage(
|
|
||||||
vid,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
this.video.clientWidth / 3,
|
|
||||||
this.video.clientHeight / 3
|
|
||||||
);
|
|
||||||
},
|
|
||||||
scrub(e) {
|
|
||||||
this.video.currentTime = e;
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,5 +1,22 @@
|
||||||
<template>
|
<template>
|
||||||
<div style="display: none"></div>
|
<div>
|
||||||
|
<!-- <v-progress-linear
|
||||||
|
v-for="segment in segments"
|
||||||
|
:key="segment.UUID"
|
||||||
|
background-opacity="0.5"
|
||||||
|
style="width: 100%; background: #ffffff22"
|
||||||
|
:background-color="segment.category"
|
||||||
|
:buffer-value="(segment.segments[1] / video.duration) * 100"
|
||||||
|
:value="(segment.segments[0] / video.duration) * 100"
|
||||||
|
color="red"
|
||||||
|
height="2"
|
||||||
|
:style="
|
||||||
|
fullscreen
|
||||||
|
? 'width: calc(100% - 2rem); left: 1rem; position: absolute; bottom: 3rem;'
|
||||||
|
: 'width: 100%; left: 0; position: absolute; bottom: 0;'
|
||||||
|
"
|
||||||
|
/> -->
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -14,6 +31,9 @@ export default {
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
data: () => ({
|
||||||
|
segments: [],
|
||||||
|
}),
|
||||||
mounted() {
|
mounted() {
|
||||||
let vid = this.video;
|
let vid = this.video;
|
||||||
let id = this.videoid;
|
let id = this.videoid;
|
||||||
|
@ -21,22 +41,35 @@ export default {
|
||||||
vid.addEventListener("loadeddata", (e) => {
|
vid.addEventListener("loadeddata", (e) => {
|
||||||
if (vid.readyState >= 3) {
|
if (vid.readyState >= 3) {
|
||||||
this.$youtube.getSponsorBlock(id, (data) => {
|
this.$youtube.getSponsorBlock(id, (data) => {
|
||||||
console.log(data);
|
console.log("sbreturn", data);
|
||||||
|
if (Array.isArray(data)) {
|
||||||
|
this.segments = data;
|
||||||
|
|
||||||
// iterate over data.segments array
|
// iterate over data.segments array
|
||||||
vid.ontimeupdate = () => {
|
vid.addEventListener("timeupdate", () => {
|
||||||
data.forEach(function(sponsor) {
|
console.log("sb check", data);
|
||||||
|
data.forEach((sponsor) => {
|
||||||
let vidTime = vid.currentTime;
|
let vidTime = vid.currentTime;
|
||||||
|
|
||||||
if (vidTime >= sponsor.segment[0] && vidTime <= sponsor.segment[1]) {
|
if (
|
||||||
|
vidTime >= sponsor.segment[0] &&
|
||||||
|
vidTime <= sponsor.segment[1]
|
||||||
|
) {
|
||||||
console.log("Skipping the sponsor");
|
console.log("Skipping the sponsor");
|
||||||
vid.currentTime = sponsor.segment[1];
|
vid.currentTime = sponsor.segment[1];
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.sponsor {
|
||||||
|
color: green;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
@ -228,6 +228,7 @@
|
||||||
hide-overlay
|
hide-overlay
|
||||||
persistent
|
persistent
|
||||||
no-click-animation
|
no-click-animation
|
||||||
|
style="z-index: 2 !important"
|
||||||
attach="#content-container"
|
attach="#content-container"
|
||||||
>
|
>
|
||||||
<mainCommentRenderer
|
<mainCommentRenderer
|
||||||
|
|
Loading…
Reference in New Issue