diff --git a/globals/endpoints.js b/globals/endpoints.js index b53a64f5..0ebc3ab6 100755 --- a/globals/endpoints.js +++ b/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=", diff --git a/src/@ycore/libs/comty_layout/pre.js b/src/@ycore/libs/comty_layout/pre.js index 036c7a3a..8b1356f4 100755 --- a/src/@ycore/libs/comty_layout/pre.js +++ b/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 = { diff --git a/src/@ycore/libs/comty_ng/pre.js b/src/@ycore/libs/comty_ng/pre.js index ddac4979..597bcb63 100755 --- a/src/@ycore/libs/comty_ng/pre.js +++ b/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) => { diff --git a/src/@ycore/libs/yulio_id/pre.js b/src/@ycore/libs/yulio_id/pre.js index dae2c776..b1457eec 100755 --- a/src/@ycore/libs/yulio_id/pre.js +++ b/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 } - } diff --git a/src/components/Layout/Control.js b/src/components/Layout/Control.js index 11dce6d3..9417ebae 100755 --- a/src/components/Layout/Control.js +++ b/src/components/Layout/Control.js @@ -52,9 +52,9 @@ class Control extends React.Component { return( Show? ( -
- - {RenderFragment} +
+ + {RenderFragment}
diff --git a/src/components/Layout/Secondary/components/post.js b/src/components/Layout/Secondary/components/post.js new file mode 100644 index 00000000..37a34b76 --- /dev/null +++ b/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 ( + + ) + } + if (ident.includes('.webm')) { + return ( + + ) + } + if (ident.includes('.mp3')){ + return ( + + ) + } + if (ident.includes('.ogg')){ + return ( + + ) + } + else { + return ( + + ) + } + } + + 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 = [ +
, + ycore.crouter.native(`p/${id}`) } /> + ] + const actions = customActions || defaultActions; + + const MoreMenu = ( + + + key 0 + + + ); + + return( +
+ +
} + title={ +
+

ycore.crouter.native(`@${publisher.username}`)} className={styles.titleUser}>@{publisher.username} {ycore.booleanFix(publisher.verified)? : null}{ycore.booleanFix(publisher.nsfw_flag)? NSFW : null}

