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

Commit 90e4376

Browse files
curtgrimescurtgrimes
committed
Add FAB Subtitler experiment. Fix issue where OBS settings couldn't be saved with an empty password. Fix duplicate navigation error when adding a channel.
1 parent 0a90b90 commit 90e4376

File tree

8 files changed

+175
-19
lines changed

8 files changed

+175
-19
lines changed

‎app/api/routes/channels/index.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,15 @@ const channelsList = [
1414
limit: 1,
1515
configPagePath: `${configPatePathPrefix}dropbox`,
1616
},
17+
{
18+
id: 'fab',
19+
name: 'FAB Subtitler',
20+
// iconPath: `${iconPrefix}/fab-subtitler.png`,
21+
showNameWithIcon: true,
22+
limit: 1,
23+
configPagePath: `${configPatePathPrefix}fab`,
24+
requiredExperiment: 'fab',
25+
},
1726
{
1827
id: 'vmix',
1928
name: 'vMix',

‎app/components/channels/editors/fab.vue‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<template>
2+
<div>
3+
<!-- <img
4+
:src="channel.iconPath"
5+
class="w-100 col-6 d-block mx-auto mt-2 mb-3"
6+
alt="Zoom"
7+
/> -->
8+
<p class="lead text-center">
9+
FAB Subtitler
10+
</p>
11+
<!-- <hr /> -->
12+
<!-- <ol>
13+
<li>
14+
<a
15+
href="https://support.zoom.us/hc/en-us/articles/207279736-closed-captioning#h_4cb4e874-d574-4e40-ab12-7d8fae1f71cc"
16+
target="_blank"
17+
>Enable closed captioning</a
18+
>
19+
in your Zoom account.
20+
</li>
21+
<li>
22+
In a Zoom meeting or webinar that you are hosting, click the Closed
23+
Caption button.
24+
</li>
25+
<li>
26+
<a
27+
href="https://support.zoom.us/hc/en-us/articles/207279736-closed-captioning#h_45f95867-9c71-4acd-888f-5a1475b4cd8e"
28+
target="_blank"
29+
>Choose the "Copy API token" option</a
30+
>
31+
and paste the token here.
32+
</li>
33+
</ol> -->
34+
<div class="card card-body">
35+
<div
36+
v-if="savedChannel && savedChannel.error"
37+
class="alert alert-warning small"
38+
>
39+
<strong class="text-danger">
40+
<fa icon="exclamation-triangle" /> Error:
41+
</strong>
42+
{{ savedChannel.error }}
43+
</div>
44+
<label for="port" class="font-weight-bold">TCP Port</label>
45+
<input
46+
id="port"
47+
name="port"
48+
v-model="port"
49+
autofocus
50+
class="form-control"
51+
type="url"
52+
placeholder="TCP Port"
53+
/>
54+
</div>
55+
</div>
56+
</template>
57+
58+
<script>
59+
export default {
60+
props: {
61+
channel: {
62+
required: true,
63+
type: Object,
64+
},
65+
savedChannel: {
66+
required: false,
67+
type: Object,
68+
},
69+
},
70+
mounted() {
71+
this.port = this.savedChannel?.parameters?.port || this.port;
72+
},
73+
data() {
74+
return {
75+
port: null,
76+
};
77+
},
78+
methods: {
79+
updateParameters() {
80+
this.$emit('parametersUpdated', {
81+
port: this.port,
82+
});
83+
84+
if (this.port) {
85+
this.$emit('formValid');
86+
} else {
87+
this.$emit('formInvalid');
88+
}
89+
},
90+
},
91+
watch: {
92+
port: {
93+
immediate: true,
94+
handler() {
95+
this.updateParameters();
96+
},
97+
},
98+
},
99+
};
100+
</script>

‎app/components/channels/editors/obs.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ export default {
110110
handleParameterChange() {
111111
this.$emit('parametersUpdated', {
112112
port: this.port,
113-
password: this.password,
113+
...(this.password ? { password: this.password } : {}),
114114
});
115115
116116
if (this.port) {

‎app/pages/captioner/settings/channels.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
/>
3838
<span v-else class="d-flex align-items-center">
3939
<fa
40+
v-if="channelInfo(addedChannel.type).iconName"
4041
:icon="channelInfo(addedChannel.type).iconName"
4142
size="lg"
4243
class="mr-2"

‎app/pages/captioner/settings/channels/_channelId.vue‎

Lines changed: 6 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
@showRemoveButton="showRemoveButton = true"
2727
@hideRemoveButton="showRemoveButton = false"
2828
/>
29-
<template v-slot:modal-footer="{ ok, cancel }">
29+
<template v-slot:modal-footer="{ cancel }">
3030
<b-button
3131
v-if="updatingExistingChannel && showRemoveButton"
3232
variant="outline-danger"
@@ -105,16 +105,14 @@ export default {
105105
// It seems to remain cached after the first import attempt so there isn't much
106106
// of a performance concern here.
107107
const component = await import(
108-
`~/components/channels/editors/${
109-
this.channelTypeToSave || savedChannel.type
110-
}`
108+
`~/components/channels/editors/${this.channelTypeToSave ||
109+
savedChannel.type}`
111110
);
112111
113112
const editorComponent = () => ({
114113
component: import(
115-
`~/components/channels/editors/${
116-
this.channelTypeToSave || savedChannel.type
117-
}`
114+
`~/components/channels/editors/${this.channelTypeToSave ||
115+
savedChannel.type}`
118116
),
119117
});
120118
@@ -131,6 +129,7 @@ export default {
131129
async mounted() {
132130
this.channels = await this.$store.dispatch('channels/GET_CHANNELS');
133131
132+
await this.settingsLoaded();
134133
if (this.reachedLimitForChannelType && this.creatingNewChannel) {
135134
// Don't allow creating a channel
136135
this.$route.replace('/captioner/settings/channels');
@@ -160,8 +159,6 @@ export default {
160159
(channel) => channel.type === this.$route.query.type
161160
);
162161
163-
console.log('here', existingChannelsOfThisType, this.channel);
164-
165162
return existingChannelsOfThisType.length >= this.channel?.limit;
166163
},
167164
},
@@ -234,13 +231,5 @@ export default {
234231
return this.channels.find((channel) => channel.id === id);
235232
},
236233
},
237-
watch: {
238-
reachedLimitForChannelType() {
239-
if (this.reachedLimitForChannelType) {
240-
console.log('reachedLimitForChannelType');
241-
this.$router.replace('/captioner/settings/channels');
242-
}
243-
},
244-
},
245234
};
246235
</script>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -288,6 +288,7 @@ export default {
288288
isValidExperiment: function() {
289289
return [
290290
'share',
291+
'fab',
291292
'saveTranscriptWithTimingsToDropbox',
292293
'captionSpeedSetting',
293294
...this.experiments.map((e) => e.id),

‎app/plugins/channels/fab.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
export default async ({ $store, $axios, channelId, channelParameters }) => {
2+
// Register
3+
if (!channelParameters.port) {
4+
$store.commit('UPDATE_CHANNEL_ERROR', {
5+
channelId,
6+
error: 'TCP port number is missing.',
7+
});
8+
9+
// Turn off the channel because it's not configured correctly
10+
$store.commit('TOGGLE_CHANNEL_ON_OR_OFF', { channelId, onOrOff: false });
11+
// No need to unregister here because we haven't registered yet
12+
return;
13+
}
14+
let fabUrl;
15+
try {
16+
fabUrl = new URL(`http://localhost`);
17+
fabUrl.port = channelParameters.port;
18+
// await fetch(fabUrl.toString());
19+
} catch (e) {
20+
console.error('error', e);
21+
$store.commit('UPDATE_CHANNEL_ERROR', {
22+
channelId,
23+
error:
24+
'Cannot connect to FAB Subtitler. Make sure the port number is correct and try again.',
25+
});
26+
27+
// Turn off the channel because it's not configured correctly
28+
$store.commit('TOGGLE_CHANNEL_ON_OR_OFF', { channelId, onOrOff: false });
29+
// No need to unregister here because we haven't registered yet
30+
return;
31+
}
32+
33+
// Can successfully connect. Send text to the /speechinterface path
34+
// from now on
35+
fabUrl.pathname = '/speechinterface';
36+
37+
const sendToFab = async (text) => {
38+
fabUrl.searchParams.set('text', text);
39+
await fetch(fabUrl);
40+
};
41+
42+
const unsubscribeFn = $store.subscribe((mutation) => {
43+
if (
44+
mutation.type === 'captioner/APPEND_TRANSCRIPT_STABILIZED' &&
45+
mutation.payload.transcript
46+
) {
47+
sendToFab(mutation.payload.transcript);
48+
}
49+
});
50+
51+
return () => {
52+
// Unregister function
53+
unsubscribeFn();
54+
};
55+
};

‎app/plugins/channels/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import dropbox from './dropbox';
2+
import fab from './fab';
23
import obs from './obs';
34
import vmix from './vmix';
45
import webhook from './webhook';
56
import youtube from './youtube';
67
import zoom from './zoom';
78

89
// Available channels
9-
const channels = { dropbox, obs, vmix, webhook, youtube, zoom };
10+
const channels = { dropbox, fab, obs, vmix, webhook, youtube, zoom };
1011

1112
// Every time a channel is registered, it returns a function
1213
// we need to run if we need to deregister it in the future

0 commit comments

Comments
 (0)