From 17463ea9e7b78e0b9dbb562019026d0c901b509e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mert=20Uyan=C4=B1k?=
 <99019289+MertUyanik@users.noreply.github.com>
Date: Thu, 30 Oct 2025 03:39:39 +0300
Subject: [PATCH] Fix Firefox subtitle positioning

---
 src/components/VideoElement.css | 39 +++++++++++++++------------------
 1 file changed, 18 insertions(+), 21 deletions(-)

diff --git a/src/components/VideoElement.css b/src/components/VideoElement.css
index 77d99af..b210161 100644
--- a/src/components/VideoElement.css
+++ b/src/components/VideoElement.css
@@ -176,7 +176,8 @@ video::-moz-cue {
 /* Container - Chromium */
 .video-element::-webkit-media-text-track-container {
   position: absolute !important;
-  bottom: 40px !important;
+  bottom: var(--player-subtitle-bottom-offset) !important;
+  bottom: calc(var(--player-subtitle-bottom-offset) + env(safe-area-inset-bottom, 0px)) !important;
   left: 0 !important;
   right: 0 !important;
   width: 100% !important;
@@ -232,7 +233,8 @@ video::-moz-cue {
 /* Firefox - Use text track display positioning */
 video::-moz-text-track-display {
   position: absolute !important;
-  bottom: 40px !important;
+  bottom: var(--player-subtitle-bottom-offset) !important;
+  bottom: calc(var(--player-subtitle-bottom-offset) + env(safe-area-inset-bottom, 0px)) !important;
   left: 0 !important;
   right: 0 !important;
   width: 100% !important;
@@ -252,7 +254,8 @@ video::-moz-text-track-display {
 
 .video-element::-moz-text-track-display {
   position: absolute !important;
-  bottom: 40px !important;
+  bottom: var(--player-subtitle-bottom-offset) !important;
+  bottom: calc(var(--player-subtitle-bottom-offset) + env(safe-area-inset-bottom, 0px)) !important;
   left: 0 !important;
   right: 0 !important;
   width: 100% !important;
@@ -290,14 +293,16 @@ video:fullscreen::-moz-cue,
 
 .video-element:fullscreen::-webkit-media-text-track-container,
 :fullscreen .video-element::-webkit-media-text-track-container {
-  bottom: 120px !important;
+  bottom: calc(var(--player-subtitle-bottom-offset) + 40px) !important;
+  bottom: calc(var(--player-subtitle-bottom-offset) + 40px + env(safe-area-inset-bottom, 0px)) !important;
 }
 
 video:fullscreen::-moz-text-track-display,
 .video-element:fullscreen::-moz-text-track-display,
 :fullscreen video::-moz-text-track-display,
 :fullscreen .video-element::-moz-text-track-display {
-  bottom: 120px !important;
+  bottom: calc(var(--player-subtitle-bottom-offset) + 40px) !important;
+  bottom: calc(var(--player-subtitle-bottom-offset) + 40px + env(safe-area-inset-bottom, 0px)) !important;
 }
 
 /* ==================== RESPONSIVE ==================== */
@@ -311,13 +316,8 @@ video:fullscreen::-moz-text-track-display,
     font-size: 1.35rem !important;
   }
 
-  .video-element::-webkit-media-text-track-container {
-    bottom: 80px !important;
-  }
-
-  video::-moz-text-track-display,
-  .video-element::-moz-text-track-display {
-    bottom: 80px !important;
+  .video-player {
+    --player-subtitle-bottom-offset: clamp(80px, 14vh, 120px);
   }
 }
 
@@ -331,8 +331,11 @@ video:fullscreen::-moz-text-track-display,
     padding: 0.35em 0.7em !important;
   }
 
+  .video-player {
+    --player-subtitle-bottom-offset: 80px;
+  }
+
   .video-element::-webkit-media-text-track-container {
-    bottom: 80px !important;
     padding: 0 12px !important;
   }
 
@@ -342,7 +345,6 @@ video:fullscreen::-moz-text-track-display,
 
   video::-moz-text-track-display,
   .video-element::-moz-text-track-display {
-    bottom: 80px !important;
     padding: 0 12px !important;
   }
 }
@@ -356,12 +358,7 @@ video:fullscreen::-moz-text-track-display,
     font-size: 1rem !important;
   }
 
-  .video-element::-webkit-media-text-track-container {
-    bottom: 60px !important;
-  }
-
-  video::-moz-text-track-display,
-  .video-element::-moz-text-track-display {
-    bottom: 60px !important;
+  .video-player {
+    --player-subtitle-bottom-offset: 60px;
   }
 }