Merge pull request #619 from pixkk/main

Fixed player loading, fixed layout with new updates

.github/workflows/node.js.yml

@@ -0,0 +1,115 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+      - dev
+
+env:
+  NODE_VERSION: 16
+
+jobs:
+  build:
+    name: Build web assets
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Set up Node.js ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+      - name: Install dependencies
+        run: npm i; cd NUXT; npm i
+      - name: Set App Version
+        working-directory: NUXT
+        run: sed -i 's/dev-local/${{ github.sha }}/' nuxt.config.js
+      - name: Build web assets
+        working-directory: NUXT
+        run: npm run generate
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v2
+        with:
+          name: dist
+          path: dist
+  android:
+    name: Build Android platform
+    runs-on: ubuntu-latest
+    needs: [build]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Download artifacts
+        uses: actions/download-artifact@v2
+        with:
+          name: dist
+          path: dist
+      - name: Set up Node.js ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+      - name: Install dependencies
+        run: npm i
+      - name: Set up JDK 11
+        uses: actions/setup-java@v1
+        with:
+          java-version: 11
+      - name: Copy web assets to native platform
+        run: npx cap copy android
+      - name: Update native platform
+        run: npx cap update android
+      - name: Build with Gradle
+        working-directory: android
+        run: chmod +x gradlew; ./gradlew clean assembleRelease -x test  -Pandroid.injected.signing.store.file=/home/runner/work/VueTube/VueTube/android/key.jks -Pandroid.injected.signing.store.password=${{ secrets.ANDROID_STORE_PASSWORD }} -Pandroid.injected.signing.key.alias=${{ secrets.ANDROID_KEY_ALIAS }} -Pandroid.injected.signing.key.password=${{ secrets.ANDROID_KEY_PASSWORD }}
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v2
+        with:
+          name: android
+          path: android/app/build/outputs/apk/release/app-release.apk
+        
+  ios:
+    name: Build iOS platform
+    runs-on: macos-latest
+    needs: [build]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Download artifacts
+        uses: actions/download-artifact@v2
+        with:
+          name: dist
+          path: dist
+      - name: Set up Node.js ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+      - name: Install dependencies
+        run: npm i
+      - name: Copy web assets to native platform
+        run: npx cap copy ios
+      - name: Update native platform
+        run: npx cap update ios
+      - name: Add empty `GoogleService-Info.plist`
+        run: echo "$GOOGLE_SERVICE_INFO_PLIST" > ios/App/App/GoogleService-Info.plist
+        env:
+          GOOGLE_SERVICE_INFO_PLIST: ${{secrets.GOOGLE_SERVICE_INFO_PLIST}}
+      - name: Build and archive with xcodebuild
+        working-directory: ios
+        run: xcodebuild
+          -workspace App/App.xcworkspace
+          -scheme App
+          -archivePath App/build/App.xarchive
+          clean build archive
+          CODE_SIGN_IDENTITY=""
+          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: VueTube.ipa

NUXT/components/Player/index.vue

