mirror of https://github.com/VueTubeApp/VueTube
bunch of player stuff
This commit is contained in:
parent
a5ef3b33cd
commit
5ec17950c6
|
@ -39,10 +39,18 @@
|
|||
<div style="color: #aaa; font-size: 0.75rem">{{ video.channelName }}</div>
|
||||
</div>
|
||||
|
||||
<!-- <v-btn
|
||||
<!-- // TODO: merge the bottom 2 into 1 reusable component -->
|
||||
<v-btn
|
||||
text
|
||||
tile
|
||||
style="position: absolute; top: 0; left: 0; width: 50%; height: 100%"
|
||||
style="
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
"
|
||||
@dblclick.stop="$refs.player.currentTime -= $refs.player.duration / 10"
|
||||
>
|
||||
<v-icon>mdi-rewind</v-icon>
|
||||
|
@ -51,11 +59,18 @@
|
|||
<v-btn
|
||||
text
|
||||
tile
|
||||
style="position: absolute; top: 0; left: 50%; width: 50%; height: 100%"
|
||||
style="
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
"
|
||||
@dblclick.stop="$refs.player.currentTime += $refs.player.duration / 10"
|
||||
>
|
||||
<v-icon>mdi-fast-forward</v-icon>
|
||||
</v-btn> -->
|
||||
</v-btn>
|
||||
|
||||
<div
|
||||
style="transition: opacity 0.15s ease-in-out"
|
||||
|
@ -66,13 +81,70 @@
|
|||
<captions />
|
||||
<close />
|
||||
|
||||
<v-btn
|
||||
fab
|
||||
text
|
||||
small
|
||||
style="
|
||||
position: absolute;
|
||||
top: calc(50% - 1.25rem);
|
||||
left: calc(50% - 9.5rem);
|
||||
"
|
||||
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% - 6rem);
|
||||
"
|
||||
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>
|
||||
|
||||
<watchtime v-if="$refs.player" :video="$refs.player" />
|
||||
<!-- // 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
|
||||
|
|
|
@ -2,20 +2,15 @@
|
|||
<v-btn
|
||||
fab
|
||||
text
|
||||
style="
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
position: absolute;
|
||||
top: calc(50% - 2.5rem);
|
||||
left: calc(50% - 2.5rem);
|
||||
"
|
||||
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()
|
||||
"
|
||||
>
|
||||
<v-icon size="5rem">
|
||||
<v-icon size="3.5rem">
|
||||
{{ paused ? "mdi-play" : "mdi-pause" }}
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
|
|
|
@ -17,7 +17,12 @@
|
|||
{{ sources.find((src) => src.url == video.src).qualityLabel }}
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-card class="background">
|
||||
<v-card
|
||||
v-touch="{
|
||||
down: () => (sheet = false),
|
||||
}"
|
||||
class="background"
|
||||
>
|
||||
<v-subheader>Quality for current video</v-subheader>
|
||||
<v-card-text style="max-height: 50vh" class="pa-0">
|
||||
<v-list-item
|
||||
|
|
|
@ -17,7 +17,12 @@
|
|||
{{ video.playbackRate }}X
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-card class="background">
|
||||
<v-card
|
||||
v-touch="{
|
||||
down: () => (sheet = false),
|
||||
}"
|
||||
class="background"
|
||||
>
|
||||
<v-subheader>Playback Speed</v-subheader>
|
||||
<v-card-text style="height: 50vh" class="pa-0">
|
||||
<v-list-item
|
||||
|
|
|
@ -51,22 +51,25 @@
|
|||
<v-icon class="ml-4" v-if="showMore">mdi-chevron-up</v-icon>
|
||||
<v-icon class="ml-4" v-else>mdi-chevron-down</v-icon>
|
||||
</div>
|
||||
<div class="d-flex pl-6">
|
||||
<div class="d-flex pl-4">
|
||||
<v-btn
|
||||
v-for="(item, index) in interactions"
|
||||
:key="index"
|
||||
text
|
||||
fab
|
||||
no-caps
|
||||
class="vertical-button mx-1"
|
||||
elevation="0"
|
||||
style="width: 4.2rem !important; height: 4.2rem !important"
|
||||
style="
|
||||
width: 4.2rem !important;
|
||||
height: 4.2rem !important;
|
||||
text-decoration: none !important;
|
||||
"
|
||||
:disabled="item.disabled"
|
||||
@click="callMethodByName(item.actionName)"
|
||||
>
|
||||
<v-icon v-text="item.icon" />
|
||||
<div
|
||||
class="mt-2"
|
||||
class="mt-1"
|
||||
style="font-size: 0.66rem"
|
||||
v-text="item.value || item.name"
|
||||
/>
|
||||
|
|
Loading…
Reference in New Issue