Add FAB Subtitler experiment. Fix issue where OBS settings couldn't b…

…e saved with an empty password. Fix duplicate navigation error when adding a channel.

app/api/routes/channels/index.js

@@ -14,6 +14,15 @@ const channelsList = [
     limit: 1,
     configPagePath: `${configPatePathPrefix}dropbox`,
   },
+  {
+    id: 'fab',
+    name: 'FAB Subtitler',
+    // iconPath: `${iconPrefix}/fab-subtitler.png`,
+    showNameWithIcon: true,
+    limit: 1,
+    configPagePath: `${configPatePathPrefix}fab`,
+    requiredExperiment: 'fab',
+  },
   {
     id: 'vmix',
     name: 'vMix',

app/components/channels/editors/fab.vue

@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <!-- <img
+      :src="channel.iconPath"
+      class="w-100 col-6 d-block mx-auto mt-2 mb-3"
+      alt="Zoom"
+    /> -->
+    <p class="lead text-center">
+      FAB Subtitler
+    </p>
+    <!-- <hr /> -->
+    <!-- <ol>
+      <li>
+        <a
+          href="https://support.zoom.us/hc/en-us/articles/207279736-closed-captioning#h_4cb4e874-d574-4e40-ab12-7d8fae1f71cc"
+          target="_blank"
+          >Enable closed captioning</a
+        >
+        in your Zoom account.
+      </li>
+      <li>
+        In a Zoom meeting or webinar that you are hosting, click the Closed
+        Caption button.
+      </li>
+      <li>
+        <a
+          href="https://support.zoom.us/hc/en-us/articles/207279736-closed-captioning#h_45f95867-9c71-4acd-888f-5a1475b4cd8e"
+          target="_blank"
+          >Choose the "Copy API token" option</a
+        >
+        and paste the token here.
+      </li>
+    </ol> -->
+    <div class="card card-body">
+      <div
+        v-if="savedChannel && savedChannel.error"
+        class="alert alert-warning small"
+      >
+        <strong class="text-danger">
+          <fa icon="exclamation-triangle" /> Error:
+        </strong>
+        {{ savedChannel.error }}
+      </div>
+      <label for="port" class="font-weight-bold">TCP Port</label>
+      <input
+        id="port"
+        name="port"
+        v-model="port"
+        autofocus
+        class="form-control"
+        type="url"
+        placeholder="TCP Port"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    channel: {
+      required: true,
+      type: Object,
+    },
+    savedChannel: {
+      required: false,
+      type: Object,
+    },
+  },
+  mounted() {
+    this.port = this.savedChannel?.parameters?.port || this.port;
+  },
+  data() {
+    return {
+      port: null,
+    };
+  },
+  methods: {
+    updateParameters() {
+      this.$emit('parametersUpdated', {
+        port: this.port,
+      });
+
+      if (this.port) {
+        this.$emit('formValid');
+      } else {
+        this.$emit('formInvalid');
+      }
+    },
+  },
+  watch: {
+    port: {
+      immediate: true,
+      handler() {
+        this.updateParameters();
+      },
+    },
+  },
+};
+</script>

app/components/channels/editors/obs.vue

