mirror of
https://github.com/jamiepine/voicebox.git
synced 2026-09-18 06:10:43 -07:00
Implement audio channel management features
- Added new components for managing audio channels, including creation, updating, and deletion of channels. - Introduced a new AudioTab for channel management and integrated it into the main application layout. - Updated the API client to support audio channel operations and added corresponding backend endpoints. - Enhanced the player store to handle audio playback routing through assigned channels. - Refactored existing components to accommodate the new audio channel functionality, including updates to the HistoryTable and GenerationForm for profile-channel associations. - Improved sidebar navigation to include new tabs for Voices and Audio management.
This commit is contained in:
Jamie Pine
@@ -1,15 +1,20 @@
|
||||
import { Pause, Play, Repeat, Volume2, VolumeX } from 'lucide-react';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { useEffect, useRef, useState, useMemo } from 'react';
|
||||
import WaveSurfer from 'wavesurfer.js';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Slider } from '@/components/ui/slider';
|
||||
import { formatAudioDuration } from '@/lib/utils/audio';
|
||||
import { usePlayerStore } from '@/stores/playerStore';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { apiClient } from '@/lib/api/client';
|
||||
import { isTauri } from '@/lib/tauri';
|
||||
import { invoke } from '@tauri-apps/api/core';
|
||||
|
||||
export function AudioPlayer() {
|
||||
const {
|
||||
audioUrl,
|
||||
audioId,
|
||||
profileId,
|
||||
title,
|
||||
isPlaying,
|
||||
currentTime,
|
||||
@@ -25,6 +30,36 @@ export function AudioPlayer() {
|
||||
clearRestartFlag,
|
||||
} = usePlayerStore();
|
||||
|
||||
// Check if profile has assigned channels (for native audio routing)
|
||||
const { data: profileChannels } = useQuery({
|
||||
queryKey: ['profile-channels', profileId],
|
||||
queryFn: () => {
|
||||
if (!profileId) return { channel_ids: [] };
|
||||
return apiClient.getProfileChannels(profileId);
|
||||
},
|
||||
enabled: !!profileId && isTauri(),
|
||||
});
|
||||
|
||||
const { data: channels } = useQuery({
|
||||
queryKey: ['channels'],
|
||||
queryFn: () => apiClient.listChannels(),
|
||||
enabled: !!profileChannels && profileChannels.channel_ids.length > 0,
|
||||
});
|
||||
|
||||
// Determine if we should use native playback
|
||||
const useNativePlayback = useMemo(() => {
|
||||
if (!isTauri() || !profileChannels || !channels) return false;
|
||||
|
||||
const assignedChannels = channels.filter((ch) =>
|
||||
profileChannels.channel_ids.includes(ch.id),
|
||||
);
|
||||
|
||||
// Use native playback if any assigned channel has non-default devices
|
||||
return assignedChannels.some(
|
||||
(ch) => ch.device_ids.length > 0 && !ch.is_default,
|
||||
);
|
||||
}, [profileChannels, channels, isTauri()]);
|
||||
|
||||
const waveformRef = useRef<HTMLDivElement>(null);
|
||||
const wavesurferRef = useRef<WaveSurfer | null>(null);
|
||||
const loadingRef = useRef(false);
|
||||
@@ -395,7 +430,44 @@ export function AudioPlayer() {
|
||||
|
||||
// Handle loop - WaveSurfer handles this via the 'finish' event
|
||||
|
||||
const handlePlayPause = () => {
|
||||
const handlePlayPause = async () => {
|
||||
// If using native playback, handle differently
|
||||
if (useNativePlayback && audioUrl && profileChannels && channels) {
|
||||
if (isPlaying) {
|
||||
// For native playback, we'd need to track and stop streams
|
||||
// For now, just toggle the state
|
||||
setIsPlaying(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Collect all device IDs from assigned channels
|
||||
const assignedChannels = channels.filter((ch) =>
|
||||
profileChannels.channel_ids.includes(ch.id),
|
||||
);
|
||||
const deviceIds = assignedChannels.flatMap((ch) => ch.device_ids);
|
||||
|
||||
if (deviceIds.length > 0) {
|
||||
// Fetch audio data
|
||||
const response = await fetch(audioUrl);
|
||||
const audioData = new Uint8Array(await response.arrayBuffer());
|
||||
|
||||
// Play via native audio
|
||||
await invoke('play_audio_to_devices', {
|
||||
audio_data: Array.from(audioData),
|
||||
device_ids: deviceIds,
|
||||
});
|
||||
|
||||
setIsPlaying(true);
|
||||
return;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Native playback failed, falling back to WaveSurfer:', error);
|
||||
// Fall through to WaveSurfer playback
|
||||
}
|
||||
}
|
||||
|
||||
// Standard WaveSurfer playback
|
||||
if (!wavesurferRef.current) {
|
||||
console.error('WaveSurfer not initialized');
|
||||
return;
|
||||
|
||||
@@ -0,0 +1,537 @@
|
||||
import { Edit, Plus, Trash2, Speaker } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { apiClient } from '@/lib/api/client';
|
||||
import { isTauri } from '@/lib/tauri';
|
||||
import { invoke } from '@tauri-apps/api/core';
|
||||
|
||||
interface AudioDevice {
|
||||
id: string;
|
||||
name: string;
|
||||
is_default: boolean;
|
||||
}
|
||||
|
||||
export function AudioTab() {
|
||||
const [createDialogOpen, setCreateDialogOpen] = useState(false);
|
||||
const [editingChannel, setEditingChannel] = useState<string | null>(null);
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const { data: channels, isLoading: channelsLoading } = useQuery({
|
||||
queryKey: ['channels'],
|
||||
queryFn: () => apiClient.listChannels(),
|
||||
});
|
||||
|
||||
const { data: devices, isLoading: devicesLoading } = useQuery({
|
||||
queryKey: ['audio-devices'],
|
||||
queryFn: async () => {
|
||||
if (!isTauri()) {
|
||||
return [];
|
||||
}
|
||||
try {
|
||||
const result = await invoke<AudioDevice[]>('list_audio_output_devices');
|
||||
return result;
|
||||
} catch (error) {
|
||||
console.error('Failed to list audio devices:', error);
|
||||
return [];
|
||||
}
|
||||
},
|
||||
enabled: isTauri(),
|
||||
});
|
||||
|
||||
const { data: profiles } = useQuery({
|
||||
queryKey: ['profiles'],
|
||||
queryFn: () => apiClient.listProfiles(),
|
||||
});
|
||||
|
||||
const createChannel = useMutation({
|
||||
mutationFn: (data: { name: string; device_ids: string[] }) =>
|
||||
apiClient.createChannel(data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['channels'] });
|
||||
setCreateDialogOpen(false);
|
||||
},
|
||||
});
|
||||
|
||||
const updateChannel = useMutation({
|
||||
mutationFn: ({
|
||||
channelId,
|
||||
data,
|
||||
}: {
|
||||
channelId: string;
|
||||
data: { name?: string; device_ids?: string[] };
|
||||
}) => apiClient.updateChannel(channelId, data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['channels'] });
|
||||
queryClient.invalidateQueries({ queryKey: ['profile-channels'] });
|
||||
setEditingChannel(null);
|
||||
},
|
||||
});
|
||||
|
||||
const deleteChannel = useMutation({
|
||||
mutationFn: (channelId: string) => apiClient.deleteChannel(channelId),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['channels'] });
|
||||
queryClient.invalidateQueries({ queryKey: ['profile-channels'] });
|
||||
},
|
||||
});
|
||||
|
||||
const { data: channelVoices } = useQuery({
|
||||
queryKey: ['channel-voices', editingChannel],
|
||||
queryFn: async () => {
|
||||
if (!editingChannel) return { profile_ids: [] };
|
||||
return apiClient.getChannelVoices(editingChannel);
|
||||
},
|
||||
enabled: !!editingChannel,
|
||||
});
|
||||
|
||||
const setChannelVoices = useMutation({
|
||||
mutationFn: ({ channelId, profileIds }: { channelId: string; profileIds: string[] }) =>
|
||||
apiClient.setChannelVoices(channelId, profileIds),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['channel-voices'] });
|
||||
queryClient.invalidateQueries({ queryKey: ['profile-channels'] });
|
||||
},
|
||||
});
|
||||
|
||||
if (channelsLoading || devicesLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<div className="text-muted-foreground">Loading...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h1 className="text-2xl font-bold">Audio Channels</h1>
|
||||
<Button onClick={() => setCreateDialogOpen(true)}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
New Channel
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-auto space-y-4">
|
||||
{channels?.map((channel) => (
|
||||
<Card key={channel.id}>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Speaker className="h-5 w-5" />
|
||||
{channel.name}
|
||||
{channel.is_default && (
|
||||
<span className="text-xs text-muted-foreground">(Default)</span>
|
||||
)}
|
||||
</CardTitle>
|
||||
{!channel.is_default && (
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setEditingChannel(channel.id)}
|
||||
>
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
if (confirm('Delete this channel?')) {
|
||||
deleteChannel.mutate(channel.id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<Label className="text-sm font-medium">Output Devices:</Label>
|
||||
<div className="mt-1 text-sm text-muted-foreground">
|
||||
{channel.device_ids.length > 0 ? (
|
||||
<ul className="list-disc list-inside">
|
||||
{channel.device_ids.map((deviceId) => {
|
||||
const device = devices?.find((d) => d.id === deviceId);
|
||||
return (
|
||||
<li key={deviceId}>{device?.name || deviceId || 'Default Speakers'}</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
) : (
|
||||
<span>Default Speakers</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-sm font-medium">Assigned Voices:</Label>
|
||||
<ChannelVoicesList channelId={channel.id} />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-8 pt-6 border-t">
|
||||
<h2 className="text-lg font-semibold mb-4">Available Devices</h2>
|
||||
<div className="space-y-2">
|
||||
{devices && devices.length > 0 ? (
|
||||
devices.map((device) => (
|
||||
<div key={device.id} className="text-sm">
|
||||
<span className="font-medium">{device.name}</span>
|
||||
{device.is_default && (
|
||||
<span className="text-muted-foreground ml-2">(default)</span>
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{isTauri()
|
||||
? 'No audio devices found'
|
||||
: 'Audio device selection requires Tauri'}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Create Channel Dialog */}
|
||||
<CreateChannelDialog
|
||||
open={createDialogOpen}
|
||||
onOpenChange={setCreateDialogOpen}
|
||||
devices={devices || []}
|
||||
onCreate={(name, deviceIds) => {
|
||||
createChannel.mutate({ name, device_ids: deviceIds });
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Edit Channel Dialog */}
|
||||
{editingChannel && (
|
||||
<EditChannelDialog
|
||||
open={!!editingChannel}
|
||||
onOpenChange={(open) => !open && setEditingChannel(null)}
|
||||
channel={channels?.find((c) => c.id === editingChannel)!}
|
||||
devices={devices || []}
|
||||
profiles={profiles || []}
|
||||
channelVoices={channelVoices?.profile_ids || []}
|
||||
onUpdate={(name, deviceIds) => {
|
||||
updateChannel.mutate({
|
||||
channelId: editingChannel,
|
||||
data: { name, device_ids: deviceIds },
|
||||
});
|
||||
}}
|
||||
onSetVoices={(profileIds) => {
|
||||
setChannelVoices.mutate({
|
||||
channelId: editingChannel,
|
||||
profileIds,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ChannelVoicesList({ channelId }: { channelId: string }) {
|
||||
const { data: voices } = useQuery({
|
||||
queryKey: ['channel-voices', channelId],
|
||||
queryFn: () => apiClient.getChannelVoices(channelId),
|
||||
});
|
||||
|
||||
const { data: profiles } = useQuery({
|
||||
queryKey: ['profiles'],
|
||||
queryFn: () => apiClient.listProfiles(),
|
||||
});
|
||||
|
||||
const voiceNames =
|
||||
voices?.profile_ids
|
||||
.map((id) => profiles?.find((p) => p.id === id)?.name)
|
||||
.filter(Boolean) || [];
|
||||
|
||||
return (
|
||||
<div className="mt-1 text-sm text-muted-foreground">
|
||||
{voiceNames.length > 0 ? (
|
||||
<span>{voiceNames.join(', ')}</span>
|
||||
) : (
|
||||
<span>No voices assigned</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface CreateChannelDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
devices: AudioDevice[];
|
||||
onCreate: (name: string, deviceIds: string[]) => void;
|
||||
}
|
||||
|
||||
function CreateChannelDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
devices,
|
||||
onCreate,
|
||||
}: CreateChannelDialogProps) {
|
||||
const [name, setName] = useState('');
|
||||
const [selectedDevices, setSelectedDevices] = useState<string[]>([]);
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (name.trim()) {
|
||||
onCreate(name.trim(), selectedDevices);
|
||||
setName('');
|
||||
setSelectedDevices([]);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Create Audio Channel</DialogTitle>
|
||||
<DialogDescription>
|
||||
Create a new audio channel (bus) to route voices to specific output devices.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="channel-name">Channel Name</Label>
|
||||
<Input
|
||||
id="channel-name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="e.g., Virtual Cable, Broadcast"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label>Output Devices</Label>
|
||||
<Select
|
||||
value={selectedDevices[0] || ''}
|
||||
onValueChange={(value) => {
|
||||
if (value && !selectedDevices.includes(value)) {
|
||||
setSelectedDevices([...selectedDevices, value]);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select device" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{devices.map((device) => (
|
||||
<SelectItem key={device.id} value={device.id}>
|
||||
{device.name} {device.is_default && '(default)'}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{selectedDevices.length > 0 && (
|
||||
<div className="mt-2 space-y-1">
|
||||
{selectedDevices.map((deviceId) => {
|
||||
const device = devices.find((d) => d.id === deviceId);
|
||||
return (
|
||||
<div
|
||||
key={deviceId}
|
||||
className="flex items-center justify-between text-sm bg-muted p-2 rounded"
|
||||
>
|
||||
<span>{device?.name || deviceId}</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setSelectedDevices(selectedDevices.filter((id) => id !== deviceId))}
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleSubmit} disabled={!name.trim()}>
|
||||
Create
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
interface EditChannelDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
channel: {
|
||||
id: string;
|
||||
name: string;
|
||||
device_ids: string[];
|
||||
};
|
||||
devices: AudioDevice[];
|
||||
profiles: Array<{ id: string; name: string }>;
|
||||
channelVoices: string[];
|
||||
onUpdate: (name: string, deviceIds: string[]) => void;
|
||||
onSetVoices: (profileIds: string[]) => void;
|
||||
}
|
||||
|
||||
function EditChannelDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
channel,
|
||||
devices,
|
||||
profiles,
|
||||
channelVoices,
|
||||
onUpdate,
|
||||
onSetVoices,
|
||||
}: EditChannelDialogProps) {
|
||||
const [name, setName] = useState(channel.name);
|
||||
const [selectedDevices, setSelectedDevices] = useState<string[]>(channel.device_ids);
|
||||
const [selectedVoices, setSelectedVoices] = useState<string[]>(channelVoices);
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (name.trim()) {
|
||||
onUpdate(name.trim(), selectedDevices);
|
||||
onSetVoices(selectedVoices);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edit Channel</DialogTitle>
|
||||
<DialogDescription>Update channel settings and voice assignments.</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="edit-channel-name">Channel Name</Label>
|
||||
<Input
|
||||
id="edit-channel-name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label>Output Devices</Label>
|
||||
<Select
|
||||
value=""
|
||||
onValueChange={(value) => {
|
||||
if (value && !selectedDevices.includes(value)) {
|
||||
setSelectedDevices([...selectedDevices, value]);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Add device" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{devices.map((device) => (
|
||||
<SelectItem key={device.id} value={device.id}>
|
||||
{device.name} {device.is_default && '(default)'}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{selectedDevices.length > 0 && (
|
||||
<div className="mt-2 space-y-1">
|
||||
{selectedDevices.map((deviceId) => {
|
||||
const device = devices.find((d) => d.id === deviceId);
|
||||
return (
|
||||
<div
|
||||
key={deviceId}
|
||||
className="flex items-center justify-between text-sm bg-muted p-2 rounded"
|
||||
>
|
||||
<span>{device?.name || deviceId}</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setSelectedDevices(selectedDevices.filter((id) => id !== deviceId))}
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<Label>Assigned Voices</Label>
|
||||
<Select
|
||||
value=""
|
||||
onValueChange={(value) => {
|
||||
if (value && !selectedVoices.includes(value)) {
|
||||
setSelectedVoices([...selectedVoices, value]);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Add voice" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{profiles.map((profile) => (
|
||||
<SelectItem key={profile.id} value={profile.id}>
|
||||
{profile.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{selectedVoices.length > 0 && (
|
||||
<div className="mt-2 space-y-1">
|
||||
{selectedVoices.map((profileId) => {
|
||||
const profile = profiles.find((p) => p.id === profileId);
|
||||
return (
|
||||
<div
|
||||
key={profileId}
|
||||
className="flex items-center justify-between text-sm bg-muted p-2 rounded"
|
||||
>
|
||||
<span>{profile?.name || profileId}</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setSelectedVoices(selectedVoices.filter((id) => id !== profileId))}
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleSubmit} disabled={!name.trim()}>
|
||||
Save
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -120,7 +120,7 @@ export function GenerationForm() {
|
||||
|
||||
// Autoplay the generated audio
|
||||
const audioUrl = apiClient.getAudioUrl(result.id);
|
||||
setAudio(audioUrl, result.id, data.text.substring(0, 50));
|
||||
setAudio(audioUrl, result.id, selectedProfileId, data.text.substring(0, 50));
|
||||
|
||||
form.reset();
|
||||
} catch (error) {
|
||||
|
||||
@@ -69,14 +69,14 @@ export function HistoryTable() {
|
||||
return () => scrollEl.removeEventListener('scroll', handleScroll);
|
||||
}, []);
|
||||
|
||||
const handlePlay = (audioId: string, text: string) => {
|
||||
const handlePlay = (audioId: string, text: string, profileId: string) => {
|
||||
// If clicking the same audio, restart it from the beginning
|
||||
if (currentAudioId === audioId) {
|
||||
restartCurrentAudio();
|
||||
} else {
|
||||
// Otherwise, load the new audio
|
||||
const audioUrl = apiClient.getAudioUrl(audioId);
|
||||
setAudio(audioUrl, audioId, text.substring(0, 50));
|
||||
setAudio(audioUrl, audioId, profileId, text.substring(0, 50));
|
||||
}
|
||||
};
|
||||
|
||||
@@ -195,7 +195,7 @@ export function HistoryTable() {
|
||||
if (target.closest('textarea') || window.getSelection()?.toString()) {
|
||||
return;
|
||||
}
|
||||
handlePlay(gen.id, gen.text);
|
||||
handlePlay(gen.id, gen.text, gen.profile_id);
|
||||
}}
|
||||
>
|
||||
{/* Waveform icon */}
|
||||
@@ -242,7 +242,7 @@ export function HistoryTable() {
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => handlePlay(gen.id, gen.text)}>
|
||||
<DropdownMenuItem onClick={() => handlePlay(gen.id, gen.text, gen.profile_id)}>
|
||||
<Play className="mr-2 h-4 w-4" />
|
||||
Play
|
||||
</DropdownMenuItem>
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
import { ConnectionForm } from '@/components/ServerSettings/ConnectionForm';
|
||||
import { ModelManagement } from '@/components/ServerSettings/ModelManagement';
|
||||
import { ServerStatus } from '@/components/ServerSettings/ServerStatus';
|
||||
import { UpdateStatus } from '@/components/ServerSettings/UpdateStatus';
|
||||
import { isTauri } from '@/lib/tauri';
|
||||
|
||||
export function ServerTab() {
|
||||
return (
|
||||
<div className="space-y-4 overflow-y-auto flex flex-col">
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<ConnectionForm />
|
||||
<ServerStatus />
|
||||
</div>
|
||||
{isTauri() && <UpdateStatus />}
|
||||
<ModelManagement />
|
||||
<div className="py-8 text-center text-sm text-muted-foreground">
|
||||
Created by{' '}
|
||||
<a
|
||||
href="https://github.com/jamiepine"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-accent hover:underline"
|
||||
>
|
||||
Jamie Pine
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Loader2, Settings, Volume2 } from 'lucide-react';
|
||||
import { Loader2, Settings, Volume2, Mic, Speaker, Server } from 'lucide-react';
|
||||
import voiceboxLogo from '@/assets/voicebox-logo.png';
|
||||
import { cn } from '@/lib/utils/cn';
|
||||
import { useGenerationStore } from '@/stores/generationStore';
|
||||
@@ -11,8 +11,10 @@ interface SidebarProps {
|
||||
}
|
||||
|
||||
const tabs = [
|
||||
{ id: 'main', icon: Volume2, label: 'Main' },
|
||||
{ id: 'settings', icon: Settings, label: 'Settings' },
|
||||
{ id: 'main', icon: Volume2, label: 'Generate' },
|
||||
{ id: 'voices', icon: Mic, label: 'Voices' },
|
||||
{ id: 'audio', icon: Speaker, label: 'Audio' },
|
||||
{ id: 'server', icon: Server, label: 'Server' },
|
||||
];
|
||||
|
||||
export function Sidebar({ activeTab, onTabChange, isMacOS }: SidebarProps) {
|
||||
|
||||
@@ -0,0 +1,216 @@
|
||||
import { Edit, MoreHorizontal, Plus, Trash2 } from 'lucide-react';
|
||||
import { useMemo } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table';
|
||||
import { useProfiles, useProfileSamples, useDeleteProfile } from '@/lib/hooks/useProfiles';
|
||||
import { useHistory } from '@/lib/hooks/useHistory';
|
||||
import { useUIStore } from '@/stores/uiStore';
|
||||
import { apiClient } from '@/lib/api/client';
|
||||
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
|
||||
export function VoicesTab() {
|
||||
const { data: profiles, isLoading } = useProfiles();
|
||||
const { data: historyData } = useHistory({ limit: 1000 });
|
||||
const queryClient = useQueryClient();
|
||||
const setDialogOpen = useUIStore((state) => state.setProfileDialogOpen);
|
||||
const setEditingProfileId = useUIStore((state) => state.setEditingProfileId);
|
||||
const deleteProfile = useDeleteProfile();
|
||||
|
||||
// Get generation counts per profile
|
||||
const generationCounts = useMemo(() => {
|
||||
const counts: Record<string, number> = {};
|
||||
if (historyData?.items) {
|
||||
historyData.items.forEach((item) => {
|
||||
counts[item.profile_id] = (counts[item.profile_id] || 0) + 1;
|
||||
});
|
||||
}
|
||||
return counts;
|
||||
}, [historyData]);
|
||||
|
||||
// Get channel assignments for each profile
|
||||
const { data: channelAssignments } = useQuery({
|
||||
queryKey: ['profile-channels'],
|
||||
queryFn: async () => {
|
||||
if (!profiles) return {};
|
||||
const assignments: Record<string, string[]> = {};
|
||||
for (const profile of profiles) {
|
||||
try {
|
||||
const result = await apiClient.getProfileChannels(profile.id);
|
||||
assignments[profile.id] = result.channel_ids;
|
||||
} catch {
|
||||
assignments[profile.id] = [];
|
||||
}
|
||||
}
|
||||
return assignments;
|
||||
},
|
||||
enabled: !!profiles,
|
||||
});
|
||||
|
||||
// Get all channels
|
||||
const { data: channels } = useQuery({
|
||||
queryKey: ['channels'],
|
||||
queryFn: () => apiClient.listChannels(),
|
||||
});
|
||||
|
||||
const handleEdit = (profileId: string) => {
|
||||
setEditingProfileId(profileId);
|
||||
setDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleDelete = (profileId: string) => {
|
||||
if (confirm('Are you sure you want to delete this profile?')) {
|
||||
deleteProfile.mutate(profileId);
|
||||
}
|
||||
};
|
||||
|
||||
const handleChannelChange = async (profileId: string, channelIds: string[]) => {
|
||||
try {
|
||||
await apiClient.setProfileChannels(profileId, channelIds);
|
||||
queryClient.invalidateQueries({ queryKey: ['profile-channels'] });
|
||||
} catch (error) {
|
||||
console.error('Failed to update channels:', error);
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<div className="text-muted-foreground">Loading voices...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h1 className="text-2xl font-bold">Voices</h1>
|
||||
<Button onClick={() => setDialogOpen(true)}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
New Voice
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-auto">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Language</TableHead>
|
||||
<TableHead>Generations</TableHead>
|
||||
<TableHead>Samples</TableHead>
|
||||
<TableHead>Channels</TableHead>
|
||||
<TableHead className="w-[50px]"></TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{profiles?.map((profile) => (
|
||||
<VoiceRow
|
||||
key={profile.id}
|
||||
profile={profile}
|
||||
generationCount={generationCounts[profile.id] || 0}
|
||||
channelIds={channelAssignments?.[profile.id] || []}
|
||||
channels={channels || []}
|
||||
onChannelChange={(channelIds) => handleChannelChange(profile.id, channelIds)}
|
||||
onEdit={() => handleEdit(profile.id)}
|
||||
onDelete={() => handleDelete(profile.id)}
|
||||
/>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface VoiceRowProps {
|
||||
profile: {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string | null;
|
||||
language: string;
|
||||
};
|
||||
generationCount: number;
|
||||
channelIds: string[];
|
||||
channels: Array<{ id: string; name: string; is_default: boolean }>;
|
||||
onChannelChange: (channelIds: string[]) => void;
|
||||
onEdit: () => void;
|
||||
onDelete: () => void;
|
||||
}
|
||||
|
||||
function VoiceRow({
|
||||
profile,
|
||||
generationCount,
|
||||
channelIds,
|
||||
channels,
|
||||
onChannelChange,
|
||||
onEdit,
|
||||
onDelete,
|
||||
}: VoiceRowProps) {
|
||||
const { data: samples } = useProfileSamples(profile.id);
|
||||
|
||||
return (
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<div>
|
||||
<div className="font-medium">{profile.name}</div>
|
||||
{profile.description && (
|
||||
<div className="text-sm text-muted-foreground">{profile.description}</div>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>{profile.language}</TableCell>
|
||||
<TableCell>{generationCount}</TableCell>
|
||||
<TableCell>{samples?.length || 0}</TableCell>
|
||||
<TableCell>
|
||||
<select
|
||||
multiple
|
||||
value={channelIds}
|
||||
onChange={(e) => {
|
||||
const selected = Array.from(e.target.selectedOptions, (opt) => opt.value);
|
||||
onChannelChange(selected);
|
||||
}}
|
||||
className="w-full min-w-[200px] border rounded px-2 py-1 text-sm"
|
||||
size={Math.min(channels.length + 1, 5)}
|
||||
>
|
||||
{channels.map((ch) => (
|
||||
<option key={ch.id} value={ch.id}>
|
||||
{ch.name} {ch.is_default && '(Default)'}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem onClick={onEdit}>
|
||||
<Edit className="h-4 w-4 mr-2" />
|
||||
Edit
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={onDelete} className="text-destructive">
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user