Merge branch 'Frontesque-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/UtilRenderers/slimVideoDescriptionRenderer.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="description" style="white-space: pre-line">
+    <template v-for="(text, index) in render.description.runs">
+      <template
+        v-if="
+          text.navigationEndpoint && text.navigationEndpoint.webviewEndpoint
+        "
+      >
+        <a @click="openExternal(parseLinks(text))" :key="index" class="link">{{
+          text.text
+        }}</a>
+      </template>
+      <template v-else-if="checkInternal(text)">
+        <a @click="openInternal(parseLinks(text))" :key="index" class="link">{{
+          text.text
+        }}</a>
+      </template>
+      <template v-else> {{ text.text }} </template>
+    </template>
+  </div>
+</template>
+
+<style scoped></style>
+
+<script>
+import { Browser } from "@capacitor/browser";
+export default {
+  props: ["render"],
+
+  methods: {
+    parseLinks(base) {
+      const navEndpoint = base.navigationEndpoint;
+      if (!navEndpoint) return;
+      if (navEndpoint.webviewEndpoint) {
+        return navEndpoint.webviewEndpoint.url;
+      } else if (navEndpoint.browseEndpoint) {
+        return navEndpoint.browseEndpoint.canonicalBaseUrl;
+      } else if (navEndpoint.watchEndpoint) {
+        return `/watch?v=${navEndpoint.watchEndpoint.videoId}`;
+      } else if (navEndpoint.navigationEndpoint) {
+        return; //for now
+      }
+    },
+    checkInternal(base) {
+      const navEndpoint = base.navigationEndpoint;
+      if (!navEndpoint) return false;
+      if (navEndpoint.browseEndpoint || navEndpoint.watchEndpoint) {
+        return true;
+      } else {
+        return false;
+      }
+    },
+    async openExternal(url) {
+      await Browser.open({ url: url });
+    },
+    async openInternal(url) {
+      await this.$router.push(url);
+    },
+  },
+};
+</script>

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/components/gridRenderers/gridVideoRenderer.vue

@@ -137,9 +137,5 @@ export default {
       return bottomText.join(" · ");
     },
   },
-
-  mounted() {
-    console.log("gridVideoRenderer received: ", this.video);
-  },
 };
 </script>

NUXT/layouts/default.vue

