@easy-editor/materials-dashboard-audio 0.0.3 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/dist/component.min.js +1 -2
- package/dist/index.min.js +1 -2
- package/dist/meta.min.js +1 -2
- package/easypack.config.ts +10 -0
- package/package.json +4 -11
- package/src/component.tsx +222 -140
- package/src/configure.ts +165 -247
- package/src/index.tsx +7 -7
- package/src/meta.ts +26 -28
- package/src/snippets.ts +61 -50
- package/tsconfig.json +20 -9
- package/.vite/plugins/vite-plugin-external-deps.ts +0 -224
- package/.vite/plugins/vite-plugin-material-dev.ts +0 -218
- package/dist/component.esm.js +0 -165
- package/dist/component.esm.js.map +0 -1
- package/dist/component.js +0 -173
- package/dist/component.js.map +0 -1
- package/dist/component.min.js.map +0 -1
- package/dist/index.cjs +0 -456
- package/dist/index.cjs.map +0 -1
- package/dist/index.esm.js +0 -453
- package/dist/index.esm.js.map +0 -1
- package/dist/index.js +0 -460
- package/dist/index.js.map +0 -1
- package/dist/index.min.js.map +0 -1
- package/dist/meta.esm.js +0 -292
- package/dist/meta.esm.js.map +0 -1
- package/dist/meta.js +0 -303
- package/dist/meta.js.map +0 -1
- package/dist/meta.min.js.map +0 -1
- package/dist/src/component.d.ts +0 -23
- package/dist/src/configure.d.ts +0 -7
- package/dist/src/constants.d.ts +0 -16
- package/dist/src/index.d.ts +0 -6
- package/dist/src/meta.d.ts +0 -7
- package/dist/src/snippets.d.ts +0 -7
- package/rollup.config.js +0 -222
- package/tsconfig.build.json +0 -12
- package/tsconfig.test.json +0 -7
- package/vite.config.ts +0 -54
package/dist/component.js
DELETED
|
@@ -1,173 +0,0 @@
|
|
|
1
|
-
/* @easy-editor/materials-dashboard-audio v0.0.2 (component) */
|
|
2
|
-
(function (global, factory) {
|
|
3
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react/jsx-runtime')) :
|
|
4
|
-
typeof define === 'function' && define.amd ? define(['exports', 'react', 'react/jsx-runtime'], factory) :
|
|
5
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.EasyEditorMaterialsAudioComponent = {}, global.React, global.jsxRuntime));
|
|
6
|
-
})(this, (function (exports, react, jsxRuntime) { 'use strict';
|
|
7
|
-
|
|
8
|
-
function styleInject(css, ref) {
|
|
9
|
-
if (ref === void 0) ref = {};
|
|
10
|
-
var insertAt = ref.insertAt;
|
|
11
|
-
if (typeof document === 'undefined') {
|
|
12
|
-
return;
|
|
13
|
-
}
|
|
14
|
-
var head = document.head || document.getElementsByTagName('head')[0];
|
|
15
|
-
var style = document.createElement('style');
|
|
16
|
-
style.type = 'text/css';
|
|
17
|
-
if (insertAt === 'top') {
|
|
18
|
-
if (head.firstChild) {
|
|
19
|
-
head.insertBefore(style, head.firstChild);
|
|
20
|
-
} else {
|
|
21
|
-
head.appendChild(style);
|
|
22
|
-
}
|
|
23
|
-
} else {
|
|
24
|
-
head.appendChild(style);
|
|
25
|
-
}
|
|
26
|
-
if (style.styleSheet) {
|
|
27
|
-
style.styleSheet.cssText = css;
|
|
28
|
-
} else {
|
|
29
|
-
style.appendChild(document.createTextNode(css));
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
var css_248z = ".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%}";
|
|
34
|
-
var styles = {"container":"component-module__container___VbZSk","playButton":"component-module__playButton___M6QVA","playIcon":"component-module__playIcon___t8-WV","pauseIcon":"component-module__pauseIcon___8XmSk","pauseBar":"component-module__pauseBar___eM6DG","info":"component-module__info___VyTlr","title":"component-module__title___Hj54k","progressContainer":"component-module__progressContainer___HvygE","progressBar":"component-module__progressBar___wROZC","progressFill":"component-module__progressFill___F8n5d","time":"component-module__time___-5GMu","nativeAudio":"component-module__nativeAudio___vCo17"};
|
|
35
|
-
styleInject(css_248z);
|
|
36
|
-
|
|
37
|
-
/**
|
|
38
|
-
* Audio Component
|
|
39
|
-
* 音频播放组件
|
|
40
|
-
*/
|
|
41
|
-
|
|
42
|
-
const formatTime = seconds => {
|
|
43
|
-
const mins = Math.floor(seconds / 60);
|
|
44
|
-
const secs = Math.floor(seconds % 60);
|
|
45
|
-
return `${mins}:${secs.toString().padStart(2, '0')}`;
|
|
46
|
-
};
|
|
47
|
-
const Audio = ({
|
|
48
|
-
ref,
|
|
49
|
-
src = '',
|
|
50
|
-
title = '音频文件',
|
|
51
|
-
autoPlay = false,
|
|
52
|
-
loop = false,
|
|
53
|
-
audioStyle = 'custom',
|
|
54
|
-
style: externalStyle
|
|
55
|
-
}) => {
|
|
56
|
-
const audioRef = react.useRef(null);
|
|
57
|
-
const [isPlaying, setIsPlaying] = react.useState(false);
|
|
58
|
-
const [currentTime, setCurrentTime] = react.useState(0);
|
|
59
|
-
const [duration, setDuration] = react.useState(0);
|
|
60
|
-
react.useEffect(() => {
|
|
61
|
-
const audio = audioRef.current;
|
|
62
|
-
if (!audio) {
|
|
63
|
-
return;
|
|
64
|
-
}
|
|
65
|
-
const handleTimeUpdate = () => setCurrentTime(audio.currentTime);
|
|
66
|
-
const handleLoadedMetadata = () => setDuration(audio.duration);
|
|
67
|
-
const handleEnded = () => setIsPlaying(false);
|
|
68
|
-
audio.addEventListener('timeupdate', handleTimeUpdate);
|
|
69
|
-
audio.addEventListener('loadedmetadata', handleLoadedMetadata);
|
|
70
|
-
audio.addEventListener('ended', handleEnded);
|
|
71
|
-
return () => {
|
|
72
|
-
audio.removeEventListener('timeupdate', handleTimeUpdate);
|
|
73
|
-
audio.removeEventListener('loadedmetadata', handleLoadedMetadata);
|
|
74
|
-
audio.removeEventListener('ended', handleEnded);
|
|
75
|
-
};
|
|
76
|
-
}, []);
|
|
77
|
-
const togglePlay = () => {
|
|
78
|
-
if (audioRef.current) {
|
|
79
|
-
if (isPlaying) {
|
|
80
|
-
audioRef.current.pause();
|
|
81
|
-
} else {
|
|
82
|
-
audioRef.current.play();
|
|
83
|
-
}
|
|
84
|
-
setIsPlaying(!isPlaying);
|
|
85
|
-
}
|
|
86
|
-
};
|
|
87
|
-
const handleProgressClick = e => {
|
|
88
|
-
if (audioRef.current && duration) {
|
|
89
|
-
const rect = e.currentTarget.getBoundingClientRect();
|
|
90
|
-
const percent = (e.clientX - rect.left) / rect.width;
|
|
91
|
-
audioRef.current.currentTime = percent * duration;
|
|
92
|
-
}
|
|
93
|
-
};
|
|
94
|
-
const progress = duration ? currentTime / duration * 100 : 0;
|
|
95
|
-
|
|
96
|
-
// 原生样式
|
|
97
|
-
if (audioStyle === 'native') {
|
|
98
|
-
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
99
|
-
className: styles.container,
|
|
100
|
-
ref: ref,
|
|
101
|
-
style: externalStyle,
|
|
102
|
-
children: /*#__PURE__*/jsxRuntime.jsx("audio", {
|
|
103
|
-
autoPlay: autoPlay,
|
|
104
|
-
className: styles.nativeAudio,
|
|
105
|
-
controls: true,
|
|
106
|
-
loop: loop,
|
|
107
|
-
ref: audioRef,
|
|
108
|
-
src: src
|
|
109
|
-
})
|
|
110
|
-
});
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
// 自定义样式
|
|
114
|
-
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
115
|
-
className: styles.container,
|
|
116
|
-
ref: ref,
|
|
117
|
-
style: externalStyle,
|
|
118
|
-
children: [/*#__PURE__*/jsxRuntime.jsx("audio", {
|
|
119
|
-
autoPlay: autoPlay,
|
|
120
|
-
loop: loop,
|
|
121
|
-
ref: audioRef,
|
|
122
|
-
src: src
|
|
123
|
-
}), /*#__PURE__*/jsxRuntime.jsx("button", {
|
|
124
|
-
"aria-label": isPlaying ? 'Pause' : 'Play',
|
|
125
|
-
className: styles.playButton,
|
|
126
|
-
onClick: togglePlay,
|
|
127
|
-
type: "button",
|
|
128
|
-
children: isPlaying ? /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
129
|
-
className: styles.pauseIcon,
|
|
130
|
-
children: [/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
131
|
-
className: styles.pauseBar
|
|
132
|
-
}), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
133
|
-
className: styles.pauseBar
|
|
134
|
-
})]
|
|
135
|
-
}) : /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
136
|
-
className: styles.playIcon
|
|
137
|
-
})
|
|
138
|
-
}), /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
139
|
-
className: styles.info,
|
|
140
|
-
children: [/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
141
|
-
className: styles.title,
|
|
142
|
-
children: title
|
|
143
|
-
}), /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
144
|
-
className: styles.progressContainer,
|
|
145
|
-
children: [/*#__PURE__*/jsxRuntime.jsx("button", {
|
|
146
|
-
"aria-label": "Seek to position",
|
|
147
|
-
className: styles.progressBar
|
|
148
|
-
// @ts-expect-error
|
|
149
|
-
,
|
|
150
|
-
onClick: handleProgressClick,
|
|
151
|
-
type: "button",
|
|
152
|
-
children: /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
153
|
-
className: styles.progressFill,
|
|
154
|
-
style: {
|
|
155
|
-
width: `${progress}%`
|
|
156
|
-
}
|
|
157
|
-
})
|
|
158
|
-
}), /*#__PURE__*/jsxRuntime.jsxs("span", {
|
|
159
|
-
className: styles.time,
|
|
160
|
-
children: [formatTime(currentTime), " / ", formatTime(duration || 0)]
|
|
161
|
-
})]
|
|
162
|
-
})]
|
|
163
|
-
})]
|
|
164
|
-
});
|
|
165
|
-
};
|
|
166
|
-
|
|
167
|
-
exports.Audio = Audio;
|
|
168
|
-
exports.default = Audio;
|
|
169
|
-
|
|
170
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
171
|
-
|
|
172
|
-
}));
|
|
173
|
-
//# sourceMappingURL=component.js.map
|
package/dist/component.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"component.js","sources":["../../../../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js","../src/component.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","/**\n * Audio Component\n * 音频播放组件\n */\n\nimport { useState, useRef, useEffect, type CSSProperties, type Ref } from 'react'\nimport styles from './component.module.css'\n\nexport type AudioStyle = 'custom' | 'native'\n\nexport interface AudioProps {\n ref?: Ref<HTMLDivElement>\n /** 音频地址 */\n src?: string\n /** 标题 */\n title?: string\n /** 自动播放 */\n autoPlay?: boolean\n /** 循环播放 */\n loop?: boolean\n /** 样式类型 */\n audioStyle?: AudioStyle\n /** 外部样式 */\n style?: CSSProperties\n}\n\nconst formatTime = (seconds: number): string => {\n const mins = Math.floor(seconds / 60)\n const secs = Math.floor(seconds % 60)\n return `${mins}:${secs.toString().padStart(2, '0')}`\n}\n\nexport const Audio: React.FC<AudioProps> = ({\n ref,\n src = '',\n title = '音频文件',\n autoPlay = false,\n loop = false,\n audioStyle = 'custom',\n style: externalStyle,\n}) => {\n const audioRef = useRef<HTMLAudioElement>(null)\n const [isPlaying, setIsPlaying] = useState(false)\n const [currentTime, setCurrentTime] = useState(0)\n const [duration, setDuration] = useState(0)\n\n useEffect(() => {\n const audio = audioRef.current\n if (!audio) {\n return\n }\n\n const handleTimeUpdate = () => setCurrentTime(audio.currentTime)\n const handleLoadedMetadata = () => setDuration(audio.duration)\n const handleEnded = () => setIsPlaying(false)\n\n audio.addEventListener('timeupdate', handleTimeUpdate)\n audio.addEventListener('loadedmetadata', handleLoadedMetadata)\n audio.addEventListener('ended', handleEnded)\n\n return () => {\n audio.removeEventListener('timeupdate', handleTimeUpdate)\n audio.removeEventListener('loadedmetadata', handleLoadedMetadata)\n audio.removeEventListener('ended', handleEnded)\n }\n }, [])\n\n const togglePlay = () => {\n if (audioRef.current) {\n if (isPlaying) {\n audioRef.current.pause()\n } else {\n audioRef.current.play()\n }\n setIsPlaying(!isPlaying)\n }\n }\n\n const handleProgressClick = (e: React.MouseEvent<HTMLDivElement>) => {\n if (audioRef.current && duration) {\n const rect = e.currentTarget.getBoundingClientRect()\n const percent = (e.clientX - rect.left) / rect.width\n audioRef.current.currentTime = percent * duration\n }\n }\n\n const progress = duration ? (currentTime / duration) * 100 : 0\n\n // 原生样式\n if (audioStyle === 'native') {\n return (\n <div className={styles.container} ref={ref} style={externalStyle}>\n <audio autoPlay={autoPlay} className={styles.nativeAudio} controls loop={loop} ref={audioRef} src={src} />\n </div>\n )\n }\n\n // 自定义样式\n return (\n <div className={styles.container} ref={ref} style={externalStyle}>\n <audio autoPlay={autoPlay} loop={loop} ref={audioRef} src={src} />\n\n <button\n aria-label={isPlaying ? 'Pause' : 'Play'}\n className={styles.playButton}\n onClick={togglePlay}\n type='button'\n >\n {isPlaying ? (\n <div className={styles.pauseIcon}>\n <div className={styles.pauseBar} />\n <div className={styles.pauseBar} />\n </div>\n ) : (\n <div className={styles.playIcon} />\n )}\n </button>\n\n <div className={styles.info}>\n <div className={styles.title}>{title}</div>\n <div className={styles.progressContainer}>\n <button\n aria-label='Seek to position'\n className={styles.progressBar}\n // @ts-expect-error\n onClick={handleProgressClick}\n type='button'\n >\n <div className={styles.progressFill} style={{ width: `${progress}%` }} />\n </button>\n <span className={styles.time}>\n {formatTime(currentTime)} / {formatTime(duration || 0)}\n </span>\n </div>\n </div>\n </div>\n )\n}\n\nexport default Audio\n"],"names":["styleInject","css","ref","insertAt","document","head","getElementsByTagName","style","createElement","type","firstChild","insertBefore","appendChild","styleSheet","cssText","createTextNode","formatTime","seconds","mins","Math","floor","secs","toString","padStart","Audio","src","title","autoPlay","loop","audioStyle","externalStyle","audioRef","useRef","isPlaying","setIsPlaying","useState","currentTime","setCurrentTime","duration","setDuration","useEffect","audio","current","handleTimeUpdate","handleLoadedMetadata","handleEnded","addEventListener","removeEventListener","togglePlay","pause","play","handleProgressClick","e","rect","currentTarget","getBoundingClientRect","percent","clientX","left","width","progress","_jsx","className","styles","container","children","nativeAudio","controls","_jsxs","playButton","onClick","pauseIcon","pauseBar","playIcon","info","progressContainer","progressBar","progressFill","time"],"mappings":"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","x_google_ignoreList":[0]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"component.min.js","sources":["../../../../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js","../src/component.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","/**\n * Audio Component\n * 音频播放组件\n */\n\nimport { useState, useRef, useEffect, type CSSProperties, type Ref } from 'react'\nimport styles from './component.module.css'\n\nexport type AudioStyle = 'custom' | 'native'\n\nexport interface AudioProps {\n ref?: Ref<HTMLDivElement>\n /** 音频地址 */\n src?: string\n /** 标题 */\n title?: string\n /** 自动播放 */\n autoPlay?: boolean\n /** 循环播放 */\n loop?: boolean\n /** 样式类型 */\n audioStyle?: AudioStyle\n /** 外部样式 */\n style?: CSSProperties\n}\n\nconst formatTime = (seconds: number): string => {\n const mins = Math.floor(seconds / 60)\n const secs = Math.floor(seconds % 60)\n return `${mins}:${secs.toString().padStart(2, '0')}`\n}\n\nexport const Audio: React.FC<AudioProps> = ({\n ref,\n src = '',\n title = '音频文件',\n autoPlay = false,\n loop = false,\n audioStyle = 'custom',\n style: externalStyle,\n}) => {\n const audioRef = useRef<HTMLAudioElement>(null)\n const [isPlaying, setIsPlaying] = useState(false)\n const [currentTime, setCurrentTime] = useState(0)\n const [duration, setDuration] = useState(0)\n\n useEffect(() => {\n const audio = audioRef.current\n if (!audio) {\n return\n }\n\n const handleTimeUpdate = () => setCurrentTime(audio.currentTime)\n const handleLoadedMetadata = () => setDuration(audio.duration)\n const handleEnded = () => setIsPlaying(false)\n\n audio.addEventListener('timeupdate', handleTimeUpdate)\n audio.addEventListener('loadedmetadata', handleLoadedMetadata)\n audio.addEventListener('ended', handleEnded)\n\n return () => {\n audio.removeEventListener('timeupdate', handleTimeUpdate)\n audio.removeEventListener('loadedmetadata', handleLoadedMetadata)\n audio.removeEventListener('ended', handleEnded)\n }\n }, [])\n\n const togglePlay = () => {\n if (audioRef.current) {\n if (isPlaying) {\n audioRef.current.pause()\n } else {\n audioRef.current.play()\n }\n setIsPlaying(!isPlaying)\n }\n }\n\n const handleProgressClick = (e: React.MouseEvent<HTMLDivElement>) => {\n if (audioRef.current && duration) {\n const rect = e.currentTarget.getBoundingClientRect()\n const percent = (e.clientX - rect.left) / rect.width\n audioRef.current.currentTime = percent * duration\n }\n }\n\n const progress = duration ? (currentTime / duration) * 100 : 0\n\n // 原生样式\n if (audioStyle === 'native') {\n return (\n <div className={styles.container} ref={ref} style={externalStyle}>\n <audio autoPlay={autoPlay} className={styles.nativeAudio} controls loop={loop} ref={audioRef} src={src} />\n </div>\n )\n }\n\n // 自定义样式\n return (\n <div className={styles.container} ref={ref} style={externalStyle}>\n <audio autoPlay={autoPlay} loop={loop} ref={audioRef} src={src} />\n\n <button\n aria-label={isPlaying ? 'Pause' : 'Play'}\n className={styles.playButton}\n onClick={togglePlay}\n type='button'\n >\n {isPlaying ? (\n <div className={styles.pauseIcon}>\n <div className={styles.pauseBar} />\n <div className={styles.pauseBar} />\n </div>\n ) : (\n <div className={styles.playIcon} />\n )}\n </button>\n\n <div className={styles.info}>\n <div className={styles.title}>{title}</div>\n <div className={styles.progressContainer}>\n <button\n aria-label='Seek to position'\n className={styles.progressBar}\n // @ts-expect-error\n onClick={handleProgressClick}\n type='button'\n >\n <div className={styles.progressFill} style={{ width: `${progress}%` }} />\n </button>\n <span className={styles.time}>\n {formatTime(currentTime)} / {formatTime(duration || 0)}\n </span>\n </div>\n </div>\n </div>\n )\n}\n\nexport default Audio\n"],"names":["css","ref","insertAt","document","head","getElementsByTagName","style","createElement","type","firstChild","insertBefore","appendChild","styleSheet","cssText","createTextNode","formatTime","seconds","Math","floor","toString","padStart","Audio","src","title","autoPlay","loop","audioStyle","externalStyle","audioRef","useRef","isPlaying","setIsPlaying","useState","currentTime","setCurrentTime","duration","setDuration","useEffect","audio","current","handleTimeUpdate","handleLoadedMetadata","handleEnded","addEventListener","removeEventListener","progress","_jsx","className","styles","children","controls","_jsxs","onClick","togglePlay","pause","play","e","rect","currentTarget","getBoundingClientRect","percent","clientX","left","width"],"mappings":"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","x_google_ignoreList":[0]}
|
package/dist/index.cjs
DELETED
|
@@ -1,456 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var react = require('react');
|
|
4
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
-
|
|
6
|
-
function styleInject(css, ref) {
|
|
7
|
-
if (ref === void 0) ref = {};
|
|
8
|
-
var insertAt = ref.insertAt;
|
|
9
|
-
if (typeof document === 'undefined') {
|
|
10
|
-
return;
|
|
11
|
-
}
|
|
12
|
-
var head = document.head || document.getElementsByTagName('head')[0];
|
|
13
|
-
var style = document.createElement('style');
|
|
14
|
-
style.type = 'text/css';
|
|
15
|
-
if (insertAt === 'top') {
|
|
16
|
-
if (head.firstChild) {
|
|
17
|
-
head.insertBefore(style, head.firstChild);
|
|
18
|
-
} else {
|
|
19
|
-
head.appendChild(style);
|
|
20
|
-
}
|
|
21
|
-
} else {
|
|
22
|
-
head.appendChild(style);
|
|
23
|
-
}
|
|
24
|
-
if (style.styleSheet) {
|
|
25
|
-
style.styleSheet.cssText = css;
|
|
26
|
-
} else {
|
|
27
|
-
style.appendChild(document.createTextNode(css));
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
var css_248z = ".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%}";
|
|
32
|
-
var styles = {"container":"component-module__container___VbZSk","playButton":"component-module__playButton___M6QVA","playIcon":"component-module__playIcon___t8-WV","pauseIcon":"component-module__pauseIcon___8XmSk","pauseBar":"component-module__pauseBar___eM6DG","info":"component-module__info___VyTlr","title":"component-module__title___Hj54k","progressContainer":"component-module__progressContainer___HvygE","progressBar":"component-module__progressBar___wROZC","progressFill":"component-module__progressFill___F8n5d","time":"component-module__time___-5GMu","nativeAudio":"component-module__nativeAudio___vCo17"};
|
|
33
|
-
styleInject(css_248z);
|
|
34
|
-
|
|
35
|
-
/**
|
|
36
|
-
* Audio Component
|
|
37
|
-
* 音频播放组件
|
|
38
|
-
*/
|
|
39
|
-
|
|
40
|
-
const formatTime = seconds => {
|
|
41
|
-
const mins = Math.floor(seconds / 60);
|
|
42
|
-
const secs = Math.floor(seconds % 60);
|
|
43
|
-
return `${mins}:${secs.toString().padStart(2, '0')}`;
|
|
44
|
-
};
|
|
45
|
-
const Audio = ({
|
|
46
|
-
ref,
|
|
47
|
-
src = '',
|
|
48
|
-
title = '音频文件',
|
|
49
|
-
autoPlay = false,
|
|
50
|
-
loop = false,
|
|
51
|
-
audioStyle = 'custom',
|
|
52
|
-
style: externalStyle
|
|
53
|
-
}) => {
|
|
54
|
-
const audioRef = react.useRef(null);
|
|
55
|
-
const [isPlaying, setIsPlaying] = react.useState(false);
|
|
56
|
-
const [currentTime, setCurrentTime] = react.useState(0);
|
|
57
|
-
const [duration, setDuration] = react.useState(0);
|
|
58
|
-
react.useEffect(() => {
|
|
59
|
-
const audio = audioRef.current;
|
|
60
|
-
if (!audio) {
|
|
61
|
-
return;
|
|
62
|
-
}
|
|
63
|
-
const handleTimeUpdate = () => setCurrentTime(audio.currentTime);
|
|
64
|
-
const handleLoadedMetadata = () => setDuration(audio.duration);
|
|
65
|
-
const handleEnded = () => setIsPlaying(false);
|
|
66
|
-
audio.addEventListener('timeupdate', handleTimeUpdate);
|
|
67
|
-
audio.addEventListener('loadedmetadata', handleLoadedMetadata);
|
|
68
|
-
audio.addEventListener('ended', handleEnded);
|
|
69
|
-
return () => {
|
|
70
|
-
audio.removeEventListener('timeupdate', handleTimeUpdate);
|
|
71
|
-
audio.removeEventListener('loadedmetadata', handleLoadedMetadata);
|
|
72
|
-
audio.removeEventListener('ended', handleEnded);
|
|
73
|
-
};
|
|
74
|
-
}, []);
|
|
75
|
-
const togglePlay = () => {
|
|
76
|
-
if (audioRef.current) {
|
|
77
|
-
if (isPlaying) {
|
|
78
|
-
audioRef.current.pause();
|
|
79
|
-
} else {
|
|
80
|
-
audioRef.current.play();
|
|
81
|
-
}
|
|
82
|
-
setIsPlaying(!isPlaying);
|
|
83
|
-
}
|
|
84
|
-
};
|
|
85
|
-
const handleProgressClick = e => {
|
|
86
|
-
if (audioRef.current && duration) {
|
|
87
|
-
const rect = e.currentTarget.getBoundingClientRect();
|
|
88
|
-
const percent = (e.clientX - rect.left) / rect.width;
|
|
89
|
-
audioRef.current.currentTime = percent * duration;
|
|
90
|
-
}
|
|
91
|
-
};
|
|
92
|
-
const progress = duration ? currentTime / duration * 100 : 0;
|
|
93
|
-
|
|
94
|
-
// 原生样式
|
|
95
|
-
if (audioStyle === 'native') {
|
|
96
|
-
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
97
|
-
className: styles.container,
|
|
98
|
-
ref: ref,
|
|
99
|
-
style: externalStyle,
|
|
100
|
-
children: /*#__PURE__*/jsxRuntime.jsx("audio", {
|
|
101
|
-
autoPlay: autoPlay,
|
|
102
|
-
className: styles.nativeAudio,
|
|
103
|
-
controls: true,
|
|
104
|
-
loop: loop,
|
|
105
|
-
ref: audioRef,
|
|
106
|
-
src: src
|
|
107
|
-
})
|
|
108
|
-
});
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
// 自定义样式
|
|
112
|
-
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
113
|
-
className: styles.container,
|
|
114
|
-
ref: ref,
|
|
115
|
-
style: externalStyle,
|
|
116
|
-
children: [/*#__PURE__*/jsxRuntime.jsx("audio", {
|
|
117
|
-
autoPlay: autoPlay,
|
|
118
|
-
loop: loop,
|
|
119
|
-
ref: audioRef,
|
|
120
|
-
src: src
|
|
121
|
-
}), /*#__PURE__*/jsxRuntime.jsx("button", {
|
|
122
|
-
"aria-label": isPlaying ? 'Pause' : 'Play',
|
|
123
|
-
className: styles.playButton,
|
|
124
|
-
onClick: togglePlay,
|
|
125
|
-
type: "button",
|
|
126
|
-
children: isPlaying ? /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
127
|
-
className: styles.pauseIcon,
|
|
128
|
-
children: [/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
129
|
-
className: styles.pauseBar
|
|
130
|
-
}), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
131
|
-
className: styles.pauseBar
|
|
132
|
-
})]
|
|
133
|
-
}) : /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
134
|
-
className: styles.playIcon
|
|
135
|
-
})
|
|
136
|
-
}), /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
137
|
-
className: styles.info,
|
|
138
|
-
children: [/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
139
|
-
className: styles.title,
|
|
140
|
-
children: title
|
|
141
|
-
}), /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
142
|
-
className: styles.progressContainer,
|
|
143
|
-
children: [/*#__PURE__*/jsxRuntime.jsx("button", {
|
|
144
|
-
"aria-label": "Seek to position",
|
|
145
|
-
className: styles.progressBar
|
|
146
|
-
// @ts-expect-error
|
|
147
|
-
,
|
|
148
|
-
onClick: handleProgressClick,
|
|
149
|
-
type: "button",
|
|
150
|
-
children: /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
151
|
-
className: styles.progressFill,
|
|
152
|
-
style: {
|
|
153
|
-
width: `${progress}%`
|
|
154
|
-
}
|
|
155
|
-
})
|
|
156
|
-
}), /*#__PURE__*/jsxRuntime.jsxs("span", {
|
|
157
|
-
className: styles.time,
|
|
158
|
-
children: [formatTime(currentTime), " / ", formatTime(duration || 0)]
|
|
159
|
-
})]
|
|
160
|
-
})]
|
|
161
|
-
})]
|
|
162
|
-
});
|
|
163
|
-
};
|
|
164
|
-
|
|
165
|
-
const MaterialGroup = {
|
|
166
|
-
MEDIA: 'media'};
|
|
167
|
-
|
|
168
|
-
const COMPONENT_NAME = 'EasyEditorMaterialsAudio';
|
|
169
|
-
const PACKAGE_NAME = '@easy-editor/materials-dashboard-audio';
|
|
170
|
-
|
|
171
|
-
const configure = {
|
|
172
|
-
props: [{
|
|
173
|
-
type: 'group',
|
|
174
|
-
title: '属性',
|
|
175
|
-
setter: 'TabSetter',
|
|
176
|
-
items: [{
|
|
177
|
-
type: 'group',
|
|
178
|
-
key: 'config',
|
|
179
|
-
title: '配置',
|
|
180
|
-
setter: {
|
|
181
|
-
componentName: 'CollapseSetter',
|
|
182
|
-
props: {
|
|
183
|
-
icon: false
|
|
184
|
-
}
|
|
185
|
-
},
|
|
186
|
-
items: [
|
|
187
|
-
{
|
|
188
|
-
name: 'id',
|
|
189
|
-
title: 'ID',
|
|
190
|
-
setter: 'NodeIdSetter',
|
|
191
|
-
extraProps: {
|
|
192
|
-
label: false
|
|
193
|
-
}
|
|
194
|
-
}, {
|
|
195
|
-
name: 'title',
|
|
196
|
-
title: '标题',
|
|
197
|
-
setter: 'StringSetter',
|
|
198
|
-
extraProps: {
|
|
199
|
-
getValue(target) {
|
|
200
|
-
return target.getExtraPropValue('title');
|
|
201
|
-
},
|
|
202
|
-
setValue(target, value) {
|
|
203
|
-
target.setExtraPropValue('title', value);
|
|
204
|
-
}
|
|
205
|
-
}
|
|
206
|
-
}, {
|
|
207
|
-
type: 'group',
|
|
208
|
-
title: '基础属性',
|
|
209
|
-
setter: {
|
|
210
|
-
componentName: 'CollapseSetter',
|
|
211
|
-
props: {
|
|
212
|
-
icon: false
|
|
213
|
-
}
|
|
214
|
-
},
|
|
215
|
-
items: [{
|
|
216
|
-
name: 'rect',
|
|
217
|
-
title: '位置尺寸',
|
|
218
|
-
setter: 'RectSetter',
|
|
219
|
-
extraProps: {
|
|
220
|
-
getValue(target) {
|
|
221
|
-
return target.getExtraPropValue('$dashboard.rect');
|
|
222
|
-
},
|
|
223
|
-
setValue(target, value) {
|
|
224
|
-
target.setExtraPropValue('$dashboard.rect', value);
|
|
225
|
-
}
|
|
226
|
-
}
|
|
227
|
-
}]
|
|
228
|
-
},
|
|
229
|
-
{
|
|
230
|
-
type: 'group',
|
|
231
|
-
title: '内容',
|
|
232
|
-
setter: {
|
|
233
|
-
componentName: 'CollapseSetter',
|
|
234
|
-
props: {
|
|
235
|
-
icon: false
|
|
236
|
-
}
|
|
237
|
-
},
|
|
238
|
-
items: [{
|
|
239
|
-
name: '__upload',
|
|
240
|
-
title: '上传',
|
|
241
|
-
setter: {
|
|
242
|
-
componentName: 'UploadSetter',
|
|
243
|
-
props: {
|
|
244
|
-
accept: '.mp3,.wav,.ogg'
|
|
245
|
-
}
|
|
246
|
-
},
|
|
247
|
-
extraProps: {
|
|
248
|
-
setValue(target, value) {
|
|
249
|
-
if (value) {
|
|
250
|
-
const {
|
|
251
|
-
base64,
|
|
252
|
-
raw
|
|
253
|
-
} = value;
|
|
254
|
-
if (base64) {
|
|
255
|
-
target.parent.setPropValue('src', base64);
|
|
256
|
-
}
|
|
257
|
-
if (raw?.width) {
|
|
258
|
-
target.parent.setExtraPropValue('$dashboard.rect.width', raw.width);
|
|
259
|
-
}
|
|
260
|
-
if (raw?.height) {
|
|
261
|
-
target.parent.setExtraPropValue('$dashboard.rect.height', raw.height);
|
|
262
|
-
}
|
|
263
|
-
} else {
|
|
264
|
-
target.parent.clearPropValue('src');
|
|
265
|
-
}
|
|
266
|
-
}
|
|
267
|
-
}
|
|
268
|
-
}, {
|
|
269
|
-
name: 'src',
|
|
270
|
-
title: '音频地址',
|
|
271
|
-
setter: 'StringSetter'
|
|
272
|
-
}, {
|
|
273
|
-
name: 'title',
|
|
274
|
-
title: '标题',
|
|
275
|
-
setter: 'StringSetter',
|
|
276
|
-
extraProps: {
|
|
277
|
-
defaultValue: '音频文件'
|
|
278
|
-
}
|
|
279
|
-
}]
|
|
280
|
-
}, {
|
|
281
|
-
type: 'group',
|
|
282
|
-
title: '播放',
|
|
283
|
-
setter: {
|
|
284
|
-
componentName: 'CollapseSetter',
|
|
285
|
-
props: {
|
|
286
|
-
icon: false
|
|
287
|
-
}
|
|
288
|
-
},
|
|
289
|
-
items: [{
|
|
290
|
-
name: 'autoPlay',
|
|
291
|
-
title: '自动播放',
|
|
292
|
-
setter: 'SwitchSetter',
|
|
293
|
-
extraProps: {
|
|
294
|
-
defaultValue: false
|
|
295
|
-
}
|
|
296
|
-
}, {
|
|
297
|
-
name: 'loop',
|
|
298
|
-
title: '循环播放',
|
|
299
|
-
setter: 'SwitchSetter',
|
|
300
|
-
extraProps: {
|
|
301
|
-
defaultValue: false
|
|
302
|
-
}
|
|
303
|
-
}, {
|
|
304
|
-
name: 'audioStyle',
|
|
305
|
-
title: '样式类型',
|
|
306
|
-
setter: {
|
|
307
|
-
componentName: 'SelectSetter',
|
|
308
|
-
props: {
|
|
309
|
-
options: [{
|
|
310
|
-
label: '自定义',
|
|
311
|
-
value: 'custom'
|
|
312
|
-
}, {
|
|
313
|
-
label: '原生',
|
|
314
|
-
value: 'native'
|
|
315
|
-
}]
|
|
316
|
-
}
|
|
317
|
-
},
|
|
318
|
-
extraProps: {
|
|
319
|
-
defaultValue: 'custom'
|
|
320
|
-
}
|
|
321
|
-
}, {
|
|
322
|
-
name: 'playbackRate',
|
|
323
|
-
title: '播放速度',
|
|
324
|
-
setter: {
|
|
325
|
-
componentName: 'SelectSetter',
|
|
326
|
-
props: {
|
|
327
|
-
options: [{
|
|
328
|
-
label: '0.5x',
|
|
329
|
-
value: 0.5
|
|
330
|
-
}, {
|
|
331
|
-
label: '0.75x',
|
|
332
|
-
value: 0.75
|
|
333
|
-
}, {
|
|
334
|
-
label: '1x (正常)',
|
|
335
|
-
value: 1
|
|
336
|
-
}, {
|
|
337
|
-
label: '1.25x',
|
|
338
|
-
value: 1.25
|
|
339
|
-
}, {
|
|
340
|
-
label: '1.5x',
|
|
341
|
-
value: 1.5
|
|
342
|
-
}, {
|
|
343
|
-
label: '2x',
|
|
344
|
-
value: 2
|
|
345
|
-
}]
|
|
346
|
-
}
|
|
347
|
-
},
|
|
348
|
-
extraProps: {
|
|
349
|
-
defaultValue: 1
|
|
350
|
-
}
|
|
351
|
-
}, {
|
|
352
|
-
name: 'volume',
|
|
353
|
-
title: '音量',
|
|
354
|
-
setter: {
|
|
355
|
-
componentName: 'SliderSetter',
|
|
356
|
-
props: {
|
|
357
|
-
min: 0,
|
|
358
|
-
max: 100,
|
|
359
|
-
step: 1,
|
|
360
|
-
suffix: '%'
|
|
361
|
-
}
|
|
362
|
-
},
|
|
363
|
-
extraProps: {
|
|
364
|
-
defaultValue: 100
|
|
365
|
-
}
|
|
366
|
-
}]
|
|
367
|
-
}]
|
|
368
|
-
}, {
|
|
369
|
-
type: 'group',
|
|
370
|
-
key: 'data',
|
|
371
|
-
title: '数据',
|
|
372
|
-
items: [{
|
|
373
|
-
name: 'dataBinding',
|
|
374
|
-
title: '数据绑定',
|
|
375
|
-
setter: 'DataBindingSetter'
|
|
376
|
-
}]
|
|
377
|
-
}, {
|
|
378
|
-
type: 'group',
|
|
379
|
-
key: 'advanced',
|
|
380
|
-
title: '高级',
|
|
381
|
-
items: [{
|
|
382
|
-
name: 'condition',
|
|
383
|
-
title: '显隐控制',
|
|
384
|
-
setter: 'SwitchSetter',
|
|
385
|
-
extraProps: {
|
|
386
|
-
defaultValue: true,
|
|
387
|
-
supportVariable: true
|
|
388
|
-
}
|
|
389
|
-
}]
|
|
390
|
-
}]
|
|
391
|
-
}],
|
|
392
|
-
component: {},
|
|
393
|
-
supports: {},
|
|
394
|
-
advanced: {}
|
|
395
|
-
};
|
|
396
|
-
|
|
397
|
-
const snippets = [{
|
|
398
|
-
title: '音频播放器',
|
|
399
|
-
screenshot: '',
|
|
400
|
-
schema: {
|
|
401
|
-
componentName: COMPONENT_NAME,
|
|
402
|
-
props: {
|
|
403
|
-
src: '',
|
|
404
|
-
title: '音频文件',
|
|
405
|
-
autoPlay: false,
|
|
406
|
-
loop: false,
|
|
407
|
-
audioStyle: 'custom'
|
|
408
|
-
},
|
|
409
|
-
$dashboard: {
|
|
410
|
-
rect: {
|
|
411
|
-
width: 300,
|
|
412
|
-
height: 60
|
|
413
|
-
}
|
|
414
|
-
}
|
|
415
|
-
}
|
|
416
|
-
}, {
|
|
417
|
-
title: '原生音频',
|
|
418
|
-
screenshot: '',
|
|
419
|
-
schema: {
|
|
420
|
-
componentName: COMPONENT_NAME,
|
|
421
|
-
props: {
|
|
422
|
-
src: '',
|
|
423
|
-
title: '音频文件',
|
|
424
|
-
audioStyle: 'native'
|
|
425
|
-
},
|
|
426
|
-
$dashboard: {
|
|
427
|
-
rect: {
|
|
428
|
-
width: 300,
|
|
429
|
-
height: 60
|
|
430
|
-
}
|
|
431
|
-
}
|
|
432
|
-
}
|
|
433
|
-
}];
|
|
434
|
-
|
|
435
|
-
var version = "0.0.2";
|
|
436
|
-
var pkg = {
|
|
437
|
-
version: version};
|
|
438
|
-
|
|
439
|
-
const meta = {
|
|
440
|
-
componentName: COMPONENT_NAME,
|
|
441
|
-
title: '音频',
|
|
442
|
-
group: MaterialGroup.MEDIA,
|
|
443
|
-
devMode: 'proCode',
|
|
444
|
-
npm: {
|
|
445
|
-
package: PACKAGE_NAME,
|
|
446
|
-
version: pkg.version,
|
|
447
|
-
globalName: COMPONENT_NAME,
|
|
448
|
-
componentName: COMPONENT_NAME
|
|
449
|
-
},
|
|
450
|
-
snippets,
|
|
451
|
-
configure
|
|
452
|
-
};
|
|
453
|
-
|
|
454
|
-
exports.component = Audio;
|
|
455
|
-
exports.meta = meta;
|
|
456
|
-
//# sourceMappingURL=index.cjs.map
|