메인 페이지 수정.

src/pages/_6_Main.js

@@ -4,9 +4,10 @@ import C from 'rn-class'
 import Net from '../provider/Net'
 import {BTNS_ORG as BTNS} from '../data/dummy';
 import _ from 'lodash'
+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([]);
@@ -14,6 +15,15 @@ export default (props)=>{
     let [weekdayList , setWeekdayList] = useState([]);
     let [weekendList , setWeekendList] = useState([]);
 
+
+    let onClickPlay = (p)=>{ 
+        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 getList = async (p)=>{
         let {Pages : {type  :type } , Pages : {section  :section }    } = p ;
         let {result} = await Net.meditation({size : 20, page	: 1 ,section : section , type : type , rcmd:"A"});
@@ -34,8 +44,7 @@ export default (props)=>{
         setWeekendList(_.filter(result, {recommand: "WE"}));
         
     }
-    console.log(todayItem);  
-    // console.log(props);
+
     useEffect(()=>{
         getList(props);
     },[])
@@ -46,7 +55,7 @@ export default (props)=>{
                     {/* main */}
                     <C.View cls="h28  w100 ai-c pt2">
                         <C.ImageBackground 
-                                source={{uri : `https://picsum.photos/630/300?r=${(new Date).getTime()+Math.random()}` }}
+                                 source={{uri : `${BASE_URL}${todayItem.poster}` }} 
                                 cls="w80 flx1 h20"  
                                 // resizeMode="contain"
                                 > 
@@ -65,7 +74,7 @@ export default (props)=>{
  
                                     <C.View cls="w100% ai-c pt1">
                                         <C.Text cls="f3.4 color-white txt-sdof2 tsdo-r20 tsdoc-rgba-black-0_9 ">
-                                            마음의 양식 
+                                            마음의 양식  
                                         </C.Text>
                                         <C.Text cls="f2.2 ta-c w80% flx-w color-white txt-sdof2 tsdo-r20 tsdoc-rgba-black-0_9 mt1">
                                             { 
@@ -75,7 +84,7 @@ export default (props)=>{
                                     </C.View>
 
                                     <C.View cls="w100% ai-c pt2">
-                                        <C.EL.Icon type={"entypo"} name="controller-play" {...C.n2cls("color-white")} {...C.n2cls("size9")}/>
+                                        <C.EL.Icon type={"entypo"} name="controller-play" {...C.n2cls("color-white")} {...C.n2cls("size9")} onPress={()=>{onClickPlay(todayItem)}}/>
                                     </C.View>
                             </C.View>
                         </C.ImageBackground>
@@ -92,8 +101,11 @@ export default (props)=>{
                     <C.View cls="pt2">
                          <C.ScrollView horizontal cls="pv1"> 
                          {
-                            weekdayList.map((o)=>{
-                                <Imgs  {...o}/>
+                            weekdayList.map((v)=>{
+
+                                return (<Imgs key={`i${v.title}`}  {...v} soundDuration={v.soundDuration} onClickPlay={()=>{
+                                    onClickPlay(v)
+                                }} />)
                             }) 
                         }
                          </C.ScrollView>
@@ -107,9 +119,13 @@ export default (props)=>{
                     </C.View>
                     <C.View cls="pt2">
                          <C.ScrollView horizontal cls="pv1"> 
-                            <Imgs></Imgs> 
-                            <Imgs></Imgs>
-                            <Imgs></Imgs>
+                         {
+                            weekendList.map((v)=>{
+                                return (<Imgs key={`i${v.title}`}  {...v} soundDuration={v.soundDuration} onClickPlay={()=>{
+                                    onClickPlay(v)
+                                }} />)
+                            }) 
+                        }
 
                          </C.ScrollView>
                     </C.View>
@@ -123,16 +139,54 @@ export default (props)=>{
 }
 
 
-const Imgs = ()=>{
+
+const Imgs = (props)=>{
     return (
-        <C.ImageBackground 
-            source={{uri : `https://picsum.photos/630/300?r=${(new Date).getTime()+Math.random()}` }}
-            cls="w45 flx1 h20 mh2 "  
-            // resizeMode="contain"
-        >
-             <C.View cls="flx1 bgc-rgba-black-0_3 ai-e">
-                <C.EL.Icon type="entypo" name="lock" ccls="ma2" {...C.n2cls("color-white")}/>
-             </C.View>
-        </C.ImageBackground>
+        <C.View cls="w45 mh2 br3">
+                <C.ImageBackground 
+                    source={{uri : `${BASE_URL}${props.poster}` }}
+                    cls="h20 mh2 mt2 "
+                    imgcls="br3"    
+                    // resizeMode="contain"
+                >
+                    <C.View cls="flx1 bgc-rgba-black-0_3 jc-sb br3">
+                        <C.View cls="ai-e">
+                            { 
+                                props.charge == 0 || props.charge ==  null ? (  
+                                    <C.Icon5  name="lock-open" cls="ma2 f2.3" {...C.n2cls("color-white")}/>
+                                ):  <C.Icon5  name="lock" cls="ma2 f2.3" {...C.n2cls("color-white")}/>
+                            }
+                        </C.View>
+                        <C.View cls="ai-c ">
+                            <C.EL.Icon type="entypo" name="controller-play" ccls="ma2" {...C.n2cls("color-white")}  {...C.n2cls("size10")} onPress={props.onClickPlay}/>
+                        </C.View>
+                        <C.View cls="w100% jc-c ai-c flx0.7  bgc-rgba-black-0_4 br3">
+                            <C.Text cls="f2 color-white">  
+                                {props.title} 
+                            </C.Text>
+                        </C.View>
+                    </C.View>
+
+                    
+                </C.ImageBackground >
+                <C.View cls="flx1 ai-e mh2">  
+                    <C.Text> 
+                        {props.soundDuration}
+                    </C.Text>
+                </C.View>
+        </C.View>
     )
-}
+}
+// const Imgs = ()=>{
+//     return (
+//         <C.ImageBackground 
+//             source={{uri : `https://picsum.photos/630/300?r=${(new Date).getTime()+Math.random()}` }}
+//             cls="w45 flx1 h20 mh2 "  
+//             // resizeMode="contain"
+//         >
+//              <C.View cls="flx1 bgc-rgba-black-0_3 ai-e">
+//                 <C.EL.Icon type="entypo" name="lock" ccls="ma2" {...C.n2cls("color-white")}/>
+//              </C.View>
+//         </C.ImageBackground>
+//     )
+// }