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_SIGNING_ALLOWED="NO"
|
||||||
CODE_SIGN_ENTITLEMENTS=""
|
CODE_SIGN_ENTITLEMENTS=""
|
||||||
- name: Make IPA
|
- 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
|
- name: Upload artifacts
|
||||||
uses: actions/upload-artifact@v2
|
uses: actions/upload-artifact@v2
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<v-btn
|
<v-btn fab text small disabled>
|
||||||
fab
|
|
||||||
text
|
|
||||||
small
|
|
||||||
disabled
|
|
||||||
style="position: absolute; top: 0.25rem; right: 3rem"
|
|
||||||
>
|
|
||||||
<v-icon>mdi-closed-caption-outline</v-icon>
|
<v-icon>mdi-closed-caption-outline</v-icon>
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<!-- TODO: change /home to $router.goBack() or $router.go(-1) -->
|
<!-- // TODO: change /home to $router.goBack() or $router.go(-1) -->
|
||||||
<v-btn
|
<v-btn fab text small to="/home" color="white">
|
||||||
fab
|
|
||||||
text
|
|
||||||
small
|
|
||||||
style="position: absolute; top: 0.25rem; right: 0.25rem"
|
|
||||||
to="/home"
|
|
||||||
color="white"
|
|
||||||
>
|
|
||||||
<v-icon>mdi-close</v-icon>
|
<v-icon>mdi-close</v-icon>
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<v-btn
|
<v-btn fab text small color="white" @click.stop="$emit('fullscreen')">
|
||||||
fab
|
|
||||||
text
|
|
||||||
small
|
|
||||||
color="white"
|
|
||||||
style="position: absolute; right: 0.25rem"
|
|
||||||
:style="fullscreen ? 'bottom: 3.5rem' : 'bottom: 0.25rem'"
|
|
||||||
@click.stop="$emit('fullscreen')"
|
|
||||||
>
|
|
||||||
<v-icon size="1.25rem">{{
|
<v-icon size="1.25rem">{{
|
||||||
fullscreen ? "mdi-fullscreen-exit" : "mdi-fullscreen"
|
fullscreen ? "mdi-fullscreen-exit" : "mdi-fullscreen"
|
||||||
}}</v-icon>
|
}}</v-icon>
|
||||||
|
|
|
||||||
|
|
@ -8,70 +8,89 @@
|
||||||
}"
|
}"
|
||||||
class="d-flex flex-column"
|
class="d-flex flex-column"
|
||||||
style="position: relative"
|
style="position: relative"
|
||||||
:style="{
|
|
||||||
borderRadius: $store.state.tweaks.roundWatch
|
|
||||||
? `${$store.state.tweaks.roundTweak / 3}rem`
|
|
||||||
: '0',
|
|
||||||
}"
|
|
||||||
@click="controls = !controls"
|
|
||||||
>
|
>
|
||||||
<video
|
<video
|
||||||
ref="player"
|
ref="player"
|
||||||
autoplay
|
autoplay
|
||||||
width="100%"
|
width="100%"
|
||||||
:height="isFullscreen ? '100%' : 'auto'"
|
|
||||||
:src="vidSrc"
|
:src="vidSrc"
|
||||||
|
:height="isFullscreen ? '100%' : 'auto'"
|
||||||
style="transition: filter 0.15s ease-in-out"
|
style="transition: filter 0.15s ease-in-out"
|
||||||
:class="controls || seeking ? 'dim' : ''"
|
:class="controls || seeking || skipping ? 'dim' : ''"
|
||||||
:style="contain ? 'object-fit: contain;' : 'object-fit: cover;'"
|
: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()"
|
||||||
/>
|
/>
|
||||||
|
<!-- // NOTE: replace poster URL with "none" -->
|
||||||
<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>
|
|
||||||
|
|
||||||
<!-- // TODO: merge the bottom 2 into 1 reusable component -->
|
<!-- // TODO: merge the bottom 2 into 1 reusable component -->
|
||||||
<v-btn
|
<v-btn
|
||||||
text
|
text
|
||||||
tile
|
tile
|
||||||
|
color="white"
|
||||||
|
:class="skipping == -10 ? '' : 'invisible'"
|
||||||
style="
|
style="
|
||||||
opacity: 0;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 50%;
|
width: 50%;
|
||||||
height: 100%;
|
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>
|
<v-icon>mdi-rewind</v-icon>
|
||||||
|
<!-- {{ skipping }} seconds -->
|
||||||
</v-btn>
|
</v-btn>
|
||||||
|
|
||||||
<v-btn
|
<v-btn
|
||||||
text
|
text
|
||||||
tile
|
tile
|
||||||
|
color="white"
|
||||||
|
:class="skipping == 10 ? '' : 'invisible'"
|
||||||
style="
|
style="
|
||||||
opacity: 0;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
width: 50%;
|
width: 50%;
|
||||||
height: 100%;
|
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>
|
<v-icon>mdi-fast-forward</v-icon>
|
||||||
|
<!-- {{ skipping }} seconds] -->
|
||||||
</v-btn>
|
</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
|
<div
|
||||||
style="transition: opacity 0.15s ease-in-out"
|
style="transition: opacity 0.15s ease-in-out"
|
||||||
:style="
|
:style="
|
||||||
|
|
@ -80,201 +99,172 @@
|
||||||
: 'opacity: 0; pointer-events: none'
|
: 'opacity: 0; pointer-events: none'
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<minimize />
|
<!-- top controls row -->
|
||||||
<loop />
|
<div
|
||||||
<captions />
|
style="position: absolute; width: 100%; top: 0.25rem"
|
||||||
<close />
|
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
|
<!-- center controls row -->
|
||||||
fab
|
<div
|
||||||
text
|
class="d-flex justify-center align-center"
|
||||||
small
|
|
||||||
style="
|
style="
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: calc(50% - 1.25rem);
|
left: 50%;
|
||||||
left: calc(50% - 10rem);
|
top: 50%;
|
||||||
"
|
"
|
||||||
color="white"
|
|
||||||
@click.stop="$refs.player.currentTime -= 5"
|
|
||||||
>
|
>
|
||||||
<v-icon size="1rem">mdi-rewind-5</v-icon>
|
<v-btn
|
||||||
</v-btn>
|
fab
|
||||||
<v-btn
|
text
|
||||||
fab
|
small
|
||||||
text
|
color="white"
|
||||||
style="
|
@click.stop="$refs.player.currentTime -= 5"
|
||||||
position: absolute;
|
>
|
||||||
top: calc(50% - 1.75rem);
|
<v-icon size="1rem">mdi-rewind-5</v-icon>
|
||||||
left: calc(50% - 6.5rem);
|
</v-btn>
|
||||||
"
|
<v-btn fab text color="white" class="px-4" disabled>
|
||||||
color="white"
|
<v-icon size="2rem">mdi-skip-previous</v-icon>
|
||||||
disabled
|
</v-btn>
|
||||||
@click.stop=""
|
<playpause
|
||||||
>
|
v-if="$refs.player"
|
||||||
<v-icon size="2rem">mdi-skip-previous</v-icon>
|
:video="$refs.player"
|
||||||
</v-btn>
|
@play="$refs.player.play()"
|
||||||
<playpause
|
@pause="$refs.player.pause()"
|
||||||
v-if="$refs.player"
|
/>
|
||||||
:video="$refs.player"
|
<v-btn fab text color="white" class="px-4" disabled>
|
||||||
@close="controls = false"
|
<v-icon size="2rem">mdi-skip-next</v-icon>
|
||||||
/>
|
</v-btn>
|
||||||
<v-btn
|
<v-btn
|
||||||
fab
|
fab
|
||||||
text
|
text
|
||||||
style="
|
small
|
||||||
position: absolute;
|
color="white"
|
||||||
top: calc(50% - 1.75rem);
|
@click.stop="$refs.player.currentTime += 5"
|
||||||
left: calc(50% + 3rem);
|
>
|
||||||
"
|
<v-icon size="1rem">mdi-fast-forward-5</v-icon>
|
||||||
color="white"
|
</v-btn>
|
||||||
disabled
|
</div>
|
||||||
@click.stop=""
|
<!-- center controls row end -->
|
||||||
>
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<watchtime
|
<!-- time & fullscreen row -->
|
||||||
v-if="$refs.player"
|
<div
|
||||||
:video="$refs.player"
|
:style="isFullscreen ? 'bottom: 4.25rem' : 'bottom: 0.5rem'"
|
||||||
:fullscreen="isFullscreen"
|
class="d-flex justify-between align-center pl-4 pr-2"
|
||||||
/>
|
style="position: absolute; width: 100%"
|
||||||
<v-btn
|
@click.self="controlsHandler()"
|
||||||
v-if="isFullscreen"
|
|
||||||
fab
|
|
||||||
text
|
|
||||||
small
|
|
||||||
outlined
|
|
||||||
style="position: absolute; bottom: 0.25rem; left: 1rem"
|
|
||||||
color="white"
|
|
||||||
disabled
|
|
||||||
@click.stop=""
|
|
||||||
>
|
>
|
||||||
<v-icon>mdi-thumb-up-outline</v-icon>
|
<watchtime
|
||||||
</v-btn>
|
v-if="$refs.player"
|
||||||
<v-btn
|
:current-time="$refs.player.currentTime"
|
||||||
v-if="isFullscreen"
|
:duration="$refs.player.duration"
|
||||||
fab
|
/>
|
||||||
text
|
<v-spacer />
|
||||||
small
|
<fullscreen
|
||||||
outlined
|
style="z-index: 2"
|
||||||
style="position: absolute; bottom: 0.25rem; left: 4rem"
|
:fullscreen="isFullscreen"
|
||||||
color="white"
|
@fullscreen="controlsHandler(), fullscreenHandler()"
|
||||||
disabled
|
/>
|
||||||
@click.stop=""
|
</div>
|
||||||
>
|
<!-- time & fullscreen row end -->
|
||||||
<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>
|
|
||||||
|
|
||||||
<v-btn
|
<!-- bottom controls row -->
|
||||||
v-if="isFullscreen"
|
<div
|
||||||
fab
|
style="position: absolute; width: 100%; bottom: 0.5rem"
|
||||||
text
|
class="d-flex justify-between align-center px-2"
|
||||||
small
|
@click.self="controlsHandler()"
|
||||||
style="position: absolute; bottom: 0.25rem; right: 0.25rem"
|
|
||||||
color="white"
|
|
||||||
disabled
|
|
||||||
@click.stop=""
|
|
||||||
>
|
>
|
||||||
<v-icon>mdi-cards-outline</v-icon>
|
<div v-if="isFullscreen">
|
||||||
</v-btn>
|
<v-btn fab text small color="white" class="mr-2" disabled>
|
||||||
<!-- // TODO: merge the bottom 2 into 1 reusable component -->
|
<v-icon>mdi-thumb-up-outline</v-icon>
|
||||||
<quality v-if="$refs.player" :video="$refs.player" :sources="sources" />
|
</v-btn>
|
||||||
<speed v-if="$refs.player" :video="$refs.player" />
|
<v-btn fab text small color="white" class="mr-2" disabled>
|
||||||
<fullscreen
|
<v-icon>mdi-thumb-down-outline</v-icon>
|
||||||
:fullscreen="isFullscreen"
|
</v-btn>
|
||||||
@fullscreen="(controls = $refs.player.paused), handleFullscreenChange()"
|
<v-btn fab text small color="white" class="mr-2" disabled>
|
||||||
/>
|
<v-icon>mdi-share-outline</v-icon>
|
||||||
<v-btn
|
</v-btn>
|
||||||
v-if="isFullscreen"
|
<v-btn fab text small color="white" class="mr-2" disabled>
|
||||||
fab
|
<v-icon>mdi-plus-box-multiple-outline</v-icon>
|
||||||
text
|
</v-btn>
|
||||||
small
|
<v-btn fab text small color="white" class="mr-2" disabled>
|
||||||
style="position: absolute; bottom: 0.25rem; right: 0.25rem"
|
<v-icon>mdi-comment-text-outline</v-icon>
|
||||||
color="white"
|
</v-btn>
|
||||||
disabled
|
</div>
|
||||||
@click.stop=""
|
<v-spacer />
|
||||||
>
|
<!-- // TODO: merge the bottom 2 into 1 reusable component -->
|
||||||
<v-icon>mdi-cards-outline</v-icon>
|
<quality
|
||||||
</v-btn>
|
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>
|
</div>
|
||||||
|
<!-- controls container end -->
|
||||||
|
|
||||||
<progressbar
|
<progressbar
|
||||||
v-if="$refs.player"
|
v-if="$refs.player"
|
||||||
:video="$refs.player"
|
|
||||||
:seeking="seeking"
|
|
||||||
:controls="controls"
|
|
||||||
:fullscreen="isFullscreen"
|
|
||||||
:current-time="$refs.player.currentTime"
|
: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
|
<seekbar
|
||||||
v-if="$refs.player"
|
v-if="$refs.player"
|
||||||
v-show="!isFullscreen || controls"
|
v-show="!isFullscreen || controls"
|
||||||
|
:duration="$refs.player.duration"
|
||||||
:fullscreen="isFullscreen"
|
:fullscreen="isFullscreen"
|
||||||
|
:current-time="progress"
|
||||||
:video="$refs.player"
|
:video="$refs.player"
|
||||||
|
:controls="controls"
|
||||||
:sources="sources"
|
:sources="sources"
|
||||||
:controls="controls"
|
|
||||||
:current-time="$refs.player.currentTime"
|
|
||||||
@seeking="seeking = !seeking"
|
|
||||||
/>
|
|
||||||
<sponsorblock
|
|
||||||
v-if="$refs.player"
|
|
||||||
:video="$refs.player"
|
|
||||||
:seeking="seeking"
|
:seeking="seeking"
|
||||||
:videoid="videoid"
|
@seeking="seeking = !seeking"
|
||||||
:controls="controls"
|
@scrub="$refs.player.currentTime = $event"
|
||||||
:fullscreen="isFullscreen"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -327,20 +317,91 @@ export default {
|
||||||
controls: false,
|
controls: false,
|
||||||
seeking: false,
|
seeking: false,
|
||||||
contain: true,
|
contain: true,
|
||||||
|
skipping: 0,
|
||||||
|
progress: 0,
|
||||||
|
buffered: 0,
|
||||||
|
watched: 0,
|
||||||
|
blocks: [],
|
||||||
vidSrc: "",
|
vidSrc: "",
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
console.log("sources", this.sources);
|
console.log("sources", this.sources);
|
||||||
this.vidSrc = this.sources[this.sources.length - 1].url;
|
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 orientation change and enter fullscreen
|
||||||
// TODO: detect video loading state and send this.loading to play button :loading = loading
|
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
if (this.isFullscreen) this.exitFullscreen();
|
if (this.isFullscreen) this.exitFullscreen();
|
||||||
},
|
},
|
||||||
methods: {
|
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) {
|
if (document?.fullscreenElement === this.$refs.vidcontainer) {
|
||||||
this.exitFullscreen();
|
this.exitFullscreen();
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -382,7 +443,7 @@ export default {
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.dim {
|
.dim {
|
||||||
filter: brightness(42%);
|
filter: brightness(33%);
|
||||||
}
|
}
|
||||||
.invisible {
|
.invisible {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,17 @@
|
||||||
<template>
|
<template>
|
||||||
<v-btn
|
<v-btn fab text small @click="$emit('loop')">
|
||||||
fab
|
<v-icon>{{ loop ? "mdi-sync-circle" : "mdi-sync" }}</v-icon>
|
||||||
text
|
|
||||||
small
|
|
||||||
disabled
|
|
||||||
style="position: absolute; top: 0.25rem; right: 6rem"
|
|
||||||
>
|
|
||||||
<v-icon>mdi-sync</v-icon>
|
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
loop: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emits: ["loop"],
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<v-btn
|
<v-btn fab text small disabled>
|
||||||
fab
|
|
||||||
text
|
|
||||||
small
|
|
||||||
disabled
|
|
||||||
style="position: absolute; top: 0.25rem; left: 0.25rem"
|
|
||||||
>
|
|
||||||
<v-icon>mdi-chevron-down</v-icon>
|
<v-icon>mdi-chevron-down</v-icon>
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -3,11 +3,9 @@
|
||||||
fab
|
fab
|
||||||
text
|
text
|
||||||
large
|
large
|
||||||
style="position: absolute; top: calc(50% - 2rem); left: calc(50% - 2rem)"
|
|
||||||
color="white"
|
color="white"
|
||||||
@click.stop="
|
@click="
|
||||||
(paused = !video.paused),
|
(paused = !video.paused), video.paused ? $emit('play') : $emit('pause')
|
||||||
video.paused ? (video.play(), $emit('close')) : video.pause()
|
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<v-icon size="3.5rem">
|
<v-icon size="3.5rem">
|
||||||
|
|
@ -18,8 +16,13 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props: ["video"],
|
props: {
|
||||||
emits: ["close"],
|
video: {
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emits: ["play", "pause"],
|
||||||
data: () => ({
|
data: () => ({
|
||||||
paused: false,
|
paused: false,
|
||||||
}),
|
}),
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<v-progress-linear
|
<v-progress-linear
|
||||||
style="
|
style="
|
||||||
z-index: 2;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: #ffffff22;
|
background: #ffffff22;
|
||||||
transform: translateY(50%);
|
transform: translateY(50%);
|
||||||
|
|
@ -9,13 +8,13 @@
|
||||||
background-opacity="0.5"
|
background-opacity="0.5"
|
||||||
background-color="white"
|
background-color="white"
|
||||||
:buffer-value="buffered"
|
:buffer-value="buffered"
|
||||||
:value="(currentTime / video.duration) * 100"
|
:value="(currentTime / duration) * 100"
|
||||||
:class="!fullscreen || controls ? '' : 'invisible'"
|
:class="!fullscreen || controls ? '' : 'invisible'"
|
||||||
color="primary"
|
color="primary"
|
||||||
:height="seeking ? 4 : 2"
|
:height="seeking ? 4 : 2"
|
||||||
:style="
|
:style="
|
||||||
fullscreen
|
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;'
|
: 'width: 100%; left: 0; bottom: 1px;'
|
||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
|
|
@ -23,7 +22,7 @@
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
video: {
|
duration: {
|
||||||
type: Object,
|
type: Object,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
|
|
@ -43,19 +42,10 @@ export default {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
},
|
buffered: {
|
||||||
data: () => ({
|
type: Number,
|
||||||
buffered: 0,
|
required: true,
|
||||||
}),
|
},
|
||||||
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>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -2,20 +2,13 @@
|
||||||
<div>
|
<div>
|
||||||
<v-bottom-sheet
|
<v-bottom-sheet
|
||||||
v-model="sheet"
|
v-model="sheet"
|
||||||
|
style="z-index: 999"
|
||||||
:attach="$parent.$refs.vidcontainer"
|
:attach="$parent.$refs.vidcontainer"
|
||||||
scrollable
|
scrollable
|
||||||
>
|
>
|
||||||
<template #activator="{ on, attrs }">
|
<template #activator="{ on, attrs }">
|
||||||
<v-btn
|
<v-btn fab text small color="white" v-bind="attrs" v-on="on">
|
||||||
fab
|
{{ sources.find((src) => src.url == currentSource.src).qualityLabel }}
|
||||||
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>
|
</v-btn>
|
||||||
</template>
|
</template>
|
||||||
<v-card class="background">
|
<v-card class="background">
|
||||||
|
|
@ -25,35 +18,32 @@
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
Quality for current video
|
Quality for current video
|
||||||
<v-btn
|
<v-spacer />
|
||||||
fab
|
<v-btn fab text small color="white" @click="sheet = false">
|
||||||
text
|
|
||||||
small
|
|
||||||
color="white"
|
|
||||||
style="position: absolute; right: 0.25rem"
|
|
||||||
@click="sheet = false"
|
|
||||||
>
|
|
||||||
<v-icon>mdi-close</v-icon>
|
<v-icon>mdi-close</v-icon>
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</v-subheader>
|
</v-subheader>
|
||||||
<v-divider />
|
<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-list-item
|
||||||
v-for="src in sources"
|
v-for="src in sources"
|
||||||
:key="src"
|
:key="src"
|
||||||
@click="(sheet = false), (video.src = src.url)"
|
@click="(sheet = false), $emit('quality', src.url)"
|
||||||
>
|
>
|
||||||
<v-list-item-avatar>
|
<v-list-item-avatar>
|
||||||
<v-icon
|
<v-icon
|
||||||
:color="
|
:color="
|
||||||
video.src === src.url
|
currentSource.src === src.url
|
||||||
? 'primary'
|
? 'primary'
|
||||||
: $vuetify.theme.dark
|
: $vuetify.theme.dark
|
||||||
? 'background lighten-2'
|
? 'background lighten-2'
|
||||||
: 'background darken-2'
|
: 'background darken-2'
|
||||||
"
|
"
|
||||||
v-text="
|
v-text="
|
||||||
video.src === src.url
|
currentSource.src === src.url
|
||||||
? 'mdi-radiobox-marked'
|
? 'mdi-radiobox-marked'
|
||||||
: 'mdi-radiobox-blank'
|
: 'mdi-radiobox-blank'
|
||||||
"
|
"
|
||||||
|
|
@ -71,7 +61,17 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props: ["video", "sources"],
|
props: {
|
||||||
|
currentSource: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
sources: {
|
||||||
|
type: Array,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emits: ["quality"],
|
||||||
data: () => ({
|
data: () => ({
|
||||||
sheet: false,
|
sheet: false,
|
||||||
}),
|
}),
|
||||||
|
|
|
||||||
|
|
@ -16,20 +16,20 @@
|
||||||
color="transparent"
|
color="transparent"
|
||||||
thumb-color="primary"
|
thumb-color="primary"
|
||||||
track-color="transparent"
|
track-color="transparent"
|
||||||
:class="!controls && !fullscreen && !scrubbing ? 'invisible' : ''"
|
:class="!controls && !fullscreen && !seeking ? 'invisible' : ''"
|
||||||
style="position: absolute; z-index: 4"
|
style="position: absolute; z-index: 69420"
|
||||||
:style="
|
:style="
|
||||||
fullscreen
|
fullscreen
|
||||||
? 'width: calc(100% - 2rem); left: 1rem; bottom: 51px;'
|
? 'width: calc(100% - 2rem); left: 1rem; bottom: 55px;'
|
||||||
: 'width: calc(100% - 0.8rem); left: 0.4rem; bottom: 0;'
|
: 'width: calc(100% - 0.5rem); left: 0.25rem; bottom: 0;'
|
||||||
"
|
"
|
||||||
:thumb-size="0"
|
:thumb-size="0"
|
||||||
:max="duration"
|
:max="duration"
|
||||||
:value="progress"
|
:value="currentTime"
|
||||||
@start="(scrubbing = true), $emit('seeking')"
|
@start="$emit('seeking')"
|
||||||
@end="(scrubbing = false), $emit('seeking')"
|
@end="$emit('seeking')"
|
||||||
@change="scrub($event)"
|
@change="$emit('scrub', $event)"
|
||||||
@input="scrubbing ? seek($event) : null"
|
@input="seeking ? seek($event) : null"
|
||||||
>
|
>
|
||||||
<template #thumb-label="{ value }">
|
<template #thumb-label="{ value }">
|
||||||
<div style="transform: translateY(-50%)">
|
<div style="transform: translateY(-50%)">
|
||||||
|
|
@ -77,23 +77,21 @@ export default {
|
||||||
type: Number,
|
type: Number,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
|
duration: {
|
||||||
|
type: Number,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
seeking: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
emits: ["scrub", "seeking"],
|
||||||
data: () => ({
|
data: () => ({
|
||||||
scrubbing: false,
|
|
||||||
progress: 0,
|
|
||||||
duration: 0,
|
|
||||||
vidWrs: "",
|
vidWrs: "",
|
||||||
}),
|
}),
|
||||||
mounted() {
|
mounted() {
|
||||||
this.vidWrs = this.sources[1].url;
|
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: {
|
methods: {
|
||||||
seek(e) {
|
seek(e) {
|
||||||
|
|
@ -111,129 +109,126 @@ export default {
|
||||||
this.video.clientHeight / 3
|
this.video.clientHeight / 3
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
scrub(e) {
|
// TODO: better scrubbing preview (don't delet ples 🙏)
|
||||||
this.video.currentTime = e;
|
// loadVideoFrames() {
|
||||||
},
|
// // Exit loop if desired number of frames have been extracted
|
||||||
// TODO: better scrubbing preview
|
// if (this.frames.length >= frameCount) {
|
||||||
loadVideoFrames() {
|
// this.visibleFrame = 0;
|
||||||
// Exit loop if desired number of frames have been extracted
|
|
||||||
if (this.frames.length >= frameCount) {
|
|
||||||
this.visibleFrame = 0;
|
|
||||||
|
|
||||||
// Append all canvases to container div
|
// // Append all canvases to container div
|
||||||
this.frames.forEach((frame) => {
|
// this.frames.forEach((frame) => {
|
||||||
this.frameContainerElement.appendChild(frame);
|
// this.frameContainerElement.appendChild(frame);
|
||||||
});
|
// });
|
||||||
return;
|
// return;
|
||||||
}
|
// }
|
||||||
|
|
||||||
// If extraction hasn’t started, set desired time for first frame
|
// // If extraction hasn’t started, set desired time for first frame
|
||||||
if (this.frames.length === 0) {
|
// if (this.frames.length === 0) {
|
||||||
this.requestedTime = 0;
|
// this.requestedTime = 0;
|
||||||
} else {
|
// } else {
|
||||||
this.requestedTime = this.requestedTime + this.frameTimestep;
|
// this.requestedTime = this.requestedTime + this.frameTimestep;
|
||||||
}
|
// }
|
||||||
|
|
||||||
// Send seek request to video player for the next frame.
|
// // Send seek request to video player for the next frame.
|
||||||
this.videoElement.currentTime = this.requestedTime;
|
// this.videoElement.currentTime = this.requestedTime;
|
||||||
},
|
// },
|
||||||
extractFrame(videoWidth, videoHeight) {
|
// extractFrame(videoWidth, videoHeight) {
|
||||||
// Create DOM canvas object
|
// // Create DOM canvas object
|
||||||
var canvas = document.createElement("canvas");
|
// var canvas = document.createElement("canvas");
|
||||||
canvas.className = "video-scrubber-frame";
|
// canvas.className = "video-scrubber-frame";
|
||||||
canvas.height = videoHeight;
|
// canvas.height = videoHeight;
|
||||||
canvas.width = videoWidth;
|
// canvas.width = videoWidth;
|
||||||
|
|
||||||
// Copy current frame to canvas
|
// // Copy current frame to canvas
|
||||||
var context = canvas.getContext("2d");
|
// var context = canvas.getContext("2d");
|
||||||
context.drawImage(this.videoElement, 0, 0, videoWidth, videoHeight);
|
// context.drawImage(this.videoElement, 0, 0, videoWidth, videoHeight);
|
||||||
this.frames.push(canvas);
|
// this.frames.push(canvas);
|
||||||
|
|
||||||
// Load the next frame
|
// // Load the next frame
|
||||||
loadVideoFrames();
|
// loadVideoFrames();
|
||||||
},
|
// },
|
||||||
prefetch_file(url, fetched_callback, progress_callback, error_callback) {
|
// prefetch_file(url, fetched_callback, progress_callback, error_callback) {
|
||||||
var xhr = new XMLHttpRequest();
|
// var xhr = new XMLHttpRequest();
|
||||||
xhr.open("GET", url, true);
|
// xhr.open("GET", url, true);
|
||||||
xhr.responseType = "blob";
|
// xhr.responseType = "blob";
|
||||||
|
|
||||||
xhr.addEventListener(
|
// xhr.addEventListener(
|
||||||
"load",
|
// "load",
|
||||||
function () {
|
// function () {
|
||||||
if (xhr.status === 200) {
|
// if (xhr.status === 200) {
|
||||||
var URL = window.URL || window.webkitURL;
|
// var URL = window.URL || window.webkitURL;
|
||||||
var blob_url = URL.createObjectURL(xhr.response);
|
// var blob_url = URL.createObjectURL(xhr.response);
|
||||||
fetched_callback(blob_url);
|
// fetched_callback(blob_url);
|
||||||
} else {
|
// } else {
|
||||||
error_callback();
|
// error_callback();
|
||||||
}
|
// }
|
||||||
},
|
// },
|
||||||
false
|
// false
|
||||||
);
|
// );
|
||||||
|
|
||||||
var prev_pc = 0;
|
// var prev_pc = 0;
|
||||||
xhr.addEventListener("progress", function (event) {
|
// xhr.addEventListener("progress", function (event) {
|
||||||
if (event.lengthComputable) {
|
// if (event.lengthComputable) {
|
||||||
var pc = Math.round((event.loaded / event.total) * 100);
|
// var pc = Math.round((event.loaded / event.total) * 100);
|
||||||
if (pc != prev_pc) {
|
// if (pc != prev_pc) {
|
||||||
prev_pc = pc;
|
// prev_pc = pc;
|
||||||
progress_callback(pc);
|
// progress_callback(pc);
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
});
|
// });
|
||||||
xhr.send();
|
// xhr.send();
|
||||||
},
|
// },
|
||||||
async extractFramesFromVideo(videoUrl, fps = 25) {
|
// async extractFramesFromVideo(videoUrl, fps = 25) {
|
||||||
// fully download it first (no buffering):
|
// // fully download it first (no buffering):
|
||||||
console.log(videoUrl);
|
// console.log(videoUrl);
|
||||||
console.log(fps);
|
// console.log(fps);
|
||||||
let videoBlob = await fetch(videoUrl, {
|
// let videoBlob = await fetch(videoUrl, {
|
||||||
headers: { range: "bytes=0-567139" },
|
// headers: { range: "bytes=0-567139" },
|
||||||
}).then((r) => r.blob());
|
// }).then((r) => r.blob());
|
||||||
console.log(videoBlob);
|
// console.log(videoBlob);
|
||||||
let videoObjectUrl = URL.createObjectURL(videoBlob);
|
// let videoObjectUrl = URL.createObjectURL(videoBlob);
|
||||||
let video = document.createElement("video");
|
// let video = document.createElement("video");
|
||||||
|
|
||||||
let seekResolve;
|
// let seekResolve;
|
||||||
video.addEventListener("seeked", async function () {
|
// video.addEventListener("seeked", async function () {
|
||||||
if (seekResolve) seekResolve();
|
// if (seekResolve) seekResolve();
|
||||||
});
|
// });
|
||||||
|
|
||||||
video.src = videoObjectUrl;
|
// video.src = videoObjectUrl;
|
||||||
|
|
||||||
// workaround chromium metadata bug (https://stackoverflow.com/q/38062864/993683)
|
// // workaround chromium metadata bug (https://stackoverflow.com/q/38062864/993683)
|
||||||
while (
|
// while (
|
||||||
(video.duration === Infinity || isNaN(video.duration)) &&
|
// (video.duration === Infinity || isNaN(video.duration)) &&
|
||||||
video.readyState < 2
|
// video.readyState < 2
|
||||||
) {
|
// ) {
|
||||||
await new Promise((r) => setTimeout(r, 1000));
|
// await new Promise((r) => setTimeout(r, 1000));
|
||||||
video.currentTime = 10000000 * Math.random();
|
// video.currentTime = 10000000 * Math.random();
|
||||||
}
|
// }
|
||||||
let duration = video.duration;
|
// let duration = video.duration;
|
||||||
|
|
||||||
let canvas = document.createElement("canvas");
|
// let canvas = document.createElement("canvas");
|
||||||
let context = canvas.getContext("2d");
|
// let context = canvas.getContext("2d");
|
||||||
let [w, h] = [video.videoWidth, video.videoHeight];
|
// let [w, h] = [video.videoWidth, video.videoHeight];
|
||||||
canvas.width = w;
|
// canvas.width = w;
|
||||||
canvas.height = h;
|
// canvas.height = h;
|
||||||
|
|
||||||
let interval = 1;
|
// let interval = 1;
|
||||||
let currentTime = 0;
|
// let currentTime = 0;
|
||||||
|
|
||||||
while (currentTime < duration) {
|
// while (currentTime < duration) {
|
||||||
video.currentTime = currentTime;
|
// video.currentTime = currentTime;
|
||||||
await new Promise((r) => (seekResolve = r));
|
// await new Promise((r) => (seekResolve = r));
|
||||||
|
|
||||||
context.drawImage(video, 0, 0, w, h);
|
// context.drawImage(video, 0, 0, w, h);
|
||||||
let base64ImageData = canvas.toDataURL();
|
// let base64ImageData = canvas.toDataURL();
|
||||||
console.log(base64ImageData);
|
// console.log(base64ImageData);
|
||||||
this.frames.push(base64ImageData);
|
// this.frames.push(base64ImageData);
|
||||||
|
|
||||||
currentTime += interval;
|
// currentTime += interval;
|
||||||
}
|
// }
|
||||||
console.log("%c frames", "color: #00ff00");
|
// console.log("%c frames", "color: #00ff00");
|
||||||
console.log(this.frames);
|
// console.log(this.frames);
|
||||||
},
|
// },
|
||||||
// TODO: scrubbing preview end
|
// TODO: scrubbing preview end
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -2,20 +2,13 @@
|
||||||
<div>
|
<div>
|
||||||
<v-bottom-sheet
|
<v-bottom-sheet
|
||||||
v-model="sheet"
|
v-model="sheet"
|
||||||
|
style="z-index: 999"
|
||||||
:attach="$parent.$refs.vidcontainer"
|
:attach="$parent.$refs.vidcontainer"
|
||||||
scrollable
|
scrollable
|
||||||
>
|
>
|
||||||
<template #activator="{ on, attrs }">
|
<template #activator="{ on, attrs }">
|
||||||
<v-btn
|
<v-btn fab text small color="white" v-bind="attrs" v-on="on">
|
||||||
fab
|
{{ currentSpeed }}X
|
||||||
text
|
|
||||||
small
|
|
||||||
color="white"
|
|
||||||
style="position: absolute; bottom: 0.25rem; right: 6rem"
|
|
||||||
v-bind="attrs"
|
|
||||||
v-on="on"
|
|
||||||
>
|
|
||||||
{{ video.playbackRate }}X
|
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</template>
|
</template>
|
||||||
<v-card class="background">
|
<v-card class="background">
|
||||||
|
|
@ -25,14 +18,8 @@
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
Playback Speed
|
Playback Speed
|
||||||
<v-btn
|
<v-spacer />
|
||||||
fab
|
<v-btn fab text small color="white" @click="sheet = false">
|
||||||
text
|
|
||||||
small
|
|
||||||
color="white"
|
|
||||||
style="position: absolute; right: 0.25rem"
|
|
||||||
@click="sheet = false"
|
|
||||||
>
|
|
||||||
<v-icon>mdi-close</v-icon>
|
<v-icon>mdi-close</v-icon>
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</v-subheader>
|
</v-subheader>
|
||||||
|
|
@ -41,21 +28,19 @@
|
||||||
<v-list-item
|
<v-list-item
|
||||||
v-for="sped in speeds"
|
v-for="sped in speeds"
|
||||||
:key="sped"
|
: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 -->
|
<!-- // TODO: save playbackRate to localStorage and manage via store/video/index.js -->
|
||||||
<v-list-item-avatar>
|
<v-list-item-avatar>
|
||||||
<v-icon
|
<v-icon
|
||||||
:color="
|
:color="
|
||||||
video.playbackRate === sped
|
currentSpeed === sped
|
||||||
? 'primary'
|
? 'primary'
|
||||||
: $vuetify.theme.dark
|
: $vuetify.theme.dark
|
||||||
? 'background lighten-2'
|
? 'background lighten-2'
|
||||||
: 'background darken-2'
|
: 'background darken-2'
|
||||||
"
|
"
|
||||||
v-text="
|
v-text="currentSpeed === sped ? 'mdi-check' : 'mdi-speedometer'"
|
||||||
video.playbackRate === sped ? 'mdi-check' : 'mdi-speedometer'
|
|
||||||
"
|
|
||||||
></v-icon>
|
></v-icon>
|
||||||
</v-list-item-avatar>
|
</v-list-item-avatar>
|
||||||
<v-list-item-title>{{ sped }}X</v-list-item-title>
|
<v-list-item-title>{{ sped }}X</v-list-item-title>
|
||||||
|
|
@ -68,7 +53,13 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props: ["video"],
|
props: {
|
||||||
|
currentSpeed: {
|
||||||
|
type: Number,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emits: ["speed"],
|
||||||
data: () => ({
|
data: () => ({
|
||||||
sheet: false,
|
sheet: false,
|
||||||
speeds: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 3, 4, 8, 16],
|
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"
|
:buffer-value="(block.segment[1] / video.duration) * 100"
|
||||||
:value="(block.segment[0] / video.duration) * 100"
|
:value="(block.segment[0] / video.duration) * 100"
|
||||||
style="
|
style="
|
||||||
z-index: 3;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
|
|
@ -19,17 +18,22 @@
|
||||||
:height="seeking ? 4 : 2"
|
:height="seeking ? 4 : 2"
|
||||||
:style="
|
:style="
|
||||||
fullscreen
|
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;'
|
: 'width: 100%; left: 0; bottom: 1px;'
|
||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
|
<!-- // TODO:background-color="colors[block.category]" -->
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
video: {
|
blocks: {
|
||||||
|
type: Array,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
duration: {
|
||||||
type: Object,
|
type: Object,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
|
|
@ -37,10 +41,6 @@ export default {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
videoid: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
fullscreen: {
|
fullscreen: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
required: true,
|
required: true,
|
||||||
|
|
@ -51,69 +51,17 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
data: () => ({
|
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>
|
</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>
|
<template>
|
||||||
<div
|
<div style="color: #fff; font-size: 0.75rem">
|
||||||
style="color: #fff; left: 1rem; font-size: 0.75rem; position: absolute"
|
{{ $vuetube.humanTime(currentTime) }}
|
||||||
:style="fullscreen ? 'bottom: 4.25rem' : 'bottom: 1rem'"
|
<span style="color: #aaa"> / {{ $vuetube.humanTime(duration) }} </span>
|
||||||
>
|
|
||||||
{{ watched }}
|
|
||||||
<span style="color: #aaa"> / {{ duration }} </span>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
video: {
|
duration: {
|
||||||
type: Object,
|
type: Number,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
fullscreen: {
|
currentTime: {
|
||||||
type: Boolean,
|
type: Number,
|
||||||
required: true,
|
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>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -49,7 +49,7 @@
|
||||||
<v-btn
|
<v-btn
|
||||||
v-if="devmode"
|
v-if="devmode"
|
||||||
text
|
text
|
||||||
class="entry text-left text-capitalize"
|
class="entry text-left text-capitalize no-spacing"
|
||||||
to="/mods/developer"
|
to="/mods/developer"
|
||||||
:style="{
|
:style="{
|
||||||
borderRadius: `${$store.state.tweaks.roundTweak / 2}rem`,
|
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;
|
DEVELOPMENT_TEAM = VRCJ7YWR89;
|
||||||
INFOPLIST_FILE = App/Info.plist;
|
INFOPLIST_FILE = App/Info.plist;
|
||||||
IPHONEOS_DEPLOYMENT_TARGET = 12.2;
|
IPHONEOS_DEPLOYMENT_TARGET = 12.2;
|
||||||
"IPHONEOS_DEPLOYMENT_TARGET[sdk=macosx*]" = 14.2;
|
|
||||||
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
|
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
|
||||||
OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
|
OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
|
||||||
PRODUCT_BUNDLE_IDENTIFIER = com.Frontesque.vuetube;
|
PRODUCT_BUNDLE_IDENTIFIER = com.Frontesque.vuetube;
|
||||||
PRODUCT_NAME = "$(TARGET_NAME)";
|
PRODUCT_NAME = "$(TARGET_NAME)";
|
||||||
SUPPORTS_MACCATALYST = YES;
|
SUPPORTS_MACCATALYST = NO;
|
||||||
SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG;
|
SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG;
|
||||||
SWIFT_VERSION = 5.0;
|
SWIFT_VERSION = 5.0;
|
||||||
TARGETED_DEVICE_FAMILY = "1,2,6";
|
TARGETED_DEVICE_FAMILY = "1,2";
|
||||||
};
|
};
|
||||||
name = Debug;
|
name = Debug;
|
||||||
};
|
};
|
||||||
|
|
@ -374,14 +373,13 @@
|
||||||
DEVELOPMENT_TEAM = VRCJ7YWR89;
|
DEVELOPMENT_TEAM = VRCJ7YWR89;
|
||||||
INFOPLIST_FILE = App/Info.plist;
|
INFOPLIST_FILE = App/Info.plist;
|
||||||
IPHONEOS_DEPLOYMENT_TARGET = 12.2;
|
IPHONEOS_DEPLOYMENT_TARGET = 12.2;
|
||||||
"IPHONEOS_DEPLOYMENT_TARGET[sdk=macosx*]" = 14.2;
|
|
||||||
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
|
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
|
||||||
PRODUCT_BUNDLE_IDENTIFIER = com.Frontesque.vuetube;
|
PRODUCT_BUNDLE_IDENTIFIER = com.Frontesque.vuetube;
|
||||||
PRODUCT_NAME = "$(TARGET_NAME)";
|
PRODUCT_NAME = "$(TARGET_NAME)";
|
||||||
SUPPORTS_MACCATALYST = YES;
|
SUPPORTS_MACCATALYST = NO;
|
||||||
SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";
|
SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";
|
||||||
SWIFT_VERSION = 5.0;
|
SWIFT_VERSION = 5.0;
|
||||||
TARGETED_DEVICE_FAMILY = "1,2,6";
|
TARGETED_DEVICE_FAMILY = "1,2";
|
||||||
};
|
};
|
||||||
name = Release;
|
name = Release;
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue