diff --git a/apps/client/src/widgets/type_widgets/file/Audio.tsx b/apps/client/src/widgets/type_widgets/file/Audio.tsx
index 9dac014074..08b831a498 100644
--- a/apps/client/src/widgets/type_widgets/file/Audio.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Audio.tsx
@@ -54,7 +54,7 @@ export default function AudioPreview({ note }: { note: FNote }) {
                     <div className="center">
                         <div className="spacer" />
                         <SkipButton mediaRef={audioRef} seconds={-10} icon="bx bx-rewind" text={t("media.back-10s")} />
-                        <PlayPauseButton mediaRef={audioRef} playing={playing} />
+                        <PlayPauseButton playing={playing} togglePlayback={togglePlayback} />
                         <SkipButton mediaRef={audioRef} seconds={30} icon="bx bx-fast-forward" text={t("media.forward-30s")} />
                         <LoopButton mediaRef={audioRef} />
                     </div>
diff --git a/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx b/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
index 6d368d6270..e0fb57c265 100644
--- a/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
+++ b/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
@@ -56,18 +56,10 @@ function formatTime(seconds: number): string {
     return `${mins}:${secs.toString().padStart(2, "0")}`;
 }
 
-export function PlayPauseButton({ mediaRef, playing }: { mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement>, playing: boolean }) {
-    const togglePlayback = () => {
-        const media = mediaRef.current;
-        if (!media) return;
-
-        if (media.paused) {
-            media.play();
-        } else {
-            media.pause();
-        }
-    };
-
+export function PlayPauseButton({ playing, togglePlayback }: {    
+    playing: boolean,
+    togglePlayback: () => void
+}) {
     return (
         <ActionButton
             className="play-button"
diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index 08fe5db4cb..5bf1e260e9 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -33,7 +33,7 @@ export default function VideoPreview({ note }: { note: FNote }) {
     }, []);
 
     const onVideoClick = useCallback((e: MouseEvent) => {
-        if ((e.target as HTMLElement).closest(".video-preview-controls")) return;
+        if ((e.target as HTMLElement).closest(".media-preview-controls")) return;
         togglePlayback();
     }, [togglePlayback]);
 
@@ -65,7 +65,7 @@ export default function VideoPreview({ note }: { note: FNote }) {
                     <div className="center">
                         <div className="spacer" />
                         <SkipButton mediaRef={videoRef} seconds={-10} icon="bx bx-rewind" text={t("media.back-10s")} />
-                        <PlayPauseButton mediaRef={videoRef} playing={playing} />
+                        <PlayPauseButton playing={playing} togglePlayback={togglePlayback} />
                         <SkipButton mediaRef={videoRef} seconds={30} icon="bx bx-fast-forward" text={t("media.forward-30s")} />
                         <LoopButton mediaRef={videoRef} />
                     </div>