Add ability to scroll up during live transcription and without being snapped back to the bottom.

- Added indicator for previewing the live transcript when not scrolled to the bottom.
- Fix issue where font variants (weight and italics) do not take effect.
- Improve transcript scrolling performance on Chromecast

Author: curtgrimes

app/assets/scss/app.scss

@@ -206,6 +206,15 @@ input[type='color'] {
   border-left: none;
 }
 
+.popover.wider {
+  width: 500px !important;
+  max-width: 95vw;
+
+  .popover-body {
+    padding: 0.25rem;
+  }
+}
+
 .navbar-expand .dropup .dropdown-menu {
   bottom: initial;
 }

app/components/FontSelector.vue

@@ -6,11 +6,12 @@
         class="bg-white border fontPreviewButton"
         id="font-selector-popover-start"
         :disabled="!selectedFont"
-        :style="{fontFamily: selectedFontFamily, fontWeight, fontStyle}"
+        :style="{ fontFamily: selectedFontFamily, fontWeight, fontStyle }"
         style="text-transform: none"
         v-b-tooltip.hover
         :title="selectedFontFamily"
-      >{{selectedFontFamily}}</b-button>
+        >{{ selectedFontFamily }}</b-button
+      >
       <b-dropdown
         @show="showFontSelectorPopover = false"
         :disabled="!selectedFont"
@@ -20,14 +21,19 @@
         variant="dark"
       >
         <b-dropdown-item
-          v-for="(variant, index) in (selectedFont ? selectedFont.variants : [])"
+          v-for="(variant, index) in selectedFont ? selectedFont.variants : []"
           :key="selectedFont.family + variant + index"
           @click="selectedFontVariant = variant"
           style="text-transform: capitalize"
-        >{{variant}}</b-dropdown-item>
+          >{{ variant }}</b-dropdown-item
+        >
       </b-dropdown>
     </b-button-group>
-    <font-stylesheet v-if="selectedFont" v-model="selectedFont.fontFamily" />
+    <font-stylesheet
+      v-if="selectedFont"
+      :font-family="selectedFont.fontFamily"
+      :font-variant="selectedFontVariant"
+    />
 
     <b-popover
       target="font-selector-popover-start"
@@ -44,8 +50,8 @@
           aria-label="Close"
           class="float-right p-0 text-dark"
         >
-          <fa icon="times" />
-        </b-button>Font
+          <fa icon="times" /> </b-button
+        >Font
       </template>
 
       <b-form-input
@@ -60,32 +66,41 @@
       <p
         v-show="!fontSearch && !searching"
         class="small font-weight-bold text-muted text-uppercase mb-1"
-      >Popular</p>
+      >
+        Popular
+      </p>
 
       <div class="fontListGroupWrap">
-        <div v-show="!fontResults.length && !loading" class="text-muted text-center">No results.</div>
+        <div
+          v-show="!fontResults.length && !loading"
+          class="text-muted text-center"
+        >
+          No results.
+        </div>
         <b-spinner v-if="loading" small class="d-block mx-auto"></b-spinner>
         <b-list-group>
           <b-list-group-item
             v-for="(font, index) in fontResults"
             :key="font.fontFamily + index"
             button
-            :style="{fontFamily: font.fontFamily}"
+            :style="{ fontFamily: font.fontFamily }"
             class="px-0"
             @click="selectFont(font)"
           >
             <span class="row m-0">
               <span class="col-3 text-center">
                 <span
                   class="d-block"
-                  v-if="selectedFont && selectedFont.fontFamily === font.fontFamily"
+                  v-if="
+                    selectedFont && selectedFont.fontFamily === font.fontFamily
+                  "
                 >
                   <fa icon="check-circle" />
                 </span>
               </span>
-              <span class="col-9 pl-0">{{font.fontFamily}}</span>
+              <span class="col-9 pl-0">{{ font.fontFamily }}</span>
             </span>
-            <font-stylesheet v-if="font" v-model="font.fontFamily" />
+            <font-stylesheet v-if="font" :font-family="font.fontFamily" />
           </b-list-group-item>
         </b-list-group>
       </div>
@@ -244,4 +259,3 @@ export default {
   text-overflow: ellipsis;
 }
 </style>
-

app/components/FontStylesheet.vue

@@ -1,67 +1,61 @@
 <template>
-  <link v-if="font" v-bind:href="fontHref" rel="stylesheet">
+  <link v-if="font" v-bind:href="fontHref" rel="stylesheet" />
 </template>
 
 <script>
 export default {
   props: {
-    value: {
+    fontFamily: {
       type: String,
       required: true,
     },
+    fontVariant: {
+      type: String,
+      required: false,
+    },
   },
   data: function() {
     return {
       font: null,
     };
   },
-  created: function() {
-    this.initFont(this.value);
-  },
   watch: {
-    value: function(value) {
-      this.initFont(this.value);
+    fontFamily: {
+      handler() {
+        this.initFont();
+      },
+      immediate: true,
+    },
+    fontVariant: {
+      handler() {
+        this.initFont();
+      },
+      immediate: true,
     },
   },
   methods: {
-    initFont: async function(fontFamily) {
+    async initFont() {
       try {
-        this.font = await this.$axios.$get('/api/fonts/' + this.value);
+        this.font = await this.$axios.$get('/api/fonts/' + this.fontFamily);
       } catch (e) {
         // Default font
         this.font = await this.$axios.$get('/api/fonts/Cousine');
       }
     },
-    getDefaultOrSelectedVariant: function(font) {
-      if (
-        this.selectedFontVariant &&
-        font.variants.includes(this.selectedFontVariant)
-      ) {
-        return this.selectedFontVariant;
-      }
-      if (font.variants.includes('regular')) {
-        return 'regular';
-      } else if (font.variants.includes('400')) {
-        // 400 = regular
-        return '400';
-      } else {
-        return font.variants[0];
-      }
-    },
   },
   computed: {
-    fontHref: function() {
-      if (this.font) {
-        if (this.font.googleFont) {
-          return (
-            'https://fonts.googleapis.com/css?family=' +
-            this.font.fontFamily +
-            ':' +
-            this.getDefaultOrSelectedVariant(this.font)
-          );
-        } else {
-          return '/static/fonts/' + this.font.fontFamily + '.css';
-        }
+    fontHref() {
+      if (!this.font) {
+        return null;
+      }
+
+      if (this.font.googleFont) {
+        return `https://fonts.googleapis.com/css?family=${
+          this.font.fontFamily
+        }:${this.fontVariant || this.font.variants[0]}`;
+      } else {
+        // Local font (like OpenDyslexic)
+        return `/static/fonts/${this.font.fontFamily}.css`;
       }
     },
   },