@easy-editor/materials-dashboard-audio 0.0.4 → 0.0.5

package/CHANGELOG.md

@@ -1,21 +1,27 @@
-# @easy-editor/materials-dashboard-audio
-
-## 0.0.4
-
-### Patch Changes
-
-- perf: configure & datasource
-- Updated dependencies
-  - @easy-editor/materials-shared@0.0.1
-
-## 0.0.3
-
-### Patch Changes
-
-- fix: build error
-
-## 0.0.2
-
-### Patch Changes
-
-- feat: new setters
+# @easy-editor/materials-dashboard-audio
+
+## 0.0.5
+
+### Patch Changes
+
+- fix: component export error
+
+## 0.0.4
+
+### Patch Changes
+
+- perf: configure & datasource
+- Updated dependencies
+  - @easy-editor/materials-shared@0.0.1
+
+## 0.0.3
+
+### Patch Changes
+
+- fix: build error
+
+## 0.0.2
+
+### Patch Changes
+
+- feat: new setters

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easy-editor/materials-dashboard-audio",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Audio component for EasyEditor dashboard",
   "type": "module",
   "main": "dist/index.js",

package/src/component.tsx

@@ -1,222 +1,224 @@
-/**
- * Audio Component
- * 音频播放组件 - 支持数据源绑定和事件交互
- */
-
-import { useState, useRef, useEffect, useMemo, type CSSProperties } from 'react'
-import { useDataSource, type MaterialComponet } from '@easy-editor/materials-shared'
-import styles from './component.module.css'
-
-export type AudioStyle = 'custom' | 'native'
-
-export interface AudioProps extends MaterialComponet {
-  /** 音频地址（兼容旧版） */
-  src?: string
-  /** 标题 */
-  title?: string
-  /** 自动播放 */
-  autoPlay?: boolean
-  /** 循环播放 */
-  loop?: boolean
-  /** 样式类型 */
-  audioStyle?: AudioStyle
-  /** 播放速度 */
-  playbackRate?: number
-  /** 音量 (0-100) */
-  volume?: number
-  /** 点击事件 */
-  onClick?: (e: React.MouseEvent) => void
-  /** 双击事件 */
-  onDoubleClick?: (e: React.MouseEvent) => void
-  /** 鼠标进入 */
-  onMouseEnter?: (e: React.MouseEvent) => void
-  /** 鼠标离开 */
-  onMouseLeave?: (e: React.MouseEvent) => void
-  /** 播放事件 */
-  onPlay?: () => void
-  /** 暂停事件 */
-  onPause?: () => void
-  /** 结束事件 */
-  onEnded?: () => void
-}
-
-const formatTime = (seconds: number): string => {
-  const mins = Math.floor(seconds / 60)
-  const secs = Math.floor(seconds % 60)
-  return `${mins}:${secs.toString().padStart(2, '0')}`
-}
-
-export const Audio: React.FC<AudioProps> = ({
-  ref,
-  $data,
-  __dataSource,
-  src: staticSrc = '',
-  title = '音频文件',
-  autoPlay = false,
-  loop = false,
-  audioStyle = 'custom',
-  playbackRate = 1,
-  volume = 100,
-  rotation = 0,
-  opacity = 100,
-  background = 'transparent',
-  style: externalStyle,
-  onClick,
-  onDoubleClick,
-  onMouseEnter,
-  onMouseLeave,
-  onPlay,
-  onPause,
-  onEnded,
-}) => {
-  // 解析数据源
-  const dataSource = useDataSource($data, __dataSource)
-  const src = useMemo<string>(() => {
-    if (dataSource.length > 0 && typeof dataSource[0]?.src === 'string') {
-      return dataSource[0].src
-    }
-    return staticSrc
-  }, [dataSource, staticSrc])
-
-  const audioRef = useRef<HTMLAudioElement>(null)
-  const [isPlaying, setIsPlaying] = useState(false)
-  const [currentTime, setCurrentTime] = useState(0)
-  const [duration, setDuration] = useState(0)
-
-  useEffect(() => {
-    const audio = audioRef.current
-    if (!audio) {
-      return
-    }
-
-    const handleTimeUpdate = () => setCurrentTime(audio.currentTime)
-    const handleLoadedMetadata = () => setDuration(audio.duration)
-    const handleEnded = () => {
-      setIsPlaying(false)
-      onEnded?.()
-    }
-    const handlePlay = () => {
-      setIsPlaying(true)
-      onPlay?.()
-    }
-    const handlePause = () => {
-      setIsPlaying(false)
-      onPause?.()
-    }
-
-    audio.addEventListener('timeupdate', handleTimeUpdate)
-    audio.addEventListener('loadedmetadata', handleLoadedMetadata)
-    audio.addEventListener('ended', handleEnded)
-    audio.addEventListener('play', handlePlay)
-    audio.addEventListener('pause', handlePause)
-
-    return () => {
-      audio.removeEventListener('timeupdate', handleTimeUpdate)
-      audio.removeEventListener('loadedmetadata', handleLoadedMetadata)
-      audio.removeEventListener('ended', handleEnded)
-      audio.removeEventListener('play', handlePlay)
-      audio.removeEventListener('pause', handlePause)
-    }
-  }, [onEnded, onPlay, onPause])
-
-  // 更新播放速度和音量
-  useEffect(() => {
-    if (audioRef.current) {
-      audioRef.current.playbackRate = playbackRate
-      audioRef.current.volume = volume / 100
-    }
-  }, [playbackRate, volume])
-
-  const togglePlay = () => {
-    if (audioRef.current) {
-      if (isPlaying) {
-        audioRef.current.pause()
-      } else {
-        audioRef.current.play()
-      }
-    }
-  }
-
-  const handleProgressClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (audioRef.current && duration) {
-      const rect = e.currentTarget.getBoundingClientRect()
-      const percent = (e.clientX - rect.left) / rect.width
-      audioRef.current.currentTime = percent * duration
-    }
-  }
-
-  const progress = duration ? (currentTime / duration) * 100 : 0
-
-  const containerStyle: CSSProperties = {
-    transform: rotation !== 0 ? `rotate(${rotation}deg)` : undefined,
-    opacity: opacity / 100,
-    backgroundColor: background,
-    ...externalStyle,
-  }
-
-  // 原生样式
-  if (audioStyle === 'native') {
-    return (
-      <div
-        className={styles.container}
-        onClick={onClick}
-        onDoubleClick={onDoubleClick}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-        ref={ref}
-        style={containerStyle}
-      >
-        <audio autoPlay={autoPlay} className={styles.nativeAudio} controls loop={loop} ref={audioRef} src={src} />
-      </div>
-    )
-  }
-
-  // 自定义样式
-  return (
-    <div
-      className={styles.container}
-      onClick={onClick}
-      onDoubleClick={onDoubleClick}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
-      ref={ref}
-      style={containerStyle}
-    >
-      <audio autoPlay={autoPlay} loop={loop} ref={audioRef} src={src} />
-
-      <button
-        aria-label={isPlaying ? 'Pause' : 'Play'}
-        className={styles.playButton}
-        onClick={togglePlay}
-        type='button'
-      >
-        {isPlaying ? (
-          <div className={styles.pauseIcon}>
-            <div className={styles.pauseBar} />
-            <div className={styles.pauseBar} />
-          </div>
-        ) : (
-          <div className={styles.playIcon} />
-        )}
-      </button>
-
-      <div className={styles.info}>
-        <div className={styles.title}>{title}</div>
-        <div className={styles.progressContainer}>
-          <button
-            aria-label='Seek to position'
-            className={styles.progressBar}
-            // @ts-expect-error
-            onClick={handleProgressClick}
-            type='button'
-          >
-            <div className={styles.progressFill} style={{ width: `${progress}%` }} />
-          </button>
-          <span className={styles.time}>
-            {formatTime(currentTime)} / {formatTime(duration || 0)}
-          </span>
-        </div>
-      </div>
-    </div>
-  )
-}
+/**
+ * Audio Component
+ * 音频播放组件 - 支持数据源绑定和事件交互
+ */
+
+import { useState, useRef, useEffect, useMemo, type CSSProperties } from 'react'
+import { useDataSource, type MaterialComponet } from '@easy-editor/materials-shared'
+import styles from './component.module.css'
+
+export type AudioStyle = 'custom' | 'native'
+
+export interface AudioProps extends MaterialComponet {
+  /** 音频地址（兼容旧版） */
+  src?: string
+  /** 标题 */
+  title?: string
+  /** 自动播放 */
+  autoPlay?: boolean
+  /** 循环播放 */
+  loop?: boolean
+  /** 样式类型 */
+  audioStyle?: AudioStyle
+  /** 播放速度 */
+  playbackRate?: number
+  /** 音量 (0-100) */
+  volume?: number
+  /** 点击事件 */
+  onClick?: (e: React.MouseEvent) => void
+  /** 双击事件 */
+  onDoubleClick?: (e: React.MouseEvent) => void
+  /** 鼠标进入 */
+  onMouseEnter?: (e: React.MouseEvent) => void
+  /** 鼠标离开 */
+  onMouseLeave?: (e: React.MouseEvent) => void
+  /** 播放事件 */
+  onPlay?: () => void
+  /** 暂停事件 */
+  onPause?: () => void
+  /** 结束事件 */
+  onEnded?: () => void
+}
+
+const formatTime = (seconds: number): string => {
+  const mins = Math.floor(seconds / 60)
+  const secs = Math.floor(seconds % 60)
+  return `${mins}:${secs.toString().padStart(2, '0')}`
+}
+
+export const Audio: React.FC<AudioProps> = ({
+  ref,
+  $data,
+  __dataSource,
+  src: staticSrc = '',
+  title = '音频文件',
+  autoPlay = false,
+  loop = false,
+  audioStyle = 'custom',
+  playbackRate = 1,
+  volume = 100,
+  rotation = 0,
+  opacity = 100,
+  background = 'transparent',
+  style: externalStyle,
+  onClick,
+  onDoubleClick,
+  onMouseEnter,
+  onMouseLeave,
+  onPlay,
+  onPause,
+  onEnded,
+}) => {
+  // 解析数据源
+  const dataSource = useDataSource($data, __dataSource)
+  const src = useMemo<string>(() => {
+    if (dataSource.length > 0 && typeof dataSource[0]?.src === 'string') {
+      return dataSource[0].src
+    }
+    return staticSrc
+  }, [dataSource, staticSrc])
+
+  const audioRef = useRef<HTMLAudioElement>(null)
+  const [isPlaying, setIsPlaying] = useState(false)
+  const [currentTime, setCurrentTime] = useState(0)
+  const [duration, setDuration] = useState(0)
+
+  useEffect(() => {
+    const audio = audioRef.current
+    if (!audio) {
+      return
+    }
+
+    const handleTimeUpdate = () => setCurrentTime(audio.currentTime)
+    const handleLoadedMetadata = () => setDuration(audio.duration)
+    const handleEnded = () => {
+      setIsPlaying(false)
+      onEnded?.()
+    }
+    const handlePlay = () => {
+      setIsPlaying(true)
+      onPlay?.()
+    }
+    const handlePause = () => {
+      setIsPlaying(false)
+      onPause?.()
+    }
+
+    audio.addEventListener('timeupdate', handleTimeUpdate)
+    audio.addEventListener('loadedmetadata', handleLoadedMetadata)
+    audio.addEventListener('ended', handleEnded)
+    audio.addEventListener('play', handlePlay)
+    audio.addEventListener('pause', handlePause)
+
+    return () => {
+      audio.removeEventListener('timeupdate', handleTimeUpdate)
+      audio.removeEventListener('loadedmetadata', handleLoadedMetadata)
+      audio.removeEventListener('ended', handleEnded)
+      audio.removeEventListener('play', handlePlay)
+      audio.removeEventListener('pause', handlePause)
+    }
+  }, [onEnded, onPlay, onPause])
+
+  // 更新播放速度和音量
+  useEffect(() => {
+    if (audioRef.current) {
+      audioRef.current.playbackRate = playbackRate
+      audioRef.current.volume = volume / 100
+    }
+  }, [playbackRate, volume])
+
+  const togglePlay = () => {
+    if (audioRef.current) {
+      if (isPlaying) {
+        audioRef.current.pause()
+      } else {
+        audioRef.current.play()
+      }
+    }
+  }
+
+  const handleProgressClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (audioRef.current && duration) {
+      const rect = e.currentTarget.getBoundingClientRect()
+      const percent = (e.clientX - rect.left) / rect.width
+      audioRef.current.currentTime = percent * duration
+    }
+  }
+
+  const progress = duration ? (currentTime / duration) * 100 : 0
+
+  const containerStyle: CSSProperties = {
+    transform: rotation !== 0 ? `rotate(${rotation}deg)` : undefined,
+    opacity: opacity / 100,
+    backgroundColor: background,
+    ...externalStyle,
+  }
+
+  // 原生样式
+  if (audioStyle === 'native') {
+    return (
+      <div
+        className={styles.container}
+        onClick={onClick}
+        onDoubleClick={onDoubleClick}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        ref={ref}
+        style={containerStyle}
+      >
+        <audio autoPlay={autoPlay} className={styles.nativeAudio} controls loop={loop} ref={audioRef} src={src} />
+      </div>
+    )
+  }
+
+  // 自定义样式
+  return (
+    <div
+      className={styles.container}
+      onClick={onClick}
+      onDoubleClick={onDoubleClick}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      ref={ref}
+      style={containerStyle}
+    >
+      <audio autoPlay={autoPlay} loop={loop} ref={audioRef} src={src} />
+
+      <button
+        aria-label={isPlaying ? 'Pause' : 'Play'}
+        className={styles.playButton}
+        onClick={togglePlay}
+        type='button'
+      >
+        {isPlaying ? (
+          <div className={styles.pauseIcon}>
+            <div className={styles.pauseBar} />
+            <div className={styles.pauseBar} />
+          </div>
+        ) : (
+          <div className={styles.playIcon} />
+        )}
+      </button>
+
+      <div className={styles.info}>
+        <div className={styles.title}>{title}</div>
+        <div className={styles.progressContainer}>
+          <button
+            aria-label='Seek to position'
+            className={styles.progressBar}
+            // @ts-expect-error
+            onClick={handleProgressClick}
+            type='button'
+          >
+            <div className={styles.progressFill} style={{ width: `${progress}%` }} />
+          </button>
+          <span className={styles.time}>
+            {formatTime(currentTime)} / {formatTime(duration || 0)}
+          </span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Audio

package/src/meta.ts

@@ -1,26 +1,28 @@
-/**
- * Audio Meta
- * 音频组件元数据
- */
-
-import type { ComponentMetadata } from '@easy-editor/core'
-import { MaterialGroup } from '@easy-editor/materials-shared'
-import { COMPONENT_NAME, PACKAGE_NAME } from './constants'
-import { configure } from './configure'
-import { snippets } from './snippets'
-import pkg from '../package.json'
-
-export const meta: ComponentMetadata = {
-  componentName: COMPONENT_NAME,
-  title: '音频',
-  group: MaterialGroup.MEDIA,
-  devMode: 'proCode',
-  npm: {
-    package: PACKAGE_NAME,
-    version: pkg.version,
-    globalName: COMPONENT_NAME,
-    componentName: COMPONENT_NAME,
-  },
-  snippets,
-  configure,
-}
+/**
+ * Audio Meta
+ * 音频组件元数据
+ */
+
+import type { ComponentMetadata } from '@easy-editor/core'
+import { MaterialGroup } from '@easy-editor/materials-shared'
+import { COMPONENT_NAME, PACKAGE_NAME } from './constants'
+import { configure } from './configure'
+import { snippets } from './snippets'
+import pkg from '../package.json'
+
+export const meta: ComponentMetadata = {
+  componentName: COMPONENT_NAME,
+  title: '音频',
+  group: MaterialGroup.MEDIA,
+  devMode: 'proCode',
+  npm: {
+    package: PACKAGE_NAME,
+    version: pkg.version,
+    globalName: COMPONENT_NAME,
+    componentName: COMPONENT_NAME,
+  },
+  snippets,
+  configure,
+}
+
+export default meta

package/dist/component.min.js

@@ -1 +0,0 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react/jsx-runtime")):"function"==typeof define&&define.amd?define(["exports","react","react/jsx-runtime"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).EasyEditorMaterialsAudioComponent={},e.React,e.jsxRuntime)}(this,function(e,t,o){"use strict";const r=(e,t)=>{if(!t)return e;const o=t.split(".");let r=e;for(const e of o){if(null==r)return;if("object"!=typeof r)return;r=r[e]}return r},n=e=>void 0===e?[]:Array.isArray(e)?e:e&&"object"==typeof e?[e]:[],a=(e,t)=>{const o=((e,t)=>{if(!e)return[];if("static"===e.sourceType)return Array.isArray(e.staticData)?e.staticData:[];if("global"===e.sourceType&&e.datasourceId){const o=t?.page?.[e.datasourceId];return n(o)}if("datasource"===e.sourceType&&e.datasourceId){const o=t?.component?.[e.datasourceId];return n(o)}return[]})(e,t);return((e,t)=>t&&0!==t.length?e.map(e=>{const o={};for(const{componentField:n,sourceField:a}of t)n&&a&&(o[n]=r(e,a));return o}):e)(o,e?.fieldMappings)};const s=(e,t,o)=>({type:"group",title:e,setter:{componentName:"CollapseSetter",props:{icon:!1,...o}},items:t});s("基础配置",[{name:"title",title:"标题",setter:"StringSetter",extraProps:{getValue:e=>e.getExtraPropValue("title"),setValue(e,t){e.setExtraPropValue("title",t)}}},{name:"rect",title:"位置尺寸",setter:"RectSetter",extraProps:{getValue:e=>e.getExtraPropValue("$dashboard.rect"),setValue(e,t){e.setExtraPropValue("$dashboard.rect",t)}}},{name:"rotation",title:"旋转角度",setter:{componentName:"SliderSetter",props:{min:0,max:360,suffix:"°"}},extraProps:{defaultValue:0}},{name:"opacity",title:"不透明度",setter:{componentName:"SliderSetter",props:{min:0,max:100,suffix:"%"}},extraProps:{defaultValue:100}},{name:"background",title:"背景颜色",setter:"ColorSetter",extraProps:{defaultValue:"transparent"}}]);const i=[{title:"点击事件",children:[{label:"点击",value:"onClick",description:"鼠标点击时触发"},{label:"双击",value:"onDoubleClick",description:"鼠标双击时触发"}]},{title:"鼠标事件",children:[{label:"鼠标进入",value:"onMouseEnter",description:"鼠标进入时触发"},{label:"鼠标离开",value:"onMouseLeave",description:"鼠标离开时触发"}]}];((e=i)=>{s("事件绑定",[{name:"events",title:"事件",setter:{componentName:"EventSetter",props:{events:e}},extraProps:{label:!1}}])})(),s("高级配置",[{title:"条件渲染",setter:"SwitchSetter",extraProps:{supportVariable:!0,getValue:e=>e.getNode().getExtraPropValue("condition"),setValue(e,t){e.getNode().setExtraProp("condition",t)}}}]);var l="component-module__container___VbZSk",d="component-module__playButton___M6QVA",c="component-module__playIcon___t8-WV",u="component-module__pauseIcon___8XmSk",p="component-module__pauseBar___eM6DG",m="component-module__info___VyTlr",_="component-module__title___Hj54k",f="component-module__progressContainer___HvygE",x="component-module__progressBar___wROZC",g="component-module__progressFill___F8n5d",h="component-module__time___-5GMu",y="component-module__nativeAudio___vCo17";!function(e,t){void 0===t&&(t={});var o=t.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===o&&r.firstChild?r.insertBefore(n,r.firstChild):r.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}(".component-module__container___VbZSk{align-items:center;background:rgba(10,10,26,.95);border:1px solid rgba(26,26,62,.8);border-radius:8px;display:flex;gap:12px;height:100%;padding:12px 16px;width:100%}.component-module__playButton___M6QVA{align-items:center;background:linear-gradient(135deg,#00d4ff,#9b59b6);border:none;border-radius:50%;cursor:pointer;display:flex;flex-shrink:0;height:40px;justify-content:center;transition:transform .2s ease;width:40px}.component-module__playButton___M6QVA:hover{transform:scale(1.05)}.component-module__playIcon___t8-WV{border-bottom:8px solid transparent;border-left:12px solid #fff;border-top:8px solid transparent;height:0;margin-left:3px;width:0}.component-module__pauseIcon___8XmSk{display:flex;gap:3px}.component-module__pauseBar___eM6DG{background:#fff;border-radius:2px;height:14px;width:4px}.component-module__info___VyTlr{flex:1;min-width:0}.component-module__title___Hj54k{color:#e6e6e6;font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.component-module__progressContainer___HvygE{align-items:center;display:flex;gap:8px;margin-top:4px}.component-module__progressBar___wROZC{background:rgba(26,26,62,.8);border-radius:2px;cursor:pointer;flex:1;height:4px;overflow:hidden}.component-module__progressFill___F8n5d{background:linear-gradient(90deg,#00d4ff,#9b59b6);border-radius:2px;height:100%;transition:width .1s linear}.component-module__time___-5GMu{color:hsla(0,0%,100%,.6);font-family:Courier New,Courier,monospace;font-size:12px;min-width:80px;text-align:right}.component-module__nativeAudio___vCo17{width:100%}");const v=e=>`${Math.floor(e/60)}:${Math.floor(e%60).toString().padStart(2,"0")}`;e.Audio=({ref:e,$data:r,__dataSource:n,src:s="",title:i="音频文件",autoPlay:b=!1,loop:E=!1,audioStyle:k="custom",playbackRate:C=1,volume:S=100,rotation:j=0,opacity:V=100,background:N="transparent",style:M,onClick:w,onDoubleClick:P,onMouseEnter:L,onMouseLeave:T,onPlay:A,onPause:B,onEnded:R})=>{const D=function(e,o){return t.useMemo(()=>a(e,o),[e,o])}(r,n),I=t.useMemo(()=>D.length>0&&"string"==typeof D[0]?.src?D[0].src:s,[D,s]),$=t.useRef(null),[F,G]=t.useState(!1),[H,Z]=t.useState(0),[Q,X]=t.useState(0);t.useEffect(()=>{const e=$.current;if(!e)return;const t=()=>Z(e.currentTime),o=()=>X(e.duration),r=()=>{G(!1),R?.()},n=()=>{G(!0),A?.()},a=()=>{G(!1),B?.()};return e.addEventListener("timeupdate",t),e.addEventListener("loadedmetadata",o),e.addEventListener("ended",r),e.addEventListener("play",n),e.addEventListener("pause",a),()=>{e.removeEventListener("timeupdate",t),e.removeEventListener("loadedmetadata",o),e.removeEventListener("ended",r),e.removeEventListener("play",n),e.removeEventListener("pause",a)}},[R,A,B]),t.useEffect(()=>{$.current&&($.current.playbackRate=C,$.current.volume=S/100)},[C,S]);const q=Q?H/Q*100:0,z={transform:0!==j?`rotate(${j}deg)`:void 0,opacity:V/100,backgroundColor:N,...M};return"native"===k?o.jsx("div",{className:l,onClick:w,onDoubleClick:P,onMouseEnter:L,onMouseLeave:T,ref:e,style:z,children:o.jsx("audio",{autoPlay:b,className:y,controls:!0,loop:E,ref:$,src:I})}):o.jsxs("div",{className:l,onClick:w,onDoubleClick:P,onMouseEnter:L,onMouseLeave:T,ref:e,style:z,children:[o.jsx("audio",{autoPlay:b,loop:E,ref:$,src:I}),o.jsx("button",{"aria-label":F?"Pause":"Play",className:d,onClick:()=>{$.current&&(F?$.current.pause():$.current.play())},type:"button",children:F?o.jsxs("div",{className:u,children:[o.jsx("div",{className:p}),o.jsx("div",{className:p})]}):o.jsx("div",{className:c})}),o.jsxs("div",{className:m,children:[o.jsx("div",{className:_,children:i}),o.jsxs("div",{className:f,children:[o.jsx("button",{"aria-label":"Seek to position",className:x,onClick:e=>{if($.current&&Q){const t=e.currentTarget.getBoundingClientRect(),o=(e.clientX-t.left)/t.width;$.current.currentTime=o*Q}},type:"button",children:o.jsx("div",{className:g,style:{width:`${q}%`}})}),o.jsxs("span",{className:h,children:[v(H)," / ",v(Q||0)]})]})]})]})}});

package/dist/index.min.js

@@ -1 +0,0 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react/jsx-runtime")):"function"==typeof define&&define.amd?define(["exports","react","react/jsx-runtime"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).EasyEditorMaterialsAudio={},e.React,e.jsxRuntime)}(this,function(e,t,o){"use strict";const r=(e,t)=>{if(!t)return e;const o=t.split(".");let r=e;for(const e of o){if(null==r)return;if("object"!=typeof r)return;r=r[e]}return r},a=e=>void 0===e?[]:Array.isArray(e)?e:e&&"object"==typeof e?[e]:[],n=(e,t)=>{const o=((e,t)=>{if(!e)return[];if("static"===e.sourceType)return Array.isArray(e.staticData)?e.staticData:[];if("global"===e.sourceType&&e.datasourceId){const o=t?.page?.[e.datasourceId];return a(o)}if("datasource"===e.sourceType&&e.datasourceId){const o=t?.component?.[e.datasourceId];return a(o)}return[]})(e,t);return((e,t)=>t&&0!==t.length?e.map(e=>{const o={};for(const{componentField:a,sourceField:n}of t)a&&n&&(o[a]=r(e,n));return o}):e)(o,e?.fieldMappings)};const s=(e,t)=>{const o=Array.isArray(e)?e:[e],r=o[0]||{};return{sourceType:"static",staticData:o,fieldMappings:Object.keys(r).map(e=>({componentField:e,sourceField:e}))}},i=(e,t,o)=>({type:"group",title:e,setter:{componentName:"CollapseSetter",props:{icon:!1,...o}},items:t}),l={name:"nodeInfo",title:"节点信息",setter:"NodeInfoSetter",extraProps:{label:!1}},p=i("基础配置",[{name:"title",title:"标题",setter:"StringSetter",extraProps:{getValue:e=>e.getExtraPropValue("title"),setValue(e,t){e.setExtraPropValue("title",t)}}},{name:"rect",title:"位置尺寸",setter:"RectSetter",extraProps:{getValue:e=>e.getExtraPropValue("$dashboard.rect"),setValue(e,t){e.setExtraPropValue("$dashboard.rect",t)}}},{name:"rotation",title:"旋转角度",setter:{componentName:"SliderSetter",props:{min:0,max:360,suffix:"°"}},extraProps:{defaultValue:0}},{name:"opacity",title:"不透明度",setter:{componentName:"SliderSetter",props:{min:0,max:100,suffix:"%"}},extraProps:{defaultValue:100}},{name:"background",title:"背景颜色",setter:"ColorSetter",extraProps:{defaultValue:"transparent"}}]),d=[{title:"点击事件",children:[{label:"点击",value:"onClick",description:"鼠标点击时触发"},{label:"双击",value:"onDoubleClick",description:"鼠标双击时触发"}]},{title:"鼠标事件",children:[{label:"鼠标进入",value:"onMouseEnter",description:"鼠标进入时触发"},{label:"鼠标离开",value:"onMouseLeave",description:"鼠标离开时触发"}]}],c=((e=d)=>i("事件绑定",[{name:"events",title:"事件",setter:{componentName:"EventSetter",props:{events:e}},extraProps:{label:!1}}]))(),u=i("高级配置",[{title:"条件渲染",setter:"SwitchSetter",extraProps:{supportVariable:!0,getValue:e=>e.getNode().getExtraPropValue("condition"),setValue(e,t){e.getNode().setExtraProp("condition",t)}}}]);var m="component-module__container___VbZSk",_="component-module__playButton___M6QVA",f="component-module__playIcon___t8-WV",x="component-module__pauseIcon___8XmSk",g="component-module__pauseBar___eM6DG",y="component-module__info___VyTlr",h="component-module__title___Hj54k",b="component-module__progressContainer___HvygE",v="component-module__progressBar___wROZC",S="component-module__progressFill___F8n5d",k="component-module__time___-5GMu",P="component-module__nativeAudio___vCo17";!function(e,t){void 0===t&&(t={});var o=t.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===o&&r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}(".component-module__container___VbZSk{align-items:center;background:rgba(10,10,26,.95);border:1px solid rgba(26,26,62,.8);border-radius:8px;display:flex;gap:12px;height:100%;padding:12px 16px;width:100%}.component-module__playButton___M6QVA{align-items:center;background:linear-gradient(135deg,#00d4ff,#9b59b6);border:none;border-radius:50%;cursor:pointer;display:flex;flex-shrink:0;height:40px;justify-content:center;transition:transform .2s ease;width:40px}.component-module__playButton___M6QVA:hover{transform:scale(1.05)}.component-module__playIcon___t8-WV{border-bottom:8px solid transparent;border-left:12px solid #fff;border-top:8px solid transparent;height:0;margin-left:3px;width:0}.component-module__pauseIcon___8XmSk{display:flex;gap:3px}.component-module__pauseBar___eM6DG{background:#fff;border-radius:2px;height:14px;width:4px}.component-module__info___VyTlr{flex:1;min-width:0}.component-module__title___Hj54k{color:#e6e6e6;font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.component-module__progressContainer___HvygE{align-items:center;display:flex;gap:8px;margin-top:4px}.component-module__progressBar___wROZC{background:rgba(26,26,62,.8);border-radius:2px;cursor:pointer;flex:1;height:4px;overflow:hidden}.component-module__progressFill___F8n5d{background:linear-gradient(90deg,#00d4ff,#9b59b6);border-radius:2px;height:100%;transition:width .1s linear}.component-module__time___-5GMu{color:hsla(0,0%,100%,.6);font-family:Courier New,Courier,monospace;font-size:12px;min-width:80px;text-align:right}.component-module__nativeAudio___vCo17{width:100%}");const V=e=>`${Math.floor(e/60)}:${Math.floor(e%60).toString().padStart(2,"0")}`,E="EasyEditorMaterialsAudio";const N=((e,t)=>({props:[{type:"group",title:"属性",setter:"TabSetter",items:[{type:"group",key:"config",title:"配置",items:[l,p,e]},{type:"group",key:"data",title:"数据",items:[l,t]},{type:"group",key:"advanced",title:"高级",items:[l,c,u]}]}],component:{},supports:{},advanced:{}}))(i("组件配置",[{type:"group",title:"组件配置",setter:"SubTabSetter",items:[{type:"group",key:"content",title:"内容",items:[{name:"__upload",title:"上传",setter:{componentName:"UploadSetter",props:{accept:".mp3,.wav,.ogg"}},extraProps:{setValue(e,t){if(t){const{base64:o,raw:r}=t;o&&e.parent.setPropValue("src",o),r?.width&&e.parent.setExtraPropValue("$dashboard.rect.width",r.width),r?.height&&e.parent.setExtraPropValue("$dashboard.rect.height",r.height)}else e.parent.clearPropValue("src")}}},{name:"src",title:"音频地址",setter:"StringSetter"},{name:"title",title:"标题",setter:"StringSetter",extraProps:{defaultValue:"音频文件"}}]},{type:"group",key:"playback",title:"播放",items:[{name:"autoPlay",title:"自动播放",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"loop",title:"循环播放",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"playbackRate",title:"播放速度",setter:{componentName:"SelectSetter",props:{options:[{label:"0.5x",value:.5},{label:"0.75x",value:.75},{label:"1x (正常)",value:1},{label:"1.25x",value:1.25},{label:"1.5x",value:1.5},{label:"2x",value:2}]}},extraProps:{defaultValue:1}},{name:"volume",title:"音量",setter:{componentName:"SliderSetter",props:{min:0,max:100,step:1,suffix:"%"}},extraProps:{defaultValue:100}}]},{type:"group",key:"style",title:"样式",items:[{name:"audioStyle",title:"样式类型",setter:{componentName:"SegmentedSetter",props:{options:[{label:"自定义",value:"custom"},{label:"原生",value:"native"}]}},extraProps:{defaultValue:"custom"}}]}]}],{padding:"6px 16px 12px"}),{name:"$data",title:"数据配置",setter:{componentName:"DataSetter",props:{expectedFields:[{name:"src",label:"src",type:"string",required:!0,description:"音频地址"}],showPreview:!0,previewLimit:10}},extraProps:{label:!1}});const w={componentName:E,title:"音频",group:"media",devMode:"proCode",npm:{package:"@easy-editor/materials-dashboard-audio",version:"0.0.4",globalName:E,componentName:E},snippets:[{title:"音频播放器",screenshot:"",schema:{componentName:E,title:"音频播放器",props:{$data:s({src:""}),title:"音频文件",autoPlay:!1,loop:!1,audioStyle:"custom",playbackRate:1,volume:100,rotation:0,opacity:100,background:"transparent"},$dashboard:{rect:{width:300,height:60}}}},{title:"原生音频",screenshot:"",schema:{componentName:E,title:"原生音频",props:{$data:s({src:""}),title:"音频文件",audioStyle:"native",rotation:0,opacity:100,background:"transparent"},$dashboard:{rect:{width:300,height:60}}}}],configure:N};e.component=({ref:e,$data:r,__dataSource:a,src:s="",title:i="音频文件",autoPlay:l=!1,loop:p=!1,audioStyle:d="custom",playbackRate:c=1,volume:u=100,rotation:E=0,opacity:N=100,background:w="transparent",style:C,onClick:j,onDoubleClick:M,onMouseEnter:T,onMouseLeave:L,onPlay:A,onPause:$,onEnded:R})=>{const B=function(e,o){return t.useMemo(()=>n(e,o),[e,o])}(r,a),D=t.useMemo(()=>B.length>0&&"string"==typeof B[0]?.src?B[0].src:s,[B,s]),I=t.useRef(null),[F,G]=t.useState(!1),[H,Z]=t.useState(0),[q,O]=t.useState(0);t.useEffect(()=>{const e=I.current;if(!e)return;const t=()=>Z(e.currentTime),o=()=>O(e.duration),r=()=>{G(!1),R?.()},a=()=>{G(!0),A?.()},n=()=>{G(!1),$?.()};return e.addEventListener("timeupdate",t),e.addEventListener("loadedmetadata",o),e.addEventListener("ended",r),e.addEventListener("play",a),e.addEventListener("pause",n),()=>{e.removeEventListener("timeupdate",t),e.removeEventListener("loadedmetadata",o),e.removeEventListener("ended",r),e.removeEventListener("play",a),e.removeEventListener("pause",n)}},[R,A,$]),t.useEffect(()=>{I.current&&(I.current.playbackRate=c,I.current.volume=u/100)},[c,u]);const Q=q?H/q*100:0,X={transform:0!==E?`rotate(${E}deg)`:void 0,opacity:N/100,backgroundColor:w,...C};return"native"===d?o.jsx("div",{className:m,onClick:j,onDoubleClick:M,onMouseEnter:T,onMouseLeave:L,ref:e,style:X,children:o.jsx("audio",{autoPlay:l,className:P,controls:!0,loop:p,ref:I,src:D})}):o.jsxs("div",{className:m,onClick:j,onDoubleClick:M,onMouseEnter:T,onMouseLeave:L,ref:e,style:X,children:[o.jsx("audio",{autoPlay:l,loop:p,ref:I,src:D}),o.jsx("button",{"aria-label":F?"Pause":"Play",className:_,onClick:()=>{I.current&&(F?I.current.pause():I.current.play())},type:"button",children:F?o.jsxs("div",{className:x,children:[o.jsx("div",{className:g}),o.jsx("div",{className:g})]}):o.jsx("div",{className:f})}),o.jsxs("div",{className:y,children:[o.jsx("div",{className:h,children:i}),o.jsxs("div",{className:b,children:[o.jsx("button",{"aria-label":"Seek to position",className:v,onClick:e=>{if(I.current&&q){const t=e.currentTarget.getBoundingClientRect(),o=(e.clientX-t.left)/t.width;I.current.currentTime=o*q}},type:"button",children:o.jsx("div",{className:S,style:{width:`${Q}%`}})}),o.jsxs("span",{className:k,children:[V(H)," / ",V(q||0)]})]})]})]})},e.meta=w});

package/dist/meta.min.js

@@ -1 +0,0 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).EasyEditorMaterialsAudioMeta={})}(this,function(e){"use strict";const t=(e,t)=>{const a=Array.isArray(e)?e:[e],r=a[0]||{};return{sourceType:"static",staticData:a,fieldMappings:Object.keys(r).map(e=>({componentField:e,sourceField:e}))}},a=(e,t,a)=>({type:"group",title:e,setter:{componentName:"CollapseSetter",props:{icon:!1,...a}},items:t}),r={name:"nodeInfo",title:"节点信息",setter:"NodeInfoSetter",extraProps:{label:!1}},o=a("基础配置",[{name:"title",title:"标题",setter:"StringSetter",extraProps:{getValue:e=>e.getExtraPropValue("title"),setValue(e,t){e.setExtraPropValue("title",t)}}},{name:"rect",title:"位置尺寸",setter:"RectSetter",extraProps:{getValue:e=>e.getExtraPropValue("$dashboard.rect"),setValue(e,t){e.setExtraPropValue("$dashboard.rect",t)}}},{name:"rotation",title:"旋转角度",setter:{componentName:"SliderSetter",props:{min:0,max:360,suffix:"°"}},extraProps:{defaultValue:0}},{name:"opacity",title:"不透明度",setter:{componentName:"SliderSetter",props:{min:0,max:100,suffix:"%"}},extraProps:{defaultValue:100}},{name:"background",title:"背景颜色",setter:"ColorSetter",extraProps:{defaultValue:"transparent"}}]),l=[{title:"点击事件",children:[{label:"点击",value:"onClick",description:"鼠标点击时触发"},{label:"双击",value:"onDoubleClick",description:"鼠标双击时触发"}]},{title:"鼠标事件",children:[{label:"鼠标进入",value:"onMouseEnter",description:"鼠标进入时触发"},{label:"鼠标离开",value:"onMouseLeave",description:"鼠标离开时触发"}]}],i=((e=l)=>a("事件绑定",[{name:"events",title:"事件",setter:{componentName:"EventSetter",props:{events:e}},extraProps:{label:!1}}]))(),s=a("高级配置",[{title:"条件渲染",setter:"SwitchSetter",extraProps:{supportVariable:!0,getValue:e=>e.getNode().getExtraPropValue("condition"),setValue(e,t){e.getNode().setExtraProp("condition",t)}}}]),p="EasyEditorMaterialsAudio";const n=((e,t)=>({props:[{type:"group",title:"属性",setter:"TabSetter",items:[{type:"group",key:"config",title:"配置",items:[r,o,e]},{type:"group",key:"data",title:"数据",items:[r,t]},{type:"group",key:"advanced",title:"高级",items:[r,i,s]}]}],component:{},supports:{},advanced:{}}))(a("组件配置",[{type:"group",title:"组件配置",setter:"SubTabSetter",items:[{type:"group",key:"content",title:"内容",items:[{name:"__upload",title:"上传",setter:{componentName:"UploadSetter",props:{accept:".mp3,.wav,.ogg"}},extraProps:{setValue(e,t){if(t){const{base64:a,raw:r}=t;a&&e.parent.setPropValue("src",a),r?.width&&e.parent.setExtraPropValue("$dashboard.rect.width",r.width),r?.height&&e.parent.setExtraPropValue("$dashboard.rect.height",r.height)}else e.parent.clearPropValue("src")}}},{name:"src",title:"音频地址",setter:"StringSetter"},{name:"title",title:"标题",setter:"StringSetter",extraProps:{defaultValue:"音频文件"}}]},{type:"group",key:"playback",title:"播放",items:[{name:"autoPlay",title:"自动播放",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"loop",title:"循环播放",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"playbackRate",title:"播放速度",setter:{componentName:"SelectSetter",props:{options:[{label:"0.5x",value:.5},{label:"0.75x",value:.75},{label:"1x (正常)",value:1},{label:"1.25x",value:1.25},{label:"1.5x",value:1.5},{label:"2x",value:2}]}},extraProps:{defaultValue:1}},{name:"volume",title:"音量",setter:{componentName:"SliderSetter",props:{min:0,max:100,step:1,suffix:"%"}},extraProps:{defaultValue:100}}]},{type:"group",key:"style",title:"样式",items:[{name:"audioStyle",title:"样式类型",setter:{componentName:"SegmentedSetter",props:{options:[{label:"自定义",value:"custom"},{label:"原生",value:"native"}]}},extraProps:{defaultValue:"custom"}}]}]}],{padding:"6px 16px 12px"}),{name:"$data",title:"数据配置",setter:{componentName:"DataSetter",props:{expectedFields:[{name:"src",label:"src",type:"string",required:!0,description:"音频地址"}],showPreview:!0,previewLimit:10}},extraProps:{label:!1}});const u={componentName:p,title:"音频",group:"media",devMode:"proCode",npm:{package:"@easy-editor/materials-dashboard-audio",version:"0.0.4",globalName:p,componentName:p},snippets:[{title:"音频播放器",screenshot:"",schema:{componentName:p,title:"音频播放器",props:{$data:t({src:""}),title:"音频文件",autoPlay:!1,loop:!1,audioStyle:"custom",playbackRate:1,volume:100,rotation:0,opacity:100,background:"transparent"},$dashboard:{rect:{width:300,height:60}}}},{title:"原生音频",screenshot:"",schema:{componentName:p,title:"原生音频",props:{$data:t({src:""}),title:"音频文件",audioStyle:"native",rotation:0,opacity:100,background:"transparent"},$dashboard:{rect:{width:300,height:60}}}}],configure:n};e.meta=u});