RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 10:34:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feed post functionality added

Browse Source
This commit is contained in:
srgooglo 2020-02-03 20:05:06 +01:00
parent b2ac69142a
commit a17fd7f798
10 changed files with 178 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
config/ycore.config.js
View File

@ -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",

1
package.json
View File

@ -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",

5
src/components/CustomIcons/index.js Normal file
View File

@ -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

51
src/components/PostCard/index.js
View File

@ -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} />}
title={<h4 className={styles.titleUser}>@{user}</h4>}
avatar={<div className={styles.postAvatar}><antd.Avatar shape="square" size={50} src={avatar} /></div>}
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>

78
src/components/PostCard/index.less
View File

@ -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: 10px;
border-radius: 7px;
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;
}
}
}

3
src/components/index.js
View File

@ -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}

54
src/pages/main/index.js
View File

@ -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() {
const rep = [userData].map((item)=> {return JSON.stringify(item)})
constructor(props){
super(props)
this.state = {
feedRaw: '',
}
}
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 (
<antd.Comment
author={'Data'}
content={rep}
/>
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>
)
}

1
src/themes/mixin.less
View File

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

1
src/themes/plyr.css Normal file
View File

File diff suppressed because one or more lines are too long

5
src/ycore_worker.tsx
View File

@ -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,