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

.github/workflows/ci.yml

@@ -106,8 +106,11 @@ jobs:
           CODE_SIGNING_REQUIRED=NO
           CODE_SIGNING_ALLOWED="NO"
           CODE_SIGN_ENTITLEMENTS=""
+      - name: Make IPA
+        run: mkdir Payload && mv ~/Library/Developer/Xcode/DerivedData/App-*/Build/Products/Debug-iphoneos/App.app Payload && zip -r Payload.zip Payload && mv Payload.zip VueTube.ipa
+    
       - name: Upload artifacts
         uses: actions/upload-artifact@v2
         with:
           name: iOS
-          path: ~/Library/Developer/Xcode/DerivedData/App-*/Build/Products/Debug-iphoneos/App.app
+          path: VueTube.ipa

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/layouts/default.vue

@@ -25,7 +25,7 @@
       >
         <!-- element above removes artifacting from things like v-ripple by -->
         <!-- scrollbox below must be a standalone div -->
-        <div class="scroll-y" ref="pgscroll" style="height: 100%">
+        <div ref="pgscroll" class="scroll-y" style="height: 100%">
           <nuxt v-show="!search" />
         </div>
       </div>
@@ -101,7 +101,7 @@ export default {
       // Exit fullscreen if currently in fullscreen
       this.$vuetube.statusBar.show();
       this.$vuetube.navigationBar.show();
-    }
+    },
   },
 
   beforeCreate() {
@@ -165,6 +165,10 @@ export default {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
     Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 }
+*:focus::before {
+  opacity: 0 !important;
+}
+
 .scroll-y {
   overflow-y: scroll !important; /* has to be scroll, not auto */
   -webkit-overflow-scrolling: touch !important;

NUXT/pages/watch.vue

@@ -1,6 +1,14 @@
 <template>
   <div class="accent">
-    <videoPlayer :vid-src="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 +136,7 @@ export default {
       title: null,
       uploaded: null,
       vidSrc: null,
+      sources: [],
       description: null,
       views: null,
       recommends: null,
@@ -160,10 +169,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>

NUXT/static/icon.svg

@@ -1,7 +1 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" version="1.1" viewBox="0 0 512 512" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><g><path d="M318.761,269.869C329.456,263.716 329.456,248.285 318.761,242.132L280.096,219.886L319.969,201.293L336.714,210.927L390.951,242.132C401.646,248.285 401.646,263.716 390.951,269.869L336.732,301.062L336.714,301.073L318.643,311.47L278.77,292.877L318.761,269.869ZM197,294.468L197,312.264C197.005,324.563 210.308,332.258 220.971,326.13L220.979,326.126L240.637,314.816L280.509,333.409L238.932,357.33L238.904,357.346L184.979,388.371C174.312,394.508 161,386.808 161,374.502L161,277.681L197,294.468ZM281.835,179.354L241.962,197.947L220.979,185.874L220.966,185.867C210.302,179.744 197,187.442 197,199.743L197,218.913L161,235.7L161,137.498C161,125.192 174.312,117.492 184.979,123.629L238.925,154.666L238.932,154.67L281.835,179.354Z" transform="matrix(1.84351,0,0,1.84351,-236.17,-215.938)" style="fill:#fff"/></g></svg>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g transform="matrix(1.84351,0,0,1.84351,-236.17,-215.938)">
-        <path d="M318.761,269.869C329.456,263.716 329.456,248.285 318.761,242.132L280.096,219.886L319.969,201.293L336.714,210.927L390.951,242.132C401.646,248.285 401.646,263.716 390.951,269.869L336.732,301.062L336.714,301.073L318.643,311.47L278.77,292.877L318.761,269.869ZM197,294.468L197,312.264C197.005,324.563 210.308,332.258 220.971,326.13L220.979,326.126L240.637,314.816L280.509,333.409L238.932,357.33L238.904,357.346L184.979,388.371C174.312,394.508 161,386.808 161,374.502L161,277.681L197,294.468ZM281.835,179.354L241.962,197.947L220.979,185.874L220.966,185.867C210.302,179.744 197,187.442 197,199.743L197,218.913L161,235.7L161,137.498C161,125.192 174.312,117.492 184.979,123.629L238.925,154.666L238.932,154.67L281.835,179.354Z" style="fill:white;"/>
-    </g>
-</svg>

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"