Skip to content

Commit 58d0f56

Browse files
stackiastackia
committed
fix(player): improve constrained mode surfaces
1 parent 81dbed9 commit 58d0f56

6 files changed

Lines changed: 97 additions & 16 deletions

File tree

‎web-ui/src/components/player/channel-list-item.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,8 @@ const ChannelListItemComponent = forwardRef<HTMLButtonElement, ChannelListItemPr
5050
className={clsx(
5151
"relative z-10 flex h-5 min-w-7 shrink-0 items-center justify-center rounded-lg px-1.5 font-semibold text-[10px] transition-[color,background-color,box-shadow] duration-300 ease-out motion-reduce:transition-none md:h-6 md:min-w-8 md:px-2 md:text-xs",
5252
isCurrentChannel
53-
? "bg-blue-400/24 text-blue-700 shadow-[0_6px_16px_-10px_rgba(37,99,235,0.7),inset_0_1px_0_rgba(255,255,255,0.46),0_0_0_1px_rgba(96,165,250,0.28)] dark:text-blue-100"
54-
: "bg-blue-500/13 text-blue-700 shadow-[0_0_0_1px_rgba(59,130,246,0.1)] dark:text-blue-200",
53+
? "player-performance-channel-number-selected bg-blue-400/24 text-blue-700 shadow-[0_6px_16px_-10px_rgba(37,99,235,0.7),inset_0_1px_0_rgba(255,255,255,0.46),0_0_0_1px_rgba(96,165,250,0.28)] dark:text-blue-100"
54+
: "player-performance-channel-number-default bg-blue-500/13 text-blue-700 shadow-[0_0_0_1px_rgba(59,130,246,0.1)] dark:text-blue-200",
5555
)}
5656
>
5757
{channel.id}
@@ -79,7 +79,7 @@ const ChannelListItemComponent = forwardRef<HTMLButtonElement, ChannelListItemPr
7979
</div>
8080
{/* Right: Logo */}
8181
{channel.logo && (
82-
<div className="relative z-10 flex h-8 w-14 shrink-0 items-center justify-center overflow-hidden rounded-xl border border-blue-900/8 bg-[linear-gradient(145deg,rgba(15,42,72,0.88),rgba(49,46,129,0.76))] px-1.5 py-0.5 shadow-[inset_0_1px_0_rgba(255,255,255,0.12)] dark:border-blue-100/10 md:h-10 md:w-20 md:px-2 md:py-1">
82+
<div className="player-performance-logo-background relative z-10 flex h-8 w-14 shrink-0 items-center justify-center overflow-hidden rounded-xl border border-blue-900/8 bg-[linear-gradient(145deg,rgba(15,42,72,0.88),rgba(49,46,129,0.76))] px-1.5 py-0.5 shadow-[inset_0_1px_0_rgba(255,255,255,0.12)] dark:border-blue-100/10 md:h-10 md:w-20 md:px-2 md:py-1">
8383
<img
8484
src={channel.logo}
8585
alt={channel.name}

‎web-ui/src/components/player/channel-list.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -192,7 +192,7 @@ function ChannelListComponent({
192192
value={searchQuery}
193193
onChange={handleSearchInputChange}
194194
onKeyDown={handleSearchKeyDown}
195-
className="h-8 w-full rounded-xl border border-blue-900/10 bg-white/78 px-3 py-0 pl-8 text-slate-800 text-xs shadow-none transition placeholder:text-slate-400 focus:border-ring/60 focus:outline-none focus:ring-2 focus:ring-ring/20 dark:border-blue-100/10 dark:bg-slate-900/85 dark:text-blue-50 dark:placeholder:text-slate-500 md:h-9 md:pl-9 md:text-sm"
195+
className="player-performance-input-background h-8 w-full rounded-xl border border-blue-900/10 bg-white/78 px-3 py-0 pl-8 text-slate-800 text-xs shadow-none transition placeholder:text-slate-400 focus:border-ring/60 focus:outline-none focus:ring-2 focus:ring-ring/20 dark:border-blue-100/10 dark:bg-slate-900/85 dark:text-blue-50 dark:placeholder:text-slate-500 md:h-9 md:pl-9 md:text-sm"
196196
/>
197197
<Search className="absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2 text-blue-600/65 dark:text-blue-300/55 md:h-4 md:w-4" />
198198
</div>
@@ -202,7 +202,7 @@ function ChannelListComponent({
202202

203203
{/* Groups */}
204204
{groups && groups.length > 0 && (
205-
<div className="mt-2 border-blue-950/10 border-y bg-[linear-gradient(90deg,rgba(224,242,254,0.55),rgba(238,242,255,0.68))] px-2 py-2 backdrop-blur-xl dark:border-blue-100/10 dark:bg-[linear-gradient(90deg,rgba(4,19,42,0.6),rgba(20,17,58,0.58))]">
205+
<div className="player-performance-channel-groups mt-2 border-blue-950/10 border-y bg-[linear-gradient(90deg,rgba(224,242,254,0.55),rgba(238,242,255,0.68))] px-2 py-2 backdrop-blur-xl dark:border-blue-100/10 dark:bg-[linear-gradient(90deg,rgba(4,19,42,0.6),rgba(20,17,58,0.58))]">
206206
<div className="flex flex-wrap items-center gap-1.5">
207207
{[null, ...groups].map((group) => (
208208
<button
@@ -212,8 +212,8 @@ function ChannelListComponent({
212212
className={clsx(
213213
"min-h-7 max-w-full overflow-hidden text-ellipsis whitespace-nowrap rounded-full border px-2.5 py-1 font-medium text-xs leading-none transition-[color,background-color,border-color,box-shadow]",
214214
selectedGroup === group
215-
? "border-blue-400/30 bg-blue-500/10 text-blue-700 shadow-[0_4px_12px_rgba(37,99,235,0.1)] dark:border-blue-300/20 dark:bg-blue-400/14 dark:text-blue-200 dark:shadow-[0_4px_12px_rgba(37,99,235,0.08)]"
216-
: "cursor-pointer border border-blue-900/8 bg-white/55 text-slate-500 hover:border-blue-400/30 hover:bg-blue-50/80 hover:text-blue-800 dark:border-blue-100/10 dark:bg-slate-950/35 dark:text-slate-400 dark:hover:bg-blue-300/10 dark:hover:text-blue-100",
215+
? "player-performance-group-selected border-blue-400/30 bg-blue-500/10 text-blue-700 shadow-[0_4px_12px_rgba(37,99,235,0.1)] dark:border-blue-300/20 dark:bg-blue-400/14 dark:text-blue-200 dark:shadow-[0_4px_12px_rgba(37,99,235,0.08)]"
216+
: "player-performance-group-default cursor-pointer border border-blue-900/8 bg-white/55 text-slate-500 hover:border-blue-400/30 hover:bg-blue-50/80 hover:text-blue-800 dark:border-blue-100/10 dark:bg-slate-950/35 dark:text-slate-400 dark:hover:bg-blue-300/10 dark:hover:text-blue-100",
217217
)}
218218
>
219219
{group ?? t("allChannels")}

‎web-ui/src/components/player/classnames.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@ export const PLAYER_EPG_LIST_ITEM_CLASS =
1414
"[content-visibility:auto] [contain-intrinsic-block-size:auto_3rem] md:[contain-intrinsic-block-size:auto_3.75rem]";
1515

1616
export const PLAYER_LIST_SURFACE_SELECTED_CLASS =
17-
"border-blue-300/65 bg-white/38 shadow-[0_16px_32px_-18px_rgba(37,99,235,0.46),0_0_20px_-12px_rgba(59,130,246,0.42),inset_0_1px_0_rgba(255,255,255,0.78),inset_0_-1px_0_rgba(37,99,235,0.12)] backdrop-blur-md backdrop-saturate-150 dark:border-blue-200/55 dark:bg-slate-900/30 dark:shadow-[0_18px_36px_-18px_rgba(0,0,0,0.82),0_0_28px_-12px_rgba(59,130,246,0.62),inset_0_1px_0_rgba(255,255,255,0.17),inset_0_-1px_0_rgba(59,130,246,0.14)]";
17+
"player-performance-list-surface-selected border-blue-300/65 bg-white/38 shadow-[0_16px_32px_-18px_rgba(37,99,235,0.46),0_0_20px_-12px_rgba(59,130,246,0.42),inset_0_1px_0_rgba(255,255,255,0.78),inset_0_-1px_0_rgba(37,99,235,0.12)] backdrop-blur-md backdrop-saturate-150 dark:border-blue-200/55 dark:bg-slate-900/30 dark:shadow-[0_18px_36px_-18px_rgba(0,0,0,0.82),0_0_28px_-12px_rgba(59,130,246,0.62),inset_0_1px_0_rgba(255,255,255,0.17),inset_0_-1px_0_rgba(59,130,246,0.14)]";
1818

1919
export const PLAYER_LIST_SURFACE_DEFAULT_CLASS =
20-
"border-slate-200/70 bg-white/48 shadow-[inset_0_1px_0_rgba(255,255,255,0.44)] backdrop-blur-none backdrop-saturate-100 dark:border-white/8 dark:bg-slate-950/34 dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.045)]";
20+
"player-performance-list-surface-default border-slate-200/70 bg-white/48 shadow-[inset_0_1px_0_rgba(255,255,255,0.44)] backdrop-blur-none backdrop-saturate-100 dark:border-white/8 dark:bg-slate-950/34 dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.045)]";
2121

2222
export const PLAYER_LIST_SURFACE_HOVER_CLASS =
2323
"hover:border-blue-400/35 hover:bg-blue-50/52 dark:hover:border-blue-300/25 dark:hover:bg-blue-300/7";

‎web-ui/src/components/player/epg-view.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,7 @@ function EPGViewComponent({
166166
return (
167167
<div key={dateKey} className="relative">
168168
{/* Date Header */}
169-
<div className="sticky top-0 z-10 border-blue-950/10 border-b bg-white/66 px-3 py-1.5 shadow-[0_8px_20px_rgba(30,64,175,0.06)] backdrop-blur-2xl dark:border-blue-100/10 dark:bg-[linear-gradient(90deg,#151c32,#25223f)] dark:shadow-[0_8px_20px_rgba(0,0,0,0.18)] md:px-4 md:py-2">
169+
<div className="player-performance-epg-header sticky top-0 z-10 border-blue-950/10 border-b bg-white/66 px-3 py-1.5 shadow-[0_8px_20px_rgba(30,64,175,0.06)] backdrop-blur-2xl dark:border-blue-100/10 dark:bg-[linear-gradient(90deg,#151c32,#25223f)] dark:shadow-[0_8px_20px_rgba(0,0,0,0.18)] md:px-4 md:py-2">
170170
<h3 className="font-semibold text-blue-800 text-xs tracking-wide dark:text-blue-100 md:text-sm">
171171
{formatRelativeDate(date)}
172172
</h3>

‎web-ui/src/components/player/player-controls.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -284,7 +284,7 @@ export function PlayerControls({
284284
return (
285285
<div
286286
className={clsx(
287-
"flex w-full flex-col gap-1 bg-[linear-gradient(to_top,rgba(2,8,23,0.98)_0%,rgba(8,22,51,0.9)_46%,rgba(21,27,69,0.48)_72%,transparent_100%)] pt-4 pr-[max(0.375rem,env(safe-area-inset-right))] pb-1 pl-[max(0.375rem,env(safe-area-inset-left))] md:gap-2 md:pt-9 md:pb-3 md:pl-[max(0.75rem,env(safe-area-inset-left))]",
287+
"player-performance-controls-background flex w-full flex-col gap-1 bg-[linear-gradient(to_top,rgba(2,8,23,0.98)_0%,rgba(8,22,51,0.9)_46%,rgba(21,27,69,0.48)_72%,transparent_100%)] pt-4 pr-[max(0.375rem,env(safe-area-inset-right))] pb-1 pl-[max(0.375rem,env(safe-area-inset-left))] md:gap-2 md:pt-9 md:pb-3 md:pl-[max(0.75rem,env(safe-area-inset-left))]",
288288
showSidebar ? "md:pr-3" : "md:pr-[max(0.75rem,env(safe-area-inset-right))]",
289289
"[@container_video_(max-height:_320px)]:gap-0.5 [@container_video_(max-height:_320px)]:pt-2 [@container_video_(max-height:_320px)]:pb-0.5 md:[@container_video_(max-height:_320px)]:gap-0.5 md:[@container_video_(max-height:_320px)]:pt-2 md:[@container_video_(max-height:_320px)]:pb-0.5 [@container_video_(max-height:_220px)]:pt-1 md:[@container_video_(max-height:_220px)]:pt-1",
290290
)}
@@ -320,7 +320,7 @@ export function PlayerControls({
320320
}
321321
aria-label={t("seekTo")}
322322
className={clsx(
323-
"group relative h-1.5 touch-none select-none rounded-full bg-blue-50/15 shadow-[inset_0_1px_3px_rgba(0,0,0,0.45)] ring-1 ring-white/10 transition-[height,box-shadow] duration-150 before:absolute before:-inset-y-3 before:inset-x-0 before:content-[''] md:h-2",
323+
"player-performance-progress-track group relative h-1.5 touch-none select-none rounded-full bg-blue-50/15 shadow-[inset_0_1px_3px_rgba(0,0,0,0.45)] ring-1 ring-white/10 transition-[height,box-shadow] duration-150 before:absolute before:-inset-y-3 before:inset-x-0 before:content-[''] md:h-2",
324324
"[@container_video_(max-height:_320px)]:h-1 md:[@container_video_(max-height:_320px)]:h-1",
325325
isCatchupSupported
326326
? "cursor-pointer hover:h-2 hover:shadow-[0_0_20px_rgba(59,130,246,0.16),inset_0_1px_3px_rgba(0,0,0,0.45)] md:hover:h-3"
@@ -337,7 +337,7 @@ export function PlayerControls({
337337
>
338338
<div
339339
className={clsx(
340-
"absolute top-0 left-0 h-full rounded-full bg-[linear-gradient(90deg,#3b82f6_0%,#38bdf8_52%,#6366f1_100%)] shadow-[0_0_18px_rgba(59,130,246,0.4)]",
340+
"player-performance-progress-fill absolute top-0 left-0 h-full rounded-full bg-[linear-gradient(90deg,#3b82f6_0%,#38bdf8_52%,#6366f1_100%)] shadow-[0_0_18px_rgba(59,130,246,0.4)]",
341341
!isScrubbing && "transition-[width] duration-150",
342342
)}
343343
style={{ width: `${displayPosition}%` }}

‎web-ui/src/index.css‎

Lines changed: 84 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -183,16 +183,16 @@ html[data-performance-tier="constrained"] .player-performance-page-background {
183183
}
184184

185185
html[data-performance-tier="constrained"] .player-performance-panel-background {
186-
background-color: rgb(255 255 255 / 92%);
186+
background-color: #ffffff;
187187
background-image: none;
188188
}
189189

190190
html.dark[data-performance-tier="constrained"] .player-performance-panel-background {
191-
background-color: rgb(15 23 42 / 96%);
191+
background-color: #0f172a;
192192
}
193193

194194
html[data-performance-tier="constrained"] .player-performance-overlay-background {
195-
background-color: rgb(15 23 42 / 94%);
195+
background-color: #0f172a;
196196
background-image: none;
197197
}
198198

@@ -204,3 +204,84 @@ html[data-performance-tier="constrained"] .player-performance-video-background {
204204
background-color: #01030a;
205205
background-image: none;
206206
}
207+
208+
html[data-performance-tier="constrained"] .player-performance-controls-background {
209+
background-color: #020817;
210+
background-image: none;
211+
}
212+
213+
html[data-performance-tier="constrained"] .player-performance-progress-track {
214+
background-color: #334155;
215+
}
216+
217+
html[data-performance-tier="constrained"] .player-performance-progress-fill {
218+
background-color: #3b82f6;
219+
background-image: none;
220+
}
221+
222+
html[data-performance-tier="constrained"] .player-performance-logo-background {
223+
background-color: #0f2a48;
224+
background-image: none;
225+
}
226+
227+
html[data-performance-tier="constrained"] .player-performance-epg-header {
228+
background-color: #ffffff;
229+
background-image: none;
230+
}
231+
232+
html.dark[data-performance-tier="constrained"] .player-performance-epg-header {
233+
background-color: #050b18;
234+
}
235+
236+
html[data-performance-tier="constrained"] .player-performance-list-surface-selected {
237+
background-color: #dbeafe;
238+
}
239+
240+
html.dark[data-performance-tier="constrained"] .player-performance-list-surface-selected {
241+
background-color: #172554;
242+
}
243+
244+
html[data-performance-tier="constrained"] .player-performance-list-surface-default {
245+
background-color: #ffffff;
246+
}
247+
248+
html.dark[data-performance-tier="constrained"] .player-performance-list-surface-default {
249+
background-color: #0f172a;
250+
}
251+
252+
html[data-performance-tier="constrained"] .player-performance-input-background,
253+
html[data-performance-tier="constrained"] .player-performance-group-default {
254+
background-color: #ffffff;
255+
}
256+
257+
html.dark[data-performance-tier="constrained"] .player-performance-input-background,
258+
html.dark[data-performance-tier="constrained"] .player-performance-group-default {
259+
background-color: #0f172a;
260+
}
261+
262+
html[data-performance-tier="constrained"] .player-performance-channel-groups {
263+
background-color: #e0f2fe;
264+
background-image: none;
265+
}
266+
267+
html.dark[data-performance-tier="constrained"] .player-performance-channel-groups {
268+
background-color: #050b18;
269+
}
270+
271+
html[data-performance-tier="constrained"] .player-performance-group-selected,
272+
html[data-performance-tier="constrained"] .player-performance-channel-number-selected {
273+
background-color: #bfdbfe;
274+
}
275+
276+
html.dark[data-performance-tier="constrained"] .player-performance-group-selected,
277+
html.dark[data-performance-tier="constrained"] .player-performance-channel-number-selected {
278+
background-color: #1e3a8a;
279+
}
280+
281+
html[data-performance-tier="constrained"] .player-performance-channel-number-default {
282+
background-color: #dbeafe;
283+
}
284+
285+
html.dark[data-performance-tier="constrained"] .player-performance-channel-number-default {
286+
background-color: #1e293b;
287+
}

0 commit comments

Comments
 (0)