diff --git a/.vscode/settings.json b/.vscode/settings.json index afb940f2..54f6c0db 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,3 @@ { - "discord.enabled": true + "discord.enabled": false } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 00c9ea99..4e44bec3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "comty", - "version": "0.11.15", + "version": "0.11.22", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "comty", - "version": "0.11.15", + "version": "0.11.22", "hasInstallScript": true, "license": "LGPL-2.1", "dependencies": { @@ -19,6 +19,7 @@ "antd": "^4.8.2", "axios": "^0.21.0", "babel-core": "^6.26.3", + "chart.js": "^2.9.4", "classnames": "^2.2.6", "colors": "^1.4.0", "concat-stream": "^2.0.0", @@ -16357,6 +16358,45 @@ "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==", "license": "MIT" }, + "node_modules/chart.js": { + "version": "2.9.4", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz", + "integrity": "sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==", + "dependencies": { + "chartjs-color": "^2.1.0", + "moment": "^2.10.2" + } + }, + "node_modules/chartjs-color": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz", + "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==", + "dependencies": { + "chartjs-color-string": "^0.6.0", + "color-convert": "^1.9.3" + } + }, + "node_modules/chartjs-color-string": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz", + "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==", + "dependencies": { + "color-name": "^1.0.0" + } + }, + "node_modules/chartjs-color/node_modules/color-convert": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "dependencies": { + "color-name": "1.1.3" + } + }, + "node_modules/chartjs-color/node_modules/color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" + }, "node_modules/check-types": { "version": "8.0.3", "resolved": "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz", @@ -59427,6 +59467,47 @@ "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz", "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==" }, + "chart.js": { + "version": "2.9.4", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz", + "integrity": "sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==", + "requires": { + "chartjs-color": "^2.1.0", + "moment": "^2.10.2" + } + }, + "chartjs-color": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz", + "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==", + "requires": { + "chartjs-color-string": "^0.6.0", + "color-convert": "^1.9.3" + }, + "dependencies": { + "color-convert": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "requires": { + "color-name": "1.1.3" + } + }, + "color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" + } + } + }, + "chartjs-color-string": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz", + "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==", + "requires": { + "color-name": "^1.0.0" + } + }, "check-types": { "version": "8.0.3", "resolved": "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz", diff --git a/package.json b/package.json index 6c09eda2..27c9a298 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "comty", "UUID": "C8mVSr-4nmPp2-pr5Vrz-CU4kg4", - "version": "0.11.15", + "version": "0.11.22", "stage": "alpha", "description": "An prototype of a social network", "author": "RageStudio", @@ -44,6 +44,7 @@ "antd": "^4.8.2", "axios": "^0.21.0", "babel-core": "^6.26.3", + "chart.js": "^2.9.4", "classnames": "^2.2.6", "colors": "^1.4.0", "concat-stream": "^2.0.0", diff --git a/src/components/Layout/Overlay/index.js b/src/components/Layout/Overlay/index.js index 60618bba..2306d9aa 100644 --- a/src/components/Layout/Overlay/index.js +++ b/src/components/Layout/Overlay/index.js @@ -3,9 +3,10 @@ import verbosity from 'core/libs/verbosity' import { connect } from 'umi' import classnames from 'classnames' -import { - Primary -} from './components' +import { Primary } from './components' +import { __legacy__objectToArray } from '@ragestudio/nodecore-utils' + +const includeAllowedProps = [ "size" ] @connect(({ app }) => ({ app })) export default class Overlay extends React.Component { @@ -62,9 +63,9 @@ export default class Overlay extends React.Component { componentDidUpdate() { if (this.props.app.overlayElement) { document.addEventListener('keydown', this.keydownFilter, false) - document.addEventListener('mousedown', this.handleClickOutside); + document.addEventListener('mousedown', this.handleClickOutside) } else { - document.removeEventListener('mousedown', this.handleClickOutside); + document.removeEventListener('mousedown', this.handleClickOutside) } } @@ -73,6 +74,7 @@ export default class Overlay extends React.Component { } render() { + let props = {} const { overlayElement, overlayActive } = this.props.app const isOnMode = (mode) => { @@ -84,15 +86,24 @@ export default class Overlay extends React.Component { const renderElement = () => { if (overlayElement && overlayActive) { - const renderProps = { id: overlayElement.id, mode: overlayElement.mode, fragment: overlayElement.element } - return + return } - return null } + try { + __legacy__objectToArray(overlayElement).forEach((e) => { + if (includeAllowedProps.includes(e.key)) { + props[e.key] = e.value + } + }) + } catch (error) { + // terrible (⓿_⓿) + } + return (
+} + +const statisticsList = [ + { + id: "connection", + title: Network, + help: "Measure your connection with our servers", + default: true + }, + { + id: "audience", + title: Audience, + help: "Blah blah blah", + default: false + } +] + +@connect(({ app, streaming }) => ({ app, streaming })) +export default class StreamingPanel extends React.Component { + + state = { + activeStatistics: [], + hidden: {} + } + + isHidden(key) { + if (typeof (this.state.hidden[key]) == "undefined") { + return true + } + + return this.state.hidden[key] + } + + handleHidden(key) { + let updated = this.state.hidden + + if (typeof (this.state.hidden[key]) == "undefined") { + updated[key] = false + } else { + updated[key] = !this.state.hidden[key] + } + + this.setState({ hidden: updated }) + } + + renderLiveTag() { + return
+ {this.props.streaming?.onStreaming ? "On Live" : "Offline"} +
+ } + + renderOptions() { + return ( +
+
+

Information

+
+
+
+ {this.props.streaming?.isConnected ? "Connected" : "Disconnected"} +
+
+ 0 Viewers +
+ +
+ ) + } + + renderStadistics() { + const { isConnected, spectators } = this.props.streaming + + const onChangeCheckbox = (e) => { + let updated = this.state.activeStatistics + updated[e] = !updated[e] + + this.setState({ updated }) + } + + const getCheckboxes = () => { + return statisticsList.map(e => { + if (!e.id) { + return null + } + return + { onChangeCheckbox(e.id) }} defaultChecked={e.default} checked={this.state.activeStatistics[e.id]} key={e.id} > + {e.title ?? e.id} + + + }) + } + + const renderCharts = () => { + return __legacy__objectToArray(this.state.activeStatistics).map((e) => { + if (e.value) { + return statisticsComponents[e.key] + } + return null + }) + } + + return ( +
+
+ {getCheckboxes()} +
+
+ {renderCharts()} +
+
+ ) + } + + + render() { + console.log(this.props.streaming) + return ( +
+

Your streaming

+
+
+ +

@{this.props.app.session_data.username}

+
+
+ {this.renderLiveTag()} +
+
+
+
+ {this.renderOptions()} + {this.renderStadistics()} +
+
+
+ ) + } +} \ No newline at end of file diff --git a/src/components/StreamingOverlay/statistics/audience/index.js b/src/components/StreamingOverlay/statistics/audience/index.js new file mode 100644 index 00000000..e69de29b diff --git a/src/components/StreamingOverlay/statistics/connection/index.js b/src/components/StreamingOverlay/statistics/connection/index.js new file mode 100644 index 00000000..6dd83085 --- /dev/null +++ b/src/components/StreamingOverlay/statistics/connection/index.js @@ -0,0 +1,58 @@ +import React from 'react' +import Chart from 'chart.js' + +const elementID = "statistic_connection" + +export default class StatisticConnection extends React.Component { + refComponent = null + + createRef (node) { + this.refComponent = node + } + + init() { + new Chart(this.refComponent, { + type: 'bar', + data: { + labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], + datasets: [{ + label: '# of Votes', + data: [12, 19, 3, 5, 2, 3], + backgroundColor: [ + 'rgba(255, 99, 132, 0.2)', + 'rgba(54, 162, 235, 0.2)', + 'rgba(255, 206, 86, 0.2)', + 'rgba(75, 192, 192, 0.2)', + 'rgba(153, 102, 255, 0.2)', + 'rgba(255, 159, 64, 0.2)' + ], + borderColor: [ + 'rgba(255, 99, 132, 1)', + 'rgba(54, 162, 235, 1)', + 'rgba(255, 206, 86, 1)', + 'rgba(75, 192, 192, 1)', + 'rgba(153, 102, 255, 1)', + 'rgba(255, 159, 64, 1)' + ], + borderWidth: 1 + }] + }, + options: { + scales: { + yAxes: [{ + ticks: { + beginAtZero: true + } + }] + } + } + }) + } + + render() { + console.log(this.refComponent) + return this.createRef(e)} width="400" height="400"> + + + } +} \ No newline at end of file diff --git a/src/core/models/helpers/index.js b/src/core/models/helpers/index.js index 791947c6..9b3012f8 100644 --- a/src/core/models/helpers/index.js +++ b/src/core/models/helpers/index.js @@ -1,9 +1,10 @@ +import StreamingOverlay from 'components/StreamingOverlay' + export function goLive(payload) { window.overlaySwap.open({ id: 'search', - mode: 'full', - element:
- SomeSomeSomeSomeSomeSomeSomeSomeSomeSome -
+ mode: 'half', + size: "50%", + element: }) } \ No newline at end of file diff --git a/src/layouts/PrimaryLayout.js b/src/layouts/PrimaryLayout.js index 7d37fd42..dd267bfe 100755 --- a/src/layouts/PrimaryLayout.js +++ b/src/layouts/PrimaryLayout.js @@ -59,8 +59,8 @@ export default class PrimaryLayout extends React.Component { window.toogleSidebarCollapse = () => { this.props.dispatch({ - type: "app/handleCollapseSidebar", - payload: !this.props.app.sidebar_collapsed + type: "app/updateState", + payload: { sidebar_collapsed: !this.props.app.sidebar_collapsed } }) } } diff --git a/src/models/app.js b/src/models/app.js index b32957c2..1d713ef4 100755 --- a/src/models/app.js +++ b/src/models/app.js @@ -261,8 +261,6 @@ export default { } } - - if (!state.session_data) { verbosity(`session_data is not valid but the session is valid, updating from ws`) state.dispatcher({ type: "updateUserData" }) diff --git a/src/models/streaming.js b/src/models/streaming.js new file mode 100644 index 00000000..3fe55d67 --- /dev/null +++ b/src/models/streaming.js @@ -0,0 +1,23 @@ +import verbosity from 'core/libs/verbosity' + +export default { + namespace: 'streaming', + state: { + onStreaming: false, + isConnected: false, + }, + effects: { + *initStreaming({ payload }, { select, put }) { + + }, + + }, + reducers: { + updateState(state, { payload }) { + return { + ...state, + ...payload, + }; + } + } +} diff --git a/src/pages/new_streaming/index.js b/src/pages/new_streaming/index.js new file mode 100644 index 00000000..2e9c56f9 --- /dev/null +++ b/src/pages/new_streaming/index.js @@ -0,0 +1,14 @@ +import React from 'react' +import * as antd from 'antd' +import { connect } from 'umi' + +@connect(({ app }) => ({ app })) +export default class NewStreaming extends React.Component{ + render(){ + return( +
+ +
+ ) + } +} \ No newline at end of file diff --git a/src/pages/streams/index.js b/src/pages/streams/index.js new file mode 100644 index 00000000..3a225521 --- /dev/null +++ b/src/pages/streams/index.js @@ -0,0 +1,52 @@ +import React from 'react' +import * as antd from 'antd' +import * as Icons from 'components/Icons' +import { connect } from 'umi' +import verbosity from 'core/libs/verbosity' + +import { goLive } from 'core/models/helpers' + +@connect(({ app }) => ({ app })) +export default class Streams extends React.Component { + + state = { + list: [] + } + + componentDidMount() { + try { + + } catch (error) { + verbosity([error]) + } + } + + availableList = () => { + if (!Array.isArray(this.state.list)) { + return false + } + if (this.state.list.length == 0) { + return false + } + return true + } + + render() { + + if (!this.availableList()) { + return
+ + {goLive()}} type="primary" > + Start Streaming + + +
+ } + + return ( +
+ +
+ ) + } +} \ No newline at end of file diff --git a/src/theme/base/index.less b/src/theme/base/index.less index 9c280069..ebd7030f 100644 --- a/src/theme/base/index.less +++ b/src/theme/base/index.less @@ -148,6 +148,7 @@ body { // Right Sidebar @__app_overlay_padding: 30px 30px 30px 35px; .app_right_sidebar_wrapper { + opacity: 1; height: 100%; width: 100%; @@ -166,6 +167,7 @@ body { transition: all @__app_SwapDuration ease-in-out; &.swapped { + opacity: 0; transform: translate(100%, 0); } } @@ -225,8 +227,6 @@ body { color: @Overlay_container1_def_color; - - transition: all @__app_SwapDuration ease-in-out; } @@ -255,6 +255,82 @@ body { transition: all @__Global_Components_transitions_dur linear; } +// Streaming Drawer +.app_streamingPanel_wrapper { + h1 { + color: #fff; + } + +} + +.app_streamingPanel_content { + h1 { + color: #333; + } + + display: inline-block; + align-items: center; + margin: auto; + color: #333; + border-radius: 14px; + background-color: #fff; + width: 100%; + padding: 40px; +} + +.app_streamingPanel_onlivetag { + color: #9597A1; + background-color: #cecece; + padding: 5px; + border-radius: 5px; + text-align: center; + font-size: 14; + + transition: all 150ms ease-in-out; + + &.active { + color: #fff; + background-color: red; + } +} + + +.app_streamingPanel_connectionIndicator { + background-color: #cecece; + width: 1em; + height: 1em; + + border-radius: 24px; + transition: all 150ms ease-in-out; + margin-right: 12px; + + &.active { + background-color: #38b000; + } +} + +.app_streamingPanel_cardBody { + > div { + margin-bottom: 15px; + } +} + +.app_streamingPanel_hiddenkey { + text-align: center; + background-color: #cecece; + border-radius: 7px; + padding: 12px 0; + filter: blur(4px); + transition: all 150ms ease-in-out; + + user-select: all; + + +} + +.app_streamingPanel_hiddenkey:hover { + filter: none; +} // CardComponent (External Module) .cardComponent_wrapper { @@ -266,7 +342,7 @@ body { padding: 10px; - h2,h3,h4{ + h1,h2,h3,h4{ color: #9597A1; font-family: Netflix Sans; font-style: normal;