senke/veza
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(streaming): elevate PlaybackHeatmap to SaaS Premium

Browse source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
senke 2026-02-07 15:01:00 +01:00
parent ca856d807a
commit 0da580ef6d
4 changed files with 28 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/web/src/features/streaming/components/playback-heatmap/PlaybackHeatmapError.tsx
View file

@ -15,7 +15,7 @@ export function PlaybackHeatmapError({ message, className }: PlaybackHeatmapErro
<Card className={cn('w-full', className)}>
<PlaybackHeatmapHeader />
<CardContent>
<div className="flex items-center justify-center min-h-72 text-kodo-red">
<div className="flex items-center justify-center min-h-72 text-destructive">
{message}
</div>
</CardContent>

14
apps/web/src/features/streaming/components/playback-heatmap/PlaybackHeatmapGrid.tsx
View file

@ -44,7 +44,7 @@ export function PlaybackHeatmapGrid({ heatmap }: PlaybackHeatmapGridProps) {
Skips: ${segment.skip_count}
Intensité: ${(segment.intensity * 100).toFixed(1)}%`}
>
<div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block z-10 bg-kodo-ink text-white text-xs rounded px-2 py-1 whitespace-nowrap">
<div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block z-10 bg-card text-foreground text-xs rounded-lg border border-border px-2 py-1 whitespace-nowrap shadow-lg">
<div>
{formatTime(segment.start_time)} -{' '}
{formatTime(segment.end_time)}
@ -61,28 +61,28 @@ Intensité: ${(segment.intensity * 100).toFixed(1)}%`}
<div className="mt-4 flex items-center justify-between text-xs">
<div className="flex items-center gap-4">
<div className="flex items-center gap-2">
<div className="w-4 h-4 bg-kodo-steel/30 rounded" />
<div className="w-4 h-4 bg-muted rounded" />
<span>Non écouté</span>
</div>
<div className="flex items-center gap-2">
<div className="w-4 h-4 bg-kodo-cyan/40 rounded" />
<div className="w-4 h-4 bg-primary/40 rounded" />
<span>Faible</span>
</div>
<div className="flex items-center gap-2">
<div className="w-4 h-4 bg-kodo-lime/40 rounded" />
<div className="w-4 h-4 bg-success/40 rounded" />
<span>Moyen</span>
</div>
<div className="flex items-center gap-2">
<div className="w-4 h-4 bg-kodo-gold/40 rounded" />
<div className="w-4 h-4 bg-warning/40 rounded" />
<span>Élevé</span>
</div>
<div className="flex items-center gap-2">
<div className="w-4 h-4 bg-kodo-red/40 rounded" />
<div className="w-4 h-4 bg-destructive/40 rounded" />
<span>Très élevé</span>
</div>
</div>
<div className="flex items-center gap-2">
<div className="w-4 h-4 border-2 border-kodo-red rounded" />
<div className="w-4 h-4 border-2 border-destructive rounded" />
<span>Zone skipée</span>
</div>
</div>

24
apps/web/src/features/streaming/components/playback-heatmap/PlaybackHeatmapStats.tsx
View file

@ -11,32 +11,32 @@ interface PlaybackHeatmapStatsProps {
export function PlaybackHeatmapStats({ stats }: PlaybackHeatmapStatsProps) {
return (
<div className="mb-4 grid grid-cols-1 md:grid-cols-4 gap-4 text-sm">
<div className="p-2 bg-kodo-steel/10 rounded">
<div className="font-semibold text-kodo-steel">Écoutes totales</div>
<div className="text-2xl font-bold text-kodo-steel">
<div className="p-2 bg-muted/50 rounded-xl border border-border">
<div className="font-semibold text-muted-foreground">Écoutes totales</div>
<div className="text-2xl font-bold text-foreground">
{stats.totalListens}
</div>
</div>
<div className="p-2 bg-kodo-orange/10 rounded">
<div className="font-semibold text-kodo-orange">Skips totales</div>
<div className="text-2xl font-bold text-kodo-orange">
<div className="p-2 bg-warning/10 rounded-xl border border-border">
<div className="font-semibold text-warning">Skips totales</div>
<div className="text-2xl font-bold text-warning">
{stats.totalSkips}
</div>
</div>
<div className="p-2 bg-kodo-lime/10 rounded">
<div className="font-semibold text-kodo-lime">
<div className="p-2 bg-success/10 rounded-xl border border-border">
<div className="font-semibold text-success">
Zone la plus écoutée
</div>
<div className="text-lg font-bold text-kodo-lime">
<div className="text-lg font-bold text-success">
{formatTime(stats.maxIntensitySegment.start_time)} -{' '}
{formatTime(stats.maxIntensitySegment.end_time)}
</div>
</div>
<div className="p-2 bg-kodo-red/10 rounded">
<div className="font-semibold text-kodo-red">
<div className="p-2 bg-destructive/10 rounded-xl border border-border">
<div className="font-semibold text-destructive">
Zone la plus skipée
</div>
<div className="text-lg font-bold text-kodo-red">
<div className="text-lg font-bold text-destructive">
{stats.maxSkipSegment.skip_count > 0 ? (
<>
{formatTime(stats.maxSkipSegment.start_time)} -{' '}

16
apps/web/src/features/streaming/components/playback-heatmap/usePlaybackHeatmap.ts
View file

@ -19,19 +19,19 @@ export function formatTime(seconds: number): string {
}
export function getIntensityColor(intensity: number): string {
if (intensity === 0) return 'bg-kodo-steel/30';
if (intensity < 0.2) return 'bg-kodo-steel/20';
if (intensity < 0.4) return 'bg-kodo-cyan/40';
if (intensity < 0.6) return 'bg-kodo-lime/40';
if (intensity < 0.8) return 'bg-kodo-gold/40';
return 'bg-kodo-red/40';
if (intensity === 0) return 'bg-muted';
if (intensity < 0.2) return 'bg-muted/80';
if (intensity < 0.4) return 'bg-primary/40';
if (intensity < 0.6) return 'bg-success/40';
if (intensity < 0.8) return 'bg-warning/40';
return 'bg-destructive/40';
}
export function getSkipBorderColor(skipCount: number, listenCount: number): string {
if (skipCount === 0 || listenCount === 0) return '';
const skipRatio = skipCount / listenCount;
if (skipRatio > 0.5) return 'border-2 border-kodo-red';
if (skipRatio > 0.3) return 'border-2 border-kodo-orange';
if (skipRatio > 0.5) return 'border-2 border-destructive';
if (skipRatio > 0.3) return 'border-2 border-warning';
return '';
}