mirror of https://github.com/VueTubeApp/VueTube
srub-a-dub-dub
This commit is contained in:
parent
cc7ba1908f
commit
a7c862f3c7
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
|
class="d-flex flex-column"
|
||||||
style="position: relative"
|
style="position: relative"
|
||||||
class="overflow-hidden"
|
|
||||||
:style="{
|
:style="{
|
||||||
borderRadius: $store.state.tweaks.roundWatch
|
borderRadius: $store.state.tweaks.roundWatch
|
||||||
? `${$store.state.tweaks.roundTweak / 3}rem`
|
? `${$store.state.tweaks.roundTweak / 3}rem`
|
||||||
|
@ -10,23 +10,30 @@
|
||||||
>
|
>
|
||||||
<video
|
<video
|
||||||
ref="player"
|
ref="player"
|
||||||
autoplay
|
|
||||||
controls
|
controls
|
||||||
|
autoplay
|
||||||
width="100%"
|
width="100%"
|
||||||
:src="vidSrc"
|
:src="vidSrc"
|
||||||
@webkitfullscreenchange="handleFullscreenChange"
|
@webkitfullscreenchange="handleFullscreenChange"
|
||||||
/>
|
/>
|
||||||
|
<video
|
||||||
<!-- <div
|
ref="playerfake"
|
||||||
v-if="$refs.player"
|
autoplay
|
||||||
class="background overflow-hidden"
|
volume="0"
|
||||||
:style="{
|
style="display: none"
|
||||||
borderRadius: $store.state.tweaks.roundWatch
|
:src="vidSrc"
|
||||||
? `${$store.state.tweaks.roundTweak}rem !important`
|
/>
|
||||||
: '0',
|
<v-progress-linear
|
||||||
}"
|
query
|
||||||
style="width: 100%; position: relative; height: 100%"
|
active
|
||||||
> -->
|
style="width: 100%"
|
||||||
|
background-color="primary"
|
||||||
|
background-opacity="0.5"
|
||||||
|
:buffer-value="buffered"
|
||||||
|
:value="percent"
|
||||||
|
color="primary"
|
||||||
|
height="4"
|
||||||
|
/>
|
||||||
|
|
||||||
<!-- <v-btn
|
<!-- <v-btn
|
||||||
text
|
text
|
||||||
|
@ -63,9 +70,9 @@
|
||||||
to="home"
|
to="home"
|
||||||
>
|
>
|
||||||
<v-icon>mdi-close</v-icon>
|
<v-icon>mdi-close</v-icon>
|
||||||
</v-btn>
|
</v-btn> -->
|
||||||
|
|
||||||
<v-btn
|
<!-- <v-btn
|
||||||
v-if="$refs.player"
|
v-if="$refs.player"
|
||||||
fab
|
fab
|
||||||
text
|
text
|
||||||
|
@ -85,9 +92,9 @@
|
||||||
size="5rem"
|
size="5rem"
|
||||||
v-text="$refs.player.paused ? 'mdi-play' : 'mdi-pause'"
|
v-text="$refs.player.paused ? 'mdi-play' : 'mdi-pause'"
|
||||||
/>
|
/>
|
||||||
</v-btn>
|
</v-btn> -->
|
||||||
|
|
||||||
<div
|
<!-- <div
|
||||||
v-if="$vuetify"
|
v-if="$vuetify"
|
||||||
class="debug px-4 rounded-xl"
|
class="debug px-4 rounded-xl"
|
||||||
style="position: absolute; bottom: 2rem; left: 1rem"
|
style="position: absolute; bottom: 2rem; left: 1rem"
|
||||||
|
@ -119,25 +126,40 @@
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
1X
|
1X
|
||||||
</v-btn>
|
</v-btn> -->
|
||||||
-->
|
<v-slider
|
||||||
<v-progress-linear
|
v-if="$refs.player"
|
||||||
active
|
dense
|
||||||
style="position: absolute; bottom: 0rem; left: 0; width: 100%"
|
height="4"
|
||||||
background-color="primary"
|
hide-details
|
||||||
background-opacity="0.5"
|
style="
|
||||||
:buffer-value="buffered"
|
position: absolute;
|
||||||
color="primary"
|
bottom: 0;
|
||||||
height="3"
|
left: 0;
|
||||||
query
|
width: 100%;
|
||||||
:value="percent"
|
z-index: 69420;
|
||||||
/>
|
"
|
||||||
<!-- </div> -->
|
|
||||||
<!-- <v-slider
|
|
||||||
style="position: absolute; bottom: -1rem; left: 0; width: 100%"
|
|
||||||
:value="progress"
|
:value="progress"
|
||||||
:max="duration"
|
:max="duration"
|
||||||
/> -->
|
@start="scrubbing = true"
|
||||||
|
@end="scrubbing = false"
|
||||||
|
@input="seek($event)"
|
||||||
|
@change="scrub($event)"
|
||||||
|
>
|
||||||
|
<template #thumb-label="{ value }">
|
||||||
|
<canvas
|
||||||
|
ref="preview"
|
||||||
|
class="rounded-lg mb-8"
|
||||||
|
style="
|
||||||
|
border: 4px solid var(--v-primary-base);
|
||||||
|
margin-top: -20px !important;
|
||||||
|
top: -20px !important;
|
||||||
|
"
|
||||||
|
:width="$refs.player.clientWidth / 4"
|
||||||
|
:height="$refs.player.clientHeight / 4"
|
||||||
|
></canvas>
|
||||||
|
</template>
|
||||||
|
</v-slider>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -146,6 +168,7 @@ export default {
|
||||||
props: ["vidSrc"],
|
props: ["vidSrc"],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
scrubbing: false,
|
||||||
percent: 0,
|
percent: 0,
|
||||||
progress: 0,
|
progress: 0,
|
||||||
buffered: 0,
|
buffered: 0,
|
||||||
|
@ -157,22 +180,44 @@ export default {
|
||||||
mounted() {
|
mounted() {
|
||||||
let vid = this.$refs.player;
|
let vid = this.$refs.player;
|
||||||
vid.addEventListener("loadeddata", (e) => {
|
vid.addEventListener("loadeddata", (e) => {
|
||||||
|
console.log("%c loadeddata", "color: #00ff00");
|
||||||
|
console.log(e);
|
||||||
//Video should now be loaded but we can add a second check
|
//Video should now be loaded but we can add a second check
|
||||||
if (vid.readyState >= 3) {
|
if (vid.readyState >= 3) {
|
||||||
vid.ontimeupdate = () => {
|
vid.ontimeupdate = () => {
|
||||||
|
console.log("%c timeupdate", "color: #aaaaff");
|
||||||
this.duration = vid.duration;
|
this.duration = vid.duration;
|
||||||
this.progress = vid.currentTime;
|
if (!this.scrubbing) this.progress = vid.currentTime;
|
||||||
this.percent = (vid.currentTime / vid.duration) * 100;
|
this.percent = (vid.currentTime / vid.duration) * 100;
|
||||||
this.watched = this.$vuetube.humanTime(vid.currentTime);
|
this.watched = this.$vuetube.humanTime(vid.currentTime);
|
||||||
this.total = this.$vuetube.humanTime(vid.duration);
|
this.total = this.$vuetube.humanTime(vid.duration);
|
||||||
};
|
};
|
||||||
vid.addEventListener("progress", () => {
|
vid.onprogress = () => {
|
||||||
|
console.log("%c progress", "color: #ff00ff");
|
||||||
this.buffered = (vid.buffered.end(0) / vid.duration) * 100;
|
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.$refs.player.clientWidth / 4,
|
||||||
|
this.$refs.player.clientHeight / 4
|
||||||
|
);
|
||||||
|
},
|
||||||
|
scrub(e) {
|
||||||
|
this.$refs.player.currentTime = e;
|
||||||
|
},
|
||||||
handleFullscreenChange() {
|
handleFullscreenChange() {
|
||||||
if (document.fullscreenElement === this.$refs.player) {
|
if (document.fullscreenElement === this.$refs.player) {
|
||||||
this.$vuetube.statusBar.hide();
|
this.$vuetube.statusBar.hide();
|
||||||
|
|
Loading…
Reference in New Issue