From 0f8b6cf02f26dd46496973ed4bc8674ded0f8b46 Mon Sep 17 00:00:00 2001 From: Nevo David Date: Sat, 28 Jun 2025 17:03:33 +0700 Subject: [PATCH] feat: transloadit --- .../src/api/routes/media.controller.ts | 12 + apps/frontend/src/app/global.scss | 51 ++ .../components/launches/settings.modal.tsx | 3 +- .../src/components/media/media.component.tsx | 10 +- .../src/components/media/new.uploader.tsx | 62 +- .../src/components/new-launch/editor.tsx | 94 +-- .../src/helpers/uppy.upload.ts | 2 + package.json | 16 +- pnpm-lock.yaml | 572 +++++++++++++++--- 9 files changed, 660 insertions(+), 162 deletions(-) diff --git a/apps/backend/src/api/routes/media.controller.ts b/apps/backend/src/api/routes/media.controller.ts index 18b807eb..b86bfe0d 100644 --- a/apps/backend/src/api/routes/media.controller.ts +++ b/apps/backend/src/api/routes/media.controller.ts @@ -86,6 +86,18 @@ export class MediaController { ); } + @Post('/save-media') + async saveMedia( + @GetOrgFromRequest() org: Organization, + @Req() req: Request, + @Body('name') name: string + ) { + if (!name) { + return false; + } + return this._mediaService.saveFile(org.id, name, process.env.CLOUDFLARE_BUCKET_URL + '/' + name); + } + @Post('/upload-simple') @UseInterceptors(FileInterceptor('file')) async uploadSimple( diff --git a/apps/frontend/src/app/global.scss b/apps/frontend/src/app/global.scss index 640e8a91..38b11cff 100644 --- a/apps/frontend/src/app/global.scss +++ b/apps/frontend/src/app/global.scss @@ -3,6 +3,8 @@ @tailwind utilities; @import './colors.scss'; @import './polonto.css'; +@import '@uppy/core/dist/style.css'; +@import '@uppy/dashboard/dist/style.css'; body, html { @@ -480,3 +482,52 @@ html[dir='rtl'] .lbox { html[dir='rtl'] [dir='ltr'] { direction: rtl !important; } +// +.uppy-Dashboard-AddFiles { + display: none !important; +} + +.uppy-Dashboard-inner * { + @apply text-textColor; +} + +.uppy-Dashboard-inner, +.uppy-StatusBar { + background: transparent; + border-radius: 0 !important; + border: 0 !important; +} + +.bigWrap .uppy-StatusBar-statusSecondary { + display: none !important; + opacity: 0 !important; +} +.bigWrap .uppy-StatusBar { + height: 32px !important; +} +.uppy-StatusBar { + //@apply bg-customColor55; +} +// +//.uppy-Dashboard-inner { +// height: 70px !important; +//} +.uppy-Dashboard-files { + display: none; +} +// +.uppy-DashboardContent-bar { + display: none !important; +} + +.uppy-StatusBar-progress { + display: block; +} + +.uppy-StatusBar-content { +} +// +//.uppy-StatusBar-content { +// padding: 0 !important; +//} +// diff --git a/apps/frontend/src/components/launches/settings.modal.tsx b/apps/frontend/src/components/launches/settings.modal.tsx index c8135acd..f4e35caa 100644 --- a/apps/frontend/src/components/launches/settings.modal.tsx +++ b/apps/frontend/src/components/launches/settings.modal.tsx @@ -1,11 +1,12 @@ import { TopTitle } from '@gitroom/frontend/components/launches/helpers/top.title.component'; -import React, { FC, useCallback, useMemo, useState } from 'react'; +import React, { FC, useCallback, useState } from 'react'; import { useModals } from '@mantine/modals'; import { Integration } from '@prisma/client'; import { useFetch } from '@gitroom/helpers/utils/custom.fetch'; import { Button } from '@gitroom/react/form/button'; import { Slider } from '@gitroom/react/form/slider'; import { useT } from '@gitroom/react/translation/get.transation.service.client'; + export const Element: FC<{ setting: any; onChange: (value: any) => void; diff --git a/apps/frontend/src/components/media/media.component.tsx b/apps/frontend/src/components/media/media.component.tsx index 64951a83..3d7e6569 100644 --- a/apps/frontend/src/components/media/media.component.tsx +++ b/apps/frontend/src/components/media/media.component.tsx @@ -180,7 +180,6 @@ export const MediaBox: FC<{ }, ] ); - // closeModal(); }, [selectedMedia] ); @@ -204,7 +203,8 @@ export const MediaBox: FC<{ closeModal(); }, [selectedMedia]); const { data, mutate } = useSWR(`get-media-${page}`, loadMedia); - const finishUpload = useCallback(async () => { + + const finishUpload = useCallback(async (res: any) => { const lastMedia = mediaList?.[0]?.id; const newData = await mutate(); const untilLastMedia = newData.results.findIndex( @@ -216,6 +216,7 @@ export const MediaBox: FC<{ ); addNewMedia(onlyNewMedia)(); }, [mutate, addNewMedia, mediaList, selectedMedia]); + const dragAndDrop = useCallback( async (event: ClipboardEvent | File[]) => { // @ts-ignore @@ -255,7 +256,6 @@ export const MediaBox: FC<{ ref.current.setOptions({ autoProceed: true, }); - finishUpload(); }, [mutate, addNewMedia, mediaList, selectedMedia] ); @@ -301,7 +301,7 @@ export const MediaBox: FC<{