style: adjust styles for improved UI consistency

DouyinFE · Jan 7, 2025 · 91f1e5d · 91f1e5d
1 parent 1edc685
commit 91f1e5d
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 10 deletions.
diff --git a/packages/semi-foundation/audioPlayer/audioPlayer.scss b/packages/semi-foundation/audioPlayer/audioPlayer.scss
@@ -50,6 +50,7 @@ $module: #{$prefix}-audio-player;
     &-info-title {
         font-size: $font-size-audio-player-text;
         color: $color-audio-player-font-color;
+        font-weight: 600;
         display: flex;
         align-items: center;
     }
@@ -160,6 +161,10 @@ $module: #{$prefix}-audio-player;
     background: $color-audio-player-slider-bg;
     border-radius: $border-radius-audio-player-slider;
     position: relative;
+
+    &-light {
+        background: $color-audio-player-slider-bg-light;
+    }
 
     &-wrapper {
         position: relative;

diff --git a/packages/semi-foundation/audioPlayer/variables.scss b/packages/semi-foundation/audioPlayer/variables.scss
@@ -42,7 +42,8 @@ $size-audio-player-slider-dot: 16px;
 
 // Colors
 $color-audio-player-disabled-bg: rgba(var(--semi-grey-0), .35);
-$color-audio-player-slider-bg: rgba(var(--semi-grey-1), 1);
+$color-audio-player-slider-bg: rgba(var(--semi-grey-5), 1);
+$color-audio-player-slider-bg-light: rgba(var(--semi-grey-2), 1);
 $color-audio-player-slider-progress: rgba(var(--semi-blue-4), 1);
 $color-audio-player-slider-dot-bg: rgba(var(--semi-white), 1);
 

diff --git a/packages/semi-ui/audioPlayer/audioSlider.tsx b/packages/semi-ui/audioPlayer/audioSlider.tsx
@@ -5,6 +5,7 @@ import { cssClasses } from '@douyinfe/semi-foundation/audioPlayer/constants';
 import Tooltip from '../tooltip';
 import { formatTime } from './utils';
 import { noop } from 'lodash';
+import { AudioPlayerTheme } from './index';
 
 interface AudioSliderProps {
     value: number;
@@ -15,7 +16,8 @@ interface AudioSliderProps {
     width?: number;
     height?: number;
     showTooltip?: boolean;
-    disabled?: boolean
+    disabled?: boolean;
+    theme?: AudioPlayerTheme
 }
 
 interface AudioSliderState {
@@ -34,6 +36,7 @@ export default class AudioSlider extends React.Component<AudioSliderProps, Audio
         height: 4,
         showTooltip: true,
         disabled: false,
+        theme: 'dark'
     };
 
     private sliderRef: React.RefObject<HTMLDivElement>;
@@ -101,7 +104,7 @@ export default class AudioSlider extends React.Component<AudioSliderProps, Audio
     }
 
     render() {
-        const { vertical, width, height, showTooltip, max, value: currentValue } = this.props;
+        const { vertical, width, height, showTooltip, max, value: currentValue, theme } = this.props;
         const { movingInfo, isHovering } = this.state;
         const sliderContent = (
             <div
@@ -117,7 +120,7 @@ export default class AudioSlider extends React.Component<AudioSliderProps, Audio
             >
                 <div
                     ref={this.sliderRef}
-                    className={cls(`${prefixCls}-slider`, {
+                    className={cls(`${prefixCls}-slider`, `${prefixCls}-slider-${theme}`, {
                         [`${prefixCls}-slider-vertical`]: vertical,
                         [`${prefixCls}-slider-horizontal`]: !vertical,
                     })}

diff --git a/packages/semi-ui/audioPlayer/index.tsx b/packages/semi-ui/audioPlayer/index.tsx
@@ -24,7 +24,7 @@ type AudioUrlArray = (AudioInfo | string)[];
 
 type AudioUrl = AudioSrc | AudioInfo | AudioUrlArray
 
-type AudioPlayerTheme = 'dark' | 'light'
+export type AudioPlayerTheme = 'dark' | 'light'
 
 export interface AudioPlayerProps extends BaseProps {
     audioUrl: AudioUrl;
@@ -280,11 +280,14 @@ class AudioPlayer extends BaseComponent<AudioPlayerProps, AudioPlayerState> {
         const transparentStyle = {
             background: 'transparent',
         };
+        const playStyle = {
+            marginLeft: '1px',
+        };
         return <div className={cls(`${prefixCls}-control`)}>
             {isAudioUrlArray && <Tooltip content='Previous' autoAdjustOverflow showArrow={false}>
                 <Button style={{ ...circleStyle, ...transparentStyle }} size='large' icon={<IconRestart size='large' className={iconClass} />} onClick={() => this.handleTrackChange('prev')} />
             </Tooltip>}
-            <Button style={circleStyle} size='large' disabled={error} onClick={this.handleStatusClick} icon={this.state.isPlaying ? <IconPause size='large' /> : <IconPlay size='large' />} className={cls(`${cssClasses.PREFIX}-control-button-play`, { [`${cssClasses.PREFIX}-control-button-play-disabled`]: error })} />
+            <Button style={circleStyle} size='large' disabled={error} onClick={this.handleStatusClick} icon={this.state.isPlaying ? <IconPause size='large' /> : <IconPlay style={playStyle} size='large' />} className={cls(`${cssClasses.PREFIX}-control-button-play`, { [`${cssClasses.PREFIX}-control-button-play-disabled`]: error })} />
             {isAudioUrlArray && <Tooltip content='Next' autoAdjustOverflow showArrow={false}>
                 <Button style={{ ...circleStyle, ...transparentStyle }} size='large' icon={<IconRestart size='large' rotate={180} className={iconClass} />} onClick={() => this.handleTrackChange('next')} />
             </Tooltip>}
@@ -293,6 +296,7 @@ class AudioPlayer extends BaseComponent<AudioPlayerProps, AudioPlayerState> {
 
     renderInfo = () => {
         const { audioTitle, audioCover } = this.getAudioInfo(this.props.audioUrl);
+        const { theme } = this.props;
         const { currentTime, totalTime, error } = this.state;
         return <div className={cls(`${prefixCls}-info-container`)}>
             {audioCover && <Image src={audioCover} width={50} height={50} />}
@@ -301,7 +305,7 @@ class AudioPlayer extends BaseComponent<AudioPlayerProps, AudioPlayerState> {
                 {!error && <div className={cls(`${prefixCls}-info-time`)}>
                     <span style={{ width: '38px' }}>{formatTime(currentTime)}</span>
                     <div className={cls(`${prefixCls}-slider-container`)}>
-                        <AudioSlider value={currentTime} max={totalTime} onChange={this.handleTimeChange} />
+                        <AudioSlider value={currentTime} max={totalTime} theme={theme} onChange={this.handleTimeChange} />
                     </div>
                     <span style={{ width: '38px' }}>{formatTime(totalTime)}</span>
                 </div>}
@@ -311,17 +315,17 @@ class AudioPlayer extends BaseComponent<AudioPlayerProps, AudioPlayerState> {
 
     renderToolbar = () => {
         const { volume, error } = this.state;
-        const { skipDuration = 10 } = this.props;
+        const { skipDuration = 10, theme = 'dark' } = this.props;
         const iconClass = cls(`${prefixCls}-control-button-icon`);
         const transparentStyle = {
             background: 'transparent',
         };
         const isVolumeSilent = volume === 0;
         return !error ? (<div className={cls(`${prefixCls}-control`)}>
-            <Popover content={
+            <Popover autoAdjustOverflow content={
                 <div className={cls(`${prefixCls}-control-volume`)}>
                     <div className={cls(`${prefixCls}-control-volume-title`)}>{volume}%</div>
-                    <AudioSlider value={volume} max={100} vertical height={120} showTooltip={false} onChange={this.handleVolumeChange} />
+                    <AudioSlider value={volume} max={100} vertical height={120} theme={theme} showTooltip={false} onChange={this.handleVolumeChange} />
                 </div>
             }>
                 <Button style={transparentStyle} icon={!isVolumeSilent ? <IconVolume2 className={iconClass} /> : <IconVolumnSilent className={iconClass} />} onClick={this.handleVolumeSilent} />