Fix issue where font wasn't loading in shared URLs. Fix issue where w…

…ord replacement regex caused Firestore save to fail.

app/components/toasts/Share.vue

@@ -7,28 +7,34 @@
       >Your previous link expired, but you can get a new one.</div>
       <p class="mb-2">Get a link to share live captions with others.</p>
       <form ref="shareLinkForm" action="javascript:void(0)" onsubmit="return false">
-        <div class="custom-control custom-checkbox">
-          <input
-            v-model="showBacklink"
-            class="custom-control-input"
-            name="showBacklink"
-            type="checkbox"
-            id="show-backlink"
-          >
-          <label
-            class="custom-control-label"
-            for="show-backlink"
-          >Show a link back to my stream or website</label>
+        <b-form-checkbox v-model="showBacklink" switch>Show a link back to my stream or website</b-form-checkbox>
+        <transition name="fade-in">
           <input
             ref="backlinkInput"
             required
             v-if="showBacklink"
             type="url"
-            class="form-control mt-2"
+            class="form-control mt-2 mb-4"
             v-model="backlink"
             placeholder="Stream or website URL"
           >
-        </div>
+        </transition>
+        <b-form-group label="Link Type" class="mt-3 mb-0">
+          <b-form-radio-group v-model="urlType" stacked name="plain-stacked">
+            <b-form-radio value="random">
+              Random link
+              <span class="small text-muted">(Expires in 48 hours)</span>
+            </b-form-radio>
+            <b-form-radio value="vanity" v-if="false">
+              My custom vanity link
+              <span class="small text-muted">(Never expires)</span>
+            </b-form-radio>
+          </b-form-radio-group>
+        </b-form-group>
+        <p
+          v-if="urlType === 'vanity'"
+          class="small text-danger mb-0 mt-2"
+        >Sorry, vanity links aren't available to everyone yet.</p>
       </form>
     </div>
     <div v-else style="width:500px; min-width:200px; max-width:100%">
@@ -64,6 +70,9 @@
             </b-btn>
           </div>
         </div>
+        <div
+          class="small mt-2"
+        >This link lets other people watch your captions on their device in real time.</div>
         <div class="small mt-2 mb-3">
           <!--Viewers will be able to set their own appearance settings.-->
         </div>
@@ -144,7 +153,11 @@
       class="alert bg-danger text-white mt-2 mb-0 p-2"
     >Something went wrong.</div>
     <template v-if="!hasValidShareLink" slot="footer">
-      <b-btn @click="getLink()" :disabled="gettingLink" variant="secondary">
+      <b-btn
+        @click="getLink()"
+        :disabled="gettingLink || urlType === 'vanity'"
+        :variant="urlType === 'vanity' ? 'light' : 'secondary'"
+      >
         Get Link
         <fa v-if="gettingLink" icon="spinner" spin/>
       </b-btn>
@@ -159,6 +172,10 @@ import bCollapse from 'bootstrap-vue/es/components/collapse/collapse';
 import bDropdown from 'bootstrap-vue/es/components/dropdown/dropdown';
 import bDropdownItem from 'bootstrap-vue/es/components/dropdown/dropdown-item';
 import bTooltip from 'bootstrap-vue/es/directives/tooltip/tooltip';
+import bFormCheckbox from 'bootstrap-vue/es/components/form-checkbox/form-checkbox';
+import bFormGroup from 'bootstrap-vue/es/components/form-group/form-group';
+import bFormRadio from 'bootstrap-vue/es/components/form-radio/form-radio';
+import bFormRadioGroup from 'bootstrap-vue/es/components/form-radio/form-radio-group';
 
 export default {
   components: {
@@ -167,6 +184,10 @@ export default {
     bCollapse,
     bDropdown,
     bDropdownItem,
+    bFormCheckbox,
+    bFormGroup,
+    bFormRadio,
+    bFormRadioGroup,
   },
   directives: {
     bTooltip,
@@ -331,6 +352,14 @@ export default {
     expireDate: function() {
       return this.$store.state.settings.share.expireDate;
     },
+    urlType: {
+      get() {
+        return this.$store.state.settings.share.urlType;
+      },
+      set(urlType) {
+        this.$store.commit('SET_SHARE_URL_TYPE', { urlType });
+      },
+    },
     hasValidShareLink() {
       return this.shareLink && this.roomId && this.expireDate;
     },

app/pages/s/_roomId/index.vue

@@ -268,6 +268,8 @@ export default {
           s,
         });
       }
+
+      this.$store.commit('SET_SETTINGS_LOADED', true);
     },
     increaseTextSize: function() {
       this.$store.commit('TEXT_SIZE_INCREASE');

app/socket.io/server.js

@@ -80,7 +80,7 @@ module.exports = {
           try {
             const appearanceJSON = JSON.stringify(json.appearance);
 
-            if (appearanceJSON.length <= 1000) {
+            if (appearanceJSON.length <= 1000 && socket._wc.room) {
               redisSharedClient.hsetAsync(
                 socket._wc.room.ownerRoomKey,
                 'appearance',

app/store/captioner.js

@@ -503,8 +503,18 @@ export const actions = {
     rootState,
     dispatch
   }) {
+    // Clone this so we're not editing the original copy in state
+    // because we don't want to put regex into the state that
+    // Firebase doesn't like.
+    let clonedWordReplacements = rootState.settings.wordReplacements.map((r) => {
+      return {
+        from: r.from,
+        to: r.to,
+      }
+    });
+
     state.wordReplacements = [
-      ...rootState.settings.wordReplacements,
+      ...clonedWordReplacements,
       ...internalWordReplacements,
 
       ...(rootState.settings.censor.on

app/store/mutations.js

@@ -159,6 +159,11 @@ export default {
   }) => {
     state.settings.share.expireDate = expireDate;
   },
+  SET_SHARE_URL_TYPE: (state, {
+    urlType
+  }) => {
+    state.settings.share.urlType = urlType;
+  },
 
   SET_CONNECT_ID: (state, {
     connectId

app/store/settingsState.js

@@ -5,6 +5,7 @@ export default () => {
       ownerKey: null,
       url: null,
       expireDate: null,
+      urlType: 'random', // or 'vanity'
     },
     roomMembershipId: null,
     roomLeaderToken: null,

docker-compose-dev.yml

@@ -1,12 +1,12 @@
 version: '3'
 services:
-  webcaptioner:
-    build: .
-    ports:
-      - '80:8080'
-    env_file:
-      - ./app/.env
-  # redis:
-  #   image: redis:4.0.11
+  # webcaptioner:
+  #   build: .
   #   ports:
-  #     - 6379:6379
+  #     - '80:8080'
+  #   env_file:
+  #     - ./app/.env
+  redis:
+    image: redis:4.0.11
+    ports:
+      - 6379:6379