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

Commit d8f226c

Browse files
curtgrimescurtgrimes
committed
Add start of typing mode experiment
1 parent 05abf32 commit d8f226c

File tree

6 files changed

+60
-32
lines changed

6 files changed

+60
-32
lines changed

‎app/assets/scss/app.scss

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -166,8 +166,12 @@ input[type="color"] {
166166
padding:.575rem 1rem .425rem 1rem;
167167
}
168168

169-
.btn-primary.dropdown-toggle-split {
170-
border-left:1px solid $modal-header-border-color;
169+
.btn-group > * {
170+
border-left:1px solid rgba(0,0,0,.2);
171+
}
172+
173+
.btn-group .btn:first-child, .btn-group .btn:first-child:hover {
174+
border-left:none;
171175
}
172176

173177
.navbar-expand .dropup .dropdown-menu {

‎app/components/Navbar.vue

Lines changed: 28 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,8 @@
2525
<div v-if="waitingForInitialTranscript" class="navbar-text small text-primary mr-3">
2626
Listening<span v-if="microphoneName"> to "{{microphoneName}}"</span>
2727
</div>
28-
<b-btn v-show="false && !typingModeOn" variant="info" class="mr-3" v-b-tooltip.top title="Typing Mode" @click="startTypingMode">
29-
<fa icon="keyboard"/>
30-
</b-btn>
31-
<b-btn v-show="false && typingModeOn" variant="secondary" class="mr-3" v-b-tooltip.top title="Turn Off" @click="stopTypingMode">
32-
<fa icon="keyboard"/> Typing Mode
33-
</b-btn>
3428
<transition name="fade">
35-
<cast-button v-if="experiments.includes('chromecast')"></cast-button>
29+
<cast-button></cast-button>
3630
</transition>
3731
<div v-if="showVmixNotFullySetUpMessage && !vmixNotFullySetUpMessageDismissed" class="mr-4">
3832
<span class="navbar-text text-white pr-3 text-primary">
@@ -76,30 +70,38 @@
7670
</b-dropdown-item>
7771
</b-dropdown>
7872
</transition>
79-
<b-dropdown id="startCaptioningDropdown" :class="incompatibleBrowser ? 'button-only-disabled' : ''" :size="largerLayout ? 'lg' : ''" :variant="captioningToggleButtonVariant" dropup right split @click="captioningToggleButtonClick">
80-
<template slot="button-content">
73+
<b-button-group :size="largerLayout ? 'lg' : ''">
74+
<b-button id="startCaptioningDropdown" :class="incompatibleBrowser ? 'button-only-disabled' : ''" :variant="captioningToggleButtonVariant" @click="captioningToggleButtonClick">
8175
<div :class="{'px-4 py-2' : largerLayout}">
8276
<span v-if="!this.captioningOn">
83-
<fa icon="microphone" /> Start Captioning
77+
<fa icon="microphone" /> <span v-show="!typingModeOn"> Start Captioning</span>
8478
</span>
8579
<span v-else>Stop Captioning</span> <kbd v-show="largerLayout" class="small ml-3">c</kbd>
8680
</div>
87-
</template>
88-
<b-dropdown-item href="/" target="_blank">About</b-dropdown-item>
89-
<b-dropdown-item href="/blog" target="_blank">Blog</b-dropdown-item>
90-
<b-dropdown-item href="/help" target="_blank">Help Center</b-dropdown-item>
91-
<b-dropdown-item href="/community" target="_blank">Community</b-dropdown-item>
92-
<b-dropdown-item href="/donate" target="_blank">Donate</b-dropdown-item>
93-
<div class="dropdown-divider"></div>
94-
<b-dropdown-item href="/feedback" target="_blank">Feedback</b-dropdown-item>
95-
<div class="dropdown-divider"></div>
96-
<b-dropdown-item @click="startDetachedMode" class="dropdown-item" v-b-tooltip.left title="Show captions in a new window"><fa icon="external-link-alt" fixed-width class="mr-1" /> New Window</b-dropdown-item>
97-
<div class="dropdown-divider"></div>
98-
<b-dropdown-item to="/captioner/save-to-file" replace><fa icon="save" class="mr-1" fixed-width /> Save to File</b-dropdown-item>
99-
<b-dropdown-item to="/captioner/clear" replace><fa icon="trash-alt" class="mr-1" fixed-width /> Clear...</b-dropdown-item>
100-
<div class="dropdown-divider"></div>
101-
<b-dropdown-item to="/captioner/settings" class="dropdown-item"><fa icon="cog" class="mr-1" fixed-width /> Settings</b-dropdown-item>
102-
</b-dropdown>
81+
</b-button>
82+
<b-button v-show="experiments.includes('typingMode') && !typingModeOn" variant="primary" v-b-tooltip.top title="Start Typing (t)" @click="startTypingMode">
83+
<fa icon="keyboard"/>
84+
</b-button>
85+
<b-btn v-if="typingModeOn" variant="danger" @click="stopTypingMode">
86+
<fa icon="keyboard"/> Done Typing <kbd>ESC</kbd>
87+
</b-btn>
88+
<b-dropdown dropup right variant="primary">
89+
<b-dropdown-item href="/" target="_blank">About</b-dropdown-item>
90+
<b-dropdown-item href="/blog" target="_blank">Blog</b-dropdown-item>
91+
<b-dropdown-item href="/help" target="_blank">Help Center</b-dropdown-item>
92+
<b-dropdown-item href="/community" target="_blank">Community</b-dropdown-item>
93+
<b-dropdown-item href="/donate" target="_blank">Donate</b-dropdown-item>
94+
<div class="dropdown-divider"></div>
95+
<b-dropdown-item href="/feedback" target="_blank">Feedback</b-dropdown-item>
96+
<div class="dropdown-divider"></div>
97+
<b-dropdown-item @click="startDetachedMode" class="dropdown-item" v-b-tooltip.left title="Show captions in a new window"><fa icon="external-link-alt" fixed-width class="mr-1" /> New Window</b-dropdown-item>
98+
<div class="dropdown-divider"></div>
99+
<b-dropdown-item to="/captioner/save-to-file" replace><fa icon="save" class="mr-1" fixed-width /> Save to File</b-dropdown-item>
100+
<b-dropdown-item to="/captioner/clear" replace><fa icon="trash-alt" class="mr-1" fixed-width /> Clear...</b-dropdown-item>
101+
<div class="dropdown-divider"></div>
102+
<b-dropdown-item to="/captioner/settings" class="dropdown-item"><fa icon="cog" class="mr-1" fixed-width /> Settings</b-dropdown-item>
103+
</b-dropdown>
104+
</b-button-group>
103105
</div> <!-- bottom row in big UI mode -->
104106
</nav>
105107
</div>

‎app/components/Transcript.vue

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,15 @@
99
v-bind:class="textPositionClass"
1010
class="transcript-scroller"
1111
ref="scroller">
12-
<span class="transcript-scroller-child">{{finalTranscript}} <span v-if="interimTranscript" v-bind:style="{color: interimColor}">{{interimTranscript}}</span> <span v-show="typingModeOn" contenteditable v-text="transcriptTypedForDisplay" @input="typedTranscriptDidChange()" ref="typedTranscript" class="transcriptTyped">Hello world</span></span>
12+
<span class="transcript-scroller-child">{{finalTranscript}} <span v-if="interimTranscript" v-bind:style="{color: interimColor}">{{interimTranscript}}</span> <span v-show="typingModeOn" contenteditable v-text="transcriptTypedForDisplay" @input="typedTranscriptDidChange()" ref="typedTranscript" class="transcriptTyped combokeys" id="test2">Hello world</span></span>
1313
</span>
1414
</div>
1515
</template>
1616

1717
<script>
1818
import hexToRGB from '~/mixins/hexToRGB'
1919
import appHeightAdjuster from '~/mixins/appHeightAdjuster'
20+
import Combokeys from 'combokeys'
2021
2122
export default {
2223
name: 'transcript',
@@ -58,7 +59,11 @@ export default {
5859
this.height = this.adjustAppHeight();
5960
},500);
6061
});
61-
62+
63+
new Combokeys(this.$refs.typedTranscript)
64+
.bind('esc', () => {
65+
this.$store.dispatch('captioner/stopTypingMode');
66+
})
6267
6368
this.$watch('largerLayout', () => {
6469
this.height = this.adjustAppHeight();

‎app/pages/captioner.vue

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,14 @@ export default {
107107
.bind(['ctrl+shift+,', 'command+shift+,'], function() {
108108
self.$store.commit('TEXT_SIZE_DECREASE');
109109
})
110+
.bind('t', () => {
111+
if (this.experiments.includes('typingMode')) {
112+
this.$store.dispatch('captioner/startTypingMode');
113+
}
114+
})
115+
.bind('esc', () => {
116+
this.$store.dispatch('captioner/stopTypingMode');
117+
})
110118
111119
112120
// Larger layout mode
@@ -338,6 +346,9 @@ export default {
338346
this.combokeysDocument.detach();
339347
},
340348
computed: {
349+
experiments: function() {
350+
return this.$store.state.settings.exp;
351+
},
341352
largerLayout: function() {
342353
return this.$store.state.settings.controls.layout.larger;
343354
},

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,8 @@ export default {
9595
switch(experiment) {
9696
case 'science':
9797
return 'This will do something someday I think';
98+
case 'typingMode':
99+
return 'Add a manual typing mode.';
98100
case 'remoteDisplays':
99101
return 'Send captions to other phones or tablets.';
100102
case 'webhooks':
@@ -104,7 +106,7 @@ export default {
104106
}
105107
},
106108
isValidExperiment: function() {
107-
return ['remoteDisplays','science','','webhooks',].includes(this.experimentName);
109+
return ['typingMode','remoteDisplays','science','','webhooks',].includes(this.experimentName);
108110
},
109111
addExperiment: function({withConfirmation}) {
110112
if (this.isValidExperiment()) {

‎app/store/modules/captioner/index.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,11 @@ const state = {
3535
}
3636

3737
const actions = {
38-
startManual ({commit, dispatch, rootState}) {
38+
startManual ({commit, dispatch, state, rootState}) {
39+
if (state.typingModeOn) {
40+
dispatch('stopTypingMode');
41+
}
42+
3943
if (rootState.incompatibleBrowser) {
4044
dispatch('SHOW_INCOMPATIBLE_BROWSER_MODAL', {}, { root: true });
4145
}

0 commit comments

Comments
 (0)