Which direction fits your commit philosophy better?
This commit is contained in:
MythEclipse
@@ -1,5 +1,6 @@
|
||||
import type { ActiveSpeaker } from "../../../shared/api/client";
|
||||
import { Skeleton } from "../../../shared/ui";
|
||||
import { EmptyStateMascot } from "../../../widgets/mascot/ChibiMascot";
|
||||
|
||||
interface ActiveSpeakersProps {
|
||||
speakers: ActiveSpeaker[];
|
||||
@@ -8,9 +9,7 @@ interface ActiveSpeakersProps {
|
||||
export function ActiveSpeakers({ speakers }: ActiveSpeakersProps) {
|
||||
if (speakers.length === 0) {
|
||||
return (
|
||||
<div className="rounded-xl border border-dashed border-border p-6 text-center text-sm text-muted-foreground">
|
||||
No active speakers.
|
||||
</div>
|
||||
<EmptyStateMascot variant="sleeping" message="No active speakers~" />
|
||||
);
|
||||
}
|
||||
|
||||
@@ -22,16 +21,18 @@ export function ActiveSpeakers({ speakers }: ActiveSpeakersProps) {
|
||||
return (
|
||||
<div
|
||||
key={key}
|
||||
className="flex items-center gap-3 rounded-xl border border-border bg-background/60 p-3"
|
||||
className="flex items-center gap-3 rounded-xl border border-sky-200 bg-white p-3"
|
||||
>
|
||||
<img
|
||||
src={s.avatar}
|
||||
alt=""
|
||||
className="h-8 w-8 rounded-full object-cover"
|
||||
className="h-8 w-8 rounded-full object-cover ring-2 ring-[#7EC8E3]/40"
|
||||
/>
|
||||
<div className="min-w-0">
|
||||
<div className="truncate text-sm font-medium">{s.username}</div>
|
||||
<div className="text-xs text-emerald-300">Speaking</div>
|
||||
<div className="text-xs font-medium text-emerald-700">
|
||||
Speaking
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -21,20 +21,21 @@ export function AudioVisualizer({ levels }: AudioVisualizerProps) {
|
||||
const barWidth = width / levels.length;
|
||||
const maxBarHeight = height * 0.85;
|
||||
|
||||
// Sky-blue to pink gradient
|
||||
const gradient = ctx.createLinearGradient(0, 0, 0, height);
|
||||
gradient.addColorStop(0, "#7EC8E3");
|
||||
gradient.addColorStop(1, "#FFB7C5");
|
||||
|
||||
for (let i = 0; i < levels.length; i++) {
|
||||
const level = levels[i];
|
||||
const barHeight = Math.min(maxBarHeight, level * maxBarHeight);
|
||||
const x = i * barWidth;
|
||||
const y = height - barHeight;
|
||||
|
||||
// Gradient color based on level
|
||||
const hue = 199 - level * 199;
|
||||
const saturation = 89;
|
||||
const lightness = 48 + level * 20;
|
||||
ctx.fillStyle = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
|
||||
ctx.fillStyle = gradient;
|
||||
|
||||
// Rounded bar
|
||||
const radius = barWidth * 0.3;
|
||||
// More rounded bar
|
||||
const radius = barWidth * 0.4;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x + radius, y);
|
||||
ctx.lineTo(x + barWidth - radius, y);
|
||||
@@ -53,7 +54,7 @@ export function AudioVisualizer({ levels }: AudioVisualizerProps) {
|
||||
ref={canvasRef}
|
||||
width={512}
|
||||
height={128}
|
||||
className="w-full rounded-xl bg-muted/30"
|
||||
className="w-full rounded-xl bg-sky-50/30"
|
||||
style={{ height: "128px" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -36,10 +36,10 @@ export function VoiceConnectionCard({
|
||||
onStreamingToggle,
|
||||
}: VoiceConnectionCardProps) {
|
||||
return (
|
||||
<div className="rounded-2xl border border-border bg-card shadow-sm">
|
||||
<div className="rounded-2xl border border-sky-200 bg-white shadow-md">
|
||||
<div className="p-6">
|
||||
<h3 className="flex items-center gap-2 text-lg font-semibold tracking-tight">
|
||||
<Radio className="h-5 w-5" /> Voice Bridge
|
||||
<Radio className="h-5 w-5 text-[#7EC8E3]" /> Voice Bridge
|
||||
</h3>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
Join a Discord voice channel, listen, and transmit audio.
|
||||
@@ -47,7 +47,7 @@ export function VoiceConnectionCard({
|
||||
|
||||
<div className="mt-4 grid gap-4 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">Guild</label>
|
||||
<label className="text-sm font-medium text-foreground">Guild</label>
|
||||
<Select
|
||||
value={selectedGuild}
|
||||
onChange={(e) => onGuildChange(e.target.value)}
|
||||
@@ -56,7 +56,7 @@ export function VoiceConnectionCard({
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">Voice Channel</label>
|
||||
<label className="text-sm font-medium text-foreground">Voice Channel</label>
|
||||
<Select
|
||||
value={selectedChannel}
|
||||
onChange={(e) => onChannelChange(e.target.value)}
|
||||
@@ -73,6 +73,7 @@ export function VoiceConnectionCard({
|
||||
<Button
|
||||
disabled={!selectedGuild || !selectedChannel || voiceLoading}
|
||||
onClick={onJoin}
|
||||
className="bg-[#7EC8E3] text-white hover:bg-[#7EC8E3]/80"
|
||||
>
|
||||
{status.connected ? "Reconnect" : "Join Voice"}
|
||||
</Button>
|
||||
@@ -91,7 +92,7 @@ export function VoiceConnectionCard({
|
||||
{isListening ? "Stop Listening" : "Listen"}
|
||||
</Button>
|
||||
<Button
|
||||
variant={isStreaming ? "destructive" : "default"}
|
||||
variant={isStreaming ? "secondary" : "outline"}
|
||||
onClick={onStreamingToggle}
|
||||
>
|
||||
<Radio className="mr-1.5 h-4 w-4" />{" "}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
// ─── Live Panel — thin composition layer ────────────────────────────────────
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { Mic, MonitorUp, Music2 } from "lucide-react";
|
||||
import type {
|
||||
ActiveSpeaker,
|
||||
@@ -8,6 +9,7 @@ import type {
|
||||
MediaState,
|
||||
VoiceStatus,
|
||||
} from "../../shared/api/client";
|
||||
import { cardItem, cardStagger } from "../../shared/hooks/useFramerStagger";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
@@ -78,25 +80,35 @@ export function LivePanel({
|
||||
onVolumeChange,
|
||||
}: LivePanelProps) {
|
||||
return (
|
||||
<div className="grid gap-6">
|
||||
<VoiceConnectionCard
|
||||
guilds={guilds}
|
||||
voiceChannels={voiceChannels}
|
||||
selectedGuild={selectedGuild}
|
||||
selectedChannel={selectedChannel}
|
||||
status={status}
|
||||
voiceLoading={voiceLoading}
|
||||
isListening={isListening}
|
||||
isStreaming={isStreaming}
|
||||
onGuildChange={onGuildChange}
|
||||
onChannelChange={onChannelChange}
|
||||
onJoin={onJoin}
|
||||
onDisconnect={onDisconnect}
|
||||
onListenToggle={onListenToggle}
|
||||
onStreamingToggle={onStreamingToggle}
|
||||
/>
|
||||
<motion.div
|
||||
variants={cardStagger}
|
||||
initial="initial"
|
||||
animate="animate"
|
||||
className="grid gap-6"
|
||||
>
|
||||
<motion.div variants={cardItem}>
|
||||
<VoiceConnectionCard
|
||||
guilds={guilds}
|
||||
voiceChannels={voiceChannels}
|
||||
selectedGuild={selectedGuild}
|
||||
selectedChannel={selectedChannel}
|
||||
status={status}
|
||||
voiceLoading={voiceLoading}
|
||||
isListening={isListening}
|
||||
isStreaming={isStreaming}
|
||||
onGuildChange={onGuildChange}
|
||||
onChannelChange={onChannelChange}
|
||||
onJoin={onJoin}
|
||||
onDisconnect={onDisconnect}
|
||||
onListenToggle={onListenToggle}
|
||||
onStreamingToggle={onStreamingToggle}
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid gap-6 xl:grid-cols-[1fr_320px]">
|
||||
<motion.div
|
||||
variants={cardItem}
|
||||
className="grid gap-6 xl:grid-cols-[1fr_320px]"
|
||||
>
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-base">Live Audio</CardTitle>
|
||||
@@ -113,44 +125,48 @@ export function LivePanel({
|
||||
<ActiveSpeakers speakers={activeSpeakers} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<NowPlaying current={mediaState.current} queue={mediaState.queue} />
|
||||
<motion.div variants={cardItem}>
|
||||
<NowPlaying current={mediaState.current} queue={mediaState.queue} />
|
||||
</motion.div>
|
||||
|
||||
<Tabs defaultValue="music">
|
||||
<TabsList className="grid w-full grid-cols-3">
|
||||
<TabsTrigger value="music">
|
||||
<Music2 className="mr-1.5 h-4 w-4" /> Music
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="screen">
|
||||
<MonitorUp className="mr-1.5 h-4 w-4" /> Screen Share
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="recordings">
|
||||
<Mic className="mr-1.5 h-4 w-4" /> Recordings
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="music">
|
||||
<MusicSubPanel
|
||||
volume={mediaState.musicVolume}
|
||||
onVolumeChange={onVolumeChange}
|
||||
onQueue={onQueueMusic}
|
||||
onSkip={onSkip}
|
||||
onStop={onStop}
|
||||
loading={mediaLoading}
|
||||
/>
|
||||
</TabsContent>
|
||||
<TabsContent value="screen">
|
||||
<ScreenSubPanel
|
||||
onStart={onStartScreen}
|
||||
onSkip={onSkip}
|
||||
onStop={onStop}
|
||||
loading={mediaLoading}
|
||||
/>
|
||||
</TabsContent>
|
||||
<TabsContent value="recordings">
|
||||
<RecordingsSubPanel />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
<motion.div variants={cardItem}>
|
||||
<Tabs defaultValue="music">
|
||||
<TabsList className="grid w-full grid-cols-3">
|
||||
<TabsTrigger value="music">
|
||||
<Music2 className="mr-1.5 h-4 w-4" /> Music
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="screen">
|
||||
<MonitorUp className="mr-1.5 h-4 w-4" /> Screen Share
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="recordings">
|
||||
<Mic className="mr-1.5 h-4 w-4" /> Recordings
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="music">
|
||||
<MusicSubPanel
|
||||
volume={mediaState.musicVolume}
|
||||
onVolumeChange={onVolumeChange}
|
||||
onQueue={onQueueMusic}
|
||||
onSkip={onSkip}
|
||||
onStop={onStop}
|
||||
loading={mediaLoading}
|
||||
/>
|
||||
</TabsContent>
|
||||
<TabsContent value="screen">
|
||||
<ScreenSubPanel
|
||||
onStart={onStartScreen}
|
||||
onSkip={onSkip}
|
||||
onStop={onStop}
|
||||
loading={mediaLoading}
|
||||
/>
|
||||
</TabsContent>
|
||||
<TabsContent value="recordings">
|
||||
<RecordingsSubPanel />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user