Generate po tokens for electron

README.md

@@ -24,7 +24,7 @@
 - Mini player.
 - Silence skipper (Experimental.)
 - ffmpeg integration for downloading videos with audio at any quality ([Configuration required](./docs/DOCKER.md#step-7-optional-enabling-downloads)).
-- [YouTube.js](https://github.com/LuanRT/YouTube.js) fallback if Invidious fails loading videos for Desktop & Android.
+- [YouTube.js](https://github.com/LuanRT/YouTube.js) fallback if Invidious fails loading videos for Desktop.
 - Preview video on hover.
 - Sponsorblock built-in.
 - Return YouTube dislikes built-in.

materialious/electron/package.json

@@ -27,7 +27,8 @@
 		"electron-unhandled": "^4.0.1",
 		"electron-updater": "^6.3.4",
 		"electron-window-state": "^5.0.3",
-		"jsonfile": "^6.1.0"
+		"jsonfile": "^6.1.0",
+		"youtube-po-token-generator": "^0.2.0"
 	},
 	"devDependencies": {
 		"electron": "^32.1.0",
@@ -39,4 +40,4 @@
 		"capacitor",
 		"electron"
 	]
-}
+}

materialious/electron/src/preload.ts

@@ -1,4 +1,6 @@
 require('./rt/electron-rt');
-//////////////////////////////
-// User Defined Preload scripts below
-console.log('User Preload!');
+const { contextBridge, ipcRenderer } = require('electron');
+
+contextBridge.exposeInMainWorld('electron', {
+  generatePoToken: () => ipcRenderer.invoke('generate-po-token')
+});

materialious/electron/src/setup.ts

@@ -6,11 +6,12 @@ import {
 } from '@capacitor-community/electron';
 import chokidar from 'chokidar';
 import type { MenuItemConstructorOptions } from 'electron';
-import { app, BrowserWindow, Menu, MenuItem, nativeImage, session, Tray } from 'electron';
+import { app, BrowserWindow, ipcMain, Menu, MenuItem, nativeImage, session, Tray } from 'electron';
 import electronIsDev from 'electron-is-dev';
 import electronServe from 'electron-serve';
 import windowStateKeeper from 'electron-window-state';
 import { join } from 'path';
+import { generate } from 'youtube-po-token-generator';
 
 // Define components for a watcher to detect when the webapp is changed so we can reload in Dev mode.
 const reloadWatcher = {
@@ -214,6 +215,15 @@ export class ElectronCapacitorApp {
         CapElectronEventEmitter.emit('CAPELECTRON_DeeplinkListenerInitialized', '');
       }, 400);
     });
+
+    ipcMain.handle('generate-po-token', async () => {
+      try {
+        return await generate();
+      } catch (error) {
+        console.error('Error generating token:', error);
+        return { error: error.message }; // Return error to renderer
+      }
+    });
   }
 }
 

materialious/src/lib/Api/index.ts

