[WEB] add UI for transcription #3213

nikvaessen · 2018-06-29T20:10:49Z

This adds a button to invite and kick the transcriber, as well as a label indicating a transcriber is currently in the room.

It does not currently play a sound when the transcriber joins or leaves, and it nothing is currently displayed on mobile.

virtuacoplenny · 2018-07-02T19:23:45Z

react/features/toolbox/components/web/Toolbox.js

+     */
+    _onToolbarToggleTranscribing() {
+        this._doToggleTranscribing();
+    }


Probably want to add some analytics for this event. While adding analytics in jitsi-meet is pretty inconsistent, I think at least toolbox has analytics for all its buttons.

virtuacoplenny · 2018-07-02T19:29:18Z

react/features/transcribing/components/TranscribingLabel.web.js

+    componentWillReceiveProps(nextProps) {
+        this.setState({
+            hidden: !nextProps._transcribing
+        });


Why use state instead of using the transcribing prop directly?

I don't understand this question. Do you mean this.setState(nextProps)? If so, doesn't nextProps contains the function t?

Instead of checking this.state.hidden or !this.state.hidden, why not check this.props._transcribing directly?

virtuacoplenny · 2018-07-02T19:32:25Z

react/features/transcribing/middleware.js

+        if (!(isDialing || isTranscribing)) {
+            store.dispatch(showPendingTranscribingNotification());
+
+            APP.conference._room.dial(TRANSCRIBER_DIAL_COMMAND).then(


You have access to the conference through the store if you want to use it. I'd avoid using the global as much as possible because the intent is to get rid of it some day, whenever that day may be.

virtuacoplenny · 2018-07-02T19:33:03Z

react/features/transcribing/middleware.js

+
+            APP.conference._room.dial(TRANSCRIBER_DIAL_COMMAND).then(
+                () => {
+                    // do nothing


Maybe using a .catch instead of .then is more expressive of what you want to do.

virtuacoplenny · 2018-07-02T19:35:17Z

react/features/transcribing/middleware.js

+                && action.displayName === TRANSCRIBER_DISPLAY_NAME) {
+            store.dispatch(transcriberJoined(action.id));
+        } else {
+            store.dispatch(potentialTranscriberJoined(action.id));


What conditions cause potentialTranscriberJoined to be needed?

virtuacoplenny · 2018-07-02T19:37:25Z

react/features/transcribing/reducer.js

+                ...state,
+                potentialTranscriberJIDs:
+                    [ action.transcriberJID ]
+                        .concat(state.potentialTranscriberJIDs)


What's the scenario in which there can be more than 1 potential subscriber jid? Is it possible for multiple people to start transcribing?

Because Jibri and Jigasi will both use the recorder domain (hidden domain), both Jibri and Jigasi joining the conference will result in a HIDDEN_PARTICIPANT_JOINED event. We check for Jigasi instance by looking for the DisplayName, which should be Transcriber, but the presence causing the event to be emitted does not yet contain the displayname. Thus I store the potential JID's and only start transcribing when the JID is matched to the correct DisplayName

nikvaessen · 2018-07-03T13:11:56Z

How could I test if the analytic event is working?

virtuacoplenny · 2018-07-03T15:35:10Z

react/features/transcribing/middleware.js

+        if (!(isDialing || isTranscribing)) {
+            store.dispatch(showPendingTranscribingNotification());
+
+            conference.room.dial(TRANSCRIBER_DIAL_COMMAND).catch(


.catch takes in one function, which is the error handler. It's sugar over .then(undefined, errorCallback).

virtuacoplenny · 2018-07-03T15:36:46Z

react/features/transcribing/middleware.js

+        break;
+    case STOP_TRANSCRIBING:
+        if (isTranscribing) {
+            APP.conference._room.kickParticipant(transcriberJID);


You might also want to swap this reference to the global conference for the locally scoped conference.

virtuacoplenny · 2018-07-03T15:50:07Z

How could I test if the analytic event is working?

When I remember to test it I use the dev proxy server pointed to beta and check if AnalyticsAdapter#sendEvent sends the information I expect. @bgrozev or @hristoterezov very likely know where the events are going and how to access them.

nikvaessen · 2018-07-05T10:36:27Z

Event on button press worked on Splunk.

saghul · 2018-07-05T11:40:36Z

conference.js

@@ -75,6 +75,8 @@ import {
    getAvatarURLByParticipantId,
    getLocalParticipant,
    getParticipantById,
+    hiddenParticipantJoined,


Drive-by observation: we should not need these. A participant can have a hidden property if that's needed. Or alternatively we could filter transcribers before dispatching the participantJoined action.

I disagree; currently a PARTICIPANT_JOINED event triggers whatever logic is required for a new participant, such as displaying it in the filmstrip. All this code should then first check if it's not actually a hidden participant?

And we can't filter for transcriber because the displayname will not be set until a presence which comes later...

virtuacoplenny · 2018-07-05T20:09:11Z

react/features/transcribing/components/TranscribingLabel.web.js

+                position = { 'left' }>
+                <CircularLabel
+                    className = 'recording-label'
+                    label = 'TR' />


It'll be worthwhile to put the label and tooltip content through translation. Check out how other components use t() and strings in main.json.

nikvaessen · 2018-07-24T08:40:28Z

Force pushed to the PR... messed up with fixing a merge conflict.

# Conflicts: # fonts/jitsi.eot # fonts/jitsi.svg # fonts/jitsi.ttf # fonts/jitsi.woff # fonts/selection.json # react/features/base/font-icons/jitsi.json

virtuacoplenny · 2018-07-26T15:18:39Z

css/_font.scss

@@ -24,6 +24,10 @@
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
 }
+
+.icon-cc:before {


Does this icon really exist? If so where is it used?

virtuacoplenny self-requested a review July 2, 2018 15:47

virtuacoplenny reviewed Jul 2, 2018

View reviewed changes

virtuacoplenny reviewed Jul 3, 2018

View reviewed changes

nikvaessen force-pushed the pr_ui_transcription branch from afb19e8 to 7953afb Compare July 3, 2018 16:30

saghul reviewed Jul 5, 2018

View reviewed changes

virtuacoplenny reviewed Jul 5, 2018

View reviewed changes

virtuacoplenny previously approved these changes Jul 6, 2018

View reviewed changes

Nik Vaessen added 5 commits July 24, 2018 10:16

[WEB] add UI for transcription

5f6f794

add analytics event for button, do not use global APP object

cd3787f

use props instead of state, use local conference to kick participant

ec7bc4e

put imports in alphabetical order

64b4bec

add translation for TranscribingLabel

678098d

nikvaessen dismissed virtuacoplenny’s stale review via 9cbc356 July 24, 2018 08:26

fix merge conflict

1061965

nikvaessen force-pushed the pr_ui_transcription branch from 9cbc356 to 1061965 Compare July 24, 2018 08:39

add closed caption button

72c5618

nikvaessen force-pushed the pr_ui_transcription branch from 7cf24f0 to 72c5618 Compare July 25, 2018 13:17

purge OverFlowMenuItem which starts and stops Transcription

7edda91

virtuacoplenny approved these changes Jul 25, 2018

View reviewed changes

virtuacoplenny previously approved these changes Jul 25, 2018

View reviewed changes

Merge remote-tracking branch 'upstream/master' into pr_ui_transcription

121753c

# Conflicts: # fonts/jitsi.eot # fonts/jitsi.svg # fonts/jitsi.ttf # fonts/jitsi.woff # fonts/selection.json # react/features/base/font-icons/jitsi.json

nikvaessen dismissed virtuacoplenny’s stale review via 121753c July 26, 2018 12:35

readd closed caption icon and fix small issues due to purge

9564749

nikvaessen force-pushed the pr_ui_transcription branch from 70ccd3d to 9564749 Compare July 26, 2018 13:28

virtuacoplenny previously approved these changes Jul 26, 2018

View reviewed changes

virtuacoplenny reviewed Jul 26, 2018

View reviewed changes

delete unused icon in _font.scss

a1a7687

nikvaessen dismissed virtuacoplenny’s stale review via a1a7687 July 26, 2018 15:36

virtuacoplenny approved these changes Jul 26, 2018

View reviewed changes

virtuacoplenny merged commit b8daf0a into jitsi:master Jul 26, 2018

nikvaessen deleted the pr_ui_transcription branch July 26, 2018 16:43

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WEB] add UI for transcription #3213

[WEB] add UI for transcription #3213

nikvaessen commented Jun 29, 2018

virtuacoplenny Jul 2, 2018

virtuacoplenny Jul 2, 2018

nikvaessen Jul 3, 2018

virtuacoplenny Jul 3, 2018

virtuacoplenny Jul 2, 2018

virtuacoplenny Jul 2, 2018

virtuacoplenny Jul 2, 2018

virtuacoplenny Jul 2, 2018

nikvaessen Jul 2, 2018

nikvaessen commented Jul 3, 2018

virtuacoplenny Jul 3, 2018

virtuacoplenny Jul 3, 2018

virtuacoplenny commented Jul 3, 2018

nikvaessen commented Jul 5, 2018

saghul Jul 5, 2018

nikvaessen Jul 5, 2018

nikvaessen Jul 5, 2018

virtuacoplenny Jul 5, 2018

nikvaessen commented Jul 24, 2018

virtuacoplenny Jul 26, 2018

[WEB] add UI for transcription #3213

[WEB] add UI for transcription #3213

Conversation

nikvaessen commented Jun 29, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nikvaessen commented Jul 3, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

virtuacoplenny commented Jul 3, 2018

nikvaessen commented Jul 5, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nikvaessen commented Jul 24, 2018

Choose a reason for hiding this comment