Swap Mode

globals/endpoints.js

@@ -1,5 +1,6 @@
 module.exports = {
     Endpoints: {
+        get_post_data: "https://api.ragestudio.net/RSA-COMTY/r/get-post-data?access_token=",
         get_user_tags: "https://api.ragestudio.net/RSA-COMTY/r/user_tags?access_token=",
         get_general_data: "https://api.ragestudio.net/RSA-COMTY/r/get-general-data?access_token=",
         follow_user: "https://api.ragestudio.net/RSA-COMTY/r/follow-user?access_token=",

src/@ycore/libs/comty_layout/pre.js

@@ -1,5 +1,5 @@
 import {SetControls, CloseControls} from "../../../components/Layout/Control"
-import {SwapMode} from '../../../components/Layout/Secondary.js'
+import {SwapMode} from '../../../components/Layout/Secondary'
 
 export const SecondarySwap = {
     ext: ()=> {
@@ -8,6 +8,9 @@ export const SecondarySwap = {
     PostComments: (e) => {
         SwapMode.PostComments(e)
     },
+    openPost: (e) => {
+        SwapMode.openPost(e)
+    }
 }
 
 export const ControlBar = {

src/@ycore/libs/comty_ng/pre.js

@@ -284,6 +284,35 @@ export function GetPosts(userid, type, fkey, callback) {
       return callback(exception, response);
   })
 }
+export function GetPostData(a, b, callback){
+  if(!a){ 
+    ycore.notifyError('Is required to provide an post id!!!')
+    return false 
+  }
+  let formdata = new FormData();
+  formdata.append("server_key", ycore.yConfig.server_key);
+  formdata.append("post_id", a)
+  formdata.append("fetch", (b || "post_data,post_comments,post_wondered_users,post_liked_users"))
+ 
+  const urlOBJ = `${ycore.endpoints.get_post_data}${ycore.handlerYIDT.__token()}`
+  const settings = {
+      "url":  urlOBJ,
+      "method": "POST",
+      "timeout": 10000,
+      "processData": false,
+      "mimeType": "multipart/form-data",
+      "contentType": false,
+      "data": formdata
+  };
+  jquery.ajax(settings)
+  .done(function (response) {
+      return callback(null, response);
+  })
+  .fail(function (response) {
+      const exception = 'Request Failed';
+      return callback(exception, response);
+  })
+}
 
 export const get_app_session = {
     get_id: (callback) => {

src/@ycore/libs/yulio_id/pre.js

@@ -80,7 +80,6 @@ export const handlerYIDT = {
 
 export function ValidLoginSession(callback){
     let validtoken = false;
- 
     const a = Cookies.get('cid');
     if (a) {
         const modExp = ycore.DevOptions.SignForNotExpire;
@@ -95,10 +94,8 @@ export function ValidLoginSession(callback){
         const tokenExpLocale = new Date(tokenExp).toLocaleString()
         const now = new Date().getTime()
 
-
         ycore.yconsole.log(`TOKEN EXP => ${tokenExp} ${modExp? '( Infinite )' : `( ${tokenExpLocale} )` } || NOW => ${now}`)
     
-       
         if (modExp == false) {
             if(tokenExp < now) {
                 ycore.yconsole.log('This token is expired !!!')
@@ -108,7 +105,6 @@ export function ValidLoginSession(callback){
         if (notexp && exists) {
             validtoken = true
         }
-       
         
     }
 

src/components/Layout/Control.js

@@ -52,9 +52,9 @@ class Control extends React.Component {
         return(
           Show? (
             <StyleRoot>
-                <div key={Math.random()} style={FadeIN? animationStyles.fadeInUp : animationStyles.bounceOutDown }>
+                <div style={FadeIN? animationStyles.fadeInUp : animationStyles.bounceOutDown }>
-                    <antd.Card key={Math.random()} bordered={false} className={styles.ControlCard}> 
+                    <antd.Card bordered={false} className={styles.ControlCard}> 
-                      <React.Fragment>{RenderFragment}</React.Fragment> 
+                      <React.Fragment >{RenderFragment}</React.Fragment> 
                     </antd.Card>
                 </div>
             </StyleRoot>

src/components/Layout/Secondary/components/post.js

@@ -0,0 +1,102 @@
+import React from 'react'
+import * as antd from 'antd'
+import styles from './post.less'
+import {CustomIcons, LikeBTN} from 'components'
+import * as ycore from 'ycore'
+import * as Icons from '@ant-design/icons';
+
+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' }
+
+export default class SecondaryPostCard extends React.Component{
+    constructor(props){
+        super(props),
+        this.state = {
+            FadeIN: true
+        }
+    }
+
+    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 ActShowMode = ycore.DevOptions.force_show_postactions
+        const { id, post_time, postText, postFile, get_post_comments, postFileName, publisher, post_likes, is_post_pinned, is_liked } = payload || emptyPayload;
+       
+        const defaultActions = [
+            <div><LikeBTN count={post_likes} id={id} liked={ycore.booleanFix(is_liked)? true : false} key="like" /></div>,
+            <MICON.InsertComment key="comments" onClick={ ()=> ycore.crouter.native(`p/${id}`)  }  />
+        ]
+        const actions = customActions || defaultActions;
+       
+        const MoreMenu = (
+            <antd.Menu>
+              <antd.Menu.Item key="0">
+                key 0
+              </antd.Menu.Item>
+            </antd.Menu>
+          );
+
+        return(
+          <div className={styles.cardWrapper}>
+             <antd.Card hoverable className={ActShowMode? styles.showMode : null} actions={actions} >
+                <Meta
+                    avatar={<div className={styles.postAvatar}><antd.Avatar shape="square" size={50} src={publisher.avatar} /></div>}
+                    title={
+                    <div className={styles.titleWrapper} >
+                        <h4 onClick={() => ycore.crouter.native(`@${publisher.username}`)} className={styles.titleUser}>@{publisher.username} {ycore.booleanFix(publisher.verified)? <Icon style={{ color: 'blue' }} component={CustomIcons.VerifiedBadge} /> : null}{ycore.booleanFix(publisher.nsfw_flag)? <antd.Tag style={{ margin: '0 0 0 13px' }} color="volcano" >NSFW</antd.Tag> : null} </h4> 
+                        <div className={styles.PostTags}>
+                            <div className={styles.MoreMenu} ><antd.Dropdown overlay={MoreMenu} trigger={['click']}><Icons.MoreOutlined key="actionMenu" /></antd.Dropdown></div>
+                            {ycore.booleanFix(is_post_pinned)? (<Icons.PushpinFilled /> ): null }
+                        </div> 
+                    </div>}
+                    description={<span className={styles.textAgo}>{post_time}</span>}
+                    bordered="false"
+                />
+                {postText? <div className={styles.postContent}> <h3 dangerouslySetInnerHTML={{__html:  postText }}  /> </div> : null}
+                {postFile? <div className={styles.postContentFILE}>{this.renderPostPlayer(postFile)}</div> : null }
+                <div className={styles.ellipsisIcon}><Icons.EllipsisOutlined /></div>
+               
+                
+            </antd.Card>
+          </div>
+        )
+    }
+}

src/components/Layout/Secondary/components/post.less

@@ -0,0 +1,176 @@
+@import '~themes/vars.less';
+.cardWrapper{
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+    border-radius: 7px;
+    max-width: 510px;
+    min-width: 265px;
+    width: auto;
+    margin: 23px auto 50px auto;
+
+    :global{
+        .ant-card-meta-detail > div:not(:last-child){
+            margin: 0
+        }
+        .ant-card {
+            border-radius: 7px;
+            border: 0;
+            border-top: 1px solid #4646460c;
+        }
+        .ant-card-body {
+           padding: 13px 0 5px 0;
+        }
+
+        .ant-card-actions {
+            border-top: 0;
+            background: #EBEBEB;
+            height: 30px;
+            position: relative;
+            transition: opacity 150ms linear, position 150ms linear, transform 150ms linear;
+            border-radius: 0 0 10px 10px;
+            opacity: 0;
+            // Doesn't work... So sad :C
+            &.showMode{
+                opacity: 1;
+                transform: translate(0, 15px);
+            }
+        }
+
+        .ant-card-actions:hover {
+            opacity: 1;
+            transform: translate(0, 15px);
+            transition: opacity 150ms linear, position 150ms linear, transform 150ms linear;
+        }
+        .ant-card-actions > li > span > .anticon {
+            font-size: 16px;
+            line-height: 22px;
+            width: 40px;
+            height: 40px;
+            background: white;
+            border-radius: 23px;
+        
+        }
+        .ant-card-actions > li {
+            margin: -20px 0 0 0 ;
+            border-right: 0;
+            span {
+                font-size: 16px;
+                line-height: 22px;
+                width: 40px;
+                height: 40px;
+                background: white;
+                border-radius: 23px;
+                margin: auto;
+            }
+            svg {
+                height: 20px;
+                width: 20px;
+                height: 100%;
+                vertical-align: middle;
+            }
+        }
+    }
+}
+.showMode{
+    :global{
+       ul {
+           opacity: 1 !important;
+           transform: translate(0, 15px);
+       }
+    }
+}
+.postAvatar{
+    position: absolute;
+    left: -8px;
+    top: -8px;
+    display: flex;
+}
+.titleUser{
+    display: flex;
+    font-family: 'Poppins', sans-serif;
+    margin: 0 0 0 50px;
+}
+.textAgo{
+    display: flex;
+    font-size: 10px;
+    margin: 0 0 0 53px;
+}
+.PostTags{
+    float: right;
+    width: 100%;
+    z-index: 10;
+    :global {
+        .anticon{
+            color:rgb(249, 179, 64);
+            float: right;
+            margin: -0 6px 0 0;;
+            font-size: 17px;
+        }
+        .MoreMenu{
+            color: #2d2d2d !important;
+        }
+    }
+}
+.titleWrapper{
+    display: flex;
+    h4{
+        cursor: pointer;
+    }
+}
+.postContent{
+    word-break: break-all;
+    display: flex;
+    border-radius: 3px;
+    margin: 23px 24px 23px 24px;
+    h3{
+        font-family: "Poppins", sans-serif;
+        color: #555555;
+        font-weight: 400;
+        font-size: 15px;
+        letter-spacing: -0.3px;
+    }
+}
+.postContentFILE{
+    display: flex;
+    margin: 23px 0 5px 0;
+    max-height: 600px;
+    overflow: hidden;
+    img {
+        width: calc(100% + 30px);
+        overflow: hidden;
+        margin: auto;
+    }
+    video {
+        max-height: 600px;
+        width: calc(100% + 30px);
+        overflow: hidden;
+    }
+    h3{
+        color: rgb(85, 85, 85);
+        font-weight: 470;
+    }
+}
+.likebtn{
+   :global{
+       svg{
+        color:rgba(0, 0, 0, 0.45);
+       }
+       svg:hover{
+           color: rgb(233, 35, 68);
+           transition: all 0.2s linear;
+       }
+   }
+}
+
+.ellipsisIcon{
+    color:rgba(0, 0, 0, 0.45);
+    width: 100%;
+    position: absolute;
+    text-align: center;
+    margin: auto;
+    font-size: 30px;
+    transition: opacity 150ms linear;
+}
+.ellipsisIcon:hover{
+    opacity: 0;
+    transition: opacity 150ms linear;
+}

src/components/Layout/Secondary/index.js

@@ -2,9 +2,10 @@ import React from 'react'
 import * as ycore from 'ycore'
 import * as antd from 'antd'
 import * as Icons from '@ant-design/icons'
-import styles from './Secondary.less'
+import styles from './index.less'
 import classnames from 'classnames'
 
+import SecRenderPost from './post'
 
 export const SwapMode = {
     ext: () => {
@@ -19,6 +20,13 @@ export const SwapMode = {
             mode: 'post_comments',
             s_raw: e
         })
+    },
+    openPost: (e) => {
+        SecondaryLayoutComponent.setState({
+            swap: true,
+            mode: 'open_post',
+            s_raw: e
+        })
     }
 }
 
@@ -30,10 +38,24 @@ export default class Secondary extends React.PureComponent{
             swap: false,
             mode: 'ext',
             s_raw: '',
-            s_postData: '',
         }
     }
-    
+    closeSwap(){
+        this.setState({ 
+            swap: !this.state.swap,
+            s_raw: null,
+            mode: 'ext'
+         })
+    }
+    renderPost = (payload) => {
+        const post_data = JSON.parse(payload)['post_data']
+        console.log(post_data)
+        return(
+           <SecRenderPost payload={post_data} />
+        )
+    }
+
+
     renderMode(){
         const { mode } = this.state
         switch (mode) {
@@ -46,6 +68,11 @@ export default class Secondary extends React.PureComponent{
                       <PostComments s_raw={this.state.s_raw} />
                    ) 
                }
+            case 'open_post':{
+                return(
+                    this.renderPost(this.state.s_raw)
+                )
+            }
         
             default:
                 break;
@@ -64,8 +91,8 @@ export default class Secondary extends React.PureComponent{
                 </div>
 
                 <div className={styles.container} >
-                {this.state.swap? <antd.Button type="ghost" icon={<Icons.LeftOutlined />} onClick={() => this.setState({ swap: !this.state.swap })} > Back </antd.Button> : null}
+                {this.state.swap? <antd.Button type="ghost" icon={<Icons.LeftOutlined />} onClick={() => this.closeSwap()} > Back </antd.Button> : null}
-                <h1>container</h1>
+                {this.renderMode()}
                 
 
                 </div>

src/components/Layout/Secondary/index.less

@@ -50,10 +50,11 @@
   }
   .container{
     z-index: 200;
+    position: relative;
     background-color: #201F23;
     color: @DarkMode-color_container !important;
     border-radius: 32px 0 0 32px;
-    padding: 20px 15px 15px 15px;
+    padding: 30px 375px 30px 75px;
     width: 100%;
     height: 100vh;
     :global{

src/components/Layout/Secondary/post.js

@@ -0,0 +1,53 @@
+import React from 'react'
+import styles from './post.less'
+
+import * as antd from 'antd'
+import * as ycore from 'ycore'
+import Icon from '@ant-design/icons'
+import {MediaPlayer, PostCard} from 'components'
+
+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>)
+
+export default class SecRenderPost extends React.Component{
+    
+    renderContent(payload){
+        const { id, postText, postFile_full, post_time, publisher} = payload
+        if (!postFile_full) {
+            return(
+                <div className={styles.postContent_OnlyText}>
+                    <PostCard payload={payload} />
+                </div>
+            )
+        }
+        return (
+            <div className={styles.contentWrapper}>
+                {postFile_full? <MediaPlayer file={postFile_full} /> : null}
+                {postText? <div className={styles.postContent}> <h3 dangerouslySetInnerHTML={{__html:  postText }}  /> </div> : null}
+            </div>
+        )
+    }
+
+
+    render(){
+        const payload = this.props.payload
+        if (!payload) {
+            return (
+                <h1>This post not exists!!!</h1>
+            )
+        }
+        const { id, postText, postFile_full, post_time, publisher} = payload
+        return(
+           <div className={styles.SecondaryBody}>
+               
+                <div className={styles.UserContainer}>
+                    <div className={styles.UserContainer_text}>
+                        <h4 className={styles.titleUser}>{publisher.username} {ycore.booleanFix(publisher.verified)? <Icon style={{ color: 'blue' }} component={VerifiedBadge} /> : null}</h4>
+                        <p> {post_time} {ycore.IsThisUser.dev()? `| #${id}` : null} </p>
+                    </div> 
+                    <antd.Avatar shape="square" size={50} src={publisher.avatar} />
+                </div>
+               {this.renderContent(payload)}
+           </div>
+        )
+    }
+}

src/components/Layout/Secondary/post.less

@@ -0,0 +1,121 @@
+@import '~themes/vars.less';
+
+.SecondaryBody{
+    width: 100%;
+    height: 100%;  
+}
+
+.UserContainer{
+    display: flex;
+    position: relative;
+    float: right;
+    z-index: 150;
+    transform: translate(0, -40px);
+    .UserContainer_text{
+        margin: 0 8px;
+        h4 { text-align: right;   }
+        p { word-break: break-all; text-align: right; font-size: 11px; color: #eeeeee!important; }
+    }
+   
+
+}
+
+.postAvatar{
+    position: absolute;
+    left: -8px;
+    top: -8px;
+    display: flex;
+}
+.titleUser{
+    display: flex;
+    font-family: 'Poppins', sans-serif;
+    margin: 0 0 0 50px;
+    color: #ffffff!important;
+}
+.textAgo{
+    display: flex;
+    font-size: 10px;
+    margin: 0 0 0 53px;
+}
+.PostTags{
+    float: right;
+    width: 100%;
+    z-index: 10;
+    :global {
+        .anticon{
+            color:rgb(249, 179, 64);
+            float: right;
+            margin: -0 6px 0 0;;
+            font-size: 17px;
+        }
+        .MoreMenu{
+            color: #2d2d2d !important;
+        }
+    }
+}
+.titleWrapper{
+    display: flex;
+    h4{
+        cursor: pointer;
+    }
+    color: #ffffff!important;
+
+}
+.contentWrapper{
+    margin: auto;
+    width: 100%;
+    padding: 20px;
+}
+
+
+.postContent{
+    word-break: break-all;
+    position: absolute;
+    vertical-align: bottom;
+    border-radius: 7px;
+    bottom: 0;
+    max-width: 50vw;
+
+    background-color: #2d2d2d4b;
+    padding: 10px;
+    h3{
+        font-family: "Poppins", sans-serif;
+        color: #ffffff;
+        font-weight: 400;
+        font-size: 15px;
+        letter-spacing: -0.3px;
+    }
+}
+.postContent_OnlyText{
+    padding: 25% 0 0 0;
+    position: relative;
+    vertical-align: middle;
+
+}
+
+
+.likebtn{
+   :global{
+       svg{
+        color:rgba(0, 0, 0, 0.45);
+       }
+       svg:hover{
+           color: rgb(233, 35, 68);
+           transition: all 0.2s linear;
+       }
+   }
+}
+
+.ellipsisIcon{
+    color:rgba(0, 0, 0, 0.45);
+    width: 100%;
+    position: absolute;
+    text-align: center;
+    margin: auto;
+    font-size: 30px;
+    transition: opacity 150ms linear;
+}
+.ellipsisIcon:hover{
+    opacity: 0;
+    transition: opacity 150ms linear;
+}

src/components/Layout/SecondaryHeader.js

@@ -1,19 +0,0 @@
-import React from 'react'
-import * as ycore from 'ycore'
-import * as antd from 'antd'
-import * as Icons from '@ant-design/icons'
-import styles from './Secondary.less'
-
-
-export default class SecondaryHeader extends React.Component{
-    render(){
-        const userData = this.props;
-
-        return(
-            <div className={styles.SecondHeader}>
-              <div className={styles.notif_box}></div>
-              <img onClick={() => ycore.crouter.native(`@${userData.username}`)} src={userData.avatar} />
-            </div>
-        )
-    }
-}

src/components/Layout/index.js

@@ -1,5 +1,5 @@
 import Sider from './Sider'
 import Control from './Control'
-import Secondary from './Secondary'
+import Secondary from './Secondary/index.js'
 
 export { Sider, Control, Secondary }

src/components/MediaPlayer/index.js

@@ -0,0 +1,49 @@
+import React from 'react'
+import styles from './index.less'
+
+export default class MediaPlayer extends React.PureComponent {
+    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 {file} = this.props
+        return (
+            <div className={styles.PlayerContainer}>
+                {this.renderPostPlayer(file)}
+            </div> 
+        )
+    }
+}

src/components/MediaPlayer/index.less

@@ -0,0 +1,28 @@
+.PlayerContainer{
+    max-width: 100vw;
+    max-height: 75vh;
+    img {
+        object-fit: contain;
+        position: absolute;
+        top: 50%;
+        left: 47%;
+        width: 500px;
+        height: 500px;
+        margin-top: -250px;
+        margin-left: -350px;
+    }
+    video {
+        object-fit: contain;
+        position: absolute;
+        top: 50%;
+        left: 47%;
+        width: 500px;
+        height: 500px;
+        margin-top: -250px;
+        margin-left: -350px;
+    }
+    h3{
+        color: rgb(85, 85, 85);
+        font-weight: 470;
+    }
+}

src/components/PostCard/index.js

@@ -58,6 +58,14 @@ class PostCard extends React.PureComponent{
         }
     }
 
+    goToPost(postID){
+        localStorage.setItem('p_back_uid', postID)
+        ycore.GetPostData(postID, null, (err, res) => {
+            if (err) { return false }
+            ycore.SecondarySwap.openPost(res)
+        })
+    }
+
     render(){
         const { payload, customActions } = this.props
         const ActShowMode = ycore.DevOptions.force_show_postactions
@@ -65,7 +73,7 @@ class PostCard extends React.PureComponent{
        
         const defaultActions = [
             <div><LikeBTN count={post_likes} id={id} liked={ycore.booleanFix(is_liked)? true : false} key="like" /></div>,
-            <MICON.InsertComment key="comments" onClick={ ()=> ycore.SecondarySwap.PostComments(get_post_comments)  }  />
+            <MICON.InsertComment key="comments" onClick={ ()=> this.goToPost(id) }  />
         ]
         const actions = customActions || defaultActions;
        
@@ -79,7 +87,7 @@ class PostCard extends React.PureComponent{
 
         return(
           <div className={styles.cardWrapper}>
-             <antd.Card hoverable className={ActShowMode? styles.showMode : null} actions={actions} >
+             <antd.Card onDoubleClick={ ()=> this.goToPost(id) } hoverable className={ActShowMode? styles.showMode : null} actions={actions} >
                 <Meta
                     avatar={<div className={styles.postAvatar}><antd.Avatar shape="square" size={50} src={publisher.avatar} /></div>}
                     title={

src/components/PostCreator/index.js

@@ -10,9 +10,6 @@ import * as MICONS from '@material-ui/icons'
 import Post_options from './local_components/post_options'
 import {toogleOptionsBox} from './local_components/post_options'
 
-const { Meta } = antd.Card;
-const userData = ycore.userData();
-
 
 function getBase64(img, callback) {
     const reader = new FileReader();
@@ -196,6 +193,7 @@ class PostCreator extends React.PureComponent{
     }
 
     render(){
+        const {userData} = this.props
         const { keys_remaining, visible, fileURL, file } = this.state;
         const percent = (((keys_remaining/ycore.DevOptions.MaxLengthPosts) * 100).toFixed(2) )
         const changeShare = ({ key }) => {

src/components/index.js

@@ -20,6 +20,7 @@ import UserProfile from './UserProfile'
 import SearchCard from './SearchCard'
 
 // Post Components
+import MediaPlayer from './MediaPlayer'
 import PostCard from './PostCard'
 import LikeBTN from './LikeBtn'
 import MainFeed from './MainFeed'
@@ -28,6 +29,7 @@ import PostCreator from './PostCreator'
 // Mix & Export all
 export 
 { 
+    MediaPlayer,
     UserBadges,
     MobileWarning, 
     PageTransition, 

src/pages/main/index.js

@@ -1,19 +1,15 @@
 import React from 'react'
-import * as antd from 'antd'
 import * as ycore from 'ycore'
 import {PostCreator, MainFeed} from 'components'
 import styles from './index.less'
 
-class Main extends React.Component {
+export default class Main extends React.Component {
-  
- 
     render(){
         return (
            <div className={styles.mainWrapper}>
-                    <PostCreator />
+                    <PostCreator userData={ycore.userData()} />
                     <MainFeed get="feed" />
            </div>
         )
     }
-}
+}
-export default Main;

src/pages/p/$post/index.js

@@ -9,18 +9,30 @@ export default class Indexer_Post extends React.Component{
     constructor(props){
         super(props),
         this.state = {
-          loading: true
+          loading: true,
+          swaped: false,
+          UUID: ''
         }
     }
 
+    toSwap(id){
+      ycore.GetPostData(id, null, (err, res) => {
+        if (err) { return false }
+        ycore.SecondarySwap.openPost(res)
+      })
+    }
+
     componentDidMount(){
       try {
         const {location} = this.props
-        const matchSearch = pathMatchRegexp("/s/:id", location.pathname);
+        const regexp = pathMatchRegexp("/p/:id", location.pathname)
-        const parsed = matchSearch.shift()
+        const match = regexp.shift().toString()
-        const raw = parsed.toString()
+    
-        const string = raw.replace('/s/', "")
+        const string = match.replace('/p/', "")
-        console.log(string)
+        this.setState({ UUID: string })
+        if (string) {
+          this.toSwap(string)
+        }
 
       } catch (err) {
         ycore.notifyError(err)
@@ -28,8 +40,7 @@ export default class Indexer_Post extends React.Component{
     }
 
     render(){
-        return(
+        ycore.crouter.native('main')
-            <div>Ajam</div>
+        return null
-        )
     }
 }

src/pages/settings/components/base.js

@@ -26,7 +26,7 @@ class Base extends Component {
   let e = item.type
    switch (e) {
      case 'switch':
-      return <Switch checkedChildren={'Enabled'} unCheckedChildren={'Disabled'} checked={item.value} onChange={() => this.onChangeSwitch(item)} />
+      return <Switch checkedChildren={'Enabled'} unCheckedChildren={'Disabled'} checked={item.value? true : false} onChange={() => this.onChangeSwitch(item)} />
       case 'numeric':
         return <InputNumber min={1} max={50} defaultValue={item.value} onChange={() => this.onChangeNumeric(item, value)} />
      default:
@@ -57,7 +57,7 @@ class Base extends Component {
   }
   handleControlBar(){
     const ListControls = [
-      (<div>
+      (<div key={Math.random()}>
           <Button type="done" icon={<Icons.SaveOutlined />} onClick={() => this.saveChanges()} >Save</Button>
       </div>
      )
@@ -108,7 +108,6 @@ class Base extends Component {
       <Fragment>
          <div>
             <h1><Icons.PullRequestOutlined /> Behaviors</h1>
-            <Icon type="message" style={{ fontSize: '16px', color: '#08c' }} theme="outlined" />
              {this.SettingRender(this.state.SettingRepo)}
          </div>
       </Fragment>