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

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.
@@ -1,165 +0,0 @@
1
- /* @easy-editor/materials-dashboard-audio v0.0.2 (component, esm) */
2
- import { useRef, useState, useEffect } from 'react';
3
- import { jsx, jsxs } from 'react/jsx-runtime';
4
-
5
- function styleInject(css, ref) {
6
- if (ref === void 0) ref = {};
7
- var insertAt = ref.insertAt;
8
- if (typeof document === 'undefined') {
9
- return;
10
- }
11
- var head = document.head || document.getElementsByTagName('head')[0];
12
- var style = document.createElement('style');
13
- style.type = 'text/css';
14
- if (insertAt === 'top') {
15
- if (head.firstChild) {
16
- head.insertBefore(style, head.firstChild);
17
- } else {
18
- head.appendChild(style);
19
- }
20
- } else {
21
- head.appendChild(style);
22
- }
23
- if (style.styleSheet) {
24
- style.styleSheet.cssText = css;
25
- } else {
26
- style.appendChild(document.createTextNode(css));
27
- }
28
- }
29
-
30
- 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%}";
31
- 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"};
32
- styleInject(css_248z);
33
-
34
- /**
35
- * Audio Component
36
- * 音频播放组件
37
- */
38
-
39
- const formatTime = seconds => {
40
- const mins = Math.floor(seconds / 60);
41
- const secs = Math.floor(seconds % 60);
42
- return `${mins}:${secs.toString().padStart(2, '0')}`;
43
- };
44
- const Audio = ({
45
- ref,
46
- src = '',
47
- title = '音频文件',
48
- autoPlay = false,
49
- loop = false,
50
- audioStyle = 'custom',
51
- style: externalStyle
52
- }) => {
53
- const audioRef = useRef(null);
54
- const [isPlaying, setIsPlaying] = useState(false);
55
- const [currentTime, setCurrentTime] = useState(0);
56
- const [duration, setDuration] = useState(0);
57
- useEffect(() => {
58
- const audio = audioRef.current;
59
- if (!audio) {
60
- return;
61
- }
62
- const handleTimeUpdate = () => setCurrentTime(audio.currentTime);
63
- const handleLoadedMetadata = () => setDuration(audio.duration);
64
- const handleEnded = () => setIsPlaying(false);
65
- audio.addEventListener('timeupdate', handleTimeUpdate);
66
- audio.addEventListener('loadedmetadata', handleLoadedMetadata);
67
- audio.addEventListener('ended', handleEnded);
68
- return () => {
69
- audio.removeEventListener('timeupdate', handleTimeUpdate);
70
- audio.removeEventListener('loadedmetadata', handleLoadedMetadata);
71
- audio.removeEventListener('ended', handleEnded);
72
- };
73
- }, []);
74
- const togglePlay = () => {
75
- if (audioRef.current) {
76
- if (isPlaying) {
77
- audioRef.current.pause();
78
- } else {
79
- audioRef.current.play();
80
- }
81
- setIsPlaying(!isPlaying);
82
- }
83
- };
84
- const handleProgressClick = e => {
85
- if (audioRef.current && duration) {
86
- const rect = e.currentTarget.getBoundingClientRect();
87
- const percent = (e.clientX - rect.left) / rect.width;
88
- audioRef.current.currentTime = percent * duration;
89
- }
90
- };
91
- const progress = duration ? currentTime / duration * 100 : 0;
92
-
93
- // 原生样式
94
- if (audioStyle === 'native') {
95
- return /*#__PURE__*/jsx("div", {
96
- className: styles.container,
97
- ref: ref,
98
- style: externalStyle,
99
- children: /*#__PURE__*/jsx("audio", {
100
- autoPlay: autoPlay,
101
- className: styles.nativeAudio,
102
- controls: true,
103
- loop: loop,
104
- ref: audioRef,
105
- src: src
106
- })
107
- });
108
- }
109
-
110
- // 自定义样式
111
- return /*#__PURE__*/jsxs("div", {
112
- className: styles.container,
113
- ref: ref,
114
- style: externalStyle,
115
- children: [/*#__PURE__*/jsx("audio", {
116
- autoPlay: autoPlay,
117
- loop: loop,
118
- ref: audioRef,
119
- src: src
120
- }), /*#__PURE__*/jsx("button", {
121
- "aria-label": isPlaying ? 'Pause' : 'Play',
122
- className: styles.playButton,
123
- onClick: togglePlay,
124
- type: "button",
125
- children: isPlaying ? /*#__PURE__*/jsxs("div", {
126
- className: styles.pauseIcon,
127
- children: [/*#__PURE__*/jsx("div", {
128
- className: styles.pauseBar
129
- }), /*#__PURE__*/jsx("div", {
130
- className: styles.pauseBar
131
- })]
132
- }) : /*#__PURE__*/jsx("div", {
133
- className: styles.playIcon
134
- })
135
- }), /*#__PURE__*/jsxs("div", {
136
- className: styles.info,
137
- children: [/*#__PURE__*/jsx("div", {
138
- className: styles.title,
139
- children: title
140
- }), /*#__PURE__*/jsxs("div", {
141
- className: styles.progressContainer,
142
- children: [/*#__PURE__*/jsx("button", {
143
- "aria-label": "Seek to position",
144
- className: styles.progressBar
145
- // @ts-expect-error
146
- ,
147
- onClick: handleProgressClick,
148
- type: "button",
149
- children: /*#__PURE__*/jsx("div", {
150
- className: styles.progressFill,
151
- style: {
152
- width: `${progress}%`
153
- }
154
- })
155
- }), /*#__PURE__*/jsxs("span", {
156
- className: styles.time,
157
- children: [formatTime(currentTime), " / ", formatTime(duration || 0)]
158
- })]
159
- })]
160
- })]
161
- });
162
- };
163
-
164
- export { Audio, Audio as default };
165
- //# sourceMappingURL=component.esm.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"component.esm.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]}
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
@@ -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":";;;;;;;EAAA,SAASA,WAAWA,CAACC,GAAG,EAAEC,GAAG,EAAE;IAC7B,IAAKA,GAAG,KAAK,MAAM,EAAGA,GAAG,GAAG,EAAE;EAC9B,EAAA,IAAIC,QAAQ,GAAGD,GAAG,CAACC,QAAQ;EAE3B,EAAA,IAAY,OAAOC,QAAQ,KAAK,WAAW,EAAE;EAAE,IAAA;EAAQ,EAAA;EAEvD,EAAA,IAAIC,IAAI,GAAGD,QAAQ,CAACC,IAAI,IAAID,QAAQ,CAACE,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;EACpE,EAAA,IAAIC,KAAK,GAAGH,QAAQ,CAACI,aAAa,CAAC,OAAO,CAAC;IAC3CD,KAAK,CAACE,IAAI,GAAG,UAAU;IAEvB,IAAIN,QAAQ,KAAK,KAAK,EAAE;MACtB,IAAIE,IAAI,CAACK,UAAU,EAAE;QACnBL,IAAI,CAACM,YAAY,CAACJ,KAAK,EAAEF,IAAI,CAACK,UAAU,CAAC;EAC3C,IAAA,CAAC,MAAM;EACLL,MAAAA,IAAI,CAACO,WAAW,CAACL,KAAK,CAAC;EACzB,IAAA;EACF,EAAA,CAAC,MAAM;EACLF,IAAAA,IAAI,CAACO,WAAW,CAACL,KAAK,CAAC;EACzB,EAAA;IAEA,IAAIA,KAAK,CAACM,UAAU,EAAE;EACpBN,IAAAA,KAAK,CAACM,UAAU,CAACC,OAAO,GAAGb,GAAG;EAChC,EAAA,CAAC,MAAM;MACLM,KAAK,CAACK,WAAW,CAACR,QAAQ,CAACW,cAAc,CAACd,GAAG,CAAC,CAAC;EACjD,EAAA;EACF;;;;;;ECzBA;EACA;EACA;EACA;;EAuBA,MAAMe,UAAU,GAAIC,OAAe,IAAa;IAC9C,MAAMC,IAAI,GAAGC,IAAI,CAACC,KAAK,CAACH,OAAO,GAAG,EAAE,CAAC;IACrC,MAAMI,IAAI,GAAGF,IAAI,CAACC,KAAK,CAACH,OAAO,GAAG,EAAE,CAAC;EACrC,EAAA,OAAO,CAAA,EAAGC,IAAI,CAAA,CAAA,EAAIG,IAAI,CAACC,QAAQ,EAAE,CAACC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA,CAAE;EACtD,CAAC;AAEM,QAAMC,KAA2B,GAAGA,CAAC;IAC1CtB,GAAG;EACHuB,EAAAA,GAAG,GAAG,EAAE;EACRC,EAAAA,KAAK,GAAG,MAAM;EACdC,EAAAA,QAAQ,GAAG,KAAK;EAChBC,EAAAA,IAAI,GAAG,KAAK;EACZC,EAAAA,UAAU,GAAG,QAAQ;EACrBtB,EAAAA,KAAK,EAAEuB;EACT,CAAC,KAAK;EACJ,EAAA,MAAMC,QAAQ,GAAGC,YAAM,CAAmB,IAAI,CAAC;IAC/C,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;IACjD,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGF,cAAQ,CAAC,CAAC,CAAC;IACjD,MAAM,CAACG,QAAQ,EAAEC,WAAW,CAAC,GAAGJ,cAAQ,CAAC,CAAC,CAAC;EAE3CK,EAAAA,eAAS,CAAC,MAAM;EACd,IAAA,MAAMC,KAAK,GAAGV,QAAQ,CAACW,OAAO;MAC9B,IAAI,CAACD,KAAK,EAAE;EACV,MAAA;EACF,IAAA;MAEA,MAAME,gBAAgB,GAAGA,MAAMN,cAAc,CAACI,KAAK,CAACL,WAAW,CAAC;MAChE,MAAMQ,oBAAoB,GAAGA,MAAML,WAAW,CAACE,KAAK,CAACH,QAAQ,CAAC;EAC9D,IAAA,MAAMO,WAAW,GAAGA,MAAMX,YAAY,CAAC,KAAK,CAAC;EAE7CO,IAAAA,KAAK,CAACK,gBAAgB,CAAC,YAAY,EAAEH,gBAAgB,CAAC;EACtDF,IAAAA,KAAK,CAACK,gBAAgB,CAAC,gBAAgB,EAAEF,oBAAoB,CAAC;EAC9DH,IAAAA,KAAK,CAACK,gBAAgB,CAAC,OAAO,EAAED,WAAW,CAAC;EAE5C,IAAA,OAAO,MAAM;EACXJ,MAAAA,KAAK,CAACM,mBAAmB,CAAC,YAAY,EAAEJ,gBAAgB,CAAC;EACzDF,MAAAA,KAAK,CAACM,mBAAmB,CAAC,gBAAgB,EAAEH,oBAAoB,CAAC;EACjEH,MAAAA,KAAK,CAACM,mBAAmB,CAAC,OAAO,EAAEF,WAAW,CAAC;MACjD,CAAC;IACH,CAAC,EAAE,EAAE,CAAC;IAEN,MAAMG,UAAU,GAAGA,MAAM;MACvB,IAAIjB,QAAQ,CAACW,OAAO,EAAE;EACpB,MAAA,IAAIT,SAAS,EAAE;EACbF,QAAAA,QAAQ,CAACW,OAAO,CAACO,KAAK,EAAE;EAC1B,MAAA,CAAC,MAAM;EACLlB,QAAAA,QAAQ,CAACW,OAAO,CAACQ,IAAI,EAAE;EACzB,MAAA;QACAhB,YAAY,CAAC,CAACD,SAAS,CAAC;EAC1B,IAAA;IACF,CAAC;IAED,MAAMkB,mBAAmB,GAAIC,CAAmC,IAAK;EACnE,IAAA,IAAIrB,QAAQ,CAACW,OAAO,IAAIJ,QAAQ,EAAE;QAChC,MAAMe,IAAI,GAAGD,CAAC,CAACE,aAAa,CAACC,qBAAqB,EAAE;EACpD,MAAA,MAAMC,OAAO,GAAG,CAACJ,CAAC,CAACK,OAAO,GAAGJ,IAAI,CAACK,IAAI,IAAIL,IAAI,CAACM,KAAK;EACpD5B,MAAAA,QAAQ,CAACW,OAAO,CAACN,WAAW,GAAGoB,OAAO,GAAGlB,QAAQ;EACnD,IAAA;IACF,CAAC;IAED,MAAMsB,QAAQ,GAAGtB,QAAQ,GAAIF,WAAW,GAAGE,QAAQ,GAAI,GAAG,GAAG,CAAC;;EAE9D;IACA,IAAIT,UAAU,KAAK,QAAQ,EAAE;EAC3B,IAAA,oBACEgC,cAAA,CAAA,KAAA,EAAA;QAAKC,SAAS,EAAEC,MAAM,CAACC,SAAU;EAAC9D,MAAAA,GAAG,EAAEA,GAAI;EAACK,MAAAA,KAAK,EAAEuB,aAAc;EAAAmC,MAAAA,QAAA,eAC/DJ,cAAA,CAAA,OAAA,EAAA;EAAOlC,QAAAA,QAAQ,EAAEA,QAAS;UAACmC,SAAS,EAAEC,MAAM,CAACG,WAAY;UAACC,QAAQ,EAAA,IAAA;EAACvC,QAAAA,IAAI,EAAEA,IAAK;EAAC1B,QAAAA,GAAG,EAAE6B,QAAS;EAACN,QAAAA,GAAG,EAAEA;SAAM;EAAC,KACvG,CAAC;EAEV,EAAA;;EAEA;EACA,EAAA,oBACE2C,eAAA,CAAA,KAAA,EAAA;MAAKN,SAAS,EAAEC,MAAM,CAACC,SAAU;EAAC9D,IAAAA,GAAG,EAAEA,GAAI;EAACK,IAAAA,KAAK,EAAEuB,aAAc;EAAAmC,IAAAA,QAAA,gBAC/DJ,cAAA,CAAA,OAAA,EAAA;EAAOlC,MAAAA,QAAQ,EAAEA,QAAS;EAACC,MAAAA,IAAI,EAAEA,IAAK;EAAC1B,MAAAA,GAAG,EAAE6B,QAAS;EAACN,MAAAA,GAAG,EAAEA;OAAM,CAAC,eAElEoC,cAAA,CAAA,QAAA,EAAA;EACE,MAAA,YAAA,EAAY5B,SAAS,GAAG,OAAO,GAAG,MAAO;QACzC6B,SAAS,EAAEC,MAAM,CAACM,UAAW;EAC7BC,MAAAA,OAAO,EAAEtB,UAAW;EACpBvC,MAAAA,IAAI,EAAC,QAAQ;QAAAwD,QAAA,EAEZhC,SAAS,gBACRmC,eAAA,CAAA,KAAA,EAAA;UAAKN,SAAS,EAAEC,MAAM,CAACQ,SAAU;EAAAN,QAAAA,QAAA,gBAC/BJ,cAAA,CAAA,KAAA,EAAA;YAAKC,SAAS,EAAEC,MAAM,CAACS;WAAW,CAAC,eACnCX,cAAA,CAAA,KAAA,EAAA;YAAKC,SAAS,EAAEC,MAAM,CAACS;EAAS,SAAE,CAAC;SAChC,CAAC,gBAENX,cAAA,CAAA,KAAA,EAAA;UAAKC,SAAS,EAAEC,MAAM,CAACU;SAAW;OAE9B,CAAC,eAETL,eAAA,CAAA,KAAA,EAAA;QAAKN,SAAS,EAAEC,MAAM,CAACW,IAAK;EAAAT,MAAAA,QAAA,gBAC1BJ,cAAA,CAAA,KAAA,EAAA;UAAKC,SAAS,EAAEC,MAAM,CAACrC,KAAM;EAAAuC,QAAAA,QAAA,EAAEvC;SAAW,CAAC,eAC3C0C,eAAA,CAAA,KAAA,EAAA;UAAKN,SAAS,EAAEC,MAAM,CAACY,iBAAkB;EAAAV,QAAAA,QAAA,gBACvCJ,cAAA,CAAA,QAAA,EAAA;EACE,UAAA,YAAA,EAAW,kBAAkB;YAC7BC,SAAS,EAAEC,MAAM,CAACa;EAClB;EAAA;EACAN,UAAAA,OAAO,EAAEnB,mBAAoB;EAC7B1C,UAAAA,IAAI,EAAC,QAAQ;EAAAwD,UAAAA,QAAA,eAEbJ,cAAA,CAAA,KAAA,EAAA;cAAKC,SAAS,EAAEC,MAAM,CAACc,YAAa;EAACtE,YAAAA,KAAK,EAAE;gBAAEoD,KAAK,EAAE,GAAGC,QAAQ,CAAA,CAAA;EAAI;aAAI;WAClE,CAAC,eACTQ,eAAA,CAAA,MAAA,EAAA;YAAMN,SAAS,EAAEC,MAAM,CAACe,IAAK;EAAAb,UAAAA,QAAA,EAAA,CAC1BjD,UAAU,CAACoB,WAAW,CAAC,EAAC,KAAG,EAACpB,UAAU,CAACsB,QAAQ,IAAI,CAAC,CAAC;EAAA,SAClD,CAAC;EAAA,OACJ,CAAC;EAAA,KACH,CAAC;EAAA,GACH,CAAC;EAEV;;;;;;;;;;;","x_google_ignoreList":[0]}
@@ -1,2 +0,0 @@
1
- !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";var n="component-module__container___VbZSk",r="component-module__playButton___M6QVA",i="component-module__playIcon___t8-WV",a="component-module__pauseIcon___8XmSk",s="component-module__pauseBar___eM6DG",d="component-module__info___VyTlr",l="component-module__title___Hj54k",_="component-module__progressContainer___HvygE",c="component-module__progressBar___wROZC",u="component-module__progressFill___F8n5d",p="component-module__time___-5GMu",m="component-module__nativeAudio___vCo17";!function(e,t){void 0===t&&(t={});var o=t.insertAt;if("undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===o&&n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.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 f=e=>`${Math.floor(e/60)}:${Math.floor(e%60).toString().padStart(2,"0")}`,x=({ref:e,src:x="",title:h="音频文件",autoPlay:g=!1,loop:y=!1,audioStyle:b="custom",style:v})=>{const j=t.useRef(null),[w,N]=t.useState(!1),[C,k]=t.useState(0),[E,S]=t.useState(0);t.useEffect(()=>{const e=j.current;if(!e)return;const t=()=>k(e.currentTime),o=()=>S(e.duration),n=()=>N(!1);return e.addEventListener("timeupdate",t),e.addEventListener("loadedmetadata",o),e.addEventListener("ended",n),()=>{e.removeEventListener("timeupdate",t),e.removeEventListener("loadedmetadata",o),e.removeEventListener("ended",n)}},[]);const M=E?C/E*100:0;return"native"===b?o.jsx("div",{className:n,ref:e,style:v,children:o.jsx("audio",{autoPlay:g,className:m,controls:!0,loop:y,ref:j,src:x})}):o.jsxs("div",{className:n,ref:e,style:v,children:[o.jsx("audio",{autoPlay:g,loop:y,ref:j,src:x}),o.jsx("button",{"aria-label":w?"Pause":"Play",className:r,onClick:()=>{j.current&&(w?j.current.pause():j.current.play(),N(!w))},type:"button",children:w?o.jsxs("div",{className:a,children:[o.jsx("div",{className:s}),o.jsx("div",{className:s})]}):o.jsx("div",{className:i})}),o.jsxs("div",{className:d,children:[o.jsx("div",{className:l,children:h}),o.jsxs("div",{className:_,children:[o.jsx("button",{"aria-label":"Seek to position",className:c,onClick:e=>{if(j.current&&E){const t=e.currentTarget.getBoundingClientRect(),o=(e.clientX-t.left)/t.width;j.current.currentTime=o*E}},type:"button",children:o.jsx("div",{className:u,style:{width:`${M}%`}})}),o.jsxs("span",{className:p,children:[f(C)," / ",f(E||0)]})]})]})]})};e.Audio=x,e.default=x,Object.defineProperty(e,"__esModule",{value:!0})});
2
- //# sourceMappingURL=component.min.js.map
@@ -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]}