yusufipek/OpenFrame
1
0
Fork 0
mirror of https://github.com/yusufipk/OpenFrame.git synced 2026-09-11 09:36:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(assets): add image upload state management and update button behavior during upload

Browse Source
This commit is contained in:
Yusuf İpek
2026-04-14 13:41:41 +03:00
parent d1b2d23509
commit 8a12bb484b
2 changed files with 28 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/video-page/assets-pane.tsx
+9 -3
View File
@@ -109,6 +109,7 @@ export const AssetsPane = memo(function AssetsPane({
const [youtubeUrl, setYoutubeUrl] = useState('');
const [youtubeTitle, setYoutubeTitle] = useState('');
const [bunnyTitle, setBunnyTitle] = useState('');
const [isUploadingImage, setIsUploadingImage] = useState(false);
const [isUploadingBunny, setIsUploadingBunny] = useState(false);
const [bunnyProgress, setBunnyProgress] = useState(0);
const [bunnyProcessingByAssetId, setBunnyProcessingByAssetId] = useState<Record<string, boolean>>({});
@@ -290,6 +291,7 @@ export const AssetsPane = memo(function AssetsPane({
return;
}
setIsUploadingImage(true);
try {
const formData = new FormData();
formData.append('image', file);
@@ -319,6 +321,8 @@ export const AssetsPane = memo(function AssetsPane({
} catch (error) {
console.error('Failed to upload image asset:', error);
toast.error('Failed to upload image');
} finally {
setIsUploadingImage(false);
}
}, [videoId, getGuestUploadToken, createAsset, imageTitle]);
@@ -807,7 +811,7 @@ export const AssetsPane = memo(function AssetsPane({
<Button
variant="outline"
className="w-full"
disabled={isCreatingAsset}
disabled={isUploadingImage || isCreatingAsset}
onClick={() => {
if (pendingImageFile) {
void handleImageUpload(pendingImageFile);
@@ -816,8 +820,10 @@ export const AssetsPane = memo(function AssetsPane({
imageInputRef.current?.click();
}}
>
<UploadCloud className="h-4 w-4 mr-2" />
{pendingImageFile ? 'Upload Image' : 'Select Image'}
{isUploadingImage || isCreatingAsset
? <Loader2 className="h-4 w-4 mr-2 animate-spin" />
: <UploadCloud className="h-4 w-4 mr-2" />}
{isUploadingImage ? 'Uploading...' : isCreatingAsset ? 'Saving...' : pendingImageFile ? 'Upload Image' : 'Select Image'}
</Button>
<input
ref={imageInputRef}