feat: proxy video sources through /api/proxy endpoint using a new utility function.

components/player/MobileVideoPlayer.tsx

@@ -9,6 +9,7 @@ import { useMobileGestures } from './hooks/useMobileGestures';
 import { MobileControlsWrapper } from './mobile/MobileControlsWrapper';
 import { MobileOverlay } from './mobile/MobileOverlay';
 import { MobileSkipIndicator } from './mobile/MobileSkipIndicator';
+import { getProxyUrl } from './utils/urlUtils';
 
 interface MobileVideoPlayerProps {
   src: string;
@@ -87,7 +88,7 @@ export function MobileVideoPlayer({
     togglePlay,
   });
 
-
+  const proxiedSrc = getProxyUrl(src);
 
   return (
     <div
@@ -98,7 +99,7 @@ export function MobileVideoPlayer({
       <video
         ref={videoRef}
         className="w-full h-full object-contain touch-none"
-        src={src}
+        src={proxiedSrc}
         poster={poster}
         onPlay={handlePlay}
         onPause={handlePause}

components/player/hooks/useHlsPlayer.ts

@@ -1,5 +1,6 @@
 import { useEffect, useRef } from 'react';
 import Hls from 'hls.js';
+import { getProxyUrl } from '../utils/urlUtils';
 
 interface UseHlsPlayerProps {
     videoRef: React.RefObject<HTMLVideoElement | null>;
@@ -27,6 +28,7 @@ export function useHlsPlayer({
         }
 
         let hls: Hls | null = null;
+        const proxiedSrc = getProxyUrl(src);
 
         // Check if HLS is supported natively (Safari, Mobile Chrome)
         // We prefer native playback if available as it's usually more battery efficient
@@ -49,7 +51,7 @@ export function useHlsPlayer({
                 });
                 hlsRef.current = hls;
 
-                hls.loadSource(src);
+                hls.loadSource(proxiedSrc);
                 hls.attachMedia(video);
 
                 hls.on(Hls.Events.MANIFEST_PARSED, () => {
@@ -117,12 +119,12 @@ export function useHlsPlayer({
             } else {
                 console.log('[HLS] Using native HLS support');
                 // Native HLS support
-                video.src = src;
+                video.src = proxiedSrc;
             }
         } else if (isNativeHlsSupported) {
             // Fallback for environments where Hls.js is not supported but native is (e.g. iOS without MSE?)
             console.log('[HLS] Using native HLS support (Hls.js not supported)');
-            video.src = src;
+            video.src = proxiedSrc;
         } else {
             console.error('[HLS] HLS not supported in this browser');
         }

components/player/utils/urlUtils.ts

@@ -22,3 +22,12 @@ export function getCopyUrl(src: string, type: 'original' | 'proxy' = 'original')
 
     return urlToCopy;
 }
+
+export function getProxyUrl(src: string): string {
+    if (!src) return '';
+    if (src.includes('/api/proxy')) return src;
+
+    // Handle server-side vs client-side origin
+    const origin = typeof window !== 'undefined' ? window.location.origin : '';
+    return `${origin}/api/proxy?url=${encodeURIComponent(src)}`;
+}