Mirror/lidify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial release v1.0.0

Browse Source
This commit is contained in:
Kevin O'Neill
2025-12-25 18:58:06 -06:00
commit 021aec7a63
439 changed files with 116588 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
frontend/features/discover/components/DiscoverActionBar.tsx Normal file
View File

@@ -0,0 +1,123 @@
"use client";
import { Play, Pause, RefreshCw, Settings } from "lucide-react";
import { cn } from "@/utils/cn";
import { GradientSpinner } from "@/components/ui/GradientSpinner";
import type { DiscoverPlaylist, DiscoverConfig } from "../types";
interface BatchStatus {
active: boolean;
status: "downloading" | "scanning" | null;
progress?: number;
completed?: number;
failed?: number;
total?: number;
}
interface DiscoverActionBarProps {
playlist: DiscoverPlaylist | null;
config: DiscoverConfig | null;
isPlaylistPlaying: boolean;
isPlaying: boolean;
onPlayToggle: () => void;
onGenerate: () => void;
onToggleSettings: () => void;
isGenerating: boolean;
batchStatus?: BatchStatus | null;
}
export function DiscoverActionBar({
playlist,
config,
isPlaylistPlaying,
isPlaying,
onPlayToggle,
onGenerate,
onToggleSettings,
isGenerating,
batchStatus,
}: DiscoverActionBarProps) {
const getStatusText = () => {
if (!isGenerating) return null;
if (batchStatus?.status === "scanning") {
return "Importing tracks...";
}
if (batchStatus?.total) {
return `Downloading ${batchStatus.completed || 0}/${batchStatus.total}`;
}
return "Starting...";
};
return (
<div className="bg-gradient-to-b from-[#1a1a1a]/60 to-transparent px-4 md:px-8 py-4">
<div className="flex items-center gap-4">
{/* Play Button */}
{playlist && playlist.tracks.length > 0 && (
<button
onClick={onPlayToggle}
disabled={isGenerating}
className={cn(
"h-12 w-12 rounded-full flex items-center justify-center shadow-lg transition-all",
isGenerating
? "bg-[#ecb200]/50 cursor-not-allowed"
: "bg-[#ecb200] hover:bg-[#d4a000] hover:scale-105"
)}
>
{isPlaylistPlaying && isPlaying ? (
<Pause className="w-5 h-5 fill-current text-black" />
) : (
<Play className="w-5 h-5 fill-current text-black ml-0.5" />
)}
</button>
)}
{/* Generate Button */}
<button
onClick={onGenerate}
disabled={isGenerating || !config?.enabled}
className={cn(
"flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all",
isGenerating || !config?.enabled
? "bg-white/5 text-white/50 cursor-not-allowed"
: "bg-purple-600/20 hover:bg-purple-600/30 text-white border border-purple-500/30"
)}
>
{isGenerating ? (
<>
<GradientSpinner size="sm" />
<span className="hidden sm:inline">{getStatusText()}</span>
<span className="sm:hidden">
{batchStatus?.completed || 0}/{batchStatus?.total || "?"}
</span>
</>
) : (
<>
<RefreshCw className="w-4 h-4" />
<span className="hidden sm:inline">
{playlist ? "Regenerate" : "Generate"}
</span>
</>
)}
</button>
{/* Settings Button */}
<button
onClick={onToggleSettings}
disabled={isGenerating}
className={cn(
"h-8 w-8 rounded-full flex items-center justify-center transition-all",
isGenerating
? "text-white/30 cursor-not-allowed"
: "text-white/60 hover:text-white hover:bg-white/10"
)}
title="Settings"
>
<Settings className="w-5 h-5" />
</button>
</div>
</div>
);
}

76
frontend/features/discover/components/DiscoverHero.tsx Normal file
View File

