Skip to content

Commit

Permalink
feat: pages
Browse files Browse the repository at this point in the history
  • Loading branch information
Balte de Wit committed Jun 18, 2020
1 parent 76750ac commit 8c5b212
Show file tree
Hide file tree
Showing 9 changed files with 213 additions and 7 deletions.
121 changes: 116 additions & 5 deletions client/components/Channels.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,14 @@ import { Store } from 'redux'
import {
TOGGLE_SHOW_SETTINGS,
TOGGLE_SHOW_STORAGE,
SET_PAGE,
} from '../../server/reducers/settingsActions'
import ChannelRouteSettings from './ChannelRouteSettings'
import ChanStrip from './ChanStrip'
import ChannelMonitorOptions from './ChannelMonitorOptions'
import { IChannels } from '../../server/reducers/channelsReducer'
import { IFader } from '../../server/reducers/fadersReducer'
import { ISettings } from '../../server/reducers/settingsReducer'
import { ISettings, PageType } from '../../server/reducers/settingsReducer'
import {
SOCKET_NEXT_MIX,
SOCKET_CLEAR_PST,
Expand Down Expand Up @@ -44,7 +45,10 @@ class Channels extends React.Component<IChannelsInjectProps & Store> {
nextProps.settings.showMonitorOptions ||
this.props.settings.mixerOnline !==
nextProps.settings.mixerOnline ||
this.props.faders.length !== nextProps.faders.length
this.props.faders.length !== nextProps.faders.length ||
this.props.settings.currentPage !==
nextProps.settings.currentPage ||
this.props.settings.pageLength !== nextProps.settings.pageLength
)
}

Expand Down Expand Up @@ -74,6 +78,113 @@ class Channels extends React.Component<IChannelsInjectProps & Store> {
})
}

handlePages(type: PageType, i: number | string) {
if (typeof i === 'string') {
this.props.dispatch({
type: SET_PAGE,
pageType: type,
id: i,
})
} else {
this.props.dispatch({
type: SET_PAGE,
pageType: type,
start: i * this.props.settings.pageLength,
})
}
}

renderPageButtons() {
if (this.props.settings.enablePages === false) {
return undefined
}

const customPageButtons = []
const pages = window.customPagesList
if (pages) {
for (const p of pages) {
customPageButtons.push(
<button
className="channels-show-settings-button"
onClick={() => {
this.handlePages(PageType.CustomPage, p.id)
}}
>
{p.label}
</button>
)
}
}

const numberedButtons = []
const numberOfFaders = this.props.settings.numberOfFaders
const pageLength = this.props.settings.pageLength
for (let i = 0; i < Math.ceil(numberOfFaders / pageLength); i++) {
numberedButtons.push(
<button
className="channels-show-settings-button"
onClick={() => {
this.handlePages(PageType.NumberedPage, i)
}}
>
CH{i * pageLength + 1}-{(i + 1) * pageLength}
</button>
)
}

return (
<React.Fragment>
{customPageButtons}
{numberedButtons}
<button
className="channels-show-settings-button"
onClick={() => {
this.handlePages(PageType.All, 0)
}}
>
ALL
</button>
</React.Fragment>
)
}

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
)
if (!page) return

return this.props.faders
.filter((v, i) => page.faders.find((f) => i === f))
.map((value, index) => (
<Channel
faderIndex={page.faders[index]}
key={page.faders[index]}
/>
))
}
}

