mirror of https://github.com/kern/filepizza
Added support for "sharedSlug" where multiple uploaders can share files
abawi
8 months ago
parent
7e8650fbc0
commit
a311ccdc31
@ -0,0 +1,47 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState, JSX, useEffect } from 'react'
|
||||
import Downloader from './Downloader'
|
||||
|
||||
export default function MultiDownloader({
|
||||
primaryUploaderID,
|
||||
additionalUploaders,
|
||||
}: {
|
||||
primaryUploaderID: string
|
||||
additionalUploaders: string[]
|
||||
}): JSX.Element {
|
||||
const [selectedUploader, setSelectedUploader] = useState<string>(primaryUploaderID)
|
||||
const [key, setKey] = useState<number>(0)
|
||||
const allUploaders = [primaryUploaderID, ...additionalUploaders]
|
||||
|
||||
useEffect(() => {
|
||||
setKey(prevKey => prevKey + 1)
|
||||
}, [selectedUploader])
|
||||
|
||||
return (
|
||||
<div className="w-full flex flex-col items-center">
|
||||
<div className="w-full mb-4">
|
||||
<h3 className="text-center mb-2 text-stone-700 dark:text-stone-300">
|
||||
Multiple uploaders available for this shared link:
|
||||
</h3>
|
||||
<div className="flex flex-wrap justify-center gap-2 mb-4">
|
||||
{allUploaders.map((uploader, i) => (
|
||||
<button
|
||||
key={uploader}
|
||||
onClick={() => setSelectedUploader(uploader)}
|
||||
className={`px-3 py-1 rounded transition-colors duration-200 ${
|
||||
selectedUploader === uploader
|
||||
? 'bg-green-500 text-white'
|
||||
: 'bg-stone-200 dark:bg-stone-700 text-stone-800 dark:text-stone-200 hover:bg-stone-300 dark:hover:bg-stone-600'
|
||||
}`}
|
||||
>
|
||||
Uploader {i + 1}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Downloader key={key} uploaderPeerID={selectedUploader} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,39 @@
|
||||
'use client'
|
||||
|
||||
import React, { JSX, useCallback } from 'react'
|
||||
import InputLabel from './InputLabel'
|
||||
|
||||
export default function SharedLinkField({
|
||||
value,
|
||||
onChange,
|
||||
}: {
|
||||
value: string
|
||||
onChange: (v: string) => void
|
||||
}): JSX.Element {
|
||||
const handleChange = useCallback(
|
||||
function (e: React.ChangeEvent<HTMLInputElement>): void {
|
||||
onChange(e.target.value)
|
||||
},
|
||||
[onChange],
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="flex flex-col w-full">
|
||||
<InputLabel
|
||||
tooltip="Enter a shared link to collaborate with other uploaders. If this is filled, others with the same link will be able to provide the same files to downloaders. Leave empty to create a new upload."
|
||||
>
|
||||
Shared Link (optional)
|
||||
</InputLabel>
|
||||
<input
|
||||
type="text"
|
||||
className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 border-stone-300 dark:border-stone-600 bg-white dark:bg-stone-800 text-stone-900 dark:text-stone-100"
|
||||
placeholder="Paste a shared link to collaborate with others..."
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<p className="mt-1 text-xs text-stone-500 dark:text-stone-400">
|
||||
You can paste either a full URL or just the slug. When shared, multiple uploaders can provide the same files, making downloads more reliable.
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Loading…
Reference in New Issue