add newStreaming

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-    "discord.enabled": true
+    "discord.enabled": false
 }

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

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

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 {
+import { Primary } from './components'
-  Primary
+import { __legacy__objectToArray } from '@ragestudio/nodecore-utils'
-} from './components'
+
+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 <Primary {...overlayElement} />
-        return <Primary {...renderProps} />
       }
-
       return null
     }
 
+    try {
+      __legacy__objectToArray(overlayElement).forEach((e) => {
+        if (includeAllowedProps.includes(e.key)) {
+          props[e.key] = e.value
+        }
+      })
+    } catch (error) {
+      // terrible (⓿_⓿)
+    }
+    
     return (
       <div
+        style={props.size? { width: props.size } : null}
         id="overlay"
         ref={this.setWrapperRef}
         focus="no_loose"

src/components/StreamingOverlay/index.js

@@ -0,0 +1,154 @@
+import React from 'react'
+import * as antd from 'antd'
+import * as Icons from 'components/Icons'
+import { connect } from 'umi'
+import { __legacy__objectToArray } from '@ragestudio/nodecore-utils'
+import classnames from 'classnames'
+
+import StatisticConnection from './statistics/connection'
+
+const statisticsComponents = {
+    connection: <StatisticConnection />
+}
+
+const statisticsList = [
+    {
+        id: "connection",
+        title: <span><Icons.GitMerge /> Network</span>,
+        help: "Measure your connection with our servers",
+        default: true
+    },
+    {
+        id: "audience",
+        title: <span><Icons.Eye /> Audience</span>,
+        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 <div className={classnames(window.classToStyle("streamingPanel_onlivetag"), { ["active"]: this.props.streaming?.onStreaming })} >
+            {this.props.streaming?.onStreaming ? "On Live" : "Offline"}
+        </div>
+    }
+
+    renderOptions() {
+        return (
+            <div className={window.classToStyle("streamingPanel_cardBody")}>
+                <div>
+                    <h1><Icons.Activity /> Information </h1>
+                </div>
+                <div style={{ display: "flex", alignItems: "center" }}>
+                    <div className={classnames(window.classToStyle("streamingPanel_connectionIndicator"), { ["active"]: this.props.streaming?.isConnected })} >  </div>
+                    {this.props.streaming?.isConnected ? "Connected" : "Disconnected"}
+                </div>
+                <div>
+                    <antd.Tag><Icons.Eye /> 0 Viewers </antd.Tag>
+                </div>
+
+            </div>
+        )
+    }
+
+    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 <antd.Tooltip key={e.id} title={e.help} >
+                    <antd.Checkbox onChange={() => { onChangeCheckbox(e.id) }} defaultChecked={e.default} checked={this.state.activeStatistics[e.id]} key={e.id} >
+                        {e.title ?? e.id}
+                    </antd.Checkbox>
+                </antd.Tooltip>
+            })
+        }
+
+        const renderCharts = () => {
+            return __legacy__objectToArray(this.state.activeStatistics).map((e) => {
+                if (e.value) {
+                    return statisticsComponents[e.key]
+                }
+                return null
+            })
+        }
+
+        return (
+            <div>
+                <div>
+                    {getCheckboxes()}
+                </div>
+                <div>
+                    {renderCharts()}
+                </div>
+            </div>
+        )
+    }
+
+
+    render() {
+        console.log(this.props.streaming)
+        return (
+            <div id="streamingWrapper" className={window.classToStyle("streamingPanel_wrapper")} >
+                <h1><Icons.Radio /> Your streaming</h1>
+                <div className={window.classToStyle("streamingPanel_content")}>
+                    <div style={{ float: "left", display: "flex", fontSize: "27px", alignItems: "center", maxWidth: "80%" }}>
+                        <antd.Avatar style={{ width: "70px", height: "70px", marginRight: "17px" }} src={this.props.app.session_data.avatar} size="large" shape="square" />
+                        <h1 style={{ color: "#333", margin: 0 }}> @{this.props.app.session_data.username} </h1>
+                    </div>
+                    <div style={{ float: "right", width: "100px" }} >
+                        {this.renderLiveTag()}
+                    </div>
+                </div>
+                <div style={{ padding: "25px 40px" }} className={window.classToStyle("streamingPanel_content")}>
+                    <div style={{
+                        display: "grid",
+                        gridTemplateColumns: "1fr 1fr",
+                        gridTemplateRows: "1fr",
+                        gap: "0px 20px"
+                    }}>
+                        {this.renderOptions()}
+                        {this.renderStadistics()}
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}

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 <canvas ref={(e) => this.createRef(e)} width="400" height="400">
+
+        </canvas>
+    }
+}

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',
+        mode: 'half',
-        element: <div>
+        size: "50%",
-            SomeSomeSomeSomeSomeSomeSomeSomeSomeSome
+        element: <StreamingOverlay />
-        </div>
     })
 }

src/layouts/PrimaryLayout.js

@@ -59,8 +59,8 @@ export default class PrimaryLayout extends React.Component {
 
     window.toogleSidebarCollapse = () => {
       this.props.dispatch({
-        type: "app/handleCollapseSidebar",
+        type: "app/updateState",
-        payload: !this.props.app.sidebar_collapsed
+        payload: { sidebar_collapsed: !this.props.app.sidebar_collapsed }
       })
     }
   }

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" })

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,
+            };
+        }
+    }
+}

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(
+            <div>
+                
+            </div>
+        )
+    }
+}

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 <div style={{ display: "flex", textAlign: "center", justifyContent: "center" }}>
+                <antd.Result status="404" title="Its seems like nothing is on streaming" >
+                    <antd.Button onClick={() => {goLive()}} type="primary" >
+                        <Icons.Cast /> Start Streaming
+                    </antd.Button>
+                </antd.Result>
+            </div>
+        }
+
+        return (
+            <div>
+
+            </div>
+        )
+    }
+}

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;