优化audio布局

scss/_variables.scss

@@ -1318,10 +1318,9 @@ $Audio-times-width: px2rem(75px) !default;
 $Audio-times-margin: 0 px2rem(5px) !default;
 $Audio-process-width: px2rem(80px) !default;
 $Audio-volume-width: px2rem(20px) !default;
-$Audio-volume-height: px2rem(22px) !default;
+$Audio-volume-height: px2rem(50px) !default;
+$Audio-volume-lineHeight: px2rem(50px) !default;
 $Audio-volumeControl-width: px2rem(110px) !default;
-$Audio-volumeControl-height: px2rem(50px) !default;
-$Audio-volumeControl-lineHeight: px2rem(50px) !default;
 $Audio-input-width: px2rem(80px) !default;
 $Audio-track-height: px2rem(6px) !default;
 $Audio-track-bg: #d7dbdd !default;

scss/components/_audio.scss

@@ -1,8 +1,5 @@
 @mixin input-range {
-    width: $Audio-input-width;
-    display: inline-block;
     -webkit-appearance: none;
-    vertical-align: middle;
     outline: none;
     border: none;
     padding: 0;
@@ -37,17 +34,25 @@
     display: none;
 }
 
+.#{$ns}Audio--inline {
+    display: inline-block;
+}
+
 .#{$ns}Audio {
     box-sizing: border-box;
     height: $Audio-height;
     line-height: $Audio-lineHeight;
     border: $Audio-border;
-    display: inline-block;
-    overflow: hidden;
     padding-left: $Audio-item-margin;
+    overflow: hidden;
+
+    &-controls {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
 
     &-rates {
-        display: inline-block;
         width: $Audio-rate-width;
         height: $Audio-rate-height;
         text-align: center;
@@ -57,17 +62,14 @@
     }
 
     &-rateControl {
-        display: inline-block;
         margin-right: $Audio-item-margin;
 
         &::after {
-            display: inline-block;
             clear: both;
             content: "";
         }
 
         .#{$ns}Audio-rateControlItem {
-            display: inline-block;
             width: $Audio-rate-width;
             height: $Audio-rate-height;
             background: $Audio-rate-bg;
@@ -80,7 +82,6 @@
     }
 
     &-play {
-        display: inline-block;
         width: $Audio-play-width;
         cursor: pointer;
         margin-right: $Audio-item-margin;
@@ -91,15 +92,14 @@
     }
 
     &-times {
-        display: inline-block;
         width: $Audio-times-width;
         margin-right: $Audio-item-margin;
         cursor: default;
+        flex-shrink: 0;
     }
 
     &-process {
-        display: inline-block;
+        flex: auto;
-        width: $Audio-process-width;
         cursor: pointer;
         margin-right: $Audio-item-margin;
 
@@ -109,9 +109,9 @@
     }
 
     &-volume {
-        display: inline-block;
         width: $Audio-volume-width;
         height: $Audio-volume-height;
+        line-height: $Audio-volume-lineHeight;
         cursor: pointer;
         margin-right: $Audio-item-margin;
 
@@ -121,10 +121,12 @@
     }
 
     &-volumeControl {
-        display: inline-block;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
         width: $Audio-volumeControl-width;
-        height: $Audio-volumeControl-height;
+        height: $Audio-volume-height;
-        line-height: $Audio-volumeControl-lineHeight;
+        line-height: $Audio-volume-lineHeight;
         margin-right: $Audio-item-margin;
 
         input[type="range"] {
@@ -133,7 +135,6 @@
 
         .#{$ns}Audio-volumeControlIcon {
             margin-right: $Audio-item-margin;
-            display: inline-block;
             cursor: pointer;
         }
 

src/renderers/Audio.tsx

@@ -394,34 +394,30 @@ export class Audio extends React.Component<AudioProps, AudioState> {
         } = this.props;
         const {muted, src} = this.state;
 
-        const body = (
-                <div className={cx('Audio', className)}>
-                    <audio
-                        className={cx('Audio-original')}
-                        ref={this.audioRef}
-                        onCanPlay={this.load}
-                        autoPlay={autoPlay}
-                        controls
-                        muted={muted}
-                        loop={loop}>
-                        <source src={src} />
-                    </audio>
-                    <div className={cx('Audio-controls')}>
-                        {controls && controls.map((control:string, index:number) => {
-                            control = 'render' + upperFirst(control);
-                            const method:'renderRates'|'renderPlay'|'renderTime'|'renderProcess'|'renderVolume'|'render' = control as any;
-                            return (
-                                <React.Fragment key={index}>
-                                    {this[method]()}
-                                </React.Fragment>
-                            )
-                        })}
-                    </div>
-                </div>
-            );
-
         return (
-            inline ? body : <div>{body}</div>
+            <div className={cx('Audio', className, inline ? 'Audio--inline' : '')}>
+                <audio
+                    className={cx('Audio-original')}
+                    ref={this.audioRef}
+                    onCanPlay={this.load}
+                    autoPlay={autoPlay}
+                    controls
+                    muted={muted}
+                    loop={loop}>
+                    <source src={src} />
+                </audio>
+                <div className={cx('Audio-controls')}>
+                    {controls && controls.map((control:string, index:number) => {
+                        control = 'render' + upperFirst(control);
+                        const method:'renderRates'|'renderPlay'|'renderTime'|'renderProcess'|'renderVolume'|'render' = control as any;
+                        return (
+                            <React.Fragment key={index}>
+                                {this[method]()}
+                            </React.Fragment>
+                        )
+                    })}
+                </div>
+            </div>
         );
     }
 }