react-h5-audio-player - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

lib/index.js

@@ -79,3 +79,3 @@ 'use strict';
   },
-  progressBar: {
+  progressBarWrapper: {
     boxSizing: 'border-box',
@@ -87,3 +87,3 @@ position: 'relative',
   },
-  progressBac: {
+  progressBar: {
     boxSizing: 'border-box',
@@ -370,6 +370,6 @@ width: '100%',
           'div',
-          { style: style.togglePlayWrapper },
+          { className: 'toggle-play-wrapper', style: style.togglePlayWrapper },
           _react2.default.createElement(
             'a',
-            { onClick: function onClick(e) {
+            { className: 'toggle-play-button', onClick: function onClick(e) {
                 return _this4.togglePlay(e);
@@ -382,40 +382,32 @@ }, style: style.togglePlay },
           'div',
-          { style: style.progressBar },
+          { className: 'progress-bar-wrapper', style: style.progressBarWrapper },
+          _react2.default.createElement('div', { ref: function ref(_ref2) {
+              _this4.bar = _ref2;
+            }, style: style.progressBar }),
+          _react2.default.createElement('div', { className: 'sought' }),
+          _react2.default.createElement('div', {
+            className: 'indicator',
+            draggable: 'true',
+            ref: function ref(_ref3) {
+              _this4.slider = _ref3;
+            },
+            style: style.drag(this.state.dragLeft)
+          }),
           _react2.default.createElement(
             'div',
-            null,
-            _react2.default.createElement('div', { ref: function ref(_ref2) {
-                _this4.bar = _ref2;
-              }, style: style.progressBac }),
-            _react2.default.createElement('div', { className: 'speed', id: 'speed' }),
-            _react2.default.createElement('div', {
-              draggable: 'true',
-              ref: function ref(_ref3) {
-                _this4.slider = _ref3;
-              },
-              style: style.drag(this.state.dragLeft),
-              id: 'drag'
-            })
-          ),
-          _react2.default.createElement(
-            'div',
-            { style: style.time },
+            { className: 'time', style: style.time },
             _react2.default.createElement(
-              'div',
-              { className: 'tiemDetail' },
-              _react2.default.createElement(
-                'span',
-                { className: 'currentTime', id: 'currentTime' },
-                currentTimeMin,
-                ':',
-                currentTimeSec
-              ),
-              '/',
-              _react2.default.createElement(
-                'span',
-                { className: 'allTime', id: 'allTime' },
-                durationMin,
-                ':',
-                durationSec
-              )
+              'span',
+              { className: 'current-time' },
+              currentTimeMin,
+              ':',
+              currentTimeSec
+            ),
+            '/',
+            _react2.default.createElement(
+              'span',
+              { className: 'total-time' },
+              durationMin,
+              ':',
+              durationSec
             )
@@ -422,0 +414,0 @@ )

package.json

 {
   "name": "react-h5-audio-player",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A React audio player with UI. Mobile compatible.",
@@ -32,4 +32,5 @@ "main": "./lib/index.js",
     "babel-cli": "^6.18.0",
-    "babel-plugin-transform-react-jsx": "^6.8.0"
+    "babel-plugin-transform-react-jsx": "^6.8.0",
+    "babel-preset-latest": "^6.16.0"
   }
 }

README.md

@@ -19,3 +19,3 @@ React H5 Audio Player
 
-```jsx harmony
+```jsx
 import AudioPlayer from 'react-h5-audio-player';
@@ -80,2 +80,20 @@
 
+## UI Overwrites
+
+React H5 Audio Player provides built-in class names for developers to overwrite.
+
+For example:
+```sass
+// In a SASS or LESS file
+.react-h5-audio-player {
+  .toggle-play-wrapper {
+    .toggle-play-button {
+      // Remember to use !important to overwrite inline style.
+      background-color: red !important;
+    }
+  }
+}
+```
+You can find more class names by inspecting element on you browser.
+
 ## Advanced Usage
@@ -86,3 +104,3 @@
 
-```jsx harmony
+```jsx
 <ReactAudioPlayer
@@ -89,0 +107,0 @@ ref={c => this.player = c}

src/index.js

@@ -60,3 +60,3 @@ import React from 'react';
   },
-  progressBar: {
+  progressBarWrapper: {
     boxSizing: 'border-box',
@@ -68,3 +68,3 @@ position: 'relative',
   },
-  progressBac: {
+  progressBar: {
     boxSizing: 'border-box',
@@ -306,4 +306,4 @@ width: '100%',
         </audio>
-        <div style={style.togglePlayWrapper}>
-          <a onClick={(e) => this.togglePlay(e)} style={style.togglePlay}>
+        <div className="toggle-play-wrapper" style={style.togglePlayWrapper}>
+          <a className="toggle-play-button" onClick={(e) => this.togglePlay(e)} style={style.togglePlay}>
             {
@@ -316,19 +316,16 @@ this.state.isPlaying ?
         </div>
-        <div style={style.progressBar}>
-          <div>
-            <div ref={(ref) => { this.bar = ref; }} style={style.progressBac}></div>
-            <div className="speed" id="speed"></div>
-            <div
-              draggable="true"
-              ref={(ref) => { this.slider = ref; }}
-              style={style.drag(this.state.dragLeft)}
-              id="drag"
-            />
+        <div className="progress-bar-wrapper" style={style.progressBarWrapper}>
+          <div ref={(ref) => { this.bar = ref; }} style={style.progressBar}></div>
+          {/*TODO: color change for sought part */}
+          <div className="sought" />
+          <div
+            className="indicator"
+            draggable="true"
+            ref={(ref) => { this.slider = ref; }}
+            style={style.drag(this.state.dragLeft)}
+          />
+          <div className="time" style={style.time}>
+            <span className="current-time">{currentTimeMin}:{currentTimeSec}</span>/
+            <span className="total-time">{durationMin}:{durationSec}</span>
           </div>
-          <div style={style.time}>
-            <div className="tiemDetail">
-              <span className="currentTime" id="currentTime">{currentTimeMin}:{currentTimeSec}</span>/
-              <span className="allTime" id="allTime">{durationMin}:{durationSec}</span>
-            </div>
-          </div>
         </div>
@@ -335,0 +332,0 @@ </div>

No alert changes

Improved metrics

Total package byte prevSize

29108

increased by1.13%

Number of lines in readme file

115

increased by18.56%

Worsened metrics

Dev dependency count

3

increased by50%

Lines of code

728

decreased by-1.49%

No dependency changes