Add experiments page

Author: curtgrimes

app/src/App.vue

@@ -65,6 +65,9 @@ export default {
         .bind(['ctrl+shift+,', 'command+shift+,'], function() {
           self.$store.commit('TEXT_SIZE_DECREASE');
         })
+        .bind(['e x p e r i m e n t s !'], function() {
+          self.$router.push('/captioner/settings/experiments');
+        })
 
 
         // Larger layout mode

app/src/app.js

@@ -12,13 +12,13 @@ import RavenVue from 'raven-js/plugins/vue';
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
-import { faFileAlt, faFileWord, faExclamationTriangle, faTimes, faMicrophone, faDesktop, faExternalLinkAlt, faSave, faTrashAlt, faCog, faCheckCircle, faSpinner, faChevronRight, faMinusCircle, faPlusCircle, faArrowLeft } from '@fortawesome/free-solid-svg-icons'
+import { faFileAlt, faFileWord, faExclamationTriangle, faTimes, faMicrophone, faDesktop, faExternalLinkAlt, faSave, faTrashAlt, faCog, faCheckCircle, faSpinner, faChevronRight, faMinusCircle, faPlusCircle, faArrowLeft, faFlask } from '@fortawesome/free-solid-svg-icons'
 
 import { faThumbsUp } from '@fortawesome/free-regular-svg-icons'
 
 import { faApple, faWindows, faAndroid, faChrome } from '@fortawesome/fontawesome-free-brands'
 
-library.add(faFileAlt, faThumbsUp, faFileWord, faExclamationTriangle, faTimes, faMicrophone, faDesktop, faApple, faWindows, faAndroid, faExternalLinkAlt, faSave, faTrashAlt, faCog, faCheckCircle, faSpinner, faChrome,faChevronRight, faMinusCircle, faPlusCircle, faArrowLeft)
+library.add(faFileAlt, faThumbsUp, faFileWord, faExclamationTriangle, faTimes, faMicrophone, faDesktop, faApple, faWindows, faAndroid, faExternalLinkAlt, faSave, faTrashAlt, faCog, faCheckCircle, faSpinner, faChrome,faChevronRight, faMinusCircle, faPlusCircle, faArrowLeft, faFlask)
 
 Vue.component('fa', {
   functional: true,
@@ -34,10 +34,10 @@ Vue.component('fa', {
   }
 })
 
-Raven
-    .config('REMOVED')
-    .addPlugin(RavenVue, Vue)
-    .install();
+// Raven
+//     .config('REMOVED')
+//     .addPlugin(RavenVue, Vue)
+//     .install();
 
 const dateFormatPlugin = {
   install () {

app/src/router/index.js

@@ -17,6 +17,7 @@ const SettingsWordReplacementsView = () => import('../views/settings/SettingsWor
 const SettingsCensorView = () => import('../views/settings/SettingsCensorView.vue')
 const SettingsControlsView = () => import('../views/settings/SettingsControlsView.vue')
 const SettingsVmixView = () => import('../views/settings/SettingsVmixView.vue')
+const SettingsExperimentsView = () => import('../views/settings/SettingsExperimentsView.vue')
 const SettingsRemoteDisplaysView = () => import('../views/settings/SettingsRemoteDisplaysView.vue')
 const CaptionerView = () => import('../views/CaptionerView.vue')
 const Transcript = () => import('../components/Transcript.vue')
@@ -98,6 +99,13 @@ export function createRouter () {
                   navbarTitle: 'Connect to vMix',
                 },
               },
+              {
+                path: 'experiments',
+                component: SettingsExperimentsView,
+                meta: {
+                  navbarTitle: 'Experiments',
+                },
+              },
             ]
           },
         ]

app/src/store/actions.js

@@ -73,6 +73,10 @@ export default {
 
     commit('SET_ROOM_MEMBERSHIP_ID', { roomMembershipId: get(settings, 'roomMembershipId') });
 
+    get(settings, 'exp').forEach((experiment) => {
+      commit('ADD_EXPERIMENT', { experiment });
+    });
+
     const wordReplacements = get(settings, 'wordReplacements');
     for (let i = 0; i < wordReplacements.length; i++) {
       commit('ADD_WORD_REPLACEMENT', { wordReplacement: wordReplacements[i] });

app/src/store/index.js

@@ -86,6 +86,7 @@ export function createStore () {
             webControllerAddress: '',
           },
         },
+        exp: [],
       },
       receivers: {
         chromecast: {

app/src/store/mutations.js

@@ -132,6 +132,17 @@ export default {
     state.detached = false;
   },
 
+  ADD_EXPERIMENT: (state, { experiment }) => {
+    if (!state.settings.exp.includes(experiment)) {
+      state.settings.exp.push(experiment);
+    }
+  },
+
+  REMOVE_EXPERIMENT: (state, { experiment }) => {
+    state.settings.exp = state.settings.exp.filter((e) => {
+      return e != experiment;
+    });
+  },
 
 
   SOCKET_ONOPEN (state, event)  {

app/src/views/CaptionerView.vue

@@ -47,7 +47,7 @@ export default {
         this.initRoom();
     }
 
-    this.$refs.welcomeModal.showModal();
+    // this.$refs.welcomeModal.showModal();
 
     if (this.vmixOn) {
       this.$store.dispatch('REFRESH_VMIX_SETUP_STATUS')

app/src/views/SettingsView.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="settings-view" :style="{height}" style="overflow:auto">
     <router-link to="/captioner" class="btn btn-light d-none d-sm-block position-fixed py-md-3 px-3 px-md-4" style="z-index:2;right:0;top:0" role="tab" active-class=""><fa icon="times" size="2x" /></router-link>
-
     <!-- xs navbar -->
     <nav class="d-sm-none navbar sticky-top navbar-light bg-primary pr-2" :class="{'pl-2': showBackButton}">
       <div class="mr-auto">
@@ -26,8 +25,9 @@
           <b-list-group-item to="/captioner/settings/appearance">Appearance</b-list-group-item>
           <b-list-group-item to="/captioner/settings/censor">Censor</b-list-group-item>
           <b-list-group-item to="/captioner/settings/controls">Controls</b-list-group-item>
+          <b-list-group-item v-show="experiments['experiments']" to="/captioner/settings/experiments">Experiments</b-list-group-item>
           <b-list-group-item to="/captioner/settings/language">Language</b-list-group-item>
-          <b-list-group-item to="/captioner/settings/remote-displays">Remote Displays</b-list-group-item>
+          <b-list-group-item v-show="experiments['remoteDisplays']" to="/captioner/settings/remote-displays">Remote Displays</b-list-group-item>
           <b-list-group-item to="/captioner/settings/word-replacements">Word Replacements</b-list-group-item>
           <!-- <b-list-group-item to="/captioner/settings/title-cards">Title Cards</b-list-group-item> -->
         </b-list-group>
@@ -46,14 +46,15 @@
               <nav>
                 <b-nav vertical pills>
                   <b-nav-item to="/captioner/settings/about">About</b-nav-item>
+                  <b-nav-item class="nav-item-rainbow" v-if="experiments.includes('science')" to="/captioner/settings/experiments"><fa icon="flask" /> Experiments</b-nav-item>
                 </b-nav>
                 <hr/>
                 <b-nav vertical pills>
                   <b-nav-item to="/captioner/settings/appearance">Appearance</b-nav-item>
                   <b-nav-item to="/captioner/settings/censor">Censor</b-nav-item>
                   <b-nav-item to="/captioner/settings/controls">Controls</b-nav-item>
                   <b-nav-item to="/captioner/settings/language">Language</b-nav-item>
-                  <b-nav-item to="/captioner/settings/remote-displays">Remote Displays</b-nav-item>
+                  <b-nav-item v-if="experiments.includes('remoteDisplays')" to="/captioner/settings/remote-displays">Remote Displays</b-nav-item>
                   <b-nav-item to="/captioner/settings/word-replacements">Word Replacements</b-nav-item>
                   <!-- <b-nav-item to="/captioner/settings/title-cards">Title Cards</b-nav-item> -->
                 </b-nav>
@@ -80,6 +81,21 @@
   </div>
 </template>
 
+<style scoped>
+  .nav-item-rainbow .nav-link.active {
+    animation: rainbow 10s infinite alternate;
+  }
+  @keyframes rainbow {
+    0% {background-color: hsl(0, 50%, 50%);}
+    20% {background-color: hsl(50, 50%, 50%);}
+    40% {background-color: hsl(100, 50%, 50%);}
+    60% {background-color: hsl(150, 50%, 50%);}
+    80% {background-color: hsl(200, 50%, 50%);}
+    100% {background-color: hsl(255, 50%, 50%);}
+  }
+</style>
+
+
 <script>
 import Combokeys from 'combokeys'
 import appHeightAdjuster from '../util/appHeightAdjuster'
@@ -113,12 +129,14 @@ export default {
     this.$watch('largerLayout', function() {
       this.height = appHeightAdjuster();
     });
-
   },
   beforeDestroy: function() {
     this.escShortcut.detach();
   },
   computed: {
+    experiments: function() {
+      return this.$store.state.settings.exp;
+    },
     showBackButton: function() {
       return this.$route.path !== '/captioner/settings';
     },

app/src/views/settings/SettingsExperimentsView.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="settings-experiments-view">
+    <p>Be sure to help out and give me feedback about experiments! Email me at <a href="mailto:github@curtgrimes.com">github@curtgrimes.com</a> or <a href="https://m.me/webcaptioner">message me on Facebook</a>.</p>
+    <b-modal ref="invalidExperiment" class="text-center" hide-header @shown="focusInvalidExperimentModalOkButton()">
+      <div style="font-size:7rem" class="p-0">&#129300;</div>
+      <div slot="modal-footer">
+        <b-btn class="float-right" variant="secondary" ref="invalidExperimentModalOkButton" @click="hideInvalidExperimentModal()">Ok</b-btn>
+      </div>
+    </b-modal>
+    <b-input-group size="lg" class="mb-4">
+      <b-form-input @keydown.enter.native="addExperiment" v-model="experimentName" autofocus placeholder="Experiment Name"></b-form-input>
+      <b-input-group-append>
+        <b-btn @click="addExperiment()">Add</b-btn>
+      </b-input-group-append>
+    </b-input-group>
+    <div v-if="experiments.length">
+      <h4>Added Experiments</h4>
+      <b-list-group class="mb-4">
+        <b-list-group-item v-for="experiment in experiments" :key="experiment">
+          <div class="row">
+            <div class="col-8">
+              <p class="mb-0"><strong>{{experiment}}</strong></p>
+              <p class="small mb-0">{{getDescription(experiment)}}</p>
+            </div>
+            <div class="col-4 pr-2">
+              <b-btn class="float-right" variant="danger" size="sm" @click="removeExperiment(experiment)">Remove</b-btn>
+            </div>
+          </div>
+        </b-list-group-item>
+      </b-list-group>
+    </div>
+    <div class="embed-responsive embed-responsive-16by9">
+      <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/Y2VNxmn0lNA?rel=0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'settings-experiments-view',
+  data: function() {
+    return {
+      experimentName: '',
+    };
+  },
+  computed: {
+    experiments: function() {
+      return this.$store.state.settings.exp;
+    },
+  },
+  methods: {
+    hideInvalidExperimentModal: function() {
+      this.$refs.invalidExperiment.hide();
+    },
+    getDescription: function(experiment) {
+      switch(experiment) {
+          case 'science':
+            return 'Add a persistent "Experiments" menu item to settings for easy access.';
+          case 'remoteDisplays':
+            return 'Send captions to other phones or tablets.';
+          default:
+            return '';
+      }
+    },
+    isValidExperiment: function() {
+      return ['remoteDisplays','science'].includes(this.experimentName);
+    },
+    addExperiment: function() {
+      if (this.isValidExperiment()) {
+        this.$store.commit('ADD_EXPERIMENT', {experiment: this.experimentName});
+
+        this.experimentName = '';
+      }
+      else {
+        this.$refs.invalidExperiment.show();
+      }
+    },
+    focusInvalidExperimentModalOkButton: function() {
+      this.$refs.invalidExperimentModalOkButton.focus();
+    },
+    removeExperiment: function(experimentName) {
+      this.$store.commit('REMOVE_EXPERIMENT', {experiment: experimentName});
+    },
+  },
+}
+</script>