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

Merge pull request #277 from public-awesome/pdf-support

Browse Source 
PDF support for collection creation
This commit is contained in:
Serkan Reis 2023-11-22 23:28:32 +03:00 committed by GitHub
commit fb78db22cc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 56 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/AssetsPreview.tsx
View File

@ -83,6 +83,17 @@ export const AssetsPreview = ({ assetFilesArray, updateMetadataFileIndex }: Asse
<span className="flex self-center ">{assetSource.name}</span>
</div>
)}
{getAssetType(assetSource.name) === 'document' && (
<div className="flex absolute flex-col items-center mt-4 ml-2">
<img
key={`document-${index}`}
alt="document_icon"
className={clsx('mb-2 ml-1 w-6 h-6 thumbnail')}
src="/pdf.png"
/>
<span className="flex self-center ">{assetSource.name}</span>
</div>
)}
{getAssetType(assetSource.name) === 'video' &&
videoPreviewElements.filter((videoPreviewElement) => videoPreviewElement.key === assetSource.name)}

18
components/MetadataFormGroup.tsx
View File

@ -1,5 +1,6 @@
/* eslint-disable eslint-comments/disable-enable-pair */
/* eslint-disable jsx-a11y/media-has-caption */
import clsx from 'clsx'
import type { ReactNode } from 'react'
import { useEffect, useMemo, useState } from 'react'
import { getAssetType } from 'utils/getAssetType'
@ -41,6 +42,16 @@ export const MetadataFormGroup = (props: MetadataFormGroupProps) => {
[relatedAsset],
)
const documentPreview = useMemo(
() => (
<div className="flex flex-col items-center mt-4 ml-2">
<img key="document-key" alt="document_icon" className={clsx('mb-2 ml-2 w-24 h-24 thumbnail')} src="/pdf.png" />
<span className="flex self-center ">{relatedAsset?.name}</span>
</div>
),
[relatedAsset],
)
useEffect(() => {
if (getAssetType(relatedAsset?.name as string) !== 'html') return
const reader = new FileReader()
@ -60,9 +71,14 @@ export const MetadataFormGroup = (props: MetadataFormGroupProps) => {
{subtitle && <span className="text-sm text-white/50">{subtitle}</span>}
<div>
{relatedAsset && (
<div className="flex flex-row items-center mt-2 mr-4 border-2 border-dashed">
<div
className={`flex flex-row items-center mt-2 mr-4 ${
getAssetType(relatedAsset.name) === 'document' ? '' : `border-2 border-dashed`
}`}
>
{getAssetType(relatedAsset.name) === 'audio' && audioPreview}
{getAssetType(relatedAsset.name) === 'video' && videoPreview}
{getAssetType(relatedAsset.name) === 'document' && documentPreview}
{getAssetType(relatedAsset.name) === 'image' && (
<img alt="preview" src={URL.createObjectURL(relatedAsset)} />
)}

18
components/SingleAssetPreview.tsx
View File

@ -1,5 +1,6 @@
/* eslint-disable eslint-comments/disable-enable-pair */
/* eslint-disable jsx-a11y/media-has-caption */
import clsx from 'clsx'
import type { ReactNode } from 'react'
import { useEffect, useMemo, useState } from 'react'
import { getAssetType } from 'utils/getAssetType'
@ -41,6 +42,16 @@ export const SingleAssetPreview = (props: SingleAssetPreviewProps) => {
[relatedAsset],
)
const documentPreview = useMemo(
() => (
<div className="flex flex-col items-center mt-4 ml-2">
<img key="document-key" alt="document_icon" className={clsx('mb-2 ml-1 w-20 h-20 thumbnail')} src="/pdf.png" />
<span className="flex self-center ">{relatedAsset?.name}</span>
</div>
),
[relatedAsset],
)
useEffect(() => {
if (getAssetType(relatedAsset?.name as string) !== 'html') return
const reader = new FileReader()
@ -59,9 +70,14 @@ export const SingleAssetPreview = (props: SingleAssetPreviewProps) => {
<div>
{/* {subtitle && <span className="text-sm text-white/50">{subtitle}</span>} */}
{relatedAsset && (
<div className="flex flex-row items-center mt-2 mr-4 border-2 border-dashed">
<div
className={`flex flex-row items-center mt-2 mr-4 ${
getAssetType(relatedAsset.name) === 'document' ? '' : `border-2 border-dashed`
}`}
>
{getAssetType(relatedAsset.name) === 'audio' && audioPreview}
{getAssetType(relatedAsset.name) === 'video' && videoPreview}
{getAssetType(relatedAsset.name) === 'document' && documentPreview}
{getAssetType(relatedAsset.name) === 'image' && (
<img alt="preview" src={URL.createObjectURL(relatedAsset)} />
)}

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

@ -117,7 +117,7 @@ export const UploadDetails = ({
setThumbnailFilesArray([])
setThumbnailCompatibleAssetFileNames([])
if (event.target.files === null) return
const thumbnailCompatibleAssetTypes: AssetType[] = ['video', 'audio', 'html']
const thumbnailCompatibleAssetTypes: AssetType[] = ['video', 'audio', 'html', 'document']
const thumbnailCompatibleFileNamesList: string[] = []
if (minterType === 'vending') {
//sort the files
@ -655,7 +655,7 @@ export const UploadDetails = ({
)}
>
<input
accept="image/*, audio/*, video/*, .html"
accept="image/*, audio/*, video/*, .html, .pdf"
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',

2
components/openEdition/ImageUploadDetails.tsx
View File

@ -371,7 +371,7 @@ export const ImageUploadDetails = ({ onChange, importedImageUploadDetails }: Ima
)}
>
<input
accept="image/*, audio/*, video/*, .html"
accept="image/*, audio/*, video/*, .html, .pdf"
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',

4
components/openEdition/OffChainMetadataUploadDetails.tsx
View File

@ -65,7 +65,7 @@ export const OffChainMetadataUploadDetails = ({
const [exportedMetadata, setExportedMetadata] = useState(undefined)
const [openEditionMinterMetadataFile, setOpenEditionMinterMetadataFile] = useState<File | undefined>()
const thumbnailCompatibleAssetTypes: AssetType[] = ['video', 'audio', 'html']
const thumbnailCompatibleAssetTypes: AssetType[] = ['video', 'audio', 'html', 'document']
const assetFilesRef = useRef<HTMLInputElement | null>(null)
const metadataFilesRef = useRef<HTMLInputElement | null>(null)
@ -454,7 +454,7 @@ export const OffChainMetadataUploadDetails = ({
)}
>
<input
accept="image/*, audio/*, video/*, .html"
accept="image/*, audio/*, video/*, .html, .pdf"
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',

6
pages/collections/create.tsx
View File

@ -777,7 +777,8 @@ const CollectionCreationPage: NextPage = () => {
if (
getAssetType(uploadDetails.assetFiles[i].name) === 'audio' ||
getAssetType(uploadDetails.assetFiles[i].name) === 'video' ||
getAssetType(uploadDetails.assetFiles[i].name) === 'html'
getAssetType(uploadDetails.assetFiles[i].name) === 'html' ||
getAssetType(uploadDetails.assetFiles[i].name) === 'document'
) {
data.animation_url = `ipfs://${assetUri}/${uploadDetails.assetFiles[i].name}`
}
@ -845,7 +846,8 @@ const CollectionCreationPage: NextPage = () => {
if (
getAssetType(uploadDetails.assetFiles[0].name) === 'audio' ||
getAssetType(uploadDetails.assetFiles[0].name) === 'video' ||
getAssetType(uploadDetails.assetFiles[0].name) === 'html'
getAssetType(uploadDetails.assetFiles[0].name) === 'html' ||
getAssetType(uploadDetails.assetFiles[0].name) === 'document'
) {
data.animation_url = `ipfs://${assetUri}/${uploadDetails.assetFiles[0].name}`
}

BIN
public/pdf.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 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' | 'html' | 'unknown'
export type AssetType = 'image' | 'audio' | 'video' | 'html' | 'document' | 'unknown'
export const getAssetType = (assetFileName: string): AssetType => {
const assetType = assetFileName?.toLowerCase().split('.').pop() || 'unknown'
@ -9,5 +9,6 @@ export const getAssetType = (assetFileName: string): AssetType => {
if (assetType === 'mp3' || assetType === 'wav') return 'audio'
if (assetType === 'mp4') return 'video'
if (assetType === 'html') return 'html'
if (assetType === 'pdf') return 'document'
return 'unknown'
}