fix(tv): remove remote guide, fix drawer overlap cutting off catalog title, compact TV scaling to 0.0.3
This commit is contained in:
parent
4d1dced62c
commit
a4fc19885f
5 changed files with 75 additions and 92 deletions
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "has",
|
||||
"private": true,
|
||||
"version": "0.0.2",
|
||||
"version": "0.0.3",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
[package]
|
||||
name = "has"
|
||||
version = "0.0.2"
|
||||
version = "0.0.3"
|
||||
description = "has"
|
||||
authors = ["autli"]
|
||||
edition = "2024"
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -2251,6 +2251,14 @@ export default function Cinema({
|
|||
|
||||
return (
|
||||
<div className={`has-cinema-container ${isTvMode ? "has-tv-mode" : ""}`} ref={topRef}>
|
||||
{/* Semi-transparent Backdrop for TV Navigation Drawer */}
|
||||
{isTvMode && isTvNavOpen && (
|
||||
<div
|
||||
className="has-cinema-tv-nav-backdrop"
|
||||
onClick={() => 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({
|
|||
</div>
|
||||
)}
|
||||
|
||||
{/* ========================================================
|
||||
6. ANDROID TV REMOTE CONTROL GUIDE & ON-SCREEN TOAST
|
||||
======================================================== */}
|
||||
{isTvMode && (
|
||||
<div className="has-cinema-tv-remote-guide">
|
||||
<div className="has-cinema-tv-guide-item">
|
||||
<span className="has-cinema-tv-key">▲ ▼ ◀ ▶</span>
|
||||
<span>Навигация</span>
|
||||
</div>
|
||||
<div className="has-cinema-tv-guide-item">
|
||||
<span className="has-cinema-tv-key">OK</span>
|
||||
<span>Выбрать</span>
|
||||
</div>
|
||||
<div className="has-cinema-tv-guide-item">
|
||||
<span className="has-cinema-tv-key">Back</span>
|
||||
<span>Назад</span>
|
||||
</div>
|
||||
<div className="has-cinema-tv-guide-item">
|
||||
<span className="has-cinema-tv-key">◀ Меню</span>
|
||||
<span>Разделы</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* High-visibility TV On-Screen Toast */}
|
||||
{tvToast && (
|
||||
<div className="has-cinema-tv-toast">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue