.Merge branch 'master' of https://git.s.mooo.com/khjde1207/emptyapp

src/components/Player.js

@@ -163,7 +163,7 @@ export default props => {
   const destination = tabY - minHeight - statusBarHeight;
   const [currentPlayerValue, setCurrentPlayerValue] = useState(0);
   const [isPlay, setPlay] = useState(false);
-  const {playerData} = props.Pages;
+  const { playerData } = props;
   const {
     onGestureEvent,
     translateY,
@@ -314,22 +314,24 @@ export default props => {
   const playerDispatch = useContext(PlayerDispatchContext);
   const { uri, paused, muted } = useContext(PlayerStateContext);
   const playerOnBuffer = (data) => {
-    //console.log(data)
+    // console.log('bufffer::: ' + data)
   }
   const playerOnError = (e) => {
     console.log(e);
   }
   const playerOnLoad = (data) => {
-    //console.log(data.duration)
+    // console.log(data.duration)
+    let duration=0;
+    data.duration < 0 ? duration=1 : duration=data.duration
     playerDispatch({type:'paused', setPaused:false});
-    playerDispatch({type:'duration', setDuraton: Math.floor(data.duration)});
+    playerDispatch({type:'duration', setDuraton: Math.floor(duration)});
   }
   const playerOnProgress = (data) => {
-    //console.log(data.currentTime)
+    // console.log(data.currentTime)
     playerDispatch({type:'currentTime', setCurrentTime: data.currentTime});
   }
   const onLoadStart = () => {
-    //console.log('onload start');
+    // console.log('onload start');
     playerDispatch({type:'player', player: player});
   }
   const playerOnEnd = () => {
@@ -427,7 +429,7 @@ export default props => {
                   <Animated.Image
                     resizeMode="contain"
                     style={{ flex: 1, margin: 10, width: null, height: null }}
-                    source={props.Pages.img}
+                    source={{uri: playerData.img}}
                     />
                   <Video
                     source={{uri:playerData.soundURI}}
@@ -447,7 +449,7 @@ export default props => {
                     onError={playerOnError}
                     onEnd={playerOnEnd}
                     //poster='https://baconmockup.com/300/200/'
-                    //repeat={true}
+                    repeat={true}
                     //filter={this.state.filter}
                     //filterEnabled={this.state.filterEnabled}
                     audioOnly={true}
@@ -487,10 +489,10 @@ export default props => {
               <ScrollView style={{ flex: 1, marginTop: '10%' }}>
                 <C.Text cls="flx1 fw-b ta-c">{playerData.title}</C.Text>
                 <C.View cls="flx2 ph5 mt5">
-                  <C.Text cls="fw-b">{playerData.subtitle}</C.Text>
-                  <C.Text cls="mt2">{playerData.contents}</C.Text>
+                  <C.Text cls="fw-b">{playerData.title}</C.Text>
+                  <C.Text cls="mt2">{playerData.content}</C.Text>
                   <C.Text cls="mt3" numberOfLines={1}>
-                    by {playerData.author.replace(/\r\n|\n|\r/gm, ' ')}
+                    {/* by {playerData.author.replace(/\r\n|\n|\r/gm, ' ')} */}
                   </C.Text>
                   <C.Text cls="mt5 as-e" numberOfLines={1}>
                     {playerData.date}
@@ -561,12 +563,12 @@ export default props => {
                       width: null,
                       height: null
                     }}
-                    source={props.Pages.img}
+                    source={{uri:playerData.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.Text cls="fw-b">{playerData.title}</C.Text>
+                  <C.Text cls="fw-b">{playerData.duration}</C.Text>
                 </C.View>
 
                 <View style={{ height: minHeight }} />

src/components/PlayerContents.js

@@ -5,18 +5,14 @@ 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 { playerData } = props;
   const playerDispatch = useContext(PlayerDispatchContext);
   const playerState = useContext(PlayerStateContext);
-  const {paused, player, duration, currentTime} = playerState;
+  const { paused, player, duration, currentTime } = playerState;
   const { secondsTohhmmss } = playerCommon;
-  const {playerData} = Pages;
+
   const onSetPlay = () => {
-    //setPlay(!isPlay);
     playerDispatch({type:'paused', setPaused:!paused});
-    //console.log(player);
   };
   const onStop = () => {
     playerDispatch({type:'stop'});
@@ -39,12 +35,12 @@ export default props => {
     <ScrollView>
       <C.Text cls="flx1 ta-c">{playerData.title}</C.Text>
       <C.View cls="flx2 ph5 mt5">
-        <C.Text cls="fw-b">{playerData.subtitle}</C.Text>
+        <C.Text cls="fw-b">{playerData.title}</C.Text>
         <C.Text cls="mt2" numberOfLines={10}>
-          {playerData.contents}
+          {playerData.content}
         </C.Text>
         <C.Text cls="mt3" numberOfLines={1}>
-          by {playerData.author.replace(/\r\n|\n|\r/gm, ' ')}
+          {/* by {playerData.author.replace(/\r\n|\n|\r/gm, ' ')} */}
         </C.Text>
         <C.Text cls="mt5 as-e" numberOfLines={1}>
           {playerData.date}
@@ -65,7 +61,7 @@ export default props => {
           style={{ width: '95%' }}
           trackStyle={{height:4}}
           thumbTintColor="#333"
-          thumbStyle={{ width: 15, height: 10 }}
+          thumbStyle={{ width: 15, height: 15 }}
           maximumValue={duration}
           value={currentTime}
           onValueChange={value => playerDispatch({type: 'seek', seekValue: Math.floor(value)})}

src/components/PlayerControls.js

@@ -16,17 +16,13 @@ const { width } = Dimensions.get('window');
 export const PLACEHOLDER_WIDTH = width / 4;
 
 export default PlayerControls = props => {
-  const { Pages, closePlayer, currentPlayerValue, setCurrentPlayerValue} = props;
-  const [curPlayerValue, setCurPlayerValue] = useState(0);
-  const [isPlay, setPlay] = useState(false);
+  const { playerData, closePlayer } = props;
   const playerDispatch = useContext(PlayerDispatchContext);
   const playerState = useContext(PlayerStateContext);
   const {paused, player, duration, currentTime} = playerState;
   const { secondsTohhmmss } = playerCommon;
-  const {playerData} = Pages;
 
   const onSetPlay = () => {
-    //setPlay(!isPlay);
     playerDispatch({type:'paused', setPaused:!paused});
   };
   const getThumbTopFromStyleHeight = (styleHeight=40, trackHeight=4) => {
@@ -52,19 +48,19 @@ export default PlayerControls = props => {
             style={sliderLayout.sh}
             trackStyle={sliderLayout.th}
             thumbTintColor="#333"
-            thumbStyle={{width:10, height:5, ...sliderLayout.tt}}
+            thumbStyle={{width:10, height:10, ...sliderLayout.tt}}
             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">
+        <C.View cls="flx0.7 jc-sa ai-sa flx-row">
           { 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} />
           }
         </C.View>
-        <C.EL.Icon ccls="mr2" type="ionicon" name="md-close" onPress={closePlayer} />
+        <C.EL.Icon {...C.n2cls("size8")} ccls="mr2" type="ionicon" name="md-close" onPress={closePlayer} />
       </View>
     </>
   );

src/components/PlayerHeader.js

@@ -28,11 +28,11 @@ 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">
+      <C.EL.Icon {...iconsize} color="transparent" type="ionicon" name="md-arrow-down" />
         { 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} />
         }
-        <C.EL.Icon {...iconsize} type="ionicon" name="md-arrow-down" />
         <C.EL.Icon {...iconsize} type="ionicon" name="md-close" onPress={closePlayer} />
       </C.View>
     </View>

src/components/TabBar.js

@@ -35,7 +35,6 @@ export default props => {
 
     }
     const onLayout = ({nativeEvent}) => {
-        console.log(nativeEvent.layout.y)
         const data = {};
         data.x = nativeEvent.layout.x;
         data.y = nativeEvent.layout.y;

src/pages/_5_Root.js

@@ -24,9 +24,9 @@ export default (props)=>{
         setTargetIdx(tIdx);
         setbPlay(false);
     }
-    const startPlay = (p)=>{
+    const startPlay = (playerData)=>{
         setbPlay(true);
-        setCurPlayInfo(p.Pages);
+        setCurPlayInfo(playerData);
     }
 
     let Page;
@@ -52,7 +52,7 @@ export default (props)=>{
             <C.Comp.Header  {...props}/>
             <Page   {...props} Pages={sel_idx == -1 ? {} : BTNS[targetIdx][sel_idx]}  startPlay={startPlay} bPlay={bPlay}/>
             <PlayerConextProvider>
-                {bPlay ? <Player {...props} Pages={curPlayInfo} tabPosition={tabPosition} closePlayer={()=>setbPlay(false)}/>  : null}
+                {bPlay ? <Player playerData={curPlayInfo} tabPosition={tabPosition} closePlayer={()=>setbPlay(false)}/>  : null}
             </PlayerConextProvider>
             <TabBar setTabPosition={setTabPosition} onTabPress={onTabPress} BTNS={BTNS}/>  
         </C.View> 

src/pages/_7_List.js

@@ -2,24 +2,24 @@ import React , {useEffect, useState} from 'react';
 
 import C from 'rn-class'
 import Net from '../provider/Net';
-
+import moment from 'moment';
 C.addColor("#d7d7d7", "color-listbg");
 
+const BASE_URL = 'http://133.186.211.179/api/v3/meditation/'
 
 export default (props)=>{ 
     let [list, setList ] = useState([]);
     let onClickPlay = (p)=>{ 
-        // props.navigation.push('Player');
-        const tmp = props;
-        tmp.Pages.playerData = p;
-        tmp.Pages.playerData.contents = tmp.Pages.playerData.contents + tmp.Pages.contens;
+        const tmp = p;
+        tmp.soundURI = BASE_URL+p.naration;
+        tmp.img = BASE_URL+p.poster;
+        tmp.date = moment(p.createdAt).format('MM-DD')
         props.startPlay(tmp);
     }
 
     let getData = async (p)=>{
         let {Pages : {type  :type } , Pages : {section  :section }    } = p ;
         let {result} = await Net.meditation({size : 20, page	: 1 ,section : section , type : type});
-        console.log(" >>>: " , result )  
         setList(result);
         // console.log({size : 20, page	: 1 ,section : section , type : type});
     }   
@@ -53,11 +53,11 @@ export default (props)=>{
                             })
                         }
                  </C.View>
-                 {
-                     props.bPlay ? 
-                     <C.View cls="h10" /> : null
+                    {
+                        props.bPlay ? 
+                        <C.View cls="h10" /> : null
 
-                 }
+                    }
                 </C.ScrollView>
             </C.View>  
 
@@ -69,11 +69,10 @@ export default (props)=>{
 
 
 const Imgs = (props)=>{
-    console.log(props);
     return (
         <C.View cls="w45 mh2 br3">
                 <C.ImageBackground 
-                    source={{uri : `http://133.186.211.179/api/v3/meditation/${props.poster}` }}
+                    source={{uri : `${BASE_URL}${props.poster}` }}
                     cls="h20 mh2 mt2 "
                     imgcls="br3"    
                     // resizeMode="contain"