@@ -0,0 +1,76 @@
import { Music2 } from "lucide-react";
import { format } from "date-fns";
import { DiscoverPlaylist, DiscoverConfig } from "../types";
interface DiscoverHeroProps {
playlist: DiscoverPlaylist | null;
config: DiscoverConfig | null;
}
export function DiscoverHero({ playlist, config }: DiscoverHeroProps) {
// Calculate total duration
const totalDuration = playlist?.tracks?.reduce((sum, t) => sum + (t.duration || 0), 0) || 0;
const formatTotalDuration = (seconds: number) => {
const hours = Math.floor(seconds / 3600);
const mins = Math.floor((seconds % 3600) / 60);
if (hours > 0) {
return `about ${hours} hr ${mins} min`;
}
return `${mins} min`;
};
return (
<div className="relative bg-gradient-to-b from-purple-900/40 via-[#1a1a1a] to-transparent pt-16 pb-10 px-4 md:px-8">
<div className="flex items-end gap-6">
{/* Icon */}
<div className="w-[140px] h-[140px] md:w-[192px] md:h-[192px] bg-gradient-to-br from-purple-600/30 to-yellow-600/20 rounded shadow-2xl shrink-0 flex items-center justify-center border border-white/10">
<Music2 className="w-16 h-16 md:w-20 md:h-20 text-purple-400" />
</div>
{/* Info - Bottom Aligned */}
<div className="flex-1 min-w-0 pb-1">
<p className="text-xs font-medium text-white/90 mb-1">
Playlist
</p>
<h1 className="text-2xl md:text-4xl lg:text-5xl font-bold text-white leading-tight line-clamp-2 mb-2">
Discover Weekly
</h1>
<p className="text-sm text-white/60 mb-2 line-clamp-2">
Your personalized playlist of new music, curated based on your listening history.
</p>
<div className="flex flex-wrap items-center gap-1 text-sm text-white/70">
{playlist && (
<>
<span>
Week of {format(new Date(playlist.weekStart), "MMM d, yyyy")}
</span>
<span className="mx-1">•</span>
<span>{playlist.totalCount} songs</span>
{totalDuration > 0 && (
<span>, {formatTotalDuration(totalDuration)}</span>
)}
{playlist.unavailableCount > 0 && (
<>
<span className="mx-1">•</span>
<span className="text-orange-400">
{playlist.unavailableCount} unavailable
</span>
</>
)}
</>
)}
{config?.lastGeneratedAt && (
<>
<span className="mx-1">•</span>
<span>
Updated {format(new Date(config.lastGeneratedAt), "MMM d")}
</span>
</>
)}
</div>
</div>
</div>
</div>
);
}

179
frontend/features/discover/components/DiscoverSettings.tsx Normal file
View File

@@ -0,0 +1,179 @@
"use client";
import { useState, useRef } from "react";
import { Card } from "@/components/ui/Card";
import { api } from "@/lib/api";
import { toast } from "sonner";
import { Trash2, Loader2 } from "lucide-react";
import type { DiscoverConfig } from "../types";
interface DiscoverSettingsProps {
config: DiscoverConfig | null;
onUpdateConfig: (updatedConfig: DiscoverConfig | null) => void;
onPlaylistCleared?: () => void;
}
export function DiscoverSettings({
config,
onUpdateConfig,
onPlaylistCleared,
}: DiscoverSettingsProps) {
const [isClearing, setIsClearing] = useState(false);
const debounceRef = useRef<NodeJS.Timeout | null>(null);
// Generic handler for config changes with debounce
function handleConfigChange<K extends keyof DiscoverConfig>(key: K, value: DiscoverConfig[K]) {
// Update local state immediately for responsive UI
if (config) {
onUpdateConfig({ ...config, [key]: value });
}
// Debounce the API call
if (debounceRef.current) {
clearTimeout(debounceRef.current);
}
debounceRef.current = setTimeout(async () => {
try {
await api.updateDiscoverConfig({ [key]: value });
} catch (error) {
toast.error("Failed to save setting");
}
}, 500);
}
async function handleClearPlaylist() {
if (isClearing) return;
const confirmed = window.confirm(
"Clear Discovery Playlist?\n\n" +
"• Liked albums will be moved to your library\n" +
"• Non-liked albums will be deleted\n\n" +
"This action cannot be undone."
);
if (!confirmed) return;
setIsClearing(true);
try {
const result = await api.clearDiscoverPlaylist();
if (result.likedMoved > 0 && result.activeDeleted > 0) {
toast.success(
`Moved ${result.likedMoved} liked album${result.likedMoved !== 1 ? "s" : ""} to library, deleted ${result.activeDeleted} album${result.activeDeleted !== 1 ? "s" : ""}`
);
} else if (result.likedMoved > 0) {
toast.success(
`Moved ${result.likedMoved} liked album${result.likedMoved !== 1 ? "s" : ""} to library`
);
} else if (result.activeDeleted > 0) {
toast.success(
`Deleted ${result.activeDeleted} album${result.activeDeleted !== 1 ? "s" : ""}`
);
} else {
toast.info("No albums to clear");
}
onPlaylistCleared?.();
} catch (error) {
toast.error("Failed to clear playlist");
} finally {
setIsClearing(false);
}
}
return (
<div className="max-w-7xl mx-auto px-4 md:px-8 py-6">
<Card className="p-6">
<h2 className="text-xl font-bold mb-4">Settings</h2>
<div className="space-y-6">
<div>
<label className="block text-sm font-medium mb-2">
Playlist Size: {config?.playlistSize || 10} songs
</label>
<input
type="range"
min="5"
max="50"
step="5"
value={config?.playlistSize || 10}
onChange={(e) =>
handleConfigChange("playlistSize", parseInt(e.target.value))
}
className="w-full h-2 bg-white/10 rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-purple-500"
/>
<p className="text-xs text-gray-400 mt-2">
One song per album. Larger = more discovery.
</p>
</div>
<div>
<label className="block text-sm font-medium mb-2">
Download Buffer: {((config?.downloadRatio ?? 1.3) * 100 - 100).toFixed(0)}% extra
</label>
<input
type="range"
min="1.0"
max="2.0"
step="0.1"
value={config?.downloadRatio ?? 1.3}
onChange={(e) =>
handleConfigChange("downloadRatio", parseFloat(e.target.value))
}
className="w-full h-2 bg-white/10 rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-purple-500"
/>
<p className="text-xs text-gray-400 mt-2">
Extra albums to download in case some fail. Higher = more reliable, but uses more bandwidth.
</p>
</div>
<div>
<label className="block text-sm font-medium mb-2">
Album Exclusion: {
(config?.exclusionMonths ?? 6) === 0
? "Disabled"
: `${config?.exclusionMonths ?? 6} months`
}
</label>
<input
type="range"
min="0"
max="12"
step="1"
value={config?.exclusionMonths ?? 6}
onChange={(e) =>
handleConfigChange("exclusionMonths", parseInt(e.target.value))
}
className="w-full h-2 bg-white/10 rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-purple-500"
/>
<p className="text-xs text-gray-400 mt-2">
How long to wait before recommending the same album again. Set to 0 to disable.
</p>
</div>
{/* Clear Playlist */}
<div className="pt-4 border-t border-white/10">
<label className="block text-sm font-medium mb-2">
Clear Playlist
</label>
<p className="text-xs text-gray-400 mb-3">
Remove the current playlist. Liked albums will be moved
to your library, non-liked albums will be deleted.
</p>
<button
onClick={handleClearPlaylist}
disabled={isClearing}
className="flex items-center gap-2 px-4 py-2 bg-red-500/20 hover:bg-red-500/30 text-red-400 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
{isClearing ? (
<Loader2 className="w-4 h-4 animate-spin" />
) : (
<Trash2 className="w-4 h-4" />
)}
{isClearing ? "Clearing..." : "Remove Playlist"}
</button>
</div>
</div>
</Card>
</div>
);
}

