From 62d2ea2a0761bdc3a0cd827e42b87b6600dfb125 Mon Sep 17 00:00:00 2001 From: olzzon Date: Tue, 16 Mar 2021 10:52:13 +0100 Subject: [PATCH] feat: refactor - all snaps code from old implementation removed --- client/assets/css/Channels.css | 273 ++++++++--------- client/components/Channel.tsx | 1 - client/components/VuMeter.tsx | 6 +- .../__tests__/__mocks__/parsedEmptyStore.json | 2 - .../__tests__/__mocks__/parsedFullStore.json | 290 ++---------------- .../__mocks__/parsedSimpleStore.json | 14 +- server/__tests__/settingsReducer.spec.ts | 16 - server/constants/DEFAULTS.ts | 2 - server/reducers/fadersReducer.ts | 14 - server/reducers/settingsActions.ts | 1 - server/reducers/settingsReducer.ts | 9 - 11 files changed, 162 insertions(+), 466 deletions(-) delete mode 100644 server/constants/DEFAULTS.ts diff --git a/client/assets/css/Channels.css b/client/assets/css/Channels.css index 1819d6e8..26797266 100644 --- a/client/assets/css/Channels.css +++ b/client/assets/css/Channels.css @@ -1,138 +1,135 @@ -.channels-body { - display: flex; - flex-direction: row; - background-color: black; - min-height: 760px; -} - -.channels-body > .channels-body-inner { - display: flex; - flex-direction: row; - flex-grow: 2; - overflow-x: auto; - height: calc(100vh); -} - -.channels-body > .closedChanStrip { - /* margin-left: -630px; */ - transition: transform 300ms; - position: absolute; - z-index: 2; - transform: translateX(-100%); -} - -.channels-body > .openChanStrip { - /* margin-left: 0px; - transition: margin 800ms; */ - transition: transform 300ms; - transform: unset; -} - -.button { - outline: none; - -moz-outline: none; - color: white; - height: 90px; - width: 90px; - border-color: rgb(71, 71, 71); - background-color: rgb(53, 53, 53); - margin-left: 5px; - margin-right: 4px; - margin-top: 10px; - border-radius: 7px; -} -.button.half { - height: 60px; -} -.button.active { - background-color: #2f475b; -} - -.button-all-manual.all { - background-color: #af39b9; -} -.button-all-manual.any { - border-color: #af39b9; -} - -.channels-mix-body { - display: flex; - flex-direction: column; - - width: 100px; - min-height: 950px; - max-height: calc(100vh - 10px); - color: white; - background: linear-gradient( - #2f2f2f 0px, - #2f2f2f 790px, - rgb(0, 0, 0) 1px, - #2f2f2f 800px, - #2f2f2f 100% - ); - margin: 4px; - border-radius: 9px; - border-color: rgb(80, 80, 80); - border-style: solid; - border-width: 1px; -} -.channels-mix-body > .mid { - flex-grow: 2; - display: flex; - flex-direction: column; - justify-content: center; -} -.channels-mix-body > .bot { - overflow-y: auto; -} - -.channels-show-mixer-online { - background-color: rgb(219, 1, 1); -} - -.channels-show-mixer-online.connected { - background-color: rgb(9, 107, 0); -} - -.channels-show-snaps-button { -} - -.channels-show-settings-button { -} -.channels-show-settings-button.active { - background-color: #2f475b; -} - -.channels-show-storage-button { -} - -.channels-mix-button { - background-color: rgb(65, 65, 65); -} - -.channels-clear-button { - background-color: rgb(19, 19, 19); -} - -.channels-snap-mix-body { - /* margin-top: 58px; */ -} - -.channels-snap-mix-line { - margin-top: 4px; - background-color: #2b2b2b; -} - -.channels-snap-mix-button { - background-color: rgb(199, 202, 0); - color: rgb(44, 44, 44); - margin-left: 20px; - height: 25px; - width: 60px; - border-color: rgb(99, 99, 99); - white-space: nowrap; -} - -.channels-snap-mix-line:last-of-type { - margin-bottom: 51px; -} +.channels-body { + display: flex; + flex-direction: row; + background-color: black; + min-height: 760px; +} + +.channels-body > .channels-body-inner { + display: flex; + flex-direction: row; + flex-grow: 2; + overflow-x: auto; + height: calc(100vh); +} + +.channels-body > .closedChanStrip { + /* margin-left: -630px; */ + transition: transform 300ms; + position: absolute; + z-index: 2; + transform: translateX(-100%); +} + +.channels-body > .openChanStrip { + /* margin-left: 0px; + transition: margin 800ms; */ + transition: transform 300ms; + transform: unset; +} + +.button { + outline: none; + -moz-outline: none; + color: white; + height: 90px; + width: 90px; + border-color: rgb(71, 71, 71); + background-color: rgb(53, 53, 53); + margin-left: 5px; + margin-right: 4px; + margin-top: 10px; + border-radius: 7px; +} +.button.half { + height: 60px; +} +.button.active { + background-color: #2f475b; +} + +.button-all-manual.all { + background-color: #af39b9; +} +.button-all-manual.any { + border-color: #af39b9; +} + +.channels-mix-body { + display: flex; + flex-direction: column; + + width: 100px; + min-height: 950px; + max-height: calc(100vh - 10px); + color: white; + background: linear-gradient( + #2f2f2f 0px, + #2f2f2f 790px, + rgb(0, 0, 0) 1px, + #2f2f2f 800px, + #2f2f2f 100% + ); + margin: 4px; + border-radius: 9px; + border-color: rgb(80, 80, 80); + border-style: solid; + border-width: 1px; +} +.channels-mix-body > .mid { + flex-grow: 2; + display: flex; + flex-direction: column; + justify-content: center; +} +.channels-mix-body > .bot { + overflow-y: auto; +} + +.channels-show-mixer-online { + background-color: rgb(219, 1, 1); +} + +.channels-show-mixer-online.connected { + background-color: rgb(9, 107, 0); +} + +.channels-show-settings-button { +} +.channels-show-settings-button.active { + background-color: #2f475b; +} + +.channels-show-storage-button { +} + +.channels-mix-button { + background-color: rgb(65, 65, 65); +} + +.channels-clear-button { + background-color: rgb(19, 19, 19); +} + +.channels-snap-mix-body { + /* margin-top: 58px; */ +} + +.channels-snap-mix-line { + margin-top: 4px; + background-color: #2b2b2b; +} + +.channels-snap-mix-button { + background-color: rgb(199, 202, 0); + color: rgb(44, 44, 44); + margin-left: 20px; + height: 25px; + width: 60px; + border-color: rgb(99, 99, 99); + white-space: nowrap; +} + +.channels-snap-mix-line:last-of-type { + margin-bottom: 51px; +} diff --git a/client/components/Channel.tsx b/client/components/Channel.tsx index 576e0fda..4e335e21 100644 --- a/client/components/Channel.tsx +++ b/client/components/Channel.tsx @@ -69,7 +69,6 @@ class Channel extends React.Component< nextProps.fader.label != this.props.fader.label || nextProps.settings.mixers[0].mixerProtocol != this.props.settings.mixers[0].mixerProtocol || - nextProps.settings.showSnaps != this.props.settings.showSnaps || nextProps.settings.showPfl != this.props.settings.showPfl || nextProps.settings.showChanStrip != this.props.settings.showChanStrip || diff --git a/client/components/VuMeter.tsx b/client/components/VuMeter.tsx index 1ea189e7..66a7164d 100644 --- a/client/components/VuMeter.tsx +++ b/client/components/VuMeter.tsx @@ -7,7 +7,6 @@ import '../assets/css/VuMeter.css' //Utils: export interface IVuMeterInjectedProps { - showSnaps: boolean faderIndex: number channel: number } @@ -46,7 +45,7 @@ export class VuMeter extends React.PureComponent { totalHeight = () => { return ( - ((this.props.showSnaps ? 1 : 2) * 200) / + (400) / (this.meterMax - this.meterMin) ) } @@ -221,8 +220,7 @@ export class VuMeter extends React.PureComponent { const mapStateToProps = (state: any, props: any): IVuMeterInjectedProps => { return { faderIndex: props.faderIndex, - channel: props.channel, - showSnaps: state.settings[0].showSnaps, + channel: props.channel } } diff --git a/server/__tests__/__mocks__/parsedEmptyStore.json b/server/__tests__/__mocks__/parsedEmptyStore.json index 37af943a..14992ca7 100644 --- a/server/__tests__/__mocks__/parsedEmptyStore.json +++ b/server/__tests__/__mocks__/parsedEmptyStore.json @@ -25,7 +25,6 @@ ], "settings": [ { - "showSnaps": false, "showSettings": false, "showChanStrip": -1, "showOptions": false, @@ -52,7 +51,6 @@ "remoteFaderMidiInputPort": "", "remoteFaderMidiOutputPort": "", "numberOfFaders": 8, - "numberOfSnaps": 8, "voLevel": 30, "autoResetLevel": 5, "automationMode": true, diff --git a/server/__tests__/__mocks__/parsedFullStore.json b/server/__tests__/__mocks__/parsedFullStore.json index c4ec6981..1fa609ff 100644 --- a/server/__tests__/__mocks__/parsedFullStore.json +++ b/server/__tests__/__mocks__/parsedFullStore.json @@ -118,17 +118,7 @@ "threshold": 0.75, "ratio": 0.75, "monitor": 1, - "showChannel": true, - "snapOn": [ - false, - false, - false, - false, - false, - false, - false, - false - ] + "showChannel": true }, { "faderLevel": 0.75, @@ -148,17 +138,7 @@ "threshold": 0.75, "ratio": 0.75, "monitor": 2, - "showChannel": true, - "snapOn": [ - false, - false, - false, - false, - false, - false, - false, - false - ] + "showChannel": true }, { "faderLevel": 0.75, @@ -178,17 +158,7 @@ "threshold": 0.75, "ratio": 0.75, "monitor": 3, - "showChannel": true, - "snapOn": [ - false, - false, - false, - false, - false, - false, - false, - false - ] + "showChannel": true }, { "faderLevel": 0.75, @@ -208,17 +178,7 @@ "threshold": 0.75, "ratio": 0.75, "monitor": 4, - "showChannel": true, - "snapOn": [ - false, - false, - false, - false, - false, - false, - false, - false - ] + "showChannel": true }, { "faderLevel": 0.75, @@ -238,17 +198,7 @@ "threshold": 0.75, "ratio": 0.75, "monitor": 5, - "showChannel": true, - "snapOn": [ - false, - false, - false, - false, - false, - false, - false, - false - ] + "showChannel": true }, { "faderLevel": 0.75, @@ -268,17 +218,7 @@ "threshold": 0.75, "ratio": 0.75, "monitor": 6, - "showChannel": true, - "snapOn": [ - false, - false, - false, - false, - false, - false, - false, - false - ] + "showChannel": true }, { "faderLevel": 0.75, @@ -298,17 +238,7 @@ "threshold": 0.75, "ratio": 0.75, "monitor": 7, - "showChannel": true, - "snapOn": [ - false, - false, - false, - false, - false, - false, - false, - false - ] + "showChannel": true }, { "faderLevel": 0.75, @@ -328,17 +258,7 @@ "threshold": 0.75, "ratio": 0.75, "monitor": 8, - "showChannel": true, - "snapOn": [ - false, - false, - false, - false, - false, - false, - false, - false - ] + "showChannel": true }, { "faderLevel": 0.75, @@ -358,17 +278,7 @@ "threshold": 0.75, "ratio": 0.75, "monitor": 9, - "showChannel": true, - "snapOn": [ - false, - false, - false, - false, - false, - false, - false, - false - ] + "showChannel": true }, { "faderLevel": 0.75, @@ -388,17 +298,7 @@ "threshold": 0.75, "ratio": 0.75, "monitor": 10, - "showChannel": true, - "snapOn": [ - false, - false, - false, - false, - false, - false, - false, - false - ] + "showChannel": true }, { "faderLevel": 0.75, @@ -418,17 +318,7 @@ "threshold": 0.75, "ratio": 0.75, "monitor": 11, - "showChannel": true, - "snapOn": [ - false, - false, - false, - false, - false, - false, - false, - false - ] + "showChannel": true }, { "faderLevel": 0.75, @@ -448,17 +338,7 @@ "threshold": 0.75, "ratio": 0.75, "monitor": 12, - "showChannel": true, - "snapOn": [ - false, - false, - false, - false, - false, - false, - false, - false - ] + "showChannel": true }, { "faderLevel": 0.75, @@ -478,17 +358,7 @@ "threshold": 0.75, "ratio": 0.75, "monitor": 13, - "showChannel": true, - "snapOn": [ - false, - false, - false, - false, - false, - false, - false, - false - ] + "showChannel": true }, { "faderLevel": 0.75, @@ -508,17 +378,7 @@ "threshold": 0.75, "ratio": 0.75, "monitor": 14, - "showChannel": true, - "snapOn": [ - false, - false, - false, - false, - false, - false, - false, - false - ] + "showChannel": true }, { "faderLevel": 0.75, @@ -538,17 +398,7 @@ "threshold": 0.75, "ratio": 0.75, "monitor": 15, - "showChannel": true, - "snapOn": [ - false, - false, - false, - false, - false, - false, - false, - false - ] + "showChannel": true }, { "faderLevel": 0.75, @@ -568,17 +418,7 @@ "threshold": 0.75, "ratio": 0.75, "monitor": 16, - "showChannel": true, - "snapOn": [ - false, - false, - false, - false, - false, - false, - false, - false - ] + "showChannel": true }, { "faderLevel": 0.75, @@ -598,17 +438,7 @@ "threshold": 0.75, "ratio": 0.75, "monitor": 17, - "showChannel": true, - "snapOn": [ - false, - false, - false, - false, - false, - false, - false, - false - ] + "showChannel": true }, { "faderLevel": 0.75, @@ -628,17 +458,7 @@ "threshold": 0.75, "ratio": 0.75, "monitor": 18, - "showChannel": true, - "snapOn": [ - false, - false, - false, - false, - false, - false, - false, - false - ] + "showChannel": true }, { "faderLevel": 0.75, @@ -658,17 +478,7 @@ "threshold": 0.75, "ratio": 0.75, "monitor": 19, - "showChannel": true, - "snapOn": [ - false, - false, - false, - false, - false, - false, - false, - false - ] + "showChannel": true }, { "faderLevel": 0.75, @@ -688,17 +498,7 @@ "threshold": 0.75, "ratio": 0.75, "monitor": 20, - "showChannel": true, - "snapOn": [ - false, - false, - false, - false, - false, - false, - false, - false - ] + "showChannel": true }, { "faderLevel": 0.75, @@ -718,17 +518,7 @@ "threshold": 0.75, "ratio": 0.75, "monitor": 21, - "showChannel": true, - "snapOn": [ - false, - false, - false, - false, - false, - false, - false, - false - ] + "showChannel": true }, { "faderLevel": 0.75, @@ -748,17 +538,7 @@ "threshold": 0.75, "ratio": 0.75, "monitor": 22, - "showChannel": true, - "snapOn": [ - false, - false, - false, - false, - false, - false, - false, - false - ] + "showChannel": true }, { "faderLevel": 0.75, @@ -778,17 +558,7 @@ "threshold": 0.75, "ratio": 0.75, "monitor": 23, - "showChannel": true, - "snapOn": [ - false, - false, - false, - false, - false, - false, - false, - false - ] + "showChannel": true }, { "faderLevel": 0.75, @@ -808,17 +578,7 @@ "threshold": 0.75, "ratio": 0.75, "monitor": 24, - "showChannel": true, - "snapOn": [ - false, - false, - false, - false, - false, - false, - false, - false - ] + "showChannel": true } ] } @@ -1027,7 +787,6 @@ ], "settings": [ { - "showSnaps": false, "showSettings": false, "showChanStrip": -1, "showOptions": false, @@ -1055,7 +814,6 @@ "remoteFaderMidiInputPort": "", "remoteFaderMidiOutputPort": "", "numberOfFaders": "24", - "numberOfSnaps": 8, "voLevel": 20, "autoResetLevel": 10, "automationMode": true, diff --git a/server/__tests__/__mocks__/parsedSimpleStore.json b/server/__tests__/__mocks__/parsedSimpleStore.json index 15cb6012..61482595 100644 --- a/server/__tests__/__mocks__/parsedSimpleStore.json +++ b/server/__tests__/__mocks__/parsedSimpleStore.json @@ -26,17 +26,7 @@ "threshold": 0.75, "ratio": 0.75, "monitor": 1, - "showChannel": true, - "snapOn": [ - false, - false, - false, - false, - false, - false, - false, - false - ] + "showChannel": true } ] } @@ -61,7 +51,6 @@ ], "settings": [ { - "showSnaps": false, "showSettings": false, "showChanStrip": -1, "showOptions": false, @@ -89,7 +78,6 @@ "remoteFaderMidiInputPort": "", "remoteFaderMidiOutputPort": "", "numberOfFaders": 8, - "numberOfSnaps": 8, "voLevel": 20, "autoResetLevel": 10, "automationMode": true, diff --git a/server/__tests__/settingsReducer.spec.ts b/server/__tests__/settingsReducer.spec.ts index 2532e5d1..52e5af28 100644 --- a/server/__tests__/settingsReducer.spec.ts +++ b/server/__tests__/settingsReducer.spec.ts @@ -3,7 +3,6 @@ import { TOGGLE_SHOW_CHAN_STRIP, TOGGLE_SHOW_OPTION, TOGGLE_SHOW_SETTINGS, - TOGGLE_SHOW_SNAPS, TOGGLE_SHOW_STORAGE, UPDATE_SETTINGS, } from '../reducers/settingsActions' @@ -77,21 +76,6 @@ describe('Test redux settingsReducer actions', () => { ).toEqual(nextState) }) - /** - * TEST TOGGLE_SHOW_SNAPS: - */ - - it('should return the new showSnaps state on settings', () => { - let parsedFullStore = JSON.parse(parsedFullStoreJSON) - let nextState = JSON.parse(parsedFullStoreJSON) - nextState.settings[0].showSnaps = true - expect( - indexReducer(parsedFullStore, { - type: TOGGLE_SHOW_SNAPS, - }) - ).toEqual(nextState) - }) - /** * TEST TOGGLE_SHOW_STORAGE: */ diff --git a/server/constants/DEFAULTS.ts b/server/constants/DEFAULTS.ts deleted file mode 100644 index 14365689..00000000 --- a/server/constants/DEFAULTS.ts +++ /dev/null @@ -1,2 +0,0 @@ -//Mixer Config: -export const NUMBER_OF_SNAPS = 8 diff --git a/server/reducers/fadersReducer.ts b/server/reducers/fadersReducer.ts index aa9fef40..de77b764 100644 --- a/server/reducers/fadersReducer.ts +++ b/server/reducers/fadersReducer.ts @@ -1,5 +1,3 @@ -import * as DEFAULTS from '../constants/DEFAULTS' -import { fxParamsList } from '../constants/MixerProtocolInterface' import { CLEAR_PST, FADE_TO_BLACK, @@ -17,7 +15,6 @@ import { SET_VU_REDUCTION_LEVEL, SHOW_CHANNEL, IGNORE_AUTOMATION, - SNAP_RECALL, TOGGLE_MUTE, TOGGLE_PFL, TOGGLE_PGM, @@ -58,7 +55,6 @@ export interface IFader { showChannel: boolean showInMiniMonitor: boolean ignoreAutomation: boolean - snapOn: Array disabled: boolean /** @@ -100,15 +96,11 @@ const defaultFadersReducerState = (numberOfFaders: number): IFaders[] => { showChannel: true, showInMiniMonitor: false, ignoreAutomation: false, - snapOn: [], disabled: false, } defaultObj[0].vuMeters.push({ reductionVal: 0.0, }) - for (let y = 0; y < DEFAULTS.NUMBER_OF_SNAPS; y++) { - defaultObj[0].fader[index].snapOn.push(false) - } } return defaultObj } @@ -288,12 +280,6 @@ export const faders = ( nextState[0].fader[index].pstVoOn = false }) return nextState - case SNAP_RECALL: //snapIndex - nextState[0].fader.forEach((item, index) => { - nextState[0].fader[index].pstOn = !!state[0].fader[index] - .snapOn[action.snapIndex] - }) - return nextState case SET_CHANNEL_DISABLED: if (!nextState[0].fader[action.channel]) return nextState nextState[0].fader[action.channel].disabled = action.disabled diff --git a/server/reducers/settingsActions.ts b/server/reducers/settingsActions.ts index eb3871ad..4e430207 100644 --- a/server/reducers/settingsActions.ts +++ b/server/reducers/settingsActions.ts @@ -7,7 +7,6 @@ export const TOGGLE_SHOW_CHAN_STRIP_FULL = 'TOGGLE_SHOW_CHAN_STRIP_FULL' export const TOGGLE_SHOW_OPTION = 'TOGGLE_SHOW_OPTION' export const TOGGLE_SHOW_MONITOR_OPTIONS = 'TOGGLE_SHOW_MONITOR_OPTIONS' export const TOGGLE_SHOW_STORAGE = 'TOGGLE_SHOW_STORAGE' -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' diff --git a/server/reducers/settingsReducer.ts b/server/reducers/settingsReducer.ts index 5aed9626..54d7f56b 100644 --- a/server/reducers/settingsReducer.ts +++ b/server/reducers/settingsReducer.ts @@ -1,10 +1,8 @@ -import * as DEFAULTS from '../constants/DEFAULTS' import { MixerProtocolPresets } from '../constants/MixerProtocolPresets' import { TOGGLE_SHOW_CHAN_STRIP, TOGGLE_SHOW_OPTION, TOGGLE_SHOW_SETTINGS, - TOGGLE_SHOW_SNAPS, TOGGLE_SHOW_STORAGE, UPDATE_SETTINGS, SET_MIXER_ONLINE, @@ -23,7 +21,6 @@ export enum PageType { export interface ISettings { /** UI state (non persistant) */ - showSnaps: boolean showSettings: boolean showPagesSetup: boolean showChanStrip: number @@ -45,7 +42,6 @@ export interface ISettings { remoteFaderMidiInputPort: string remoteFaderMidiOutputPort: string numberOfFaders: number - numberOfSnaps: number fadeTime: number // Default fade time for PGM ON - OFF voFadeTime: number // Default fade time for VO ON - OFF voLevel: number // Relative level of PGM in % @@ -84,7 +80,6 @@ export interface IMixerSettings { const defaultSettingsReducerState: Array = [ { - showSnaps: false, showSettings: false, showPagesSetup: false, showChanStrip: -1, @@ -115,7 +110,6 @@ const defaultSettingsReducerState: Array = [ remoteFaderMidiInputPort: '', remoteFaderMidiOutputPort: '', numberOfFaders: 8, - numberOfSnaps: DEFAULTS.NUMBER_OF_SNAPS, voLevel: 30, autoResetLevel: 5, automationMode: true, @@ -173,9 +167,6 @@ export const settings = ( case TOGGLE_SHOW_STORAGE: nextState[0].showStorage = !nextState[0].showStorage return nextState - case TOGGLE_SHOW_SNAPS: - nextState[0].showSnaps = !nextState[0].showSnaps - return nextState case SET_PAGE: nextState[0].currentPage = { type: action.pageType,