Preview & upload support for audio & video files (#14)
* Accept audio & video files for upload * Rename image related variables * Implement getAssetType util * Preview & upload support for video files * Preview & upload support for audio files * Preview update for audio files * New look for audio previews on asset list * Remove extra refs Co-authored-by: findolor <anakisci@gmail.com>
This commit is contained in:
Serkan Reis
GitHub
parent
b4b549459c
commit
37f9d56d49
@ -1,4 +1,7 @@
|
||||
/* eslint-disable eslint-comments/disable-enable-pair */
|
||||
/* eslint-disable jsx-a11y/media-has-caption */
|
||||
import type { ReactNode } from 'react'
|
||||
import { getAssetType } from 'utils/getAssetType'
|
||||
|
||||
export interface MetadataFormGroupProps {
|
||||
title: string
|
||||
@ -19,7 +22,27 @@ export const MetadataFormGroup = (props: MetadataFormGroupProps) => {
|
||||
<div>
|
||||
{relatedAsset && (
|
||||
<div className="flex flex-row items-center mt-2 mr-4 border-2 border-dashed">
|
||||
{getAssetType(relatedAsset.name) === 'audio' && (
|
||||
<audio
|
||||
controls
|
||||
id="audio"
|
||||
onMouseEnter={(e) => e.currentTarget.play()}
|
||||
onMouseLeave={(e) => e.currentTarget.pause()}
|
||||
src={URL.createObjectURL(relatedAsset)}
|
||||
/>
|
||||
)}
|
||||
{getAssetType(relatedAsset.name) === 'video' && (
|
||||
<video
|
||||
controls
|
||||
id="video"
|
||||
onMouseEnter={(e) => e.currentTarget.play()}
|
||||
onMouseLeave={(e) => e.currentTarget.pause()}
|
||||
src={URL.createObjectURL(relatedAsset)}
|
||||
/>
|
||||
)}
|
||||
{getAssetType(relatedAsset.name) === 'image' && (
|
||||
<img alt="preview" src={URL.createObjectURL(relatedAsset)} />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
/* eslint-disable eslint-comments/disable-enable-pair */
|
||||
/* eslint-disable @typescript-eslint/no-unnecessary-condition */
|
||||
/* eslint-disable @typescript-eslint/no-unsafe-call */
|
||||
/* eslint-disable @typescript-eslint/restrict-template-expressions */
|
||||
import { useMetadataAttributesState } from 'components/forms/MetadataAttributes.hooks'
|
||||
@ -11,7 +12,7 @@ import { MetadataAttributes } from './forms/MetadataAttributes'
|
||||
import { MetadataFormGroup } from './MetadataFormGroup'
|
||||
|
||||
export interface MetadataModalProps {
|
||||
imageFile: File
|
||||
assetFile: File
|
||||
metadataFile: File
|
||||
updateMetadata: (metadataFile: File) => void
|
||||
updatedMetadataFile: File
|
||||
@ -114,8 +115,8 @@ export const MetadataModal = (props: MetadataModalProps) => {
|
||||
htmlFor="temp"
|
||||
>
|
||||
<MetadataFormGroup
|
||||
relatedAsset={props.imageFile}
|
||||
subtitle={`Asset name: ${props.imageFile?.name}`}
|
||||
relatedAsset={props.assetFile}
|
||||
subtitle={`Asset filename: ${props.assetFile?.name}`}
|
||||
title="Update Metadata"
|
||||
>
|
||||
<TextInput {...nameState} onChange={(e) => nameState.onChange(e.target.value)} />
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
/* eslint-disable eslint-comments/disable-enable-pair */
|
||||
|
||||
/* eslint-disable @typescript-eslint/restrict-template-expressions */
|
||||
/* eslint-disable func-names */
|
||||
|
||||
@ -13,19 +14,21 @@ import { setBaseTokenUri, setImage, useCollectionStore } from 'contexts/collecti
|
||||
import type { NextPage } from 'next'
|
||||
import { NextSeo } from 'next-seo'
|
||||
import type { ChangeEvent } from 'react'
|
||||
import { useRef, useState } from 'react'
|
||||
import toast from 'react-hot-toast'
|
||||
import { useState } from 'react'
|
||||
import { toast } from 'react-hot-toast'
|
||||
import type { UploadServiceType } from 'services/upload'
|
||||
import { upload } from 'services/upload'
|
||||
import { withMetadata } from 'utils/layout'
|
||||
import { links } from 'utils/links'
|
||||
import { naturalCompare } from 'utils/sort'
|
||||
|
||||
import { getAssetType } from '../../utils/getAssetType'
|
||||
|
||||
type UploadMethod = 'new' | 'existing'
|
||||
|
||||
const UploadPage: NextPage = () => {
|
||||
const baseTokenURI = useCollectionStore().base_token_uri
|
||||
const [imageFilesArray, setImageFilesArray] = useState<File[]>([])
|
||||
const [assetFilesArray, setAssetFilesArray] = useState<File[]>([])
|
||||
const [metadataFilesArray, setMetadataFilesArray] = useState<File[]>([])
|
||||
const [updatedMetadataFilesArray, setUpdatedMetadataFilesArray] = useState<File[]>([])
|
||||
const [uploadMethod, setUploadMethod] = useState<UploadMethod>('new')
|
||||
@ -39,8 +42,6 @@ const UploadPage: NextPage = () => {
|
||||
const [pinataSecretKey, setPinataSecretKey] = useState(
|
||||
'9d6f42dc01eaab15f52eac8f36cc4f0ee4184944cb3cdbcda229d06ecf877ee7',
|
||||
)
|
||||
const imageFilesRef = useRef<HTMLInputElement>(null)
|
||||
const metadataFilesRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
const handleChangeBaseTokenUri = (event: { target: { value: React.SetStateAction<string> } }) => {
|
||||
setBaseTokenUri(event.target.value.toString())
|
||||
@ -50,8 +51,8 @@ const UploadPage: NextPage = () => {
|
||||
setImage(event.target.value.toString())
|
||||
}
|
||||
|
||||
const selectImages = (event: ChangeEvent<HTMLInputElement>) => {
|
||||
setImageFilesArray([])
|
||||
const selectAssets = (event: ChangeEvent<HTMLInputElement>) => {
|
||||
setAssetFilesArray([])
|
||||
console.log(event.target.files)
|
||||
let reader: FileReader
|
||||
if (event.target.files === null) return
|
||||
@ -60,13 +61,13 @@ const UploadPage: NextPage = () => {
|
||||
reader.onload = function (e) {
|
||||
if (!e.target?.result) return toast.error('Error parsing file.')
|
||||
if (!event.target.files) return toast.error('No files selected.')
|
||||
const imageFile = new File([e.target.result], event.target.files[i].name, { type: 'image/jpg' })
|
||||
setImageFilesArray((prev) => [...prev, imageFile])
|
||||
const assetFile = new File([e.target.result], event.target.files[i].name, { type: 'image/jpg' })
|
||||
setAssetFilesArray((prev) => [...prev, assetFile])
|
||||
}
|
||||
if (!event.target.files) return toast.error('No file selected.')
|
||||
reader.readAsArrayBuffer(event.target.files[i])
|
||||
reader.onloadend = function (e) {
|
||||
setImageFilesArray((prev) => prev.sort((a, b) => naturalCompare(a.name, b.name)))
|
||||
setAssetFilesArray((prev) => prev.sort((a, b) => naturalCompare(a.name, b.name)))
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -74,7 +75,7 @@ const UploadPage: NextPage = () => {
|
||||
const selectMetadata = (event: ChangeEvent<HTMLInputElement>) => {
|
||||
setMetadataFilesArray([])
|
||||
setUpdatedMetadataFilesArray([])
|
||||
console.log(imageFilesArray)
|
||||
console.log(assetFilesArray)
|
||||
console.log(event.target.files)
|
||||
let reader: FileReader
|
||||
if (event.target.files === null) return toast.error('No files selected.')
|
||||
@ -99,31 +100,31 @@ const UploadPage: NextPage = () => {
|
||||
const updateMetadata = async () => {
|
||||
const metadataFileNames = metadataFilesArray.map((file) => file.name)
|
||||
console.log(metadataFileNames)
|
||||
const imageFileNames = imageFilesArray.map((file) => file.name.substring(0, file.name.lastIndexOf('.')))
|
||||
console.log(imageFileNames)
|
||||
const assetFileNames = assetFilesArray.map((file) => file.name.substring(0, file.name.lastIndexOf('.')))
|
||||
console.log(assetFileNames)
|
||||
//compare the two arrays to make sure they are the same
|
||||
const areArraysEqual = metadataFileNames.every((val, index) => val === imageFileNames[index])
|
||||
const areArraysEqual = metadataFileNames.every((val, index) => val === assetFileNames[index])
|
||||
if (!areArraysEqual) {
|
||||
return toast.error('Asset and metadata file names do not match.')
|
||||
}
|
||||
|
||||
console.log(imageFilesArray)
|
||||
const imageURI = await upload(
|
||||
imageFilesArray,
|
||||
console.log(assetFilesArray)
|
||||
const assetURI = await upload(
|
||||
assetFilesArray,
|
||||
uploadService,
|
||||
'images',
|
||||
'assets',
|
||||
nftStorageApiKey,
|
||||
pinataApiKey,
|
||||
pinataSecretKey,
|
||||
)
|
||||
console.log(imageURI)
|
||||
console.log(assetURI)
|
||||
setUpdatedMetadataFilesArray([])
|
||||
let reader: FileReader
|
||||
for (let i = 0; i < metadataFilesArray.length; i++) {
|
||||
reader = new FileReader()
|
||||
reader.onload = function (e) {
|
||||
const metadataJSON = JSON.parse(e.target?.result as string)
|
||||
metadataJSON.image = `ipfs://${imageURI}/${imageFilesArray[i].name}`
|
||||
metadataJSON.image = `ipfs://${assetURI}/${assetFilesArray[i].name}`
|
||||
const metadataFileBlob = new Blob([JSON.stringify(metadataJSON)], {
|
||||
type: 'application/json',
|
||||
})
|
||||
@ -342,9 +343,9 @@ const UploadPage: NextPage = () => {
|
||||
<div>
|
||||
<label
|
||||
className="block mt-5 mr-1 mb-1 ml-8 w-full font-bold text-white dark:text-gray-300"
|
||||
htmlFor="imageFiles"
|
||||
htmlFor="assetFiles"
|
||||
>
|
||||
Image File Selection
|
||||
Asset Selection
|
||||
</label>
|
||||
<div
|
||||
className={clsx(
|
||||
@ -353,21 +354,20 @@ const UploadPage: NextPage = () => {
|
||||
)}
|
||||
>
|
||||
<input
|
||||
accept="image/*"
|
||||
accept="image/*, audio/*, video/*"
|
||||
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',
|
||||
)}
|
||||
id="imageFiles"
|
||||
id="assetFiles"
|
||||
multiple
|
||||
onChange={selectImages}
|
||||
ref={imageFilesRef}
|
||||
onChange={selectAssets}
|
||||
type="file"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{imageFilesArray.length > 0 && (
|
||||
{assetFilesArray.length > 0 && (
|
||||
<div>
|
||||
<label
|
||||
className="block mt-5 mr-1 mb-1 ml-8 w-full font-bold text-white dark:text-gray-300"
|
||||
@ -390,7 +390,6 @@ const UploadPage: NextPage = () => {
|
||||
id="metadataFiles"
|
||||
multiple
|
||||
onChange={selectMetadata}
|
||||
ref={metadataFilesRef}
|
||||
type="file"
|
||||
/>
|
||||
</div>
|
||||
@ -398,9 +397,9 @@ const UploadPage: NextPage = () => {
|
||||
)}
|
||||
<Conditional
|
||||
test={
|
||||
imageFilesArray.length > 0 &&
|
||||
assetFilesArray.length > 0 &&
|
||||
metadataFilesArray.length > 0 &&
|
||||
imageFilesArray.length !== metadataFilesArray.length
|
||||
assetFilesArray.length !== metadataFilesArray.length
|
||||
}
|
||||
>
|
||||
<Alert className="mt-4 ml-8 w-3/4" type="warning">
|
||||
@ -411,7 +410,7 @@ const UploadPage: NextPage = () => {
|
||||
<div className="mt-5 ml-8">
|
||||
<Button
|
||||
className="mb-8 w-[120px]"
|
||||
isDisabled={imageFilesArray.length === 0 || imageFilesArray.length !== metadataFilesArray.length}
|
||||
isDisabled={assetFilesArray.length === 0 || assetFilesArray.length !== metadataFilesArray.length}
|
||||
isWide
|
||||
onClick={updateMetadata}
|
||||
variant="solid"
|
||||
@ -420,19 +419,19 @@ const UploadPage: NextPage = () => {
|
||||
</Button>
|
||||
</div>
|
||||
<MetadataModal
|
||||
imageFile={imageFilesArray[metadataFileArrayIndex]}
|
||||
assetFile={assetFilesArray[metadataFileArrayIndex]}
|
||||
metadataFile={metadataFilesArray[metadataFileArrayIndex]}
|
||||
refresher={refreshMetadata}
|
||||
updateMetadata={updateMetadataFileArray}
|
||||
updatedMetadataFile={updatedMetadataFilesArray[metadataFileArrayIndex]}
|
||||
/>
|
||||
</div>
|
||||
{imageFilesArray.length > 0 && (
|
||||
{assetFilesArray.length > 0 && (
|
||||
<div className="mt-2 mr-10 ml-20 w-4/5 h-96 border-2 border-dashed carousel carousel-vertical rounded-box">
|
||||
{imageFilesArray.map((imageSource, index) => (
|
||||
{assetFilesArray.map((assetSource, index) => (
|
||||
<div key={`carousel-item-${index}`} className="w-full carousel-item h-1/8">
|
||||
<div className="grid grid-cols-4 col-auto">
|
||||
<Conditional test={imageFilesArray.length > 4 * index}>
|
||||
<Conditional test={assetFilesArray.length > 4 * index}>
|
||||
<button
|
||||
key={4 * index}
|
||||
className="relative p-0 w-full h-full bg-transparent hover:bg-transparent border-0 btn modal-button"
|
||||
@ -445,16 +444,41 @@ const UploadPage: NextPage = () => {
|
||||
className="relative p-0 w-full h-full bg-transparent hover:bg-transparent border-0 btn modal-button"
|
||||
htmlFor="my-modal-4"
|
||||
>
|
||||
{getAssetType(assetFilesArray[4 * index]?.name) === 'audio' && (
|
||||
<div className="flex relative flex-col items-center mt-2 ml-2">
|
||||
<img
|
||||
key={`audio-${4 * index}`}
|
||||
alt="audio_icon"
|
||||
className="relative mb-2 ml-1 w-6 h-6 thumbnail"
|
||||
src="/audio.png"
|
||||
/>
|
||||
<span className="relative self-center">{assetFilesArray[4 * index]?.name}</span>
|
||||
</div>
|
||||
)}
|
||||
{getAssetType(assetFilesArray[4 * index]?.name) === 'video' && (
|
||||
<video
|
||||
id="video"
|
||||
muted
|
||||
onMouseEnter={(e) => e.currentTarget.play()}
|
||||
onMouseLeave={(e) => e.currentTarget.pause()}
|
||||
src={URL.createObjectURL(assetFilesArray[4 * index])}
|
||||
/>
|
||||
)}
|
||||
|
||||
{getAssetType(assetFilesArray[4 * index]?.name) === 'image' && (
|
||||
<img
|
||||
key={`image-${4 * index}`}
|
||||
alt="asset"
|
||||
className="px-1 my-1 thumbnail"
|
||||
src={imageFilesArray[4 * index] ? URL.createObjectURL(imageFilesArray[4 * index]) : ''}
|
||||
src={
|
||||
assetFilesArray[4 * index] ? URL.createObjectURL(assetFilesArray[4 * index]) : ''
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</label>
|
||||
</button>
|
||||
</Conditional>
|
||||
<Conditional test={imageFilesArray.length > 4 * index + 1}>
|
||||
<Conditional test={assetFilesArray.length > 4 * index + 1}>
|
||||
<button
|
||||
key={4 * index + 1}
|
||||
className="relative p-0 w-full h-full bg-transparent hover:bg-transparent border-0 btn modal-button"
|
||||
@ -467,20 +491,43 @@ const UploadPage: NextPage = () => {
|
||||
className="relative p-0 w-full h-full bg-transparent hover:bg-transparent border-0 btn modal-button"
|
||||
htmlFor="my-modal-4"
|
||||
>
|
||||
{getAssetType(assetFilesArray[4 * index + 1]?.name) === 'audio' && (
|
||||
<div className="flex relative flex-col items-center mt-2 ml-2">
|
||||
<img
|
||||
key={`audio-${4 * index + 1}`}
|
||||
alt="audio_icon"
|
||||
className="relative mb-2 ml-1 w-6 h-6 thumbnail"
|
||||
src="/audio.png"
|
||||
/>
|
||||
<span className="relative self-center">{assetFilesArray[4 * index + 1]?.name}</span>
|
||||
</div>
|
||||
)}
|
||||
{getAssetType(assetFilesArray[4 * index + 1]?.name) === 'video' && (
|
||||
<video
|
||||
id="video"
|
||||
muted
|
||||
onMouseEnter={(e) => e.currentTarget.play()}
|
||||
onMouseLeave={(e) => e.currentTarget.pause()}
|
||||
src={URL.createObjectURL(assetFilesArray[4 * index + 1])}
|
||||
/>
|
||||
)}
|
||||
|
||||
{getAssetType(assetFilesArray[4 * index + 1]?.name) === 'image' && (
|
||||
<img
|
||||
key={`image-${4 * index + 1}`}
|
||||
alt="asset"
|
||||
className="px-1 my-1 thumbnail"
|
||||
src={
|
||||
imageFilesArray[4 * index + 1]
|
||||
? URL.createObjectURL(imageFilesArray[4 * index + 1])
|
||||
assetFilesArray[4 * index + 1]
|
||||
? URL.createObjectURL(assetFilesArray[4 * index + 1])
|
||||
: ''
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</label>
|
||||
</button>
|
||||
</Conditional>
|
||||
<Conditional test={imageFilesArray.length > 4 * index + 2}>
|
||||
<Conditional test={assetFilesArray.length > 4 * index + 2}>
|
||||
<button
|
||||
key={4 * index + 2}
|
||||
className="relative p-0 w-full h-full bg-transparent hover:bg-transparent border-0 btn modal-button"
|
||||
@ -493,20 +540,43 @@ const UploadPage: NextPage = () => {
|
||||
className="relative p-0 w-full h-full bg-transparent hover:bg-transparent border-0 btn modal-button"
|
||||
htmlFor="my-modal-4"
|
||||
>
|
||||
{getAssetType(assetFilesArray[4 * index + 2]?.name) === 'audio' && (
|
||||
<div className="flex relative flex-col items-center mt-2 ml-2">
|
||||
<img
|
||||
key={`audio-${4 * index + 2}`}
|
||||
alt="audio_icon"
|
||||
className="relative mb-2 ml-1 w-6 h-6 thumbnail"
|
||||
src="/audio.png"
|
||||
/>
|
||||
<span className="relative self-center">{assetFilesArray[4 * index + 2]?.name}</span>
|
||||
</div>
|
||||
)}
|
||||
{getAssetType(assetFilesArray[4 * index + 2]?.name) === 'video' && (
|
||||
<video
|
||||
id="video"
|
||||
muted
|
||||
onMouseEnter={(e) => e.currentTarget.play()}
|
||||
onMouseLeave={(e) => e.currentTarget.pause()}
|
||||
src={URL.createObjectURL(assetFilesArray[4 * index + 2])}
|
||||
/>
|
||||
)}
|
||||
|
||||
{getAssetType(assetFilesArray[4 * index + 2]?.name) === 'image' && (
|
||||
<img
|
||||
key={`image-${4 * index + 2}`}
|
||||
alt="asset"
|
||||
className="px-1 my-1 thumbnail"
|
||||
src={
|
||||
imageFilesArray[4 * index + 2]
|
||||
? URL.createObjectURL(imageFilesArray[4 * index + 2])
|
||||
assetFilesArray[4 * index + 2]
|
||||
? URL.createObjectURL(assetFilesArray[4 * index + 2])
|
||||
: ''
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</label>
|
||||
</button>
|
||||
</Conditional>
|
||||
<Conditional test={imageFilesArray.length > 4 * index + 3}>
|
||||
<Conditional test={assetFilesArray.length > 4 * index + 3}>
|
||||
<button
|
||||
key={4 * index + 3}
|
||||
className="relative p-0 w-full h-full bg-transparent hover:bg-transparent border-0 btn modal-button"
|
||||
@ -519,16 +589,39 @@ const UploadPage: NextPage = () => {
|
||||
className="relative p-0 w-full h-full bg-transparent hover:bg-transparent border-0 btn modal-button"
|
||||
htmlFor="my-modal-4"
|
||||
>
|
||||
{getAssetType(assetFilesArray[4 * index + 3]?.name) === 'audio' && (
|
||||
<div className="flex relative flex-col items-center mt-2 ml-2">
|
||||
<img
|
||||
key={`audio-${4 * index + 3}`}
|
||||
alt="audio_icon"
|
||||
className="relative mb-2 ml-1 w-6 h-6 thumbnail"
|
||||
src="/audio.png"
|
||||
/>
|
||||
<span className="relative self-center">{assetFilesArray[4 * index + 3]?.name}</span>
|
||||
</div>
|
||||
)}
|
||||
{getAssetType(assetFilesArray[4 * index + 3]?.name) === 'video' && (
|
||||
<video
|
||||
id="video"
|
||||
muted
|
||||
onMouseEnter={(e) => e.currentTarget.play()}
|
||||
onMouseLeave={(e) => e.currentTarget.pause()}
|
||||
src={URL.createObjectURL(assetFilesArray[4 * index + 3])}
|
||||
/>
|
||||
)}
|
||||
|
||||
{getAssetType(assetFilesArray[4 * index + 3]?.name) === 'image' && (
|
||||
<img
|
||||
key={`image-${4 * index + 3}`}
|
||||
alt={' '}
|
||||
alt="asset"
|
||||
className="px-1 my-1 thumbnail"
|
||||
src={
|
||||
imageFilesArray[4 * index + 3]
|
||||
? URL.createObjectURL(imageFilesArray[4 * index + 3])
|
||||
assetFilesArray[4 * index + 3]
|
||||
? URL.createObjectURL(assetFilesArray[4 * index + 3])
|
||||
: ''
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</label>
|
||||
</button>
|
||||
</Conditional>
|
||||
|
||||
BIN
public/audio.png
Normal file
BIN
public/audio.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
@ -4,7 +4,7 @@
|
||||
import axios from 'axios'
|
||||
import { PINATA_ENDPOINT_URL } from 'utils/constants'
|
||||
|
||||
export type UploadFileType = 'images' | 'metadata'
|
||||
export type UploadFileType = 'assets' | 'metadata'
|
||||
|
||||
export const uploadToPinata = async (
|
||||
fileArray: File[],
|
||||
|
||||
11
utils/getAssetType.ts
Normal file
11
utils/getAssetType.ts
Normal file
@ -0,0 +1,11 @@
|
||||
/* eslint-disable eslint-comments/disable-enable-pair */
|
||||
/* eslint-disable @typescript-eslint/no-unnecessary-condition */
|
||||
export type AssetType = 'image' | 'audio' | 'video' | 'unknown'
|
||||
|
||||
export const getAssetType = (assetFileName: string): AssetType => {
|
||||
const assetType = assetFileName?.split('.').pop() || 'unknown'
|
||||
if (assetType === 'png' || assetType === 'jpg' || assetType === 'jpeg') return 'image'
|
||||
if (assetType === 'mp3' || assetType === 'wav') return 'audio'
|
||||
if (assetType === 'mp4') return 'video'
|
||||
return 'unknown'
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user