Partial vMix implementation

curtgrimes · curtgrimes · commit 7056ef464fa7 · 2018-05-06T01:16:59.000-05:00
diff --git a/app/src/app.js b/app/src/app.js
@@ -10,10 +10,10 @@ import dateFormat from 'date-fns/format'
 import Raven from 'raven-js';
 import RavenVue from 'raven-js/plugins/vue';
 
-Raven
-    .config('REMOVED')
-    .addPlugin(RavenVue, Vue)
-    .install();
+// Raven
+//     .config('REMOVED')
+//     .addPlugin(RavenVue, Vue)
+//     .install();
 
 const dateFormatPlugin = {
   install () {
diff --git a/app/src/router/index.js b/app/src/router/index.js
@@ -95,7 +95,7 @@ export function createRouter () {
                 path: 'vmix',
                 component: SettingsVmixView,
                 meta: {
-                  navbarTitle: 'vMix',
+                  navbarTitle: 'Connect to vMix',
                 },
               },
             ]
diff --git a/app/src/store/actions.js b/app/src/store/actions.js
@@ -9,6 +9,7 @@ import supportedLocales from '../data/locales'
 import RemoteEventBus from '../components/RemoteEventBus'
 import ChromelessWindowManager from '../components/ChromelessWindowManager'
 import get from 'lodash.get'
+import vmixSetup from '../util/vmixSetup'
 
 export default {
   SET_LOCALE_FROM_USER_DEFAULT: ({ commit, dispatch, state }) => {
@@ -72,6 +73,25 @@ export default {
     }
   },
 
+  REFRESH_VMIX_SETUP_STATUS: ({commit, dispatch, state}) => {
+    let {
+      checkIfExtensionInstalled,
+      testWebControllerConnectivity,
+    } = vmixSetup;
+    
+    checkIfExtensionInstalled()
+      .then(function(installed) {
+        commit('SET_VMIX_CHROME_EXTENSION_INSTALLED', {installed});
+      });
+    testWebControllerConnectivity(
+      (state.integrations.vmix.webControllerAddress || '').trim().replace(/\/$/, "") + '/API'
+    )
+      .then(function(connected) {
+        console.log("HElLO");
+        console.log(connected);
+        commit('SET_VMIX_WEB_CONTROLLER_CONNECTED', {connected});
+      })
+  },
 
 
   // ensure data for rendering given list type
diff --git a/app/src/store/index.js b/app/src/store/index.js
@@ -96,6 +96,13 @@ export function createStore () {
       socket: {
         isConnected: false,
       },
+      integrations: {
+        vmix: {
+          chromeExtensionInstalled: null,
+          webControllerAddress: '',
+          webControllerConnected: null,
+        },
+      },
     },
     actions,
     mutations,
diff --git a/app/src/store/mutations.js b/app/src/store/mutations.js
@@ -162,6 +162,18 @@ export default {
   },
 
 
+  SET_VMIX_CHROME_EXTENSION_INSTALLED: (state, { installed }) => {
+    state.integrations.vmix.chromeExtensionInstalled = Boolean(installed);
+  },
+  SET_VMIX_WEB_CONTROLLER_ADDRESS: (state, { webControllerAddress }) => {
+    state.integrations.vmix.webControllerAddress = webControllerAddress;
+  },
+  SET_VMIX_WEB_CONTROLLER_CONNECTED: (state, { connected }) => {
+    state.integrations.vmix.webControllerConnected = Boolean(connected);
+  },
+  RESET_WEB_CONTROLLER_CONNECTED_STATUS: (state) => {
+    state.integrations.vmix.webControllerConnected = null;
+  },
 
 
   SET_ACTIVE_TYPE: (state, { type }) => {
diff --git a/app/src/util/vmixSetup.js b/app/src/util/vmixSetup.js
@@ -0,0 +1,30 @@
+const chromeExtensionId = 'fckappdcgnijafmmjkcmicdidflhelfe';
+
+const checkIfExtensionInstalled = function () {
+    return new Promise(function(resolve, reject) {
+        chrome.runtime.sendMessage(
+            chromeExtensionId,
+            {
+                getExtensionVersion: true,
+            },
+            function(version) {
+                resolve(Boolean(version));
+            }
+        );
+    });
+}
+
+const testWebControllerConnectivity = function (path) {
+   return new Promise(function(resolve, reject) {
+        chrome.runtime.sendMessage(
+            chromeExtensionId,
+            {path},
+            function(response) {
+                resolve(response && response.success && response.code && response.code == 200);
+                    // reject('Cannot connect to vMix. Make sure Web Controller is enabled in vMix and that you\'ve copied over the website address correctly.');
+            }
+        );
+    })
+};
+
+export default {checkIfExtensionInstalled, testWebControllerConnectivity}
diff --git a/app/src/views/SettingsView.vue b/app/src/views/SettingsView.vue
@@ -132,14 +132,17 @@ export default {
 }
 </script>
 
-<style>
+
+
+
+<style scoped>
   h3 {
     text-transform:uppercase;
     font-size:1.3rem;
     margin:1rem 0;
   }
 
-  .settings-view .nav-pills {
+  .nav-pills {
     font-size:0.92rem;
   }
 </style>
diff --git a/app/src/views/settings/SettingsVmixView.vue b/app/src/views/settings/SettingsVmixView.vue
@@ -1,80 +1,146 @@
 <template>
   <div class="settings-vmix-view">
-    <p><a href="https://vmix.com" target="_blank">vMix</a> is a popular software video mixer and switcher. You can send text directly to vMix and display it in a title input. You can then use vMix's font and color controls to style captioned text. <a href="/help/integrations/vmix/">Visit the Help Center</a> for more information.</p>
-            <!--
-            <button id="sendToVmixSettingToggle" type="button" class="btn btn-secondary btn-block" disabled autocomplete="off">
-              <i class="fa fa-times mr-2" aira-hidden="true"></i>Send to vMix is <span id="send-to-vmix-status-text">off</span>
-            </button>
-          -->
-    <hr/>
-    <div class="vmixStep" data-vmix-step="1" data-error-state="false">
-      <h3>
-        <span class="badge badge-danger pt-2 mr-2" data-toggle="tooltip" data-placement="top" title="Not complete"><i class="fa fa-exclamation-triangle"></i></span>
-        <span class="badge badge-success pt-2 mr-2" hidden><i class="fa fa-check"></i> Done</span>
-        <a href="#vmixStep1" data-toggle="collapse" aria-expanded="false" aria-controls="vmixStep1">Step 1: Install the Chrome Extension</a>
-      </h3>
-      <div id="vmixStep1" class="collapse show ml-4">
-        <p class="mb-2">
-          The Web Captioner Connector extension enables your browser to send commands to vMix running on your computer or somewhere else on the network.
-        </p>
-        <button id="addExtensionToChromeButton" type="button" class="btn btn-info"><i class="fa fa-chrome mr-2"></i>Add to Chrome</button>
-        <button id="extensionIsAddedToChromeButton" type="button" class="btn btn-success" hidden disabled><i class="fa fa-check mr-2"></i>Added to Chrome</button>
-      </div>
-    </div>
-    <hr/>
-    <div class="vmixStep" data-vmix-step="2" data-error-state="false">
-      <h3>
-          <span class="badge badge-danger pt-2 mr-2" data-toggle="tooltip" data-placement="top" title="Not complete"><i class="fa fa-exclamation-triangle"></i></span>
-          <span class="badge badge-success pt-2 mr-2" hidden><i class="fa fa-check"></i> Done</span>
-          <a href="#vmixStep2" data-toggle="collapse" aria-expanded="false" aria-controls="vmixStep2">Step 2: Enable vMix web controller</a>
-      </h3>
-      <div id="vmixStep2" class="collapse show">
-        <ol class="ml-0 mb-2">
-            <li>In vMix, go to <strong>Settings > Web Controller</strong>.</li>
-            <li>Check the box to enable the <a href="http://www.vmix.com/knowledgebase/article.aspx/69/how-to-control-vmix-from-a-web-browser-using-vmix-web-controller" target="_blank">web controller</a>. Specify a port number or accept the default.</li>
-            <li>Copy and paste the website address that appears in vMix here:</li>
-        </ol>
-        <div class="form-group ml-4 mb-2">
-            <input type="url" id="vmixWebControllerAddress" class="form-control" placeholder="vMix Web Controller Address" required="true" />
-            <p class="mb-2"><small class="form-text text-muted">Example: http://192.168.1.1:8080</small></p>
-        </div>
-        <p class="ml-4">
-          <button class="btn btn-info" id="testConnectionButton"><i class="fa fa-check mr-2" hidden aria-hidden="true"></i>Test Connection</button>
-          <i id="testConnectionSpinner" hidden class="fa fa-circle-o-notch fa-spin fa-fw"></i>
-          <strong id="connectionSuccessMessage" hidden class="text-success ml-2">Success!</strong>
-          <p id="couldNotConnectMessage" hidden class="text-danger ml-4"><strong>Could not connect. Check to make sure that vMix is running, web controller in vMix is enabled, and that the web controller address above is correct.</strong></p>
-        </p>
-      </div>
-    </div>
-    <hr/>
-    <div class="vmixStep" data-vmix-step="3" data-error-state="false">
-      <h3>
-        <span class="badge badge-danger pt-2 mr-2" data-toggle="tooltip" data-placement="top" title="Not complete"><i class="fa fa-exclamation-triangle"></i></span>
-        <span class="badge badge-success pt-2 mr-2" hidden><i class="fa fa-check"></i> Done</span>
-        <a href="#vmixStep3" data-toggle="collapse" aria-expanded="false" aria-controls="vmixStep3">Step 3: Import the Web Captioner title template into vMix</a>
-      </h3>
-      <div id="vmixStep3" class="collapse show">
-        <ol class="ml-0 mb-2">
-          <li>Download the Web Captioner vMix title template:<br/> <a href="/web-captioner-title.xaml" class="btn btn-secondary mt-1 mb-2">Web Captioner vMix Title Template <i class="fa fa-external-link ml-1" aria-hidden="true"></i></a></li>
-          <li>In vMix, go to <strong>Add Input > Title/XAML</strong>. In the upper right of the Input Select window, click <strong>Browse...</strong> and open the Web Captioner title template.</li>
-          <li>The title will appear in the <strong>Recent</strong> tab. Double-click it.</li>
-          <li>In the Title Editor that appears, optionally customize font and text size. Close it when you are finished.</li>
-          <li>Test your imported title:</li>
-        </ol>
-        <div class="ml-4">
-          <button class="btn btn-info" id="testVmixTitleButton"><i class="fa fa-check mr-2" hidden aria-hidden="true"></i>Send Test Message to vMix</button>
-          <i id="testVmixTitleSpinner" hidden class="fa fa-circle-o-notch fa-spin fa-fw"></i>
-          <p id="testVmixTitleSuccessMessage" style="font-weight:bold" hidden class="text-success ml-4">Success!</p>
-          <p id="testVmixTitleErrorMessage" style="font-weight:bold" hidden class="text-danger ml-4">Error</p>
-        </div>
-      </div>
-    </div>
+    <p><a href="https://vmix.com" target="_blank">vMix</a> is a popular software video mixer and switcher. You can send text directly to vMix and display it in a title input. You can then use vMix's font and color controls to style captioned text. <a href="/help/integrations/vmix/">Visit the Help Center</a> to learn more.</p>
+    <b-card no-body>
+      <b-tabs small pills card class="nav-fill" v-model="vmixStepsTabIndex">
+        <b-tab active>
+          <template slot="title">
+            <div class="text-md-left">
+              <i class="fa fa-check" v-if="chromeExtensionInstalled" aria-hidden="true"></i> Step 1
+              <div class="small d-none d-md-block"><span class="d-none d-xl-inline">Install </span>Chrome Extension</div>
+            </div>
+          </template>
+          <h4 class="mt-0">Install the Chrome Extension</h4>
+          <p class="mb-2">The Web Captioner Connector extension for Google Chrome lets Web Captioner connect to vMix.</p>
+          <div class="mt-3 mb-4">
+            <b-button v-if="!chromeExtensionInstalled" @click="initChromeExtensionInstall" variant="outline-info"><i class="fa fa-chrome mr-2"></i>Add to Chrome</b-button>
+            <b-button v-else variant="outline-info" disabled><i class="fa fa-check mr-2"></i>Extension Installed</b-button>
+          </div>
+          <hr class="my-3" />
+          <div class="text-right">
+            <b-button @click="vmixStepsTabIndex = 1" size="sm" :variant="chromeExtensionInstalled ? 'secondary' : 'default'" :disabled="!chromeExtensionInstalled">Next <i class="fa fa-chevron-right" aria-hidden="true"></i></b-button>
+          </div>
+        </b-tab>
+        <b-tab :disabled="!chromeExtensionInstalled">
+          <template slot="title">
+            <div class="text-md-left" id="vmixStep2Tab">
+              Step 2
+              <div class="small d-none d-md-block">vMix Web Controller</div>
+            </div>
+            <b-tooltip v-if="!chromeExtensionInstalled" target="vmixStep2Tab">
+              Complete step 1 first
+            </b-tooltip>
+          </template>
+          <h4 class="mt-0">Enable the vMix Web Controller</h4>
+          <p>In vMix, go to <strong>Settings > Web Controller</strong>. Check the box to enable the <a href="http://www.vmix.com/knowledgebase/article.aspx/69/how-to-control-vmix-from-a-web-browser-using-vmix-web-controller" target="_blank">web controller</a>. Specify a port number or accept the default.</p>
+          <p>Provide the address that appears in vMix:</p>
+          <b-input-group :class="{'append-embedded-in-input': webControllerConnected}">
+            <input @keydown="resetWebControllerConnectedStatus()" v-model="webControllerAddress" type="url" class="form-control" placeholder="vMix Web Controller Address" required="true" />
+            <template slot="append" v-if="webControllerConnected">
+              <div class="input-group-text text-success">
+                <i class="fa fa-check fa-fw pr-3" style="position:relative;top:-1px" aria-hidden="true"></i> Connected
+              </div>
+            </template>
+          </b-input-group>
+          <p class="mt-2"><small class="form-text text-muted">Example: http://192.168.1.1:8080</small></p>
+          <b-alert :show="showConnectionFailureMessage" dismissible variant="danger">Cannot connect to vMix. Make sure Web Controller is enabled in vMix and that you've copied over the website address correctly. It should look something like this: http://192.168.1.1:8080</b-alert>
+          <hr class="my-3" />
+          <div class="text-right">
+            <b-button @click="refreshVmixSetupStatus()" size="sm" :variant="webControllerAddress == '' ? 'default' : 'secondary'" :disabled="webControllerAddress == ''">Next <i class="fa fa-chevron-right" aria-hidden="true"></i></b-button>
+          </div>
+        </b-tab>
+        <b-tab>
+          <template slot="title">
+            <div class="text-md-left">
+              Step 3
+              <div class="small d-none d-md-block"><span class="d-none d-xl-inline">Import </span>Title Template</div>
+            </div>
+          </template>
+          <h4 class="mt-0">Import the Web Captioner Title Template into vMix</h4>
+          <ol class="ml-0 mb-2">
+            <li>Download the Web Captioner vMix title template:<br/> <a href="/web-captioner-title.xaml" class="btn btn-outline-info mt-1 mb-2">Web Captioner vMix Title Template <i class="fa fa-external-link ml-1" aria-hidden="true"></i></a></li>
+            <li>In vMix, go to <strong>Add Input > Title/XAML</strong>. In the upper right of the Input Select window, click <strong>Browse...</strong> and open the Web Captioner title template.</li>
+            <li>The title will appear in the <strong>Recent</strong> tab. Double-click it.</li>
+            <li>In the Title Editor that appears, optionally customize font and text size. Close it when you are finished.</li>
+          </ol>
+          <hr class="my-3" />
+          <div class="text-right">
+            <b-button size="sm" :variant="webControllerAddress == '' ? 'default' : 'secondary'" :disabled="webControllerAddress == ''">Test and Finish Setup</b-button>
+          </div>
+        </b-tab>
+      </b-tabs>
+    </b-card>
   </div>
 </template>
 
+<style>
+  .nav-link.disabled {
+    color:#aaa!important;
+    cursor:default;
+  }
+  .nav-link.disabled:hover {
+    background:#eee;
+  }
+
+  .input-group.append-embedded-in-input input {
+    border-right: 0px solid transparent;
+  }
+
+  .input-group.append-embedded-in-input .input-group-append .input-group-text {
+    background-color: transparent;
+    border-left: 0px solid transparent;
+  }
+
+</style>
+
+
 <script>
 
 export default {
   name: 'settings-vmix-view',
+  data: function() {
+    return {
+      vmixStepsTabIndex: 0,
+    };
+  },
+  mounted: function() {
+    this.refreshVmixSetupStatus();
+  },
+  methods: {
+    initChromeExtensionInstall: function () {
+      let self = this;
+      chrome.webstore.install(null, function() {
+        // Successful
+        self.refreshVmixSetupStatus();
+      }, function() {
+        // Unsuccessful
+      });
+    },
+    refreshVmixSetupStatus: function () {
+      this.$store.dispatch('REFRESH_VMIX_SETUP_STATUS');
+    },
+    resetWebControllerConnectedStatus: function () {
+      this.$store.commit('RESET_WEB_CONTROLLER_CONNECTED_STATUS');
+    },
+  },
+  computed: {
+    chromeExtensionInstalled: function() {
+      return this.$store.state.integrations.vmix.chromeExtensionInstalled;
+    },
+    webControllerConnected: function() {
+      return this.$store.state.integrations.vmix.webControllerConnected;
+    },
+    webControllerAddress: {
+      get () {
+        return this.$store.state.integrations.vmix.webControllerAddress;
+      },
+      set (webControllerAddress) {
+        this.$store.commit('SET_VMIX_WEB_CONTROLLER_ADDRESS', {webControllerAddress});
+      }
+    },
+    showConnectionFailureMessage: function () {
+      return this.webControllerAddress != '' && this.webControllerConnected === false;
+    },
+  },
 }
 </script>

Original file line number	Diff line number	Diff line change
`@@ -95,7 +95,7 @@ export function createRouter () {`
`95`	`95`	`path: 'vmix',`
`96`	`96`	`component: SettingsVmixView,`
`97`	`97`	`meta: {`
`98`		`- navbarTitle: 'vMix',`
	`98`	`+ navbarTitle: 'Connect to vMix',`
`99`	`99`	`},`
`100`	`100`	`},`
`101`	`101`	`]`
Original file line number	Diff line number	Diff line change
`@@ -132,14 +132,17 @@ export default {`
`132`	`132`	`}`
`133`	`133`	`</script>`
`134`	`134`
`135`		`-<style>`
	`135`	`+`
	`136`	`+`
	`137`	`+`
	`138`	`+<style scoped>`
`136`	`139`	`h3 {`
`137`	`140`	`text-transform:uppercase;`
`138`	`141`	`font-size:1.3rem;`
`139`	`142`	`margin:1rem 0;`
`140`	`143`	`}`
`141`	`144`
`142`		`- .settings-view .nav-pills {`
	`145`	`+ .nav-pills {`
`143`	`146`	`font-size:0.92rem;`
`144`	`147`	`}`
`145`	`148`	`</style>`