brave/brave-talk

Unlimited private video calls with your friends and colleagues

Brave Talk

Working with the code

The website is built using webpack 5.

To work with it locally:

$ npm install
$ npm start

Source code is all in src. Contents of public are deployed to target without further modification.

Currently the page uses a html template index.html styled using global class names in css/welcome.css. Logic is contained within index.ts.

By convention, the javsascript this interacts with elements in the html template by id and the css relies solely on class names.

Before you commit, you most likely want to ensure the continuous integration build will not fail. To run the most likely-to-fail checks, use:

$ npm run check

To build for production:

$ npm ci
$ npm run build

which creates a ./html directory containing compiled assets.

Branching Strategy

• prod => releases to talk.brave.com (production)
• main => releases to staging
• dev => releases to development

1. production releases should only be made after we have been able to test exactly what we're going to release on stage. So these should always be a PR from main to prod that's basically "make production === stage". These are the only PRs that should go to prod.
2. therefore a merge to main should only happen when we think the feature is ready to release.
3. when starting a piece of work, create a branch off main and keep adding commits there until it's ready to release.
4. to test the code in a real environment, either: a. merge that branch to dev - but don't delete the feature branch. Repeatedly merge the feature that feature branch to dev as work progresses. Merges to dev do not require PRs. OR b. manually initiate the "Deploy to Development" github action selecting that branch - this will deploy just those changes to development.
5. In-development QA of this feature should happen on the development environment.
6. when it's good to go merge the feature branch to main - with a PR and security review if required. Do not merge until all reviews are completed.
7. then, after checking on the staging environment (including QA regression testing if needed) PR a production release as per step 1.
8. now and again we will reset dev to match main just to keep the history tidy.

index.html Updating Strategy

Japanese language support is available for brave-talk. So whenever we are adding new content in index.html, we have to make the following changes:

1. add i18n-element-text class to the new tag
2. add appropriate id to the new tag which is used as a key for translation
3. add the appropriate content translation in the src > locales. The format is {key: tag id, value: transated version}

Prettier

This codebase uses prettier to keep the code formatted nicely and avoid needless changes in diff. It's recommended that you configure your editor to reformat as you go. There's also a pre-commit hook configured that should reformat on commit, or you can run npm run format.

brave-talk's Issues

Update branching strategy

In order to cater for both short and longer lived feature development (especially those that require review), update the branching strategy to support this, following the pattern established by

prod => releases to talk.brave.com (production)
main => releases to staging
dev => releases to development

1. production releases should only be made after we have been able to test exactly what we're going to release on stage. So these should always be a PR from main to prod that's basically "make production === stage". These are the only PRs that should go to prod.
2. therefore a merge to main should only happen when we think the feature is ready to release.
3. when starting a piece of work, create a branch off main and keep adding commits there until it's ready to release.
4. to test the code in a real environment, either:
   a. merge that branch to dev - but don't delete the feature branch. Repeatedly merge the feature that feature branch to dev as work progresses. Merges to dev do not require PRs.
   b. manually initiate the "Deploy to Development" github action selecting that branch - this will deploy just those changes to development.
5. In-development QA of this feature should happen on dev.
6. when it's good to go merge the feature branch to main - with a PR and security review if required. Do not merge until all reviews are completed.
7. then, after checking on the staging environment (including QA regression testing if needed) PR a production release as per step 1.
8. now and again we will reset dev to match main just to keep the history tidy.

Tasks to implement

• create a prod branch matching current main
• create a dev branch matching current development
• update readme and github action scripts
• update branch protections accordingly
• delete development and staging branches

Cancel Sign request spits out JSON response instead of cancelled message

Description

Cancel Sign request spits out JSON response instead of cancelled message

Steps

1. Clean browser profile
2. Create a new Brave Wallet
3. Visit https://talk.brave.software and create a Web3 Talk room
4. Click on Start 1:1 Web3 call button
5. Cancel Sign request prompt
6. JSON output is shown instead of cancelled message

