feat: fix frontend
This commit is contained in:
Nevo David
parent
2502d78aac
commit
4919b8383c
|
|
@ -12,6 +12,7 @@ const nextConfig = {
|
|||
// See: https://github.com/gregberge/vgr
|
||||
svgr: false,
|
||||
},
|
||||
transpilePackages: ['crypto-hash'],
|
||||
images: {
|
||||
remotePatterns: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -14,13 +14,7 @@ import { VideoFrame } from '@gitroom/react/helpers/video.frame';
|
|||
import { useToaster } from '@gitroom/react/toaster/toaster';
|
||||
import { LoadingComponent } from '@gitroom/frontend/components/layout/loading';
|
||||
import dynamic from 'next/dynamic';
|
||||
const MultipartFileUploader = dynamic(
|
||||
() =>
|
||||
import('@gitroom/frontend/components/media/new.uploader').then(
|
||||
(mod) => mod.MultipartFileUploader
|
||||
),
|
||||
{ ssr: false }
|
||||
);
|
||||
import { MultipartFileUploader } from '@gitroom/frontend/components/media/new.uploader';
|
||||
const showModalEmitter = new EventEmitter();
|
||||
|
||||
export const ShowMediaBoxModal: FC = () => {
|
||||
|
|
@ -221,16 +215,16 @@ export const MediaBox: FC<{
|
|||
<div>You don{"'"}t have any assets yet.</div>
|
||||
<div>Click the button below to upload one</div>
|
||||
<div className="mt-[10px]">
|
||||
<MultipartFileUploader
|
||||
onUploadSuccess={mutate}
|
||||
allowedFileTypes={
|
||||
type === 'video'
|
||||
? 'video/mp4'
|
||||
: type === 'image'
|
||||
? 'image/*'
|
||||
: 'image/*,video/mp4'
|
||||
}
|
||||
/>
|
||||
{/*<MultipartFileUploader*/}
|
||||
{/* onUploadSuccess={mutate}*/}
|
||||
{/* allowedFileTypes={*/}
|
||||
{/* type === 'video'*/}
|
||||
{/* ? 'video/mp4'*/}
|
||||
{/* : type === 'image'*/}
|
||||
{/* ? 'image/*'*/}
|
||||
{/* : 'image/*,video/mp4'*/}
|
||||
{/* }*/}
|
||||
{/*/>*/}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,18 @@
|
|||
import React from 'react';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
// @ts-ignore
|
||||
import Uppy, { type UploadResult } from '@uppy/core';
|
||||
// @ts-ignore
|
||||
import { ProgressBar, FileInput } from '@uppy/react';
|
||||
// @ts-ignore
|
||||
import { sha256 } from 'crypto-hash';
|
||||
import Uppy, { UploadResult } from '@uppy/core';
|
||||
// @ts-ignore
|
||||
import AwsS3Multipart from '@uppy/aws-s3-multipart';
|
||||
// @ts-ignore
|
||||
import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
|
||||
|
||||
import sha256 from 'sha256';
|
||||
import { FileInput, ProgressBar } from '@uppy/react';
|
||||
|
||||
// Uppy styles
|
||||
import "@uppy/core/dist/style.min.css";
|
||||
import "@uppy/dashboard/dist/style.min.css";
|
||||
|
||||
const fetchUploadApiEndpoint = async (
|
||||
fetch: any,
|
||||
endpoint: string,
|
||||
|
|
@ -34,20 +37,47 @@ export function MultipartFileUploader({
|
|||
// @ts-ignore
|
||||
onUploadSuccess: (result: UploadResult) => void;
|
||||
allowedFileTypes: string;
|
||||
}) {
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setLoaded(true);
|
||||
}, []);
|
||||
|
||||
if (!loaded) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<MultipartFileUploaderAfter
|
||||
onUploadSuccess={onUploadSuccess}
|
||||
allowedFileTypes={allowedFileTypes}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function MultipartFileUploaderAfter({
|
||||
onUploadSuccess,
|
||||
allowedFileTypes,
|
||||
}: {
|
||||
// @ts-ignore
|
||||
onUploadSuccess: (result: UploadResult) => void;
|
||||
allowedFileTypes: string;
|
||||
}) {
|
||||
const fetch = useFetch();
|
||||
const uppy = React.useMemo(() => {
|
||||
const uppy = new Uppy({
|
||||
const uppy = useMemo(() => {
|
||||
const uppy2 = new Uppy({
|
||||
autoProceed: true,
|
||||
restrictions: {
|
||||
maxNumberOfFiles: 1,
|
||||
allowedFileTypes: allowedFileTypes.split(','),
|
||||
maxFileSize: 1000000,
|
||||
maxFileSize: 1000000000,
|
||||
},
|
||||
}).use(AwsS3Multipart, {
|
||||
// @ts-ignore
|
||||
createMultipartUpload: async (file) => {
|
||||
const arrayBuffer = await new Response(file.data).arrayBuffer();
|
||||
// @ts-ignore
|
||||
const fileHash = await sha256(arrayBuffer);
|
||||
const contentType = file.type;
|
||||
return fetchUploadApiEndpoint(fetch, 'create-multipart-upload', {
|
||||
|
|
@ -75,29 +105,31 @@ export function MultipartFileUploader({
|
|||
...props,
|
||||
}),
|
||||
});
|
||||
return uppy;
|
||||
}, []);
|
||||
uppy.on('complete', (result) => {
|
||||
onUploadSuccess(result);
|
||||
});
|
||||
uppy.on('upload-success', (file, response) => {
|
||||
// @ts-ignore
|
||||
uppy.setFileState(file.id, {
|
||||
// @ts-ignore
|
||||
progress: uppy.getState().files[file.id].progress,
|
||||
// @ts-ignore
|
||||
uploadURL: response.body.Location,
|
||||
response: response,
|
||||
isPaused: false,
|
||||
|
||||
uppy2.on('complete', (result) => {
|
||||
onUploadSuccess(result);
|
||||
});
|
||||
});
|
||||
|
||||
uppy2.on('upload-success', (file, response) => {
|
||||
// @ts-ignore
|
||||
uppy.setFileState(file.id, {
|
||||
// @ts-ignore
|
||||
progress: uppy.getState().files[file.id].progress,
|
||||
// @ts-ignore
|
||||
uploadURL: response.body.Location,
|
||||
response: response,
|
||||
isPaused: false,
|
||||
});
|
||||
});
|
||||
|
||||
return uppy2;
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<ProgressBar uppy={uppy} />
|
||||
<FileInput
|
||||
uppy={uppy}
|
||||
pretty={true}
|
||||
locale={{
|
||||
strings: {
|
||||
chooseFiles: 'Upload',
|
||||
|
|
|
|||
|
|
@ -44,6 +44,7 @@
|
|||
"@types/mime-types": "^2.1.4",
|
||||
"@types/multer": "^1.4.11",
|
||||
"@types/remove-markdown": "^0.3.4",
|
||||
"@types/sha256": "^0.2.2",
|
||||
"@types/stripe": "^8.0.417",
|
||||
"@types/yup": "^0.32.0",
|
||||
"@uidotdev/usehooks": "^2.4.1",
|
||||
|
|
@ -70,7 +71,7 @@
|
|||
"concat-stream": "^2.0.0",
|
||||
"cookie-parser": "^1.4.6",
|
||||
"copy-to-clipboard": "^3.3.3",
|
||||
"crypto-hash": "^2.0.1",
|
||||
"crypto-hash": "^3.0.0",
|
||||
"dayjs": "^1.11.10",
|
||||
"google-auth-library": "^9.11.0",
|
||||
"googleapis": "^137.1.0",
|
||||
|
|
@ -103,6 +104,7 @@
|
|||
"remove-markdown": "^0.5.0",
|
||||
"resend": "^3.2.0",
|
||||
"rxjs": "^7.8.0",
|
||||
"sha256": "^0.2.0",
|
||||
"sharp": "^0.33.4",
|
||||
"simple-statistics": "^7.8.3",
|
||||
"stripe": "^15.5.0",
|
||||
|
|
@ -12982,6 +12984,14 @@
|
|||
"@types/send": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/sha256": {
|
||||
"version": "0.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/sha256/-/sha256-0.2.2.tgz",
|
||||
"integrity": "sha512-uKMaDzyzfcDYGEwTgLh+hmgDMxXWyIVodY8T+qt7A+NYvikW0lmGLMGbQ7BipCB8dzXHa55C9g+Ii/3Lgt1KmA==",
|
||||
"dependencies": {
|
||||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/sockjs": {
|
||||
"version": "0.3.36",
|
||||
"resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.36.tgz",
|
||||
|
|
@ -17545,12 +17555,22 @@
|
|||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/convert-hex": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/convert-hex/-/convert-hex-0.1.0.tgz",
|
||||
"integrity": "sha512-w20BOb1PiR/sEJdS6wNrUjF5CSfscZFUp7R9NSlXH8h2wynzXVEPFPJECAnkNylZ+cvf3p7TyRUHggDmrwXT9A=="
|
||||
},
|
||||
"node_modules/convert-source-map": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
|
||||
"integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/convert-string": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/convert-string/-/convert-string-0.1.0.tgz",
|
||||
"integrity": "sha512-1KX9ESmtl8xpT2LN2tFnKSbV4NiarbVi8DVb39ZriijvtTklyrT+4dT1wsGMHKD3CJUjXgvJzstm9qL9ICojGA=="
|
||||
},
|
||||
"node_modules/cookie": {
|
||||
"version": "0.4.1",
|
||||
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.1.tgz",
|
||||
|
|
@ -17912,11 +17932,11 @@
|
|||
}
|
||||
},
|
||||
"node_modules/crypto-hash": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/crypto-hash/-/crypto-hash-2.0.1.tgz",
|
||||
"integrity": "sha512-t4mkp7Vh6MuCZRBf0XLzBOfhkH3nW6YEAotMDSjshVQ1GffCMGdPLSr7pKH0rdXY02jTjAZ7QW2apD0buaZXcQ==",
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/crypto-hash/-/crypto-hash-3.0.0.tgz",
|
||||
"integrity": "sha512-5l5xGtzuvGTU28GXxGV1JYVFou68buZWpkV1Fx5hIDRPnfbQ8KzabTlNIuDIeSCYGVPFehupzDqlnbXm2IXmdQ==",
|
||||
"engines": {
|
||||
"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
|
||||
"node": ">=18"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
|
|
@ -35544,6 +35564,15 @@
|
|||
"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
|
||||
"integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
|
||||
},
|
||||
"node_modules/sha256": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/sha256/-/sha256-0.2.0.tgz",
|
||||
"integrity": "sha512-kTWMJUaez5iiT9CcMv8jSq6kMhw3ST0uRdcIWl3D77s6AsLXNXRp3heeqqfu5+Dyfu4hwpQnMzhqHh8iNQxw0w==",
|
||||
"dependencies": {
|
||||
"convert-hex": "~0.1.0",
|
||||
"convert-string": "~0.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/shallow-clone": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
|
||||
|
|
|
|||
|
|
@ -48,6 +48,7 @@
|
|||
"@types/mime-types": "^2.1.4",
|
||||
"@types/multer": "^1.4.11",
|
||||
"@types/remove-markdown": "^0.3.4",
|
||||
"@types/sha256": "^0.2.2",
|
||||
"@types/stripe": "^8.0.417",
|
||||
"@types/yup": "^0.32.0",
|
||||
"@uidotdev/usehooks": "^2.4.1",
|
||||
|
|
@ -74,7 +75,7 @@
|
|||
"concat-stream": "^2.0.0",
|
||||
"cookie-parser": "^1.4.6",
|
||||
"copy-to-clipboard": "^3.3.3",
|
||||
"crypto-hash": "^2.0.1",
|
||||
"crypto-hash": "^3.0.0",
|
||||
"dayjs": "^1.11.10",
|
||||
"google-auth-library": "^9.11.0",
|
||||
"googleapis": "^137.1.0",
|
||||
|
|
@ -107,6 +108,7 @@
|
|||
"remove-markdown": "^0.5.0",
|
||||
"resend": "^3.2.0",
|
||||
"rxjs": "^7.8.0",
|
||||
"sha256": "^0.2.0",
|
||||
"sharp": "^0.33.4",
|
||||
"simple-statistics": "^7.8.3",
|
||||
"stripe": "^15.5.0",
|
||||
|
|
|
|||
Loading…
Reference in New Issue