feat: ✨ Start on custom player

NUXT/components/VTPlayerV1.vue

@@ -0,0 +1,132 @@
+<template>
+  <div>
+
+    <div class="content">
+
+      <v-btn @click="playing = !playing" class="pausePlay" text><v-icon size="5em" color="white">mdi-{{playing ? 'pause' : 'play' }}</v-icon></v-btn>
+
+      <div class="seekBar">
+        <v-slider dense hide-details min="0" :max="videoEnd" :value="currentTime" @change="scrubTo(value)" />
+      </div>
+
+      <video
+        autoplay
+        :src="vidSrc"
+        width="100%"
+        @webkitfullscreenchange="handleFullscreenChange"
+        ref="player"
+        style="max-height: 50vh"
+      />
+    </div>
+
+    <div v-for="(source, index) in sources" :key="index">
+      {{ source.qualityLabel }}
+    </div>
+
+
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      sources: {
+        type: Array,
+        default: [],
+      },
+    },
+    data() {
+      return {
+        //---   Basic Information   ---//
+        playerVersion: 0.1,
+        vidSrc: null,
+
+        //---   Player State Information   ---//
+        playing: true,
+        currentTime: 0,
+        videoEnd: 0,
+
+      }
+    },
+
+    watch: {
+      playing() {
+        this.playing
+        ? this.$refs.player.play()
+        : this.$refs.player.pause()
+      },
+    },
+
+    methods: {
+      handleFullscreenChange() {
+        if (document.fullscreenElement === this.$refs.player) {
+          this.$vuetube.statusBar.hide();
+          this.$vuetube.navigationBar.hide();
+        } else {
+          this.$vuetube.statusBar.show();
+          this.$vuetube.navigationBar.show();
+        }
+      },
+
+      scrubTo(val) {
+        const player = this.$refs.player;
+        player.currentTime = val;
+        console.log(val, this.currentTime, player.currentTime)
+      },
+
+      updateTiming() {
+        const player = this.$refs.player;
+        this.videoEnd = player?.duration;
+        this.currentTime = player?.currentTime;
+        console.log(player.currentTime, this.currentTime)
+      }
+
+    },
+
+
+    mounted() {
+      const src = this.sources[this.sources.length-1].url;
+      this.vidSrc = src;
+
+      setInterval(this.updateTiming, 100);
+    }
+
+
+  }
+
+</script>
+
+<style scoped>
+/***   Overlay Information   ***/
+.content {
+  position: relative;
+  width: 500px;
+  margin: 0 auto;
+}
+.content video {
+  width: 100%;
+  display: block;
+}
+.content:before {
+  content: '';
+  position: absolute;
+  background: rgba(0, 0, 0, 0.5);
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+/***   General Overlay Styling   ***/
+.pausePlay {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.seekBar {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+}
+</style>

NUXT/pages/watch.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="accent">
-    <videoPlayer :vidSrc="vidSrc" />
+
+    <!--   Stock Player   -->
+    <videoPlayer :vidSrc="vidSrc" /> 
+
+    <!--   VueTube Player V1   -->
+    <!-- <VTPlayerV1 :sources="sources" v-if="sources.length > 0" />-->
+
+
     <v-card v-if="loaded" class="ml-2 mr-2 accent" flat>
       <v-card-title
         class="mt-2"
@@ -128,6 +135,7 @@ export default {
       title: null,
       uploaded: null,
       vidSrc: null,
+      sources: [],
       description: null,
       views: null,
       recommends: null,
@@ -145,10 +153,17 @@ export default {
       this.$youtube.getVid(this.$route.query.v).then((result) => {
         console.log("Video info data", result);
         console.log(result.availableResolutions);
+
+        //---   VueTube Player v1   ---//
+        this.sources = result.availableResolutions;
+
+        //---   Legacy Player   ---//
         this.vidSrc =
           result.availableResolutions[
             result.availableResolutions.length - 1
           ].url; // Takes the highest available resolution with both video and Audio. Note this will be lower than the actual highest resolution
+        
+        //---   Content Stuff   ---//
         this.title = result.title;
         this.description = result.metadata.description; // While this works, I do recommend using the rendered description instead in the future as there are some things a pure string wouldn't work with
         this.views = result.metadata.viewCount.toLocaleString();

NUXT/pages/watch_debug.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="accent">
+
+    <VTPlayerV1 :sources="sources" v-if="sources.length > 0" />
+
+  </div>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      sources: [],
+    };
+  },
+  mounted() {
+    this.sources = [{"itag":17,"url":"https://api.celeste.photos/squish.mp4","mimeType":"video/3gpp; codecs=\"mp4v.20.3, mp4a.40.2\"","bitrate":86688,"width":176,"height":144,"lastModified":"1645932929087816","contentLength":"159084","quality":"small","fps":12,"qualityLabel":"144p","projectionType":"RECTANGULAR","averageBitrate":85910,"audioQuality":"AUDIO_QUALITY_LOW","approxDurationMs":"14814","audioSampleRate":"22050","audioChannels":1}]
+  },
+};
+</script>

android/app/src/main/assets/capacitor.config.json

@@ -2,7 +2,7 @@
 	"appId": "com.Frontesque.vuetube",
 	"appName": "VueTube",
 	"webDir": "dist",
-	"bundledWebRuntime": true,
+	"bundledWebRuntime": false,
 	"server": {
 		"hostname": "youtube.com",
 		"androidScheme": "https"

ios/App/App/capacitor.config.json

@@ -2,7 +2,7 @@
 	"appId": "com.Frontesque.vuetube",
 	"appName": "VueTube",
 	"webDir": "dist",
-	"bundledWebRuntime": true,
+	"bundledWebRuntime": false,
 	"server": {
 		"hostname": "youtube.com",
 		"androidScheme": "https"