etc
/
VueTube
mirror of https://github.com/VueTubeApp/VueTube
0
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor: 🎨 Beta Player Updates 

Change how the controls overlay is handled
This commit is contained in:
Kenny 2022-05-04 08:56:17 -04:00
parent 41326f8d5a
commit 64f5310262
2 changed files with 24 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
NUXT/components/Player/controls.vue
View File

@ -1,11 +1,13 @@
<template>
<div>
<div class="videoControls">
<div class="videoControlsWrap">
<v-btn class="centerVideoControls" @click="togglePlaying()" text>
<v-icon x-large v-text="playing ? 'mdi-pause' : 'mdi-play' " ref="pausePlayIndicator" />
</v-btn>
<v-btn class="centerVideoControls" @click="togglePlaying()" text>
<v-icon x-large v-text="playing ? 'mdi-pause' : 'mdi-play' " ref="pausePlayIndicator" />
</v-btn>
</div>
</div>
</template>
@ -17,10 +19,25 @@
left: 50%;
transform: translate(-50%, -50%);
}
.pausePlay {
min-height: 5em;
min-width: 5em;
}
.videoControls {
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
.videoControlsWrap {
position: relative;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
</style>
<script>

32
NUXT/components/Player/index.vue
View File

@ -8,41 +8,15 @@
style="max-height: 50vh; display: block"
@webkitfullscreenchange="handleFullscreenChange"
/>
<seekbar :video=$refs.player v-if="$refs.player" />
<!-- Video Controls -->
<div class="videoControls" v-if="$refs.player">
<div class="videoControlsWrap">
<controls :video=$refs.player />
</div>
</div>
<!-- End Video Controls -->
<controls v-if="$refs.player" :video="$refs.player" />
<!-- <v-slider v-model="value" step="0"></v-slider> -->
</div>
</template>
<style scoped>
.videoControls {
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
.videoControlsWrap {
position: relative;
width: 100%;
height: 100%;
}
</style>
<script>
import seekbar from '~/components/Player/seekbar.vue';
import controls from '~/components/Player/controls.vue';