From f9fa2f05f08f1564030dddd7d13e0a00c58bce75 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Mon, 13 Oct 2025 20:19:08 +0200
Subject: [PATCH] feat: implement responsive video player with aspect ratio

- Update ReactPlayer to use width='100%', height='auto' with aspectRatio: '16/9'
- Replace padding-top approach with modern aspect-ratio CSS property
- Add minimum width (300px) and maximum width (800px) constraints
- Center video container with margin: 0 auto
- Ensure video player is no longer constrained by title length
- Improve video viewing experience across different screen sizes
---
 src/components/ContentPanel.tsx  | 10 +++++++---
 src/styles/components/reader.css |  7 +++++--
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/ContentPanel.tsx b/src/components/ContentPanel.tsx
index 4d47cab5..581a46dc 100644
--- a/src/components/ContentPanel.tsx
+++ b/src/components/ContentPanel.tsx
@@ -400,9 +400,13 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
             <ReactPlayer 
               url={selectedUrl as string} 
               controls 
-              width="100%" 
-              height="100%"
-              style={{ position: 'absolute', top: 0, left: 0 }}
+              width="100%"
+              height="auto"
+              style={{ 
+                width: '100%', 
+                height: 'auto', 
+                aspectRatio: '16/9' 
+              }}
               onDuration={(d) => setVideoDurationSec(Math.floor(d))}
             />
           </div>
diff --git a/src/styles/components/reader.css b/src/styles/components/reader.css
index 1a3ddc2d..92677e5f 100644
--- a/src/styles/components/reader.css
+++ b/src/styles/components/reader.css
@@ -13,8 +13,11 @@
 /* Video container - responsive wrapper following react-player docs */
 .reader-video { 
   position: relative;
-  padding-top: 56.25%; /* 16:9 aspect ratio */
-  margin-bottom: 1rem;
+  width: 100%;
+  min-width: 300px;  /* Minimum width */
+  max-width: 800px;   /* Maximum width */
+  aspect-ratio: 16/9;
+  margin: 0 auto 1rem auto; /* Center it */
   background: #000;
 }
 .reader.empty { color: #888; }