+
+
+ {ycore.booleanFix(is_post_pinned)? ( ): null } +
+
} + description={{post_time}} + bordered="false" + /> + {postText?

: null} + {postFile?
{this.renderPostPlayer(postFile)}
: null } +
+ + + +
+ ) + } +} diff --git a/src/components/Layout/Secondary/components/post.less b/src/components/Layout/Secondary/components/post.less new file mode 100644 index 00000000..1d73c5d4 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/components/Layout/Secondary.js b/src/components/Layout/Secondary/index.js old mode 100755 new mode 100644 similarity index 70% rename from src/components/Layout/Secondary.js rename to src/components/Layout/Secondary/index.js index 9327f48e..d21dbd58 --- a/src/components/Layout/Secondary.js +++ b/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( + + ) + } + + renderMode(){ const { mode } = this.state switch (mode) { @@ -46,6 +68,11 @@ export default class Secondary extends React.PureComponent{ ) } + case 'open_post':{ + return( + this.renderPost(this.state.s_raw) + ) + } default: break; @@ -64,8 +91,8 @@ export default class Secondary extends React.PureComponent{
- {this.state.swap? } onClick={() => this.setState({ swap: !this.state.swap })} > Back : null} -

container

+ {this.state.swap? } onClick={() => this.closeSwap()} > Back : null} + {this.renderMode()}
diff --git a/src/components/Layout/Secondary.less b/src/components/Layout/Secondary/index.less old mode 100755 new mode 100644 similarity index 96% rename from src/components/Layout/Secondary.less rename to src/components/Layout/Secondary/index.less index 5835a7f8..b820401d --- a/src/components/Layout/Secondary.less +++ b/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{ diff --git a/src/components/Layout/Secondary/post.js b/src/components/Layout/Secondary/post.js new file mode 100644 index 00000000..723f8692 --- /dev/null +++ b/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 = () => ( ) + +export default class SecRenderPost extends React.Component{ + + renderContent(payload){ + const { id, postText, postFile_full, post_time, publisher} = payload + if (!postFile_full) { + return( +
+ +
+ ) + } + return ( +
+ {postFile_full? : null} + {postText?

: null} +
+ ) + } + + + render(){ + const payload = this.props.payload + if (!payload) { + return ( +

This post not exists!!!

+ ) + } + const { id, postText, postFile_full, post_time, publisher} = payload + return( +
+ +
+
+

{publisher.username} {ycore.booleanFix(publisher.verified)? : null}

+

{post_time} {ycore.IsThisUser.dev()? `| #${id}` : null}

+
+ +
+ {this.renderContent(payload)} +
+ ) + } +} \ No newline at end of file diff --git a/src/components/Layout/Secondary/post.less b/src/components/Layout/Secondary/post.less new file mode 100644 index 00000000..ca1f3aaf --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/components/Layout/SecondaryHeader.js b/src/components/Layout/SecondaryHeader.js deleted file mode 100755 index 54e7db4c..00000000 --- a/src/components/Layout/SecondaryHeader.js +++ /dev/null @@ -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( -
-
- ycore.crouter.native(`@${userData.username}`)} src={userData.avatar} /> -
- ) - } -} \ No newline at end of file diff --git a/src/components/Layout/index.js b/src/components/Layout/index.js index 2c9a1b20..bfb103b5 100755 --- a/src/components/Layout/index.js +++ b/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 } diff --git a/src/components/MediaPlayer/index.js b/src/components/MediaPlayer/index.js new file mode 100644 index 00000000..7368e4c3 --- /dev/null +++ b/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 ( + + ) + } + if (ident.includes('.webm')) { + return ( + + ) + } + if (ident.includes('.mp3')){ + return ( + + ) + } + if (ident.includes('.ogg')){ + return ( + + ) + } + else { + return ( + + ) + } + } + render(){ + const {file} = this.props + return ( +
+ {this.renderPostPlayer(file)} +
+ ) + } +} \ No newline at end of file diff --git a/src/components/MediaPlayer/index.less b/src/components/MediaPlayer/index.less new file mode 100644 index 00000000..fe74a0d6 --- /dev/null +++ b/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; + } +} diff --git a/src/components/PostCard/index.js b/src/components/PostCard/index.js index aba26bd9..8f9c3c68 100755 --- a/src/components/PostCard/index.js +++ b/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 = [
, - ycore.SecondarySwap.PostComments(get_post_comments) } /> + this.goToPost(id) } /> ] const actions = customActions || defaultActions; @@ -79,7 +87,7 @@ class PostCard extends React.PureComponent{ return(
- + this.goToPost(id) } hoverable className={ActShowMode? styles.showMode : null} actions={actions} >
} title={ diff --git a/src/components/PostCreator/index.js b/src/components/PostCreator/index.js index 85a705f0..367c6bfb 100755 --- a/src/components/PostCreator/index.js +++ b/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 }) => { diff --git a/src/components/index.js b/src/components/index.js index eae6a249..512f3ca0 100755 --- a/src/components/index.js +++ b/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, diff --git a/src/pages/main/index.js b/src/pages/main/index.js index c1719daf..1d151318 100755 --- a/src/pages/main/index.js +++ b/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 (
- +
) } -} -export default Main; \ No newline at end of file +} \ No newline at end of file diff --git a/src/pages/p/$post/index.js b/src/pages/p/$post/index.js index 44b00d49..32f0ff63 100755 --- a/src/pages/p/$post/index.js +++ b/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 parsed = matchSearch.shift() - const raw = parsed.toString() - const string = raw.replace('/s/', "") - console.log(string) + const regexp = pathMatchRegexp("/p/:id", location.pathname) + const match = regexp.shift().toString() + + const string = match.replace('/p/', "") + 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( -
Ajam
- ) + ycore.crouter.native('main') + return null } } diff --git a/src/pages/settings/components/base.js b/src/pages/settings/components/base.js index 54acc39b..3cd4166b 100755 --- a/src/pages/settings/components/base.js +++ b/src/pages/settings/components/base.js @@ -26,7 +26,7 @@ class Base extends Component { let e = item.type switch (e) { case 'switch': - return this.onChangeSwitch(item)} /> + return this.onChangeSwitch(item)} /> case 'numeric': return this.onChangeNumeric(item, value)} /> default: @@ -57,7 +57,7 @@ class Base extends Component { } handleControlBar(){ const ListControls = [ - (
+ (
) @@ -108,7 +108,6 @@ class Base extends Component {

Behaviors

- {this.SettingRender(this.state.SettingRepo)}