feed post functionality added

config/ycore.config.js

@@ -33,6 +33,7 @@ module.exports = {
        get_marketplace_global: "https://api.ragestudio.net/RS-YIBTP/rs/marketplaceHandler?access_token=",
        get_config_endpoint: "https://api.ragestudio.net/RS-YIBTP/yid/get-site-settings?access_token=",
        get_userData_endpoint: "https://api.ragestudio.net/RS-YIBTP/yid/get-user-data?access_token=",
+       get_userPostFeed: "https://api.ragestudio.net/RS-YIBTP/yid/posts?access_token=",
        update_userData_endpoint: "https://api.ragestudio.net/RS-YIBTP/yid/update-user-data?access_token=",
        removeToken: "https://api.ragestudio.net/RS-YIBTP/yid/delete-access-token?access_token=",
        register_endpoint: "https://api.ragestudio.net/RS-YIBTP/yid/create-account",

package.json

@@ -63,6 +63,7 @@
     "react-new-window": "^0.1.2",
     "react-notifications": "^1.4.3",
     "react-perfect-scrollbar": "^1.4.2",
+    "react-plyr": "^2.2.0",
     "react-responsive": "^8.0.1",
     "react-router": "^5.1.2",
     "react-scripts": "2.1.1",

src/components/CustomIcons/index.js

@@ -0,0 +1,5 @@
+const VerifiedBadge = () => (<svg xmlns="http://www.w3.org/2000/svg" fill="#55acee" width="15" height="15" viewBox="0 0 24 24"> <path d="M23 12l-2.44-2.78.34-3.68-3.61-.82-1.89-3.18L12 3 8.6 1.54 6.71 4.72l-3.61.81.34 3.68L1 12l2.44 2.78-.34 3.69 3.61.82 1.89 3.18L12 21l3.4 1.46 1.89-3.18 3.61-.82-.34-3.68L23 12m-13 5l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"></path></svg>)
+const test = () => (' NOthinginhere ')
+
+const CustomIcons = {VerifiedBadge, test}
+export default CustomIcons

src/components/PostCard/index.js

@@ -1,32 +1,71 @@
 import React from 'react'
 import * as antd from 'antd'
 import styles from './index.less'
+import {CustomIcons} from 'components'
 
 const { Meta } = antd.Card;
 
 // Set default by configuration
 const emptyPayload = {user: 'Post Empty', ago: 'This Post is empty', avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png', content: 'Test Test' }
-const defaultActions = [<antd.Icon type="setting" key="setting" />,<antd.Icon type="edit" key="edit" />,<antd.Icon type="ellipsis" key="ellipsis" />]
+const defaultActions = [<antd.Icon type="heart"  className={styles.likebtn} key="like" />,<antd.Icon type="share-alt" key="share" />,<antd.Icon type="more" key="actionMenu" />]
 
 class PostCard extends React.PureComponent{
     constructor(props){
         super(props)
     }
+
+    renderPostPlayer(payload){
+        const ident = payload
+        if (ident.includes('.mp4')) {
+           return (
+                <video id="player" playsinline controls > 
+                     <source src={payload} type="video/mp4"/>
+                </video>
+           )
+        }
+        if (ident.includes('.webm')) {
+            return (
+                <video id="player" playsinline controls > 
+                     <source src={payload} type="video/webm"/>
+                </video>
+           )
+        }
+        if (ident.includes('.mp3')){
+            return (
+                <audio id="player" controls>
+                    <source src={payload} type="audio/mp3" />
+                </audio>
+            )
+        }
+        if (ident.includes('.ogg')){
+            return (
+                <audio id="player" controls>
+                    <source src={payload} type="audio/ogg" />
+                </audio>
+            )
+        }
+        else {
+            return (
+                <img src={payload} />
+            )
+        }
+    }
     render(){
         const { payload, customActions,  } = this.props
-        const { user, ago, avatar, content } = payload || emptyPayload;
+        const { user, ago, avatar, content, file, postFileName } = payload || emptyPayload;
         const actions = customActions || defaultActions;
         return(
           <div className={styles.cardWrapper}>
-             <antd.Card   >
+             <antd.Card actions={actions} >
                 <Meta
-                    avatar={<antd.Avatar shape="square" size={50} className={styles.postAvatar} src={avatar} />}
+                    avatar={<div className={styles.postAvatar}><antd.Avatar shape="square" size={50} src={avatar} /></div>}
-                    title={<h4 className={styles.titleUser}>@{user}</h4>}
+                    title={<div><h4 className={styles.titleUser}>@{user} <antd.Icon style={{ color: 'blue' }} component={CustomIcons.VerifiedBadge} /></h4>  </div>}
                     description={<span className={styles.textAgo}>{ago}</span>}
-                    bordered={false}
+                    bordered="false"
                 />
                 <div className={styles.postContent}>
                     <h3>{content}</h3>
+                    {file? this.renderPostPlayer(file) : null }
                 </div>
             </antd.Card>
           </div>

src/components/PostCard/index.less

@@ -1,34 +1,92 @@
 .cardWrapper{
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+
+    border-radius: 7px;
     width: auto;
     max-width: 75vw;
     min-width: 40vw;
+    margin: 50px 0 50px 0;
     :global{
         .ant-card-meta-detail > div:not(:last-child){
             margin: 0
         }
         .ant-card {
-            
+            border-radius: 7px;
-            border-radius: 10px;
+            border: 0;
+            border-top: 1px solid #4646460c;
         }
+        .ant-card-body {
+            padding: 13px 24px 24px 24px;
+        }
+        .ant-card-actions {
+            border-top: 0;
+            height: 30px;
+            background: #EBEBEB;
+        }
+        .ant-card-actions > li {
+            margin: -20px 0 0 0 ;
+            border-right: 0;
+            
+            i{
+               
+             vertical-align: middle;
+             height: 40px;
+             width: 40px;
+             background-color: #fff;
+             border-radius: 24px;
+            }
+            svg {
+                height: 20px;
+                width: 20px;
+                height: 100%;
+                vertical-align: middle;
+            }
+           
+        }
+      
     }
 }
 .postAvatar{
     position: absolute;
     left: -8px;
     top: -8px;
+    display: flex;
+}
+.titleUser{
+    display: flex;
+    font-family: 'Poppins', sans-serif;
+    margin: 0 0 0 25px;
+}
+.textAgo{
+    display: flex;
+    font-size: 10px;
+    margin: 0 0 0 25px;
 }
 .postContent{
+    display: flex;
+    img {
+       width: 70%;
+    }
+    video {
+        margin: auto;
+        width: 70%;
+    }
     h3{
         color: rgb(85, 85, 85);
         font-weight: 470;
     }
-    padding: 23px 13px 13px 13px;
+    border-radius: 3px;
-}
+    margin: 23px 13px 23px 0;
-.textAgo{
-    font-size: 10px;
-    margin: 0 0 0 0;
-}
-.titleUser{
-    font-family: 'Poppins', sans-serif;
-    margin: 0 0 0 25px;
 }
+
+.likebtn{
+   :global{
+       svg{
+        color:rgba(0, 0, 0, 0.45);
+       }
+       svg:hover{
+           color: rgb(233, 35, 68);
+           transition: all 0.2s linear;
+       }
+   }
+}

src/components/index.js

@@ -1,3 +1,4 @@
+import CustomIcons from './CustomIcons'
 import PostCard from './PostCard'
 import Editor from './Editor'
 import FilterItem from './FilterItem'
@@ -9,4 +10,4 @@ import Page from './Page'
 import YulioID from './YulioID/experimental/index.js'
 import CoreLoader from './CoreLoader'
 
-export { MyLayout, Editor, FilterItem, DropOption, Loader, Page, ScrollBar, YulioID, CoreLoader, PostCard }
+export { MyLayout, Editor, FilterItem, DropOption, Loader, Page, ScrollBar, YulioID, CoreLoader, PostCard , CustomIcons}

src/pages/main/index.js

@@ -3,24 +3,62 @@ import * as antd from 'antd'
 import * as ycore from 'ycore'
 import {PostCard} from 'components'
 
+
 var userData = ycore.SDCP()
 
 
 class Main extends React.Component {
-    renderUserSDCP() {
+    constructor(props){
-        const rep = [userData].map((item)=> {return JSON.stringify(item)})
+        super(props)
-        return (
+        this.state = {
-        <antd.Comment
+            feedRaw: '',
-            author={'Data'}
+        }
-            content={rep}
+    }
-      />
+    fetchFeed() {
-      )
+        var formdata = new FormData();
+        formdata.append("server_key", ycore.yConfig.server_key);
+        formdata.append("type", "get_news_feed");
+
+        var requestOptions = {
+          method: 'POST',
+          body: formdata,
+          redirect: 'follow'
+        };
+        const objUrl = `${ycore.endpoints.get_userPostFeed}${ycore.GetUserToken.decrypted().UserToken}`
+        console.log(objUrl)
+        fetch(objUrl, requestOptions)
+          .then(response => response.text())
+          .then(result => {
+              console.log(result)
+              this.setState({ feedRaw: result })
+          })
+          .catch(error => console.log('error', error));
+    }
+    componentDidMount(){
+        this.fetchFeed()
+    }
+    
+    renderFeedPosts(){
+        const {feedRaw} = this.state
+        try {
+            const feedParsed = JSON.parse(feedRaw)['data']
+            return (
+                feedParsed.map(item=> {
+                    const {postText, post_time, publisher, postFile, postFileName} = item
+                    const paylodd = {user: publisher.username, ago: post_time, avatar: publisher.avatar, content: postText, file: postFile, postFileName: postFileName }
+                    console.log([item], paylodd)
+                    return <PostCard payload={paylodd} />
+                })
+            )
+        } catch (err) {
+            console.error(`Error detected when proccessing the feed posts... =>  ${err}`)
+        }
+    
     }
     render(){
-        const paylodd = {user: userData.username, ago: 'Hace 1 Segundo', avatar: userData.avatar, content: 'Hola buenas adios buenas'}
         return (
             <div>   
-                <PostCard  payload={paylodd} />
+              { this.renderFeedPosts() }
             </div>
         )
     }

src/themes/mixin.less

@@ -1,5 +1,6 @@
 @import '~themes/default';
 @import (inline) './fonty.css';
+@import (inline) './plyr.css';
 
 @dark-half: #494949;
 @purple: #d897eb;

src/ycore_worker.tsx

@@ -20,6 +20,11 @@ var yConfig = config.yConfig;
 // Export global objects
 exports.router = router;
 exports.endpoints = endpoints;
+
+// WARNING ONLY EXPORT IN DEVELOPMENT, FOR PRODUCTION REMOVE
+exports.yConfig = yConfig;
+//
+
 exports.DevOptions = DevOptions;
 exports.ycore_worker = {
     ServerVersion: package_json.version,