feat: custom pages menu - move from global space (window.customPages)…

… to redux settings[0].customPages for realtime rendering

client/components/Channels.tsx

@@ -17,7 +17,7 @@ import ChanStrip from './ChanStrip'
 import ChannelMonitorOptions from './ChannelMonitorOptions'
 import { IChannels } from '../../server/reducers/channelsReducer'
 import { IFader } from '../../server/reducers/fadersReducer'
-import { ISettings, PageType } from '../../server/reducers/settingsReducer'
+import { ICustomPages, ISettings, PageType } from '../../server/reducers/settingsReducer'
 import {
     SOCKET_NEXT_MIX,
     SOCKET_CLEAR_PST,
@@ -29,6 +29,7 @@ interface IChannelsInjectProps {
     channels: IChannels
     faders: IFader[]
     settings: ISettings
+    customPages: ICustomPages[]
 }
 
 class Channels extends React.Component<IChannelsInjectProps & Store> {
@@ -45,6 +46,8 @@ class Channels extends React.Component<IChannelsInjectProps & Store> {
                 nextProps.settings.showChanStrip ||
             this.props.settings.showMonitorOptions !==
                 nextProps.settings.showMonitorOptions ||
+            this.props.settings.customPages !==
+                nextProps.settings.customPages ||
             this.props.settings.mixers[0].mixerOnline !==
                 nextProps.settings.mixers[0].mixerOnline ||
             this.props.faders.length !== nextProps.faders.length ||
@@ -106,7 +109,7 @@ class Channels extends React.Component<IChannelsInjectProps & Store> {
         const curPage = this.props.settings.currentPage
 
         const customPageButtons = []
-        const pages = window.customPagesList
+        const pages = this.props.customPages
         if (pages) {
             for (const p of pages) {
                 const isActive =
@@ -126,28 +129,6 @@ class Channels extends React.Component<IChannelsInjectProps & Store> {
             }
         }
 
-/*        const numberedButtons = []
-        const numberOfFaders = this.props.settings.numberOfFaders
-        const pageLength = this.props.settings.pageLength
-        for (let i = 0; i < Math.ceil(numberOfFaders / pageLength); i++) {
-            const isActive =
-                curPage.type === PageType.NumberedPage &&
-                curPage.start === i * this.props.settings.pageLength
-            numberedButtons.push(
-                <button
-                    className={ClassNames('button half', {
-                        active: isActive,
-                    })}
-                    onClick={() => {
-                        this.handlePages(PageType.NumberedPage, i)
-                    }}
-                >
-                    CH{i * pageLength + 1}-
-                    {Math.min((i + 1) * pageLength, numberOfFaders)}
-                </button>
-            )
-        }
-*/
         const isAllActive = curPage.type === PageType.All
         return (
             <React.Fragment>
@@ -197,27 +178,14 @@ class Channels extends React.Component<IChannelsInjectProps & Store> {
 
     renderFaders() {
         const curPage = this.props.settings.currentPage
-        const pageLength = this.props.settings.pageLength
         switch (curPage.type) {
             case PageType.All:
                 return this.props.faders.map((value, index) => (
                     <Channel faderIndex={index} key={index} />
                 ))
-            case PageType.NumberedPage:
-                return this.props.faders
-                    .slice(
-                        curPage.start,
-                        Number(curPage.start!) + Number(pageLength)
-                    )
-                    .map((value, index) => (
-                        <Channel
-                            faderIndex={index + curPage.start!}
-                            key={index + curPage.start!}
-                        />
-                    ))
             case PageType.CustomPage:
-                const page = window.customPagesList.find(
-                    (page) => page.id === curPage.id
+                const page = this.props.customPages.find(
+                    (item) => item.id === curPage.id
                 )
                 if (!page) return
 
@@ -368,6 +336,7 @@ const mapStateToProps = (state: any): IChannelsInjectProps => {
     return {
         channels: state.channels[0].chConnection[0].channel,
         faders: state.faders[0].fader,
+        customPages: state.settings[0].customPages,
         settings: state.settings[0],
     }
 }

client/components/PagesSettings.tsx

@@ -5,39 +5,44 @@ import * as ClassNames from 'classnames'
 import '../assets/css/ChannelRouteSettings.css'
 import { Store } from 'redux'
 import { connect } from 'react-redux'
-import { storeShowPagesSetup } from '../../server/reducers/settingsActions'
+import {
+    storeShowPagesSetup,
+    storeUpdatePagesList,
+} from '../../server/reducers/settingsActions'
 import { IFader } from '../../server/reducers/fadersReducer'
 import Select from 'react-select'
-import { ICustomPages } from '..'
 import {
     SOCKET_GET_PAGES_LIST,
     SOCKET_SET_PAGES_LIST,
 } from '../../server/constants/SOCKET_IO_DISPATCHERS'
+import { ICustomPages } from '../../server/reducers/settingsReducer'
 
 interface IPagesSettingsInjectProps {
+    customPages: ICustomPages[]
     fader: IFader[]
 }
 
 class PagesSettings extends React.PureComponent<
     IPagesSettingsInjectProps & Store
 > {
     pageList: { label: string; value: number }[]
-    state = { pageIndex: 0, label: window.customPagesList[0].label }
+    state = { pageIndex: 0, label: '' }
 
     constructor(props: any) {
         super(props)
 
-        this.pageList = window.customPagesList.map(
+        this.pageList = this.props.customPages.map(
             (page: ICustomPages, index: number) => {
                 return { label: page.label, value: index }
             }
         )
+        this.setState({ label: this.props.customPages[0].label })
     }
 
     handleSelectPage(event: any) {
         this.setState({ pageIndex: event.value })
         this.setState({
-            label: window.customPagesList[event.value].label,
+            label: this.props.customPages[event.value].label,
         })
         console.log('PAGE SELECTED', this.state.pageIndex)
     }
@@ -53,12 +58,15 @@ class PagesSettings extends React.PureComponent<
                         String(this.state.pageIndex + 1)
                 )
             ) {
-                window.customPagesList[this.state.pageIndex].faders.splice(
-                    window.customPagesList[this.state.pageIndex].faders.indexOf(
+                let nextPages: ICustomPages[] = Object.assign([], this.props.customPages)
+                nextPages[this.state.pageIndex].faders.splice(
+                    this.props.customPages[this.state.pageIndex].faders.indexOf(
                         fader
                     ),
                     1
                 )
+                window.storeRedux.dispatch(storeUpdatePagesList(nextPages))
+                window.socketIoClient.emit(SOCKET_SET_PAGES_LIST, nextPages)
             }
         } else {
             console.log('Binding Channel')
@@ -71,26 +79,32 @@ class PagesSettings extends React.PureComponent<
                         '?'
                 )
             ) {
-                window.customPagesList[this.state.pageIndex].faders.push(fader)
-                window.customPagesList[this.state.pageIndex].faders.sort(
-                    (a, b) => {
-                        return a - b
-                    }
-                )
+                let nextPages: ICustomPages[] = Object.assign([], this.props.customPages)
+                nextPages[this.state.pageIndex].faders.push(fader)
+                nextPages[this.state.pageIndex].faders.sort((a, b) => {
+                    return a - b
+                })
+                window.storeRedux.dispatch(storeUpdatePagesList(nextPages))
+                window.socketIoClient.emit(SOCKET_SET_PAGES_LIST, nextPages)
             }
         }
     }
 
     handleLabel = (event: ChangeEvent<HTMLInputElement>) => {
         this.setState({ label: event.target.value })
-        this.pageList[this.state.pageIndex].label =
-            window.customPagesList[this.state.pageIndex].label
-        window.customPagesList[this.state.pageIndex].label = event.target.value
+        this.pageList[this.state.pageIndex].label = this.props.customPages[
+            this.state.pageIndex
+        ].label
+        let nextPages: ICustomPages[] = Object.assign([], this.props.customPages)
+        nextPages[this.state.pageIndex].label = this.state.label
+
+        window.storeRedux.dispatch(storeUpdatePagesList(nextPages))
+        window.socketIoClient.emit(SOCKET_SET_PAGES_LIST, nextPages)
     }
 
     handleClearRouting() {
         if (window.confirm('REMOVE ALL FADER ASSIGNMENTS????')) {
-            window.customPagesList[this.state.pageIndex].faders = []
+            this.props.customPages[this.state.pageIndex].faders = []
         }
     }
 
@@ -102,7 +116,7 @@ class PagesSettings extends React.PureComponent<
     handleSave = () => {
         window.socketIoClient.emit(
             SOCKET_SET_PAGES_LIST,
-            window.customPagesList
+            this.props.customPages
         )
         this.props.dispatch(storeShowPagesSetup())
     }
@@ -115,15 +129,15 @@ class PagesSettings extends React.PureComponent<
                         <div
                             key={index}
                             className={ClassNames('channel-route-text', {
-                                checked: window.customPagesList[
+                                checked: this.props.customPages[
                                     this.state.pageIndex
                                 ].faders.includes(index),
                             })}
                         >
                             {' Fader ' + (index + 1) + ' : '}
                             <input
                                 type="checkbox"
-                                checked={window.customPagesList[
+                                checked={this.props.customPages[
                                     this.state.pageIndex
                                 ].faders.includes(index)}
                                 onChange={(event) =>
@@ -167,7 +181,7 @@ class PagesSettings extends React.PureComponent<
                 <Select
                     value={{
                         label:
-                            window.customPagesList[this.state.pageIndex]
+                            this.props.customPages[this.state.pageIndex]
                                 .label ||
                             'Page : ' + (this.state.pageIndex + 1),
                         value: this.state.pageIndex,
@@ -192,6 +206,7 @@ class PagesSettings extends React.PureComponent<
 
 const mapStateToProps = (state: any, props: any): IPagesSettingsInjectProps => {
     return {
+        customPages: state.settings[0].customPages,
         fader: state.faders[0].fader,
     }
 }

client/index.tsx

@@ -18,12 +18,8 @@ import {
 import { I18nextProvider } from 'react-i18next'
 import i18n from './i18n'
 import { IMixerProtocol } from '../server/constants/MixerProtocolInterface'
+import { ICustomPages } from '../server/reducers/settingsReducer'
 
-export interface ICustomPages {
-    id: string
-    label: string
-    faders: Array<number>
-}
 declare global {
     interface Window {
         storeRedux: any
@@ -34,7 +30,6 @@ declare global {
         snapshotFileList: string[]
         ccgFileList: string[]
         mixerPresetList: string[]
-        customPagesList: ICustomPages[]
     }
 }
 

client/utils/SocketClientHandlers.ts

@@ -11,6 +11,7 @@ import {
 import {
     storeSetMixerOnline,
     storeSetServerOnline,
+    storeUpdatePagesList,
     storeUpdateSettings,
 } from '../../server/reducers/settingsActions'
 import {
@@ -144,6 +145,6 @@ export const socketClientHandlers = () => {
             window.mixerPresetList = payload
         })
         .on(SOCKET_RETURN_PAGES_LIST, (payload: any) => {
-            window.customPagesList = payload
+            window.storeRedux.dispatch(storeUpdatePagesList(payload))
         })
 }

server/reducers/settingsActions.ts

@@ -1,4 +1,4 @@
-import { PageType } from './settingsReducer'
+import { ICustomPages, PageType } from './settingsReducer'
 
 export const TOGGLE_SHOW_SETTINGS = 'TOGGLE_SHOW_SETTINGS'
 export const TOGGLE_SHOW_PAGES_SETUP = 'TOGGLE_SHOW_PAGES_SETUP'
@@ -11,6 +11,7 @@ export const UPDATE_SETTINGS = 'UPDATE_SETTINGS'
 export const SET_MIXER_ONLINE = 'SET_MIXER_ONLINE'
 export const SET_SERVER_ONLINE = 'SET_SERVER_ONLINE'
 export const SET_PAGE = 'SET_PAGE'
+export const SET_PAGES_LIST = 'SET_PAGES_LIST'
 
 export const storeShowSettings = () => {
     return {
@@ -51,6 +52,12 @@ export const storeUpdateSettings = (settings: any) => {
         settings: settings,
     }
 }
+export const storeUpdatePagesList = (customPages: ICustomPages[]) => {
+    return {
+        type: SET_PAGES_LIST,
+        customPages: customPages,
+    }
+}
 export const storeSetMixerOnline = (mixerOnline: boolean) => {
     return {
         type: SET_MIXER_ONLINE,

server/reducers/settingsReducer.ts

@@ -12,11 +12,11 @@ import {
     SET_SERVER_ONLINE,
     SET_PAGE,
     TOGGLE_SHOW_PAGES_SETUP,
+    SET_PAGES_LIST,
 } from '../reducers/settingsActions'
 
 export enum PageType {
     All,
-    NumberedPage,
     CustomPage,
 }
 
@@ -34,11 +34,7 @@ export interface ISettings {
         start?: number
         id?: string
     }
-    customPages?: Array<{
-        id: string
-        label: string
-        faders: Array<number>
-    }>
+    customPages: Array<ICustomPages>
 
     /** User config */
     numberOfMixers: number
@@ -63,6 +59,12 @@ export interface ISettings {
     serverOnline: boolean
 }
 
+export interface ICustomPages {
+    id: string
+    label: string
+    faders: Array<number>
+}
+
 export interface IMixerSettings {
     mixerProtocol: string
     deviceIp: string
@@ -89,6 +91,7 @@ const defaultSettingsReducerState: Array<ISettings> = [
         showStorage: false,
         currentPage: { type: PageType.All },
         numberOfMixers: 1,
+        customPages: [],
         mixers: [
             {
                 mixerProtocol: 'sslSystemT',
@@ -137,7 +140,6 @@ export const settings = (
         case TOGGLE_SHOW_PAGES_SETUP:
             nextState[0].showPagesSetup = !nextState[0].showPagesSetup
             return nextState
-
         case TOGGLE_SHOW_CHAN_STRIP:
             if (nextState[0].showChanStrip !== action.channel) {
                 nextState[0].showChanStrip = action.channel
@@ -171,6 +173,9 @@ export const settings = (
                 start: action.start,
             }
             return nextState
+        case SET_PAGES_LIST:
+            nextState[0].customPages = action.customPages
+            return nextState
         case SET_MIXER_ONLINE:
             nextState[0].mixers[0].mixerOnline = action.mixerOnline
             return nextState

storage/pages.json

@@ -1,4 +1,4 @@
 [
-    { "id": "example", "label": "Live", "faders": [1, 2, 3, 8, 12, 13, 14] },
+    { "id": "example", "label": "hjkhjkkj", "faders": [3, 8, 12, 13, 14] },
     { "id": "studio", "label": "Studie", "faders": [0, 1, 3, 4, 9, 11] }
 ]