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> <template>
<div> <div class="videoControls">
<div class="videoControlsWrap">
<v-btn class="centerVideoControls" @click="togglePlaying()" text> <v-btn class="centerVideoControls" @click="togglePlaying()" text>
<v-icon x-large v-text="playing ? 'mdi-pause' : 'mdi-play' " ref="pausePlayIndicator" /> <v-icon x-large v-text="playing ? 'mdi-pause' : 'mdi-play' " ref="pausePlayIndicator" />
</v-btn> </v-btn>
</div>
</div> </div>
</template> </template>
@ -17,10 +19,25 @@
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.pausePlay { .pausePlay {
min-height: 5em; min-height: 5em;
min-width: 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> </style>
<script> <script>

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

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