Skip to content
This repository was archived by the owner on Nov 5, 2023. It is now read-only.

Commit fae5f2e

Browse files
curtgrimescurtgrimes
committed
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
1 parent da57865 commit fae5f2e

File tree

7 files changed

+406
-221
lines changed

7 files changed

+406
-221
lines changed

‎app/assets/scss/app.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -206,6 +206,15 @@ input[type='color'] {
206206
border-left: none;
207207
}
208208

209+
.popover.wider {
210+
width: 500px !important;
211+
max-width: 95vw;
212+
213+
.popover-body {
214+
padding: 0.25rem;
215+
}
216+
}
217+
209218
.navbar-expand .dropup .dropdown-menu {
210219
bottom: initial;
211220
}

‎app/components/FontSelector.vue‎

Lines changed: 28 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,12 @@
66
class="bg-white border fontPreviewButton"
77
id="font-selector-popover-start"
88
:disabled="!selectedFont"
9-
:style="{fontFamily: selectedFontFamily, fontWeight, fontStyle}"
9+
:style="{ fontFamily: selectedFontFamily, fontWeight, fontStyle }"
1010
style="text-transform: none"
1111
v-b-tooltip.hover
1212
:title="selectedFontFamily"
13-
>{{selectedFontFamily}}</b-button>
13+
>{{ selectedFontFamily }}</b-button
14+
>
1415
<b-dropdown
1516
@show="showFontSelectorPopover = false"
1617
:disabled="!selectedFont"
@@ -20,14 +21,19 @@
2021
variant="dark"
2122
>
2223
<b-dropdown-item
23-
v-for="(variant, index) in (selectedFont ? selectedFont.variants : [])"
24+
v-for="(variant, index) in selectedFont ? selectedFont.variants : []"
2425
:key="selectedFont.family + variant + index"
2526
@click="selectedFontVariant = variant"
2627
style="text-transform: capitalize"
27-
>{{variant}}</b-dropdown-item>
28+
>{{ variant }}</b-dropdown-item
29+
>
2830
</b-dropdown>
2931
</b-button-group>
30-
<font-stylesheet v-if="selectedFont" v-model="selectedFont.fontFamily" />
32+
<font-stylesheet
33+
v-if="selectedFont"
34+
:font-family="selectedFont.fontFamily"
35+
:font-variant="selectedFontVariant"
36+
/>
3137

3238
<b-popover
3339
target="font-selector-popover-start"
@@ -44,8 +50,8 @@
4450
aria-label="Close"
4551
class="float-right p-0 text-dark"
4652
>
47-
<fa icon="times" />
48-
</b-button>Font
53+
<fa icon="times" /> </b-button
54+
>Font
4955
</template>
5056

5157
<b-form-input
@@ -60,32 +66,41 @@
6066
<p
6167
v-show="!fontSearch && !searching"
6268
class="small font-weight-bold text-muted text-uppercase mb-1"
63-
>Popular</p>
69+
>
70+
Popular
71+
</p>
6472

6573
<div class="fontListGroupWrap">
66-
<div v-show="!fontResults.length && !loading" class="text-muted text-center">No results.</div>
74+
<div
75+
v-show="!fontResults.length && !loading"
76+
class="text-muted text-center"
77+
>
78+
No results.
79+
</div>
6780
<b-spinner v-if="loading" small class="d-block mx-auto"></b-spinner>
6881
<b-list-group>
6982
<b-list-group-item
7083
v-for="(font, index) in fontResults"
7184
:key="font.fontFamily + index"
7285
button
73-
:style="{fontFamily: font.fontFamily}"
86+
:style="{ fontFamily: font.fontFamily }"
7487
class="px-0"
7588
@click="selectFont(font)"
7689
>
7790
<span class="row m-0">
7891
<span class="col-3 text-center">
7992
<span
8093
class="d-block"
81-
v-if="selectedFont && selectedFont.fontFamily === font.fontFamily"
94+
v-if="
95+
selectedFont && selectedFont.fontFamily === font.fontFamily
96+
"
8297
>
8398
<fa icon="check-circle" />
8499
</span>
85100
</span>
86-
<span class="col-9 pl-0">{{font.fontFamily}}</span>
101+
<span class="col-9 pl-0">{{ font.fontFamily }}</span>
87102
</span>
88-
<font-stylesheet v-if="font" v-model="font.fontFamily" />
103+
<font-stylesheet v-if="font" :font-family="font.fontFamily" />
89104
</b-list-group-item>
90105
</b-list-group>
91106
</div>
@@ -244,4 +259,3 @@ export default {
244259
text-overflow: ellipsis;
245260
}
246261
</style>
247-

‎app/components/FontStylesheet.vue‎

Lines changed: 31 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,61 @@
11
<template>
2-
<link v-if="font" v-bind:href="fontHref" rel="stylesheet">
2+
<link v-if="font" v-bind:href="fontHref" rel="stylesheet" />
33
</template>
44

55
<script>
66
export default {
77
props: {
8-
value: {
8+
fontFamily: {
99
type: String,
1010
required: true,
1111
},
12+
fontVariant: {
13+
type: String,
14+
required: false,
15+
},
1216
},
1317
data: function() {
1418
return {
1519
font: null,
1620
};
1721
},
18-
created: function() {
19-
this.initFont(this.value);
20-
},
2122
watch: {
22-
value: function(value) {
23-
this.initFont(this.value);
23+
fontFamily: {
24+
handler() {
25+
this.initFont();
26+
},
27+
immediate: true,
28+
},
29+
fontVariant: {
30+
handler() {
31+
this.initFont();
32+
},
33+
immediate: true,
2434
},
2535
},
2636
methods: {
27-
initFont: async function(fontFamily) {
37+
async initFont() {
2838
try {
29-
this.font = await this.$axios.$get('/api/fonts/' + this.value);
39+
this.font = await this.$axios.$get('/api/fonts/' + this.fontFamily);
3040
} catch (e) {
3141
// Default font
3242
this.font = await this.$axios.$get('/api/fonts/Cousine');
3343
}
3444
},
35-
getDefaultOrSelectedVariant: function(font) {
36-
if (
37-
this.selectedFontVariant &&
38-
font.variants.includes(this.selectedFontVariant)
39-
) {
40-
return this.selectedFontVariant;
41-
}
42-
if (font.variants.includes('regular')) {
43-
return 'regular';
44-
} else if (font.variants.includes('400')) {
45-
// 400 = regular
46-
return '400';
47-
} else {
48-
return font.variants[0];
49-
}
50-
},
5145
},
5246
computed: {
53-
fontHref: function() {
54-
if (this.font) {
55-
if (this.font.googleFont) {
56-
return (
57-
'https://fonts.googleapis.com/css?family=' +
58-
this.font.fontFamily +
59-
':' +
60-
this.getDefaultOrSelectedVariant(this.font)
61-
);
62-
} else {
63-
return '/static/fonts/' + this.font.fontFamily + '.css';
64-
}
47+
fontHref() {
48+
if (!this.font) {
49+
return null;
50+
}
51+
52+
if (this.font.googleFont) {
53+
return `https://fonts.googleapis.com/css?family=${
54+
this.font.fontFamily
55+
}:${this.fontVariant || this.font.variants[0]}`;
56+
} else {
57+
// Local font (like OpenDyslexic)
58+
return `/static/fonts/${this.font.fontFamily}.css`;
6559
}
6660
},
6761
},

0 commit comments

Comments
 (0)