fix: add missing props (muted, volume)

hehex9 · May 8, 2020 · 53ccd69 · 53ccd69
1 parent f52e41d
commit 53ccd69
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 17 deletions.
diff --git a/example/App.js b/example/App.js
@@ -16,6 +16,8 @@ export default class App extends Component {
     duration: 20,
     currentTime: 0,
     enable: true,
+    volume: 1,
+    muted: false,
   };
 
   init(props) {
@@ -63,6 +65,10 @@ export default class App extends Component {
     );
   };
 
+  _setVolume = v => {
+    this.setState({volume: v});
+  };
+
   _onSeek = pos => {
     this._player.seek(pos);
   };
@@ -95,6 +101,8 @@ export default class App extends Component {
           style={styles.player}
           source={source}
           paused={this.state.paused}
+          muted={this.state.muted}
+          volume={this.state.volume}
           onEnd={this._onEnd}
           onLoad={this._onLoad}
           onError={this._onError}
@@ -115,6 +123,25 @@ export default class App extends Component {
           onValueChange={this._onSeek}
         />
 
+        <Text>音量</Text>
+        <Slider
+          style={styles.slider}
+          value={this.state.volume}
+          minimumValue={0}
+          maximumValue={1}
+          onValueChange={this._setVolume}
+        />
+
+        <View style={styles.mutedWrap}>
+          <Text style={styles.mutedText}>静音</Text>
+          <Switch
+            value={this.state.muted}
+            onValueChange={muted => {
+              this.setState({muted});
+            }}
+          />
+        </View>
+
         <View style={styles.buttons}>
           <Button
             title={this.state.paused ? '点击播放' : '点击暂停'}
@@ -182,7 +209,7 @@ const styles = StyleSheet.create({
   slider: {
     width: '90%',
     height: 12,
-    marginTop: 30,
+    marginTop: 12,
     marginBottom: 30,
   },
 
@@ -196,4 +223,15 @@ const styles = StyleSheet.create({
   button: {
     marginLeft: 12,
   },
+
+  mutedWrap: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 12,
+  },
+
+  mutedText: {
+    marginRight: 12,
+  },
 });
diff --git a/example/package.json b/example/package.json
@@ -20,7 +20,6 @@
     "@babel/runtime": "^7.6.3",
     "@react-native-community/eslint-config": "^0.0.5",
     "eslint": "^6.5.1",
-    "metro-react-native-babel-preset": "^0.56.0",
-    "react-test-renderer": "16.9.0"
+    "metro-react-native-babel-preset": "^0.56.0"
   }
 }
diff --git a/example/yarn.lock b/example/yarn.lock
@@ -4113,13 +4113,13 @@ react-devtools-core@^3.6.3:
     shell-quote "^1.6.1"
     ws "^3.3.1"
 
-react-is@^16.8.1, react-is@^16.8.4, react-is@^16.9.0:
+react-is@^16.8.1, react-is@^16.8.4:
   version "16.10.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.10.2.tgz#984120fd4d16800e9a738208ab1fba422d23b5ab"
   integrity sha512-INBT1QEgtcCCgvccr5/86CfD71fw9EPmDxgiJX4I2Ddr6ZsV6iFXsuby+qWJPtmNuMY0zByTsG4468P7nHuNWA==
 
 "react-native-apsara-player@file:..":
-  version "0.2.1"
+  version "0.2.5"
 
 react-native@0.61.2:
   version "0.61.2"
@@ -4161,16 +4161,6 @@ react-refresh@^0.4.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.4.2.tgz#54a277a6caaac2803d88f1d6f13c1dcfbd81e334"
   integrity sha512-kv5QlFFSZWo7OlJFNYbxRtY66JImuP2LcrFgyJfQaf85gSP+byzG21UbDQEYjU7f//ny8rwiEkO6py2Y+fEgAQ==
 
-react-test-renderer@16.9.0:
-  version "16.9.0"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.9.0.tgz#7ed657a374af47af88f66f33a3ef99c9610c8ae9"
-  integrity sha512-R62stB73qZyhrJo7wmCW9jgl/07ai+YzvouvCXIJLBkRlRqLx4j9RqcLEAfNfU3OxTGucqR2Whmn3/Aad6L3hQ==
-  dependencies:
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    react-is "^16.9.0"
-    scheduler "^0.15.0"
-
 react@16.9.0:
   version "16.9.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.9.0.tgz#40ba2f9af13bc1a38d75dbf2f4359a5185c4f7aa"
@@ -4430,7 +4420,7 @@ sax@^1.2.1, sax@^1.2.4:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-scheduler@0.15.0, scheduler@^0.15.0:
+scheduler@0.15.0:
   version "0.15.0"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.15.0.tgz#6bfcf80ff850b280fed4aeecc6513bc0b4f17f8e"
   integrity sha512-xAefmSfN6jqAa7Kuq7LIJY0bwAPG3xlCj0HMEBQk1lxYiDKZscY2xJ5U/61ZTrYbmNQbXa+gc7czPkVo11tnCg==

diff --git a/index.js b/index.js
@@ -70,6 +70,8 @@ export default class ApsaraPlayer extends React.Component {
           source={this.props.source}
           options={this.props.options}
           paused={this.props.paused}
+          volume={this.props.volume}
+          muted={this.props.muted}
           onVideoEnd={this.props.onEnd}
           onVideoLoad={this._onLoad}
           onVideoSeek={this._onSeek}
@@ -81,6 +83,13 @@ export default class ApsaraPlayer extends React.Component {
   }
 }
 
+ApsaraPlayer.defaultProps = {
+  volume: 1,
+  muted: false,
+  paused: false,
+  repeat: false,
+}
+
 ApsaraPlayer.propTypes = {
   repeat: PropTypes.bool,
   paused: PropTypes.bool,

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-native-apsara-player",
   "title": "A React Native wrapper around AliyunVideo SDK",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "A React Native wrapper around AliyunVideo SDK",
   "main": "index.js",
   "repository": {