From 2ceeee0bbc4b02500b762493f2e12d22eb01f665 Mon Sep 17 00:00:00 2001
From: Max <shadow.iqka@qq.com>
Date: Fri, 25 Oct 2024 17:16:59 +0800
Subject: [PATCH] Optimize upload component (70%)

---
 .../edit/Upload/components/Audio.less         |  25 +++
 .../edit/Upload/components/Audio.tsx          |  81 ++++++++-
 .../edit/Upload/components/Image.less         |   7 +
 .../edit/Upload/components/Image.tsx          |  55 ++++--
 .../edit/Upload/components/UploadBtn.tsx      |  13 +-
 .../xgen/components/edit/Upload/filemap.tsx   |  26 +--
 .../xgen/components/edit/Upload/index.less    | 157 ++++++++++++------
 .../xgen/components/edit/Upload/index.tsx     |  47 +++++-
 packages/xgen/components/edit/Upload/types.ts |  12 +-
 packages/xgen/package.json                    |   1 +
 pnpm-lock.yaml                                |  38 +++++
 11 files changed, 356 insertions(+), 106 deletions(-)
 create mode 100644 packages/xgen/components/edit/Upload/components/Audio.less
 create mode 100644 packages/xgen/components/edit/Upload/components/Image.less

diff --git a/packages/xgen/components/edit/Upload/components/Audio.less b/packages/xgen/components/edit/Upload/components/Audio.less
new file mode 100644
index 00000000..f979d9f4
--- /dev/null
+++ 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
index f70c0fa9..451a31c5 100644
--- 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
new file mode 100644
index 00000000..bf43d240
--- /dev/null
+++ 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
index ba8b3aad..1459a205 100644
--- 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
index 7df0fd4c..7e3771e8 100644
--- 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
index 11185f9d..cb7077b5 100644
--- 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
-}
diff --git a/packages/xgen/components/edit/Upload/index.less b/packages/xgen/components/edit/Upload/index.less
index a1d6224c..36c7da31 100644
--- a/packages/xgen/components/edit/Upload/index.less
+++ b/packages/xgen/components/edit/Upload/index.less
@@ -15,7 +15,8 @@
 
 				.xgen-upload-select-picture-card {
 					min-height: @min_height;
-					width: @width;
+					min-width: @min_width;
+					width: auto;
 					height: auto;
 					display: inline-flex;
 					align-items: center;
@@ -38,43 +39,35 @@
 
 	&.video {
 		:global {
-			@min_width: 160px;
-			@min_height: 90px;
-			@width: 160px;
-			@height: 100px;
+			@min_width: 240px;
+			@min_height: 135px;
+			@width: 240px;
+			@height: 135px;
 
 			.form_item_upload_wrap {
 				padding-top: 11px;
 				padding-left: 10px;
-
-				&.custom {
-					@image_size: unset;
-					.xgen-upload-select-picture-card {
-						min-width: @min_width;
-						min-height: @min_height;
-						width: @width;
-						height: @height;
-					}
-
-					.xgen-upload-list-picture-card-container {
-						min-width: @min_width;
-						min-height: @min_height;
-						width: @image_size;
-						height: @height;
-					}
-				}
+				padding-right: 10px;
 
 				.xgen-upload-select-picture-card {
-					width: @width;
-					height: @height;
+					min-height: @min_height;
+					min-width: @min_width;
+					width: auto;
+					height: auto;
 					display: inline-flex;
 					align-items: center;
 					justify-content: center;
 				}
 
 				.xgen-upload-list-picture-card-container {
-					width: @width;
-					height: @height;
+					min-height: @min_height;
+					min-width: @min_width;
+					width: auto;
+					height: auto;
+					.image {
+						max-width: 100%;
+						object-fit: cover;
+					}
 				}
 			}
 		}
@@ -83,45 +76,34 @@
 	&.file,
 	&.audio {
 		:global {
-			@min_width: 160px;
-			@min_height: 36px;
-			@width: 150px;
-			@height: 36px;
-
+			@min_width: 240px;
+			@min_height: 52px;
+			@width: 240px;
+			@height: 52px;
 			.form_item_upload_wrap {
 				padding-top: 11px;
 				padding-left: 10px;
-
-				&.custom {
-					@image_size: unset;
-					@min_image_size: 100px;
-
-					.xgen-upload-select-picture-card {
-						min-width: @min_width;
-						min-height: @min_height;
-						width: @width;
-						height: @height;
-					}
-
-					.xgen-upload-list-picture-card-container {
-						min-width: @min_width;
-						min-height: @min_height;
-						width: @width;
-						height: @height;
-					}
-				}
+				padding-right: 10px;
 
 				.xgen-upload-select-picture-card {
-					width: @width;
-					height: @height;
+					min-height: @min_height;
+					min-width: @min_width;
+					width: auto;
+					height: auto;
 					display: inline-flex;
 					align-items: center;
 					justify-content: center;
 				}
 
 				.xgen-upload-list-picture-card-container {
-					width: @width;
-					height: @height;
+					min-height: @min_height;
+					min-width: @min_width;
+					width: auto;
+					height: auto;
+					.image {
+						max-width: 100%;
+						object-fit: cover;
+					}
 				}
 			}
 		}
@@ -129,10 +111,46 @@
 
 	:global {
 		.upload_custom_wrap {
+			.toolbar {
+				position: absolute;
+				display: none;
+				right: 0px;
+				bottom: -40px;
+				align-items: center;
+				justify-content: end;
+				height: 40px;
+				padding: 0 6px;
+				width: auto;
+				color: var(--color_title);
+				background: var(--color_bg_nav);
+				border-bottom-right-radius: 6px;
+				border-bottom-left-radius: 6px;
+
+				.toolbar-button {
+					cursor: pointer;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					color: var(--color_title);
+					width: 30px;
+					height: 40px;
+
+					&:hover {
+						color: var(--color_main);
+						transform: scale(1.05);
+						transition: transform 0.2s ease-in;
+					}
+				}
+			}
+
 			&:hover {
 				.icon_delete {
 					display: flex;
 				}
+
+				.icon_preview {
+					display: flex;
+				}
 			}
 
 			.video {
@@ -142,6 +160,32 @@
 				object-fit: fill;
 			}
 
+			.icon_preview {
+				left: calc(50% - 13.5px);
+				top: calc(50% - 13.5px);
+				z-index: 1;
+				display: none;
+				width: 27px;
+				height: 27px;
+				border-radius: 6px;
+				background-color: white;
+				color: black;
+				cursor: pointer;
+
+				&:hover {
+					background-color: var(--color_title);
+
+					.icon {
+						color: white;
+					}
+				}
+
+				.icon {
+					color: var(--color_title);
+					font-size: 15px;
+				}
+			}
+
 			.icon_delete {
 				right: -1px;
 				bottom: -1px;
@@ -184,6 +228,7 @@
 			.btn_upload_wrap {
 				display: flex;
 				flex-direction: column;
+				color: var(--color_placeholder);
 
 				.desc {
 					margin-top: 6px;
@@ -204,6 +249,10 @@
 				}
 			}
 
+			.btn_upload_wrap:hover {
+				color: var(--color_title);
+			}
+
 			.xgen-upload-list-picture .xgen-upload-list-item,
 			.xgen-upload-list-picture-card .xgen-upload-list-item {
 				overflow: hidden;
diff --git a/packages/xgen/components/edit/Upload/index.tsx b/packages/xgen/components/edit/Upload/index.tsx
index 419106f2..f62a6434 100644
--- a/packages/xgen/components/edit/Upload/index.tsx
+++ b/packages/xgen/components/edit/Upload/index.tsx
@@ -6,7 +6,6 @@ import { useMemo } from 'react'
 import { Item } from '@/components'
 import { getToken } from '@/knife'
 
-import Image from './components/Image'
 import UploadBtn from './components/UploadBtn'
 import filemap from './filemap'
 import useList from './hooks/useList'
@@ -16,7 +15,7 @@ import handleFileList from './utils/handleFileList'
 import { getLocale } from '@umijs/max'
 
 import type { UploadProps } from 'antd'
-import type { IProps, CustomProps, IPropsUploadBtn, PreviewProps } from './types'
+import type { IProps, CustomProps, IPropsUploadBtn, PreviewProps, AllowedFileType } from './types'
 
 const Custom = window.$app.memo((props: CustomProps) => {
 	const locale = getLocale()
@@ -55,15 +54,19 @@ const Custom = window.$app.memo((props: CustomProps) => {
 		onChange
 	}
 
-	const preview_props: PreviewProps = { size: previewSize || imageSize || undefined }
+	// The preview props for the custom render
+	const size = fmtSize(previewSize || imageSize, filetype)
+	const preview_props: PreviewProps = { size: size }
 	props_upload['itemRender'] = (_, file, fileList, { remove }) => {
 		return filemap[filetype].preview(preview_props, file, remove)
 	}
 
+	// Compute the props for the upload button
 	const props_upload_btn: IPropsUploadBtn = {
 		length: list.length,
 		filetype,
 		maxCount,
+		size: size,
 		placeholder:
 			props.placeholder || filemap[filetype].placeholder[locale] || filemap['file'].placeholder['en-US'],
 		placeholderIcon:
@@ -77,6 +80,44 @@ const Custom = window.$app.memo((props: CustomProps) => {
 	)
 })
 
+/**
+ * Parse the size for the preview
+ * @param size
+ * @returns
+ */
+const fmtSize = (size: PreviewProps['size'], filetype: AllowedFileType): PreviewProps['size'] => {
+	const defaultSizes: Record<AllowedFileType, PreviewProps['size']> = {
+		image: { width: '90px', height: '90px', ratio: 1 },
+		video: { width: '240px', height: '135px', ratio: 1 },
+		file: { width: '240px', height: '52px', ratio: 1 },
+		audio: { width: '240px', height: '52px', ratio: 1 }
+	}
+
+	const defaultSize: PreviewProps['size'] = {
+		width: size?.width || defaultSizes[filetype]?.width || '90px',
+		height: size?.height || defaultSizes[filetype]?.height || '90px',
+		ratio: size?.ratio || defaultSizes[filetype]?.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 {
+		width: typeof defaultSize.width == 'number' ? `${defaultSize.width}px` : defaultSize.width,
+		height: typeof defaultSize.height == 'number' ? `${defaultSize.height}px` : defaultSize.height,
+		ratio: defaultSize.ratio
+	}
+}
+
 const Index = (props: IProps) => {
 	const { __bind, __name, itemProps, ...rest_props } = props
 
diff --git a/packages/xgen/components/edit/Upload/types.ts b/packages/xgen/components/edit/Upload/types.ts
index 81ce5a0a..2a64b143 100644
--- a/packages/xgen/components/edit/Upload/types.ts
+++ b/packages/xgen/components/edit/Upload/types.ts
@@ -4,12 +4,14 @@ import type { Component } from '@/types'
 
 interface CommonProps {
 	value: Array<string>
-	filetype: 'image' | 'file' | 'video' | 'audio'
+	filetype: AllowedFileType
 	desc?: string
 	imageSize?: { width?: string | number; height?: string | number; ratio?: number } // will be deprecated, use previewSize instead
 	previewSize?: { width?: string | number; height?: string | number; ratio?: number }
 }
 
+export type AllowedFileType = 'image' | 'file' | 'video' | 'audio'
+
 export interface Storage {
 	[key: string]: any
 }
@@ -47,13 +49,10 @@ export interface FileType {
 
 export interface IPropsCustomRender {
 	file: UploadFile<string>
-	remove: () => void
-}
-
-export interface IPropsCustomImage extends IPropsCustomRender {
-	imageSize: CommonProps['imageSize']
 	appRoot?: boolean
 	storage?: Storage // storage option for the upload to the storage server directly (e.g. firebase, s3, etc)
+	preivewSize: CommonProps['previewSize']
+	remove: () => void
 }
 
 export interface IPropsUploadBtn {
@@ -62,6 +61,7 @@ export interface IPropsUploadBtn {
 	maxCount: IProps['maxCount']
 	placeholder: CustomProps['placeholder']
 	placeholderIcon: CustomProps['placeholderIcon']
+	size: CommonProps['previewSize']
 }
 
 export interface PreviewProps {
diff --git a/packages/xgen/package.json b/packages/xgen/package.json
index 515677a6..21cafb96 100644
--- a/packages/xgen/package.json
+++ b/packages/xgen/package.json
@@ -40,6 +40,7 @@
             "@mdx-js/react": "^2.3.0",
             "@types/js-yaml": "^4.0.9",
             "@umijs/max": "4.0.68",
+            "@vidstack/react": "^1.12.12",
             "@wangeditor/editor": "^5.1.23",
             "@wangeditor/editor-for-react": "^1.0.6",
             "@yaoapp/actionflow": "workspace:*",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 01a14f5d..cfe1747b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -277,6 +277,9 @@ importers:
       '@umijs/max':
         specifier: 4.0.68
         version: 4.0.68(@babel/core@7.22.5)(@types/node@18.11.18)(@types/react-dom@18.0.10)(@types/react@18.0.27)(dva@2.5.0-beta.2)(postcss@8.4.24)(prettier@2.8.8)(prop-types@15.8.1)(rc-field-form@1.38.2)(react-dom@18.2.0)(react@18.2.0)(styled-components@5.3.11)(typescript@4.9.5)(webpack@5.86.0)
+      '@vidstack/react':
+        specifier: ^1.12.12
+        version: 1.12.12(@types/react@18.0.27)(react@18.2.0)
       '@wangeditor/editor':
         specifier: ^5.1.23
         version: 5.1.23
@@ -3940,12 +3943,25 @@ packages:
     resolution: {integrity: sha512-jktYRmZwmau63adUG3GKOAVCofBXkk55S/zQ94XOorAHhwqFIOFAy1rSp2N0Wp6/tGbe9V3u/ExlGZypyY17rg==}
     dev: false
 
+  /@floating-ui/core@1.6.8:
+    resolution: {integrity: sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==}
+    dependencies:
+      '@floating-ui/utils': 0.2.8
+    dev: false
+
   /@floating-ui/dom@0.4.5:
     resolution: {integrity: sha512-b+prvQgJt8pieaKYMSJBXHxX/DYwdLsAWxKYqnO5dO2V4oo/TYBZJAUQCVNjTWWsrs6o4VDrNcP9+E70HAhJdw==}
     dependencies:
       '@floating-ui/core': 0.6.2
     dev: false
 
+  /@floating-ui/dom@1.6.11:
+    resolution: {integrity: sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==}
+    dependencies:
+      '@floating-ui/core': 1.6.8
+      '@floating-ui/utils': 0.2.8
+    dev: false
+
   /@floating-ui/react-dom-interactions@0.3.1(@types/react@18.0.27)(react-dom@18.1.0)(react@18.1.0):
     resolution: {integrity: sha512-tP2KEh7EHJr5hokSBHcPGojb+AorDNUf0NYfZGg/M+FsMvCOOsSEeEF0O1NDfETIzDnpbHnCs0DuvCFhSMSStg==}
     deprecated: Package renamed to @floating-ui/react
@@ -3974,6 +3990,10 @@ packages:
       - '@types/react'
     dev: false
 
+  /@floating-ui/utils@0.2.8:
+    resolution: {integrity: sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==}
+    dev: false
+
   /@formatjs/intl-displaynames@1.2.10:
     resolution: {integrity: sha512-GROA2RP6+7Ouu0WnHFF78O5XIU7pBfI19WM1qm93l6MFWibUk67nCfVCK3VAYJkLy8L8ZxjkYT11VIAfvSz8wg==}
     dependencies:
@@ -6711,6 +6731,19 @@ packages:
       nanoid: 3.3.6
     dev: false
 
+  /@vidstack/react@1.12.12(@types/react@18.0.27)(react@18.2.0):
+    resolution: {integrity: sha512-rEwCkZdp/K0FopUU76lgYJqzOZa3AGM2FumQnTPPSCP9jwShYReY9mXgl4/UP5CH3v7MkaVl5ZT67rhfjPxx9Q==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/react': ^18.0.0
+      react: ^18.0.0
+    dependencies:
+      '@floating-ui/dom': 1.6.11
+      '@types/react': 18.0.27
+      media-captions: 1.0.4
+      react: 18.2.0
+    dev: false
+
   /@vitejs/plugin-react@4.0.0(vite@4.3.1):
     resolution: {integrity: sha512-HX0XzMjL3hhOYm+0s95pb0Z7F8O81G7joUHgfDd/9J/ZZf5k4xX6QAMFkKsHFxaHlf6X7GD7+XuaZ66ULiJuhQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -13142,6 +13175,11 @@ packages:
     resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
     dev: false
 
+  /media-captions@1.0.4:
+    resolution: {integrity: sha512-cyDNmuZvvO4H27rcBq2Eudxo9IZRDCOX/I7VEyqbxsEiD2Ei7UYUhG/Sc5fvMZjmathgz3fEK7iAKqvpY+Ux1w==}
+    engines: {node: '>=16'}
+    dev: false
+
   /mem@9.0.2:
     resolution: {integrity: sha512-F2t4YIv9XQUBHt6AOJ0y7lSmP1+cY7Fm1DRh9GClTGzKST7UWLMx6ly9WZdLH/G/ppM5RL4MlQfRT71ri9t19A==}
     engines: {node: '>=12.20'}