codytseng
8 months ago
41 changed files with 755 additions and 91 deletions
@ -0,0 +1,177 @@ |
|||||||
|
import { Badge } from '@/components/ui/badge' |
||||||
|
import { Button } from '@/components/ui/button' |
||||||
|
import { Input } from '@/components/ui/input' |
||||||
|
import { Separator } from '@/components/ui/separator' |
||||||
|
import { RECOMMENDED_BLOSSOM_SERVERS } from '@/constants' |
||||||
|
import { createBlossomServerListDraftEvent } from '@/lib/draft-event' |
||||||
|
import { extractServersFromTags } from '@/lib/event' |
||||||
|
import { cn } from '@/lib/utils' |
||||||
|
import { useNostr } from '@/providers/NostrProvider' |
||||||
|
import client from '@/services/client.service' |
||||||
|
import { AlertCircle, ArrowUpToLine, Loader, X } from 'lucide-react' |
||||||
|
import { Event } from 'nostr-tools' |
||||||
|
import { useEffect, useMemo, useState } from 'react' |
||||||
|
import { useTranslation } from 'react-i18next' |
||||||
|
|
||||||
|
export default function BlossomServerListSetting() { |
||||||
|
const { t } = useTranslation() |
||||||
|
const { pubkey, publish } = useNostr() |
||||||
|
const [blossomServerListEvent, setBlossomServerListEvent] = useState<Event | null>(null) |
||||||
|
const serverUrls = useMemo(() => { |
||||||
|
return extractServersFromTags(blossomServerListEvent ? blossomServerListEvent.tags : []) |
||||||
|
}, [blossomServerListEvent]) |
||||||
|
const [url, setUrl] = useState('') |
||||||
|
const [removingIndex, setRemovingIndex] = useState(-1) |
||||||
|
const [movingIndex, setMovingIndex] = useState(-1) |
||||||
|
const [adding, setAdding] = useState(false) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
const init = async () => { |
||||||
|
if (!pubkey) { |
||||||
|
setBlossomServerListEvent(null) |
||||||
|
return |
||||||
|
} |
||||||
|
const event = await client.fetchBlossomServerListEvent(pubkey) |
||||||
|
setBlossomServerListEvent(event) |
||||||
|
} |
||||||
|
init() |
||||||
|
}, [pubkey]) |
||||||
|
|
||||||
|
const addBlossomUrl = async (url: string) => { |
||||||
|
if (!url || adding || removingIndex >= 0 || movingIndex >= 0) return |
||||||
|
setAdding(true) |
||||||
|
try { |
||||||
|
const draftEvent = createBlossomServerListDraftEvent([...serverUrls, url]) |
||||||
|
const newEvent = await publish(draftEvent) |
||||||
|
await client.updateBlossomServerListEventCache(newEvent) |
||||||
|
setBlossomServerListEvent(newEvent) |
||||||
|
setUrl('') |
||||||
|
} catch (error) { |
||||||
|
console.error('Failed to add Blossom URL:', error) |
||||||
|
} finally { |
||||||
|
setAdding(false) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const handleUrlInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => { |
||||||
|
if (event.key === 'Enter') { |
||||||
|
event.preventDefault() |
||||||
|
addBlossomUrl(url) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const removeBlossomUrl = async (idx: number) => { |
||||||
|
if (removingIndex >= 0 || adding || movingIndex >= 0) return |
||||||
|
setRemovingIndex(idx) |
||||||
|
try { |
||||||
|
const draftEvent = createBlossomServerListDraftEvent(serverUrls.filter((_, i) => i !== idx)) |
||||||
|
const newEvent = await publish(draftEvent) |
||||||
|
await client.updateBlossomServerListEventCache(newEvent) |
||||||
|
setBlossomServerListEvent(newEvent) |
||||||
|
} catch (error) { |
||||||
|
console.error('Failed to remove Blossom URL:', error) |
||||||
|
} finally { |
||||||
|
setRemovingIndex(-1) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const moveToTop = async (idx: number) => { |
||||||
|
if (removingIndex >= 0 || adding || movingIndex >= 0 || idx === 0) return |
||||||
|
setMovingIndex(idx) |
||||||
|
try { |
||||||
|
const newUrls = [serverUrls[idx], ...serverUrls.filter((_, i) => i !== idx)] |
||||||
|
const draftEvent = createBlossomServerListDraftEvent(newUrls) |
||||||
|
const newEvent = await publish(draftEvent) |
||||||
|
await client.updateBlossomServerListEventCache(newEvent) |
||||||
|
setBlossomServerListEvent(newEvent) |
||||||
|
} catch (error) { |
||||||
|
console.error('Failed to move Blossom URL to top:', error) |
||||||
|
} finally { |
||||||
|
setMovingIndex(-1) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="space-y-2"> |
||||||
|
<div className="text-sm font-medium">{t('Blossom server URLs')}</div> |
||||||
|
{serverUrls.length === 0 && ( |
||||||
|
<div className="flex flex-col gap-1 text-sm border rounded-lg p-2 bg-muted text-muted-foreground"> |
||||||
|
<div className="font-medium flex gap-2 items-center"> |
||||||
|
<AlertCircle className="size-4" /> |
||||||
|
{t('You need to add at least one media server in order to upload media files.')} |
||||||
|
</div> |
||||||
|
<Separator className="bg-muted-foreground my-2" /> |
||||||
|
<div className="font-medium">{t('Recommended blossom servers')}:</div> |
||||||
|
<div className="flex flex-col"> |
||||||
|
{RECOMMENDED_BLOSSOM_SERVERS.map((recommendedUrl) => ( |
||||||
|
<Button |
||||||
|
variant="link" |
||||||
|
key={recommendedUrl} |
||||||
|
onClick={() => addBlossomUrl(recommendedUrl)} |
||||||
|
disabled={removingIndex >= 0 || adding || movingIndex >= 0} |
||||||
|
className="w-fit p-0 text-muted-foreground hover:text-foreground h-fit" |
||||||
|
> |
||||||
|
{recommendedUrl} |
||||||
|
</Button> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
{serverUrls.map((url, idx) => ( |
||||||
|
<div |
||||||
|
key={url} |
||||||
|
className={cn( |
||||||
|
'flex items-center justify-between gap-2 pl-3 pr-1 py-1 border rounded-lg', |
||||||
|
idx === 0 && 'border-primary' |
||||||
|
)} |
||||||
|
> |
||||||
|
<a |
||||||
|
href={url} |
||||||
|
target="_blank" |
||||||
|
rel="noopener noreferrer" |
||||||
|
className="truncate hover:underline" |
||||||
|
> |
||||||
|
{url} |
||||||
|
</a> |
||||||
|
<div className="flex items-center gap-2"> |
||||||
|
{idx > 0 ? ( |
||||||
|
<Button |
||||||
|
variant="ghost" |
||||||
|
size="icon" |
||||||
|
onClick={() => moveToTop(idx)} |
||||||
|
title={t('Move to top')} |
||||||
|
disabled={removingIndex >= 0 || adding || movingIndex >= 0} |
||||||
|
className="text-muted-foreground" |
||||||
|
> |
||||||
|
{movingIndex === idx ? <Loader className="animate-spin" /> : <ArrowUpToLine />} |
||||||
|
</Button> |
||||||
|
) : ( |
||||||
|
<Badge>{t('Preferred')}</Badge> |
||||||
|
)} |
||||||
|
<Button |
||||||
|
variant="ghost-destructive" |
||||||
|
size="icon" |
||||||
|
onClick={() => removeBlossomUrl(idx)} |
||||||
|
title={t('Remove')} |
||||||
|
disabled={removingIndex >= 0 || adding || movingIndex >= 0} |
||||||
|
> |
||||||
|
{removingIndex === idx ? <Loader className="animate-spin" /> : <X />} |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
))} |
||||||
|
<div className="flex items-center gap-2"> |
||||||
|
<Input |
||||||
|
value={url} |
||||||
|
onChange={(e) => setUrl(e.target.value)} |
||||||
|
placeholder={t('Enter Blossom server URL')} |
||||||
|
onKeyDown={handleUrlInputKeyDown} |
||||||
|
/> |
||||||
|
<Button type="button" onClick={() => addBlossomUrl(url)} title={t('Add')}> |
||||||
|
{adding && <Loader className="animate-spin" />} |
||||||
|
{t('Add')} |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
Loading…
Reference in new issue