Merge pull request #199 from ourzora/proposal-template-droposal

Add proposal template droposal

apps/web/src/components/Icon/icons.ts

@@ -10,6 +10,7 @@ import ChevronLeft from './assets/chevron-left.svg'
 import ChevronRight from './assets/chevron-right.svg'
 import ChevronUp from './assets/chevron-up.svg'
 import Code from './assets/code.svg'
+import Collection from './assets/collection.svg'
 import Copy from './assets/copy.svg'
 import Cross16 from './assets/cross-16.svg'
 import Cross from './assets/cross.svg'
@@ -26,7 +27,9 @@ import Info16 from './assets/info-16.svg'
 import Move from './assets/move.svg'
 import NewWindow from './assets/new-window.svg'
 import NounsConnect from './assets/nouns-connect.svg'
+import PauseTemplate from './assets/pause-template.svg'
 import Pause from './assets/pause.svg'
+import Play from './assets/play.svg'
 import Plus from './assets/plus.svg'
 import Refresh from './assets/refresh.svg'
 import Trash from './assets/trash.svg'
@@ -47,6 +50,7 @@ export const icons = {
   chevronRight: ChevronRight,
   chevronUp: ChevronUp,
   code: Code,
+  collection: Collection,
   copy: Copy,
   cross: Cross,
   'cross-16': Cross16,
@@ -64,6 +68,8 @@ export const icons = {
   newWindow: NewWindow,
   nounsConnect: NounsConnect,
   pause: Pause,
+  pauseTemplate: PauseTemplate,
+  play: Play,
   plus: Plus,
   refresh: Refresh,
   trash: Trash,

apps/web/src/components/MediaPreview/Audio.tsx

@@ -0,0 +1,69 @@
+import { Box } from '@zoralabs/zord'
+import NextImage from 'next/image'
+import { useCallback, useRef, useState } from 'react'
+
+import { Icon } from '../Icon'
+
+export interface AudioProps {
+  src: string
+  cover?: string
+}
+
+export const Audio: React.FC<AudioProps> = ({ src, cover }) => {
+  const [playing, setPlaying] = useState(false)
+  const audioRef = useRef<HTMLAudioElement>(null)
+
+  const togglePlay = useCallback(async () => {
+    if (!audioRef.current) return
+    if (playing) audioRef.current.pause()
+    else audioRef.current.play()
+  }, [audioRef, playing])
+
+  return (
+    <Box position={'relative'} w="100%" h="100%">
+      {!cover ? (
+        <Box backgroundColor="background2" w="100%" h="100%" borderRadius={'curved'} />
+      ) : (
+        <NextImage
+          src={cover}
+          width={400}
+          height={400}
+          unoptimized
+          alt="Preview"
+          style={{
+            objectFit: 'cover',
+            borderRadius: '10px',
+            height: '400px',
+            width: '400px',
+          }}
+        />
+      )}
+
+      <Box
+        as={'button'}
+        onClick={togglePlay}
+        borderColor="transparent"
+        h="x10"
+        w="x10"
+        cursor={'pointer'}
+        borderRadius="round"
+        backgroundColor={'background1'}
+        position={'absolute'}
+        bottom="x4"
+        right="x4"
+      >
+        <Icon id={playing ? 'pause' : 'play'} fill={'text2'} />
+      </Box>
+
+      <audio
+        src={src}
+        ref={audioRef}
+        loop
+        preload={'auto'}
+        playsInline
+        onPlay={() => setPlaying(true)}
+        onPause={() => setPlaying(false)}
+      />
+    </Box>
+  )
+}

apps/web/src/components/MediaPreview/Image.tsx

@@ -0,0 +1,23 @@
+import NextImage from 'next/image'
+
+export interface ImageProps {
+  src: string
+}
+
+export const Image: React.FC<ImageProps> = ({ src }) => {
+  return (
+    <NextImage
+      src={src}
+      width={400}
+      height={400}
+      unoptimized
+      alt="Preview"
+      style={{
+        objectFit: 'cover',
+        borderRadius: '10px',
+        height: '400px',
+        width: '400px',
+      }}
+    />
+  )
+}

apps/web/src/components/MediaPreview/MediaPreview.tsx

@@ -0,0 +1,36 @@
+import { Box } from '@zoralabs/zord'
+import { getFetchableUrl } from 'ipfs-service'
+import { useMemo } from 'react'
+
+import { Audio } from './Audio'
+import { Image } from './Image'
+import { Video } from './Video'
+
+export interface MediaPreviewProps {
+  mediaUrl: string
+  mediaType?: string
+  coverUrl?: string
+}
+
+export const MediaPreview: React.FC<MediaPreviewProps> = ({
+  mediaType,
+  mediaUrl,
+  coverUrl,
+}) => {
+  const fetchableMediaURL = useMemo(() => getFetchableUrl(mediaUrl) || '', [mediaUrl])
+  const fetchableCoverURL = useMemo(() => getFetchableUrl(coverUrl) || '', [coverUrl])
+
+  if (fetchableMediaURL && mediaType?.startsWith('image')) {
+    return <Image src={fetchableMediaURL} />
+  }
+
+  if (fetchableMediaURL && mediaType?.startsWith('video')) {
+    return <Video src={fetchableMediaURL} />
+  }
+
+  if (fetchableMediaURL && mediaType?.startsWith('audio')) {
+    return <Audio src={fetchableMediaURL} cover={fetchableCoverURL} />
+  }
+
+  return <Box backgroundColor="background2" w="100%" h="100%" borderRadius={'curved'} />
+}

apps/web/src/components/MediaPreview/Video.tsx

@@ -0,0 +1,21 @@
+export interface VideoProps {
+  src: string
+}
+
+export const Video: React.FC<VideoProps> = ({ src }) => {
+  return (
+    <video
+      src={src}
+      autoPlay
+      loop
+      muted={true}
+      playsInline
+      style={{
+        objectFit: 'cover',
+        borderRadius: '10px',
+        height: '400px',
+        width: '400px',
+      }}
+    />
+  )
+}

apps/web/src/components/SingleMediaUpload/SingleMediaUpload.css.ts

@@ -0,0 +1,23 @@
+import { style } from '@vanilla-extract/css'
+
+export const defaultUploadStyle = style({
+  display: 'none',
+})
+
+export const uploadErrorBox = style({
+  color: '#ff0015',
+  boxSizing: 'border-box',
+})
+
+export const singleMediaUploadWrapper = style({
+  height: 64,
+  width: '100%',
+  borderRadius: 15,
+  background: '#F2F2F2',
+  overflow: 'hidden',
+  selectors: {
+    '&:hover': {
+      cursor: 'pointer',
+    },
+  },
+})