From f9e3014c1394b883e9dae5c49b7d7f19b188ba87 Mon Sep 17 00:00:00 2001 From: srgooglo <38926803+srgooglo@users.noreply.github.com> Date: Wed, 1 Apr 2020 02:04:43 +0200 Subject: [PATCH] Co-authored-by: genericgooglo --- .gitignore | 2 +- app/main.js | 112 -------- app/preload.js | 8 - app/renderer.js | 3 - capacitor.config.json | 8 + config/keys.js | 1 - config/ycore.config.js | 1 + package.json | 5 +- src/@ycore/libs/app_functions/pre.js | 7 + src/@ycore/libs/ycore_sync/pre.js | 46 +++- src/@ycore/libs/yulio_id/token_data.js | 4 +- src/@ycore/ycore_worker.js | 4 - src/components/Layout/Secondary/index.js | 24 +- src/components/Layout/Secondary/index.less | 36 ++- src/components/Layout/Secondary/renders.js | 16 +- .../Layout/{Sider.js => Sider/default.js} | 87 +----- .../Layout/{Sider.less => Sider/default.less} | 0 src/components/Layout/Sider/index.js | 50 ++++ src/components/Layout/Sider/mobile.js | 61 +++++ src/components/Layout/Sider/mobile.less | 49 ++++ src/components/Layout/index.js | 2 +- src/components/Loader/Loader.less | 2 + src/components/MainFeed/components/index.js | 5 + .../MainFeed/components/invalid/index.js | 24 ++ .../MainFeed/components/invalid/invalid.less | 0 .../MainFeed/components/newav/index.js | 11 + .../MainFeed/components/newav/newav.less | 3 + .../components/renderFeedPosts/index.js | 43 +++ src/components/MainFeed/index.js | 250 ++++++++---------- src/components/MainFeed/index.less | 2 +- src/components/MediaPlayer/index.js | 56 ++-- src/components/MediaPlayer/index.less | 91 +++++-- src/components/PostCard/index.less | 16 -- src/components/PostCreator/index.js | 5 +- src/layouts/PrimaryLayout.js | 17 +- src/layouts/PrimaryLayout.less | 10 + src/models/app.js | 1 + src/themes/base/index.less | 105 +++++--- src/themes/base/resolutions.less | 20 ++ src/themes/fonts-imports.css | 1 - 40 files changed, 712 insertions(+), 476 deletions(-) delete mode 100644 app/main.js delete mode 100644 app/preload.js delete mode 100644 app/renderer.js create mode 100644 capacitor.config.json rename src/components/Layout/{Sider.js => Sider/default.js} (54%) mode change 100755 => 100644 rename src/components/Layout/{Sider.less => Sider/default.less} (100%) mode change 100755 => 100644 create mode 100644 src/components/Layout/Sider/index.js create mode 100644 src/components/Layout/Sider/mobile.js create mode 100644 src/components/Layout/Sider/mobile.less create mode 100644 src/components/MainFeed/components/index.js create mode 100644 src/components/MainFeed/components/invalid/index.js create mode 100644 src/components/MainFeed/components/invalid/invalid.less create mode 100644 src/components/MainFeed/components/newav/index.js create mode 100644 src/components/MainFeed/components/newav/newav.less create mode 100644 src/components/MainFeed/components/renderFeedPosts/index.js create mode 100644 src/themes/base/resolutions.less diff --git a/.gitignore b/.gitignore index d82d7140..500b786a 100755 --- a/.gitignore +++ b/.gitignore @@ -21,4 +21,4 @@ package-lock.json # jslingui src/locales/_build src/locales/**/*.js -recover/ +android/ diff --git a/app/main.js b/app/main.js deleted file mode 100644 index ab74862d..00000000 --- a/app/main.js +++ /dev/null @@ -1,112 +0,0 @@ -// Modules to control application life and create native browser window - -const path = require('path'); -const exec = require('child_process').exec; -const { app, BrowserWindow, ipcMain } = require('electron'); - -const isDev = process.env.NODE_ENV === 'development'; - -ipcMain.on('print', async (event, arg) => { - // todo:下载网络文件到本地打印 - arg.pdf = `${__dirname}/ReferenceCard.pdf`; - const fileUrl = arg.pdf; - switch (process.platform) { - case 'darwin': - case 'linux': - await exec('lp ' + fileUrl, (e) => { - if (e) throw e; - }); - event.reply('asynchronous-reply', 'print done!'); - break; - case 'win32': - await exec('print ' + fileUrl, { - windowsHide: true, - }, (e) => { - if (e) throw e; - }); - event.reply('asynchronous-reply', 'print done!'); - break; - default: - event.reply('asynchronous-reply', 'print failed!'); - throw new Error( - 'Platform not supported.', - ); - } -}); -// Keep a global reference of the window object, if you don't, the window will -// be closed automatically when the JavaScript object is garbage collected. -let mainWindow; - -const installExtensions = async () => { - const installer = require('electron-devtools-installer'); - const extensions = ['REACT_DEVELOPER_TOOLS', 'REDUX_DEVTOOLS']; - const forceDownload = !!process.env.UPGRADE_EXTENSIONS; - for (const name of extensions) { - try { - await installer.default(installer[name], forceDownload); - } catch (e) { - console.log(`Error installing ${name} extension: ${e.message}`); - } - } -}; - -async function createWindow() { - isDev && await installExtensions(); - - // Create the browser window. - mainWindow = new BrowserWindow({ - width: 1000, - height: 600, - webPreferences: { - nodeIntegration: true, - preload: path.join(__dirname, 'preload.js'), - }, - }); - - // and load the index.html of the app. - if (isDev) { - mainWindow.loadURL('http://localhost:8000/'); - // Open the DevTools only if in development mode. - mainWindow.webContents.openDevTools(); - } else { - const rdurl = path.join(__dirname, '../dist/index.html') // path.join(__dirname, '../dist/index.html') - console.log(rdurl) - mainWindow.loadFile(rdurl) - - } - - // Emitted when the window is closed. - mainWindow.on('closed', function() { - // Dereference the window object, usually you would store windows - // in an array if your app supports multi windows, this is the time - // when you should delete the corresponding element. - mainWindow = null; - }); -} - -// hot reload -isDev && require('electron-reload')(__dirname, { - electron: require(`${__dirname}/../node_modules/electron`), - ignored: /node_modules|[\/\\]\./, -}); - -// This method will be called when Electron has finished -// initialization and is ready to create browser windows. -// Some APIs can only be used after this event occurs. -app.on('ready', createWindow); - -// Quit when all windows are closed. -app.on('window-all-closed', function() { - // On macOS it is common for applications and their menu bar - // to stay active until the user quits explicitly with Cmd + Q - if (process.platform !== 'darwin') app.quit(); -}); - -app.on('activate', function() { - // On macOS it's common to re-create a window in the app when the - // dock icon is clicked and there are no other windows open. - if (mainWindow === null) createWindow(); -}); - -// In this file you can include the rest of your app's specific main process -// code. You can also put them in separate files and require them here. \ No newline at end of file diff --git a/app/preload.js b/app/preload.js deleted file mode 100644 index 6d28f055..00000000 --- a/app/preload.js +++ /dev/null @@ -1,8 +0,0 @@ -// All of the Node.js APIs are available in the preload process. -// It has the same sandbox as a Chrome extension. -window.addEventListener('DOMContentLoaded', () => { - for (const versionType of ['chrome', 'electron', 'node']) { - console.log(`${versionType}-version`, process.versions[versionType]); - } - }); - \ No newline at end of file diff --git a/app/renderer.js b/app/renderer.js deleted file mode 100644 index 901d75ec..00000000 --- a/app/renderer.js +++ /dev/null @@ -1,3 +0,0 @@ -// This file is required by the index.html file and will -// be executed in the renderer process for that window. -// All of the Node.js APIs are available in this process. diff --git a/capacitor.config.json b/capacitor.config.json new file mode 100644 index 00000000..542d7ae1 --- /dev/null +++ b/capacitor.config.json @@ -0,0 +1,8 @@ +{ + "appId": "com.ragestudio.comty", + "appName": "comty-development", + "bundledWebRuntime": false, + "npmClient": "npm", + "webDir": "dist", + "cordova": {} +} diff --git a/config/keys.js b/config/keys.js index cc4a382a..5b5f8792 100755 --- a/config/keys.js +++ b/config/keys.js @@ -3,5 +3,4 @@ module.exports = { server_key: 'f706b0a535b6c2d36545c4137a0a3a26853ea8b5-1223c9ba7923152cae28e5a2e7501b2b-50600768', - secretOrKey: 'secret', } diff --git a/config/ycore.config.js b/config/ycore.config.js index 3948cfc7..cad5d30a 100755 --- a/config/ycore.config.js +++ b/config/ycore.config.js @@ -9,6 +9,7 @@ module.exports = { DarkLogoPath: '/dark_logo.svg', resource_bundle: 'light_ng', + sync_server: 'http://eu653-node.ragestudio.net:5500', /* Layout configuration, specify which layout to use for route. */ layouts: [ diff --git a/package.json b/package.json index aa525168..ef11d7ac 100755 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "UUID": "C8mVSr-4nmPp2-pr5Vrz-CU4kg4", "title": "Comty™", "DevBuild": true, - "version": "0.2.30", + "version": "0.2.32", "stage": "A1", "description": "", "main": "app/main.js", @@ -18,6 +18,9 @@ "dependencies": { "@ant-design/compatible": "^1.0.1", "@ant-design/pro-layout": "^5.0.6", + "@capacitor/android": "^1.5.2", + "@capacitor/cli": "^1.5.2", + "@capacitor/core": "^1.5.2", "@lingui/react": "^2.9.1", "@material-ui/core": "^4.9.3", "@material-ui/icons": "^4.9.1", diff --git a/src/@ycore/libs/app_functions/pre.js b/src/@ycore/libs/app_functions/pre.js index ecacf330..3f3f7adf 100644 --- a/src/@ycore/libs/app_functions/pre.js +++ b/src/@ycore/libs/app_functions/pre.js @@ -16,6 +16,10 @@ export function QueryRuntime() { const validBackup = ycore.validate.backup() if (!validBackup) ycore.make_data.backup() + ycore.sync.listen((data) => { + + }) + } export function SetupApp() { @@ -77,6 +81,9 @@ export const FeedHandler = { goToElement: post_id => { RenderFeed.goToElement(post_id) }, + sync: data => { + RenderFeed.sync(data) + } } export const LoginPage = { diff --git a/src/@ycore/libs/ycore_sync/pre.js b/src/@ycore/libs/ycore_sync/pre.js index 54efb3ab..99b1b55d 100644 --- a/src/@ycore/libs/ycore_sync/pre.js +++ b/src/@ycore/libs/ycore_sync/pre.js @@ -1,10 +1,50 @@ import * as ycore from 'ycore' +import * as antd from 'antd' +import * as Icons from '@ant-design/icons' import io from 'socket.io-client' +import config from 'config' + +var endpoint = config.sync_server; -var socket = io('http://localhost:5500'); export const sync = { - emmitPost: () => { - socket.emit('new'); + listen: (callback) => { + let conn_overrun_tick = 0; + const socket = io(endpoint); + + socket.on('connect_error', (error) => { + conn_overrun_tick ++ + ycore.yconsole.log('Overrun tick => ',conn_overrun_tick) + if (conn_overrun_tick == 1) { + antd.notification.open({ + onClose: () => conn_overrun_tick = 0, + duration: 15, + message: 'Disconected from server!', + description: 'Attempting to reconnect...', + icon: , + }); + } + }); + + socket.on('connect', () => { + conn_overrun_tick = 0 + antd.message.success('Connected to the server') + }); + + socket.on('pull_event', function (data) { + console.log('SOCKET => ',data) + callback(data) + }); + + }, + FeedListen: (callback) => { + const socket = io(endpoint); + socket.on('pull_event', function (data) { + callback(data) + }); + }, + emmitPost: (last_id) => { + const socket = io(endpoint); + socket.emit('push_event', last_id); } } \ No newline at end of file diff --git a/src/@ycore/libs/yulio_id/token_data.js b/src/@ycore/libs/yulio_id/token_data.js index cee1729b..75b8d216 100644 --- a/src/@ycore/libs/yulio_id/token_data.js +++ b/src/@ycore/libs/yulio_id/token_data.js @@ -1,12 +1,12 @@ import * as ycore from 'ycore' import Cookies from 'ts-cookies' -import keys from '../../../../config/keys.js' +import {server_key} from '../../../../config/keys.js' var jwt = require('jsonwebtoken') export const token_data = { set: (value, callback) => { - jwt.sign(value, keys.secretOrKey, (err, token) => { + jwt.sign(value, server_key, (err, token) => { err ? null : Cookies.set('cid', token) return callback(true) }) diff --git a/src/@ycore/ycore_worker.js b/src/@ycore/ycore_worker.js index 1a2741d8..5b8cb159 100755 --- a/src/@ycore/ycore_worker.js +++ b/src/@ycore/ycore_worker.js @@ -42,11 +42,7 @@ localforage.config({ storeName: package_json.name, }) -var socket = io('http://localhost:5500'); -socket.on('post_feed', function (data) { - console.log('SOCKET => ',data) -}); /** * Convert a base64 string in a Blob according to the data and contentType. diff --git a/src/components/Layout/Secondary/index.js b/src/components/Layout/Secondary/index.js index 762cc0f6..c618bd17 100644 --- a/src/components/Layout/Secondary/index.js +++ b/src/components/Layout/Secondary/index.js @@ -144,7 +144,7 @@ export default class Secondary extends React.PureComponent { renderPost = payload => { const post_data = JSON.parse(payload)['post_data'] - return <__priPost payload={post_data} /> + return <__priPost isMobile={this.props.isMobile} payload={post_data} /> } renderComments = payload => { @@ -193,26 +193,29 @@ export default class Secondary extends React.PureComponent { } render() { - const { userData } = this.props + const { userData, isMobile } = this.props if (!this.state.loading) return ( <> -
+ {isMobile? null :
}
+ {isMobile? null :
-
-

{this.state.notification_data.length}

-
- ycore.router.go(`@${userData.username}`)} - src={userData.avatar} - /> +
+

