fix: use NEXT_PUBLIC_API_URL and add yt-dlp to fix backend info fetching

backend/Dockerfile

@@ -12,7 +12,9 @@ RUN CGO_ENABLED=1 GOOS=linux go build -o kv-tube .
 
 FROM alpine:latest
 
-RUN apk add --no-cache ca-certificates ffmpeg curl
+RUN apk add --no-cache ca-certificates ffmpeg curl python3 py3-pip && \
+    curl -L https://github.com/yt-dlp/yt-dlp/releases/latest/download/yt-dlp -o /usr/local/bin/yt-dlp && \
+    chmod a+rx /usr/local/bin/yt-dlp
 
 WORKDIR /app
 

docker-compose.yml

@@ -28,6 +28,8 @@ services:
     restart: unless-stopped
     ports:
       - "5011:3000"
+    environment:
+      - NEXT_PUBLIC_API_URL=http://kv-tube-backend:8080
     depends_on:
       - kv-tube-backend
     labels:

fix_urls.js

@@ -0,0 +1,33 @@
+const fs = require('fs');
+const path = require('path');
+const glob = require('glob');
+
+// Use simple find approach for ts/tsx files
+const execSync = require('child_process').execSync;
+const files = execSync('find frontend -type f -name "*.ts" -o -name "*.tsx"').toString().trim().split('\n');
+
+files.forEach(file => {
+    let content = fs.readFileSync(file, 'utf8');
+    // Revert the bad perl replacement
+    content = content.replace(/\$\{process\.env\.NEXT_PUBLIC_API_URL \|\| 'http:\/\/127\.0\.0\.1:8080'\}/g, 'http://127.0.0.1:8080');
+    
+    // Apply proper replacement: 
+    // const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://127.0.0.1:8080';
+    // fetch(`http://127.0.0.1:8080...`) -> fetch(`${process.env.NEXT_PUBLIC_API_URL || 'http://127.0.0.1:8080'}...`)
+    
+    // Actually, only fetch calls need the environment var, but we can just replace 'http://127.0.0.1:8080'
+    // with API_BASE if we import or define API_BASE. Since it's easier, let's just replace the raw literal string.
+    
+    content = content.replace(/'http:\/\/127\.0\.0\.1:8080/g, '`${process.env.NEXT_PUBLIC_API_URL || \'http://127.0.0.1:8080\'}');
+    content = content.replace(/"http:\/\/127\.0\.0\.1:8080/g, '`${process.env.NEXT_PUBLIC_API_URL || \'http://127.0.0.1:8080\'}');
+    content = content.replace(/`http:\/\/127\.0\.0\.1:8080/g, '`${process.env.NEXT_PUBLIC_API_URL || \'http://127.0.0.1:8080\'}');
+    
+    // We have to be careful not to double replace. The above will turn 'http://127.0.0.1:8080/api...' into 
+    // `${process.env...}/api...`
+    
+    // Let's actually just revert the breaking perl replace first:
+    // It looks like: process.env.NEXT_PUBLIC_API_URL || '${process.env.NEXT_PUBLIC_API_URL || 'http://127.0.0.1:8080'}'
+    
+    fs.writeFileSync(file, content);
+});
+console.log("Done");

frontend/app/api/stream/route.ts

@@ -8,7 +8,7 @@ export async function GET(request: NextRequest) {
     }
 
     try {
-        const res = await fetch(`http://127.0.0.1:8080/api/get_stream_info?v=${videoId}`, {
+        const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL || 'http://127.0.0.1:8080'}/api/get_stream_info?v=${videoId}`, {
             cache: 'no-store',
         });
 

frontend/app/channel/[id]/page.tsx

@@ -29,7 +29,7 @@ function formatSubscribers(count: number): string {
 
 async function getChannelInfo(id: string) {
     try {
-        const res = await fetch(`http://127.0.0.1:8080/api/channel/info?id=${id}`, { cache: 'no-store' });
+        const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL || 'http://127.0.0.1:8080'}/api/channel/info?id=${id}`, { cache: 'no-store' });
         if (!res.ok) return null;
         return res.json() as Promise<ChannelInfo>;
     } catch (e) {
@@ -40,7 +40,7 @@ async function getChannelInfo(id: string) {
 
 async function getChannelVideos(id: string) {
     try {
-        const res = await fetch(`http://127.0.0.1:8080/api/channel/videos?id=${id}&limit=30`, { cache: 'no-store' });
+        const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL || 'http://127.0.0.1:8080'}/api/channel/videos?id=${id}&limit=30`, { cache: 'no-store' });
         if (!res.ok) return [];
         return res.json() as Promise<VideoData[]>;
     } catch (e) {

frontend/app/feed/library/page.tsx

@@ -18,7 +18,7 @@ interface Subscription {
 
 async function getHistory() {
     try {
-        const res = await fetch('http://127.0.0.1:8080/api/history?limit=20', { cache: 'no-store' });
+        const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL || 'http://127.0.0.1:8080'}/api/history?limit=20`, { cache: 'no-store' });
         if (!res.ok) return [];
         return res.json() as Promise<VideoData[]>;
     } catch {
@@ -28,7 +28,7 @@ async function getHistory() {
 
 async function getSubscriptions() {
     try {
-        const res = await fetch('http://127.0.0.1:8080/api/subscriptions', { cache: 'no-store' });
+        const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL || 'http://127.0.0.1:8080'}/api/subscriptions`, { cache: 'no-store' });
         if (!res.ok) return [];
         return res.json() as Promise<Subscription[]>;
     } catch {

frontend/app/feed/subscriptions/page.tsx

@@ -19,7 +19,7 @@ interface Subscription {
 
 async function getSubscriptions() {
     try {
-        const res = await fetch('http://127.0.0.1:8080/api/subscriptions', { cache: 'no-store' });
+        const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL || 'http://127.0.0.1:8080'}/api/subscriptions`, { cache: 'no-store' });
         if (!res.ok) return [];
         return res.json() as Promise<Subscription[]>;
     } catch {
@@ -29,7 +29,7 @@ async function getSubscriptions() {
 
 async function getChannelVideos(channelId: string, limit: number = 5) {
     try {
-        const res = await fetch(`http://127.0.0.1:8080/api/channel/videos?id=${channelId}&limit=${limit}`, { cache: 'no-store' });
+        const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL || 'http://127.0.0.1:8080'}/api/channel/videos?id=${channelId}&limit=${limit}`, { cache: 'no-store' });
         if (!res.ok) return [];
         return res.json() as Promise<VideoData[]>;
     } catch {

frontend/app/search/page.tsx

@@ -24,7 +24,7 @@ function formatViews(views: number): string {
 
 async function fetchSearchResults(query: string) {
     try {
-        const res = await fetch(`http://127.0.0.1:8080/api/search?q=${encodeURIComponent(query)}`, { cache: 'no-store' });
+        const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL || 'http://127.0.0.1:8080'}/api/search?q=${encodeURIComponent(query)}`, { cache: 'no-store' });
         if (!res.ok) return [];
         return res.json() as Promise<VideoData[]>;
     } catch (e) {