feat: Mic tally view added + better routing

client/assets/css/MicTally.css

@@ -0,0 +1,56 @@
+body.v-mic-tally {
+    background: transparent;
+}
+
+.mic-tally-view {
+    display: flex;
+    flex-direction: column;
+    color: white;
+    width: 100%;
+    height: 100%;
+}
+
+.mic-tally-list {
+    display: flex;
+    list-style: none;
+    align-items: stretch;
+    flex-wrap: wrap;
+    padding: 0;
+    margin: 0;
+}
+.c-mic-tally {
+    margin: 8px;
+    flex: 1 1 80px;
+    min-width: 80px;
+    text-align: center;
+}
+.c-mic-tally:not(:first-child) {
+    margin-left: 8px;
+}
+.c-mic-tally__status {
+    box-sizing: border-box;
+    display: block;
+    font-weight: bold;
+    padding: 20px 10px;
+    border-radius: 100%;
+    margin: 0 auto;
+    background-color: #444444;
+    border: 2px solid #888888;
+    width: 60px;
+    height: 60px;
+}
+
+.c-mic-tally__status.on {
+    color: red;
+    background-color: #ffaaaa;
+    border-color: red;
+    font-size: 1em;
+}
+
+.c-mic-tally__label {
+    display: block;
+    color: white;
+    font-weight: bold;
+    margin-top: 6px;
+    font-size: 0.9em;
+}

client/components/App.tsx

@@ -8,9 +8,11 @@ import Channels from './Channels'
 import Settings from './Settings'
 import Storage from './RoutingStorage'
 import MiniChannels from './MiniChannels'
+import MicTally from './MicTally'
 import { withTranslation } from 'react-i18next'
 import PagesSettings from './PagesSettings'
 import LabelSettings from './Labels'
+import { url } from 'inspector'
 
 export interface IAppProps {
     store: IStore
@@ -107,18 +109,22 @@ class App extends React.Component<IAppProps> {
     }
 
     render() {
+        const urlParams = new URLSearchParams(window.location.search)
+        const viewId = urlParams.get('view')
+        const isMiniMonitor = urlParams.get('minimonitor') === '1'
         return (
             <div>
                 {!this.props.store.settings[0].serverOnline && (
                     <div className="server-offline">
                         {this.props.t('TRYING TO CONNECT TO SISYFOS SERVER')}
                     </div>
                 )}
-                {!window.location.search.includes('minimonitor=1') && (
-                    <Channels />
-                )}
-                {window.location.search.includes('minimonitor=1') && (
+                { (viewId === 'minimonitor' || isMiniMonitor) ? (
                     <MiniChannels />
+                ) : (viewId === 'mic-tally') ? (
+                    <MicTally />
+                ) : (
+                    <Channels />
                 )}
                 {this.props.store.settings[0].showLabelSettings && <LabelSettings />}
                 {this.props.store.settings[0].showPagesSetup && <PagesSettings />}

client/components/MicTally.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react'
+import { connect } from 'react-redux'
+
+import '../assets/css/MicTally.css'
+import { Store } from 'redux'
+import { IChannels } from '../../server/reducers/channelsReducer'
+import { IFader } from '../../server/reducers/fadersReducer'
+import { ISettings } from '../../server/reducers/settingsReducer'
+import { getFaderLabel } from '../utils/labels'
+
+
+interface IChannelsInjectProps {
+    channels: IChannels
+    faders: IFader[]
+    settings: ISettings
+}
+
+class Channels extends React.Component<IChannelsInjectProps & Store> {
+    constructor(props: any) {
+        super(props)
+        this.props.settings.showMonitorOptions = -1
+    }
+
+    componentWillMount() {
+        document.body.classList.add('v-mic-tally')
+    }
+
+    componentWillUnmount() {
+        document.body.classList.remove('v-mic-tally')
+    }
+
+    render() {
+        return (
+            <div className="mic-tally-view">
+                <ul className="mic-tally-list">
+                { this.props.faders.map((fader) => {
+                    const isOn = fader.pgmOn || fader.voOn
+                    return (
+                        <li className="c-mic-tally">
+                            <span className={`c-mic-tally__status${isOn ? ' on': ''} `}>{ isOn ? 'ON' : 'OFF' }</span>
+                            <span className={`c-mic-tally__label`}>{getFaderLabel(fader.monitor - 1)}</span>
+                        </li>
+                    )
+                })}
+                </ul>
+            </div>
+        )
+    }
+}
+
+const mapStateToProps = (state: any): IChannelsInjectProps => {
+    return {
+        channels: state.channels[0].chMixerConnection[0].channel,
+        faders: state.faders[0].fader,
+        settings: state.settings[0],
+    }
+}
+
+export default connect<IChannelsInjectProps, any, any>(mapStateToProps)(
+    Channels
+)