mirror of https://github.com/VueTubeApp/VueTube
Merge branch 'main' of https://github.com/VueTubeApp/VueTube
This commit is contained in:
Kenny
commit
4ebd13874d
|
|
@ -106,7 +106,7 @@ jobs:
|
|||
CODE_SIGNING_ALLOWED="NO"
|
||||
CODE_SIGN_ENTITLEMENTS=""
|
||||
- name: Make IPA
|
||||
run: mkdir Payload && mv ~/Library/Developer/Xcode/DerivedData/App-*/Build/Products/Debug-maccatalyst/App.app/ Payload && zip -r Payload.zip Payload && mv Payload.zip VueTube.ipa
|
||||
run: mkdir Payload && mv ~/Library/Developer/Xcode/DerivedData/App-*/Build/Products/Debug-iphoneos/App.app/ Payload && zip -r Payload.zip Payload && mv Payload.zip VueTube.ipa
|
||||
|
||||
- name: Upload artifacts
|
||||
uses: actions/upload-artifact@v2
|
||||
|
|
|
|||
|
|
@ -1,11 +1,5 @@
|
|||
<template>
|
||||
<v-btn
|
||||
fab
|
||||
text
|
||||
small
|
||||
disabled
|
||||
style="position: absolute; top: 0.25rem; right: 3rem"
|
||||
>
|
||||
<v-btn fab text small disabled>
|
||||
<v-icon>mdi-closed-caption-outline</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,6 @@
|
|||
<template>
|
||||
<!-- TODO: change /home to $router.goBack() or $router.go(-1) -->
|
||||
<v-btn
|
||||
fab
|
||||
text
|
||||
small
|
||||
style="position: absolute; top: 0.25rem; right: 0.25rem"
|
||||
to="/home"
|
||||
color="white"
|
||||
>
|
||||
<!-- // TODO: change /home to $router.goBack() or $router.go(-1) -->
|
||||
<v-btn fab text small to="/home" color="white">
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,5 @@
|
|||
<template>
|
||||
<v-btn
|
||||
fab
|
||||
text
|
||||
small
|
||||
color="white"
|
||||
style="position: absolute; right: 0.25rem"
|
||||
:style="fullscreen ? 'bottom: 3.5rem' : 'bottom: 0.25rem'"
|
||||
@click.stop="$emit('fullscreen')"
|
||||
>
|
||||
<v-btn fab text small color="white" @click.stop="$emit('fullscreen')">
|
||||
<v-icon size="1.25rem">{{
|
||||
fullscreen ? "mdi-fullscreen-exit" : "mdi-fullscreen"
|
||||
}}</v-icon>
|
||||
|
|
|
|||
|
|
@ -8,70 +8,89 @@
|
|||
}"
|
||||
class="d-flex flex-column"
|
||||
style="position: relative"
|
||||
:style="{
|
||||
borderRadius: $store.state.tweaks.roundWatch
|
||||
? `${$store.state.tweaks.roundTweak / 3}rem`
|
||||
: '0',
|
||||
}"
|
||||
@click="controls = !controls"
|
||||
>
|
||||
<video
|
||||
ref="player"
|
||||
autoplay
|
||||
width="100%"
|
||||
:height="isFullscreen ? '100%' : 'auto'"
|
||||
:src="vidSrc"
|
||||
:height="isFullscreen ? '100%' : 'auto'"
|
||||
style="transition: filter 0.15s ease-in-out"
|
||||
:class="controls || seeking ? 'dim' : ''"
|
||||
:style="contain ? 'object-fit: contain;' : 'object-fit: cover;'"
|
||||
:class="controls || seeking || skipping ? 'dim' : ''"
|
||||
:style="{
|
||||
objectFit: contain ? 'contain' : 'cover',
|
||||
borderRadius:
|
||||
$store.state.tweaks.roundWatch && !isFullscreen
|
||||
? `
|
||||
${$store.state.tweaks.roundTweak / 3}rem
|
||||
${$store.state.tweaks.roundTweak / 3}rem
|
||||
${$store.state.tweaks.roundTweak / 12}rem
|
||||
${$store.state.tweaks.roundTweak / 12}rem !important`
|
||||
: '0',
|
||||
}"
|
||||
poster="https://media.discordapp.net/attachments/970793575153561640/974728851441729556/bam.png"
|
||||
@click="controlsHandler()"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-if="isFullscreen && controls"
|
||||
style="
|
||||
position: absolute;
|
||||
width: calc(100% - 12rem);
|
||||
left: 3rem;
|
||||
top: 0.5rem;
|
||||
"
|
||||
>
|
||||
<h4>{{ video.title }}</h4>
|
||||
<div style="color: #aaa; font-size: 0.75rem">{{ video.channelName }}</div>
|
||||
</div>
|
||||
<!-- // NOTE: replace poster URL with "none" -->
|
||||
|
||||
<!-- // TODO: merge the bottom 2 into 1 reusable component -->
|
||||
<v-btn
|
||||
text
|
||||
tile
|
||||
color="white"
|
||||
:class="skipping == -10 ? '' : 'invisible'"
|
||||
style="
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
transition: opacity 0.15s;
|
||||
border-radius: 0 100vh 100vh 0;
|
||||
text-transform: none;
|
||||
font-size: 0.5rem;
|
||||
"
|
||||
@dblclick.stop="$refs.player.currentTime -= 10"
|
||||
@click="controlsHandler()"
|
||||
@dblclick="skipHandler(-10)"
|
||||
>
|
||||
<v-icon>mdi-rewind</v-icon>
|
||||
<!-- {{ skipping }} seconds -->
|
||||
</v-btn>
|
||||
|
||||
<v-btn
|
||||
text
|
||||
tile
|
||||
color="white"
|
||||
:class="skipping == 10 ? '' : 'invisible'"
|
||||
style="
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
transition: opacity 0.15s;
|
||||
border-radius: 100vh 0 0 100vh;
|
||||
text-transform: none;
|
||||
font-size: 0.5rem;
|
||||
"
|
||||
@dblclick.stop="$refs.player.currentTime += 10"
|
||||
@click="controlsHandler()"
|
||||
@dblclick="skipHandler(10)"
|
||||
>
|
||||
<v-icon>mdi-fast-forward</v-icon>
|
||||
<!-- {{ skipping }} seconds] -->
|
||||
</v-btn>
|
||||
|
||||
<div
|
||||
v-if="seeking"
|
||||
class="d-flex justify-center"
|
||||
style="width: 100%; top: 0.5rem; position: absolute; font-size: 0.66rem"
|
||||
>
|
||||
<v-icon small class="pr-2">mdi-rewind</v-icon>
|
||||
Doubletap left or right to skip 10 seconds
|
||||
<v-icon small class="pl-2">mdi-fast-forward</v-icon>
|
||||
</div>
|
||||
|
||||
<!-- controls container -->
|
||||
<div
|
||||
style="transition: opacity 0.15s ease-in-out"
|
||||
:style="
|
||||
|
|
@ -80,201 +99,172 @@
|
|||
: 'opacity: 0; pointer-events: none'
|
||||
"
|
||||
>
|
||||
<minimize />
|
||||
<loop />
|
||||
<captions />
|
||||
<close />
|
||||
<!-- top controls row -->
|
||||
<div
|
||||
style="position: absolute; width: 100%; top: 0.25rem"
|
||||
class="d-flex justify-center px-2"
|
||||
>
|
||||
<minimize />
|
||||
<div v-if="isFullscreen" class="pt-2" @click.self="controlsHandler()">
|
||||
<h4>{{ video.title }}</h4>
|
||||
<div style="color: #aaa; font-size: 0.75rem">
|
||||
{{ video.channelName }}
|
||||
</div>
|
||||
</div>
|
||||
<v-spacer />
|
||||
<captions />
|
||||
<loop
|
||||
v-if="$refs.player"
|
||||
class="mx-2"
|
||||
:loop="$refs.player.loop"
|
||||
@loop="$refs.player.loop = !$refs.player.loop"
|
||||
/>
|
||||
<close />
|
||||
</div>
|
||||
<!-- top controls row end -->
|
||||
|
||||
<v-btn
|
||||
fab
|
||||
text
|
||||
small
|
||||
<!-- center controls row -->
|
||||
<div
|
||||
class="d-flex justify-center align-center"
|
||||
style="
|
||||
transform: translate(-50%, -50%);
|
||||
position: absolute;
|
||||
top: calc(50% - 1.25rem);
|
||||
left: calc(50% - 10rem);
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
"
|
||||
color="white"
|
||||
@click.stop="$refs.player.currentTime -= 5"
|
||||
>
|
||||
<v-icon size="1rem">mdi-rewind-5</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
fab
|
||||
text
|
||||
style="
|
||||
position: absolute;
|
||||
top: calc(50% - 1.75rem);
|
||||
left: calc(50% - 6.5rem);
|
||||
"
|
||||
color="white"
|
||||
disabled
|
||||
@click.stop=""
|
||||
>
|
||||
<v-icon size="2rem">mdi-skip-previous</v-icon>
|
||||
</v-btn>
|
||||
<playpause
|
||||
v-if="$refs.player"
|
||||
:video="$refs.player"
|
||||
@close="controls = false"
|
||||
/>
|
||||
<v-btn
|
||||
fab
|
||||
text
|
||||
style="
|
||||
position: absolute;
|
||||
top: calc(50% - 1.75rem);
|
||||
left: calc(50% + 3rem);
|
||||
"
|
||||
color="white"
|
||||
disabled
|
||||
@click.stop=""
|
||||
>
|
||||
<v-icon size="2rem">mdi-skip-next</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
fab
|
||||
text
|
||||
small
|
||||
style="
|
||||
position: absolute;
|
||||
top: calc(50% - 1.25rem);
|
||||
left: calc(50% + 7rem);
|
||||
"
|
||||
color="white"
|
||||
@click.stop="$refs.player.currentTime += 5"
|
||||
>
|
||||
<v-icon size="1rem">mdi-fast-forward-5</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
fab
|
||||
text
|
||||
small
|
||||
color="white"
|
||||
@click.stop="$refs.player.currentTime -= 5"
|
||||
>
|
||||
<v-icon size="1rem">mdi-rewind-5</v-icon>
|
||||
</v-btn>
|
||||
<v-btn fab text color="white" class="px-4" disabled>
|
||||
<v-icon size="2rem">mdi-skip-previous</v-icon>
|
||||
</v-btn>
|
||||
<playpause
|
||||
v-if="$refs.player"
|
||||
:video="$refs.player"
|
||||
@play="$refs.player.play()"
|
||||
@pause="$refs.player.pause()"
|
||||
/>
|
||||
<v-btn fab text color="white" class="px-4" disabled>
|
||||
<v-icon size="2rem">mdi-skip-next</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
fab
|
||||
text
|
||||
small
|
||||
color="white"
|
||||
@click.stop="$refs.player.currentTime += 5"
|
||||
>
|
||||
<v-icon size="1rem">mdi-fast-forward-5</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
<!-- center controls row end -->
|
||||
|
||||
<watchtime
|
||||
v-if="$refs.player"
|
||||
:video="$refs.player"
|
||||
:fullscreen="isFullscreen"
|
||||
/>
|
||||
<v-btn
|
||||
v-if="isFullscreen"
|
||||
fab
|
||||
text
|
||||
small
|
||||
outlined
|
||||
style="position: absolute; bottom: 0.25rem; left: 1rem"
|
||||
color="white"
|
||||
disabled
|
||||
@click.stop=""
|
||||
<!-- time & fullscreen row -->
|
||||
<div
|
||||
:style="isFullscreen ? 'bottom: 4.25rem' : 'bottom: 0.5rem'"
|
||||
class="d-flex justify-between align-center pl-4 pr-2"
|
||||
style="position: absolute; width: 100%"
|
||||
@click.self="controlsHandler()"
|
||||
>
|
||||
<v-icon>mdi-thumb-up-outline</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
v-if="isFullscreen"
|
||||
fab
|
||||
text
|
||||
small
|
||||
outlined
|
||||
style="position: absolute; bottom: 0.25rem; left: 4rem"
|
||||
color="white"
|
||||
disabled
|
||||
@click.stop=""
|
||||
>
|
||||
<v-icon>mdi-thumb-down-outline</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
v-if="isFullscreen"
|
||||
fab
|
||||
text
|
||||
small
|
||||
outlined
|
||||
style="position: absolute; bottom: 0.25rem; left: 7rem"
|
||||
color="white"
|
||||
disabled
|
||||
@click.stop=""
|
||||
>
|
||||
<v-icon>mdi-share-outline</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
v-if="isFullscreen"
|
||||
fab
|
||||
text
|
||||
small
|
||||
outlined
|
||||
style="position: absolute; bottom: 0.25rem; left: 10rem"
|
||||
color="white"
|
||||
disabled
|
||||
@click.stop=""
|
||||
>
|
||||
<v-icon>mdi-plus-box-multiple-outline</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
v-if="isFullscreen"
|
||||
fab
|
||||
text
|
||||
small
|
||||
outlined
|
||||
style="position: absolute; bottom: 0.25rem; left: 13rem"
|
||||
color="white"
|
||||
disabled
|
||||
@click.stop=""
|
||||
>
|
||||
<v-icon>mdi-comment-text-outline</v-icon>
|
||||
</v-btn>
|
||||
<watchtime
|
||||
v-if="$refs.player"
|
||||
:current-time="$refs.player.currentTime"
|
||||
:duration="$refs.player.duration"
|
||||
/>
|
||||
<v-spacer />
|
||||
<fullscreen
|
||||
style="z-index: 2"
|
||||
:fullscreen="isFullscreen"
|
||||
@fullscreen="controlsHandler(), fullscreenHandler()"
|
||||
/>
|
||||
</div>
|
||||
<!-- time & fullscreen row end -->
|
||||
|
||||
<v-btn
|
||||
v-if="isFullscreen"
|
||||
fab
|
||||
text
|
||||
small
|
||||
style="position: absolute; bottom: 0.25rem; right: 0.25rem"
|
||||
color="white"
|
||||
disabled
|
||||
@click.stop=""
|
||||
<!-- bottom controls row -->
|
||||
<div
|
||||
style="position: absolute; width: 100%; bottom: 0.5rem"
|
||||
class="d-flex justify-between align-center px-2"
|
||||
@click.self="controlsHandler()"
|
||||
>
|
||||
<v-icon>mdi-cards-outline</v-icon>
|
||||
</v-btn>
|
||||
<!-- // TODO: merge the bottom 2 into 1 reusable component -->
|
||||
<quality v-if="$refs.player" :video="$refs.player" :sources="sources" />
|
||||
<speed v-if="$refs.player" :video="$refs.player" />
|
||||
<fullscreen
|
||||
:fullscreen="isFullscreen"
|
||||
@fullscreen="(controls = $refs.player.paused), handleFullscreenChange()"
|
||||
/>
|
||||
<v-btn
|
||||
v-if="isFullscreen"
|
||||
fab
|
||||
text
|
||||
small
|
||||
style="position: absolute; bottom: 0.25rem; right: 0.25rem"
|
||||
color="white"
|
||||
disabled
|
||||
@click.stop=""
|
||||
>
|
||||
<v-icon>mdi-cards-outline</v-icon>
|
||||
</v-btn>
|
||||
<div v-if="isFullscreen">
|
||||
<v-btn fab text small color="white" class="mr-2" disabled>
|
||||
<v-icon>mdi-thumb-up-outline</v-icon>
|
||||
</v-btn>
|
||||
<v-btn fab text small color="white" class="mr-2" disabled>
|
||||
<v-icon>mdi-thumb-down-outline</v-icon>
|
||||
</v-btn>
|
||||
<v-btn fab text small color="white" class="mr-2" disabled>
|
||||
<v-icon>mdi-share-outline</v-icon>
|
||||
</v-btn>
|
||||
<v-btn fab text small color="white" class="mr-2" disabled>
|
||||
<v-icon>mdi-plus-box-multiple-outline</v-icon>
|
||||
</v-btn>
|
||||
<v-btn fab text small color="white" class="mr-2" disabled>
|
||||
<v-icon>mdi-comment-text-outline</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
<v-spacer />
|
||||
<!-- // TODO: merge the bottom 2 into 1 reusable component -->
|
||||
<quality
|
||||
v-if="$refs.player"
|
||||
:sources="sources"
|
||||
:current-source="$refs.player"
|
||||
@quality="qualityHandler($event)"
|
||||
/>
|
||||
<speed
|
||||
v-if="$refs.player"
|
||||
class="mx-2"
|
||||
:current-speed="$refs.player.playbackRate"
|
||||
@speed="$refs.player.playbackRate = $event"
|
||||
/>
|
||||
<v-btn v-if="isFullscreen" fab text small disabled @click.stop="">
|
||||
<v-icon>mdi-cards-outline</v-icon>
|
||||
</v-btn>
|
||||
<!-- placeholder for moving fullscreen button above -->
|
||||
<v-btn v-else fab text small disabled> </v-btn>
|
||||
</div>
|
||||
<!-- bottom controls row -->
|
||||
</div>
|
||||
<!-- controls container end -->
|
||||
|
||||
<progressbar
|
||||
v-if="$refs.player"
|
||||
:video="$refs.player"
|
||||
:seeking="seeking"
|
||||
:controls="controls"
|
||||
:fullscreen="isFullscreen"
|
||||
:current-time="$refs.player.currentTime"
|
||||
:duration="$refs.player.duration"
|
||||
:fullscreen="isFullscreen"
|
||||
:controls="controls"
|
||||
:buffered="buffered"
|
||||
:seeking="seeking"
|
||||
/>
|
||||
|
||||
<sponsorblock
|
||||
v-if="$refs.player && blocks.length > 0"
|
||||
:duration="$refs.player.duration"
|
||||
:fullscreen="isFullscreen"
|
||||
:controls="controls"
|
||||
:seeking="seeking"
|
||||
:blocks="blocks"
|
||||
/>
|
||||
|
||||
<seekbar
|
||||
v-if="$refs.player"
|
||||
v-show="!isFullscreen || controls"
|
||||
:duration="$refs.player.duration"
|
||||
:fullscreen="isFullscreen"
|
||||
:current-time="progress"
|
||||
:video="$refs.player"
|
||||
:controls="controls"
|
||||
:sources="sources"
|
||||
:controls="controls"
|
||||
:current-time="$refs.player.currentTime"
|
||||
@seeking="seeking = !seeking"
|
||||
/>
|
||||
<sponsorblock
|
||||
v-if="$refs.player"
|
||||
:video="$refs.player"
|
||||
:seeking="seeking"
|
||||
:videoid="videoid"
|
||||
:controls="controls"
|
||||
:fullscreen="isFullscreen"
|
||||
@seeking="seeking = !seeking"
|
||||
@scrub="$refs.player.currentTime = $event"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -327,20 +317,91 @@ export default {
|
|||
controls: false,
|
||||
seeking: false,
|
||||
contain: true,
|
||||
skipping: 0,
|
||||
progress: 0,
|
||||
buffered: 0,
|
||||
watched: 0,
|
||||
blocks: [],
|
||||
vidSrc: "",
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
console.log("sources", this.sources);
|
||||
this.vidSrc = this.sources[this.sources.length - 1].url;
|
||||
let vid = this.$refs.player;
|
||||
|
||||
this.$youtube.getSponsorBlock(this.vidSrc, (data) => {
|
||||
console.log("sbreturn", data);
|
||||
if (Array.isArray(data)) {
|
||||
this.blocks = data;
|
||||
}
|
||||
});
|
||||
|
||||
vid.addEventListener("loadeddata", (e) => {
|
||||
// TODO: detect video loading state and send this.loading to play button :loading = loading here
|
||||
// console.log(e);
|
||||
if (vid.readyState >= 3) {
|
||||
vid.addEventListener("timeupdate", () => {
|
||||
if (!this.seeking) this.progress = vid.currentTime; // for seekbar
|
||||
|
||||
// console.log("sb check", this.blocks);
|
||||
// iterate over data.segments array
|
||||
// for sponsorblock
|
||||
if (this.blocks.length > 0)
|
||||
this.blocks.forEach((sponsor) => {
|
||||
let vidTime = vid.currentTime;
|
||||
|
||||
if (
|
||||
vidTime >= sponsor.segment[0] &&
|
||||
vidTime <= sponsor.segment[1]
|
||||
) {
|
||||
console.log("Skipping the sponsor");
|
||||
this.$youtube.showToast("Skipped sponsor");
|
||||
vid.currentTime = sponsor.segment[1] + 1;
|
||||
}
|
||||
});
|
||||
});
|
||||
// TODO: detect video loading state and send this.loading to play button :loading = loading here
|
||||
vid.addEventListener("progress", () => {
|
||||
this.buffered = (vid.buffered.end(0) / vid.duration) * 100;
|
||||
});
|
||||
}
|
||||
});
|
||||
// TODO: detect orientation change and enter fullscreen
|
||||
// TODO: detect video loading state and send this.loading to play button :loading = loading
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.isFullscreen) this.exitFullscreen();
|
||||
},
|
||||
methods: {
|
||||
handleFullscreenChange() {
|
||||
// TODO: make accumulative onclick after first dblclick (don't set timeout untill stopped clicking)
|
||||
skipHandler(time) {
|
||||
this.skipping = time;
|
||||
setTimeout(() => {
|
||||
this.skipping = false;
|
||||
}, 500);
|
||||
|
||||
this.$refs.player.currentTime += time;
|
||||
},
|
||||
controlsHandler() {
|
||||
if (!this.seeking)
|
||||
this.controls
|
||||
? (clearTimeout(this.controls), (this.controls = false))
|
||||
: setTimeout(() => {
|
||||
if (!this.skipping) {
|
||||
this.controls = setTimeout(() => {
|
||||
if (!this.seeking && !this.$refs.player.paused)
|
||||
this.controls = false;
|
||||
}, 2345);
|
||||
}
|
||||
}, 250);
|
||||
},
|
||||
qualityHandler(q) {
|
||||
console.log(q);
|
||||
let time = this.$refs.player.currentTime;
|
||||
this.$refs.player.src = q;
|
||||
this.$refs.player.currentTime = time;
|
||||
},
|
||||
fullscreenHandler() {
|
||||
if (document?.fullscreenElement === this.$refs.vidcontainer) {
|
||||
this.exitFullscreen();
|
||||
} else {
|
||||
|
|
@ -382,7 +443,7 @@ export default {
|
|||
|
||||
<style>
|
||||
.dim {
|
||||
filter: brightness(42%);
|
||||
filter: brightness(33%);
|
||||
}
|
||||
.invisible {
|
||||
opacity: 0;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,17 @@
|
|||
<template>
|
||||
<v-btn
|
||||
fab
|
||||
text
|
||||
small
|
||||
disabled
|
||||
style="position: absolute; top: 0.25rem; right: 6rem"
|
||||
>
|
||||
<v-icon>mdi-sync</v-icon>
|
||||
<v-btn fab text small @click="$emit('loop')">
|
||||
<v-icon>{{ loop ? "mdi-sync-circle" : "mdi-sync" }}</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
loop: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ["loop"],
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,5 @@
|
|||
<template>
|
||||
<v-btn
|
||||
fab
|
||||
text
|
||||
small
|
||||
disabled
|
||||
style="position: absolute; top: 0.25rem; left: 0.25rem"
|
||||
>
|
||||
<v-btn fab text small disabled>
|
||||
<v-icon>mdi-chevron-down</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -3,11 +3,9 @@
|
|||
fab
|
||||
text
|
||||
large
|
||||
style="position: absolute; top: calc(50% - 2rem); left: calc(50% - 2rem)"
|
||||
color="white"
|
||||
@click.stop="
|
||||
(paused = !video.paused),
|
||||
video.paused ? (video.play(), $emit('close')) : video.pause()
|
||||
@click="
|
||||
(paused = !video.paused), video.paused ? $emit('play') : $emit('pause')
|
||||
"
|
||||
>
|
||||
<v-icon size="3.5rem">
|
||||
|
|
@ -18,8 +16,13 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
props: ["video"],
|
||||
emits: ["close"],
|
||||
props: {
|
||||
video: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
emits: ["play", "pause"],
|
||||
data: () => ({
|
||||
paused: false,
|
||||
}),
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<template>
|
||||
<v-progress-linear
|
||||
style="
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
background: #ffffff22;
|
||||
transform: translateY(50%);
|
||||
|
|
@ -9,13 +8,13 @@
|
|||
background-opacity="0.5"
|
||||
background-color="white"
|
||||
:buffer-value="buffered"
|
||||
:value="(currentTime / video.duration) * 100"
|
||||
:value="(currentTime / duration) * 100"
|
||||
:class="!fullscreen || controls ? '' : 'invisible'"
|
||||
color="primary"
|
||||
:height="seeking ? 4 : 2"
|
||||
:style="
|
||||
fullscreen
|
||||
? 'width: calc(100% - 2rem); left: 1rem; bottom: 3.25rem;'
|
||||
? 'width: calc(100% - 2rem); left: 1rem; bottom: 3.5rem;'
|
||||
: 'width: 100%; left: 0; bottom: 1px;'
|
||||
"
|
||||
/>
|
||||
|
|
@ -23,7 +22,7 @@
|
|||
<script>
|
||||
export default {
|
||||
props: {
|
||||
video: {
|
||||
duration: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
|
|
@ -43,19 +42,10 @@ export default {
|
|||
type: Boolean,
|
||||
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;
|
||||
});
|
||||
}
|
||||
});
|
||||
buffered: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,20 +2,13 @@
|
|||
<div>
|
||||
<v-bottom-sheet
|
||||
v-model="sheet"
|
||||
style="z-index: 999"
|
||||
:attach="$parent.$refs.vidcontainer"
|
||||
scrollable
|
||||
>
|
||||
<template #activator="{ on, attrs }">
|
||||
<v-btn
|
||||
fab
|
||||
text
|
||||
small
|
||||
color="white"
|
||||
style="position: absolute; bottom: 0.25rem; right: 3rem"
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
>
|
||||
{{ sources.find((src) => src.url == video.src).qualityLabel }}
|
||||
<v-btn fab text small color="white" v-bind="attrs" v-on="on">
|
||||
{{ sources.find((src) => src.url == currentSource.src).qualityLabel }}
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-card class="background">
|
||||
|
|
@ -25,35 +18,32 @@
|
|||
}"
|
||||
>
|
||||
Quality for current video
|
||||
<v-btn
|
||||
fab
|
||||
text
|
||||
small
|
||||
color="white"
|
||||
style="position: absolute; right: 0.25rem"
|
||||
@click="sheet = false"
|
||||
>
|
||||
<v-spacer />
|
||||
<v-btn fab text small color="white" @click="sheet = false">
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</v-subheader>
|
||||
<v-divider />
|
||||
<v-card-text style="max-height: 50vh" class="pa-0">
|
||||
<v-card-text
|
||||
style="max-height: 50vh"
|
||||
class="pa-0 d-flex flex-column-reverse"
|
||||
>
|
||||
<v-list-item
|
||||
v-for="src in sources"
|
||||
:key="src"
|
||||
@click="(sheet = false), (video.src = src.url)"
|
||||
@click="(sheet = false), $emit('quality', src.url)"
|
||||
>
|
||||
<v-list-item-avatar>
|
||||
<v-icon
|
||||
:color="
|
||||
video.src === src.url
|
||||
currentSource.src === src.url
|
||||
? 'primary'
|
||||
: $vuetify.theme.dark
|
||||
? 'background lighten-2'
|
||||
: 'background darken-2'
|
||||
"
|
||||
v-text="
|
||||
video.src === src.url
|
||||
currentSource.src === src.url
|
||||
? 'mdi-radiobox-marked'
|
||||
: 'mdi-radiobox-blank'
|
||||
"
|
||||
|
|
@ -71,7 +61,17 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
props: ["video", "sources"],
|
||||
props: {
|
||||
currentSource: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
sources: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
emits: ["quality"],
|
||||
data: () => ({
|
||||
sheet: false,
|
||||
}),
|
||||
|
|
|
|||
|
|
@ -16,20 +16,20 @@
|
|||
color="transparent"
|
||||
thumb-color="primary"
|
||||
track-color="transparent"
|
||||
:class="!controls && !fullscreen && !scrubbing ? 'invisible' : ''"
|
||||
style="position: absolute; z-index: 4"
|
||||
:class="!controls && !fullscreen && !seeking ? 'invisible' : ''"
|
||||
style="position: absolute; z-index: 69420"
|
||||
:style="
|
||||
fullscreen
|
||||
? 'width: calc(100% - 2rem); left: 1rem; bottom: 51px;'
|
||||
: 'width: calc(100% - 0.8rem); left: 0.4rem; bottom: 0;'
|
||||
? 'width: calc(100% - 2rem); left: 1rem; bottom: 55px;'
|
||||
: 'width: calc(100% - 0.5rem); left: 0.25rem; bottom: 0;'
|
||||
"
|
||||
:thumb-size="0"
|
||||
:max="duration"
|
||||
:value="progress"
|
||||
@start="(scrubbing = true), $emit('seeking')"
|
||||
@end="(scrubbing = false), $emit('seeking')"
|
||||
@change="scrub($event)"
|
||||
@input="scrubbing ? seek($event) : null"
|
||||
:value="currentTime"
|
||||
@start="$emit('seeking')"
|
||||
@end="$emit('seeking')"
|
||||
@change="$emit('scrub', $event)"
|
||||
@input="seeking ? seek($event) : null"
|
||||
>
|
||||
<template #thumb-label="{ value }">
|
||||
<div style="transform: translateY(-50%)">
|
||||
|
|
@ -77,23 +77,21 @@ export default {
|
|||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
seeking: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
emits: ["scrub", "seeking"],
|
||||
data: () => ({
|
||||
scrubbing: false,
|
||||
progress: 0,
|
||||
duration: 0,
|
||||
vidWrs: "",
|
||||
}),
|
||||
mounted() {
|
||||
this.vidWrs = this.sources[1].url;
|
||||
this.video.addEventListener("loadeddata", (e) => {
|
||||
if (this.video.readyState >= 3) {
|
||||
this.video.addEventListener("timeupdate", () => {
|
||||
this.duration = this.video.duration;
|
||||
if (!this.scrubbing) this.progress = this.currentTime;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
seek(e) {
|
||||
|
|
@ -111,129 +109,126 @@ export default {
|
|||
this.video.clientHeight / 3
|
||||
);
|
||||
},
|
||||
scrub(e) {
|
||||
this.video.currentTime = e;
|
||||
},
|
||||
// TODO: better scrubbing preview
|
||||
loadVideoFrames() {
|
||||
// Exit loop if desired number of frames have been extracted
|
||||
if (this.frames.length >= frameCount) {
|
||||
this.visibleFrame = 0;
|
||||
// TODO: better scrubbing preview (don't delet ples 🙏)
|
||||
// loadVideoFrames() {
|
||||
// // Exit loop if desired number of frames have been extracted
|
||||
// if (this.frames.length >= frameCount) {
|
||||
// this.visibleFrame = 0;
|
||||
|
||||
// Append all canvases to container div
|
||||
this.frames.forEach((frame) => {
|
||||
this.frameContainerElement.appendChild(frame);
|
||||
});
|
||||
return;
|
||||
}
|
||||
// // Append all canvases to container div
|
||||
// this.frames.forEach((frame) => {
|
||||
// this.frameContainerElement.appendChild(frame);
|
||||
// });
|
||||
// return;
|
||||
// }
|
||||
|
||||
// If extraction hasn’t started, set desired time for first frame
|
||||
if (this.frames.length === 0) {
|
||||
this.requestedTime = 0;
|
||||
} else {
|
||||
this.requestedTime = this.requestedTime + this.frameTimestep;
|
||||
}
|
||||
// // If extraction hasn’t started, set desired time for first frame
|
||||
// if (this.frames.length === 0) {
|
||||
// this.requestedTime = 0;
|
||||
// } else {
|
||||
// this.requestedTime = this.requestedTime + this.frameTimestep;
|
||||
// }
|
||||
|
||||
// Send seek request to video player for the next frame.
|
||||
this.videoElement.currentTime = this.requestedTime;
|
||||
},
|
||||
extractFrame(videoWidth, videoHeight) {
|
||||
// Create DOM canvas object
|
||||
var canvas = document.createElement("canvas");
|
||||
canvas.className = "video-scrubber-frame";
|
||||
canvas.height = videoHeight;
|
||||
canvas.width = videoWidth;
|
||||
// // Send seek request to video player for the next frame.
|
||||
// this.videoElement.currentTime = this.requestedTime;
|
||||
// },
|
||||
// extractFrame(videoWidth, videoHeight) {
|
||||
// // Create DOM canvas object
|
||||
// var canvas = document.createElement("canvas");
|
||||
// canvas.className = "video-scrubber-frame";
|
||||
// canvas.height = videoHeight;
|
||||
// canvas.width = videoWidth;
|
||||
|
||||
// Copy current frame to canvas
|
||||
var context = canvas.getContext("2d");
|
||||
context.drawImage(this.videoElement, 0, 0, videoWidth, videoHeight);
|
||||
this.frames.push(canvas);
|
||||
// // Copy current frame to canvas
|
||||
// var context = canvas.getContext("2d");
|
||||
// context.drawImage(this.videoElement, 0, 0, videoWidth, videoHeight);
|
||||
// this.frames.push(canvas);
|
||||
|
||||
// Load the next frame
|
||||
loadVideoFrames();
|
||||
},
|
||||
prefetch_file(url, fetched_callback, progress_callback, error_callback) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open("GET", url, true);
|
||||
xhr.responseType = "blob";
|
||||
// // Load the next frame
|
||||
// loadVideoFrames();
|
||||
// },
|
||||
// prefetch_file(url, fetched_callback, progress_callback, error_callback) {
|
||||
// var xhr = new XMLHttpRequest();
|
||||
// xhr.open("GET", url, true);
|
||||
// xhr.responseType = "blob";
|
||||
|
||||
xhr.addEventListener(
|
||||
"load",
|
||||
function () {
|
||||
if (xhr.status === 200) {
|
||||
var URL = window.URL || window.webkitURL;
|
||||
var blob_url = URL.createObjectURL(xhr.response);
|
||||
fetched_callback(blob_url);
|
||||
} else {
|
||||
error_callback();
|
||||
}
|
||||
},
|
||||
false
|
||||
);
|
||||
// xhr.addEventListener(
|
||||
// "load",
|
||||
// function () {
|
||||
// if (xhr.status === 200) {
|
||||
// var URL = window.URL || window.webkitURL;
|
||||
// var blob_url = URL.createObjectURL(xhr.response);
|
||||
// fetched_callback(blob_url);
|
||||
// } else {
|
||||
// error_callback();
|
||||
// }
|
||||
// },
|
||||
// false
|
||||
// );
|
||||
|
||||
var prev_pc = 0;
|
||||
xhr.addEventListener("progress", function (event) {
|
||||
if (event.lengthComputable) {
|
||||
var pc = Math.round((event.loaded / event.total) * 100);
|
||||
if (pc != prev_pc) {
|
||||
prev_pc = pc;
|
||||
progress_callback(pc);
|
||||
}
|
||||
}
|
||||
});
|
||||
xhr.send();
|
||||
},
|
||||
async extractFramesFromVideo(videoUrl, fps = 25) {
|
||||
// fully download it first (no buffering):
|
||||
console.log(videoUrl);
|
||||
console.log(fps);
|
||||
let videoBlob = await fetch(videoUrl, {
|
||||
headers: { range: "bytes=0-567139" },
|
||||
}).then((r) => r.blob());
|
||||
console.log(videoBlob);
|
||||
let videoObjectUrl = URL.createObjectURL(videoBlob);
|
||||
let video = document.createElement("video");
|
||||
// var prev_pc = 0;
|
||||
// xhr.addEventListener("progress", function (event) {
|
||||
// if (event.lengthComputable) {
|
||||
// var pc = Math.round((event.loaded / event.total) * 100);
|
||||
// if (pc != prev_pc) {
|
||||
// prev_pc = pc;
|
||||
// progress_callback(pc);
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
// xhr.send();
|
||||
// },
|
||||
// async extractFramesFromVideo(videoUrl, fps = 25) {
|
||||
// // fully download it first (no buffering):
|
||||
// console.log(videoUrl);
|
||||
// console.log(fps);
|
||||
// let videoBlob = await fetch(videoUrl, {
|
||||
// headers: { range: "bytes=0-567139" },
|
||||
// }).then((r) => r.blob());
|
||||
// console.log(videoBlob);
|
||||
// let videoObjectUrl = URL.createObjectURL(videoBlob);
|
||||
// let video = document.createElement("video");
|
||||
|
||||
let seekResolve;
|
||||
video.addEventListener("seeked", async function () {
|
||||
if (seekResolve) seekResolve();
|
||||
});
|
||||
// let seekResolve;
|
||||
// video.addEventListener("seeked", async function () {
|
||||
// if (seekResolve) seekResolve();
|
||||
// });
|
||||
|
||||
video.src = videoObjectUrl;
|
||||
// video.src = videoObjectUrl;
|
||||
|
||||
// workaround chromium metadata bug (https://stackoverflow.com/q/38062864/993683)
|
||||
while (
|
||||
(video.duration === Infinity || isNaN(video.duration)) &&
|
||||
video.readyState < 2
|
||||
) {
|
||||
await new Promise((r) => setTimeout(r, 1000));
|
||||
video.currentTime = 10000000 * Math.random();
|
||||
}
|
||||
let duration = video.duration;
|
||||
// // workaround chromium metadata bug (https://stackoverflow.com/q/38062864/993683)
|
||||
// while (
|
||||
// (video.duration === Infinity || isNaN(video.duration)) &&
|
||||
// video.readyState < 2
|
||||
// ) {
|
||||
// await new Promise((r) => setTimeout(r, 1000));
|
||||
// video.currentTime = 10000000 * Math.random();
|
||||
// }
|
||||
// let duration = video.duration;
|
||||
|
||||
let canvas = document.createElement("canvas");
|
||||
let context = canvas.getContext("2d");
|
||||
let [w, h] = [video.videoWidth, video.videoHeight];
|
||||
canvas.width = w;
|
||||
canvas.height = h;
|
||||
// let canvas = document.createElement("canvas");
|
||||
// let context = canvas.getContext("2d");
|
||||
// let [w, h] = [video.videoWidth, video.videoHeight];
|
||||
// canvas.width = w;
|
||||
// canvas.height = h;
|
||||
|
||||
let interval = 1;
|
||||
let currentTime = 0;
|
||||
// let interval = 1;
|
||||
// let currentTime = 0;
|
||||
|
||||
while (currentTime < duration) {
|
||||
video.currentTime = currentTime;
|
||||
await new Promise((r) => (seekResolve = r));
|
||||
// while (currentTime < duration) {
|
||||
// video.currentTime = currentTime;
|
||||
// await new Promise((r) => (seekResolve = r));
|
||||
|
||||
context.drawImage(video, 0, 0, w, h);
|
||||
let base64ImageData = canvas.toDataURL();
|
||||
console.log(base64ImageData);
|
||||
this.frames.push(base64ImageData);
|
||||
// context.drawImage(video, 0, 0, w, h);
|
||||
// let base64ImageData = canvas.toDataURL();
|
||||
// console.log(base64ImageData);
|
||||
// this.frames.push(base64ImageData);
|
||||
|
||||
currentTime += interval;
|
||||
}
|
||||
console.log("%c frames", "color: #00ff00");
|
||||
console.log(this.frames);
|
||||
},
|
||||
// currentTime += interval;
|
||||
// }
|
||||
// console.log("%c frames", "color: #00ff00");
|
||||
// console.log(this.frames);
|
||||
// },
|
||||
// TODO: scrubbing preview end
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,20 +2,13 @@
|
|||
<div>
|
||||
<v-bottom-sheet
|
||||
v-model="sheet"
|
||||
style="z-index: 999"
|
||||
:attach="$parent.$refs.vidcontainer"
|
||||
scrollable
|
||||
>
|
||||
<template #activator="{ on, attrs }">
|
||||
<v-btn
|
||||
fab
|
||||
text
|
||||
small
|
||||
color="white"
|
||||
style="position: absolute; bottom: 0.25rem; right: 6rem"
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
>
|
||||
{{ video.playbackRate }}X
|
||||
<v-btn fab text small color="white" v-bind="attrs" v-on="on">
|
||||
{{ currentSpeed }}X
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-card class="background">
|
||||
|
|
@ -25,14 +18,8 @@
|
|||
}"
|
||||
>
|
||||
Playback Speed
|
||||
<v-btn
|
||||
fab
|
||||
text
|
||||
small
|
||||
color="white"
|
||||
style="position: absolute; right: 0.25rem"
|
||||
@click="sheet = false"
|
||||
>
|
||||
<v-spacer />
|
||||
<v-btn fab text small color="white" @click="sheet = false">
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</v-subheader>
|
||||
|
|
@ -41,21 +28,19 @@
|
|||
<v-list-item
|
||||
v-for="sped in speeds"
|
||||
:key="sped"
|
||||
@click="(sheet = false), (video.playbackRate = sped)"
|
||||
@click="(sheet = false), $emit('speed', sped)"
|
||||
>
|
||||
<!-- // TODO: save playbackRate to localStorage and manage via store/video/index.js -->
|
||||
<v-list-item-avatar>
|
||||
<v-icon
|
||||
:color="
|
||||
video.playbackRate === sped
|
||||
currentSpeed === sped
|
||||
? 'primary'
|
||||
: $vuetify.theme.dark
|
||||
? 'background lighten-2'
|
||||
: 'background darken-2'
|
||||
"
|
||||
v-text="
|
||||
video.playbackRate === sped ? 'mdi-check' : 'mdi-speedometer'
|
||||
"
|
||||
v-text="currentSpeed === sped ? 'mdi-check' : 'mdi-speedometer'"
|
||||
></v-icon>
|
||||
</v-list-item-avatar>
|
||||
<v-list-item-title>{{ sped }}X</v-list-item-title>
|
||||
|
|
@ -68,7 +53,13 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
props: ["video"],
|
||||
props: {
|
||||
currentSpeed: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
emits: ["speed"],
|
||||
data: () => ({
|
||||
sheet: false,
|
||||
speeds: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 3, 4, 8, 16],
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
:buffer-value="(block.segment[1] / video.duration) * 100"
|
||||
:value="(block.segment[0] / video.duration) * 100"
|
||||
style="
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
background: transparent;
|
||||
|
|
@ -19,17 +18,22 @@
|
|||
:height="seeking ? 4 : 2"
|
||||
:style="
|
||||
fullscreen
|
||||
? 'width: calc(100% - 2rem); left: 1rem; bottom: 3.25rem;'
|
||||
? 'width: calc(100% - 2rem); left: 1rem; bottom: 3.5rem;'
|
||||
: 'width: 100%; left: 0; bottom: 1px;'
|
||||
"
|
||||
/>
|
||||
<!-- // TODO:background-color="colors[block.category]" -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
video: {
|
||||
blocks: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
duration: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
|
|
@ -37,10 +41,6 @@ export default {
|
|||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
videoid: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
fullscreen: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
|
|
@ -51,69 +51,17 @@ export default {
|
|||
},
|
||||
},
|
||||
data: () => ({
|
||||
blocks: [],
|
||||
colors: {
|
||||
sponsor: "green",
|
||||
selfpromo: "yellow",
|
||||
exclusive_access: "teal",
|
||||
interaction: "fuchsia",
|
||||
poi_highlight: "deeppink",
|
||||
intro: "lightblue",
|
||||
outro: "blue",
|
||||
music_offtopic: "orange",
|
||||
filter: "purple",
|
||||
},
|
||||
}),
|
||||
mounted() {
|
||||
let vid = this.video;
|
||||
let id = this.videoid;
|
||||
|
||||
vid.addEventListener("loadeddata", (e) => {
|
||||
if (vid.readyState >= 3) {
|
||||
this.$youtube.getSponsorBlock(id, (data) => {
|
||||
console.log("sbreturn", data);
|
||||
if (Array.isArray(data)) {
|
||||
this.blocks = data;
|
||||
|
||||
// iterate over data.segments array
|
||||
vid.addEventListener("timeupdate", () => {
|
||||
// console.log("sb check", data);
|
||||
data.forEach((sponsor) => {
|
||||
let vidTime = vid.currentTime;
|
||||
|
||||
if (
|
||||
vidTime >= sponsor.segment[0] &&
|
||||
vidTime <= sponsor.segment[1]
|
||||
) {
|
||||
console.log("Skipping the sponsor");
|
||||
this.$youtube.showToast("Skipped sponsor");
|
||||
vid.currentTime = sponsor.segment[1] + 1;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.sponsor {
|
||||
color: green;
|
||||
}
|
||||
.selfpromo {
|
||||
color: yellow;
|
||||
}
|
||||
.exclusive_access {
|
||||
color: orange;
|
||||
}
|
||||
.interaction {
|
||||
color: blue;
|
||||
}
|
||||
.intro {
|
||||
color: purple;
|
||||
}
|
||||
.outro {
|
||||
color: purple;
|
||||
}
|
||||
.music_offtopic {
|
||||
color: red;
|
||||
}
|
||||
.poi_highlight {
|
||||
color: #ff00ff;
|
||||
}
|
||||
.filler {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,36 +1,21 @@
|
|||
<template>
|
||||
<div
|
||||
style="color: #fff; left: 1rem; font-size: 0.75rem; position: absolute"
|
||||
:style="fullscreen ? 'bottom: 4.25rem' : 'bottom: 1rem'"
|
||||
>
|
||||
{{ watched }}
|
||||
<span style="color: #aaa"> / {{ duration }} </span>
|
||||
<div style="color: #fff; font-size: 0.75rem">
|
||||
{{ $vuetube.humanTime(currentTime) }}
|
||||
<span style="color: #aaa"> / {{ $vuetube.humanTime(duration) }} </span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
video: {
|
||||
type: Object,
|
||||
duration: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
fullscreen: {
|
||||
type: Boolean,
|
||||
currentTime: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
watched: 0,
|
||||
duration: 0,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.video.addEventListener("timeupdate", () => {
|
||||
this.duration = this.$vuetube.humanTime(this.video.duration);
|
||||
this.watched = this.$vuetube.humanTime(this.video.currentTime);
|
||||
});
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@
|
|||
<v-btn
|
||||
v-if="devmode"
|
||||
text
|
||||
class="entry text-left text-capitalize"
|
||||
class="entry text-left text-capitalize no-spacing"
|
||||
to="/mods/developer"
|
||||
:style="{
|
||||
borderRadius: `${$store.state.tweaks.roundTweak / 2}rem`,
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="deploymentTargetDropDown">
|
||||
<runningDeviceTargetSelectedWithDropDown>
|
||||
<Target>
|
||||
<type value="RUNNING_DEVICE_TARGET" />
|
||||
<deviceKey>
|
||||
<Key>
|
||||
<type value="SERIAL_NUMBER" />
|
||||
<value value="adb-97QAY11P1S-NELaqI._adb-tls-connect._tcp." />
|
||||
</Key>
|
||||
</deviceKey>
|
||||
</Target>
|
||||
</runningDeviceTargetSelectedWithDropDown>
|
||||
<timeTargetWasSelectedWithDropDown value="2022-06-07T16:21:41.251850Z" />
|
||||
</component>
|
||||
</project>
|
||||
|
|
@ -352,15 +352,14 @@
|
|||
DEVELOPMENT_TEAM = VRCJ7YWR89;
|
||||
INFOPLIST_FILE = App/Info.plist;
|
||||
IPHONEOS_DEPLOYMENT_TARGET = 12.2;
|
||||
"IPHONEOS_DEPLOYMENT_TARGET[sdk=macosx*]" = 14.2;
|
||||
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
|
||||
OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
|
||||
PRODUCT_BUNDLE_IDENTIFIER = com.Frontesque.vuetube;
|
||||
PRODUCT_NAME = "$(TARGET_NAME)";
|
||||
SUPPORTS_MACCATALYST = YES;
|
||||
SUPPORTS_MACCATALYST = NO;
|
||||
SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG;
|
||||
SWIFT_VERSION = 5.0;
|
||||
TARGETED_DEVICE_FAMILY = "1,2,6";
|
||||
TARGETED_DEVICE_FAMILY = "1,2";
|
||||
};
|
||||
name = Debug;
|
||||
};
|
||||
|
|
@ -374,14 +373,13 @@
|
|||
DEVELOPMENT_TEAM = VRCJ7YWR89;
|
||||
INFOPLIST_FILE = App/Info.plist;
|
||||
IPHONEOS_DEPLOYMENT_TARGET = 12.2;
|
||||
"IPHONEOS_DEPLOYMENT_TARGET[sdk=macosx*]" = 14.2;
|
||||
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
|
||||
PRODUCT_BUNDLE_IDENTIFIER = com.Frontesque.vuetube;
|
||||
PRODUCT_NAME = "$(TARGET_NAME)";
|
||||
SUPPORTS_MACCATALYST = YES;
|
||||
SUPPORTS_MACCATALYST = NO;
|
||||
SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";
|
||||
SWIFT_VERSION = 5.0;
|
||||
TARGETED_DEVICE_FAMILY = "1,2,6";
|
||||
TARGETED_DEVICE_FAMILY = "1,2";
|
||||
};
|
||||
name = Release;
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue