Finish Favorites UI and jumping

Dockerfile

@@ -4,18 +4,18 @@ FROM --platform=$TARGETPLATFORM node:20-slim AS builder
 WORKDIR /app
 
 # Copy package files
-COPY package*.json ./
+COPY backend/package*.json  ./backend/
 COPY frontend/package*.json ./frontend/
 
 # Install dependencies
-RUN npm ci
+RUN cd backend  && npm ci
 RUN cd frontend && npm ci
 
 # Copy source files
 COPY . .
 
 # Build frontend and backend
-RUN npm run build
+RUN npm run build --workspaces
 
 # Production stage
 FROM --platform=$TARGETPLATFORM debian:testing-20250203
@@ -27,11 +27,11 @@ RUN apt-get update && apt-get install -y \
 WORKDIR /app
 
 # Install only production dependencies
-COPY package*.json ./
+COPY backend/package*.json ./
 RUN npm ci --production
 
 # Copy built files
-COPY --from=builder /app/build ./build
+COPY --from=builder /app/backend/build ./build
 COPY --from=builder /app/frontend/dist ./dist/frontend
 
 EXPOSE 3000

Makefile

@@ -3,13 +3,21 @@ VERSION := $(shell git describe --always --dirty)
 .PHONY: build
 build:
 	npm install
-	npm run build
+	npm run build --workspaces
+
+.PHONY: dev
+dev:
+	npm run dev
 
 .PHONY: run
 run:
 	npm run start
 
+.PHONY: image
+image:
+	docker build -t queuecube:$(VERSION)-$(shell uname -m) . 
+
 .PHONY: images
 images:
-	docker buildx build --platform linux/arm/v7 -t musicqueue:$(VERSION)-armv7l .
-	docker buildx build --platform linux/amd64  -t musicqueue:$(VERSION)-amd64  .
+	docker buildx build --platform linux/arm/v7 -t queuecube:$(VERSION)-armv7l .
+	docker buildx build --platform linux/amd64  -t queuecube:$(VERSION)-amd64  .

README.md

@@ -0,0 +1,34 @@
+# QueueCube
+
+QueueCube is a web frontend for [mpv](https://github.com/mpv-player/mpv).
+
+It allows you to remotely manage mpv's playqueue as well as the ability to search YouTube via a locally running [Invidious](https://github.com/iv-org/invidious) instance. 
+
+![queuecube user interface](screenshots/queuecube.png)
+
+## Running 
+
+The easiest way to run QueueCube is by using Docker. An MPV instance is created in the Docker container, so all you have to do is make it so the MPV instance can access your host's soundcard. On Linux, this is accomplished by mapping the PulseAudio socket to the container:
+
+```
+volumes:
+    - ~/.config/pulse/cookie:/root/.config/pulse/cookie
+    - /var/run/user/1000/pulse:/var/run/pulse
+```
+
+### Building the Docker image
+
+```
+docker build -t queuecube:latest .
+```
+
+If not using docker-compose, create an instance of the container by using `docker create` using the volume mapping specified above for mapping the PulseAudio socket:
+
+```
+docker create -p 8080:3000 -v /run/user/1000/pulse:/var/run/pulse -v ~/.config/pulse/cookie:/root/.config/pulse/cookie --name queuecube queuecube:latest
+```
+
+On some systems, you may need to add `--security-opt seccomp=unconfined` to allow containerized processes to write to your host's PulseAudio socket. 
+
+Once running, you should be able to access the UI via http://localhost:8080. 
+

backend/favorites.json

@@ -0,0 +1 @@
+[]

backend/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "mpvqueue",
+  "version": "1.0.0",
+  "main": "build/server.js",
+  "scripts": {
+    "build": "tsc -b",
+    "dev": "concurrently \"tsc -w -p src\" \"nodemon build/server.js\"",
+    "start": "node build/index.js"
+  },
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "devDependencies": {
+    "@types/express": "^5.0.0",
+    "@types/express-ws": "^3.0.5",
+    "@types/node": "^22.13.4",
+    "@types/ws": "^8.5.14",
+    "concurrently": "^9.1.2",
+    "nodemon": "^3.1.9",
+    "typescript": "^5.7.3"
+  },
+  "dependencies": {
+    "@types/node-fetch": "^2.6.12",
+    "classnames": "^2.5.1",
+    "express": "^4.21.2",
+    "express-ws": "^5.0.2",
+    "link-preview-js": "^3.0.14",
+    "node-fetch": "^2.7.0",
+    "react-icons": "^5.4.0",
+    "ws": "^8.18.0"
+  }
+}

backend/src/FavoritesStore.ts

@@ -0,0 +1,112 @@
+import fs from 'fs/promises';
+import path from 'path';
+import os from 'os';
+import { PlaylistItem } from './types';
+import { getLinkPreview } from 'link-preview-js';
+
+export class FavoritesStore {
+    onFavoritesChanged: (favorites: PlaylistItem[]) => void = () => {};
+
+    private storePath: string;
+    private favorites: PlaylistItem[] = [];
+
+    constructor() {
+        this.storePath = this.determineStorePath();
+        this.loadFavorites();
+    }
+
+    private determineStorePath(): string {
+        const storeFilename = 'favorites.json';
+        var storePath = path.join(os.tmpdir(), 'queuecube');
+
+        // Check for explicitly set path
+        if (process.env.STORE_PATH) {
+            storePath = path.resolve(process.env.STORE_PATH);
+        }
+
+        // In production (in a container), use /app/data
+        if (process.env.NODE_ENV === 'production') {
+            storePath = path.resolve('/app/data');
+        }
+
+        fs.mkdir(storePath, { recursive: true }).catch(err => {
+            console.error('Failed to create intermediate directory:', err);
+        });
+
+        return path.join(storePath, storeFilename);
+    }
+
+    private async loadFavorites() {
+        try {
+            // Ensure parent directory exists
+            await fs.mkdir(path.dirname(this.storePath), { recursive: true });
+            
+            const data = await fs.readFile(this.storePath, 'utf-8');
+            this.favorites = JSON.parse(data);
+        } catch (error) {
+            // If file doesn't exist or is invalid, start with empty array
+            this.favorites = [];
+            await this.saveFavorites();
+        }
+    }
+
+    private async saveFavorites() {
+        await fs.writeFile(this.storePath, JSON.stringify(this.favorites, null, 2));
+        this.onFavoritesChanged(this.favorites);
+    }
+
+    async getFavorites(): Promise<PlaylistItem[]> {
+        return this.favorites;
+    }
+
+    async addFavorite(item: PlaylistItem, fetchMetadata: boolean = true): Promise<void> {
+        // Check if the item already exists by filename
+        const exists = this.favorites.some(f => f.filename === item.filename);
+        if (!exists) {
+            this.favorites.push({
+                ...item,
+                id: this.favorites.length // Generate new ID
+            });
+            await this.saveFavorites();
+        } else {
+            // Otherwise, update the item with the new metadata
+            const index = this.favorites.findIndex(f => f.filename === item.filename);
+            this.favorites[index] = {
+                ...this.favorites[index],
+                ...item,
+            };
+            await this.saveFavorites();
+        }
+
+        // If the item is missing metadata, fetch it
+        if (fetchMetadata && !item.metadata) {
+            await this.fetchMetadata(item);
+        }
+    }
+
+    private async fetchMetadata(item: PlaylistItem): Promise<void> {
+        console.log("Fetching metadata for " + item.filename);
+        const metadata = await getLinkPreview(item.filename);
+
+        item.metadata = {
+            title: (metadata as any)?.title,
+            description: (metadata as any)?.description,
+            siteName: (metadata as any)?.siteName,
+        };
+
+        console.log("Metadata fetched for " + item.filename);
+        console.log(item);
+
+        await this.addFavorite(item, false);
+    }
+
+    async removeFavorite(id: number): Promise<void> {
+        this.favorites = this.favorites.filter(f => f.id !== id);
+        await this.saveFavorites();
+    }
+
+    async clearFavorites(): Promise<void> {
+        this.favorites = [];
+        await this.saveFavorites();
+    }
+} 

backend/src/InvidiousAPI.ts

@@ -24,6 +24,11 @@ export interface SearchResult {
   thumbnailUrl: string;
 }
 
+export interface ThumbnailResponse {
+  data: NodeJS.ReadableStream;
+  contentType: string;
+}
+
 const USE_INVIDIOUS = process.env.USE_INVIDIOUS || true;
 const INVIDIOUS_BASE_URL = process.env.INVIDIOUS_BASE_URL || 'http://invidious.nor';
 const INVIDIOUS_API_ENDPOINT = `${INVIDIOUS_BASE_URL}/api/v1`;
