From 40d13e8bd027161eaef1ef1413ed7a007626b3c7 Mon Sep 17 00:00:00 2001
From: Yiannis Christodoulou <yiannis@web357.com>
Date: Fri, 17 Oct 2025 11:29:45 +0300
Subject: [PATCH] Update Greek subtitles timing in sample VTT file

Adjusted the timing of subtitle cues in sample-subtitles-greek.vtt to better align with the video content.
---
 .../video-js/public/sample-subtitles-greek.vtt        |  8 ++++----
 .../src/components/video-player/VideoJSPlayer.css     | 11 +++++++++++
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/frontend-tools/video-js/public/sample-subtitles-greek.vtt b/frontend-tools/video-js/public/sample-subtitles-greek.vtt
index fd2cbd79..058c627d 100644
--- a/frontend-tools/video-js/public/sample-subtitles-greek.vtt
+++ b/frontend-tools/video-js/public/sample-subtitles-greek.vtt
@@ -3,14 +3,14 @@ WEBVTT
 NOTE
 Αυτό είναι ένα δείγμα υποτίτλων στα ελληνικά για το βίντεο των ωκεανών
 
-00:00:00.000 --> 00:00:01.000
+00:00:00.000 --> 00:00:05.000
 Καλώς ήρθατε στον όμορφο κόσμο των ωκεανών
 
-00:00:01.000 --> 00:00:02.000
+00:00:05.000 --> 00:00:09.000
 Αυτές οι τεράστιες υδάτινες εκτάσεις καλύπτουν το μεγαλύτερο μέρος του πλανήτη μας
 
-00:00:02.000 --> 00:00:04.000
+00:00:09.000 --> 00:00:15.000
 Η θαλάσσια ζωή ανθίζει σε αυτά τα βαθιά γαλάζια νερά
 
-00:00:05.000 --> 00:00:07.000
+00:00:15.000 --> 00:00:20.000
 Από το μικροσκοπικό πλαγκτόν μέχρι τις τεράστιες φάλαινες
diff --git a/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.css b/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.css
index b1a40a0e..7d7a4093 100644
--- a/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.css
+++ b/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.css
@@ -31,6 +31,17 @@ button {
     visibility: hidden !important;
 }
 
+/* Adjust subtitle position when controls are visible */
+/* When controls are VISIBLE (user is active), add extra bottom margin */
+.video-js:not(.vjs-user-inactive) .vjs-text-track-display {
+    margin-bottom: 2em; /* Adjust this value to move subtitles higher when controls are visible */
+}
+
+/* When controls are HIDDEN (user is inactive), use default positioning */
+.video-js.vjs-user-inactive .vjs-text-track-display {
+    margin-bottom: 0.5em; /* Smaller margin when controls are hidden */
+}
+
 /* Center the fullscreen button inside its wrapper */
 /* @media (hover: hover) and (pointer: fine) {
     .vjs-fullscreen-control svg {