Merge branch 'main' of https://github.com/Frontesque/VueTube into main

NUXT/components/Player/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <div @click="toggleControls()" class="content" :style="showControls ? 'background: rgba(0, 0, 0, 0.5);' : '' ">
+    <div @click="toggleControls()" class="content">
 
-      <div v-show="showControls">
+      <div v-show="showControls" class="controls">
         <v-btn class="pausePlay" text @click="playing = !playing">
           <v-icon size="5em" color="white">mdi-{{ playing ? "pause" : "play" }}</v-icon>
         </v-btn>
@@ -54,6 +54,7 @@ export default {
 
   watch: {
     playing() {
+      console.log("Changed Playback State");
       this.playing ? this.$refs.player.play() : this.$refs.player.pause();
     },
   },
@@ -62,7 +63,11 @@ export default {
     const src = this.sources[this.sources.length - 1].url;
     this.vidSrc = src;
 
-    setInterval(this.updateTiming, 100);
+    console.log("Beta Player Sources Debug:", this.sources, src);
+
+    setTimeout(function() { this.$refs.player.play(); }, 1000); // Auto Play
+
+    setInterval(this.updateTiming, 100); // Auto Update Scrubber
   },
 
   methods: {
@@ -112,6 +117,9 @@ export default {
 }
 
 /***   General Overlay Styling   ***/
+.controls {
+  z-index: 999;
+}
 .pausePlay {
   position: absolute;
   top: 50%;

NUXT/pages/watch.vue

@@ -5,7 +5,11 @@
         <v-icon>mdi-chevron-down</v-icon>
       </v-btn>
       <!--   VueTube Player V1   -->
-      <vuetubePlayer :sources="sources" v-if="useBetaPlayer === 'true'" />
+      <vuetubePlayer
+        :sources="sources"
+        v-if="useBetaPlayer === 'true' && sources.length > 0"
+      />
+
       <!--   Stock Player   -->
       <videoPlayer
         id="player"
@@ -13,6 +17,7 @@
         v-touch="{ down: () => $router.push('/home') }"
         class="background"
         :vid-src="vidSrc"
+        v-if="useBetaPlayer !== 'true'"
       />
     </div>