@@ -32,7 +37,7 @@ export const getInvidiousSearchURL = (query: string): string =>
   `${INVIDIOUS_API_ENDPOINT}/search?q=${encodeURIComponent(query)}`;
 
 export const getInvidiousThumbnailURL = (url: string): string =>
-  `${INVIDIOUS_BASE_URL}${url}`;
+  `${INVIDIOUS_BASE_URL}/${url}`;
 
 const preferredThumbnailAPIURL = (thumbnails: InvidiousVideoThumbnail[] | undefined): string => {
   if (!thumbnails || thumbnails.length === 0) {
@@ -76,3 +81,22 @@ export const searchInvidious = async (query: string): Promise<SearchResult[]> =>
     throw error;
   }
 }
+
+export const fetchThumbnail = async (thumbnailUrl: string): Promise<ThumbnailResponse> => {
+  let path = thumbnailUrl;
+  if (thumbnailUrl.startsWith('http://') || thumbnailUrl.startsWith('https://')) {
+    const url = new URL(thumbnailUrl);
+    path = url.pathname + url.search;
+  }
+  path = path.replace(/^\/+/, ''); // Strip leading slash
+  
+  const response = await fetch(getInvidiousThumbnailURL(path));
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+
+  return {
+    data: response.body,
+    contentType: response.headers.get('content-type') || 'image/jpeg'
+  };
+};

backend/src/MediaPlayer.ts

@@ -2,31 +2,18 @@ import { ChildProcess, spawn } from "child_process";
 import { Socket } from "net";
 import { WebSocket } from "ws";
 import { getLinkPreview } from "link-preview-js";
-
+import { PlaylistItem, LinkMetadata } from './types';
+import { FavoritesStore } from "./FavoritesStore";
 interface PendingCommand {
     resolve: (value: any) => void;
     reject: (reason: any) => void;
 }
 
-interface LinkMetadata {
-    title?: string;
-    description?: string;
-    siteName?: string;
-}
-
-interface PlaylistItem {
-    id: number;
-    filename: string;
-    title?: string;
-    playing?: boolean;
-    current?: boolean;
-    metadata?: LinkMetadata;
-}
-
 export class MediaPlayer { 
     private playerProcess: ChildProcess;
     private socket: Socket;
     private eventSubscribers: WebSocket[] = [];
+    private favoritesStore: FavoritesStore;
 
     private pendingCommands: Map<number, PendingCommand> = new Map();
     private requestId: number = 1;
@@ -53,6 +40,11 @@ export class MediaPlayer {
                 this.connectToSocket(socketPath);
             }, 500);
         });
