Implement stage manager pane in show live view

Author: Tim020

client/package-lock.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/package.json

@@ -60,6 +60,11 @@
               >
                 Jump To Page
               </b-dropdown-item>
+              <b-dropdown-item-btn
+                @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 +167,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 +232,7 @@ export default {
       'IS_SCRIPT_EDITOR',
       'IS_CUE_READER',
       'IS_CUE_EDITOR',
+      'STAGE_MANAGER_MODE',
     ]),
   },
   async created() {
@@ -285,6 +291,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/App.vue

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

client/src/assets/styles/dark.scss

@@ -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/main.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;
+    },
   },
 };

client/src/store/modules/show.js

@@ -210,7 +210,7 @@ export default new Vuex.Store({
     createPersistedState({
       storage: getStorageAdapter('session'),
       key: 'digiscript',
-      paths: ['websocket.internalUUID'],
+      paths: ['websocket.internalUUID', 'show.stageManagerMode'],
     }),
   ],
 });