56
frontend/features/discover/components/HowItWorks.tsx Normal file
View File

@@ -0,0 +1,56 @@
"use client";
import { Sparkles, ChevronRight } from "lucide-react";
import { Card } from "@/components/ui/Card";
export function HowItWorks() {
return (
<Card className="p-6 bg-[#111]/50 border-white/5">
<h3 className="text-lg font-bold mb-4 flex items-center gap-2 text-white">
<Sparkles className="w-5 h-5 text-purple-400" />
How It Works
</h3>
<div className="space-y-3 text-sm text-gray-400">
<div className="flex items-start gap-3">
<ChevronRight className="w-4 h-4 mt-0.5 text-purple-400/60 shrink-0" />
<p>
Analyzes your listening history and library using
Last.fm similarity data
</p>
</div>
<div className="flex items-start gap-3">
<ChevronRight className="w-4 h-4 mt-0.5 text-purple-400/60 shrink-0" />
<p>
Discovers similar artists across tiers: High (80-100%),
Medium (50-79%), Explore (30-49%), Wild Cards (0-29%)
</p>
</div>
<div className="flex items-start gap-3">
<ChevronRight className="w-4 h-4 mt-0.5 text-purple-400/60 shrink-0" />
<p>
One song per album downloads the full album to
/music/discovery
</p>
</div>
<div className="flex items-start gap-3">
<ChevronRight className="w-4 h-4 mt-0.5 text-purple-400/60 shrink-0" />
<p>
Liked albums move to your library. Others removed at
week end.
</p>
</div>
<div className="flex items-start gap-3">
<ChevronRight className="w-4 h-4 mt-0.5 text-purple-400/60 shrink-0" />
<p>Albums won't repeat for 6 months</p>
</div>
<div className="flex items-start gap-3">
<ChevronRight className="w-4 h-4 mt-0.5 text-purple-400/60 shrink-0" />
<p>
If albums aren't available, they're automatically
replaced and you can still preview them via Deezer
</p>
</div>
</div>
</Card>
);
}

175
frontend/features/discover/components/TrackList.tsx Normal file
View File

