Merge pull request #65 from draku29/refactor/player-effect

Refactor/player effect

Author: LonelyCpp

src/PlayerScripts.js

@@ -1,3 +1,5 @@
+import {MUTE_MODE, PAUSE_MODE, PLAY_MODE, UNMUTE_MODE} from './constants';
+
 export const PLAYER_FUNCTIONS = {
   durationScript: `
 window.ReactNativeWebView.postMessage(JSON.stringify({eventType: 'getDuration', data: player.getDuration()}));
@@ -40,6 +42,16 @@ player.seekTo(${seconds}, ${allowSeekAhead})
     index: ${startIndex || 0}}); true;`,
 };
 
+export const playMode = {
+  [PLAY_MODE]: PLAYER_FUNCTIONS.playVideo,
+  [PAUSE_MODE]: PLAYER_FUNCTIONS.pauseVideo
+};
+
+export const soundMode = {
+  [MUTE_MODE]: PLAYER_FUNCTIONS.muteVideo,
+  [UNMUTE_MODE]: PLAYER_FUNCTIONS.unMuteVideo,
+};
+
 export const MAIN_SCRIPT = (
   videoId,
   playList,

src/YoutubeIframe.js

@@ -10,7 +10,12 @@ import {View, StyleSheet, Platform} from 'react-native';
 import WebView from 'react-native-webview';
 import {PLAYER_STATES, PLAYER_ERROR, CUSTOM_USER_AGENT} from './constants';
 import {EventEmitter} from 'events';
-import {MAIN_SCRIPT, PLAYER_FUNCTIONS} from './PlayerScripts';
+import {
+  MAIN_SCRIPT,
+  PLAYER_FUNCTIONS,
+  playMode,
+  soundMode,
+} from './PlayerScripts';
 
 const YoutubeIframe = (
   {
@@ -94,23 +99,17 @@ const YoutubeIframe = (
   );
 
   useEffect(() => {
-    if (playerReady) {
-      if (play) {
-        webViewRef.current.injectJavaScript(PLAYER_FUNCTIONS.playVideo);
-      } else {
-        webViewRef.current.injectJavaScript(PLAYER_FUNCTIONS.pauseVideo);
-      }
-
-      if (mute) {
-        webViewRef.current.injectJavaScript(PLAYER_FUNCTIONS.muteVideo);
-      } else {
-        webViewRef.current.injectJavaScript(PLAYER_FUNCTIONS.unMuteVideo);
-      }
-      webViewRef.current.injectJavaScript(PLAYER_FUNCTIONS.setVolume(volume));
-      webViewRef.current.injectJavaScript(
-        PLAYER_FUNCTIONS.setPlaybackRate(playbackRate),
-      );
+    if (!playerReady) {
+      return;
     }
+
+    [
+      playMode[play],
+      soundMode[mute],
+      PLAYER_FUNCTIONS.setVolume(volume),
+      PLAYER_FUNCTIONS.setPlaybackRate(playbackRate),
+    ].forEach(webViewRef.current.injectJavaScript);
+
   }, [play, playerReady, mute, volume, playbackRate]);
 
   const onWebMessage = useCallback(

src/constants.js

@@ -1,3 +1,9 @@
+
+export const PLAY_MODE = true;
+export const PAUSE_MODE = false;
+export const MUTE_MODE = true;
+export const UNMUTE_MODE = false;
+
 export const PLAYER_STATES_NAMES = {
   UNSTARTED: 'unstarted',
   ENDED: 'ended',