Stage & Crew features

client/package.json

@@ -41,6 +41,7 @@
     "lodash": "4.17.23",
     "loglevel": "1.9.2",
     "marked": "11.2.0",
+    "splitpanes": "^2.4.1",
     "vue": "2.7.14",
     "vue-multiselect": "2.1.9",
     "vue-native-websocket": "2.0.15",

client/src/App.vue

@@ -60,6 +60,17 @@
               >
                 Jump To Page
               </b-dropdown-item>
+              <b-dropdown-item-btn
+                :disabled="
+                  CURRENT_SHOW_SESSION == null ||
+                  !WEBSOCKET_HEALTHY ||
+                  stoppingSession ||
+                  startingSession
+                "
+                @click.stop.prevent="SET_STAGE_MANAGER_MODE(!STAGE_MANAGER_MODE)"
+              >
+                {{ STAGE_MANAGER_MODE ? 'Disable' : 'Enable' }} Stage Manager
+              </b-dropdown-item-btn>
             </b-nav-item-dropdown>
           </template>
           <b-nav-item
@@ -162,7 +173,7 @@
 </template>
 
 <script>
-import { mapGetters, mapActions } from 'vuex';
+import { mapGetters, mapActions, mapMutations } from 'vuex';
 import log from 'loglevel';
 import CreateUser from '@/vue_components/user/CreateUser.vue';
 import { makeURL } from '@/js/utils';
@@ -227,6 +238,7 @@ export default {
       'IS_SCRIPT_EDITOR',
       'IS_CUE_READER',
       'IS_CUE_EDITOR',
+      'STAGE_MANAGER_MODE',
     ]),
   },
   async created() {
@@ -285,6 +297,7 @@ export default {
       'CHECK_WEBSOCKET_STATE',
       'GET_USER_SETTINGS',
     ]),
+    ...mapMutations(['SET_STAGE_MANAGER_MODE']),
     isElectron,
     async switchServer() {
       // Clear the active connection and disconnect WebSocket

client/src/assets/styles/dark.scss

@@ -10,3 +10,11 @@
 :root {
   --body-background: #{$body-bg};
 }
+
+.splitpanes {
+  background: inherit !important;
+}
+
+.splitpanes__pane {
+  background: inherit !important;
+}

client/src/main.js

@@ -5,6 +5,7 @@ import { BootstrapVue, IconsPlugin } from 'bootstrap-vue';
 import Vuelidate from 'vuelidate';
 import ToastPlugin from 'vue-toast-notification';
 import Multiselect from 'vue-multiselect';
+import { Splitpanes, Pane } from 'splitpanes';
 
 import store from '@/store/store';
 import App from './App.vue';
@@ -15,12 +16,15 @@ import { getWebSocketURL, isElectron } from '@/js/platform';
 import './assets/styles/dark.scss';
 import 'vue-toast-notification/dist/theme-sugar.css';
 import 'vue-multiselect/dist/vue-multiselect.min.css';
+import 'splitpanes/dist/splitpanes.css';
 
 setupHttpInterceptor();
 
 Vue.use(BootstrapVue);
 Vue.use(IconsPlugin);
 Vue.component('MultiSelect', Multiselect);
+Vue.component('SplitPanes', Splitpanes);
+Vue.component('SplitPane', Pane);
 
 Vue.use(Vuex);
 Vue.use(Vuelidate);

client/src/router/index.js

@@ -46,6 +46,12 @@ const routes = [
         component: () => import('../views/show/config/ConfigCast.vue'),
         meta: { requiresAuth: true, requiresShowAccess: true },
       },
+      {
+        name: 'show-config-stage',
+        path: 'stage',
+        component: () => import('../views/show/config/ConfigStage.vue'),
+        meta: { requiresAuth: true, requiresShowAccess: true },
+      },
       {
         name: 'show-config-characters',
         path: 'characters',

client/src/store/modules/show.js

@@ -21,6 +21,7 @@ export default {
     noLeaderToast: null,
     scriptModes: [],
     sessionTags: [],
+    stageManagerMode: false,
   },
   mutations: {
     SET_CAST_LIST(state, castList) {
@@ -75,6 +76,9 @@ export default {
     SET_SESSION_TAGS(state, tags) {
       state.sessionTags = tags;
     },
+    SET_STAGE_MANAGER_MODE(state, enabled) {
+      state.stageManagerMode = enabled;
+    },
   },
   actions: {
     async GET_CAST_LIST(context) {
@@ -862,5 +866,8 @@ export default {
       }
       return null;
     },
+    STAGE_MANAGER_MODE(state) {
+      return state.stageManagerMode;
+    },
   },
 };