@@ -0,0 +1,175 @@
import { Play, Pause, Heart, Music } from "lucide-react";
import Image from "next/image";
import { cn } from "@/utils/cn";
import { DiscoverTrack } from "../types";
import { api } from "@/lib/api";
const tierColors: Record<string, string> = {
high: "text-green-400",
medium: "text-yellow-400",
explore: "text-orange-400",
wildcard: "text-purple-400",
low: "text-orange-400",
wild: "text-purple-400",
};
const tierLabels: Record<string, string> = {
high: "High Match",
medium: "Medium Match",
explore: "Explore",
wildcard: "Wild Card",
low: "Explore",
wild: "Wild Card",
};
interface TrackListProps {
tracks: DiscoverTrack[];
currentTrack?: { id: string } | null;
isPlaying: boolean;
onPlayTrack: (index: number) => void;
onTogglePlay: () => void;
onLike: (track: DiscoverTrack) => void;
}
export function TrackList({
tracks,
currentTrack,
isPlaying,
onPlayTrack,
onTogglePlay,
onLike,
}: TrackListProps) {
const formatDuration = (seconds: number) => {
const mins = Math.floor(seconds / 60);
const secs = seconds % 60;
return `${mins}:${secs.toString().padStart(2, "0")}`;
};
return (
<div className="w-full">
{/* Table Header */}
<div className="hidden md:grid grid-cols-[40px_minmax(200px,4fr)_minmax(100px,2fr)_80px_80px] gap-4 px-4 py-2 text-xs text-gray-400 uppercase tracking-wider border-b border-white/10 mb-2">
<span className="text-center">#</span>
<span>Title</span>
<span>Album</span>
<span className="text-center">Match</span>
<span className="text-right">Duration</span>
</div>
{/* Track Rows */}
<div>
{tracks.map((track, index) => {
const isTrackPlaying = currentTrack?.id === track.id;
return (
<div
key={track.id}
onClick={() =>
isTrackPlaying && isPlaying
? onTogglePlay()
: onPlayTrack(index)
}
className={cn(
"grid grid-cols-[40px_1fr_auto] md:grid-cols-[40px_minmax(200px,4fr)_minmax(100px,2fr)_80px_80px] gap-4 px-4 py-2 rounded-md hover:bg-white/5 transition-colors group cursor-pointer",
isTrackPlaying && "bg-white/10"
)}
>
{/* Track Number / Play Icon */}
<div className="flex items-center justify-center">
<span
className={cn(
"text-sm group-hover:hidden",
isTrackPlaying ? "text-[#ecb200]" : "text-gray-400"
)}
>
{isTrackPlaying && isPlaying ? (
<Music className="w-4 h-4 text-[#ecb200] animate-pulse" />
) : (
index + 1
)}
</span>
<Play className="w-4 h-4 text-white hidden group-hover:block" />
</div>
{/* Title + Artist */}
<div className="flex items-center gap-3 min-w-0">
<div className="w-10 h-10 bg-[#282828] rounded shrink-0 overflow-hidden">
{track.coverUrl ? (
<Image
src={api.getCoverArtUrl(track.coverUrl, 80)}
alt={track.album}
width={40}
height={40}
className="object-cover"
unoptimized
/>
) : (
<div className="w-full h-full flex items-center justify-center">
<Music className="w-5 h-5 text-gray-600" />
</div>
)}
</div>
<div className="min-w-0">
<p
className={cn(
"text-sm font-medium truncate",
isTrackPlaying ? "text-[#ecb200]" : "text-white"
)}
>
{track.title}
</p>
<p className="text-xs text-gray-400 truncate">
{track.artist}
</p>
</div>
</div>
{/* Album (hidden on mobile) */}
<p className="hidden md:flex items-center text-sm text-gray-400 truncate">
{track.album}
</p>
{/* Tier Badge (hidden on mobile) */}
<div className="hidden md:flex items-center justify-center">
<span
className={cn(
"px-2 py-0.5 rounded-full text-xs font-medium bg-white/5",
tierColors[track.tier]
)}
>
{tierLabels[track.tier]?.split(" ")[0]}
</span>
</div>
{/* Duration + Like */}
<div className="flex items-center justify-end gap-2">
<button
onClick={(e) => {
e.stopPropagation();
onLike(track);
}}
className={cn(
"p-1.5 rounded-full opacity-0 group-hover:opacity-100 transition-all",
track.isLiked
? "text-purple-400 hover:text-purple-300"
: "text-gray-400 hover:text-white"
)}
title={track.isLiked ? "Unlike" : "Keep in library"}
>
<Heart
className={cn(
"w-4 h-4",
track.isLiked && "fill-current"
)}
/>
</button>
<span className="text-sm text-gray-400 w-10 text-right">
{formatDuration(track.duration)}
</span>
</div>
</div>
);
})}
</div>
</div>
);
}

