MediaUploadServiceSetting.tsx raw

   1  import { Label } from '@/components/ui/label'
   2  import {
   3    Select,
   4    SelectContent,
   5    SelectItem,
   6    SelectTrigger,
   7    SelectValue
   8  } from '@/components/ui/select'
   9  import { DEFAULT_NIP_96_SERVICE, NIP_96_SERVICE } from '@/constants'
  10  import { simplifyUrl } from '@/lib/url'
  11  import { useMediaUploadService } from '@/providers/MediaUploadServiceProvider'
  12  import { useMemo } from 'react'
  13  import { useTranslation } from 'react-i18next'
  14  import BlossomServerListSetting from './BlossomServerListSetting'
  15  
  16  const BLOSSOM = 'blossom'
  17  
  18  export default function MediaUploadServiceSetting() {
  19    const { t } = useTranslation()
  20    const { serviceConfig, updateServiceConfig } = useMediaUploadService()
  21    const selectedValue = useMemo(() => {
  22      if (serviceConfig.type === 'blossom') {
  23        return BLOSSOM
  24      }
  25      return serviceConfig.service
  26    }, [serviceConfig])
  27  
  28    const handleSelectedValueChange = (value: string) => {
  29      if (value === BLOSSOM) {
  30        return updateServiceConfig({ type: 'blossom' })
  31      }
  32      return updateServiceConfig({ type: 'nip96', service: value })
  33    }
  34  
  35    return (
  36      <div className="space-y-2">
  37        <Label htmlFor="media-upload-service-select">{t('Media upload service')}</Label>
  38        <Select
  39          defaultValue={DEFAULT_NIP_96_SERVICE}
  40          value={selectedValue}
  41          onValueChange={handleSelectedValueChange}
  42        >
  43          <SelectTrigger id="media-upload-service-select" className="w-48">
  44            <SelectValue />
  45          </SelectTrigger>
  46          <SelectContent>
  47            <SelectItem value={BLOSSOM}>{t('Blossom')}</SelectItem>
  48            {NIP_96_SERVICE.map((url) => (
  49              <SelectItem key={url} value={url}>
  50                {simplifyUrl(url)}
  51              </SelectItem>
  52            ))}
  53          </SelectContent>
  54        </Select>
  55  
  56        {selectedValue === BLOSSOM && <BlossomServerListSetting />}
  57      </div>
  58    )
  59  }
  60