Actual Result

Expected Result

Have a well formatted message instead of JSON response

Use chatbox API to implement separate chatbox window

cf., https://bravesoftware.slack.com/archives/C012FR6DJCV/p1589923420001500

if the tab is large enough, the percentage should be less...

There is some interest in having the chatbox be resizable. This problematic with tile management. The solution is to implement a chatbox in a separate iframe. Here is the API from Jitsi:

Chat messages APIs:
Remove chat button from toolbar
(if button removed there's no need for hiding the chat box by toggling it https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-iframe#togglechat - but if needed we can expose an isChatOpen to get current state)

Send Message:
https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-iframe#sendchatmessage

Message received event:
https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-iframe#incomingmessage

https://jitsi.github.iojitsi.github.io
IFrame API · Jitsi Meet Handbook
Embedding the Jitsi Meet API into your site or app enables you to host and provide secure video meetings with your colleagues, teams, and stakeholders. The Meet API provides a full complement of comprehensive meeting features.

https://jitsi.github.iojitsi.github.io
IFrame API · Jitsi Meet Handbook
Embedding the Jitsi Meet API into your site or app enables you to host and provide secure video meetings with your colleagues, teams, and stakeholders. The Meet API provides a full complement of comprehensive meeting features.

https://jitsi.github.iojitsi.github.io
IFrame API · Jitsi Meet Handbook
Embedding the Jitsi Meet API into your site or app enables you to host and provide secure video meetings with your colleagues, teams, and stakeholders. The Meet API provides a full complement of comprehensive meeting features.

Virtual background not applied until after room join

At a meeting this morning, we noticed someone joined with a virtual-background already configured, but it wasn't applied for the first second or so after they joined, and I could see their real environment.

This is unpleasant if someone is relying on that feature to protect their privacy. We should make sure not to send video until the background replacement is functioning.

Deploy new configuration options

disableTileEnlargement - set to false to have files enlarge to cover the screen with a 16:9 ratio.

autoHideWhileChatIsOpen - set to true to have the toolbar autohide when the chat window is open.

Warn user before closing window/browser if active Talk session

fix "not a subscriber" diagnostic to reflect the actual error...

Description

Show proper message when a user doesn't select any POAP/NFT when creating a Web3 Talk room

Steps

1. Create a premium subscription for Talk
2. Create a room
3. Do not select required NFT/POAP
4. Click on Start Web3 call
5. Shows Sorry, you are not a subscriber message instead of showing the actual reason

Actual Result

Wrong.Error.Message.mp4

Expected Result

Should show the actual reason for not creating the room

Additional Information

cc: @mrose17

Investigate talk.brave.com layout on iPhone SE 1st gen

cf., https://community.brave.com/t/display-issues-with-mobile-client-running-on-older-iphone-se-1st-gen/364269

i can't figure out where some of the text and images are coming from. it is rather odd.

Disable "pull to refresh" on mobile browser

cf., #8 (comment)

Fixed by #27

Create public brave-talk repository

with master, staging, and development branches for the beta site. the alpha site branches can stay here.

before releasing, please have a security review to ensure we aren't leaking anything...

also: we would keep this repo private, just mark it deprecated...

• create brave-talk private repo
• ensure the github secrets necessary for deployment are copied across from brave-together (these are used by .github/workflows) - this will need devops support:
  • AWS_DEVELOPMENT_ACCESS_KEY_ID
  • AWS_DEVELOPMENT_SECRET_ACCESS_KEY
  • CLOUDFRONT_DEVELOPMENT_DISTRIBUTION_ID
  • AWS_STAGING_ACCESS_KEY_ID
  • AWS_STAGING_SECRET_ACCESS_KEY
  • CLOUDFRONT_STAGING_DISTRIBUTION_ID
  • AWS_PRODUCTION_ACCESS_KEY_ID
  • AWS_PRODUCTION_SECRET_ACCESS_KEY
  • CLOUDFRONT_PRODUCTION_DISTRIBUTION_ID
• extract latest revision only of development-beta, staging-beta and master-beta to that repo, dropping the beta suffix
• disable deployment from brave-together
• ensure deployment to all environments works from brave-talk
• ensure the development-dev branch works too

At this point all development must move to brave-talk.

• enable dependabot
• transfer all open issues
• replace the default branch readme on this repository to point to brave-talk
• archive this repository, ensuring that new issues and new commits cannot be added
• raise security review for making brave-talk public
• after completion, switch from private to public

Increase room size from 2 to 4 participants in the ad-supported free tier

Change 1x1 rooms in the free tier to allow 4 people. All other features remain the same, including the Ads-enabled requirement. The change affects new rooms only. See spec for details. https://docs.google.com/document/d/1Y066v3YFLNYg4UzKvUYzOV-PaB3Gbwqmdmv4mXGKiDg/edit#

Warning message is not shown when domain is different

Description

Warning message is not shown when domain is different

Steps

1. Create Web3 Talk room
2. Click on join the call to initiate sign message
3. No warning shown to user when the request URI is different

Actual Result

Expected Result

Additional Information

cc: @mrose17

Needs automated tests + npm audit + codeql checks running on every PR

See #50 (comment) for details. codeql is set up in #103 but may need someone to set it up as a required status check for PRs in github settings after it is merged.

Refresh credentials, as needed, when invoked from the Google Calendar extension

cf., #220

Low resolution image for Brave Talk on wallet connect panel

Description

Low resolution image for Brave Talk on wallet connect panel

Steps

1. Create Web3 Talk room
2. Wait for Wallet panel to open
3. Has a very pixelated image for Brave

Actual Result

Expected Result

Good resolution image on wallet panel

Additional Information

cc: @mrose17 @brave/design-team

Refresh tokens disappearing

Somehow the refresh token for one of my rooms disappeared? How, I don't know. All I know is I went to the room and the JWT didn't have moderator-privileges. I am sure that I was in the room within the last 10 days!

Warn user if JavaScript is disabled

cf., #179 (comment)

Failed to connect wallet message when Wallet onboarding is triggered

Description

Failed to connect wallet message when Wallet onboarding is triggered

Steps

1. Create a new browser profile
2. Visit https://talk.brave.software and click on Start Web3 Call
3. Triggers wallet onboarding
4. Finish Wallet onboarding and go back to Brave Talk tab
5. Remains at Failed to connect wallet message doesn't trigger a page refresh automatically to connect to Wallet

Actual Result

Failed.to.connect.to.Walllet.mp4

Expected Result

Once onboarding is done closing wallet tab or switching back to Talk tab should trigger page refresh to connect Wallet and create the call

cc: @mrose17

Load JAAS bootstrap JS asynchronously

The bootstrap code doesn't need to block the home page loading; however, the code has always loaded synchronously in the home page.

A recent issue with pinning to a previous JAAS release required a change to the code -- #785 -- that loads the bootstrap; however, the loading continues to be synchronous.

Since the launch of the service, no one has ever noticed the synchronous behavior. An enhancement to load the code asynchronously with the home page would be good.

give `/talk` non-subscribers options to create the call anyway and to login

brave/brave-together#258 implemented logic to try to resolve the subscriber vs non-subscriber race condition when starting a call from the slack /talk plugin. This works great if at least one person trying to join the call is already logged in as a subscriber on the browser that slack chose to open.

However, if that's not the case, it appears to get stuck in a loop and the user may have to resort to using a competitors' product. The only way out of the loop is to hack the url to remove ?create=y.

See e.g. https://bravesoftware.slack.com/archives/C01BC0K5QP7/p1636646236160700 and https://bravesoftware.slack.com/archives/C01BC0K5QP7/p1636390882144400.

When showing the "waiting for a subscriber" message we should additionally provide buttons to "create a 1:1 room" and "login".

Improve data available for product analysis

We have very limited visibility of talk product usage currently, making it difficult to prioritise product changes. This issue proposes improvements to stats collection, with the aim of carefully ensuring we do not break user's privacy.

Current

Currently the subscriptions service logs and presents to metabase each time a room is created, with the following data:

Column	Description
name	the room name
tier	paid (for subscribers) or free (for 1:1 calls)
head_count	the number of JWT's issued to allow entry to the room (incremented every time a new JWT is issued)
created_at	when the room was initially created

Note head_count represents the total number of people who have been issued a token to enter the room. So a weekly meeting of 60 people would present a head count of 60*4 = 240 over a typical month.

Limitations

Two particular cases make analysis difficult currently:

1. scheduled use rooms. e.g. the same room used for weekly meetings. We know when the room was created; but if that room was used on an ongoing basis for e.g. weekly team meetings, we do not have records of that. We therefore have no visibility on the popularity of this use case; nor on how much this contributes to overall usage. Also, 8x8 will include this in the monthly active user counts, which we cannot cross check.
2. single person rooms. 8x8 apparently do not charge us for rooms that are created, but only have a single person (the creator) join. Our own MAU stats does not take this into account, causing a discrepancy.

Proposal

This issue proposes that in addition to the above we log and present to metabase each time we issue a token for entry to a room:

Column	Description
room_identifier	a unique identifier derived from the room_name e.g. hash(room_name + nonce)
timestamp	when the event happened
event	"created" - the room was created; "joined" - a ticket to join the room was issued; "moderator-renew" - a renewal of the moderator ticket was issued
new_mau	true or false: was this use flagged to 8x8 as a new monthly active user?
tier	paid (for subscribers) or free (for 1:1 calls) - only populated on "created" events

No additional data is stored against these events, just those four fields. In particular there is no link to the user, the subscriber or user agent.

With this data, we can better understand long term usage of rooms, and better predict our cost base - addressing both of the limitations noted above.

This approach will be subject to privacy review before implementation.

Add calendar extension for Brave Talk on Google Calendar

This is a fork/branch of the Jitsi calendar plugin in order to add a Brave Talk confab URL to a calendar entry. The idea is to put the CRX file on Brave Talk so folks who use Google Calendar can add a confab URL to the calendar invite, e.g.,


(Note that the icons are still Jitsi icons. These will be updated to Brave Talk icons soon.)

Add persistence to room settings

When a moderator sets a passcode, persist this in the subscription service.

This requires webhook support, which is being investigated.

Temporarily remove `startLastN` to gauge performance issues

Res ipsa loquitur

Add additional context to a "Request failed: ..." message

The current error screen lacks information on what went wrong. We should add context on why a request is failing and what the status code means.

update copyright year in footer for premium pages

Allow vanity Brave Talk URLs

These would be valuable even if they were limited to intra-brave conversations

so something like talk.brave.com/@pes10k

from brave/brave-together#183: Provide subscribed users to create a custom URL that can be shortened and shared for calls. Current implementation has a big alphanumeric value after domain which is not easy to remember or spell out. Can make the feature a premium option and allow user customization for future.

an additional feature would be to automate the save-as-shortcut functionality when creating a vanity confab url

Add "create a link for later" button

On the brave talk home page, in addition to the "start a call" button add a "create a link for later" button.

This should:

• generate a room url
• create the room and store the moderator & refresh token in localStorage
• copy the room url to the clipboard (and display it).

I.e. all the same steps as actually creating the room, but instead of opening the call it copies the url to the clipboard.

Every participant is shown as Moderator

Description

Every participant is shown as Moderator

Steps

1. Create a Web3 Talk room using premium credentials
2. Select the NFT type for required collections when creating the room
3. Join the call with a participant NFT
4. Join the call from a different browser with a wallet which doesn't have any NFT
5. Check participant list, shows everyone as moderator

Actual Result

Expected Result

Should only show the room creator as Moderator

Additional Information

cc: @mrose17

Easily find Brave Talk tab - icon in top level Brave UI

It would be great to have some kind of an icon that only appears on top level UI when a Talk session is active. The button would go back to a Brave talk video. I find I sometimes lose the tab too easily because it’s mixed with other tabs. I wouldn’t want the button there when no Talk session is active though.

Perhaps using a different task bar icon is another possibility.

I think the media icon might be the best place to put it where playing videos go.

Localize Brave Talk for JP

Step one: find out the current status of adding i18n

Dropdown chevron should be in alignment with the expand/collapse buttons

Description

Dropdown chevron should be in alignment with the expand/collapse buttons

Steps

1. Visit https://talk.brave.software
2. Click on Start a Web3 call
3. Connect Wallet and continue
4. Dropdown chevron isn't aligned with +/- buttons

Actual Result

Expected Result

Additional Information

cc: @mrose17

Turn down logging client side

It appears that we're logging some things that don't need to be logged such as the JWT token stored in the local storage and some erranious TimeLimitedCredential which aren't normally supposed to be logged. If you want examples of the data I was seeing in my console, check out this slack message (https://bravesoftware.slack.com/archives/C021S0FN3V1/p1678981705173359). I don't want to post the specific information here publicly since at least the JWT is sensitive.

Some of this information may have been appearing if people were using developer builds to access the call though, so we should double check if this is something unique to when @mrose17 @tackley and @johnhalbert were on a call or if this is actually information that's being leaked in production.

For talk.brave.com, make the "Remember My Decision" dialog very prominent

This issue overtakes brave/brave-together#185 ... it originally suggested we maintain a "allowed" list of sites that included talk.brave.com, so the user wouldn't have the friction of having to allow A/C for confabs, nor the confusion if they "fat-fingered" the response.

rather than make a precedent for the "allowed" list, it is suggested that the permissions dialog be very prominent.

i'm not sure what such a design would entail, but that's the current thinking.

TODO: Web3 Brave Talk

notifications

1. when nft/poap calls fail, report this to the user.

2. whenever reporting, put the text above the button (not below) and make the text larger and bolder. here is what we see now:

3. cf., #832

minor styling

4. when mousing over the Avatar NFTs, the user should see a tooltip with the title of the NFT or collection

5. style the "Call permission type" text to be the same size as the drop-down text for "NFT Collection / POAP"

non-premium/premium

6. if a premium subscriber, the text should be "Start premium Web3 call" instead of "Start free 1:1 Web3 call"

7. cf., #821

8. cf., #823

change of address for wallet

9. if you change wallet addresses (or turn off access), we need to redo the NFT/POAP calls, cf., https://wallet-docs.brave.com/ethereum/provider-api/events/#accountschanged

Disable the "Trying to speak? You are muted." notification

This can be done only globally.

Add linting to this repo

This repo uses Prettier as a code review tool. @diracdeltas brought to our attention, however, that a majority of other Brave repos use Standard as their code review tool.

Standard is a linter AND can function as a formatter while Prettier is only formatter. This means Standard fixes formatting just like Prettier but also catches code quality issues.
https://prettier.io/docs/en/comparison.html

Complete Standard documentation:
https://standardjs.com/

I believe we will have to use the TypeScript variant.
https://standardjs.com/#can-i-use-a-javascript-language-variant-like-flow-or-typescript

Talk should refresh periodically when sitting on the home page

On e.g. conference room systems used just for Brave Talk, the home page may remain displayed for many hours.

If there are recordings, this will continue to show long-expired recording links. It also may potentially be using an old version of the brave talk code.

When sitting on the home page for a long time, Talk should periodically refresh - perhaps a multi-hour http meta refresh would be sufficient, although this might interrupt calls which would not be desirable.

Thanks to @bradleyrichter for the report.

Brave Talk intermittently spinning when on Brave

I can't repro this now but I've run into this twice now so figured I would file an issue and update it if it happens again.

Every now and then Brave Talk spins indefinitely for me i.e. I would go to a room and it would be stuck in a loading phase. This has happened on both Brave Nightly and Stable. Unfortunately I forgot to capture a screenshot + console log, I'll come back and update this issue if it happens again.

@fmarier mentioned that this might happen if I'm on Secure DNS + on VPN.

cc @mrose17

Add additional context to a "Request failed

Re-enable expiration of refresh token

This was disabled for #81 ... since the issue hasn't re-appeared, we should probably re-enable the expiration.

iOS reports "consecutive newline characters"

Description

Consecutive newline characters message not shown on desktop

Steps

1. Join a Web3 call on Desktop
2. No encoded message warning is shown
3. Join the same call on iOS 1.50 build from TF
4. Shows encoded message warning

Actual Result

iOS	Desktop

Expected Result

Consistency across platforms

Additional Information

cc: @mrose17

Keep a counter of the number of times the "Install calendar extension" pop-up is shown

After 3 times, set extension_promo_dismissed to true

Room is full message should link to the paid account sign up

We should put an additional message and link, "Click here to sign up for a paid account and remove these limits" or some such and link that directly to the Brave Talk checkout. This will help interested users know what to do next.

Add recording links to Brave Talk

How things work right now:

• when a recording starts/stops, all participants receive an audio warning (e.g., "Recording is on"). In addition, the red REC indicator is visible at the top of the window whenever recording is occurring.
• when the moderator starts a recording, the moderator gets a notification with a "Copy Link" to allow the moderator to down the link a few minutes after the recording has been stopped by the moderator (or all attendees have left the room).
• recordings are no longer available 24h after the recording ends.

API changes:

• the recordingStatusChange event is sent to all participants when a recording/stops starts, i.e., { "on": true, "mode": "file" } or { "on": false, "mode": "file" }
• the recordingLinkAvailable event is sent only to the moderator when recording starts, e.g., { link: "https://..." }
• a new URL -- https://api-vo.jitsi.net/jaas-recordings/link/details?url={{URL}}-- is available to return { expiresAt: ... }

Site changes (for moderator only):

• the recording URL along with room name, creation and expiration timestamps are stored in localStorage, and entries are automatically pruned as they expire.
• when the site loads, this information is displayed to the user allowing them to download the files.
• the new URL is not used in this implementation.

here is a sample from the development site. (note that the styling isn't done...)

Have dev/staging use separate JAAS accounts for webhooks and branding develop/testing

res ipsa loquitur

Add 'Create link' button to NTP widget

The Brave Talk NTP widget has a button to 'Start video call'. This is a very useful widget, and it will get a lot of exposure. Just as we have on the talk.brave.com home page the widget also needs an option to 'Create link' so that people can get the URL for a call and share it with people easily.

Add new E2EE support

Res ipsa loquitur

Add status line to talk.brave.com to give notices on system outages, etc.

The question is where to get the data from...

No option to go to premium page when trying to start a web3 call without premium account

Description

No option to go to premium page when trying to start a web3 call without premium account

Steps

1. Clean profile
2. Restore wallet which has NFTs/POAPs
3. Visit https://talk.brave.software and click on Start a Web3 Call
4. Sign wallet access request
5. Select NFTs/POAPs listed
6. Click on Start 1:1 Web3 call
7. Shows Sorry, you are not a subscriber but nothing more
8. Console shows Web3 Calls Require Brave Talk Premium Subscription

Actual Result

Expected Result

Probably better to show the response message on the page and have a link for https://account.brave.com/ to navigate for subscription

Additional info

cc: @mrose17