From 9d14aecdd917abb3bb33669ee34e49bc21f03961 Mon Sep 17 00:00:00 2001
From: Mayank Sharma <unichain0@gmail.com>
Date: Fri, 19 Jun 2026 15:31:28 +0530
Subject: [PATCH 1/6] fix(videoplayer): resolve fullscreen, volume, NaN time,
 play end, and local source issues in NetflixStylePlayer

---
 .../VideoPlayer/NetflixStylePlayer.tsx           | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/VideoPlayer/NetflixStylePlayer.tsx b/frontend/src/components/VideoPlayer/NetflixStylePlayer.tsx
index 84c8f7737..ece0b6aca 100644
--- a/frontend/src/components/VideoPlayer/NetflixStylePlayer.tsx
+++ b/frontend/src/components/VideoPlayer/NetflixStylePlayer.tsx
@@ -11,6 +11,7 @@ import {
   VolumeX,
 } from 'lucide-react';
 import { Slider } from '../../components/ui/Slider';
+import { convertFileSrc } from '@tauri-apps/api/core';
 
 interface NetflixStylePlayerProps {
   videoSrc: string;
@@ -38,22 +39,31 @@ export default function NetflixStylePlayer({
       timeout = setTimeout(() => setShowControls(false), 3000);
     };
 
+    const handleFullscreenChange = () => {
+      setIsFullscreen(document.fullscreenElement === containerRef.current);
+    };
+
     const container = containerRef.current;
     if (container) {
       container.addEventListener('mousemove', showControlsTemporarily);
       container.addEventListener('mouseenter', showControlsTemporarily);
     }
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
 
     return () => {
       if (container) {
         container.removeEventListener('mousemove', showControlsTemporarily);
         container.removeEventListener('mouseenter', showControlsTemporarily);
       }
+      document.removeEventListener('fullscreenchange', handleFullscreenChange);
       clearTimeout(timeout);
     };
   }, []);
 
   const formatTime = (timeInSeconds: number) => {
+    if (isNaN(timeInSeconds) || !isFinite(timeInSeconds)) {
+      return '0:00';
+    }
     const hours = Math.floor(timeInSeconds / 3600);
     const minutes = Math.floor((timeInSeconds % 3600) / 60);
     const seconds = Math.floor(timeInSeconds % 60);
@@ -95,7 +105,6 @@ export default function NetflixStylePlayer({
     } else {
       document.exitFullscreen();
     }
-    setIsFullscreen(!isFullscreen);
   };
 
   const skipTime = (seconds: number) => {
@@ -108,6 +117,7 @@ export default function NetflixStylePlayer({
     if (videoRef.current) {
       const volumeValue = newVolume[0];
       videoRef.current.volume = volumeValue;
+      videoRef.current.muted = volumeValue === 0;
       setVolume(volumeValue);
       setIsMuted(volumeValue === 0);
     }
@@ -130,9 +140,11 @@ export default function NetflixStylePlayer({
       >
         <video
           ref={videoRef}
-          src={videoSrc}
+          src={convertFileSrc(videoSrc)}
           className="h-full w-full"
           onTimeUpdate={handleProgress}
+          onPlay={() => setIsPlaying(true)}
+          onPause={() => setIsPlaying(false)}
           preload="auto"
         />
       </div>

From f160fd3c1a87a7bde82255692c230bf709e1f715 Mon Sep 17 00:00:00 2001
From: Mayank Sharma <unichain0@gmail.com>
Date: Tue, 23 Jun 2026 00:28:34 +0530
Subject: [PATCH 2/6] fix(videoplayer): implement reactive state tracking and
 add robust unit tests

---
 .../VideoPlayer/NetflixStylePlayer.tsx        |  34 +++-
 .../__tests__/NetflixStylePlayer.test.tsx     | 190 ++++++++++++++++++
 2 files changed, 219 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/components/VideoPlayer/__tests__/NetflixStylePlayer.test.tsx

diff --git a/frontend/src/components/VideoPlayer/NetflixStylePlayer.tsx b/frontend/src/components/VideoPlayer/NetflixStylePlayer.tsx
index ece0b6aca..69bc96f05 100644
--- a/frontend/src/components/VideoPlayer/NetflixStylePlayer.tsx
+++ b/frontend/src/components/VideoPlayer/NetflixStylePlayer.tsx
@@ -28,6 +28,8 @@ export default function NetflixStylePlayer({
   const [isMuted, setIsMuted] = useState(false);
   const [showControls, setShowControls] = useState(false);
   const [isFullscreen, setIsFullscreen] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
   const videoRef = useRef<HTMLVideoElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -83,19 +85,36 @@ export default function NetflixStylePlayer({
 
   const handleProgress = () => {
     if (videoRef.current) {
+      setCurrentTime(videoRef.current.currentTime);
       setProgress(
-        (videoRef.current.currentTime / videoRef.current.duration) * 100,
+        videoRef.current.duration
+          ? (videoRef.current.currentTime / videoRef.current.duration) * 100
+          : 0,
       );
     }
   };
 
+  const handleLoadedMetadata = () => {
+    if (videoRef.current) {
+      setDuration(videoRef.current.duration);
+    }
+  };
+
+  const handleDurationChange = () => {
+    if (videoRef.current) {
+      setDuration(videoRef.current.duration);
+    }
+  };
+
   const handleProgressBarClick = (e: React.MouseEvent<HTMLDivElement>) => {
     if (videoRef.current) {
       const progressBar = e.currentTarget;
       const clickPosition =
         (e.clientX - progressBar.getBoundingClientRect().left) /
         progressBar.offsetWidth;
-      videoRef.current.currentTime = clickPosition * videoRef.current.duration;
+      const newTime = clickPosition * videoRef.current.duration;
+      videoRef.current.currentTime = newTime;
+      setCurrentTime(newTime);
     }
   };
 
@@ -109,7 +128,9 @@ export default function NetflixStylePlayer({
 
   const skipTime = (seconds: number) => {
     if (videoRef.current) {
-      videoRef.current.currentTime += seconds;
+      const newTime = videoRef.current.currentTime + seconds;
+      videoRef.current.currentTime = newTime;
+      setCurrentTime(newTime);
     }
   };
 
@@ -143,8 +164,11 @@ export default function NetflixStylePlayer({
           src={convertFileSrc(videoSrc)}
           className="h-full w-full"
           onTimeUpdate={handleProgress}
+          onLoadedMetadata={handleLoadedMetadata}
+          onDurationChange={handleDurationChange}
           onPlay={() => setIsPlaying(true)}
           onPause={() => setIsPlaying(false)}
+          onEnded={() => setIsPlaying(false)}
           preload="auto"
         />
       </div>
@@ -179,9 +203,9 @@ export default function NetflixStylePlayer({
             <FastForward size={24} />
           </button>
           <div className="text-white">
-            {formatTime(videoRef.current?.currentTime ?? 0) +
+            {formatTime(currentTime) +
               ' / ' +
-              formatTime(videoRef.current?.duration ?? 0)}
+              formatTime(duration)}
           </div>
         </div>
 
diff --git a/frontend/src/components/VideoPlayer/__tests__/NetflixStylePlayer.test.tsx b/frontend/src/components/VideoPlayer/__tests__/NetflixStylePlayer.test.tsx
new file mode 100644
index 000000000..61fc3dd7d
--- /dev/null
+++ b/frontend/src/components/VideoPlayer/__tests__/NetflixStylePlayer.test.tsx
@@ -0,0 +1,190 @@
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import NetflixStylePlayer from '../NetflixStylePlayer';
+
+// Mock Tauri convertFileSrc API
+jest.mock('@tauri-apps/api/core', () => ({
+  convertFileSrc: (path: string) => `tauri-converted://${path}`,
+}));
+
+// Mock Slider component to use simple range input for testing
+jest.mock('../../ui/Slider', () => ({
+  Slider: ({ onValueChange, value, min, max, step }: any) => (
+    <input
+      data-testid="volume-slider"
+      type="range"
+      min={min}
+      max={max}
+      step={step}
+      value={value[0]}
+      onChange={(e) => onValueChange([parseFloat(e.target.value)])}
+    />
+  ),
+}));
+
+// Mock lucide icons for easy querying
+jest.mock('lucide-react', () => ({
+  Play: () => <span data-testid="icon-play">Play</span>,
+  Pause: () => <span data-testid="icon-pause">Pause</span>,
+  Rewind: () => <span data-testid="icon-rewind">Rewind</span>,
+  FastForward: () => <span data-testid="icon-fastforward">FastForward</span>,
+  Volume2: () => <span data-testid="icon-volume">Volume</span>,
+  VolumeX: () => <span data-testid="icon-mute">Mute</span>,
+  Maximize2: () => <span data-testid="icon-maximize">Maximize</span>,
+  Minimize2: () => <span data-testid="icon-minimize">Minimize</span>,
+}));
+
+describe('NetflixStylePlayer', () => {
+  let requestFullscreenMock: jest.Mock;
+  let exitFullscreenMock: jest.Mock;
+
+  beforeEach(() => {
+    // Mock HTMLMediaElement play and pause
+    window.HTMLMediaElement.prototype.play = jest.fn().mockImplementation(function (this: HTMLVideoElement) {
+      const playEvent = new Event('play');
+      this.dispatchEvent(playEvent);
+      return Promise.resolve();
+    });
+
+    window.HTMLMediaElement.prototype.pause = jest.fn().mockImplementation(function (this: HTMLVideoElement) {
+      const pauseEvent = new Event('pause');
+      this.dispatchEvent(pauseEvent);
+    });
+
+    requestFullscreenMock = jest.fn();
+    exitFullscreenMock = jest.fn();
+
+    HTMLElement.prototype.requestFullscreen = requestFullscreenMock;
+    document.exitFullscreen = exitFullscreenMock;
+
+    Object.defineProperty(document, 'fullscreenElement', {
+      value: null,
+      writable: true,
+      configurable: true,
+    });
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  test('converts video source using convertFileSrc for Tauri support', () => {
+    render(<NetflixStylePlayer videoSrc="local-path/video.mp4" title="Test" description="Desc" />);
+    const video = document.querySelector('video') as HTMLVideoElement;
+    expect(video).toBeInTheDocument();
+    expect(video.src).toBe('tauri-converted://local-path/video.mp4');
+  });
+
+  test('updates isFullscreen state on fullscreenchange event', () => {
+    const { container } = render(<NetflixStylePlayer videoSrc="test-video.mp4" title="Test" description="Desc" />);
+
+    expect(screen.queryByTestId('icon-minimize')).not.toBeInTheDocument();
+    expect(screen.getByTestId('icon-maximize')).toBeInTheDocument();
+
+    Object.defineProperty(document, 'fullscreenElement', {
+      value: container.firstChild,
+      writable: true,
+      configurable: true,
+    });
+
+    act(() => {
+      document.dispatchEvent(new Event('fullscreenchange'));
+    });
+
+    expect(screen.getByTestId('icon-minimize')).toBeInTheDocument();
+    expect(screen.queryByTestId('icon-maximize')).not.toBeInTheDocument();
+
+    Object.defineProperty(document, 'fullscreenElement', {
+      value: null,
+      writable: true,
+      configurable: true,
+    });
+
+    act(() => {
+      document.dispatchEvent(new Event('fullscreenchange'));
+    });
+
+    expect(screen.queryByTestId('icon-minimize')).not.toBeInTheDocument();
+    expect(screen.getByTestId('icon-maximize')).toBeInTheDocument();
+  });
+
+  test('renders 0:00 before video metadata is loaded and updates on loadedmetadata', () => {
+    render(<NetflixStylePlayer videoSrc="video.mp4" title="Test" description="Desc" />);
+
+    expect(screen.getByText('0:00 / 0:00')).toBeInTheDocument();
+
+    const video = document.querySelector('video') as HTMLVideoElement;
+
+    Object.defineProperty(video, 'duration', {
+      configurable: true,
+      value: 125,
+    });
+
+    act(() => {
+      fireEvent(video, new Event('loadedmetadata'));
+    });
+
+    expect(screen.getByText('0:00 / 2:05')).toBeInTheDocument();
+  });
+
+  test('volume slider updates volume and unmutes video', () => {
+    render(<NetflixStylePlayer videoSrc="video.mp4" title="Test" description="Desc" />);
+    const video = document.querySelector('video') as HTMLVideoElement;
+
+    let setMutedVal = false;
+    let setVolumeVal = 1;
+    Object.defineProperty(video, 'muted', {
+      get: () => setMutedVal,
+      set: (val) => {
+        setMutedVal = val;
+      },
+      configurable: true,
+    });
+    Object.defineProperty(video, 'volume', {
+      get: () => setVolumeVal,
+      set: (val) => {
+        setVolumeVal = val;
+      },
+      configurable: true,
+    });
+
+    const muteBtn = screen.getByTestId('icon-volume').closest('button');
+    expect(muteBtn).toBeInTheDocument();
+
+    act(() => {
+      fireEvent.click(muteBtn!);
+    });
+
+    expect(setMutedVal).toBe(true);
+    expect(screen.getByTestId('icon-mute')).toBeInTheDocument();
+
+    const slider = screen.getByTestId('volume-slider');
+    act(() => {
+      fireEvent.change(slider, { target: { value: '0.5' } });
+    });
+
+    expect(setVolumeVal).toBe(0.5);
+    expect(setMutedVal).toBe(false);
+    expect(screen.getByTestId('icon-volume')).toBeInTheDocument();
+  });
+
+  test('play/pause button updates when video ends', () => {
+    render(<NetflixStylePlayer videoSrc="video.mp4" title="Test" description="Desc" />);
+
+    const playBtn = screen.getByTestId('icon-play').closest('button');
+    expect(playBtn).toBeInTheDocument();
+
+    act(() => {
+      fireEvent.click(playBtn!);
+    });
+
+    expect(screen.getByTestId('icon-pause')).toBeInTheDocument();
+
+    const video = document.querySelector('video') as HTMLVideoElement;
+
+    act(() => {
+      fireEvent(video, new Event('ended'));
+    });
+
+    expect(screen.getByTestId('icon-play')).toBeInTheDocument();
+  });
+});

From 4649a86b736297543bc8ff29d4daa41e6d48cf1b Mon Sep 17 00:00:00 2001
From: Mayank Sharma <unichain0@gmail.com>
Date: Tue, 23 Jun 2026 00:37:12 +0530
Subject: [PATCH 3/6] style(videoplayer): auto-format files with prettier

---
 .../VideoPlayer/NetflixStylePlayer.tsx        |  4 +-
 .../__tests__/NetflixStylePlayer.test.tsx     | 64 ++++++++++++++-----
 2 files changed, 50 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/VideoPlayer/NetflixStylePlayer.tsx b/frontend/src/components/VideoPlayer/NetflixStylePlayer.tsx
index 69bc96f05..d9c5f2490 100644
--- a/frontend/src/components/VideoPlayer/NetflixStylePlayer.tsx
+++ b/frontend/src/components/VideoPlayer/NetflixStylePlayer.tsx
@@ -203,9 +203,7 @@ export default function NetflixStylePlayer({
             <FastForward size={24} />
           </button>
           <div className="text-white">
-            {formatTime(currentTime) +
-              ' / ' +
-              formatTime(duration)}
+            {formatTime(currentTime) + ' / ' + formatTime(duration)}
           </div>
         </div>
 
diff --git a/frontend/src/components/VideoPlayer/__tests__/NetflixStylePlayer.test.tsx b/frontend/src/components/VideoPlayer/__tests__/NetflixStylePlayer.test.tsx
index 61fc3dd7d..fd193b451 100644
--- a/frontend/src/components/VideoPlayer/__tests__/NetflixStylePlayer.test.tsx
+++ b/frontend/src/components/VideoPlayer/__tests__/NetflixStylePlayer.test.tsx
@@ -39,16 +39,20 @@ describe('NetflixStylePlayer', () => {
 
   beforeEach(() => {
     // Mock HTMLMediaElement play and pause
-    window.HTMLMediaElement.prototype.play = jest.fn().mockImplementation(function (this: HTMLVideoElement) {
-      const playEvent = new Event('play');
-      this.dispatchEvent(playEvent);
-      return Promise.resolve();
-    });
-
-    window.HTMLMediaElement.prototype.pause = jest.fn().mockImplementation(function (this: HTMLVideoElement) {
-      const pauseEvent = new Event('pause');
-      this.dispatchEvent(pauseEvent);
-    });
+    window.HTMLMediaElement.prototype.play = jest
+      .fn()
+      .mockImplementation(function (this: HTMLVideoElement) {
+        const playEvent = new Event('play');
+        this.dispatchEvent(playEvent);
+        return Promise.resolve();
+      });
+
+    window.HTMLMediaElement.prototype.pause = jest
+      .fn()
+      .mockImplementation(function (this: HTMLVideoElement) {
+        const pauseEvent = new Event('pause');
+        this.dispatchEvent(pauseEvent);
+      });
 
     requestFullscreenMock = jest.fn();
     exitFullscreenMock = jest.fn();
@@ -68,14 +72,26 @@ describe('NetflixStylePlayer', () => {
   });
 
   test('converts video source using convertFileSrc for Tauri support', () => {
-    render(<NetflixStylePlayer videoSrc="local-path/video.mp4" title="Test" description="Desc" />);
+    render(
+      <NetflixStylePlayer
+        videoSrc="local-path/video.mp4"
+        title="Test"
+        description="Desc"
+      />,
+    );
     const video = document.querySelector('video') as HTMLVideoElement;
     expect(video).toBeInTheDocument();
     expect(video.src).toBe('tauri-converted://local-path/video.mp4');
   });
 
   test('updates isFullscreen state on fullscreenchange event', () => {
-    const { container } = render(<NetflixStylePlayer videoSrc="test-video.mp4" title="Test" description="Desc" />);
+    const { container } = render(
+      <NetflixStylePlayer
+        videoSrc="test-video.mp4"
+        title="Test"
+        description="Desc"
+      />,
+    );
 
     expect(screen.queryByTestId('icon-minimize')).not.toBeInTheDocument();
     expect(screen.getByTestId('icon-maximize')).toBeInTheDocument();
@@ -108,7 +124,13 @@ describe('NetflixStylePlayer', () => {
   });
 
   test('renders 0:00 before video metadata is loaded and updates on loadedmetadata', () => {
-    render(<NetflixStylePlayer videoSrc="video.mp4" title="Test" description="Desc" />);
+    render(
+      <NetflixStylePlayer
+        videoSrc="video.mp4"
+        title="Test"
+        description="Desc"
+      />,
+    );
 
     expect(screen.getByText('0:00 / 0:00')).toBeInTheDocument();
 
@@ -127,7 +149,13 @@ describe('NetflixStylePlayer', () => {
   });
 
   test('volume slider updates volume and unmutes video', () => {
-    render(<NetflixStylePlayer videoSrc="video.mp4" title="Test" description="Desc" />);
+    render(
+      <NetflixStylePlayer
+        videoSrc="video.mp4"
+        title="Test"
+        description="Desc"
+      />,
+    );
     const video = document.querySelector('video') as HTMLVideoElement;
 
     let setMutedVal = false;
@@ -168,7 +196,13 @@ describe('NetflixStylePlayer', () => {
   });
 
   test('play/pause button updates when video ends', () => {
-    render(<NetflixStylePlayer videoSrc="video.mp4" title="Test" description="Desc" />);
+    render(
+      <NetflixStylePlayer
+        videoSrc="video.mp4"
+        title="Test"
+        description="Desc"
+      />,
+    );
 
     const playBtn = screen.getByTestId('icon-play').closest('button');
     expect(playBtn).toBeInTheDocument();

From 85c117aec17a998b35ce4caff2b0774ab7f25120 Mon Sep 17 00:00:00 2001
From: Mayank Sharma <unichain0@gmail.com>
Date: Tue, 23 Jun 2026 00:53:45 +0530
Subject: [PATCH 4/6] fix(videoplayer): clamp seek times and type Slider mock
 props explicitly

---
 .../VideoPlayer/NetflixStylePlayer.tsx           | 12 ++++++++++--
 .../__tests__/NetflixStylePlayer.test.tsx        | 16 ++++++++++++++--
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/VideoPlayer/NetflixStylePlayer.tsx b/frontend/src/components/VideoPlayer/NetflixStylePlayer.tsx
index d9c5f2490..5f2597e0c 100644
--- a/frontend/src/components/VideoPlayer/NetflixStylePlayer.tsx
+++ b/frontend/src/components/VideoPlayer/NetflixStylePlayer.tsx
@@ -112,7 +112,11 @@ export default function NetflixStylePlayer({
       const clickPosition =
         (e.clientX - progressBar.getBoundingClientRect().left) /
         progressBar.offsetWidth;
-      const newTime = clickPosition * videoRef.current.duration;
+      const rawTime = clickPosition * videoRef.current.duration;
+      const maxTime = Number.isFinite(videoRef.current.duration)
+        ? videoRef.current.duration
+        : 0;
+      const newTime = Math.min(Math.max(rawTime, 0), maxTime);
       videoRef.current.currentTime = newTime;
       setCurrentTime(newTime);
     }
@@ -128,7 +132,11 @@ export default function NetflixStylePlayer({
 
   const skipTime = (seconds: number) => {
     if (videoRef.current) {
-      const newTime = videoRef.current.currentTime + seconds;
+      const rawTime = videoRef.current.currentTime + seconds;
+      const maxTime = Number.isFinite(videoRef.current.duration)
+        ? videoRef.current.duration
+        : 0;
+      const newTime = Math.min(Math.max(rawTime, 0), maxTime);
       videoRef.current.currentTime = newTime;
       setCurrentTime(newTime);
     }
diff --git a/frontend/src/components/VideoPlayer/__tests__/NetflixStylePlayer.test.tsx b/frontend/src/components/VideoPlayer/__tests__/NetflixStylePlayer.test.tsx
index fd193b451..b49e74fbe 100644
--- a/frontend/src/components/VideoPlayer/__tests__/NetflixStylePlayer.test.tsx
+++ b/frontend/src/components/VideoPlayer/__tests__/NetflixStylePlayer.test.tsx
@@ -8,7 +8,19 @@ jest.mock('@tauri-apps/api/core', () => ({
 
 // Mock Slider component to use simple range input for testing
 jest.mock('../../ui/Slider', () => ({
-  Slider: ({ onValueChange, value, min, max, step }: any) => (
+  Slider: ({
+    onValueChange,
+    value = [0],
+    min,
+    max,
+    step,
+  }: {
+    onValueChange?: (value: number[]) => void;
+    value?: number[];
+    min?: number;
+    max?: number;
+    step?: number;
+  }) => (
     <input
       data-testid="volume-slider"
       type="range"
@@ -16,7 +28,7 @@ jest.mock('../../ui/Slider', () => ({
       max={max}
       step={step}
       value={value[0]}
-      onChange={(e) => onValueChange([parseFloat(e.target.value)])}
+      onChange={(e) => onValueChange?.([Number.parseFloat(e.target.value)])}
     />
   ),
 }));

From 51d457e9ceb19f576e798253ba9785f496898911 Mon Sep 17 00:00:00 2001
From: Mayank Sharma <unichain0@gmail.com>
Date: Tue, 23 Jun 2026 22:51:14 +0530
Subject: [PATCH 5/6] fix(videoplayer): update tauri CSP, optimize hooks, and
 clamp seek times

---
 frontend/src-tauri/tauri.conf.json            |  2 +-
 .../VideoPlayer/NetflixStylePlayer.tsx        | 34 ++++++++++++-------
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/frontend/src-tauri/tauri.conf.json b/frontend/src-tauri/tauri.conf.json
index 67dff52c5..beffb4f1d 100644
--- a/frontend/src-tauri/tauri.conf.json
+++ b/frontend/src-tauri/tauri.conf.json
@@ -66,7 +66,7 @@
         ],
         "enable": true
       },
-      "csp": "default-src 'self'; img-src 'self' data: asset: http://asset.localhost; media-src 'self' blob: data:; connect-src 'self' ipc: http://ipc.localhost http://localhost:52123 ws://localhost:52123 http://localhost:52124 ws://localhost:52124"
+      "csp": "default-src 'self'; img-src 'self' data: asset: http://asset.localhost; media-src 'self' blob: data: asset: http://asset.localhost; connect-src 'self' ipc: http://ipc.localhost http://localhost:52123 ws://localhost:52123 http://localhost:52124 ws://localhost:52124"
     }
   }
 }
diff --git a/frontend/src/components/VideoPlayer/NetflixStylePlayer.tsx b/frontend/src/components/VideoPlayer/NetflixStylePlayer.tsx
index 5f2597e0c..0139d71e3 100644
--- a/frontend/src/components/VideoPlayer/NetflixStylePlayer.tsx
+++ b/frontend/src/components/VideoPlayer/NetflixStylePlayer.tsx
@@ -1,5 +1,5 @@
 import type React from 'react';
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, useMemo } from 'react';
 import {
   Play,
   Pause,
@@ -33,6 +33,8 @@ export default function NetflixStylePlayer({
   const videoRef = useRef<HTMLVideoElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
 
+  const resolvedSrc = useMemo(() => convertFileSrc(videoSrc), [videoSrc]);
+
   useEffect(() => {
     let timeout: NodeJS.Timeout;
     const showControlsTemporarily = () => {
@@ -41,29 +43,34 @@ export default function NetflixStylePlayer({
       timeout = setTimeout(() => setShowControls(false), 3000);
     };
 
-    const handleFullscreenChange = () => {
-      setIsFullscreen(document.fullscreenElement === containerRef.current);
-    };
-
     const container = containerRef.current;
     if (container) {
       container.addEventListener('mousemove', showControlsTemporarily);
       container.addEventListener('mouseenter', showControlsTemporarily);
     }
-    document.addEventListener('fullscreenchange', handleFullscreenChange);
 
     return () => {
       if (container) {
         container.removeEventListener('mousemove', showControlsTemporarily);
         container.removeEventListener('mouseenter', showControlsTemporarily);
       }
-      document.removeEventListener('fullscreenchange', handleFullscreenChange);
       clearTimeout(timeout);
     };
   }, []);
 
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      setIsFullscreen(document.fullscreenElement === containerRef.current);
+    };
+
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+    return () => {
+      document.removeEventListener('fullscreenchange', handleFullscreenChange);
+    };
+  }, []);
+
   const formatTime = (timeInSeconds: number) => {
-    if (isNaN(timeInSeconds) || !isFinite(timeInSeconds)) {
+    if (!Number.isFinite(timeInSeconds)) {
       return '0:00';
     }
     const hours = Math.floor(timeInSeconds / 3600);
@@ -77,9 +84,12 @@ export default function NetflixStylePlayer({
   };
 
   const togglePlay = () => {
-    if (videoRef.current) {
-      isPlaying ? videoRef.current.pause() : videoRef.current.play();
-      setIsPlaying(!isPlaying);
+    const video = videoRef.current;
+    if (!video) return;
+    if (video.paused) {
+      video.play().catch(() => {});
+    } else {
+      video.pause();
     }
   };
 
@@ -169,7 +179,7 @@ export default function NetflixStylePlayer({
       >
         <video
           ref={videoRef}
-          src={convertFileSrc(videoSrc)}
+          src={resolvedSrc}
           className="h-full w-full"
           onTimeUpdate={handleProgress}
           onLoadedMetadata={handleLoadedMetadata}

From b1584dedca803ca9a56933c6a5b1ebb4cee93bcb Mon Sep 17 00:00:00 2001
From: Mayank Sharma <unichain0@gmail.com>
Date: Tue, 23 Jun 2026 22:57:37 +0530
Subject: [PATCH 6/6] fix(videoplayer): add automated test check for tauri
 media-src CSP

---
 .../__tests__/NetflixStylePlayer.test.tsx     | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/frontend/src/components/VideoPlayer/__tests__/NetflixStylePlayer.test.tsx b/frontend/src/components/VideoPlayer/__tests__/NetflixStylePlayer.test.tsx
index b49e74fbe..88336f2f8 100644
--- a/frontend/src/components/VideoPlayer/__tests__/NetflixStylePlayer.test.tsx
+++ b/frontend/src/components/VideoPlayer/__tests__/NetflixStylePlayer.test.tsx
@@ -1,4 +1,6 @@
 import { render, screen, fireEvent, act } from '@testing-library/react';
+import fs from 'fs';
+import path from 'path';
 import NetflixStylePlayer from '../NetflixStylePlayer';
 
 // Mock Tauri convertFileSrc API
@@ -233,4 +235,25 @@ describe('NetflixStylePlayer', () => {
 
     expect(screen.getByTestId('icon-play')).toBeInTheDocument();
   });
+
+  describe('Tauri CSP Policy Configuration', () => {
+    test('tauri.conf.json whitelists asset: and http://asset.localhost in media-src CSP', () => {
+      const configPath = path.resolve(
+        __dirname,
+        '../../../../src-tauri/tauri.conf.json',
+      );
+      const configRaw = fs.readFileSync(configPath, 'utf8');
+      const config = JSON.parse(configRaw);
+
+      const csp = config.app?.security?.csp;
+      expect(csp).toBeDefined();
+
+      const mediaSrcMatch = csp.match(/media-src\s+([^;]+)/);
+      expect(mediaSrcMatch).toBeTruthy();
+
+      const mediaSrcDirective = mediaSrcMatch[1];
+      expect(mediaSrcDirective).toContain('asset:');
+      expect(mediaSrcDirective).toContain('http://asset.localhost');
+    });
+  });
 });