Skip to content

Commit

Permalink
Merge pull request #199 from ourzora/proposal-template-droposal
Browse files Browse the repository at this point in the history
Add proposal template droposal
  • Loading branch information
neokry authored Apr 27, 2023
2 parents 80f7179 + 73754b4 commit 0aa4af1
Show file tree
Hide file tree
Showing 22 changed files with 1,590 additions and 8 deletions.
5 changes: 5 additions & 0 deletions apps/web/src/components/Icon/assets/collection.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions apps/web/src/components/Icon/assets/pause-template.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 1 addition & 6 deletions apps/web/src/components/Icon/assets/pause.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions apps/web/src/components/Icon/assets/play.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions apps/web/src/components/Icon/icons.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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'
Expand All @@ -47,6 +50,7 @@ export const icons = {
chevronRight: ChevronRight,
chevronUp: ChevronUp,
code: Code,
collection: Collection,
copy: Copy,
cross: Cross,
'cross-16': Cross16,
Expand All @@ -64,6 +68,8 @@ export const icons = {
newWindow: NewWindow,
nounsConnect: NounsConnect,
pause: Pause,
pauseTemplate: PauseTemplate,
play: Play,
plus: Plus,
refresh: Refresh,
trash: Trash,
Expand Down
69 changes: 69 additions & 0 deletions apps/web/src/components/MediaPreview/Audio.tsx
Original file line number Diff line number Diff line change
@@ -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>
)
}
23 changes: 23 additions & 0 deletions apps/web/src/components/MediaPreview/Image.tsx
Original file line number Diff line number Diff line change
@@ -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',
}}
/>
)
}
36 changes: 36 additions & 0 deletions apps/web/src/components/MediaPreview/MediaPreview.tsx
Original file line number Diff line number Diff line change
@@ -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'} />
}
21 changes: 21 additions & 0 deletions apps/web/src/components/MediaPreview/Video.tsx
Original file line number Diff line number Diff line change
@@ -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',
}}
/>
)
}
23 changes: 23 additions & 0 deletions apps/web/src/components/SingleMediaUpload/SingleMediaUpload.css.ts
Original file line number Diff line number Diff line change
@@ -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',
},
},
})
Loading

2 comments on commit 0aa4af1

@vercel
Copy link

@vercel vercel bot commented on 0aa4af1 Apr 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 0aa4af1 Apr 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

testnet-nouns-builder – ./apps/web

testnet-nouns-builder-ourzora.vercel.app
testnet-nouns-builder-git-main-ourzora.vercel.app
testnet.nouns.build

Please sign in to comment.