161
frontend/features/discover/components/UnavailableAlbums.tsx Normal file
View File

@@ -0,0 +1,161 @@
import { useState } from "react";
import { Play, Pause, Music, ChevronDown, ChevronUp } from "lucide-react";
import { Card } from "@/components/ui/Card";
import { cn } from "@/utils/cn";
import { UnavailableAlbum } from "../types";
const tierColors: Record<string, string> = {
high: "text-green-400",
medium: "text-yellow-400",
explore: "text-orange-400",
wildcard: "text-purple-400",
// Legacy mappings
low: "text-orange-400",
wild: "text-purple-400",
};
const tierLabels: Record<string, string> = {
high: "High Match",
medium: "Medium Match",
explore: "Explore",
wildcard: "Wild Card",
// Legacy mappings
low: "Explore",
wild: "Wild Card",
};
interface UnavailableAlbumsProps {
unavailable: UnavailableAlbum[];
currentPreview: string | null;
onTogglePreview: (albumId: string, previewUrl: string) => void;
}
export function UnavailableAlbums({
unavailable,
currentPreview,
onTogglePreview,
}: UnavailableAlbumsProps) {
const [isExpanded, setIsExpanded] = useState(false);
if (!unavailable || unavailable.length === 0) {
return null;
}
return (
<Card>
<button
onClick={() => setIsExpanded(!isExpanded)}
className="w-full p-4 flex items-center justify-between hover:bg-[#1a1a1a] transition-colors rounded-lg"
>
<div className="flex items-center gap-2">
<Music className="w-5 h-5 text-orange-400" />
<span className="text-sm font-medium text-gray-400">
{unavailable.length} album{unavailable.length !== 1 ? "s" : ""} unavailable
</span>
</div>
{isExpanded ? (
<ChevronUp className="w-4 h-4 text-gray-500" />
) : (
<ChevronDown className="w-4 h-4 text-gray-500" />
)}
</button>
{isExpanded && (
<>
<div className="px-6 pb-4">
<p className="text-sm text-gray-400">
These albums were recommended but couldn't be found by your indexers.
Listen to 30-second previews below!
</p>
</div>
<div className="divide-y divide-[#1c1c1c]">
{unavailable.map((album) => {
const isPreviewPlaying = currentPreview === album.id;
const attemptLabel =
album.attemptNumber === 0
? "Original Recommendation"
: `Replacement #${album.attemptNumber}`;
return (
<div
key={album.id}
className={cn(
"flex items-center gap-4 px-4 py-3 hover:bg-[#1a1a1a] transition-colors group",
album.attemptNumber > 0 &&
"pl-12 bg-[#1a1a1a]/30"
)}
>
<div className="w-8 flex items-center justify-center">
{album.previewUrl ? (
<button
onClick={() =>
onTogglePreview(
album.id,
album.previewUrl!
)
}
className="w-8 h-8 flex items-center justify-center"
>
{isPreviewPlaying ? (
<Pause className="w-4 h-4 text-orange-400 fill-current" />
) : (
<Play className="w-4 h-4 text-orange-400 fill-current ml-0.5" />
)}
</button>
) : (
<Music className="w-4 h-4 text-gray-600" />
)}
</div>
<div className="w-12 h-12 bg-[#181818] rounded flex items-center justify-center shrink-0">
<Music className="w-6 h-6 text-gray-600" />
</div>
<div className="flex-1 min-w-0">
<h3 className="text-sm font-medium text-white truncate">
{album.album}
</h3>
<div className="flex items-center gap-2 text-xs text-gray-400 truncate">
<span>{album.artist}</span>
{album.previewUrl && (
<>
<span>•</span>
<span className="text-orange-400">
30s Preview
</span>
</>
)}
</div>
</div>
<div className="hidden md:flex items-center gap-2">
<span
className={cn(
"px-2 py-1 rounded-full text-xs font-medium bg-white/5",
tierColors[album.tier]
)}
>
{tierLabels[album.tier]}
</span>
</div>
<div className="flex items-center gap-2">
<span
className={cn(
"px-2 py-1 rounded-full text-xs font-medium whitespace-nowrap",
album.attemptNumber === 0
? "bg-orange-500/20 border border-orange-500/30 text-orange-400"
: "bg-blue-500/20 border border-blue-500/30 text-blue-400"
)}
>
{attemptLabel}
</span>
</div>
</div>
);
})}
</div>
</>
)}
</Card>
);
}