{this.state.notification_data.length}

+ ycore.router.go(`@${userData.username}`)} + src={userData.avatar} + /> +
}
diff --git a/src/components/Layout/Secondary/index.less b/src/components/Layout/Secondary/index.less index 9535ac7e..457b4ed2 100644 --- a/src/components/Layout/Secondary/index.less +++ b/src/components/Layout/Secondary/index.less @@ -20,6 +20,8 @@ display: flex; + + &.active { width: @secondary_wrapper_showFull_width; >.secondary_container_1 { @@ -30,6 +32,25 @@ //} } + &.mobile { + height: 45px; + width: 100%; + bottom: -70px; + top: unset; + overflow-y: hidden; + overflow-x: hidden; + >.secondary_layout_bg{ + border-radius: 27px 27px 0 0; + overflow-y: hidden; + overflow-x: scroll; + } + &.active { + bottom: 0; + height: 100vh; + + } + } + &.half { width: @secondary_wrapper_showHalf_width; } @@ -40,7 +61,7 @@ padding-right: 90px; } } - transition: width @__Global_SwapAnimDuration ease-in-out; + transition: all @__Global_SwapAnimDuration ease-in-out; } @@ -133,7 +154,7 @@ background-color: @secondary_container_2_backgroud; border-radius: 32px 0 0 32px; - + &.active { width: 400px; opacity: 1; @@ -142,6 +163,17 @@ width: 600px } } + + &.mobile{ + overflow-x: hidden; + &.active { + width: 400px; + right: -120px; + opacity: 1; + + + } + } transition: all @__Global_SwapAnimDuration ease-in-out; diff --git a/src/components/Layout/Secondary/renders.js b/src/components/Layout/Secondary/renders.js index e18c74c3..790355b2 100644 --- a/src/components/Layout/Secondary/renders.js +++ b/src/components/Layout/Secondary/renders.js @@ -24,19 +24,23 @@ const VerifiedBadge = () => ( export class __priPost extends React.Component { renderContent(payload) { const { id, postText, postFile_full, post_time, publisher } = payload + const {isMobile}= this.props if (!postFile_full) { return ( -
- -
+
+ {postText ? ( +
+

{' '} +

+ ) : null} +
) } return (
- {postFile_full ? : null} + {postFile_full ? : null} {postText ? (
- {' '}

{' '}

) : null} @@ -45,7 +49,7 @@ export class __priPost extends React.Component { } render() { - const payload = this.props.payload + const {payload} = this.props if (!payload) { return

This post not exists!!!

} diff --git a/src/components/Layout/Sider.js b/src/components/Layout/Sider/default.js old mode 100755 new mode 100644 similarity index 54% rename from src/components/Layout/Sider.js rename to src/components/Layout/Sider/default.js index 4c51d83e..e3f6de52 --- a/src/components/Layout/Sider.js +++ b/src/components/Layout/Sider/default.js @@ -1,77 +1,29 @@ -import React, { PureComponent } from 'react' -import PropTypes from 'prop-types' -import classnames from 'classnames' +import React from 'react' import * as antd from 'antd' import * as Icons from '@ant-design/icons' import Icon from '@ant-design/icons' import { withI18n, Trans } from '@lingui/react' -import { config } from 'utils' -import styles from './Sider.less' +import styles from './default.less' import * as ycore from 'ycore' -import router from 'umi/router' -import CustomIcons from '../CustomIcons' +import CustomIcons from '../../CustomIcons' @withI18n() -class Sider extends PureComponent { - constructor(props) { - super(props) - this.state = { - selectedKey: '', - isHover: false, - collapsedWidth: '70', - } - } - - isSelected(key){ - if (this.state.selectedKey == (key)) { - return true - } - return false - } - - onClickFunctions = { - saves: (e) => { - this.setState({selectedKey: e}) - ycore.router.go('saves') - }, - events: (e) => { - this.setState({selectedKey: e}) - ycore.router.go('events') - }, - marketplace: (e) => { - this.setState({selectedKey: e}) - ycore.router.go('marketplace') - }, - explore: (e) => { - this.setState({selectedKey: e}) - ycore.router.go('main') - }, - } - - handleClickMenu = e => { - e.key === 'SignOut' && ycore.app_session.logout() - e.key === 'general_settings' && ycore.router.go('settings') - e.key === 'saves' && this.onClickFunctions.saves(e.key) - e.key === 'events' && this.onClickFunctions.events(e.key) - e.key === 'marketplace' && this.onClickFunctions.marketplace(e.key) - e.key === 'explore' && this.onClickFunctions.explore(e.key) - e.key === 'debug_area' && ycore.router.go('__m') - } - +export default class Sider_Default extends React.PureComponent { render() { + const { handleClickMenu, logo } = this.props return (
ycore.router.go('main')} - src={config.LogoPath} + src={logo} />
@@ -81,17 +33,17 @@ class Sider extends PureComponent { selectable={false} className={styles.left_sider_menuItems} mode="vertical" - onClick={this.handleClickMenu} + onClick={handleClickMenu} > - + Explore - + Saves @@ -99,7 +51,7 @@ class Sider extends PureComponent { - + Marketplace @@ -107,7 +59,7 @@ class Sider extends PureComponent { - + Events @@ -119,8 +71,8 @@ class Sider extends PureComponent { @@ -153,14 +105,3 @@ class Sider extends PureComponent { ) } } - -Sider.propTypes = { - menus: PropTypes.array, - theme: PropTypes.string, - isMobile: PropTypes.bool, - collapsed: PropTypes.bool, - onThemeChange: PropTypes.func, - onCollapseChange: PropTypes.func, -} - -export default Sider diff --git a/src/components/Layout/Sider.less b/src/components/Layout/Sider/default.less old mode 100755 new mode 100644 similarity index 100% rename from src/components/Layout/Sider.less rename to src/components/Layout/Sider/default.less diff --git a/src/components/Layout/Sider/index.js b/src/components/Layout/Sider/index.js new file mode 100644 index 00000000..6eaab762 --- /dev/null +++ b/src/components/Layout/Sider/index.js @@ -0,0 +1,50 @@ +import React from 'react' +import { config } from 'utils' +import * as ycore from 'ycore' + +import Sider_Mobile from './mobile.js' +import Sider_Default from './default.js' + +class Sider extends React.PureComponent { + + onClickFunctions = { + saves: (e) => { + this.setState({selectedKey: e}) + ycore.router.go('saves') + }, + events: (e) => { + this.setState({selectedKey: e}) + ycore.router.go('events') + }, + marketplace: (e) => { + this.setState({selectedKey: e}) + ycore.router.go('marketplace') + }, + explore: (e) => { + this.setState({selectedKey: e}) + ycore.router.go('main') + }, + } + + handleClickMenu = e => { + e.key === 'SignOut' && ycore.app_session.logout() + e.key === 'general_settings' && ycore.router.go('settings') + e.key === 'saves' && this.onClickFunctions.saves(e.key) + e.key === 'events' && this.onClickFunctions.events(e.key) + e.key === 'marketplace' && this.onClickFunctions.marketplace(e.key) + e.key === 'explore' && this.onClickFunctions.explore(e.key) + e.key === 'debug_area' && ycore.router.go('__m') + } + + render() { + const { isMobile } = this.props + const sider_props = {handleClickMenu: this.handleClickMenu ,logo: config.LogoPath, menulist: null} + + if (isMobile) { + return + } + return + } +} + +export default Sider diff --git a/src/components/Layout/Sider/mobile.js b/src/components/Layout/Sider/mobile.js new file mode 100644 index 00000000..5a3de0ba --- /dev/null +++ b/src/components/Layout/Sider/mobile.js @@ -0,0 +1,61 @@ +import React from 'react' +import * as antd from 'antd' +import * as Icons from '@ant-design/icons' +import Icon from '@ant-design/icons' + +import { withI18n, Trans } from '@lingui/react' +import styles from './mobile.less' +import * as ycore from 'ycore' +import CustomIcons from '../../CustomIcons' + +@withI18n() +export default class Sider_Mobile extends React.PureComponent { + render() { + const { handleClickMenu, logo } = this.props + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ) + } +} diff --git a/src/components/Layout/Sider/mobile.less b/src/components/Layout/Sider/mobile.less new file mode 100644 index 00000000..c5085229 --- /dev/null +++ b/src/components/Layout/Sider/mobile.less @@ -0,0 +1,49 @@ +@import '~themes/index.less'; + + +.left_sider_wrapper { + position: fixed; + z-index: 500; + bottom: 0; + right: 0; + left: 0; + + height: 50px; + width: 100%; + + border-color: transparent; + font-size: 13px; + font-family: @__Global_general_font_family; + padding: 0 27px; + + :global { + .ant-layout-sider { + background-color: transparent; + height: 100%; + + .ant-menu-item {color: @left_sider_color;} + .anticon {font-size: @left_sider_sizeIcons;} + .ant-menu-item{margin: auto; padding: 0;} + + .ant-menu { + background-color: #2d2d2d; + height: 100%; + border-radius: 27px 27px 0 0; + padding: 0 27px; + display: flex; + } + + .ant-menu-horizontal { + line-height: 46px; + white-space: nowrap; + border: 0; + border-bottom: 0; + box-shadow: none; + } + } + } + + + +} + diff --git a/src/components/Layout/index.js b/src/components/Layout/index.js index bfb103b5..7ad2e67a 100755 --- a/src/components/Layout/index.js +++ b/src/components/Layout/index.js @@ -1,4 +1,4 @@ -import Sider from './Sider' +import Sider from './Sider/index.js' import Control from './Control' import Secondary from './Secondary/index.js' diff --git a/src/components/Loader/Loader.less b/src/components/Loader/Loader.less index 20b827da..87342ddf 100755 --- a/src/components/Loader/Loader.less +++ b/src/components/Loader/Loader.less @@ -28,6 +28,7 @@ animation: loader 0.8s linear; } opacity: 0; + display: none; } .newloader { @@ -107,6 +108,7 @@ @keyframes unshow { 0% { opacity: 1; + display: block; } 100% { diff --git a/src/components/MainFeed/components/index.js b/src/components/MainFeed/components/index.js new file mode 100644 index 00000000..2042fda5 --- /dev/null +++ b/src/components/MainFeed/components/index.js @@ -0,0 +1,5 @@ +import ComponentNewAV from './newav' +import ComponentInvalid from './invalid' +import renderFeedPosts from './renderFeedPosts' + +export { ComponentNewAV, ComponentInvalid, renderFeedPosts } \ No newline at end of file diff --git a/src/components/MainFeed/components/invalid/index.js b/src/components/MainFeed/components/invalid/index.js new file mode 100644 index 00000000..80f65615 --- /dev/null +++ b/src/components/MainFeed/components/invalid/index.js @@ -0,0 +1,24 @@ +import { Card } from 'antd' +import { ExclamationCircleOutlined } from '@ant-design/icons' + +const ComponentInvalid = fn => { + return ( + +

+ Invalid Data +

+ + If this error has occurred several times, try restarting the app + + + ) +} + +export default ComponentInvalid diff --git a/src/components/MainFeed/components/invalid/invalid.less b/src/components/MainFeed/components/invalid/invalid.less new file mode 100644 index 00000000..e69de29b diff --git a/src/components/MainFeed/components/newav/index.js b/src/components/MainFeed/components/newav/index.js new file mode 100644 index 00000000..214c327c --- /dev/null +++ b/src/components/MainFeed/components/newav/index.js @@ -0,0 +1,11 @@ +import { Button } from 'antd' +import styles from './newav.less' +const ComponentNewAV = fn => { + return ( +
+ +
+ ) +} + +export default ComponentNewAV \ No newline at end of file diff --git a/src/components/MainFeed/components/newav/newav.less b/src/components/MainFeed/components/newav/newav.less new file mode 100644 index 00000000..9e5529d8 --- /dev/null +++ b/src/components/MainFeed/components/newav/newav.less @@ -0,0 +1,3 @@ +.main_feed_newav{ + +} \ No newline at end of file diff --git a/src/components/MainFeed/components/renderFeedPosts/index.js b/src/components/MainFeed/components/renderFeedPosts/index.js new file mode 100644 index 00000000..9f24b228 --- /dev/null +++ b/src/components/MainFeed/components/renderFeedPosts/index.js @@ -0,0 +1,43 @@ +import React from 'react' +import { PostCard } from 'components' +import { yconsole } from 'ycore' +import { Button, List } from 'antd' +import { DownSquareOutlined } from '@ant-design/icons' +const renderFeedPosts = payload => { + const { data, loading, isEnd, feedGet } = payload + const loadMore = + !isEnd && !loading ? ( +
+
+ ) : null + try { + yconsole.log(data) + return ( + ( +
+ +
+ )} + /> + ) + } catch (err) { + return false + } +} + +export default renderFeedPosts diff --git a/src/components/MainFeed/index.js b/src/components/MainFeed/index.js index 089ac83b..e48e13e0 100755 --- a/src/components/MainFeed/index.js +++ b/src/components/MainFeed/index.js @@ -1,14 +1,13 @@ import React from 'react' import * as antd from 'antd' import * as ycore from 'ycore' -import * as Icons from '@ant-design/icons' import styles from './index.less' -import { PostCard } from 'components' +import { ComponentNewAV, ComponentInvalid, renderFeedPosts } from './components/index.js' export const RenderFeed = { RefreshFeed: () => { - window.MainFeedComponent.FirstGet() + window.MainFeedComponent.feedGet.first() return }, killByID: post_id => { @@ -27,12 +26,17 @@ export const RenderFeed = { disableMenu: true, }) }, + sync: (c) => { + window.MainFeedComponent.syncService(c) + return + } } -class MainFeed extends React.Component { +class MainFeed extends React.PureComponent { constructor(props) { super(props) window.MainFeedComponent = this this.state = { + NewAV: false, invalid: false, loading: false, disableMenu: false, @@ -42,12 +46,28 @@ class MainFeed extends React.Component { } componentDidMount() { - this.FirstGet() + this.feedGet.first() + ycore.sync.FeedListen((data) => { + this.syncService(data) + }) } toogleLoader() { this.setState({ loading: !this.state.loading }) } + + syncService(data){ + if (!data) return false + const { last_post_id, now } = data + const first = this.state.data[0] + if (first){ + const a = first.id + console.log(` SYNC => ${last_post_id} | LAST => ${a}`) + if(last_post_id>a){ + this.setState({ NewAV: true }) + } + } + } killByID(post_id) { const a = this.state.data @@ -61,148 +81,106 @@ class MainFeed extends React.Component { this.setState({ data: a }) } - FirstGet() { - try { - const { get, uid, filters } = this.props - if (this.props.custompayload) { - this.setState({ - isEnd: true, - data: this.props.custompayload, - loading: false, - }) - return - } - if (!get) { - ycore.yconsole.error('Please, fill params with an catch type...') - return - } - this.toogleLoader() - const payload = { fkey: 0, type: get, id: uid } - ycore.comty_post.getFeed((err, res) => { - if (err) { - ycore.notify.error('Error when get data from this input') + feedGet = { + first: ()=>{ + try { + const { get, uid, filters } = this.props + if (this.props.custompayload) { + this.setState({ + isEnd: true, + NewAV: false, + data: this.props.custompayload, + loading: false, + }) return } - if (JSON.parse(res).api_status == '400') { - this.setState({ invalid: true }) + if (!get) { + ycore.yconsole.error('Please, fill params with an catch type...') return } - try { + this.toogleLoader() + const payload = { fkey: 0, type: get, id: uid } + ycore.comty_post.getFeed((err, res) => { + if (err) { + ycore.notify.error('Error when get data from this input') + return + } + if (JSON.parse(res).api_status == '400') { + this.setState({ invalid: true }) + return + } + try { + const parsed = JSON.parse(res)['data'] + const isEnd =parsed.length < ycore.AppSettings.limit_post_catch ? true : false + this.setState({ NewAV: false, isEnd: isEnd, data: parsed, loading: false }) + } catch (error) { + ycore.yconsole.log(error) + } + }, payload) + } catch (err) { + ycore.notify.error('err') + } + }, + more(fkey){ + try { + const { get, uid, filters } = this.props + if (!get) { + ycore.yconsole.error('Please, fill params with an catch type...') + return + } + if (!fkey) { + ycore.yconsole.warn( + 'Please, provide a fkey for offset the feed, default using => 0' + ) + } + this.toogleLoader() + const getLastPost = ycore.objectLast(this.state.data) + ycore.yconsole.log('LAST POST ID =>', getLastPost.id) + + const payload = { fkey: getLastPost.id, type: get, id: uid } + ycore.comty_post.getFeed((err, res) => { + if (err) { + return false + } + const oldData = this.state.data const parsed = JSON.parse(res)['data'] - const isEnd =parsed.length < ycore.AppSettings.limit_post_catch ? true : false - this.setState({ isEnd: isEnd, data: parsed, loading: false }) - } catch (error) { - ycore.yconsole.log(error) - } - }, payload) - } catch (err) { - ycore.notify.error('err') - } - } - - GetMore(fkey) { - try { - const { get, uid, filters } = this.props - if (!get) { - ycore.yconsole.error('Please, fill params with an catch type...') - return + const mix = oldData.concat(parsed) + const isEnd = + parsed.length < ycore.AppSettings.limit_post_catch ? true : false + this.setState({ isEnd: isEnd, data: mix, loading: false }, () => + ycore.goTo.element(getLastPost.id) + ) + return true + }, payload) + } catch (err) { + ycore.notify.error(err) } - if (!fkey) { - ycore.yconsole.warn( - 'Please, provide a fkey for offset the feed, default using => 0' - ) - } - this.toogleLoader() - const getLastPost = ycore.objectLast(this.state.data) - ycore.yconsole.log('LAST POST ID =>', getLastPost.id) - - const payload = { fkey: getLastPost.id, type: get, id: uid } - ycore.comty_post.getFeed((err, res) => { - if (err) { - return false - } - const oldData = this.state.data - const parsed = JSON.parse(res)['data'] - const mix = oldData.concat(parsed) - const isEnd = - parsed.length < ycore.AppSettings.limit_post_catch ? true : false - this.setState({ isEnd: isEnd, data: mix, loading: false }, () => - ycore.goTo.element(getLastPost.id) - ) - return true - }, payload) - } catch (err) { - ycore.notify.error(err) - } - } - - renderFeedPosts = () => { - const { data, loading, isEnd } = this.state - - const loadMore = - !isEnd && !loading ? ( -
- } - onClick={() => this.GetMore()} - /> -
- ) : null - try { - ycore.yconsole.log(data) - return ( - ( -
- -
- )} - /> - ) - } catch (err) { - return false } } + render() { - const { loading, invalid } = this.state - return ( -
- {invalid ? ( - -

- Invalid Data{' '} -

- - If this error has occurred several times, try restarting the app - - - ) : loading ? ( - + const { data, loading, isEnd, invalid, NewAV } = this.state + const renderFeedPosts_payload = {data: data, loading: loading, isEnd: isEnd, feedGet: this.feedGet} + + if (invalid){ + return ComponentInvalid() + } + if (loading) { + return ( + - - ) : ( - this.renderFeedPosts() - )} -
- ) + + ) + } + if (!loading) { + return ( +
+ {NewAV? ComponentNewAV(() => this.feedGet.first()) : null} + {renderFeedPosts(renderFeedPosts_payload)} +
+ ) + } } } export default MainFeed diff --git a/src/components/MainFeed/index.less b/src/components/MainFeed/index.less index 29b1634c..599b9120 100644 --- a/src/components/MainFeed/index.less +++ b/src/components/MainFeed/index.less @@ -1,4 +1,4 @@ .main_feed_wrapper{ scroll-behavior: smooth; -} \ No newline at end of file +} diff --git a/src/components/MediaPlayer/index.js b/src/components/MediaPlayer/index.js index 8ac2797b..3854396b 100644 --- a/src/components/MediaPlayer/index.js +++ b/src/components/MediaPlayer/index.js @@ -1,28 +1,32 @@ import React from 'react' -import * as Icons from '@ant-design/icons' +import classnames from 'classnames' +import styles from './index.less' export default class MediaPlayer extends React.PureComponent { - render() { + player() { const { file } = this.props - let type; - + let type + const ImageExtensions = ['.png', '.jpg', '.jpeg', '.gif'] const VideoExtensions = ['.mp4', '.mov', '.avi'] const AudioExtensions = ['.mp3', '.ogg', '.wav'] - const FilesAllowed = ImageExtensions.concat(VideoExtensions, AudioExtensions) - + const FilesAllowed = ImageExtensions.concat( + VideoExtensions, + AudioExtensions + ) + for (const prop in FilesAllowed) { - if(file.includes(`${ImageExtensions[prop]}`)){ - type = 'image' - } - if(file.includes(`${VideoExtensions[prop]}`)){ - type = 'video' - } - if(file.includes(`${AudioExtensions[prop]}`)){ - type = 'audio' - } - } + if (file.includes(`${ImageExtensions[prop]}`)) { + type = 'image' + } + if (file.includes(`${VideoExtensions[prop]}`)) { + type = 'video' + } + if (file.includes(`${AudioExtensions[prop]}`)) { + type = 'audio' + } + } if (type == 'video') { // const payload = {type: 'video', sources: [{src: file,}]} @@ -43,11 +47,19 @@ export default class MediaPlayer extends React.PureComponent { ) } if (type == 'image') { - if (file.includes('gif')) { - return
- } - return - } - return null + return + } + } + render() { + return ( +
+ {this.player()} +
+ ) } } diff --git a/src/components/MediaPlayer/index.less b/src/components/MediaPlayer/index.less index c7f53f82..6478f35f 100644 --- a/src/components/MediaPlayer/index.less +++ b/src/components/MediaPlayer/index.less @@ -1,29 +1,80 @@ .PlayerContainer { - max-width: 100vw; - max-height: 75vh; + width: 100%; img { - object-fit: contain; - position: absolute; - top: 50%; - left: 47%; - width: 500px; - height: 500px; - margin-top: -250px; - margin-left: -350px; + width: 100%; + overflow: hidden; + margin: auto; } - audio{ + + video { + max-height: 600px; + width: 100%; + overflow: hidden; + } + + audio { width: 100%; } - video { - object-fit: contain; - position: absolute; + + + &.entire { + max-width: 52vw; + max-height: 80vh; + position: fixed; top: 50%; - left: 47%; - width: 500px; - height: 500px; - margin-top: -250px; - margin-left: -350px; + left: 50%; + transform: translate(-70%, -50%); + + img { + object-fit: contain; + height: 100%; + width: 100%; + max-width: 52vw; + max-height: 80vh; + } + + audio { + height: 100%; + width: 100%; + } + + video { + object-fit: contain; + height: 100%; + width: 100%; + max-width: 52vw; + max-height: 80vh; + } + } + + &.mobile { + max-width: 52vw; + max-height: 80vh; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + img { + object-fit: contain; + height: 100%; + width: 100%; + max-width: 52vw; + max-height: 80vh; + } + + audio { + height: 100%; + width: 100%; + } + + video { + object-fit: contain; + height: 100%; + width: 100%; + max-width: 52vw; + max-height: 80vh; + } } - } diff --git a/src/components/PostCard/index.less b/src/components/PostCard/index.less index 38189c85..11ae7bb5 100755 --- a/src/components/PostCard/index.less +++ b/src/components/PostCard/index.less @@ -195,22 +195,6 @@ max-height: 600px; overflow: hidden; - img { - width: calc(100% + 30px); - overflow: hidden; - margin: auto; - } - - video { - max-height: 600px; - width: calc(100% + 30px); - overflow: hidden; - } - - audio { - width: 100%; - } - h3 { color: rgb(85, 85, 85); font-weight: 470; diff --git a/src/components/PostCreator/index.js b/src/components/PostCreator/index.js index eda4ac97..adbbc68f 100755 --- a/src/components/PostCreator/index.js +++ b/src/components/PostCreator/index.js @@ -9,8 +9,6 @@ import * as MICONS from '@material-ui/icons' import Post_options from './local_components/post_options' import { optionBox } from './local_components/post_options' -import io from 'socket.io-client' -var socket = io('http://localhost:5500'); function getBase64(img, callback) { const reader = new FileReader() @@ -188,7 +186,8 @@ class PostCreator extends React.PureComponent { const pro_boost_val = ycore.ReturnValueFromMap({ data: post_options, key: 'pro_boost' }) const allow_comments_val = ycore.ReturnValueFromMap({ data: post_options, key: 'allow_comments' }) - socket.emit('push_post'); + console.log(id_temp_parse) + ycore.sync.emmitPost(id_temp_parse) ycore.yconsole.log(`pro_boost => ${pro_boost_val} | allow_comments => ${allow_comments_val}`) if (pro_boost_val) { diff --git a/src/layouts/PrimaryLayout.js b/src/layouts/PrimaryLayout.js index dd31901e..2861d236 100755 --- a/src/layouts/PrimaryLayout.js +++ b/src/layouts/PrimaryLayout.js @@ -40,7 +40,6 @@ class PrimaryLayout extends React.Component { componentDidMount() { this.setState({ userData: ycore.userData(), - desktop_mode: ycore.CheckThisApp.desktop_mode(), }) this.enquireHandler = enquireScreen(mobile => { @@ -63,23 +62,13 @@ class PrimaryLayout extends React.Component { store.set('collapsed', !fromStore) } - isDarkMode = () => { - const { app } = this.props - const { theme } = app - if (theme == 'light') { - return false - } - return true - } - render() { const { app, location, dispatch, children } = this.props - const { userData, collapsed, isMobile, desktop_mode } = this.state + const { userData, collapsed, isMobile } = this.state const { onCollapseChange } = this const { theme } = app const SiderProps = { - desktop_mode: desktop_mode, theme, userData, isMobile, @@ -100,11 +89,11 @@ class PrimaryLayout extends React.Component { return ( - {isMobile ? : null} + {/* {isMobile ? : null} */}
- +
diff --git a/src/layouts/PrimaryLayout.less b/src/layouts/PrimaryLayout.less index 5c8e75e3..703da8cd 100755 --- a/src/layouts/PrimaryLayout.less +++ b/src/layouts/PrimaryLayout.less @@ -12,6 +12,16 @@ overflow-y: hidden!important; background-color: @primary_layout_backgroud; margin: auto; + &.mobile{ + >.primary_layout_container { + border-radius: 0; + margin: 0; + padding: 0; + } + >.primary_layout_content{ + padding: 0; + } + } } // PRIMARY LAYOUT diff --git a/src/models/app.js b/src/models/app.js index 78b19172..67911895 100755 --- a/src/models/app.js +++ b/src/models/app.js @@ -48,6 +48,7 @@ export default { router.push({ pathname: '/main' }) } ycore.QueryRuntime() + return true } else if (!pathMatchRegexp(['', '/login'], window.location.pathname)) { if (validBackup == true) { diff --git a/src/themes/base/index.less b/src/themes/base/index.less index 4df1ea4e..2cca77ac 100644 --- a/src/themes/base/index.less +++ b/src/themes/base/index.less @@ -1,3 +1,4 @@ +@import './resolutions.less'; // FOR LAYOUTS @__Global_general_font_family: "Poppins", sans-serif; @@ -42,47 +43,79 @@ body { scroll-behavior: smooth; height: 100%; overflow-y: hidden; - background-color: transparent; // rgb(249, 249, 249); + min-width: 430px; + background-color: transparent; + + font-size: @base-font-size; + line-height: @base-line-height; + + } -@media (min-width: 1600px) { - :global { - .ant-col-xl-48 { - width: 20%; - } - - .ant-col-xl-96 { - width: 40%; - } - } -} - -@media (max-width: 767px) { - :global { - .ant-card { - .ant-card-head { - padding: 0 12px; - } - - .ant-card-body { - padding: 12px; - } - } - } -} - -// PrimaryLayout -@media (max-width: 767px) { - .primary_layout_content { - padding: 12px; - } +@media (min-width: @bp-medium) { - .primary_layout { - height: 100vh; - flex: 1; - } } +@media (min-width: @bp-large) { + +} + +@media (min-width: @bp-xlarge) { + body{ + zoom: 1.4; + } +} + +@media (min-width: @bp-xxlarge) { + body{ + zoom: 1.6; + } +} + + +// @media (min-width: 770px){ +// >#secondary_layout{ +// width: 0px!important; +// } +// } +// @media (min-width: 1600px) { +// :global { +// .ant-col-xl-48 { +// width: 20%; +// } + +// .ant-col-xl-96 { +// width: 40%; +// } +// } +// } + +// @media (max-width: 767px) { +// :global { +// .ant-card { +// .ant-card-head { +// padding: 0 12px; +// } + +// .ant-card-body { +// padding: 12px; +// } +// } +// } +// } + +// // PrimaryLayout +// @media (max-width: 767px) { +// .primary_layout_content { +// padding: 12px; +// } + +// .primary_layout { +// height: 100vh; +// flex: 1; +// } +// } + // .primary_layout_* @primary_layout_backgroud: #2d2d2d; diff --git a/src/themes/base/resolutions.less b/src/themes/base/resolutions.less new file mode 100644 index 00000000..4cfa2036 --- /dev/null +++ b/src/themes/base/resolutions.less @@ -0,0 +1,20 @@ +@bp-small: 48em; // 768px +@bp-medium: 64em; // 1024px +@bp-large: 85.375em; // 1366px +@bp-xlarge: 120em; // 1920px +@bp-xxlarge: 160em; // 2560px + +// Media Queries +@mq-small: "min-width: @bp-small"; +@mq-medium: "(min-width: @bp-medium)"; +@mq-large: "(min-width: @bp-large)"; +@mq-xlarge: "(min-width: @bp-xlarge)"; +@mq-xxlarge: "(min-width: @bp-xxlarge)"; +@mq-retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; + +// Font-Size +@base-font-size: 1em; + +// Line-Height +@base-line-height: 1.5; +@header-line-height: 1.25; \ No newline at end of file diff --git a/src/themes/fonts-imports.css b/src/themes/fonts-imports.css index 933cabaa..e41bc2c2 100644 --- a/src/themes/fonts-imports.css +++ b/src/themes/fonts-imports.css @@ -3,4 +3,3 @@ @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap'); @import url('https://fonts.googleapis.com/css?family=Kulim+Park&display=swap'); @import url('https://fonts.googleapis.com/css?family=Nunito&display=swap'); -@import url('https://api.ragestudio.net/fonts/trueno/font.css');