From bda7d16c1caa669b2d12397fce0ea20cdd2c90c2 Mon Sep 17 00:00:00 2001
From: projectdx <com114@gmail.com>
Date: Sun, 4 Jan 2026 20:32:59 +0900
Subject: [PATCH] style: reduce modal height and cleanup zoom logic with CSS
 class

---
 info.yaml                                     |  2 +-
 static/css/video_modal.css                    | 21 +++++++++++++------
 static/js/video_modal.js                      | 15 +++----------
 .../components/video_modal.html               |  2 +-
 4 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/info.yaml b/info.yaml
index 62c647b..5c43c9c 100644
--- a/info.yaml
+++ b/info.yaml
@@ -1,5 +1,5 @@
 title: "애니 다운로더"
-version: "0.5.34"
+version: "0.5.35"
 package_name: "anime_downloader"
 developer: "projectdx"
 description: "anime downloader"
diff --git a/static/css/video_modal.css b/static/css/video_modal.css
index 04ef97a..4743a40 100644
--- a/static/css/video_modal.css
+++ b/static/css/video_modal.css
@@ -7,7 +7,7 @@
 #videoModal .modal-dialog {
     max-width: 1100px;
     margin: 30px auto;
-    height: 85vh; /* Larger modal height » half-sizeish */
+    height: 80vh; /* Reduced from 85vh */
 }
 #videoModal .modal-content {
     border-radius: 12px !important;
@@ -60,16 +60,23 @@
     display: flex;
     align-items: center !important; /* Force center */
     justify-content: center !important;
-    min-height: 450px; /* Increased for better visual impact */
+    min-height: 350px; /* Reduced from 450px */
 }
-
-/* Ensure Video.js container itself is centered */
 .video-container .video-js {
     margin: auto !important;
     max-width: 100%;
     max-height: 100%;
 }
 
+/* Zoomed state via CSS class */
+.video-container .video-js.vjs-zoomed {
+    object-fit: cover !important;
+    max-height: 100% !important;
+}
+.video-container .video-js.vjs-zoomed video {
+    object-fit: cover !important;
+}
+
 /* Zoom Button */
 .video-zoom-btn {
     position: absolute;
@@ -270,19 +277,21 @@
     }
     #videoModal .modal-content {
         border-radius: 0 !important;
-        height: 100vh;
+        max-height: 92vh; /* Use max-height instead of fixed 100vh to avoid taking too much space */
+        height: auto;
         display: flex;
         flex-direction: column;
     }
     #video-player {
         width: 100% !important;
-        height: auto !important; /* Remove height: 100% to allow centering */
+        height: auto !important;
         max-width: 100%;
     }
     .video-container {
         flex: 1;
         display: flex;
         align-items: center;
+        min-height: 250px; /* Fixed height for video area on mobile */
     }
     .playlist-controls {
         padding-bottom: 25px; /* Mobile safe area */
diff --git a/static/js/video_modal.js b/static/js/video_modal.js
index 0b3e5b6..cade724 100644
--- a/static/js/video_modal.js
+++ b/static/js/video_modal.js
@@ -50,16 +50,10 @@ var VideoModal = (function() {
         $('#btn-video-zoom').off('click').on('click', function() {
             isVideoZoomed = !isVideoZoomed;
             if (isVideoZoomed) {
-                $('#video-player').css({
-                    'object-fit': 'cover',
-                    'max-height': '100vh'
-                });
+                $('#video-player').addClass('vjs-zoomed');
                 $(this).addClass('active').find('i').removeClass('fa-expand').addClass('fa-compress');
             } else {
-                $('#video-player').css({
-                    'object-fit': 'contain',
-                    'max-height': '80vh'
-                });
+                $('#video-player').removeClass('vjs-zoomed');
                 $(this).removeClass('active').find('i').removeClass('fa-compress').addClass('fa-expand');
             }
         });
@@ -79,10 +73,7 @@ var VideoModal = (function() {
             $('body').removeClass('modal-video-open');
             if (isVideoZoomed) {
                 isVideoZoomed = false;
-                $('#video-player').css({
-                    'object-fit': 'contain',
-                    'max-height': '80vh'
-                });
+                $('#video-player').removeClass('vjs-zoomed');
                 $('#btn-video-zoom').removeClass('active').find('i').removeClass('fa-compress').addClass('fa-expand');
             }
         });
diff --git a/templates/anime_downloader/components/video_modal.html b/templates/anime_downloader/components/video_modal.html
index 06f02a0..db4dab0 100644
--- a/templates/anime_downloader/components/video_modal.html
+++ b/templates/anime_downloader/components/video_modal.html
@@ -16,7 +16,7 @@
                 </button>
             </div>
             <div class="modal-body" style="padding: 0;">
-                <div class="video-container" style="position: relative; overflow: hidden; background: #000;">
+                <div class="video-container">
                     <video id="video-player" class="video-js vjs-big-play-centered vjs-theme-fantasy m-auto" controls preload="auto" playsinline webkit-playsinline>
                         <p class="vjs-no-js">JavaScript가 필요합니다.</p>
                     </video>