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

Update SingleAssetPreview for .html files

Browse Source
This commit is contained in:
Serkan Reis 2023-01-24 14:04:29 +03:00
parent 70ce08a98a
commit 2ad2cd11ec
2 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/MetadataFormGroup.tsx
View File

@ -67,9 +67,7 @@ export const MetadataFormGroup = (props: MetadataFormGroupProps) => {
<img alt="preview" src={URL.createObjectURL(relatedAsset)} />
)}
{getAssetType(relatedAsset.name) === 'html' && (
<div>
<iframe allowFullScreen height="420px" srcDoc={htmlContents} title="Preview" width="100%" />
</div>
<iframe allowFullScreen height="420px" srcDoc={htmlContents} title="Preview" width="100%" />
)}
</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>