From 5aba7235c1ad9081960e3cd9f06ee01058774953 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 15 Jul 2026 03:49:51 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Dynamic=20video=20tit?=
 =?UTF-8?q?les=20and=20modal=20keyboard=20shortcuts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What:
- Implemented dynamic document title updates when a video is opened (e.g., "Video Title | Ruh Al Tarikh") and restored the original title when closed.
- Added keyboard shortcuts 's' for Share and 'n' for Notes/Transcript within the video modal.
- Updated button `title` attributes in `index.html` to provide visual hints for these shortcuts (e.g., "Share (S)", "Notes (N)").

🎯 Why:
- Dynamic titles improve tab discoverability and orientation for users with multiple tabs open.
- Keyboard shortcuts enhance accessibility and efficiency for power users and those relying on keyboard navigation.
- Consistent visual hints (tooltips) improve feature discoverability.

♿ Accessibility:
- Keyboard users can now quickly access Share and Notes panels without tabbing through the modal.
- Screen reader users benefit from the updated page titles that announce the current video context.
- Native tooltips via `title` attributes provide accessible shortcut hints.

Co-authored-by: ruhdevops <203426218+ruhdevops@users.noreply.github.com>
---
 index.html |  4 ++--
 js/app.js  | 12 +++++++++++-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 0b438d6..7a3467f 100644
--- a/index.html
+++ b/index.html
@@ -430,7 +430,7 @@ <h2 id="video-title" class="modal-title">Episode Title</h2>
         </div>
 
         <div class="modal-actions">
-          <button id="shareEpisode" class="modal-action-btn" title="Share">
+          <button id="shareEpisode" class="modal-action-btn" title="Share (S)">
             <i class="fas fa-share-alt"></i>
             <span>Share</span>
           </button>
@@ -438,7 +438,7 @@ <h2 id="video-title" class="modal-title">Episode Title</h2>
             <i class="fas fa-bookmark"></i>
             <span>Save</span>
           </button>
-          <button id="toggleTranscript" class="modal-action-btn" title="Transcript">
+          <button id="toggleTranscript" class="modal-action-btn" title="Notes (N)">
             <i class="fas fa-closed-captioning"></i>
             <span>Notes</span>
           </button>
diff --git a/js/app.js b/js/app.js
index 5abcb24..0cb1d9f 100644
--- a/js/app.js
+++ b/js/app.js
@@ -526,7 +526,10 @@ function openVideo(video) {
     DOM.body.classList.add('modal-open');
 
     const titleEl = document.getElementById('video-title');
-    if (titleEl) titleEl.textContent = video.title;
+    if (titleEl) {
+        titleEl.textContent = video.title;
+        document.title = `${video.title} | Ruh Al Tarikh`;
+    }
 
     if (DOM.transcriptPanel) DOM.transcriptPanel.setAttribute('aria-hidden', 'true');
     if (DOM.sharePanel) DOM.sharePanel.setAttribute('aria-hidden', 'true');
@@ -551,6 +554,7 @@ function closeVideo() {
     DOM.body.style.overflow = "";
     DOM.body.classList.remove("modal-open");
     AppState.current = null;
+    document.title = 'Ruh Al Tarikh | Cinematic Islamic Archive';
     clearInterval(AppState.progressTimer);
     renderContinueWatching();
     if (AppState.lastFocused) { AppState.lastFocused.focus(); AppState.lastFocused = null; }
@@ -1326,6 +1330,12 @@ function bindEvents() {
             } else if (key === 'b') {
                 e.preventDefault();
                 toggleWatchLater(AppState.current);
+            } else if (key === 's') {
+                e.preventDefault();
+                openShare();
+            } else if (key === 'n') {
+                e.preventDefault();
+                openTranscript();
             }
         }