Skip to content

🎨 Palette: Add 'B' keyboard shortcut for Watch Later and UI hints #203

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ruhdevops wants to merge 1 commit into
base: main
Choose a base branch
from
Open

🎨 Palette: Add 'B' keyboard shortcut for Watch Later and UI hints #203

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ <h1 class="brand-title">Ruh Al Tarikh</h1>
</nav>

<div class="navbar-actions">
<button id="watchLaterBtn" class="action-btn badge-btn" aria-label="View Saved Episodes" title="View Saved Episodes" aria-controls="watchLaterPage" aria-expanded="false">
<button id="watchLaterBtn" class="action-btn badge-btn" aria-label="View Saved Episodes (B)" title="View Saved Episodes (B)" aria-controls="watchLaterPage" aria-expanded="false">
<i class="fas fa-bookmark" aria-hidden="true"></i>
<span class="badge" id="watchLaterBadge">0</span>
</button>
Expand Down Expand Up @@ -434,7 +434,7 @@ <h2 id="video-title" class="modal-title">Episode Title</h2>
<i class="fas fa-share-alt"></i>
<span>Share</span>
</button>
<button id="modalSaveBtn" class="modal-action-btn" title="Save">
<button id="modalSaveBtn" class="modal-action-btn" aria-label="Save (B)" title="Save (B)">
<i class="fas fa-bookmark"></i>
<span>Save</span>
</button>
Expand Down
15 changes: 13 additions & 2 deletions js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -525,7 +525,7 @@ function openVideo(video) {
if (icon) {
icon.className = isSaved ? 'fas fa-bookmark' : 'far fa-bookmark';
}
DOM.modalSaveBtn.setAttribute('aria-label', isSaved ? 'Remove from Watch Later' : 'Save for later');
DOM.modalSaveBtn.setAttribute('aria-label', isSaved ? 'Remove from Watch Later (B)' : 'Save for later (B)');
}
}

Expand Down Expand Up @@ -585,7 +585,7 @@ function toggleWatchLater(video) {
if (icon) {
icon.className = isSaved ? 'fas fa-bookmark' : 'far fa-bookmark';
}
DOM.modalSaveBtn.setAttribute('aria-label', isSaved ? 'Remove from Watch Later' : 'Save for later');
DOM.modalSaveBtn.setAttribute('aria-label', isSaved ? 'Remove from Watch Later (B)' : 'Save for later (B)');
}
}

Expand Down Expand Up @@ -1237,6 +1237,17 @@ function bindEvents() {
if (key === 't') {
toggleTheme();
}

// Watch Later toggle
if (key === 'b') {
if (AppState.current) {
toggleWatchLater(AppState.current);
} else if (DOM.watchLaterPage) {
const isVisible = window.getComputedStyle(DOM.watchLaterPage).display !== 'none';

@chatgpt-codex-connector chatgpt-codex-connector Bot Jun 10, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Use aria-hidden to detect Watch Later visibility

On a fresh page load, the Watch Later panel is hidden off-canvas by .side-panel[aria-hidden]/right, but its computed display is still block, so the first press of B outside a video takes this branch as “visible” and calls closeWatchLater() instead of opening the panel. This makes the advertised shortcut require two presses until the panel has been closed once via inline display: none; checking aria-hidden (or the right/open state) would match how the panel is initially hidden.

Useful? React with 👍 / 👎.

if (isVisible) closeWatchLater();
else openWatchLater();
}
}
});

// Mouse move effect for cards
Expand Down
Loading