Optimize upload component (70%)

YaoApp · Oct 25, 2024 · 2ceeee0 · 2ceeee0
1 parent 7dfa212
commit 2ceeee0
Show file tree

Hide file tree

Showing 11 changed files with 356 additions and 106 deletions.
diff --git a/packages/xgen/components/edit/Upload/components/Audio.less b/packages/xgen/components/edit/Upload/components/Audio.less
@@ -0,0 +1,25 @@
+._local {
+	:global {
+		.vds-menu-button,
+		.vds-seek-button {
+			display: none;
+		}
+
+		.vds-button {
+			color: var(--color_text);
+		}
+		.vds-play-button {
+			color: var(--color_bg);
+			background-color: var(--color_text);
+		}
+
+		.vds-title-text {
+			animation: none;
+		}
+
+		.layout {
+			background: var(--color_bg_nav);
+			padding: 11px;
+		}
+	}
+}
diff --git a/packages/xgen/components/edit/Upload/components/Audio.tsx b/packages/xgen/components/edit/Upload/components/Audio.tsx
@@ -2,16 +2,87 @@ import { getFileSrc } from '@/knife'
 import { DeleteOutlined } from '@ant-design/icons'
 
 import type { IPropsCustomRender } from '../types'
+import { useEffect, useRef, useState } from 'react'
+import { Skeleton } from 'antd'
+import { Icon } from '@/widgets'
+import { MediaPlayer, MediaProvider } from '@vidstack/react'
+import { DefaultAudioLayout, DefaultLayoutIcons, defaultLayoutIcons } from '@vidstack/react/player/layouts/default'
+
+import { useGlobal } from '@/context/app'
+import '@vidstack/react/player/styles/default/theme.css'
+import '@vidstack/react/player/styles/default/layouts/audio.css'
+import styles from './Audio.less'
+import clsx from 'clsx'
 
 const Index = (props: IPropsCustomRender) => {
-	const { file, remove } = props
+	const { file, preivewSize, remove } = props
+	const [loading, setLoading] = useState<boolean>(true)
+	const [url, setUrl] = useState<string>(file.response || '')
+	const [title, setTitle] = useState<string>(file.name)
+	const [showOpration, setShowOpration] = useState<boolean>(false)
+
+	const src = getFileSrc(url, props.appRoot)
+	useEffect(() => {
+		if (file.response) {
+			const url = getFileSrc(file.response, props.appRoot)
+			const title = url.split('name=/')[1]?.split('&')[0] || file.name
+			console.log('title', title)
+			setUrl(url)
+			setTitle(title)
+			setLoading(false)
+		}
+	}, [file.response])
+
+	const preview = () => {
+		window.open(src)
+	}
+
+	const global = useGlobal()
+	const theme = global.theme
+	const isDark = theme === 'dark'
+	const icons: DefaultLayoutIcons = {
+		...defaultLayoutIcons
+	}
 
 	return (
-		<div className='upload_custom_wrap flex relative'>
-			<div className='icon_delete absolute justify_center align_center transition_normal' onClick={remove}>
-				<DeleteOutlined className='icon'></DeleteOutlined>
+		<div
+			className={clsx([styles._local, 'upload_custom_wrap', 'flex', 'relative'])}
+			onMouseEnter={() => setShowOpration(true)}
+			onMouseLeave={() => setShowOpration(false)}
+		>
+			<div className='toolbar' style={{ display: showOpration ? 'flex' : 'none' }}>
+				<div className='toolbar-button' onClick={preview}>
+					<Icon name='icon-download' size={16}></Icon>
+				</div>
+				<div className='toolbar-button' onClick={remove}>
+					<Icon name='icon-trash' size={16}></Icon>
+				</div>
 			</div>
-			<video className='video' src={getFileSrc(file.response!)} controls></video>
+
+			<Skeleton
+				loading={loading || url == ''}
+				active
+				paragraph={{
+					width: preivewSize?.width || '100%'
+				}}
+			>
+				<MediaPlayer
+					style={{
+						height: preivewSize?.height || '36px',
+						width: preivewSize?.width || '100%'
+					}}
+					className={clsx([styles._local])}
+					title={title}
+					src={src + `&${file.name}`}
+				>
+					<MediaProvider />
+					<DefaultAudioLayout
+						className={clsx(['layout'])}
+						colorScheme={isDark ? 'dark' : 'light'}
+						icons={icons}
+					/>
+				</MediaPlayer>
+			</Skeleton>
 		</div>
 	)
 }

diff --git a/packages/xgen/components/edit/Upload/components/Image.less b/packages/xgen/components/edit/Upload/components/Image.less
@@ -0,0 +1,7 @@
+._local {
+	:global {
+		.image_wrap {
+			filter: 'var(--audio-filter,drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06)))';
+		}
+	}
+}
diff --git a/packages/xgen/components/edit/Upload/components/Image.tsx b/packages/xgen/components/edit/Upload/components/Image.tsx
@@ -1,14 +1,20 @@
 import { getFileSrc } from '@/knife'
 import { DeleteOutlined } from '@ant-design/icons'
 
-import type { IPropsCustomImage } from '../types'
+import type { IPropsCustomRender } from '../types'
 import { useEffect, useState } from 'react'
 import { Skeleton } from 'antd'
+import { Icon } from '@/widgets'
 
