diff --git a/package.json b/package.json index e874679..f2cf7b2 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "has", "private": true, - "version": "0.0.2", + "version": "0.0.3", "type": "module", "scripts": { "dev": "vite", diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml index 18ff2c6..b78e28d 100644 --- a/src-tauri/Cargo.toml +++ b/src-tauri/Cargo.toml @@ -1,6 +1,6 @@ [package] name = "has" -version = "0.0.2" +version = "0.0.3" description = "has" authors = ["autli"] edition = "2024" diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json index 264aa8c..d182384 100644 --- a/src-tauri/tauri.conf.json +++ b/src-tauri/tauri.conf.json @@ -1,7 +1,7 @@ { "$schema": "https://schema.tauri.app/config/2", "productName": "has", - "version": "0.0.2", + "version": "0.0.3", "identifier": "com.has.tauri-app", "build": { "beforeDevCommand": "npm run dev", diff --git a/src/pages/cinema/Cinema.css b/src/pages/cinema/Cinema.css index ebe7c83..6d8a8a7 100644 --- a/src/pages/cinema/Cinema.css +++ b/src/pages/cinema/Cinema.css @@ -1840,38 +1840,47 @@ transform: scale(1.05); } -/* Android TV Leanback Navigation Rail & Drawer */ +/* Semi-transparent Backdrop for TV Navigation Drawer */ +.has-cinema-tv-nav-backdrop { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.65); + backdrop-filter: blur(5px); + z-index: 1999; + animation: fadeIn 0.2s ease; +} + +/* Android TV Leanback Navigation Drawer (Slide-in Overlay) */ .has-cinema-tv-nav-drawer { position: fixed; top: 0; left: 0; bottom: 0; + width: 270px; + background: rgba(8, 12, 24, 0.97); + backdrop-filter: blur(28px); + border-right: 1px solid rgba(129, 140, 248, 0.35); + box-shadow: 15px 0 50px rgba(0, 0, 0, 0.9); display: flex; flex-direction: column; - z-index: 1000; - transition: width 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, background 0.28s ease; -} - -.has-cinema-tv-nav-drawer.collapsed { - width: 66px; - background: rgba(10, 15, 28, 0.9); - backdrop-filter: blur(20px); - border-right: 1px solid rgba(255, 255, 255, 0.08); + z-index: 2000; + transform: translateX(-100%); + transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1); + pointer-events: none; + visibility: hidden; } .has-cinema-tv-nav-drawer.open { - width: 270px; - background: rgba(8, 12, 24, 0.97); - backdrop-filter: blur(24px); - border-right: 1px solid rgba(129, 140, 248, 0.4); - box-shadow: 15px 0 50px rgba(0, 0, 0, 0.9); + transform: translateX(0); + pointer-events: auto; + visibility: visible; } .has-cinema-tv-nav-header { display: flex; align-items: center; justify-content: space-between; - padding: 18px 12px 14px; + padding: 18px 16px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } @@ -1926,7 +1935,7 @@ display: flex; flex-direction: column; gap: 8px; - padding: 12px 8px; + padding: 12px 10px; flex: 1; overflow-y: auto; } @@ -2000,89 +2009,79 @@ border-top: 1px solid rgba(255, 255, 255, 0.08); } +/* TV Mode Root Overrides (Safe Overscan Area & Compact Proportions) */ .has-tv-mode { - padding-left: 74px !important; + font-size: 14.5px; } -/* Universal Glowing Focus Indicators for D-Pad / Keyboard Navigation */ -[data-tv-focusable="true"]:focus-visible, -.has-cinema-media-card:focus-visible, -.has-cinema-grid-card:focus-visible, -.has-cinema-episode-card:focus-visible, -.has-cinema-nav-item:focus-visible, -.has-cinema-btn-play:focus-visible, -.has-cinema-btn-circle:focus-visible, -.has-cinema-season-tab:focus-visible, -.has-cinema-mirror-btn:focus-visible, -.has-cinema-trans-btn:focus-visible, -.has-cinema-player-nav-btn:focus-visible, -.has-cinema-mode-btn:focus-visible, -.has-cinema-russian-dub-btn:focus-visible, -.has-cinema-player-fs-btn:focus-visible, -.has-cinema-player-close-btn:focus-visible, -.has-cinema-player-ep-chip:focus-visible, -.has-cinema-tv-mode-btn:focus-visible, -.has-cinema-search-input:focus-visible, -.has-cinema-search-clear-btn:focus-visible { - outline: 3.5px solid #6366f1 !important; - outline-offset: 3px !important; - box-shadow: 0 0 25px rgba(99, 102, 241, 0.9), inset 0 0 8px rgba(99, 102, 241, 0.4) !important; - transform: scale(1.05) !important; - z-index: 35 !important; - transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, outline-color 0.2s ease !important; +.has-tv-mode .has-cinema-header { + padding: 16px 54px !important; } -/* TV Mode Root Overrides (10-Foot UI for 3m Couch Distance) */ -.has-tv-mode { - font-size: 16px; +.has-tv-mode .has-cinema-nav-links { + gap: 20px; } .has-tv-mode .has-cinema-nav-item { - font-size: 16.5px; - padding: 8px 12px; + font-size: 15px; + padding: 6px 10px; +} + +.has-tv-mode .has-cinema-hero { + padding: 85px 54px 30px !important; + min-height: 360px; } .has-tv-mode .has-cinema-hero-title { - font-size: 42px; + font-size: 30px; + margin-bottom: 8px; } .has-tv-mode .has-cinema-hero-synopsis { - font-size: 16px; - max-width: 720px; - line-height: 1.6; + font-size: 13.5px; + max-width: 580px; + line-height: 1.5; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; } .has-tv-mode .has-cinema-btn-play { - padding: 12px 28px; - font-size: 16px; + padding: 10px 22px; + font-size: 14px; +} + +.has-tv-mode .has-cinema-rows-container { + padding: 12px 54px 40px !important; } .has-tv-mode .has-cinema-row-title { - font-size: 22px; - margin-bottom: 16px; + font-size: 18px; + margin-bottom: 12px; } .has-tv-mode .has-cinema-media-card { - width: 195px; - transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease; + width: 154px; + transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease; } .has-tv-mode .has-cinema-media-card:focus, .has-tv-mode .has-cinema-grid-card:focus, .has-tv-mode .has-cinema-episode-card:focus { - outline: 4px solid #818cf8 !important; - outline-offset: 4px !important; - box-shadow: 0 0 35px rgba(129, 140, 248, 0.95), 0 12px 28px rgba(0, 0, 0, 0.8) !important; - transform: scale(1.09) translateY(-6px) !important; + outline: 3px solid #818cf8 !important; + outline-offset: 3px !important; + box-shadow: 0 0 25px rgba(129, 140, 248, 0.85), 0 8px 20px rgba(0, 0, 0, 0.8) !important; + transform: scale(1.05) translateY(-3px) !important; z-index: 40 !important; } .has-tv-mode .has-cinema-media-title { - font-size: 15px; + font-size: 13.5px; } .has-tv-mode .has-cinema-media-sub { - font-size: 13px; + font-size: 12px; } /* In-Player TV Remote Guide */ diff --git a/src/pages/cinema/Cinema.tsx b/src/pages/cinema/Cinema.tsx index d9b0d1c..e16ee86 100644 --- a/src/pages/cinema/Cinema.tsx +++ b/src/pages/cinema/Cinema.tsx @@ -2251,6 +2251,14 @@ export default function Cinema({ return (
+ {/* Semi-transparent Backdrop for TV Navigation Drawer */} + {isTvMode && isTvNavOpen && ( +
setIsTvNavOpen(false)} + /> + )} + {/* ======================================================== ANDROID TV LEANBACK NAVIGATION DRAWER (Opens when pressing Left from cards, remote Menu, or Menu pill) @@ -3949,30 +3957,6 @@ export default function Cinema({
)} - {/* ======================================================== - 6. ANDROID TV REMOTE CONTROL GUIDE & ON-SCREEN TOAST - ======================================================== */} - {isTvMode && ( -
-
- ▲ ▼ ◀ ▶ - Навигация -
-
- OK - Выбрать -
-
- Back - Назад -
-
- ◀ Меню - Разделы -
-
- )} - {/* High-visibility TV On-Screen Toast */} {tvToast && (