@@ -128,6 +128,7 @@ export default {
 
   methods: {
     textChanged(text) {
+      if (text.length <= 0) this.response = []; // No text found, no point in calling API
       this.$youtube.autoComplete(text, (res) => {
         const data = res.replace(/^.*?\(/, "").replace(/\)$/, ""); //Format Response
         this.response = JSON.parse(data)[1];

NUXT/pages/home.vue

@@ -32,7 +32,7 @@ export default {
   // The following code is only a demo for debugging purposes, note that each "shelfRenderer" has a "title" value that seems to align to the categories at the top of the vanilla yt app
 
   mounted() {
-    if (!this.recommends.length) {
+    if (!this.recommends.items || !this.recommends.items.length) {
       this.$youtube
         .recommend()
         .then((result) => {

NUXT/pages/watch.vue

@@ -1,6 +1,14 @@
 <template>
   <div class="background">
-    <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 background" flat>
       <v-card-title
         class="mt-2"
@@ -52,7 +60,7 @@
         <p>Channel Stuff</p>
       </v-card-text>
       <div v-if="showMore" class="scroll-y ml-2 mr-2">
-        {{ description }}
+        <slim-video-description-renderer :render="description">
       </div>
 
       <!-- <v-bottom-sheet
@@ -94,9 +102,10 @@
 import { Share } from "@capacitor/share";
 import ShelfRenderer from "~/components/SectionRenderers/shelfRenderer.vue";
 import VidLoadRenderer from "~/components/vidLoadRenderer.vue";
+import SlimVideoDescriptionRenderer from '../components/UtilRenderers/slimVideoDescriptionRenderer.vue';
 
 export default {
-  components: { ShelfRenderer, VidLoadRenderer },
+  components: { ShelfRenderer, VidLoadRenderer, SlimVideoDescriptionRenderer },
   data() {
     return {
       interactions: [
@@ -128,6 +137,7 @@ export default {
       title: null,
       uploaded: null,
       vidSrc: null,
+      sources: [],
       description: null,
       views: null,
       recommends: null,
@@ -141,7 +151,7 @@ export default {
       handler(newRt, oldRt) {
         if (newRt.query.v != oldRt.query.v) {
           // Exit fullscreen if currently in fullscreen
-          this.$refs.player.webkitExitFullscreen();
+          if (this.$refs.player) this.$refs.player.webkitExitFullscreen();
           // Reset player and run getVideo function again
           this.vidSrc = "";
           this.getVideo();
@@ -160,12 +170,19 @@ 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.description = result.renderedData.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();
         this.likes = result.metadata.likes.toLocaleString();
         this.uploaded = result.metadata.uploadDate;

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/plugins/constants.js

@@ -19,7 +19,6 @@ const ytApiVal = {
 module.exports = {
   URLS: url,
   YT_API_VALUES: ytApiVal,
-
   LOGGER_NAMES: {
     search: "Search",
     autoComplete: "AutoComplete",

NUXT/plugins/innertube.js

@@ -181,9 +181,11 @@ class Innertube {
       response.data.output?.playabilityStatus?.status == ("ERROR" || undefined)
     )
       throw new Error(
-        `Could not get information for video: ${response.status_code ||
+        `Could not get information for video: ${
+          response.status_code ||
           response.data.output?.playabilityStatus?.status
-        } - ${response.message || response.data.output?.playabilityStatus?.reason
+        } - ${
+          response.message || response.data.output?.playabilityStatus?.reason
         }`
       );
     const responseInfo = response.data.output;
@@ -241,7 +243,7 @@ class Innertube {
           .find((contents) => contents.slimVideoMetadataSectionRenderer)
           .slimVideoMetadataSectionRenderer?.contents.find(
             (contents) => contents.slimVideoDescriptionRenderer
-          )?.slimVideoDescriptionRenderer.description.runs,
+          )?.slimVideoDescriptionRenderer,
         recommendations: columnUI?.contents.find(
           (contents) => contents.shelfRenderer
         ).shelfRenderer,

NUXT/plugins/youtube.js

@@ -3,6 +3,7 @@ import { Http } from "@capacitor-community/http";
 import Innertube from "./innertube";
 import constants from "./constants";
 import useRender from "./renderers";
+import { Buffer } from "buffer";
 
 //---   Logger Function   ---//
 function logger(func, data, isError = false) {
@@ -14,19 +15,39 @@ function logger(func, data, isError = false) {
   });
 }
 
+function getEncoding(contentType) {
+  const re = /charset=([^()<>@,;:\"/[\]?.=\s]*)/i;
+  const content = re.exec(contentType);
+  console.log(content);
+  if (!content || content[1].toLowerCase() == "utf-8") {
+    return "utf8";
+  }
+  if (content[1].toLowerCase() == "iso-8859-1") {
+    return "latin1";
+  }
+  if (content[1].toLowerCase() == "utf16le") {
+    return "utf16le";
+  }
+}
+
 const searchModule = {
   logs: new Array(),
-
   //---   Get YouTube's Search Auto Complete   ---//
   autoComplete(text, callback) {
-    Http.request({
-      method: "GET",
-      url: `${constants.URLS.YT_SUGGESTIONS}/search`,
-      params: { client: "youtube", q: text },
+    Http.get({
+      url: `${constants.URLS.YT_SUGGESTIONS}/search?q=${encodeURIComponent(
+        text
+      )}&client=youtube&ds=yt`,
+      responseType: "arraybuffer",
     })
       .then((res) => {
-        logger(constants.LOGGER_NAMES.autoComplete, res);
-        callback(res.data);
+        const contentType = res.headers["Content-Type"];
+        // make a new buffer object from res.data
+        const buffer = Buffer.from(res.data, "base64");
+        // convert res.data from iso-8859-1 to utf-8
+        const data = buffer.toString(getEncoding(contentType));
+        logger(constants.LOGGER_NAMES.autoComplete, data);
+        callback(data);
       })
       .catch((err) => {
         logger(constants.LOGGER_NAMES.autoComplete, err, true);