-const Index = (props: IPropsCustomImage) => {
-	const { file, imageSize, remove } = props
+import styles from './Image.less'
+import clsx from 'clsx'
+
+const Index = (props: IPropsCustomRender) => {
+	const { file, preivewSize, remove } = props
 	const [loading, setLoading] = useState<boolean>(true)
 	const [url, setUrl] = useState<string>(file.response || '')
+	const [showOpration, setShowOpration] = useState<boolean>(false)
+	const src = getFileSrc(url, props.appRoot)
 
 	useEffect(() => {
 		if (file.response) {
@@ -17,23 +23,48 @@ const Index = (props: IPropsCustomImage) => {
 		}
 	}, [file.response])
 
+	const preview = () => {
+		window.open(src)
+	}
+
 	return (
-		<div className='upload_custom_wrap flex relative'>
-			<div className='icon_delete absolute justify_center align_center transition_normal' onClick={remove}>
-				<DeleteOutlined className='icon'></DeleteOutlined>
+		<div
+			className={clsx([styles._local, 'upload_custom_wrap', 'flex', 'relative'])}
+			onMouseEnter={() => setShowOpration(true)}
+			onMouseLeave={() => setShowOpration(false)}
+		>
+			<div className='toolbar' style={{ display: showOpration ? 'flex' : 'none' }}>
+				<div className='toolbar-button' onClick={preview}>
+					<Icon name='icon-download' size={16}></Icon>
+				</div>
+				<div className='toolbar-button' onClick={remove}>
+					<Icon name='icon-trash' size={16}></Icon>
+				</div>
 			</div>
+
 			<Skeleton
 				loading={loading || url == ''}
 				active
 				paragraph={{
-					width: imageSize?.width || '100%'
+					width: preivewSize?.width || '100%'
 				}}
 			>
-				<img
-					className='image'
-					src={getFileSrc(url, props.appRoot)}
-					style={{ borderRadius: 6, objectFit: 'cover', ...imageSize }}
-				></img>
+				<div
+					style={{
+						filter: 'var(--audio-filter,drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06)))'
+					}}
+					className='image_wrap'
+				>
+					<img
+						className='image'
+						src={src}
+						style={{
+							borderRadius: 6,
+							objectFit: 'cover',
+							...preivewSize
+						}}
+					></img>
+				</div>
 			</Skeleton>
 		</div>
 	)

diff --git a/packages/xgen/components/edit/Upload/components/UploadBtn.tsx b/packages/xgen/components/edit/Upload/components/UploadBtn.tsx
@@ -3,13 +3,22 @@ import type { IPropsUploadBtn } from '../types'
 import { Icon } from '@/widgets'
 
 const Index = (props: IPropsUploadBtn) => {
-	const { filetype, placeholder, placeholderIcon } = props
+	const { filetype, placeholder, placeholderIcon, size } = props
 	const iconProps = {
 		name: typeof placeholderIcon === 'string' ? placeholderIcon : placeholderIcon?.name || 'cloud-upload',
 		size: typeof placeholderIcon === 'string' ? 14 : placeholderIcon?.size || 14
 	}
+
 	return (
-		<div className={clsx(['btn_upload_wrap flex align_center cursor_point', filetype])}>
+		<div
+			className={clsx(['btn_upload_wrap flex align_center justify_center cursor_point', filetype])}
+			style={{
+				width: size?.width || '90px',
+				height: size?.height || '90px',
+				minWidth: size?.width || '90px',
+				minHeight: size?.height || '90px'
+			}}
+		>
 			<Icon {...iconProps} />
 			<span className='desc'>{placeholder}</span>
 		</div>

diff --git a/packages/xgen/components/edit/Upload/filemap.tsx b/packages/xgen/components/edit/Upload/filemap.tsx
@@ -15,7 +15,7 @@ export default {
 		},
 		placeholderIcon: 'icon-upload',
 		preview: (props: PreviewProps, file: UploadFile<string>, remove: () => void) => {
-			return <Image file={file} imageSize={getSize(props.size)} remove={remove} />
+			return <Image file={file} preivewSize={props.size} remove={remove} />
 		}
 	},
 
@@ -28,7 +28,7 @@ export default {
 		},
 		placeholderIcon: 'icon-upload',
 		preview: (props: PreviewProps, file: UploadFile<string>, remove: () => void) => {
-			return <div>Image</div>
+			return <Audio file={file} preivewSize={props.size} remove={remove} />
 		}
 	},
 
@@ -58,25 +58,3 @@ export default {
 		}
 	}
 } as FileType
-
-function getSize(size: PreviewProps['size']): PreviewProps['size'] {
-	const defaultSize: PreviewProps['size'] = {
-		width: size?.width || '90px',
-		height: size?.height || '90px',
-		ratio: size?.ratio || 1
-	}
-
-	if (defaultSize.ratio && defaultSize.ratio != 1) {
-		const width = parseInt(defaultSize.width as string)
-		const height = parseInt(defaultSize.height as string)
-		if (!width && !height) {
-			defaultSize.width = '100%'
-			defaultSize.height = `${100 * defaultSize.ratio}%`
-		}
-		if (width) {
-			defaultSize.width = `${width * defaultSize.ratio}px`
-		} else if (height) defaultSize.height = `${width * defaultSize.ratio}px`
-	}
-
-	return defaultSize
-}