From 27dbaf2b2d5895a091d04aa1c852abb91a619e2d Mon Sep 17 00:00:00 2001 From: Paul Buetow Date: Fri, 1 May 2026 12:40:30 +0300 Subject: Minimalist UI: hide all elements until activated; add help modal and keyboard shortcuts - Redesign UI to be invisible by default: only header + '?' button shown - Press m to show sidebar, t for toolbar, / for search, ? for help - Add help modal with all keyboard shortcuts - Fix scanner to skip corrupt/unprobeable files instead of aborting - Fix scanner to skip thumbnail errors instead of aborting - Fix rescan to use background context so it completes after HTTP response - Rename project from KISS Media Player to Player --- web/bootstrap.html | 2 +- web/css/layout.css | 71 ++++++++++++++++++++++++++++++++++++++++++++++-- web/css/player.css | 9 +++++- web/index.html | 80 ++++++++++++++++++++++++++++++++++++++++++------------ web/js/app.js | 70 +++++++++++++++++++++++++++++++++++++++++------ web/js/keyboard.js | 5 +++- web/login.html | 4 +-- web/manifest.json | 4 +-- 8 files changed, 209 insertions(+), 36 deletions(-) (limited to 'web') diff --git a/web/bootstrap.html b/web/bootstrap.html index 440a55f..3f028d2 100644 --- a/web/bootstrap.html +++ b/web/bootstrap.html @@ -3,7 +3,7 @@ -Bootstrap — KISS Media Player +Bootstrap — Player diff --git a/web/css/layout.css b/web/css/layout.css index 7dd70a4..ca5acd8 100644 --- a/web/css/layout.css +++ b/web/css/layout.css @@ -41,11 +41,14 @@ body { border-right: 1px solid var(--border); overflow: auto; padding: 0.75rem 0.5rem; - display: flex; + display: none; /* hidden by default */ flex-direction: column; gap: 0.25rem; z-index: 40; } +.sidebar.open { + display: flex; +} .sidebar h2 { font-size: 0.75rem; text-transform: uppercase; @@ -75,13 +78,20 @@ body { color: var(--accent); font-weight: 600; } +.sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; +} /* Main layout */ .page { padding-top: var(--header-height); - padding-left: var(--sidebar-width); min-height: 100vh; } +.page.has-sidebar { + padding-left: var(--sidebar-width); +} .main-content { padding: var(--gap); max-width: 100%; @@ -255,6 +265,35 @@ body { .modal-header h3 { margin: 0; font-size: 1.1rem; } .modal-header .spacer { flex: 1 1 auto; } +/* Help modal */ +.help-content { + overflow: auto; +} +.help-table { + width: 100%; + border-collapse: collapse; + font-size: 0.9rem; +} +.help-table td { + padding: 0.4rem 0.5rem; + border-bottom: 1px solid var(--border); +} +.help-table td:first-child { + white-space: nowrap; + width: 1%; + font-family: var(--font-mono); +} +.help-table kbd { + display: inline-block; + padding: 0.15rem 0.4rem; + border-radius: var(--radius-sm); + background: var(--bg-elevated); + border: 1px solid var(--border-strong); + font-size: 0.8rem; + min-width: 1.6rem; + text-align: center; +} + /* Responsive */ @media (max-width: 860px) { :root { @@ -282,6 +321,7 @@ body { } .sidebar.open { display: flex; } .page { padding-left: 0; } + .page.has-sidebar { padding-left: 0; } .player { inset: auto 0 0 0 !important; } .toolbar { flex-wrap: wrap; @@ -361,6 +401,32 @@ body { margin-bottom: 0.75rem; } +/* Empty state hint */ +.empty-hint { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 50vh; + gap: 0.5rem; + text-align: center; +} +.empty-hint p { + margin: 0; + font-size: 1.1rem; + color: var(--text-secondary); +} +.empty-hint kbd { + display: inline-block; + padding: 0.15rem 0.4rem; + border-radius: var(--radius-sm); + background: var(--bg-elevated); + border: 1px solid var(--border-strong); + font-family: var(--font-mono); + font-size: 0.85rem; +} +.empty-hint.hidden { display: none !important; } + /* Modal sizes */ .modal-wide { width: min(56rem, 96vw); } @@ -383,4 +449,3 @@ body { .admin-list li.is-admin { background: var(--accent-soft); } - diff --git a/web/css/player.css b/web/css/player.css index 706667d..29baf30 100644 --- a/web/css/player.css +++ b/web/css/player.css @@ -1,13 +1,20 @@ /* Player */ .player { position: fixed; - inset: auto 0 0 var(--sidebar-width); + inset: auto 0 0 0; background: var(--player-bg); color: var(--text-primary); border-top: 1px solid var(--border); z-index: 60; + display: none; /* hidden by default until something plays */ transition: inset var(--transition-base); } +.player.open { + display: block; +} +.page.has-sidebar .player { + inset: auto 0 0 var(--sidebar-width); +} .player.is-fullscreen { inset: 0; background: var(--player-stage-bg); diff --git a/web/index.html b/web/index.html index 1fc583e..33478ad 100644 --- a/web/index.html +++ b/web/index.html @@ -3,7 +3,7 @@ -KISS Media Player +Player @@ -13,36 +13,33 @@ + +
-
+ + -
+ + + + + +
+

Welcome to Player

+

Press m to browse sets, / to search, or ? for help.

+
+ + +
-