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

Commit

Permalink
Add start of typing mode experiment
Browse files Browse the repository at this point in the history
  • Loading branch information
@curtgrimes
curtgrimes committed Sep 12, 2018
1 parent 05abf32 commit d8f226c
Show file tree
Hide file tree
Showing 6 changed files with 60 additions and 32 deletions.
8 changes: 6 additions & 2 deletions app/assets/scss/app.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,8 +166,12 @@ input[type="color"] {
padding:.575rem 1rem .425rem 1rem;
}

.btn-primary.dropdown-toggle-split {
border-left:1px solid $modal-header-border-color;
.btn-group > * {
border-left:1px solid rgba(0,0,0,.2);
}

.btn-group .btn:first-child, .btn-group .btn:first-child:hover {
border-left:none;
}

.navbar-expand .dropup .dropdown-menu {
Expand Down
54 changes: 28 additions & 26 deletions app/components/Navbar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,8 @@
<div v-if="waitingForInitialTranscript" class="navbar-text small text-primary mr-3">
Listening<span v-if="microphoneName"> to "{{microphoneName}}"</span>
</div>
<b-btn v-show="false && !typingModeOn" variant="info" class="mr-3" v-b-tooltip.top title="Typing Mode" @click="startTypingMode">
<fa icon="keyboard"/>
</b-btn>
<b-btn v-show="false && typingModeOn" variant="secondary" class="mr-3" v-b-tooltip.top title="Turn Off" @click="stopTypingMode">
<fa icon="keyboard"/> Typing Mode
</b-btn>
<transition name="fade">
<cast-button v-if="experiments.includes('chromecast')"></cast-button>
<cast-button></cast-button>
</transition>
<div v-if="showVmixNotFullySetUpMessage && !vmixNotFullySetUpMessageDismissed" class="mr-4">
<span class="navbar-text text-white pr-3 text-primary">
Expand Down Expand Up @@ -76,30 +70,38 @@
</b-dropdown-item>
</b-dropdown>
</transition>
<b-dropdown id="startCaptioningDropdown" :class="incompatibleBrowser ? 'button-only-disabled' : ''" :size="largerLayout ? 'lg' : ''" :variant="captioningToggleButtonVariant" dropup right split @click="captioningToggleButtonClick">
<template slot="button-content">
<b-button-group :size="largerLayout ? 'lg' : ''">
<b-button id="startCaptioningDropdown" :class="incompatibleBrowser ? 'button-only-disabled' : ''" :variant="captioningToggleButtonVariant" @click="captioningToggleButtonClick">
<div :class="{'px-4 py-2' : largerLayout}">
<span v-if="!this.captioningOn">
<fa icon="microphone" /> Start Captioning
<fa icon="microphone" /> <span v-show="!typingModeOn"> Start Captioning</span>
</span>
<span v-else>Stop Captioning</span> <kbd v-show="largerLayout" class="small ml-3">c</kbd>
</div>
</template>
<b-dropdown-item href="/" target="_blank">About</b-dropdown-item>
<b-dropdown-item href="/blog" target="_blank">Blog</b-dropdown-item>
<b-dropdown-item href="/help" target="_blank">Help Center</b-dropdown-item>
<b-dropdown-item href="/community" target="_blank">Community</b-dropdown-item>
<b-dropdown-item href="/donate" target="_blank">Donate</b-dropdown-item>
<div class="dropdown-divider"></div>
<b-dropdown-item href="/feedback" target="_blank">Feedback</b-dropdown-item>
<div class="dropdown-divider"></div>
<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>
<div class="dropdown-divider"></div>
<b-dropdown-item to="/captioner/save-to-file" replace><fa icon="save" class="mr-1" fixed-width /> Save to File</b-dropdown-item>
<b-dropdown-item to="/captioner/clear" replace><fa icon="trash-alt" class="mr-1" fixed-width /> Clear...</b-dropdown-item>
<div class="dropdown-divider"></div>
<b-dropdown-item to="/captioner/settings" class="dropdown-item"><fa icon="cog" class="mr-1" fixed-width /> Settings</b-dropdown-item>
</b-dropdown>
</b-button>
<b-button v-show="experiments.includes('typingMode') && !typingModeOn" variant="primary" v-b-tooltip.top title="Start Typing (t)" @click="startTypingMode">
<fa icon="keyboard"/>
</b-button>
<b-btn v-if="typingModeOn" variant="danger" @click="stopTypingMode">
<fa icon="keyboard"/> Done Typing <kbd>ESC</kbd>
</b-btn>
<b-dropdown dropup right variant="primary">
<b-dropdown-item href="/" target="_blank">About</b-dropdown-item>
<b-dropdown-item href="/blog" target="_blank">Blog</b-dropdown-item>
<b-dropdown-item href="/help" target="_blank">Help Center</b-dropdown-item>
<b-dropdown-item href="/community" target="_blank">Community</b-dropdown-item>
<b-dropdown-item href="/donate" target="_blank">Donate</b-dropdown-item>
<div class="dropdown-divider"></div>
<b-dropdown-item href="/feedback" target="_blank">Feedback</b-dropdown-item>
<div class="dropdown-divider"></div>
<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>
<div class="dropdown-divider"></div>
<b-dropdown-item to="/captioner/save-to-file" replace><fa icon="save" class="mr-1" fixed-width /> Save to File</b-dropdown-item>
<b-dropdown-item to="/captioner/clear" replace><fa icon="trash-alt" class="mr-1" fixed-width /> Clear...</b-dropdown-item>
<div class="dropdown-divider"></div>
<b-dropdown-item to="/captioner/settings" class="dropdown-item"><fa icon="cog" class="mr-1" fixed-width /> Settings</b-dropdown-item>
</b-dropdown>
</b-button-group>
</div> <!-- bottom row in big UI mode -->
</nav>
</div>
Expand Down
9 changes: 7 additions & 2 deletions app/components/Transcript.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,15 @@
v-bind:class="textPositionClass"
class="transcript-scroller"
ref="scroller">
<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>
<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>
</span>
</div>
</template>

<script>
import hexToRGB from '~/mixins/hexToRGB'
import appHeightAdjuster from '~/mixins/appHeightAdjuster'
import Combokeys from 'combokeys'
export default {
name: 'transcript',
Expand Down Expand Up @@ -58,7 +59,11 @@ export default {
this.height = this.adjustAppHeight();
},500);
});
new Combokeys(this.$refs.typedTranscript)
.bind('esc', () => {
this.$store.dispatch('captioner/stopTypingMode');
})
this.$watch('largerLayout', () => {
this.height = this.adjustAppHeight();
Expand Down
11 changes: 11 additions & 0 deletions app/pages/captioner.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,14 @@ export default {
.bind(['ctrl+shift+,', 'command+shift+,'], function() {
self.$store.commit('TEXT_SIZE_DECREASE');
})
.bind('t', () => {
if (this.experiments.includes('typingMode')) {
this.$store.dispatch('captioner/startTypingMode');
}
})
.bind('esc', () => {
this.$store.dispatch('captioner/stopTypingMode');
})
// Larger layout mode
Expand Down Expand Up @@ -338,6 +346,9 @@ export default {
this.combokeysDocument.detach();
},
computed: {
experiments: function() {
return this.$store.state.settings.exp;
},
largerLayout: function() {
return this.$store.state.settings.controls.layout.larger;
},
Expand Down
4 changes: 3 additions & 1 deletion app/pages/captioner/settings/experiments/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,8 @@ export default {
switch(experiment) {
case 'science':
return 'This will do something someday I think';
case 'typingMode':
return 'Add a manual typing mode.';
case 'remoteDisplays':
return 'Send captions to other phones or tablets.';
case 'webhooks':
Expand All @@ -104,7 +106,7 @@ export default {
}
},
isValidExperiment: function() {
return ['remoteDisplays','science','','webhooks',].includes(this.experimentName);
return ['typingMode','remoteDisplays','science','','webhooks',].includes(this.experimentName);
},
addExperiment: function({withConfirmation}) {
if (this.isValidExperiment()) {
Expand Down
6 changes: 5 additions & 1 deletion app/store/modules/captioner/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,11 @@ const state = {
}

const actions = {
startManual ({commit, dispatch, rootState}) {
startManual ({commit, dispatch, state, rootState}) {
if (state.typingModeOn) {
dispatch('stopTypingMode');
}

if (rootState.incompatibleBrowser) {
dispatch('SHOW_INCOMPATIBLE_BROWSER_MODAL', {}, { root: true });
}
Expand Down

0 comments on commit d8f226c

Please sign in to comment.