style: reduce modal height and cleanup zoom logic with CSS class

info.yaml

@@ -1,5 +1,5 @@
 title: "애니 다운로더"
-version: "0.5.34"
+version: "0.5.35"
 package_name: "anime_downloader"
 developer: "projectdx"
 description: "anime downloader"

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 */

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({
+                $('#video-player').addClass('vjs-zoomed');
-                    'object-fit': 'cover',
-                    'max-height': '100vh'
-                });
                 $(this).addClass('active').find('i').removeClass('fa-expand').addClass('fa-compress');
             } else {
-                $('#video-player').css({
+                $('#video-player').removeClass('vjs-zoomed');
-                    'object-fit': 'contain',
-                    'max-height': '80vh'
-                });
                 $(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({
+                $('#video-player').removeClass('vjs-zoomed');
-                    'object-fit': 'contain',
-                    'max-height': '80vh'
-                });
                 $('#btn-video-zoom').removeClass('active').find('i').removeClass('fa-compress').addClass('fa-expand');
             }
         });

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>