I can't believe I figured out how to emulate ytmusic api calls

2024-02-24 02:06:02 -05:00
parent c7b9b214b7
commit fe37c8aa6e
12 changed files with 166 additions and 72 deletions
--- a/src/lib/server/users.db
+++ b/src/lib/server/users.db
--- a/src/lib/server/users.ts
+++ b/src/lib/server/users.ts
@@ -13,7 +13,7 @@ const initConnectionsTable = `CREATE TABLE IF NOT EXISTS Connections(
    userId VARCHAR(36) NOT NULL,
    type VARCHAR(36) NOT NULL,
    service TEXT,
-    tokens TEXT
+    tokens TEXT,
    FOREIGN KEY(userId) REFERENCES Users(id)
 )`
 db.exec(initUsersTable), db.exec(initConnectionsTable)
@@ -77,11 +77,11 @@ export class Connections {
        return connections
    }

-    static addConnection<T extends serviceType>(type: T, connectionData: Omit<DBConnectionData<T>, 'id' | 'type'>): DBConnectionData<T> {
+    static addConnection<T extends serviceType>(type: T, connectionData: Omit<DBConnectionData<T>, 'id' | 'type'>): string {
        const connectionId = generateUUID()
        const { userId, service, tokens } = connectionData
-        db.prepare(`INSERT INTO Connections(id, userId, type, service, tokens) VALUES(?, ?, ?, ?, ?)`).run(connectionId, userId, type, service, tokens)
-        return this.getConnection(connectionId) as DBConnectionData<T>
+        db.prepare(`INSERT INTO Connections(id, userId, type, service, tokens) VALUES(?, ?, ?, ?, ?)`).run(connectionId, userId, type, JSON.stringify(service), JSON.stringify(tokens))
+        return connectionId
    }

    static deleteConnection = (id: string): void => {
@@ -91,7 +91,7 @@ export class Connections {

    static updateTokens = (id: string, accessToken?: string, refreshToken?: string, expiry?: number): void => {
        const newTokens = { accessToken, refreshToken, expiry }
-        const commandInfo = db.prepare(`UPDATE Connections SET tokens = ? WHERE id = ?`).run(newTokens, id)
+        const commandInfo = db.prepare(`UPDATE Connections SET tokens = ? WHERE id = ?`).run(JSON.stringify(newTokens), id)
        if (commandInfo.changes === 0) throw new Error('Failed to update tokens')
    }

--- a/src/lib/services.json
+++ b/src/lib/services.json
@@ -0,0 +1,14 @@
+{
+    "jellyfin": {
+        "displayName": "Jellyfin",
+        "type": ["streaming"],
+        "icon": "https://raw.githubusercontent.com/jellyfin/jellyfin-ux/55616553b692b1a6c7d8e786eeb7d8216e9b50df/branding/SVG/icon-transparent.svg",
+        "primaryColor": "--jellyfin-blue"
+    },
+    "youtube-music": {
+        "displayName": "YouTube Music",
+        "type": ["streaming"],
+        "icon": "https://upload.wikimedia.org/wikipedia/commons/6/6a/Youtube_Music_icon.svg",
+        "primaryColor": "--youtube-red"
+    }
+}
--- a/src/lib/services.ts
+++ b/src/lib/services.ts
@@ -1,20 +1,5 @@
 import { google } from 'googleapis'

-export const serviceData = {
-    jellyfin: {
-        displayName: 'Jellyfin',
-        type: ['streaming'],
-        icon: 'https://raw.githubusercontent.com/jellyfin/jellyfin-ux/55616553b692b1a6c7d8e786eeb7d8216e9b50df/branding/SVG/icon-transparent.svg',
-        primaryColor: '--jellyfin-blue',
-    },
-    'youtube-music': {
-        displayName: 'YouTube Music',
-        type: ['streaming'],
-        icon: 'https://upload.wikimedia.org/wikipedia/commons/6/6a/Youtube_Music_icon.svg',
-        primaryColor: '--youtube-red',
-    },
-}
-
 export class Jellyfin {
    static audioPresets = (userId: string) => {
        return {
@@ -140,6 +125,16 @@ export class Jellyfin {
 }

 export class YouTubeMusic {
+    static baseHeaders = {
+        'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:88.0) Gecko/20100101 Firefox/88.0',
+        accept: '*/*',
+        'accept-encoding': 'gzip, deflate',
+        'content-type': 'application/json',
+        'content-encoding': 'gzip',
+        origin: 'https://music.youtube.com',
+        Cookie: 'SOCS=CAI;',
+    }
+
    static fetchServiceInfo = async (userId: string, accessToken: string): Promise<Connection<'youtube-music'>['service']> => {
        const youtube = google.youtube('v3')
        const userChannelResponse = await youtube.channels.list({ mine: true, part: ['snippet'], access_token: accessToken })
@@ -151,4 +146,58 @@ export class YouTubeMusic {
            profilePicture: userChannel.snippet?.thumbnails?.default?.url as string | undefined,
        }
    }
+
+    static getVisitorId = async (accessToken: string): Promise<string> => {
+        const headers = Object.assign(this.baseHeaders, { authorization: `Bearer ${accessToken}`, 'X-Goog-Request-Time': `${Date.now()}` })
+        const visitorIdResponse = await fetch('https://music.youtube.com', { headers })
+        const visitorIdText = await visitorIdResponse.text()
+        const regex = /ytcfg\.set\s*\(\s*({.+?})\s*\)\s*;/g
+        const matches = []
+        let match
+
+        while ((match = regex.exec(visitorIdText)) !== null) {
+            const capturedGroup = match[1]
+            matches.push(capturedGroup)
+        }
+
+        let visitorId = ''
+        if (matches.length > 0) {
+            const ytcfg = JSON.parse(matches[0])
+            visitorId = ytcfg.VISITOR_DATA
+        }
+
+        return visitorId
+    }
+
+    static getHome = async (accessToken: string) => {
+        const headers = Object.assign(this.baseHeaders, { authorization: `Bearer ${accessToken}`, 'X-Goog-Request-Time': `${Date.now()}` })
+
+        function formatDate(): string {
+            const currentDate = new Date()
+            const year = currentDate.getUTCFullYear()
+            const month = (currentDate.getUTCMonth() + 1).toString().padStart(2, '0') // Months are zero-based, so add 1
+            const day = currentDate.getUTCDate().toString().padStart(2, '0')
+
+            return year + month + day
+        }
+
+        const response = await fetch(`https://music.youtube.com/youtubei/v1/browse?alt=json`, {
+            headers,
+            method: 'POST',
+            body: JSON.stringify({
+                browseId: 'FEmusic_home',
+                context: {
+                    client: {
+                        clientName: 'WEB_REMIX',
+                        clientVersion: '1.' + formatDate() + '.01.00',
+                        hl: 'en',
+                    },
+                },
+            }),
+        })
+
+        const data = await response.json()
+        console.log(response.status)
+        console.log(data.contents.singleColumnBrowseResultsRenderer.tabs[0].tabRenderer.content.sectionListRenderer.contents[0].musicCarouselShelfRenderer.contents[0].musicTwoRowItemRenderer.title)
+    }
 }
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -6,5 +6,5 @@
 </script>

 <div id="main">
-    <ScrollableCardMenu header={'Listen Again'} cardDataList={data.recommendations} />
+    <!-- <ScrollableCardMenu header={'Listen Again'} cardDataList={data.recommendations} /> -->
 </div>
--- a/src/routes/api/connections/+server.ts
+++ b/src/routes/api/connections/+server.ts
@@ -17,6 +17,7 @@ export const GET: RequestHandler = async ({ url }) => {
                connection.service = await YouTubeMusic.fetchServiceInfo(connection.service.userId, connection.tokens.accessToken)
                break
        }
+        connections.push(connection)
    }

    return Response.json({ connections })
--- a/src/routes/api/users/[userId]/recommendations/+server.ts
+++ b/src/routes/api/users/[userId]/recommendations/+server.ts
@@ -1,6 +1,7 @@
 import type { RequestHandler } from '@sveltejs/kit'
 import { SECRET_INTERNAL_API_KEY } from '$env/static/private'
-import { Jellyfin } from '$lib/services'
+import { Jellyfin, YouTubeMusic } from '$lib/services'
+import { google } from 'googleapis'

 // This is temporary functionally for the sake of developing the app.
 // In the future will implement more robust algorithm for offering recommendations
@@ -33,6 +34,9 @@ export const GET: RequestHandler = async ({ params, fetch }) => {

                for (const song of mostPlayedData.Items) recommendations.push(Jellyfin.songFactory(song, connection))
                break
+            case 'youtube-music':
+                YouTubeMusic.getHome(tokens.accessToken)
+                break
        }
    }

--- a/src/routes/settings/connections/+page.server.ts
+++ b/src/routes/settings/connections/+page.server.ts
@@ -43,15 +43,22 @@ export const actions: Actions = {
            return fail(400, { message: 'Could not reach Jellyfin server' })
        }

-        const newConnection = Connections.addConnection('jellyfin', {
+        const newConnectionId = Connections.addConnection('jellyfin', {
            userId: locals.user.id,
            service: { userId: authData.User.Id, urlOrigin: serverUrl.toString() },
            tokens: { accessToken: authData.AccessToken },
        })

-        return { newConnection }
+        const response = await fetch(`/api/connections?ids=${newConnectionId}`, {
+            method: 'GET',
+            headers: { apikey: SECRET_INTERNAL_API_KEY },
+        })
+
+        const responseData = await response.json()
+
+        return { newConnection: responseData.connections[0] }
    },
-    youtubeMusicLogin: async ({ request, locals }) => {
+    youtubeMusicLogin: async ({ request, fetch, locals }) => {
        const formData = await request.formData()
        const { code } = Object.fromEntries(formData)
        const client = new google.auth.OAuth2({ clientId: PUBLIC_YOUTUBE_API_CLIENT_ID, clientSecret: YOUTUBE_API_CLIENT_SECRET, redirectUri: 'http://localhost:5173' }) // DO NOT SHIP THIS. THE CLIENT SECRET SHOULD NOT BE MADE AVAILABLE TO USERS. MAKE A REQUEST TO THE LAZULI WEBSITE INSTEAD.
@@ -61,13 +68,20 @@ export const actions: Actions = {
        const userChannelResponse = await youtube.channels.list({ mine: true, part: ['id', 'snippet'], access_token: tokens.access_token! })
        const userChannel = userChannelResponse.data.items![0]

-        const newConnection = Connections.addConnection('youtube-music', {
+        const newConnectionId = Connections.addConnection('youtube-music', {
            userId: locals.user.id,
            service: { userId: userChannel.id! },
            tokens: { accessToken: tokens.access_token!, refreshToken: tokens.refresh_token!, expiry: tokens.expiry_date! },
        })

-        return { newConnection }
+        const response = await fetch(`/api/connections?ids=${newConnectionId}`, {
+            method: 'GET',
+            headers: { apikey: SECRET_INTERNAL_API_KEY },
+        })
+
+        const responseData = await response.json()
+
+        return { newConnection: responseData.connections[0] }
    },
    deleteConnection: async ({ request }) => {
        const formData = await request.formData()
--- a/src/routes/settings/connections/+page.svelte
+++ b/src/routes/settings/connections/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { serviceData } from '$lib/services'
+    import Services from '$lib/services.json'
    import JellyfinAuthBox from './jellyfinAuthBox.svelte'
    import { newestAlert } from '$lib/stores.js'
    import type { PageServerData } from './$types.js'
@@ -38,7 +38,7 @@
                connections = [...connections, newConnection]

                newConnectionModal = null
-                return ($newestAlert = ['success', `Added ${serviceData[newConnection.type].displayName}`])
+                return ($newestAlert = ['success', `Added ${Services[newConnection.type].displayName}`])
            }
        }
    }
@@ -75,9 +75,6 @@
    }

    const profileActions: SubmitFunction = ({ action, cancel }) => {
-        console.log(action)
-        cancel()
-
        return ({ result }) => {
            if (result.type === 'failure') {
                return ($newestAlert = ['warning', result.data?.message])
@@ -89,7 +86,7 @@
                connections.splice(indexToDelete, 1)
                connections = connections

-                return ($newestAlert = ['success', `Deleted ${serviceData[serviceType].displayName}`])
+                return ($newestAlert = ['success', `Deleted ${Services[serviceType].displayName}`])
            }
        }
    }
@@ -102,11 +99,11 @@
        <h1 class="py-2 text-xl">Add Connection</h1>
        <div class="flex flex-wrap gap-2 pb-4">
            <button class="add-connection-button h-14 rounded-md" on:click={() => (newConnectionModal = JellyfinAuthBox)}>
-                <img src={serviceData.jellyfin.icon} alt="{serviceData.jellyfin.displayName} icon" class="aspect-square h-full p-2" />
+                <img src={Services.jellyfin.icon} alt="{Services.jellyfin.displayName} icon" class="aspect-square h-full p-2" />
            </button>
            <form method="post" action="?/youtubeMusicLogin" use:enhance={authenticateYouTube}>
                <button class="add-connection-button h-14 rounded-md">
-                    <img src={serviceData['youtube-music'].icon} alt="{serviceData['youtube-music'].displayName} icon" class="aspect-square h-full p-2" />
+                    <img src={Services['youtube-music'].icon} alt="{Services['youtube-music'].displayName} icon" class="aspect-square h-full p-2" />
                </button>
            </form>
        </div>
--- a/src/routes/settings/connections/connectionProfile.svelte
+++ b/src/routes/settings/connections/connectionProfile.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { serviceData } from '$lib/services'
+    import Services from '$lib/services.json'
    import IconButton from '$lib/components/util/iconButton.svelte'
    import Toggle from '$lib/components/util/toggle.svelte'
    import type { SubmitFunction } from '@sveltejs/kit'
@@ -9,26 +9,27 @@
    export let connection: Connection<serviceType>
    export let submitFunction: SubmitFunction

-    $: reactiveServiceData = serviceData[connection.type]
+    $: serviceData = Services[connection.type]

    let showModal = false
+
+    const subHeaderItems: string[] = []
+    if ('username' in connection.service && connection.service.username) subHeaderItems.push(connection.service.username)
+    if ('serverName' in connection.service && connection.service.serverName) subHeaderItems.push(connection.service.serverName)
 </script>

 <section class="rounded-lg" style="background-color: rgba(82, 82, 82, 0.25);" transition:fly={{ x: 50 }}>
    <header class="flex h-20 items-center gap-4 p-4">
        <div class="relative aspect-square h-full p-1">
-            <img src={reactiveServiceData.icon} alt="{reactiveServiceData.displayName} icon" />
-            {#if 'profilePicture' in connection.service && typeof connection.service.profilePicture === 'string'}
+            <img src={serviceData.icon} alt="{serviceData.displayName} icon" />
+            {#if 'profilePicture' in connection.service && connection.service.profilePicture}
                <img src={connection.service.profilePicture} alt="" class="absolute bottom-0 right-0 aspect-square h-5 rounded-full" />
            {/if}
        </div>
        <div>
-            <div>Username</div>
+            <div>{serviceData.displayName}</div>
            <div class="text-sm text-neutral-500">
-                {reactiveServiceData.displayName}
-                {#if 'serverName' in connection.service}
-                    - {connection.service.serverName}
-                {/if}
+                {subHeaderItems.join(' - ')}
            </div>
        </div>
        <div class="relative ml-auto flex h-8 flex-row-reverse gap-2">