@@ -72,7 +72,7 @@ export async function getPopular(): Promise<Video[]> {
 
 export async function getVideo(videoId: string, local: boolean = false): Promise<VideoPlay> {
 	const resp = await fetch(setRegion(buildPath(`videos/${videoId}?local=${local}`)));
-	if (!resp.ok && Capacitor.getPlatform() !== 'web' && get(playerYouTubeJsFallback)) {
+	if (!resp.ok && Capacitor.getPlatform() === 'electron' && get(playerYouTubeJsFallback)) {
 		return await patchYoutubeJs(videoId);
 	} else {
 		await fetchErrorHandle(resp);

materialious/src/lib/Settings.svelte

@@ -31,8 +31,6 @@
 		playerSavePlaybackPositionStore,
 		playerTheatreModeByDefaultStore,
 		playerYouTubeJsFallback,
-		playerYouTubeJsPoToken,
-		playerYouTubeJsVisitorData,
 		returnYTDislikesInstanceStore,
 		returnYtDislikesStore,
 		silenceSkipperStore,
@@ -50,8 +48,6 @@
 	sponsorBlockCategoriesStore.subscribe((value) => (sponsorCategoriesList = value));
 
 	let sponsorBlockInstance = get(sponsorBlockUrlStore);
-	let youTubeJsVisitorData = get(playerYouTubeJsVisitorData);
-	let youTubeJsPoToken = get(playerYouTubeJsPoToken);
 	let synciousInstance = get(synciousInstanceStore);
 	let returnYTInstance = get(returnYTDislikesInstanceStore);
 	let invidiousInstance = get(instanceStore);
@@ -445,7 +441,7 @@
 			</nav>
 		</div>
 
-		{#if Capacitor.getPlatform() !== 'web'}
+		{#if Capacitor.getPlatform() === 'electron'}
 			<div class="field no-margin">
 				<nav class="no-padding">
 					<div class="max">
@@ -461,38 +457,6 @@
 					</label>
 				</nav>
 			</div>
-
-			<form
-				on:submit|preventDefault={() => {
-					playerYouTubeJsVisitorData.set(youTubeJsVisitorData);
-				}}
-			>
-				<nav>
-					<div class="field label border max">
-						<input bind:value={youTubeJsVisitorData} name="visitor-data" type="text" />
-						<label for="visitor-data">Visitor data</label>
-					</div>
-					<button class="square round">
-						<i>done</i>
-					</button>
-				</nav>
-			</form>
-
-			<form
-				on:submit|preventDefault={() => {
-					playerYouTubeJsPoToken.set(youTubeJsPoToken);
-				}}
-			>
-				<nav>
-					<div class="field label border max">
-						<input bind:value={youTubeJsPoToken} name="po-token" type="text" />
-						<label for="po-token">Po token</label>
-					</div>
-					<button class="square round">
-						<i>done</i>
-					</button>
-				</nav>
-			</form>
 		{/if}
 	</div>
 

materialious/src/lib/patches/youtubejs.ts

@@ -1,21 +1,15 @@
 import type { Image, Thumbnail, VideoBase, VideoPlay } from '$lib/Api/model';
 import { numberWithCommas } from '$lib/misc';
-import { playerYouTubeJsPoToken, playerYouTubeJsVisitorData } from '$lib/store';
-import { get } from 'svelte/store';
 
 export async function patchYoutubeJs(videoId: string): Promise<VideoPlay> {
   const innertube = (await import('youtubei.js')).Innertube;
 
-  let innertubeConfig: Record<string, string> = {
-    visitor_data: get(playerYouTubeJsVisitorData),
-    po_token: get(playerYouTubeJsPoToken)
-  };
+  const tokens = await window.electron.generatePoToken();
 
-  if (innertubeConfig.visitor_data === '' || innertubeConfig.po_token === '') {
-    innertubeConfig = {};
-  }
-
-  const youtube = await innertube.create(innertubeConfig);
+  const youtube = await innertube.create({
+    visitor_data: tokens.visitorData,
+    po_token: tokens.poToken
+  });
 
   const video = await youtube.getInfo(videoId);
 

materialious/src/lib/store.ts

@@ -40,8 +40,6 @@ export const playerAutoplayNextByDefaultStore = persisted('autoplayNextByDefault
 export const playerMiniPlayerStore = persisted('miniPlayer', true);
 export const playerAndroidBackgroundPlayStore = persisted('androidBackgroundPlayer', true);
 export const playerYouTubeJsFallback = persisted('youTubeJsFallback', true);
-export const playerYouTubeJsVisitorData = persisted('youTubeJsVisitorData', '');
-export const playerYouTubeJsPoToken = persisted('youTubeJsPoToken', '');
 
 export const returnYtDislikesStore = persisted('returnYtDislikes', false);
 export const returnYTDislikesInstanceStore: Writable<string | null | undefined> = persisted(