Apply cookies to yt-dlp search requests

Dockerfile

@@ -7,7 +7,10 @@ RUN npm run build
 FROM node:20.20.0-alpine
 WORKDIR /spooty
 
-RUN apk add --no-cache ffmpeg redis python3 py3-pip curl yt-dlp \
+RUN apk add --no-cache ffmpeg redis python3 py3-pip curl \
+  && curl -L https://github.com/yt-dlp/yt-dlp/releases/latest/download/yt-dlp -o /usr/local/bin/yt-dlp \
+  && chmod +x /usr/local/bin/yt-dlp \
+  && yt-dlp --version \
   && addgroup -S spooty \
   && adduser -S spooty -G spooty
 

src/backend/src/app.module.ts

@@ -16,6 +16,24 @@ import { AuthGuard } from './shared/auth.guard';
 import { ThrottlerGuard, ThrottlerModule } from '@nestjs/throttler';
 import { ArchiveModule } from './archive/archive.module';
 import { OperationsModule } from './operations/operations.module';
+import * as fs from 'fs';
+
+function resolveFrontendRoot(fePath: string | undefined): string {
+  const configuredRoot = resolve(__dirname, fePath || '../frontend/browser');
+  const candidateRoots = [
+    configuredRoot,
+    resolve(configuredRoot, 'browser'),
+    resolve(configuredRoot, '..'),
+  ];
+
+  for (const candidateRoot of candidateRoots) {
+    if (fs.existsSync(resolve(candidateRoot, 'index.html'))) {
+      return candidateRoot;
+    }
+  }
+
+  return configuredRoot;
+}
 
 @Module({
   imports: [
@@ -38,8 +56,7 @@ import { OperationsModule } from './operations/operations.module';
       imports: [ConfigModule],
       useFactory: async (configService: ConfigService) => [
         {
-          rootPath: resolve(
-            __dirname,
+          rootPath: resolveFrontendRoot(
             configService.get<string>(EnvironmentEnum.FE_PATH),
           ),
           exclude: ['/api/(.*)'],

src/backend/src/main.ts

@@ -3,7 +3,7 @@ import { ValidationPipe } from '@nestjs/common';
 import { HttpExceptionFilter } from './shared/filters/http-exception.filter';
 import { AppModule } from './app.module';
 import * as fs from 'fs';
-import { resolve } from 'path';
+import { dirname, resolve } from 'path';
 import { spawn } from 'child_process';
 import helmet from 'helmet';
 import { EnvironmentEnum } from './environmentEnum';
@@ -17,11 +17,17 @@ async function bootstrap() {
     throw new Error('DOWNLOADS_PATH environment variable is missing');
   }
 
-  const folderName = resolve(
+  const downloadsPath = resolve(
     __dirname,
     process.env[EnvironmentEnum.DOWNLOADS_PATH],
   );
-  fs.mkdirSync(folderName, { recursive: true });
+  fs.mkdirSync(downloadsPath, { recursive: true });
+
+  const dbPath = resolve(
+    __dirname,
+    process.env[EnvironmentEnum.DB_PATH] || './config/db.sqlite',
+  );
+  fs.mkdirSync(dirname(dbPath), { recursive: true });
 
   if (envFlag(EnvironmentEnum.REDIS_RUN)) {
     try {
@@ -60,6 +66,11 @@ async function bootstrap() {
   app.use(
     helmet({
       crossOriginResourcePolicy: false,
+      contentSecurityPolicy: {
+        directives: {
+          upgradeInsecureRequests: null,
+        },
+      },
     }),
   );
 

src/backend/src/shared/youtube.service.ts

@@ -155,6 +155,7 @@ export class YoutubeService {
 
   private async searchYoutubeVideos(query: string): Promise<YtDlpSearchVideo[]> {
     const searchTarget = `ytsearch15:${query}`;
+    const cookiesFile = this.prepareWritableCookiesFile(this.getCookiesFile());
     const args = [
       '--dump-single-json',
       '--skip-download',
@@ -168,6 +169,10 @@ export class YoutubeService {
       searchTarget,
     ];
 
+    if (cookiesFile) {
+      args.splice(args.length - 1, 0, '--cookies', cookiesFile);
+    }
+
     const output = await this.runYtDlpForOutput(args);
     let parsed: any;
 

src/frontend/src/app/app.component.html

@@ -32,6 +32,13 @@
     </button>
   </nav>
 
+  <section *ngIf="!authTokenPresent" class="workspace-controls">
+    <div class="truth-pill">
+      Auth token required. Open once with `?token=your_token_here` and it will
+      be stored in your browser.
+    </div>
+  </section>
+
   <section class="workspace-controls">
     <div class="panel-picker">
       <div class="select">

src/frontend/src/app/app.component.ts

@@ -53,6 +53,7 @@ export interface SpootyWorkspaceTabsState {
 const WORKSPACE_STORAGE_KEY = 'jarri_spooty_workspace_state_v1';
 const WORKSPACE_TABS_STORAGE_KEY = 'jarri_spooty_workspace_tabs_v1';
 const ARCHIVE_DESTINATION_KEY = 'jarri_spooty_archive_destination_v1';
+const AUTH_TOKEN_STORAGE_KEY = 'spooty_auth_token';
 const GRID_SIZE = 12;
 const MIN_PANEL_WIDTH = 260;
 const MIN_PANEL_HEIGHT = 160;
@@ -176,9 +177,26 @@ export function defaultWorkspaceTabsState(): SpootyWorkspaceTabsState {
   };
 }
 
+function getStorageItem(key: string): string | null {
+  try {
+    return localStorage.getItem(key);
+  } catch (error) {
+    console.error(`Failed to read localStorage key "${key}"`, error);
+    return null;
+  }
+}
+
+function setStorageItem(key: string, value: string): void {
+  try {
+    localStorage.setItem(key, value);
+  } catch (error) {
+    console.error(`Failed to write localStorage key "${key}"`, error);
+  }
+}
+
 export function loadWorkspaceState(): SpootyWorkspaceState {
   try {
-    const raw = localStorage.getItem(WORKSPACE_STORAGE_KEY);
+    const raw = getStorageItem(WORKSPACE_STORAGE_KEY);
 
     if (!raw) {
       return defaultWorkspaceState();
@@ -204,7 +222,7 @@ export function loadWorkspaceState(): SpootyWorkspaceState {
 
 export function loadWorkspaceTabsState(): SpootyWorkspaceTabsState {
   try {
-    const raw = localStorage.getItem(WORKSPACE_TABS_STORAGE_KEY);
+    const raw = getStorageItem(WORKSPACE_TABS_STORAGE_KEY);
 
     if (raw) {
       const parsed = JSON.parse(raw) as SpootyWorkspaceTabsState;
@@ -318,7 +336,8 @@ export class AppComponent implements OnDestroy {
   selectedTrack$ = this.trackService.selectedTrack$;
   version = this.versionService.getVersion();
   spotifyConnected = false;
-  archiveDestination = localStorage.getItem(ARCHIVE_DESTINATION_KEY) || '';
+  authTokenPresent = Boolean(getStorageItem(AUTH_TOKEN_STORAGE_KEY));
+  archiveDestination = getStorageItem(ARCHIVE_DESTINATION_KEY) || '';
   archiveListing?: ArchiveListing;
   archiveLoading = false;
   archiveError = '';
@@ -369,7 +388,8 @@ export class AppComponent implements OnDestroy {
       return;
     }
 
-    localStorage.setItem('spooty_auth_token', token);
+    setStorageItem(AUTH_TOKEN_STORAGE_KEY, token);
+    this.authTokenPresent = true;
     url.searchParams.delete('token');
     window.history.replaceState({}, document.title, url.toString());
   }
@@ -377,7 +397,13 @@ export class AppComponent implements OnDestroy {
   checkSpotifyStatus(): void {
     this.http
       .get<{ connected: boolean }>('/api/spotify/status')
-      .subscribe((status) => (this.spotifyConnected = status.connected));
+      .subscribe({
+        next: (status) => (this.spotifyConnected = status.connected),
+        error: (error) => {
+          console.error('Failed to check Spotify status', error);
+          this.spotifyConnected = false;
+        },
+      });
   }
 
   connectSpotify(): void {
@@ -403,7 +429,7 @@ export class AppComponent implements OnDestroy {
   }
 
   saveArchiveDestination(): void {
-    localStorage.setItem(ARCHIVE_DESTINATION_KEY, this.archiveDestination);
+    setStorageItem(ARCHIVE_DESTINATION_KEY, this.archiveDestination);
   }
 
   refreshArchive(): void {
@@ -761,7 +787,7 @@ export class AppComponent implements OnDestroy {
   }
 
   private saveWorkspaceState(): void {
-    localStorage.setItem(
+    setStorageItem(
       WORKSPACE_TABS_STORAGE_KEY,
       JSON.stringify(this.workspaceTabsState),
     );

src/frontend/src/app/services/auth-token.interceptor.ts

@@ -3,7 +3,13 @@ import { HttpInterceptorFn } from '@angular/common/http';
 const TOKEN_STORAGE_KEY = 'spooty_auth_token';
 
 export const authTokenInterceptor: HttpInterceptorFn = (req, next) => {
-  const token = localStorage.getItem(TOKEN_STORAGE_KEY);
+  let token: string | null = null;
+
+  try {
+    token = localStorage.getItem(TOKEN_STORAGE_KEY);
+  } catch (error) {
+    console.error('Failed to read auth token from localStorage', error);
+  }
 
   if (!token) {
     return next(req);

src/frontend/src/app/services/playlist.service.ts

@@ -11,7 +11,7 @@ import {
   withUIEntities
 } from "@ngneat/elf-entities";
 import {joinRequestResult, trackRequestResult} from "@ngneat/elf-requests";
-import {combineLatest, filter, first, map, Observable, of, switchMap, tap} from "rxjs";
+import {catchError, combineLatest, filter, first, map, Observable, of, switchMap, tap} from "rxjs";
 import {TrackService} from "./track.service";
 import {Socket} from "ngx-socket-io";
 import {Playlist} from "../models/playlist";
@@ -115,6 +115,14 @@ export class PlaylistService {
 
   fetch(): void {
     this.http.get<Playlist[]>(ENDPOINT).pipe(
+      catchError((error) => {
+        console.error('Failed to fetch playlists', error);
+        this.store.update(
+          setEntities([]),
+          setEntities([], { ref: UIEntitiesRef }),
+        );
+        return of([]);
+      }),
       tap((data: Playlist[]) => this.store.update(
         setEntities(data),
         setEntities(data.map(item => ({id: item.id, collapsed: false})), {ref: UIEntitiesRef})

src/frontend/src/index.html

@@ -8,6 +8,7 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>
+  <div id="boot-status">Loading Jarri Spooty...</div>
   <app-root></app-root>
 </body>
 </html>

src/frontend/src/main.ts

@@ -1,8 +1,38 @@
+import { isDevMode } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
 import { devTools } from '@ngneat/elf-devtools';
 
+function setBootStatus(message: string): void {
+  document.getElementById('boot-status')!.textContent = message;
+}
+
+setBootStatus('Starting frontend bundle...');
+
+window.addEventListener('error', (event) => {
+  setBootStatus(`Frontend error: ${event.message || 'unknown'}`);
+});
+
+window.addEventListener('unhandledrejection', (event) => {
+  setBootStatus(`Frontend rejection: ${String(event.reason || 'unknown')}`);
+});
+
+const bootTimeout = window.setTimeout(() => {
+  setBootStatus('Bootstrap still running...');
+}, 3000);
+
 bootstrapApplication(AppComponent, appConfig)
-  .catch((err) => console.error(err));
-devTools();
+  .then(() => {
+    window.clearTimeout(bootTimeout);
+    document.getElementById('boot-status')?.remove();
+  })
+  .catch((err) => {
+    window.clearTimeout(bootTimeout);
+    console.error(err);
+    setBootStatus(`Bootstrap failed: ${String(err)}`);
+  });
+
+if (isDevMode()) {
+  devTools();
+}