render() {
return (
<div className="channels-body">
Expand All @@ -100,9 +211,7 @@ class Channels extends React.Component<IChannelsInjectProps & Store> {
faderIndex={this.props.settings.showMonitorOptions}
/>
) : null}
{this.props.faders.map((none: any, index: number) => {
return <Channel faderIndex={index} key={index} />
})}
{this.renderFaders()}
<br />
<div className="channels-mix-body">
{this.props.settings.mixerOnline ? (
Expand Down Expand Up @@ -176,6 +285,8 @@ class Channels extends React.Component<IChannelsInjectProps & Store> {
</button>
}
<br />

{this.renderPageButtons()}
</div>
</div>
)
Expand Down
20 changes: 20 additions & 0 deletions client/components/Settings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -374,6 +374,16 @@ class Settings extends React.PureComponent<IAppProps & Store, IState> {
/>
</label>
<br />
<label className="settings-input-field">
PAGE LENGTH:
<input
name="pageLength"
type="text"
value={this.state.settings.pageLength}
onChange={this.handleChange}
/>
</label>
<br />
<label className="settings-input-field">
AUTOMATION MODE:
<input
Expand Down Expand Up @@ -404,6 +414,16 @@ class Settings extends React.PureComponent<IAppProps & Store, IState> {
/>
</label>
<br />
<label className="settings-input-field">
ENABLE PAGES:
<input
type="checkbox"
name="enablePages"
checked={this.state.settings.enablePages}
onChange={this.handleChange}
/>
</label>
<br />
{window.mixerProtocol.protocol === 'MIDI'
? this.renderMixerMidiSettings()
: ''}
Expand Down
7 changes: 7 additions & 0 deletions client/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
SOCKET_GET_SNAPSHOT_LIST,
SOCKET_GET_CCG_LIST,
SOCKET_GET_MIXER_PRESET_LIST,
SOCKET_GET_PAGES_LIST,
} from '../server/constants/SOCKET_IO_DISPATCHERS'

import { I18nextProvider } from 'react-i18next'
Expand All @@ -28,6 +29,11 @@ declare global {
snapshotFileList: string[]
ccgFileList: string[]
mixerPresetList: string[]
customPagesList: Array<{
id: string
label: string
faders: Array<number>
}>
}
}

Expand All @@ -40,6 +46,7 @@ window.socketIoClient = io()
window.socketIoClient.emit(SOCKET_GET_SNAPSHOT_LIST)
window.socketIoClient.emit(SOCKET_GET_CCG_LIST)
window.socketIoClient.emit(SOCKET_GET_MIXER_PRESET_LIST)
window.socketIoClient.emit(SOCKET_GET_PAGES_LIST)

console.log('Setting up SocketIO connection')
socketClientHandlers()
Expand Down
4 changes: 4 additions & 0 deletions client/utils/SocketClientHandlers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import {
SOCKET_SET_MIXER_ONLINE,
SOCKET_SET_ALL_VU,
SOCKET_RETURN_MIXER_PRESET_LIST,
SOCKET_RETURN_PAGES_LIST,
} from '../../server/constants/SOCKET_IO_DISPATCHERS'

export const socketClientHandlers = () => {
Expand Down Expand Up @@ -148,4 +149,7 @@ export const socketClientHandlers = () => {
.on(SOCKET_RETURN_MIXER_PRESET_LIST, (payload: any) => {
window.mixerPresetList = payload
})
.on(SOCKET_RETURN_PAGES_LIST, (payload: any) => {
window.customPagesList = payload
})
}
9 changes: 8 additions & 1 deletion server/MainThreadHandler.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,15 @@ import {
import { SnapshotHandler } from './utils/SnapshotHandler'
import { socketServer } from './expressHandler'

import { UPDATE_SETTINGS } from './reducers/settingsActions'
import { UPDATE_SETTINGS, LOAD_CUSTOM_PAGES } from './reducers/settingsActions'
import {
loadSettings,
saveSettings,
getSnapShotList,
getCcgSettingsList,
setCcgDefault,
getMixerPresetList,
getCustomPages,
} from './utils/SettingsStorage'
import {
SOCKET_TOGGLE_PGM,
Expand Down Expand Up @@ -56,6 +57,8 @@ import {
SOCKET_RETURN_MIXER_PRESET_LIST,
SOCKET_LOAD_MIXER_PRESET,
SOCKET_SET_INPUT_SELECTOR,
SOCKET_GET_PAGES_LIST,
SOCKET_RETURN_PAGES_LIST,
} from './constants/SOCKET_IO_DISPATCHERS'
import {
TOGGLE_PGM,
Expand Down Expand Up @@ -192,6 +195,10 @@ export class MainThreadHandlers {
mixerGenericConnection.loadMixerPreset(payload)
this.updateFullClientStore()
})
.on(SOCKET_GET_PAGES_LIST, () => {
logger.info('Get custom pages list', {})
socketServer.emit(SOCKET_RETURN_PAGES_LIST, getCustomPages())
})
.on(SOCKET_SAVE_SETTINGS, (payload: any) => {
logger.info('Save settings :' + String(payload), {})
saveSettings(payload)
Expand Down
2 changes: 2 additions & 0 deletions server/constants/SOCKET_IO_DISPATCHERS.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,8 @@ export const SOCKET_LOAD_MIXER_PRESET = 'loadMixerPreset'
export const SOCKET_LOAD_SNAPSHOT = 'loadSnapshot'
export const SOCKET_SAVE_SNAPSHOT = 'saveSnapshot'
export const SOCKET_SAVE_CCG_FILE = 'saveCcgFile'
export const SOCKET_GET_PAGES_LIST = 'getPagesList'
export const SOCKET_RETURN_PAGES_LIST = 'getPagesList'

// Store updates:
export const SOCKET_SET_FULL_STORE = 'setFullStore'
Expand Down
1 change: 1 addition & 0 deletions server/reducers/settingsActions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,4 @@ export const TOGGLE_SHOW_SNAPS = 'TOGGLE_SHOW_SNAPS'
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'
41 changes: 41 additions & 0 deletions server/reducers/settingsReducer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,35 @@ import {
SET_MIXER_ONLINE,
TOGGLE_SHOW_MONITOR_OPTIONS,
SET_SERVER_ONLINE,
SET_PAGE,
} from '../reducers/settingsActions'

export enum PageType {
All,
NumberedPage,
CustomPage,
}

export interface ISettings {
/** UI state (non persistant) */
showSnaps: boolean
showSettings: boolean
showChanStrip: number
showOptions: number | false
showMonitorOptions: number
showStorage: boolean
currentPage: {
type: PageType
start?: number
id?: string
}
customPages?: Array<{
id: string
label: string
faders: Array<number>
}>

/** User config */
mixerProtocol: string
localIp: string
localOscPort: number
Expand All @@ -42,6 +62,10 @@ export interface ISettings {
automationMode: boolean
offtubeMode: boolean
showPfl: boolean
enablePages: boolean
pageLength: number

/** Connection state */
mixerOnline: boolean
serverOnline: boolean
}
Expand All @@ -54,6 +78,8 @@ const defaultSettingsReducerState: Array<ISettings> = [
showOptions: false,
showMonitorOptions: -1,
showStorage: false,
currentPage: { type: PageType.All },

mixerProtocol: 'sslSystemT',
localIp: '0.0.0.0',
localOscPort: 1234,
Expand All @@ -77,6 +103,9 @@ const defaultSettingsReducerState: Array<ISettings> = [
fadeTime: 120,
voFadeTime: 280,
showPfl: false,
enablePages: true,
pageLength: 16,

mixerOnline: false,
serverOnline: true,
},
Expand Down Expand Up @@ -118,6 +147,13 @@ export const settings = (
case TOGGLE_SHOW_SNAPS:
nextState[0].showSnaps = !nextState[0].showSnaps
return nextState
case SET_PAGE:
nextState[0].currentPage = {
type: action.pageType,
id: action.id,
start: action.start,
}
return nextState
case SET_MIXER_ONLINE:
nextState[0].mixerOnline = action.mixerOnline
return nextState
Expand All @@ -126,12 +162,17 @@ export const settings = (
return nextState
case UPDATE_SETTINGS:
nextState[0] = action.settings

// ignore UI state:
nextState[0].showSettings = state[0].showSettings
nextState[0].showOptions = state[0].showOptions
nextState[0].showMonitorOptions = state[0].showMonitorOptions
nextState[0].showStorage = state[0].showStorage
nextState[0].showChanStrip = state[0].showChanStrip
nextState[0].serverOnline = state[0].serverOnline
nextState[0].currentPage = state[0].currentPage
nextState[0].customPages = state[0].customPages

if (
typeof MixerProtocolPresets[nextState[0].mixerProtocol] ===
'undefined'
Expand Down
Loading

0 comments on commit 8c5b212

Please sign in to comment.