LaconicNetwork/stargaze-studio
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #97 from public-awesome/html-file-support

Browse Source 
Upload support for .html files during collection creation
This commit is contained in:
Serkan Reis 2023-01-24 14:26:46 +03:00 committed by GitHub
commit af3aba109b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 55 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.example
View File

@ -1,4 +1,4 @@
APP_VERSION=0.4.1
APP_VERSION=0.4.2
NEXT_PUBLIC_PINATA_ENDPOINT_URL=https://api.pinata.cloud/pinning/pinFileToIPFS
NEXT_PUBLIC_SG721_CODE_ID=793

12
components/AssetsPreview.tsx
View File

@ -96,6 +96,18 @@ export const AssetsPreview = ({ assetFilesArray, updateMetadataFileIndex }: Asse
/>
</div>
)}
{getAssetType(assetSource.name) === 'html' && (
<div className="flex absolute flex-col items-center mt-4 ml-2">
<img
key={`html-${index}`}
alt="html_icon"
className={clsx('mb-2 ml-1 w-10 h-10 thumbnail')}
src="/html.png"
/>
<span className="flex self-center">{assetSource.name.toLowerCase()}</span>
</div>
)}
</label>
</button>
))

17
components/MetadataFormGroup.tsx
View File

@ -1,7 +1,7 @@
/* eslint-disable eslint-comments/disable-enable-pair */
/* eslint-disable jsx-a11y/media-has-caption */
import type { ReactNode } from 'react'
import { useMemo } from 'react'
import { useEffect, useMemo, useState } from 'react'
import { getAssetType } from 'utils/getAssetType'
export interface MetadataFormGroupProps {
@ -13,6 +13,7 @@ export interface MetadataFormGroupProps {
export const MetadataFormGroup = (props: MetadataFormGroupProps) => {
const { title, subtitle, relatedAsset, children } = props
const [htmlContents, setHtmlContents] = useState<string>('')
const videoPreview = useMemo(
() => (
@ -40,6 +41,17 @@ export const MetadataFormGroup = (props: MetadataFormGroupProps) => {
[relatedAsset],
)
useEffect(() => {
if (getAssetType(relatedAsset?.name as string) !== 'html') return
const reader = new FileReader()
reader.onload = (e) => {
if (typeof e.target?.result === 'string') {
setHtmlContents(e.target.result)
}
}
reader.readAsText(new Blob([relatedAsset as File]))
}, [relatedAsset])
return (
<div className="flex p-4 pt-0 space-x-4 w-full">
<div className="flex flex-col w-1/3">
@ -54,6 +66,9 @@ export const MetadataFormGroup = (props: MetadataFormGroupProps) => {
{getAssetType(relatedAsset.name) === 'image' && (
<img alt="preview" src={URL.createObjectURL(relatedAsset)} />
)}
{getAssetType(relatedAsset.name) === 'html' && (
<iframe allowFullScreen height="420px" srcDoc={htmlContents} title="Preview" width="100%" />
)}
</div>
)}
</div>

17
components/SingleAssetPreview.tsx
View File

@ -1,7 +1,7 @@
/* eslint-disable eslint-comments/disable-enable-pair */
/* eslint-disable jsx-a11y/media-has-caption */
import type { ReactNode } from 'react'
import { useMemo } from 'react'
import { useEffect, useMemo, useState } from 'react'
import { getAssetType } from 'utils/getAssetType'
export interface SingleAssetPreviewProps {
@ -13,6 +13,7 @@ export interface SingleAssetPreviewProps {
export const SingleAssetPreview = (props: SingleAssetPreviewProps) => {
const { subtitle, relatedAsset, updateMetadataFileIndex, children } = props
const [htmlContents, setHtmlContents] = useState<string>('')
const videoPreview = useMemo(
() => (
@ -40,6 +41,17 @@ export const SingleAssetPreview = (props: SingleAssetPreviewProps) => {
[relatedAsset],
)
useEffect(() => {
if (getAssetType(relatedAsset?.name as string) !== 'html') return
const reader = new FileReader()
reader.onload = (e) => {
if (typeof e.target?.result === 'string') {
setHtmlContents(e.target.result)
}
}
reader.readAsText(new Blob([relatedAsset as File]))
}, [relatedAsset])
return (
<div className="flex p-4 pt-0 mt-11 ml-24 space-x-4 w-full">
<div className="flex flex-col w-full">
@ -53,6 +65,9 @@ export const SingleAssetPreview = (props: SingleAssetPreviewProps) => {
{getAssetType(relatedAsset.name) === 'image' && (
<img alt="preview" src={URL.createObjectURL(relatedAsset)} />
)}
{getAssetType(relatedAsset.name) === 'html' && (
<iframe allowFullScreen height="300px" srcDoc={htmlContents} title="Preview" width="100%" />
)}
</div>
)}
</div>

4
components/collections/creation/UploadDetails.tsx
View File

@ -441,7 +441,7 @@ export const UploadDetails = ({ onChange, minterType, baseMinterAcquisitionMetho
)}
>
<input
accept="image/*, audio/*, video/*"
accept="image/*, audio/*, video/*, .html"
className={clsx(
'file:py-2 file:px-4 file:mr-4 file:bg-plumbus-light file:rounded file:border-0 cursor-pointer',
'before:absolute before:inset-0 before:hover:bg-white/5 before:transition',
@ -488,7 +488,7 @@ export const UploadDetails = ({ onChange, minterType, baseMinterAcquisitionMetho
</div>
</div>
)}
<Conditional test={assetFilesArray.length > 1}>
<Conditional test={assetFilesArray.length >= 1}>
<MetadataModal
assetFile={assetFilesArray[metadataFileArrayIndex]}
metadataFile={metadataFilesArray[metadataFileArrayIndex]}

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "stargaze-studio",
"version": "0.4.1",
"version": "0.4.2",
"workspaces": [
"packages/*"
],

9
pages/collections/create.tsx
View File

@ -1,5 +1,5 @@
/* eslint-disable eslint-comments/disable-enable-pair */
/* eslint-disable @typescript-eslint/no-unsafe-call */
/* eslint-disable @typescript-eslint/restrict-template-expressions */
/* eslint-disable @typescript-eslint/no-unsafe-argument */
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
@ -576,12 +576,13 @@ const CollectionCreationPage: NextPage = () => {
if (
getAssetType(uploadDetails.assetFiles[i].name) === 'audio' ||
getAssetType(uploadDetails.assetFiles[i].name) === 'video'
getAssetType(uploadDetails.assetFiles[i].name) === 'video' ||
getAssetType(uploadDetails.assetFiles[i].name) === 'html'
) {
data.animation_url = `ipfs://${assetUri}/${uploadDetails.assetFiles[i].name}`
}
data.image = `ipfs://${assetUri}/${uploadDetails.assetFiles[i].name}`
if (getAssetType(uploadDetails.assetFiles[i].name) !== 'html')
data.image = `ipfs://${assetUri}/${uploadDetails.assetFiles[i].name}`
const metadataFileBlob = new Blob([JSON.stringify(data)], {
type: 'application/json',

BIN
public/html.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

3
utils/getAssetType.ts
View File

@ -1,6 +1,6 @@
/* eslint-disable eslint-comments/disable-enable-pair */
/* eslint-disable @typescript-eslint/no-unnecessary-condition */
export type AssetType = 'image' | 'audio' | 'video' | 'unknown'
export type AssetType = 'image' | 'audio' | 'video' | 'html' | 'unknown'
export const getAssetType = (assetFileName: string): AssetType => {
const assetType = assetFileName?.split('.').pop() || 'unknown'
@ -8,5 +8,6 @@ export const getAssetType = (assetFileName: string): AssetType => {
return 'image'
if (assetType === 'mp3' || assetType === 'wav') return 'audio'
if (assetType === 'mp4') return 'video'
if (assetType === 'html') return 'html'
return 'unknown'
}