diff --git a/components/player/MobileVideoPlayer.tsx b/components/player/MobileVideoPlayer.tsx index 5076eab..da9f581 100644 --- a/components/player/MobileVideoPlayer.tsx +++ b/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 (
; @@ -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'); } diff --git a/components/player/utils/urlUtils.ts b/components/player/utils/urlUtils.ts index c40b256..3349650 100644 --- a/components/player/utils/urlUtils.ts +++ b/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)}`; +}