mirror of
https://github.com/4gray/iptvnator.git
synced 2026-10-10 10:06:15 -08:00
4grayandClaude Opus 5.5
f12dfabcce
The same progressPercent was drawn red (#e50914) in the Up Next rail, the fullscreen episode panel and the catalog capsule, blue (#4f8eff) in the dock's timeline and Up next card, and the selection colour on the dashboard, so one episode changed colour inside a single player overlay. - App chrome reads a new --app-progress-color, declared per theme in m3-theme.scss as the theme's --app-selection-color: progress capsule, dashboard rail card and hero resume bar. - Over video, watch progress reads --pc-progress from a shared _player-palette.scss partial. The controls host, the Up Next rail and the fullscreen episode panel (both outside the host's --pc-* scope) include its progress-token mixin. - ArtPlayer's legacy skin gets PLAYER_PROGRESS_COLOR instead of #ff0000; a spec pins it to the Sass value. - The rule is written into the UI guidelines' Progress Bars section, with specs in ui-playback, components and workspace-dashboard-feature. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
import {
|
|
Component,
|
|
computed,
|
|
input,
|
|
ChangeDetectionStrategy,
|
|
} from '@angular/core';
|
|
|
|
@Component({
|
|
selector: 'app-progress-capsule',
|
|
standalone: true,
|
|
template: `
|
|
<div
|
|
class="progress-capsule"
|
|
[class.progress-capsule--watched]="isWatched()"
|
|
>
|
|
<div
|
|
class="progress-capsule__fill"
|
|
[style.width.%]="progress()"
|
|
></div>
|
|
</div>
|
|
`,
|
|
// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection -- Preserve pre-Angular 22 eager checking during the framework upgrade.
|
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
styles: [
|
|
`
|
|
.progress-capsule {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 5px;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
overflow: hidden;
|
|
|
|
&__fill {
|
|
height: 100%;
|
|
background: var(--app-progress-color);
|
|
transition: width 0.3s ease-out;
|
|
border-radius: 0 2px 2px 0;
|
|
}
|
|
|
|
&--watched {
|
|
.progress-capsule__fill {
|
|
background: linear-gradient(
|
|
90deg,
|
|
#46d369 0%,
|
|
#2ecc71 100%
|
|
);
|
|
}
|
|
}
|
|
}
|
|
`,
|
|
],
|
|
})
|
|
export class ProgressCapsuleComponent {
|
|
readonly progress = input.required<number>();
|
|
readonly isWatched = computed(() => this.progress() >= 90);
|
|
}
|