Player event 함수, player button 함수

video component 추가 및 useReducer useContext 사용

src/components/Player.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useMemo } from 'react';
+import React, { useState, useEffect, useRef, useMemo, useContext } from 'react';
 import {
   View,
   Text,
@@ -22,6 +22,8 @@ import PlayerControls from './PlayerControls';
 import PlayerContents from './PlayerContents';
 import PlayerHeader from './PlayerHeader';
 import { getInset } from 'react-native-safe-area-view';
+import Video from 'react-native-video';
+import { PlayerDispatchContext, PlayerStateContext } from './PlayerReducer';
 
 const { width, height } = Dimensions.get('window');
 const statusBarHeight = getStatusBarHeight(true);
@@ -299,240 +301,296 @@ export default props => {
   }, []);
 
   useEffect(() => {
-    return () => {};
-  });
+    
+    return () => {
+      playerDispatch({type:'currentTime', setCurrentTime: 0});
+    };
+  },[]);
 
   const slideUp = () => {};
+
+  const player = useRef(null);
+  
+  const playerDispatch = useContext(PlayerDispatchContext);
+  const { uri, paused, muted } = useContext(PlayerStateContext);
+  const playerOnBuffer = (data) => {
+    //console.log(data)
+  }
+  const playerOnError = (e) => {
+    console.log(e);
+  }
+  const playerOnLoad = (data) => {
+    //console.log(data.duration)
+    playerDispatch({type:'paused', setPaused:false});
+    playerDispatch({type:'duration', setDuraton: Math.floor(data.duration)});
+  }
+  const playerOnProgress = (data) => {
+    //console.log(data.currentTime)
+    playerDispatch({type:'currentTime', setCurrentTime: data.currentTime});
+  }
+  const onLoadStart = () => {
+    //console.log('onload start');
+    playerDispatch({type:'player', player: player});
+  }
+  const playerOnEnd = () => {
+    //console.log('end');
+  }
+  const onSeek = (data) => {
+    //console.log(data)
+    if(data.seekTime===0 && data.currentTime===0) {
+      playerDispatch({type:'paused', setPaused: true});
+      playerDispatch({type:'currentTime', setCurrentTime: 0});
+    }
+  }
   return (
-    <>
-    {/* <C.View
-        style={{ ...StyleSheet.absoluteFillObject, zIndex: 1000, marginTop:getStatusBarHeight(true) }}
-        cls="h20 bgc-rgba-white-0_5"
-      >
-        <C.Text cls="f5 ta-c bgc-rgba-red-0_5">테스트용 Component</C.Text>
-        <C.View cls="h10 ai-c bgc-rgba-blue-0_5">
-          <Slider
-            style={{ width: '95%' }}
-            trackStyle={{ height: 2 }}
-            thumbTintColor="#333"
-            thumbStyle={{ width: 10, height: 5 }}
-            value={currentPlayerValue}
-            onValueChange={value => setCurrentPlayerValue(value)}
-          />
-          <C.View cls="w95 jc-sb flx-row">
-            <C.Text>Time : {currentPlayerValue}</C.Text>
-          </C.View>
-        </C.View>
-        <C.TouchableOpacity 
-          cls="h5 bgc-rgba-black-0_5"
-          onPress={() => {
-            setPlay(!isPlay);
-          }}
-        >
-          <C.Text cls="f5 ta-c rgba-white-0_5">Click Test</C.Text>
-        </C.TouchableOpacity>
-      </C.View> */}
-      <PanGestureHandler
-        onHandlerStateChange={onGestureEvent}
-        activeOffsetY={[-10, 10]}
-        onGestureEvent={onGestureEvent}
-      >
-        <Animated.View
-          style={{
-            ...StyleSheet.absoluteFillObject,
-            zIndex: 10,
-            marginTop: statusBarHeight,
-            transform: [{ translateY }],
-            alignItems: 'center',
-            height: mainPlayerContainerHeight
-          }}
-        >
-          <Animated.View
-            style={{
-              padding: 0,
-              backgroundColor: 'white',
-              width: playContainerWidth,
-              borderRadius: playerBoderRadius
-            }}
+        <>
+        {/* <C.View
+            style={{ ...StyleSheet.absoluteFillObject, zIndex: 1000, marginTop:getStatusBarHeight(true) }}
+            cls="h20 bgc-rgba-white-0_5"
           >
-            <Animated.View
-              style={[
-                Platform.OS === 'android'
-                  ? { borderColor: '#eee' }
-                  : { borderColor: 'white' },
-                {
-                  ...StyleSheet.absoluteFillObject,
-                  borderWidth: 1,
-                  borderRadius: 15,
-                  opacity: playerControlOpaciy,
-                  backgroundColor: 'white'
-                },
-                shadow2
-              ]}
-            >
-              <PlayerControls
-                {...props}
-                currentPlayerValue={currentPlayerValue}
-                setCurrentPlayerValue={setCurrentPlayerValue}
+            <C.Text cls="f5 ta-c bgc-rgba-red-0_5">테스트용 Component</C.Text>
+            <C.View cls="h10 ai-c bgc-rgba-blue-0_5">
+              <Slider
+                style={{ width: '95%' }}
+                trackStyle={{ height: 2 }}
+                thumbTintColor="#333"
+                thumbStyle={{ width: 10, height: 5 }}
+                value={currentPlayerValue}
+                onValueChange={value => setCurrentPlayerValue(value)}
               />
-            </Animated.View>
+              <C.View cls="w95 jc-sb flx-row">
+                <C.Text>Time : {currentPlayerValue}</C.Text>
+              </C.View>
+            </C.View>
+            <C.TouchableOpacity 
+              cls="h5 bgc-rgba-black-0_5"
+              onPress={() => {
+                setPlay(!isPlay);
+              }}
+            >
+              <C.Text cls="f5 ta-c rgba-white-0_5">Click Test</C.Text>
+            </C.TouchableOpacity>
+          </C.View> */}
+          <PanGestureHandler
+            onHandlerStateChange={onGestureEvent}
+            activeOffsetY={[-10, 10]}
+            onGestureEvent={onGestureEvent}
+          >
             <Animated.View
               style={{
-                opacity: PlayerHeadOpacity,
-                backgroundColor: 'rgba(255,255,255,0)',
-                width: PlayerHeadWidth,
-                height: PlayerHeadHeight
+                ...StyleSheet.absoluteFillObject,
+                zIndex: 10,
+                marginTop: statusBarHeight,
+                transform: [{ translateY }],
+                alignItems: 'center',
+                height: mainPlayerContainerHeight
               }}
             >
-              <PlayerHeader {...props} visibleMenu={setModalVisible} />
-            </Animated.View>
-            <Animated.View style={{ width: videoWidth, height: videoHeight }}>
-              <Animated.Image
-                resizeMode="contain"
-                style={{ flex: 1, margin: 10, width: null, height: null }}
-                source={props.Pages.img}
-              />
+              <Animated.View
+                style={{
+                  padding: 0,
+                  backgroundColor: 'white',
+                  width: playContainerWidth,
+                  borderRadius: playerBoderRadius
+                }}
+              >
+                <Animated.View
+                  style={[
+                    Platform.OS === 'android'
+                      ? { borderColor: '#eee' }
+                      : { borderColor: 'white' },
+                    {
+                      ...StyleSheet.absoluteFillObject,
+                      borderWidth: 1,
+                      borderRadius: 15,
+                      opacity: playerControlOpaciy,
+                      backgroundColor: 'white'
+                    },
+                    shadow2
+                  ]}
+                >
+                  <PlayerControls
+                    {...props}
+                  />
+                </Animated.View>
+                <Animated.View
+                  style={{
+                    opacity: PlayerHeadOpacity,
+                    backgroundColor: 'rgba(255,255,255,0)',
+                    width: PlayerHeadWidth,
+                    height: PlayerHeadHeight
+                  }}
+                >
+                  <PlayerHeader {...props} visibleMenu={setModalVisible} />
+                </Animated.View>
+                <Animated.View style={{ width: videoWidth, height: videoHeight }}>
+                  <Animated.Image
+                    resizeMode="contain"
+                    style={{ flex: 1, margin: 10, width: null, height: null }}
+                    source={props.Pages.img}
+                    />
+                  <Video
+                    source={{uri:uri}}
+                    style={StyleSheet.absoluteFill}
+                    ref={player}
+                    //rate={this.state.rate}
+                    paused={paused}
+                    //volume={this.state.volume}
+                    muted={muted}
+                    //ignoreSilentSwitch={this.state.ignoreSilentSwitch}
+                    resizeMode='contain'
+                    onLoad={playerOnLoad}
+                    onLoadStart={onLoadStart}
+                    onBuffer={playerOnBuffer}
+                    onProgress={playerOnProgress}
+                    onSeek={onSeek}
+                    onError={playerOnError}
+                    onEnd={playerOnEnd}
+                    //poster='https://baconmockup.com/300/200/'
+                    //repeat={true}
+                    //filter={this.state.filter}
+                    //filterEnabled={this.state.filterEnabled}
+                    audioOnly={true}
+                  />
+                </Animated.View>
+              </Animated.View>
+              <Animated.View
+                style={{
+                  backgroundColor: 'white',
+                  width: playContainerWidth,
+                  height: playerContainerHeight
+                }}
+              >
+                <Animated.View style={{ opacity }}>
+                  <PlayerContents
+                    {...props}
+                  />
+                </Animated.View>
+              </Animated.View>
             </Animated.View>
-          </Animated.View>
-          <Animated.View
-            style={{
-              backgroundColor: 'white',
-              width: playContainerWidth,
-              height: playerContainerHeight
+          </PanGestureHandler>
+          <Modal
+            isVisible={modalVisible === 'detail'}
+            onSwipeComplete={() => {
+              setModalVisible(null);
             }}
+            swipeDirection="left"
+            //deviceHeight={height}
+            deviceWidth={width}
+            style={{ margin: 0 }}
+            backdropColor="white"
+            backdropOpacity={1}
+            animationIn="slideInLeft"
+            animationOut="slideOutLeft"
           >
-            <Animated.View style={{ opacity }}>
-              <PlayerContents
-                {...props}
-                currentPlayerValue={currentPlayerValue}
-                setCurrentPlayerValue={setCurrentPlayerValue}
-              />
-            </Animated.View>
-          </Animated.View>
-        </Animated.View>
-      </PanGestureHandler>
-      <Modal
-        isVisible={modalVisible === 'detail'}
-        onSwipeComplete={() => {
-          setModalVisible(null);
-        }}
-        swipeDirection="left"
-        //deviceHeight={height}
-        deviceWidth={width}
-        style={{ margin: 0 }}
-        backdropColor="white"
-        backdropOpacity={1}
-        animationIn="slideInLeft"
-        animationOut="slideOutLeft"
-      >
-        <C.View cls="w90 h100 bgc-rgba-black-0_5">
-          <ScrollView style={{ flex: 1, marginTop: '10%' }}>
-            <C.Text cls="flx1 ta-c">{props.Pages.subtitle}</C.Text>
-            <C.View cls="flx2 ph5 mt5">
-              <C.Text cls="fw-b">{props.Pages.subtitle}</C.Text>
-              <C.Text cls="mt2">{props.Pages.contens}</C.Text>
-              <C.Text cls="mt3" numberOfLines={1}>
-                by {props.Pages.subtitle.replace(/\r\n|\n|\r/gm, ' ')}
-              </C.Text>
-              <C.Text cls="mt5 as-e" numberOfLines={1}>
-                March 19
-              </C.Text>
+            <C.View cls="w90 h100 bgc-rgba-black-0_5">
+              <ScrollView style={{ flex: 1, marginTop: '10%' }}>
+                <C.Text cls="flx1 ta-c">{props.Pages.subtitle}</C.Text>
+                <C.View cls="flx2 ph5 mt5">
+                  <C.Text cls="fw-b">{props.Pages.subtitle}</C.Text>
+                  <C.Text cls="mt2">{props.Pages.contens}</C.Text>
+                  <C.Text cls="mt3" numberOfLines={1}>
+                    by {props.Pages.subtitle.replace(/\r\n|\n|\r/gm, ' ')}
+                  </C.Text>
+                  <C.Text cls="mt5 as-e" numberOfLines={1}>
+                    March 19
+                  </C.Text>
+                </C.View>
+              </ScrollView>
             </C.View>
-          </ScrollView>
-        </C.View>
-        <TouchableOpacity
-          style={[
-            StyleSheet.absoluteFillObject,
-            {
-              width: '90%',
-              justifyContent: 'center',
-              paddingRight: '5%',
-              alignItems: 'flex-end'
-            }
-          ]}
-          onPress={() => {
-            setModalVisible(null);
-          }}
-        >
-          <C.EL.Icon
-            color="rgb(10,132,255)"
-            {...C.n2cls('size10')}
-            type="ionicon"
-            name="md-arrow-dropleft"
-          />
-        </TouchableOpacity>
-      </Modal>
-
-      <Modal isVisible={modalVisible === 'share'} style={{ margin: 0 }}>
-        <View
-          style={{
-            flex: 1,
-            justifyContent: 'center',
-            alignItems: 'center',
-            backgroundColor: 'rgb(242,242,247)'
-          }}
-        >
-          <ScrollView>
-            <View style={{ height: statusBarHeight }} />
-            <View style={{ marginHorizontal: '5%', alignItems: 'flex-end' }}>
+            <TouchableOpacity
+              style={[
+                StyleSheet.absoluteFillObject,
+                {
+                  width: '90%',
+                  justifyContent: 'center',
+                  paddingRight: '5%',
+                  alignItems: 'flex-end'
+                }
+              ]}
+              onPress={() => {
+                setModalVisible(null);
+              }}
+            >
               <C.EL.Icon
-                color="black"
+                color="rgb(10,132,255)"
                 {...C.n2cls('size10')}
                 type="ionicon"
-                name="md-close"
-                onPress={() => {
-                  setModalVisible(null);
-                }}
+                name="md-arrow-dropleft"
               />
-            </View>
+            </TouchableOpacity>
+          </Modal>
 
+          <Modal isVisible={modalVisible === 'share'} style={{ margin: 0 }}>
             <View
               style={{
-                //...shadowImage,
-                //backgroundColor: 'white',
-                marginHorizontal: '5%',
-                width: width * 0.8,
-                height: (width * 0.8) / 1.78
+                flex: 1,
+                justifyContent: 'center',
+                alignItems: 'center',
+                backgroundColor: 'rgb(242,242,247)'
               }}
             >
-              <Image
-                resizeMode="contain"
-                style={{
-                  flex: 1,
-                  marginVertical: 10,
-                  width: null,
-                  height: null
-                }}
-                source={props.Pages.img}
-              />
-            </View>
-            <C.View cls="flx-row jc-sa ai-t mt2">
-              <C.Text cls="fw-b">{'Spring of Music'}</C.Text>
-              <C.Text cls="fw-b">{`18min`}</C.Text>
-            </C.View>
+              <ScrollView>
+                <View style={{ height: statusBarHeight }} />
+                <View style={{ marginHorizontal: '5%', alignItems: 'flex-end' }}>
+                  <C.EL.Icon
+                    color="black"
+                    {...C.n2cls('size10')}
+                    type="ionicon"
+                    name="md-close"
+                    onPress={() => {
+                      setModalVisible(null);
+                    }}
+                  />
+                </View>
 
-            <View style={{ height: minHeight }} />
+                <View
+                  style={{
+                    //...shadowImage,
+                    //backgroundColor: 'white',
+                    marginHorizontal: '5%',
+                    width: width * 0.8,
+                    height: (width * 0.8) / 1.78
+                  }}
+                >
+                  <Image
+                    resizeMode="contain"
+                    style={{
+                      flex: 1,
+                      marginVertical: 10,
+                      width: null,
+                      height: null
+                    }}
+                    source={props.Pages.img}
+                  />
+                </View>
+                <C.View cls="flx-row jc-sa ai-t mt2">
+                  <C.Text cls="fw-b">{'Spring of Music'}</C.Text>
+                  <C.Text cls="fw-b">{`18min`}</C.Text>
+                </C.View>
 
-            <TouchableOpacity
-              onPress={onShare}
-              style={{ marginHorizontal: '5%', alignItems: 'center' }}
-            >
-              <View style={[s.sharContainer]}>
-                <C.EL.Icon
-                  color="black"
-                  {...C.n2cls('size10')}
-                  type="ionicon"
-                  name="md-share"
-                />
-                <C.Text cls="f2.5">공유하기, 메세지 보내기</C.Text>
-              </View>
-            </TouchableOpacity>
+                <View style={{ height: minHeight }} />
+
+                <TouchableOpacity
+                  onPress={onShare}
+                  style={{ marginHorizontal: '5%', alignItems: 'center' }}
+                >
+                  <View style={[s.sharContainer]}>
+                    <C.EL.Icon
+                      color="black"
+                      {...C.n2cls('size10')}
+                      type="ionicon"
+                      name="md-share"
+                    />
+                    <C.Text cls="f2.5">공유하기, 메세지 보내기</C.Text>
+                  </View>
+                </TouchableOpacity>
 
-            <View style={{ height: minHeight }} />
-          </ScrollView>
-        </View>
-      </Modal>
-    </>
+                <View style={{ height: minHeight }} />
+              </ScrollView>
+            </View>
+          </Modal>
+        </>
   );
 };
 

src/components/PlayerContents.js

@@ -1,15 +1,39 @@
-import React, { useState } from 'react';
-import { ScrollView, Text } from 'react-native';
+import React, { useState, useContext } from 'react';
+import { ScrollView, Text, StyleSheet } from 'react-native';
 import { Icon, Slider } from 'react-native-elements';
 import C from 'rn-class';
+import {PlayerStateContext, PlayerDispatchContext, playerCommon} from './PlayerReducer';
 
 export default props => {
   const { Pages, currentPlayerValue, setCurrentPlayerValue} = props;
   const [curPlayerValue, setCurPlayerValue] = useState(0);
   const [isPlay, setPlay] = useState(false);
+  const playerDispatch = useContext(PlayerDispatchContext);
+  const playerState = useContext(PlayerStateContext);
+  const {paused, player, duration, currentTime} = playerState;
+  const { secondsTohhmmss } = playerCommon;
   const onSetPlay = () => {
-    setPlay(!isPlay);
+    //setPlay(!isPlay);
+    playerDispatch({type:'paused', setPaused:!paused});
+    //console.log(player);
   };
+  const onStop = () => {
+    playerDispatch({type:'stop'});
+  }
+  // const getpercent = () => {
+  //   console.log((parseFloat(currentTime) / parseFloat(duration))*100-1)
+  //   if(currentTime>0) {
+  //     return (parseFloat(currentTime) / parseFloat(duration))*100
+  //   }
+  // }
+  const onForwardRewind = (type) => {
+    if(type==='rewind') {
+      playerDispatch({type: 'seek', seekValue: currentTime - 15})
+    }
+    if(type==='forward') {
+      playerDispatch({type: 'seek', seekValue: currentTime + 15})
+    }
+  }
   return (
     <ScrollView>
       <C.Text cls="flx1 ta-c">{Pages.subtitle}</C.Text>
@@ -26,26 +50,28 @@ export default props => {
         </C.Text>
       </C.View>
       <C.View cls="flx1 flx-row jc-sa ai-c mt5">
-        <C.EL.Icon {...C.n2cls('size8')} type="ionicon" name="md-rewind" />
-        { isPlay
+        <C.EL.Icon {...C.n2cls('size8')} type="ionicon" name="md-rewind" onPress={()=>{onForwardRewind('rewind')}} />
+        { paused===false
           ?<C.EL.Icon {...C.n2cls('size10')} type="ionicon" name="md-pause" onPress={onSetPlay} />
           :<C.EL.Icon {...C.n2cls('size10')} type="ionicon" name="md-play" onPress={onSetPlay} />
         }
-        <C.EL.Icon {...C.n2cls('size8')} type="ionicon" name="md-fastforward" />
-        <C.EL.Icon {...C.n2cls('size10')} type="ionicon" name="md-square" />
+        <C.EL.Icon {...C.n2cls('size8')} type="ionicon" name="md-fastforward" onPress={()=>{onForwardRewind('forward')}} />
+        <C.EL.Icon {...C.n2cls('size10')} type="ionicon" name="md-square" onPress={onStop}/>
       </C.View>
       <C.View cls="flx1 ai-c mt2">
+      {/* <C.Text cls="as-s" style={{ ...StyleSheet.absoluteFill, backgroundColor:'red', width:50, textAlign:'center', left:`${getpercent()-5}%`}}> {Math.floor(currentTime)}</C.Text> */}
         <Slider
           style={{ width: '95%' }}
-          trackStyle={{height:2}}
+          trackStyle={{height:4}}
           thumbTintColor="#333"
-          thumbStyle={{ width: 10, height: 5 }}
-          value={currentPlayerValue}
-          onValueChange={value => setCurrentPlayerValue(value)}
+          thumbStyle={{ width: 15, height: 10 }}
+          maximumValue={duration}
+          value={currentTime}
+          onValueChange={value => playerDispatch({type: 'seek', seekValue: Math.floor(value)})}
         />
         <C.View cls="w95 jc-sb flx-row">
-          <C.Text>Time : {currentPlayerValue}</C.Text>
-          <C.Text>{`2:50`}</C.Text>
+          <C.Text>{secondsTohhmmss(currentTime)}</C.Text>
+          <C.Text>{secondsTohhmmss(duration)}</C.Text>
         </C.View>
       </C.View>
       <C.View cls="h50" />

src/components/PlayerControls.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 import {
   View,
   StyleSheet,
@@ -9,6 +9,7 @@ import {
 } from 'react-native';
 import { Icon, Slider } from 'react-native-elements';
 import C from 'rn-class';
+import {PlayerStateContext, PlayerDispatchContext, playerCommon} from './PlayerReducer';
 
 const { width } = Dimensions.get('window');
 
@@ -18,9 +19,15 @@ export default PlayerControls = props => {
   const { Pages, closePlayer, currentPlayerValue, setCurrentPlayerValue} = props;
   const [curPlayerValue, setCurPlayerValue] = useState(0);
   const [isPlay, setPlay] = useState(false);
+  const playerDispatch = useContext(PlayerDispatchContext);
+  const playerState = useContext(PlayerStateContext);
+  const {paused, player, duration, currentTime} = playerState;
+  const { secondsTohhmmss } = playerCommon;
+
   const onSetPlay = () => {
-    setPlay(!isPlay);
-  }
+    //setPlay(!isPlay);
+    playerDispatch({type:'paused', setPaused:!paused});
+  };
   const getThumbTopFromStyleHeight = (styleHeight=40, trackHeight=4) => {
     const thumbTop = (styleHeight / 2) + (trackHeight / 2) + 
     (Platform.OS==='android'&&(styleHeight<40||trackHeight<4)?0.5:0);
@@ -38,19 +45,20 @@ export default PlayerControls = props => {
         <C.View cls="flx2">
           <C.View cls="flx-row jc-sb">
             <Text numerOfLine={1}>{Pages.subtitle.replace(/\r\n|\n|\r/gm,' ')}</Text>
-            <Text>{`2:50`}</Text>
+            <Text>{secondsTohhmmss(duration)}</Text>
           </C.View>
           <Slider
             style={sliderLayout.sh}
             trackStyle={sliderLayout.th}
             thumbTintColor="#333"
             thumbStyle={{width:10, height:5, ...sliderLayout.tt}}
-            value={currentPlayerValue}
-            onValueChange={value => setCurrentPlayerValue(value)}
+            maximumValue={duration}
+            value={currentTime}
+            onValueChange={value => playerDispatch({type: 'seek', seekValue: Math.floor(value)})}
           />
         </C.View>
         <C.View cls="flx0.5 jc-sa ai-sa flx-row">
-          { isPlay
+          { paused===false
             ?<C.EL.Icon {...C.n2cls("size8")} type="ionicon" name="md-pause" onPress={onSetPlay} />
             :<C.EL.Icon {...C.n2cls("size8")} type="ionicon" name="md-play" onPress={onSetPlay} />
           }

src/components/PlayerHeader.js

@@ -1,17 +1,22 @@
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 import {
   View,
   StyleSheet
 } from 'react-native';
 import { Icon, Slider } from 'react-native-elements';
 import C from 'rn-class';
+import {PlayerStateContext, PlayerDispatchContext} from './PlayerReducer';
 
 export default PlayerHead = props => {
   const { closePlayer, visibleMenu} = props;
   const [isMute, setIsMute] = useState(false);
+  const playerDispatch = useContext(PlayerDispatchContext);
+  const playerState = useContext(PlayerStateContext);
+  const {paused, muted, player, duration, currentTime} = playerState;
 
   const setMute = () => {
-    setIsMute(!isMute);
+    //setIsMute(!isMute);
+    playerDispatch({type:'muted'});
   }
   const iconsize = {...C.n2cls('size7')};
 
@@ -23,7 +28,7 @@ export default PlayerHead = props => {
         <C.EL.Icon {...iconsize} color="rgb(255,45,85)" type="ionicon" name="md-heart" />
       </C.View>
       <C.View cls="flx-row flx0.3 ai-e jc-sa">
-        { isMute
+        { muted
           ?<C.EL.Icon {...iconsize} type="ionicon" name="md-volume-off" onPress={setMute} />
           :<C.EL.Icon {...iconsize} type="ionicon" name="md-volume-high" onPress={setMute} />
         }