@@ -110,7 +110,7 @@ export default {
     handleParameterChange() {
       this.$emit('parametersUpdated', {
         port: this.port,
-        password: this.password,
+        ...(this.password ? { password: this.password } : {}),
       });
 
       if (this.port) {

app/pages/captioner/settings/channels.vue

@@ -37,6 +37,7 @@
               />
               <span v-else class="d-flex align-items-center">
                 <fa
+                  v-if="channelInfo(addedChannel.type).iconName"
                   :icon="channelInfo(addedChannel.type).iconName"
                   size="lg"
                   class="mr-2"

app/pages/captioner/settings/channels/_channelId.vue

@@ -26,7 +26,7 @@
         @showRemoveButton="showRemoveButton = true"
         @hideRemoveButton="showRemoveButton = false"
       />
-      <template v-slot:modal-footer="{ ok, cancel }">
+      <template v-slot:modal-footer="{ cancel }">
         <b-button
           v-if="updatingExistingChannel && showRemoveButton"
           variant="outline-danger"
@@ -105,16 +105,14 @@ export default {
       // It seems to remain cached after the first import attempt so there isn't much
       // of a performance concern here.
       const component = await import(
-        `~/components/channels/editors/${
-          this.channelTypeToSave || savedChannel.type
-        }`
+        `~/components/channels/editors/${this.channelTypeToSave ||
+          savedChannel.type}`
       );
 
       const editorComponent = () => ({
         component: import(
-          `~/components/channels/editors/${
-            this.channelTypeToSave || savedChannel.type
-          }`
+          `~/components/channels/editors/${this.channelTypeToSave ||
+            savedChannel.type}`
         ),
       });
 
@@ -131,6 +129,7 @@ export default {
   async mounted() {
     this.channels = await this.$store.dispatch('channels/GET_CHANNELS');
 
+    await this.settingsLoaded();
     if (this.reachedLimitForChannelType && this.creatingNewChannel) {
       // Don't allow creating a channel
       this.$route.replace('/captioner/settings/channels');
@@ -160,8 +159,6 @@ export default {
         (channel) => channel.type === this.$route.query.type
       );
 
-      console.log('here', existingChannelsOfThisType, this.channel);
-
       return existingChannelsOfThisType.length >= this.channel?.limit;
     },
   },
@@ -234,13 +231,5 @@ export default {
       return this.channels.find((channel) => channel.id === id);
     },
   },
-  watch: {
-    reachedLimitForChannelType() {
-      if (this.reachedLimitForChannelType) {
-        console.log('reachedLimitForChannelType');
-        this.$router.replace('/captioner/settings/channels');
-      }
-    },
-  },
 };
 </script>

app/pages/captioner/settings/experiments/index.vue

@@ -288,6 +288,7 @@ export default {
     isValidExperiment: function() {
       return [
         'share',
+        'fab',
         'saveTranscriptWithTimingsToDropbox',
         'captionSpeedSetting',
         ...this.experiments.map((e) => e.id),

app/plugins/channels/fab.js

@@ -0,0 +1,55 @@
+export default async ({ $store, $axios, channelId, channelParameters }) => {
+  // Register
+  if (!channelParameters.port) {
+    $store.commit('UPDATE_CHANNEL_ERROR', {
+      channelId,
+      error: 'TCP port number is missing.',
+    });
+
+    // Turn off the channel because it's not configured correctly
+    $store.commit('TOGGLE_CHANNEL_ON_OR_OFF', { channelId, onOrOff: false });
+    // No need to unregister here because we haven't registered yet
+    return;
+  }
+  let fabUrl;
+  try {
+    fabUrl = new URL(`http://localhost`);
+    fabUrl.port = channelParameters.port;
+    // await fetch(fabUrl.toString());
+  } catch (e) {
+    console.error('error', e);
+    $store.commit('UPDATE_CHANNEL_ERROR', {
+      channelId,
+      error:
+        'Cannot connect to FAB Subtitler. Make sure the port number is correct and try again.',
+    });
+
+    // Turn off the channel because it's not configured correctly
+    $store.commit('TOGGLE_CHANNEL_ON_OR_OFF', { channelId, onOrOff: false });
+    // No need to unregister here because we haven't registered yet
+    return;
+  }
+
+  // Can successfully connect. Send text to the /speechinterface path
+  // from now on
+  fabUrl.pathname = '/speechinterface';
+
+  const sendToFab = async (text) => {
+    fabUrl.searchParams.set('text', text);
+    await fetch(fabUrl);
+  };
+
+  const unsubscribeFn = $store.subscribe((mutation) => {
+    if (
+      mutation.type === 'captioner/APPEND_TRANSCRIPT_STABILIZED' &&
+      mutation.payload.transcript
+    ) {
+      sendToFab(mutation.payload.transcript);
+    }
+  });
+
+  return () => {
+    // Unregister function
+    unsubscribeFn();
+  };
+};

app/plugins/channels/index.js

@@ -1,12 +1,13 @@
 import dropbox from './dropbox';
+import fab from './fab';
 import obs from './obs';
 import vmix from './vmix';
 import webhook from './webhook';
 import youtube from './youtube';
 import zoom from './zoom';
 
 // Available channels
-const channels = { dropbox, obs, vmix, webhook, youtube, zoom };
+const channels = { dropbox, fab, obs, vmix, webhook, youtube, zoom };
 
 // Every time a channel is registered, it returns a function
 // we need to run if we need to deregister it in the future