优化 audio 组件

docs/renderers.md

@@ -2925,7 +2925,7 @@ Action 是一种特殊的渲染器，它本身是一个按钮，同时它能触
         "link": "/docs/index"
       }
     }
-    ```
+  ```
 * `url` 当按钮点击后，新窗口打开指定页面。
 
   ```schema:height="200"
@@ -2938,7 +2938,7 @@ Action 是一种特殊的渲染器，它本身是一个按钮，同时它能触
         "url": "raw:http://www.baidu.com"
       }
     }
-    ```
+  ```
 * `dialog` 当按钮点击后，弹出一个对话框。 关于 dialog 配置，请查看 [Dialog 模型](#dialog)。
 
   ```schema:height="200"
@@ -2964,7 +2964,7 @@ Action 是一种特殊的渲染器，它本身是一个按钮，同时它能触
         }
       }
     }
-    ```
+  ```
 
 * `drawer` 当按钮点击后，弹出一个抽出式对话框。 关于 drawer 配置，请查看 [Drawer 模型](#drawer)。
 
@@ -2991,7 +2991,7 @@ Action 是一种特殊的渲染器，它本身是一个按钮，同时它能触
         }
       }
     }
-    ```
+  ```
 
 ## Dialog
 
@@ -3465,6 +3465,28 @@ CRUD 支持三种模式：`table`、`cards`、`list`，默认为 `table`。
 }
 ```
 
+## Audio
+
+音频播放器
+
+|属性名 | 类型 | 默认值 | 说明 |
+|---|---|---|---|
+| type | `string` | `"audio"`  |   指定为 audio 渲染器 |
+| className | `string` |  |  外层 Dom 的类名 |
+| inline | `boolean` | true |  是否是内联模式 |
+| src | `string` |  |  音频地址 |
+| loop | `boolean` | false |  是否循环播放 |
+| autoPlay | `boolean` | false |  是否自动播放 |
+| rates | `array` | `[1.0, 2.0, 4.0]` | 加速播放 |
+
+```schema:height="500" scope="body"
+{
+    "type": "audio",
+    "autoPlay": false,
+    "src": ""
+}
+```
+
 ## Video
 
 视频播放器。

scss/components/_audio.scss

@@ -35,11 +35,16 @@
     display: none;
 }
 
+.#{$ns}Audio--inline {
+    display: inline;
+}
+
 .#{$ns}Audio {
     width: $Audio-width;
     height: $Audio-height;
     line-height: $Audio-lineHeight;
     border: $Audio-border;
+    display: inline-block;
     &-rates {
         display: inline-block;
         position: relative;

src/renderers/Audio.tsx

@@ -8,6 +8,7 @@ import { volumeIcon, muteIcon, playIcon, pauseIcon} from '../components/icons';
 
 export interface AudioProps extends RendererProps {
     className?: string;
+    inline?: boolean,
     src?: string,
     autoPlay?: boolean,
     loop?: boolean,
@@ -32,7 +33,8 @@ export class Audio extends React.Component<AudioProps, AudioState> {
     audio: any;
     progressTimeout: any;
 
-    static defaultProps:Partial<AudioProps> = {
+    static defaultProps:Pick<AudioProps, 'inline' | 'autoPlay' | 'playbackRate' | 'loop' | 'rates' | 'progressInterval'> = {
+        inline: true,
         autoPlay: false,
         playbackRate: 1,
         loop: false,
@@ -215,6 +217,7 @@ export class Audio extends React.Component<AudioProps, AudioState> {
     render() {
         const {
             className,
+            inline,
             src,
             autoPlay,
             loop,
@@ -233,7 +236,7 @@ export class Audio extends React.Component<AudioProps, AudioState> {
         } = this.state;
 
         return (
-            <div>
+            <div className={cx(inline ? 'Audio--inline' : '')}>
                 <audio
                     className={cx('Audio-original')}
                     ref={this.audioRef}
@@ -244,21 +247,21 @@ export class Audio extends React.Component<AudioProps, AudioState> {
                     loop={loop}>
                     <source src={src}/>
                 </audio>
-                {isReady ? <div className={cx('Audio', className)}>
+                {isReady ? (<div className={cx('Audio', className)}>
-                    {rates ? <div className={cx('Audio-rates')}>
+                    {rates ? (<div className={cx('Audio-rates')}>
                                 <div className={cx('Audio-rate')}
                                      onClick={this.toggleHandlePlaybackRate}>
                                     x{playbackRate.toFixed(1)}
                                 </div>
-                                {showHandlePlaybackRate ? <div className={cx('Audio-rateControl')}>
+                                {showHandlePlaybackRate ? (<div className={cx('Audio-rateControl')}>
                                     {rates.map((rate, index) =>
                                         <span className={cx('Audio-rateControlItem')}
                                             key={index}
                                             onClick={() => this.handlePlaybackRate(rate)}>
                                             x{rate.toFixed(1)}
                                         </span>
-                                )} </div> : null}
+                                )} </div>) : null}
-                            </div>
+                            </div>)
                         : null }
                     <div className={cx('Audio-play')} onClick={this.handlePlaying}>
                         {playing ? pauseIcon : playIcon}
@@ -277,7 +280,7 @@ export class Audio extends React.Component<AudioProps, AudioState> {
                          onMouseEnter={() => this.toggleHandleVolume(true)}
                          onMouseLeave={() => this.toggleHandleVolume(false)}>
                         {showHandleVolume ?
-                            <div className={cx('Audio-volumeControl')}>
+                            (<div className={cx('Audio-volumeControl')}>
                                 <input
                                     type='range' min={0} max={1} step='any'
                                     value={volume}
@@ -285,10 +288,10 @@ export class Audio extends React.Component<AudioProps, AudioState> {
                                 <div className={cx('Audio-volumeControlIcon')}
                                      onClick={this.handleMute}>
                                     {volume > 0 ? volumeIcon : muteIcon}
-                                    </div></div>
+                                    </div></div>)
                             : volume > 0 ? volumeIcon : muteIcon}
                     </div>
-                </div> : null}
+                </div>) : null}
             </div>
         );
     }