feat: Add MediaPlayer support css-in-js

myxvisual · Aug 8, 2017 · 22780b5 · 22780b5
1 parent 83e579e
commit 22780b5
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 9 deletions.
diff --git a/src/MediaPlayer/Control.tsx b/src/MediaPlayer/Control.tsx
@@ -104,6 +104,7 @@ export default class Control extends React.Component<ControlProps, ControlState>
       onChangePlaybackRate,
       onChangeVolume,
       onChangeSeek,
+      className,
       ...attributes
     } = this.props;
     const { showPlaybackChoose, showVolumeSlider } = this.state;
@@ -112,8 +113,12 @@ export default class Control extends React.Component<ControlProps, ControlState>
     played = played || 0;
     duration = duration || 0;
     const playedValue = played * duration;
-    const styles = getStyles(this);
     const isDefaultMode = displayMode === "default";
+    const inlineStyles = getStyles(this);
+    const styles = theme.prepareStyles({
+      className: "media-player-control",
+      styles: inlineStyles
+    });
 
     const playButton = <IconButton onClick={playOrPauseAction}>{playing ? "Pause" : "Play"}</IconButton>;
     const playSlider = (
@@ -178,7 +183,7 @@ export default class Control extends React.Component<ControlProps, ControlState>
           horizontalPosition="left"
         >
           <Tooltip
-            style={{ height: "auto", padding: 0, border: "none"}}
+            style={{ height: "auto", padding: 0, border: "none" }}
             margin={0}
             horizontalPosition="left"
             background={theme.chromeLow}
@@ -248,14 +253,15 @@ export default class Control extends React.Component<ControlProps, ControlState>
     return isDefaultMode ? (
       <div
         {...attributes}
-        style={styles.root}
+        className={theme.classNames(styles.root.className, className)}
+        style={styles.root.style}
       >
-        <div style={styles.sliderContainer}>
+        <div {...styles.sliderContainer}>
           {playSlider}
           <span style={{ marginLeft: 16 }}>{this.second2HHMMSS(playedValue)}</span>
           <span style={{ float: "right", marginRight: 16 }}>{this.second2HHMMSS(duration)}</span>
         </div>
-        <div style={styles.controlsGroup}>
+        <div {...styles.controlsGroup}>
           <div>
             {volumeButton}
             {subtitleButton}
@@ -278,7 +284,7 @@ export default class Control extends React.Component<ControlProps, ControlState>
         </div>
       </div>
     ) : (
-      <div style={styles.controlsGroup}>
+      <div {...styles.controlsGroup}>
         {playButton}
         {playSlider}
         {volumeButton}

diff --git a/src/MediaPlayer/index.tsx b/src/MediaPlayer/index.tsx
@@ -117,6 +117,7 @@ export interface DataProps {
    */
   onProgress?: React.ReactEventHandler<HTMLDivElement>;
 
+  className?: string;
   style?: React.CSSProperties;
   onTouchStart?: React.ReactEventHandler<HTMLDivElement>;
   onMouseEnter?: React.ReactEventHandler<HTMLDivElement>;
@@ -348,10 +349,9 @@ export class MediaPlayer extends React.Component<MediaPlayerProps, MediaPlayerSt
 
       showControl,
       displayMode,
+      className,
       ...attributes
     } = this.props;
-    const { theme } = this.context;
-    const styles = getStyles(this);
     const {
       currShowControl,
       currPlaying,
@@ -363,6 +363,13 @@ export class MediaPlayer extends React.Component<MediaPlayerProps, MediaPlayerSt
       played,
       fullScreenMode
     } = this.state;
+    const { theme } = this.context;
+    const styles = getStyles(this);
+    const styleClasses = theme.prepareStyle({
+      className: "media-player",
+      style: styles.root,
+      extendsClassName: className
+    });
 
     return (
       <div
@@ -372,7 +379,7 @@ export class MediaPlayer extends React.Component<MediaPlayerProps, MediaPlayerSt
         onMouseMove={this.handleMouseMove}
         onMouseLeave={this.handleMouseLeave}
         onTouchStart={this.handleTouchStart}
-        style={styles.root}
+        {...styleClasses}
       >
         <ReactPlayer
           {...{