'use client'; import { FC, useCallback, useEffect, useState } from 'react'; import { Button } from '@gitroom/react/form/button'; import useSWR from 'swr'; import { useFetch } from '@gitroom/helpers/utils/custom.fetch'; import { Media } from '@prisma/client'; import { useMediaDirectory } from '@gitroom/react/helpers/use.media.directory'; import { useSettings } from '@gitroom/frontend/components/launches/helpers/use.values'; import EventEmitter from 'events'; import { TopTitle } from '@gitroom/frontend/components/launches/helpers/top.title.component'; import clsx from 'clsx'; import { VideoFrame } from '@gitroom/react/helpers/video.frame'; import { LoadingComponent } from '@gitroom/frontend/components/layout/loading'; import { MultipartFileUploader } from '@gitroom/frontend/components/media/new.uploader'; import dynamic from 'next/dynamic'; import { useUser } from '@gitroom/frontend/components/layout/user.context'; const Polonto = dynamic( () => import('@gitroom/frontend/components/launches/polonto') ); const showModalEmitter = new EventEmitter(); export const ShowMediaBoxModal: FC = () => { const [showModal, setShowModal] = useState(false); const [callBack, setCallBack] = useState<(params: { id: string; path: string }) => void | undefined>(); const closeModal = useCallback(() => { setShowModal(false); setCallBack(undefined); }, []); useEffect(() => { showModalEmitter.on('show-modal', (cCallback) => { setShowModal(true); setCallBack(() => cCallback); }); return () => { showModalEmitter.removeAllListeners('show-modal'); }; }, []); if (!showModal) return null; return (
); }; export const showMediaBox = ( callback: (params: { id: string; path: string }) => void ) => { showModalEmitter.emit('show-modal', callback); }; const CHUNK_SIZE = 1024 * 1024; export const MediaBox: FC<{ setMedia: (params: { id: string; path: string }) => void; type?: 'image' | 'video'; closeModal: () => void; }> = (props) => { const { setMedia, type, closeModal } = props; const [pages, setPages] = useState(0); const [mediaList, setListMedia] = useState([]); const fetch = useFetch(); const mediaDirectory = useMediaDirectory(); const [loading, setLoading] = useState(false); const loadMedia = useCallback(async () => { return (await fetch('/media')).json(); }, []); const setNewMedia = useCallback( (media: Media) => () => { setMedia(media); closeModal(); }, [] ); const { data, mutate } = useSWR('get-media', loadMedia); useEffect(() => { if (data?.pages) { setPages(data.pages); } if (data?.results && data?.results?.length) { setListMedia([...data.results]); } }, [data]); return (
{!!mediaList.length && ( )}
{!mediaList.length && (
You don{"'"}t have any assets yet.
Click the button below to upload one
)} {mediaList .filter((f) => { if (type === 'video') { return f.path.indexOf('mp4') > -1; } else if (type === 'image') { return f.path.indexOf('mp4') === -1; } return true; }) .map((media) => (
{media.path.indexOf('mp4') > -1 ? ( ) : ( media )}
))} {loading && (
)}
); }; export const MultiMediaComponent: FC<{ label: string; description: string; value?: Array<{ path: string; id: string }>; name: string; error?: any; onChange: (event: { target: { name: string; value?: Array<{ id: string; path: string }> }; }) => void; }> = (props) => { const { name, label, error, description, onChange, value } = props; const user = useUser(); useEffect(() => { if (value) { setCurrentMedia(value); } }, []); const [modal, setShowModal] = useState(false); const [mediaModal, setMediaModal] = useState(false); const [currentMedia, setCurrentMedia] = useState(value); const mediaDirectory = useMediaDirectory(); const changeMedia = useCallback( (m: { path: string; id: string }) => { const newMedia = [...(currentMedia || []), m]; setCurrentMedia(newMedia); onChange({ target: { name, value: newMedia } }); }, [currentMedia] ); const showModal = useCallback(() => { setShowModal(!modal); }, [modal]); const closeDesignModal = useCallback(() => { setMediaModal(false); }, [modal]); const clearMedia = useCallback( (topIndex: number) => () => { const newMedia = currentMedia?.filter((f, index) => index !== topIndex); setCurrentMedia(newMedia); onChange({ target: { name, value: newMedia } }); }, [currentMedia] ); const designMedia = useCallback(() => { setMediaModal(true); }, []); return ( <>
{modal && } {mediaModal && !!user?.tier?.ai && ( )}
{!!currentMedia && currentMedia.map((media, index) => ( <>
window.open(mediaDirectory.set(media.path))} > {media.path.indexOf('mp4') > -1 ? ( ) : ( )}
x
))}
{error}
); }; export const MediaComponent: FC<{ label: string; description: string; value?: { path: string; id: string }; name: string; onChange: (event: { target: { name: string; value?: { id: string; path: string } }; }) => void; type?: 'image' | 'video'; width?: number; height?: number; }> = (props) => { const { name, type, label, description, onChange, value, width, height } = props; const { getValues } = useSettings(); const user = useUser(); useEffect(() => { const settings = getValues()[props.name]; if (settings) { setCurrentMedia(settings); } }, []); const [modal, setShowModal] = useState(false); const [mediaModal, setMediaModal] = useState(false); const [currentMedia, setCurrentMedia] = useState(value); const mediaDirectory = useMediaDirectory(); const closeDesignModal = useCallback(() => { setMediaModal(false); }, [modal]); const showDesignModal = useCallback(() => { setMediaModal(true); }, [modal]); const changeMedia = useCallback((m: { path: string; id: string }) => { setCurrentMedia(m); onChange({ target: { name, value: m } }); }, []); const showModal = useCallback(() => { setShowModal(!modal); }, [modal]); const clearMedia = useCallback(() => { setCurrentMedia(undefined); onChange({ target: { name, value: undefined } }); }, [value]); return (
{modal && ( )} {mediaModal && !!user?.tier?.ai && ( )}
{label}
{description}
{!!currentMedia && (
window.open(mediaDirectory.set(currentMedia.path))} />
)}
); };