+
+        this.favoritesStore = new FavoritesStore();
+        this.favoritesStore.onFavoritesChanged = (favorites) => {
+            this.handleEvent("favorites_update", { favorites });
+        };
     }
 
     public async getPlaylist(): Promise<PlaylistItem[]> {
@@ -123,14 +115,11 @@ export class MediaPlayer {
     }
 
     public async append(url: string) {
-        const result = await this.modify(() => this.writeCommand("loadfile", [url, "append-play"]));
+        await this.loadFile(url, "append-play");
+    }
 
-        // Asynchronously fetch the metadata for this after we update the playlist
-        this.fetchMetadataAndNotify(url).catch(error => {
-            console.warn(`Failed to fetch metadata for ${url}:`, error);
-        });
-        
-        return result;
+    public async replace(url: string) {
+        await this.loadFile(url, "replace");
     }
 
     public async play() {
@@ -169,6 +158,30 @@ export class MediaPlayer {
         this.eventSubscribers = this.eventSubscribers.filter(subscriber => subscriber !== ws);
     }
 
+    public async getFavorites(): Promise<PlaylistItem[]> {
+        return this.favoritesStore.getFavorites();
+    }
+
+    public async addFavorite(item: PlaylistItem) {
+        return this.favoritesStore.addFavorite(item);
+    }
+
+    public async removeFavorite(id: number) {
+        return this.favoritesStore.removeFavorite(id);
+    }
+
+    public async clearFavorites() {
+        return this.favoritesStore.clearFavorites();
+    }
+
+    private async loadFile(url: string, mode: string) {
+        this.modify(() => this.writeCommand("loadfile", [url, mode]));
+
+        this.fetchMetadataAndNotify(url).catch(error => {
+            console.warn(`Failed to fetch metadata for ${url}:`, error);
+        });
+    }
+
     private async modify<T>(func: () => Promise<T>): Promise<T> {
         return func()
             .then((result) => {
@@ -205,6 +218,7 @@ export class MediaPlayer {
 
     private async fetchMetadataAndNotify(url: string) {
         try {
+            console.log("Fetching metadata for " + url);
             const metadata = await getLinkPreview(url);
             this.metadata.set(url, {
                 title: (metadata as any)?.title,
@@ -212,6 +226,9 @@ export class MediaPlayer {
                 siteName: (metadata as any)?.siteName,
             });
 
+            console.log("Metadata fetched for " + url);
+            console.log(this.metadata.get(url));
+            
             // Notify clients that metadata has been updated
             this.handleEvent("metadata_update", {
                 url,
@@ -228,7 +245,7 @@ export class MediaPlayer {
     }
 
     private handleEvent(event: string, data: any) {
-        console.log("MPV Event [" + event + "]: " + JSON.stringify(data, null, 2));
+        console.log("Event [" + event + "]: " + JSON.stringify(data, null, 2));
 
         // Notify all subscribers
         this.eventSubscribers.forEach(subscriber => {

backend/src/server.ts

@@ -1,8 +1,8 @@
 import express from "express";
 import expressWs from "express-ws";
 import { MediaPlayer } from "./MediaPlayer";
-import { searchInvidious, getInvidiousThumbnailURL } from "./InvidiousAPI";
-import fetch from "node-fetch";
+import { searchInvidious, fetchThumbnail } from "./InvidiousAPI";
+import { PlaylistItem } from './types';
 
 const app = express();
 app.use(express.json());
@@ -38,6 +38,12 @@ apiRouter.delete("/playlist/:index", withErrorHandling(async (req, res) => {
     res.send(JSON.stringify({ success: true }));
 }));
 
+apiRouter.post("/playlist/replace", withErrorHandling(async (req, res) => {
+    const { url } = req.body as { url: string };
+    await mediaPlayer.replace(url);
+    res.send(JSON.stringify({ success: true }));
+}));
+
 apiRouter.post("/play", withErrorHandling(async (req, res) => {
     await mediaPlayer.play();
     res.send(JSON.stringify({ success: true }));
@@ -118,16 +124,9 @@ apiRouter.get("/thumbnail", withErrorHandling(async (req, res) => {
     }
 
     try {
-        const response = await fetch(getInvidiousThumbnailURL(thumbnailUrl));
-        if (!response.ok) {
-            throw new Error(`HTTP error! status: ${response.status}`);
-        }
-
-        // Forward the content type header
-        res.set('Content-Type', response.headers.get('content-type') || 'image/jpeg');
-        
-        // Pipe the thumbnail data directly to the response
-        response.body.pipe(res);
+        const { data, contentType } = await fetchThumbnail(thumbnailUrl);
+        res.set('Content-Type', contentType);
+        data.pipe(res);
     } catch (error) {
         console.error('Failed to proxy thumbnail:', error);
         res.status(500)
@@ -135,6 +134,28 @@ apiRouter.get("/thumbnail", withErrorHandling(async (req, res) => {
     }
 }));
 
+apiRouter.get("/favorites", withErrorHandling(async (req, res) => {
+    const favorites = await mediaPlayer.getFavorites();
+    res.send(JSON.stringify(favorites));
+}));
+
+apiRouter.post("/favorites", withErrorHandling(async (req, res) => {
+    const item = req.body as PlaylistItem;
+    await mediaPlayer.addFavorite(item);
+    res.send(JSON.stringify({ success: true }));
+}));
+
+apiRouter.delete("/favorites/:id", withErrorHandling(async (req, res) => {
+    const { id } = req.params;
+    await mediaPlayer.removeFavorite(parseInt(id));
+    res.send(JSON.stringify({ success: true }));
+}));
+
+apiRouter.delete("/favorites", withErrorHandling(async (req, res) => {
+    await mediaPlayer.clearFavorites();
+    res.send(JSON.stringify({ success: true }));
+}));
+
 // Serve static files for React app (after building)
 app.use(express.static("dist/frontend"));
 

backend/src/types.ts

@@ -0,0 +1,14 @@
+export interface LinkMetadata {
+    title?: string;
+    description?: string;
+    siteName?: string;
+}
+
+export interface PlaylistItem {
+    id: number;
+    filename: string;
+    title?: string;
+    playing?: boolean;
+    current?: boolean;
+    metadata?: LinkMetadata;
+} 

backend/tsconfig.json

@@ -107,10 +107,10 @@
     "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
   },
   "include": ["src/**/*"],  // Only include backend files
-  "exclude": ["frontend/**/*"],  // Explicitly exclude frontend files
+  "exclude": ["../frontend/**/*"],  // Explicitly exclude frontend files
   "files": [],
   "references": [
-    { "path": "./src" },      // Backend reference
-    { "path": "./frontend" }  // Frontend reference
+    { "path":  "./src" },      // Backend reference
+    { "path": "../frontend" }  // Frontend reference
   ]
 }

frontend/src/api/player.tsx

@@ -62,6 +62,16 @@ export const API = {
     });
   },
 
+  async replaceCurrentFile(url: string): Promise<void> {
+    await fetch('/api/playlist/replace', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ url }),
+    });
+  },
+  
   async removeFromPlaylist(index: number): Promise<void> {
     await fetch(`/api/playlist/${index}`, {
       method: 'DELETE',
@@ -109,11 +119,45 @@ export const API = {
   },
   
   subscribeToEvents(onMessage: (event: any) => void): WebSocket {
-    const ws = new WebSocket(`ws://${window.location.host}/api/events`);
+    const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
+    const ws = new WebSocket(`${protocol}://${window.location.host}/api/events`);
     ws.onmessage = (event) => {
       onMessage(JSON.parse(event.data));
     };
 
     return ws;
+  },
+
+  async getFavorites(): Promise<PlaylistItem[]> {
+    const response = await fetch('/api/favorites');
+    return response.json();
+  },
+
+  async addToFavorites(url: string): Promise<void> {
+    // Maybe a little weird to make an empty PlaylistItem here, but we do want to support adding
+    // known PlaylistItems to favorites in the future. 
+    const playlistItem: PlaylistItem = {
+      filename: url,
+      title: null,
+      id: 0,
+      playing: null,
+      metadata: undefined,
+    };
+
+    await fetch('/api/favorites', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(playlistItem),
+    });
+  },
+
+  async removeFromFavorites(id: number): Promise<void> {
+    await fetch(`/api/favorites/${id}`, { method: 'DELETE' });
+  },
+
+  async clearFavorites(): Promise<void> {
+    await fetch('/api/favorites', { method: 'DELETE' });
   }
 };

frontend/src/components/App.tsx

@@ -2,7 +2,78 @@ import React, { useState, useEffect, useCallback } from 'react';
 import SongTable from './SongTable';
 import NowPlaying from './NowPlaying';
 import AddSongPanel from './AddSongPanel';
+import { TabView, Tab } from './TabView';
 import { API, getDisplayTitle, PlaylistItem } from '../api/player';
+import { useEventWebSocket } from '../hooks/useEventWebsocket';
+import { FaMusic, FaHeart } from 'react-icons/fa';
+
+enum Tabs {
+  Playlist = "playlist",
+  Favorites = "favorites",
+}
+
+const EmptyContent: React.FC<{ label: string}> = ({label}) => (
+  <div className="flex items-center justify-center h-full">
+    <div className="text-white text-2xl font-bold">{label}</div>
+  </div>
+);
+
+interface SonglistContentProps {
+  songs: PlaylistItem[];
+  isPlaying: boolean;
+  onNeedsRefresh: () => void;
+}
+
+const PlaylistContent: React.FC<SonglistContentProps> = ({ songs, isPlaying, onNeedsRefresh }) => {
+  const handleDelete = (index: number) => {
+    API.removeFromPlaylist(index);
+    onNeedsRefresh();
+  };
+
+  const handleSkipTo = (index: number) => {
+    API.skipTo(index);
+    onNeedsRefresh();
+  };
+
+  return (
+    songs.length > 0 ? (
+      <SongTable 
+        songs={songs} 
+        isPlaying={isPlaying} 
+        onDelete={handleDelete} 
+        onSkipTo={handleSkipTo} 
+      />
+    ) : (
+      <EmptyContent label="Playlist is empty" />
+    )
+  );
+};
+
+const FavoritesContent: React.FC<SonglistContentProps> = ({ songs, isPlaying, onNeedsRefresh }) => {
+  const handleDelete = (index: number) => {
+    API.removeFromFavorites(index);
+    onNeedsRefresh();
+  };
+
+  const handleSkipTo = (index: number) => {
+    API.replaceCurrentFile(songs[index].filename);
+    API.play();
+    onNeedsRefresh();
+  };
+
+  return (
+    songs.length > 0 ? (
+      <SongTable 
+        songs={songs} 
+        isPlaying={isPlaying} 
+        onDelete={handleDelete} 
+        onSkipTo={handleSkipTo} 
+      />
+    ) : (
+      <EmptyContent label="Favorites are empty" />
+    )
+  );
+};
 
 const App: React.FC = () => {
   const [isPlaying, setIsPlaying] = useState(false);
@@ -10,12 +81,18 @@ const App: React.FC = () => {
   const [nowPlayingFileName, setNowPlayingFileName] = useState<string | null>(null);
   const [volume, setVolume] = useState(100);
   const [volumeSettingIsLocked, setVolumeSettingIsLocked] = useState(false);
-  const [songs, setSongs] = useState<PlaylistItem[]>([]);
-  const [ws, setWs] = useState<WebSocket | null>(null);
+  const [playlist, setPlaylist] = useState<PlaylistItem[]>([]);
+  const [favorites, setFavorites] = useState<PlaylistItem[]>([]);
+  const [selectedTab, setSelectedTab] = useState<Tabs>(Tabs.Playlist);
 
   const fetchPlaylist = useCallback(async () => {
     const playlist = await API.getPlaylist();
-    setSongs(playlist);
+    setPlaylist(playlist);
+  }, []);
+
+  const fetchFavorites = useCallback(async () => {
+    const favorites = await API.getFavorites();
+    setFavorites(favorites);
   }, []);
 
   const fetchNowPlaying = useCallback(async () => {
@@ -32,8 +109,13 @@ const App: React.FC = () => {
   const handleAddURL = async (url: string) => {
     const urlToAdd = url.trim();
     if (urlToAdd) {
-      await API.addToPlaylist(urlToAdd);
-      fetchPlaylist();
+      if (selectedTab === Tabs.Favorites) {
+        await API.addToFavorites(urlToAdd);
+        fetchFavorites();
+      } else {
+        await API.addToPlaylist(urlToAdd);
+        fetchPlaylist();
+      }
 
       if (!isPlaying) {
         await API.play();
@@ -41,26 +123,6 @@ const App: React.FC = () => {
     }
   };
 
-  const handleDelete = (index: number) => {
-    setSongs(songs.filter((_, i) => i !== index));
-    API.removeFromPlaylist(index);
-    fetchPlaylist();
-    fetchNowPlaying();
-  };
-
-  const handleSkipTo = async (index: number) => {
-    const song = songs[index];
-    if (song.playing) {
-      togglePlayPause();
-    } else {
-      await API.skipTo(index);
-      await API.play();
-    }
-
-    fetchNowPlaying();
-    fetchPlaylist();
-  };
-
   const togglePlayPause = async () => {
     if (isPlaying) {
       await API.pause();
@@ -95,37 +157,42 @@ const App: React.FC = () => {
         fetchPlaylist();
         fetchNowPlaying();
         break;
+      case 'favorites_update':
+        fetchFavorites();
+        break;
     }
+  }, [fetchPlaylist, fetchNowPlaying, fetchFavorites]);
+
+  // Use the hook
+  useEventWebSocket(handleWebSocketEvent);
+
+  // Handle visibility changes
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === 'visible') {
+        fetchPlaylist();
+        fetchNowPlaying();
+      }
+    };
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
   }, [fetchPlaylist, fetchNowPlaying]);
 
+  const refreshContent = () => {
+    fetchPlaylist();
+    fetchNowPlaying();
+    fetchFavorites();
+  }
+
   // Initial data fetch
   useEffect(() => {
     fetchPlaylist();
     fetchNowPlaying();
-  }, [fetchPlaylist, fetchNowPlaying]);
-
-  // Update WebSocket connection
-  useEffect(() => {
-    const websocket = API.subscribeToEvents(handleWebSocketEvent);
-    setWs(websocket);
-
-    // Handle page visibility changes, so if the user navigates back to this tab, we reconnect the WebSocket
-    const handleVisibilityChange = () => {
-      if (document.visibilityState === 'visible' && (!ws || ws.readyState === WebSocket.CLOSED)) {
-        const newWs = API.subscribeToEvents(handleWebSocketEvent);
-        setWs(newWs);
-      }
-    };
-
-    document.addEventListener('visibilitychange', handleVisibilityChange);
-
-    return () => {
-      document.removeEventListener('visibilitychange', handleVisibilityChange);
-      if (websocket) {
-        websocket.close();
-      }
-    };
-  }, [handleWebSocketEvent]);
+    fetchFavorites();
+  }, [fetchPlaylist, fetchNowPlaying, fetchFavorites]);
 
   return (
     <div className="flex items-center justify-center h-screen w-screen bg-black md:py-10">
@@ -144,18 +211,22 @@ const App: React.FC = () => {
           onVolumeDidChange={() => setVolumeSettingIsLocked(false)}
         />
 
-        {songs.length > 0 ? (
-          <SongTable 
-            songs={songs}
-            isPlaying={isPlaying}
-            onDelete={handleDelete} 
-            onSkipTo={handleSkipTo} 
-          />
-        ) : (
-          <div className="flex items-center justify-center h-full">
-            <div className="text-white text-2xl font-bold">Playlist is empty</div>
-          </div>
-        )}
+        <TabView selectedTab={selectedTab} onTabChange={setSelectedTab}>
+          <Tab label="Playlist" identifier={Tabs.Playlist} icon={<FaMusic />}>
+            <PlaylistContent 
+              songs={playlist} 
+              isPlaying={isPlaying} 
+              onNeedsRefresh={refreshContent} 
+            />
+          </Tab>
+          <Tab label="Favorites" identifier={Tabs.Favorites} icon={<FaHeart />}>
+            <FavoritesContent 
+              songs={favorites.map(f => ({ ...f, playing: f.filename === nowPlayingFileName }))} 
+              isPlaying={isPlaying} 
+              onNeedsRefresh={refreshContent} 
+            />
+          </Tab>
+        </TabView>
 
         <AddSongPanel onAddURL={handleAddURL} />
       </div>

frontend/src/components/SongRow.tsx

@@ -40,7 +40,7 @@ const SongRow: React.FC<SongRowProps> = ({ song, playState, onDelete, onPlay })
   
   return (
     <div className={classNames("flex flex-row w-full h-24 px-2 py-5 items-center border-b gap-2 transition-colors", {
-      "bg-black/10": (playState === PlayState.Playing || playState === PlayState.Paused),
+      "qc-highlighted": (playState === PlayState.Playing || playState === PlayState.Paused),
       "bg-black/30": playState === PlayState.NotPlaying,
     })}>
       <div className="flex flex-row gap-2">
@@ -78,7 +78,7 @@ const SongRow: React.FC<SongRowProps> = ({ song, playState, onDelete, onPlay })
       <div className="flex flex-row gap-2">
         <button
           ref={buttonRef}
-          className="text-red-500 px-3 py-1 bg-red-500/10 rounded"
+          className="text-red-100 px-3 py-1 bg-red-500/40 rounded"
           onClick={(e) => {
             e.stopPropagation();
             if (showDeleteConfirm) {

frontend/src/components/TabView.tsx

@@ -0,0 +1,64 @@
+import React, { ReactNode } from 'react';
+import classNames from 'classnames';
+
+interface TabProps<T> {
+  label: string;
+  identifier: T;
+  icon?: ReactNode;
+  children: ReactNode;
+}
+
+export const Tab = <T,>({ children }: TabProps<T>) => {
+  // Wrapper component
+  return <>{children}</>;
+};
+
+interface TabViewProps<T> {
+  children: ReactNode;
+  selectedTab: T;
+  onTabChange: (tab: T) => void;
+}
+
+export const TabView = <T,>({ children, selectedTab, onTabChange }: TabViewProps<T>) => {
+  // Filter and validate children to only get Tab components
+  const tabs = React.Children.toArray(children).filter(
+    (child) => React.isValidElement(child) && child.type === Tab
+  ) as React.ReactElement<TabProps<T>>[];
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex flex-row h-11 border-b border-white/20">
+        {tabs.map((tab, index) => {
+          const isSelected = selectedTab === tab.props.identifier;
+          const rowClassName = classNames(
+            "flex flex-row items-center justify-center w-full gap-2 text-white",
+            { "qc-highlighted": isSelected }
+          );
+
+          return (
+            <div
+              key={index}
+              className={rowClassName}
+              onClick={() => onTabChange(tab.props.identifier)}
+            >
+              {tab.props.icon}
+              <div className="text-sm font-bold">{tab.props.label}</div>
+            </div>
+          );
+        })}
+      </div>
+      <div className="flex-1">
+        {tabs.map((tab, index) => (
+          <div
+            key={index}
+            className={classNames("w-full h-full", {
+              hidden: selectedTab !== tab.props.identifier,
+            })}
+          >
+            {tab.props.children}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}; 

frontend/src/hooks/useEventWebsocket.ts

@@ -0,0 +1,70 @@
+import { useState, useEffect, useCallback } from 'react';
+import { API } from '../api/player';
+
+export const useEventWebSocket = (onEvent: (event: any) => void) => {
+  const [ws, setWs] = useState<WebSocket | null>(null);
+  const [wsReconnectTimeout, setWsReconnectTimeout] = useState<number | null>(null);
+
+  const connectWebSocket = useCallback(() => {
+    // Clear any existing reconnection timeout
+    if (wsReconnectTimeout) {
+      window.clearTimeout(wsReconnectTimeout);
+      setWsReconnectTimeout(null);
+    }
+
+    // Close existing websocket if it exists
+    if (ws) {
+      ws.close();
+    }
+
+    const websocket = API.subscribeToEvents(onEvent);
+    
+    websocket.addEventListener('close', () => {
+      console.log('WebSocket closed. Attempting to reconnect...');
+
+      // Attempt to reconnect after 2 seconds
+      const timeout = window.setTimeout(() => {
+        connectWebSocket();
+      }, 2000);
+
+      setWsReconnectTimeout(timeout);
+    });
+
+    websocket.addEventListener('error', (error) => {
+      console.error('WebSocket error:', error);
+      websocket.close();
+    });
+
+    setWs(websocket);
+  }, [wsReconnectTimeout, onEvent]);
+
+  // Check WebSocket health periodically
+  useEffect(() => {
+    const healthCheck = setInterval(() => {
+      if (!ws || ws.readyState === WebSocket.CLOSED || ws.readyState === WebSocket.CLOSING) {
+        console.log('WebSocket unhealthy, reconnecting...');
+        connectWebSocket();
+      }
+    }, 5000);
+
+    return () => {
+      clearInterval(healthCheck);
+    };
+  }, [ws, connectWebSocket]);
+
+  // Initial WebSocket connection
+  useEffect(() => {
+    connectWebSocket();
+
+    return () => {
+      if (ws) {
+        ws.close();
+      }
+      if (wsReconnectTimeout) {
+        window.clearTimeout(wsReconnectTimeout);
+      }
+    };
+  }, [connectWebSocket]);
+
+  return ws;
+}; 

frontend/src/index.css

@@ -8,4 +8,8 @@
             [&::-webkit-slider-thumb]:rounded-full
             hover:[&::-webkit-slider-thumb]:bg-violet-300;
     }
+
+    .qc-highlighted {
+        @apply shadow-[inset_0_0_35px_rgba(147,51,234,0.8)];
+    }
 }

package.json

@@ -1,32 +1,12 @@
 {
-  "name": "mpvqueue",
-  "version": "1.0.0",
-  "main": "build/server.js",
-  "scripts": {
-    "build": "tsc -b && cd frontend && npm run build",
-    "dev": "concurrently \"cd frontend && npm run dev\" \"tsc -w -p src\" \"nodemon build/server.js\"",
-    "start": "node build/index.js"
-  },
-  "author": "",
-  "license": "ISC",
-  "description": "",
-  "devDependencies": {
-    "@types/express": "^5.0.0",
-    "@types/express-ws": "^3.0.5",
-    "@types/node": "^22.13.4",
-    "@types/ws": "^8.5.14",
-    "concurrently": "^9.1.2",
-    "nodemon": "^3.1.9",
-    "typescript": "^5.7.3"
-  },
-  "dependencies": {
-    "@types/node-fetch": "^2.6.12",
-    "classnames": "^2.5.1",
-    "express": "^4.21.2",
-    "express-ws": "^5.0.2",
-    "link-preview-js": "^3.0.14",
-    "node-fetch": "^2.7.0",
-    "react-icons": "^5.4.0",
-    "ws": "^8.18.0"
-  }
+    "name": "queuecube",
+    "version": "1.82",
+    "private": true,
+    "scripts": {
+        "dev": "concurrently \"cd frontend && npm run dev\" \"cd backend && npm run dev\""
+    },
+    "workspaces": [
+        "backend",
+        "frontend"
+    ]
 }