From 8221c638f84db20b675dceddedb4677af1607b3c Mon Sep 17 00:00:00 2001
From: catchonme <catchonme@163.com>
Date: Sun, 5 May 2019 14:45:12 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=20audio=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/renderers.md           | 32 +++++++++++++++++++++++++++-----
 scss/components/_audio.scss |  5 +++++
 src/renderers/Audio.tsx     | 23 +++++++++++++----------
 3 files changed, 45 insertions(+), 15 deletions(-)

diff --git a/docs/renderers.md b/docs/renderers.md
index b5ec825d..77f13625 100644
--- a/docs/renderers.md
+++ b/docs/renderers.md
@@ -77,7 +77,7 @@ Json 配置最外层是一个 `Page` 渲染器。他主要包含标题，副标
 |---|---|---|---|
 | type | `string` |  |  `"form"` 指定为 Form 渲染器 |
 | mode | `string` | `normal` | 表单展示方式，可以是：`normal`、`horizontal` 或者 `inline` [示例](/docs/demo/forms/mode) |
-| horizontal | `Object` | `{"left":"col-sm-2", "right":"col-sm-10", "offset":"col-sm-offset-2"}` | 当 mode 为 `horizontal` 时有用，用来控制 label | 
+| horizontal | `Object` | `{"left":"col-sm-2", "right":"col-sm-10", "offset":"col-sm-offset-2"}` | 当 mode 为 `horizontal` 时有用，用来控制 label |
 | title | `string` | `"表单"` | Form 的标题 |
 | submitText | `String` | `"提交"` | 默认的提交按钮名称，如果设置成空，则可以把默认按钮去掉。 |
 | className | `string` |  | 外层 Dom 的类名 |
@@ -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
 
 视频播放器。
diff --git a/scss/components/_audio.scss b/scss/components/_audio.scss
index a9b9b325..3f5511f2 100644
--- a/scss/components/_audio.scss
+++ b/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;
diff --git a/src/renderers/Audio.tsx b/src/renderers/Audio.tsx
index 8a9c2491..12b53e6e 100644
--- a/src/renderers/Audio.tsx
+++ b/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)}>
-                    {rates ? <div className={cx('Audio-rates')}>
+                {isReady ? (<div className={cx('Audio', className)}>
+                    {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>
+                                )} </div>) : null}
+                            </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>
         );
     }