@@ -380,7 +380,7 @@ export default {
       required: true,
     },
     recommends: {
-      type: Array,
+      type: Object,
       default: () => {
         return [];
       },
@@ -416,6 +416,7 @@ export default {
   mounted() {
     console.log("sources", this.sources);
     console.log("recommends", this.recommends);
+    console.log("video", this.video);
     this.vid = this.$refs.player;
 
     // TODO: this.$store.state.player.quality, check if exists and select the closest one
@@ -535,7 +536,7 @@ export default {
       if (this.xhr) this.xhr.abort();
       if (this.isFullscreen) this.exitFullscreen();
       if (this.bufferingDetected) clearTimeout(this.bufferingDetected);
-      screen.orientation.removeEventListener("change");
+      // screen.orientation.removeEventListener("change");
       this.$refs.player.removeEventListener("loadeddata", this.loadedDataEvent);
       this.$refs.player.removeEventListener("timeupdate", this.timeUpdateEvent);
       this.$refs.player.removeEventListener("progress", this.progressEvent);

NUXT/pages/home.vue

@@ -68,7 +68,9 @@ export default {
         .then((result) => {
           if (result) this.recommends = [result];
         })
-        .catch(error => {});
+        .catch((error) => {
+          console.error(error);
+        });
     }
   },
 };

NUXT/pages/mods/updates.vue

@@ -55,13 +55,19 @@
       >
         <div>
           {{ lang.published }}:
-          {{ new Date(update.created_at).toLocaleString() }}
+          {{ new Date(latestVersion.assets[0].created_at).toLocaleString() }}
         </div>
         <div>
           {{ lang.size }}:
-          {{ require("~/plugins/utils").humanFileSize(update.size) }}
+          {{
+            require("~/plugins/utils").humanFileSize(
+              latestVersion.assets[0].size
+            )
+          }}
+        </div>
+        <div>
+          {{ lang.users }}: {{ latestVersion.assets[0].download_count }}
         </div>
-        <div>{{ lang.users }}: {{ update.download_count }}</div>
       </div>
 
       <div
@@ -123,7 +129,9 @@ export default {
       latestVersion: "",
       lang: {},
       status: "checking",
-      update: {},
+      update: {
+        created_at: "",
+      },
       downloading: false,
     };
   },
@@ -185,7 +193,7 @@ export default {
 
     async install() {
       this.downloading = true;
-      await this.$update(this.update.browser_download_url).catch(() => {
+      await this.$update(this.latestVersion.assets[0].url).catch(() => {
         this.downloading = false;
       });
       //window.open(this.update.browser_download_url, '_blank');

NUXT/plugins/constants.js

@@ -40,6 +40,19 @@ module.exports = {
     return headers;
   },
 
+  INNERTUBE_NEW_HEADER: (info) => {
+    let headers = {
+      accept: "*/*",
+      "user-agent": info.userAgent,
+      "accept-language": `${info.hl}-${info.gl},${info.hl};q=0.9`,
+      "content-type": "application/json",
+      "x-goog-authuser": 0,
+      "x-goog-visitor-id": info.visitorData || "",
+      "x-youtube-client-name": "2",
+      "x-youtube-client-version": "2.20230502.01.00",
+    };
+    return headers;
+  },
   INNERTUBE_CLIENT: (info) => {
     let client = {
       gl: info.gl,
@@ -59,4 +72,43 @@ module.exports = {
     };
     return client;
   },
+  INNERTUBE_VIDEO: (info) => {
+    let client = {
+      gl: info.gl,
+      hl: info.hl,
+      deviceMake: info.deviceMake,
+      deviceModel: info.deviceModel,
+      userAgent: info.userAgent,
+      clientName: "MWEB",
+      clientVersion: "2.20230502.01.00",
+      osName: info.osName,
+      osVersion: info.osVersion,
+      platform: "MOBILE",
+      playerType: "UNIPLAYER",
+      screenPixelDensity: "3",
+      originalUrl: info.originalUrl,
+      configInfo: info.configInfo,
+      remoteHost: info.remoteHost,
+      visitorData: info.visitorData,
+      clientFormFactor: "SMALL_FORM_FACTOR",
+      screenDensityFloat: "1",
+      timeZone: info.timeZone,
+      browserName: info.browserName,
+      browserVersion: info.browserVersion,
+      acceptHeader:
+        "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7",
+      deviceExperimentId: info.deviceExperimentId,
+      screenWidthPoints: info.screenWidthPoints,
+      screenHeightPoints: info.screenHeightPoints,
+      utcOffsetMinutes: info.utcOffsetMinutes,
+      userInterfaceTheme: "USER_INTERFACE_THEME_LIGHT",
+      memoryTotalKbytes: "8000000",
+      clientScreen: "WATCH",
+      mainAppWebInfo: {
+        webDisplayMode: "WEB_DISPLAY_MODE_BROWSER",
+        isWebNativeShareAvailable: true,
+      },
+    };
+    return client;
+  },
 };

NUXT/plugins/innertube.js

@@ -32,7 +32,7 @@ class Innertube {
         this.ErrorCallback(html.message, true);
       try {
         const data = JSON.parse(
-          getBetweenStrings(html.data, "ytcfg.set(", ");")
+          "{" + getBetweenStrings(html.data, "ytcfg.set({", ");")
         );
         if (data.INNERTUBE_CONTEXT) {
           this.key = data.INNERTUBE_API_KEY;
@@ -81,7 +81,11 @@ class Innertube {
   //--- API Calls ---//
 
   async browseAsync(action_type, args = {}) {
-    let data = { context: this.context };
+    let data = {
+      context: {
+        client: constants.INNERTUBE_CLIENT(this.context.client),
+      },
+    };
 
     switch (action_type) {
       case "recommendations":
@@ -160,7 +164,12 @@ class Innertube {
   }
 
   async getVidAsync(id) {
-    let data = { context: this.context, videoId: id };
+    let data = {
+      context: {
+        client: constants.INNERTUBE_VIDEO(this.context.client),
+      },
+      videoId: id,
+    };
     const responseNext = await Http.post({
       url: `${constants.URLS.YT_BASE_API}/next?key=${this.key}`,
       data: {
@@ -179,8 +188,33 @@ class Innertube {
 
     const response = await Http.post({
       url: `${constants.URLS.YT_BASE_API}/player?key=${this.key}`,
-      data: data,
+      data: {
-      headers: constants.INNERTUBE_HEADER(this.context.client),
+        ...data,
+        ...{
+          contentCheckOk: false,
+          mwebCapabilities: {
+            mobileClientSupportsLivestream: true,
+          },
+          playbackContext: {
+            contentPlaybackContext: {
+              currentUrl: "/watch?v=" + id,
+              vis: 0,
+              splay: false,
+              autoCaptionsDefaultOn: false,
+              autonavState: "STATE_NONE",
+              html5Preference: "HTML5_PREF_WANTS",
+              signatureTimestamp: 19473,
+              referer: "https://m.youtube.com/",
+              lactMilliseconds: "-1",
+              watchAmbientModeContext: {
+                watchAmbientModeEnabled: true,
+              },
+            },
+          },
+        },
+      },
+      // headers: constants.INNERTUBE_HEADER(this.context.client),
+      headers: constants.INNERTUBE_NEW_HEADER(this.context.client),
     }).catch((error) => error);
 
     if (response.error)
@@ -336,7 +370,6 @@ class Innertube {
     const ownerData = vidMetadata.contents.find(
       (content) => content.slimOwnerRenderer
     )?.slimOwnerRenderer;
-
     const vidData = {
       id: details.videoId,
       title: details.title,

NUXT/plugins/languages/ukrainian.js

@@ -32,6 +32,26 @@ module.exports = {
   mods: {
     general: {
       language: "Мова",
+      backup: "Backup",
+      backupinfo: "Backup or restore your application settings",
+      restore: "Restore",
+      personalizedrecommendations: "Персоналізовані рекомендації",
+      personalizedrecommendationsinfo:
+        "Отримуйте персоналізовані рекомендації в обмін на надсилання телеметричних даних про час перегляду.",
+    },
+    developer: {
+      registryeditor: "Registry editor",
+      registrywarning: "CHANGING ENTRIES MAY CAUSE YOUR APP TO BREAK!",
+      createentry: "Create entry",
+      createentryfull: "Create registry entry",
+      cancel: "Cancel",
+      create: "Create",
+      key: "Key",
+      value: "Value",
+      confirmdelete: "Confirm delete",
+      areyousure: "Are you sure that you want to delete?",
+      delete: "Delete",
+      change: "Change",
     },
     theme: {
       normal: "Звичайна",
@@ -58,6 +78,14 @@ module.exports = {
       view: "Переглянути",
       latest: "Остання",
       installed: "Встановлена",
+      size: "Розмір",
+      users: "Завантажень",
+      published: "Опубліковано",
+
+      okay: "ОК",
+      refresh: "Оновити",
+      update: "Завантажити",
+      later: "Пізніше",
     },
     logs: {
       more: "Більше",

android/app/src/main/AndroidManifest.xml

@@ -21,7 +21,7 @@
 
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />
-                <category android:name="android.intent.category.LAUNCHER" />>
+                <category android:name="android.intent.category.LAUNCHER" />
             </intent-filter>
             <intent-filter>
                 <action android:name="android.intent.action.VIEW" />