"Livestream-to-earn" Template App "Live" Indicator

[psudoanon]

Implement a "Live" status indicator that switches from grey (when not connected via RTMP) to red (when connected)

[chrishobcroft]

Here is a proposed design for the UX flow:

State 1 - immediately after app launches

Show camera view only with flash on and microphone on etc. (no network required yet)

_This way if their device isn't powerful enough to generate an Ethereum address, then they still see their live camera feed.

State 2 - After creating / looking up local Ethereum Address

(no network required yet)

Display Eth address in puce #faf5ef

At this point, there should be a transient notification saying that the app has copied the app's wallet's Private Key to the clipboard. This way, the user starts to learn that their 0x... address is related to a Private Key.

This way, if the user has no internet connection, they will still see that they have an Ethereum address with Public Address and Private Key.

State 3 - After started streaming

Immediately after the app attempts to publish to the rtmp endpoint

Add "off-air" symbol in puce #faf5ef (see asset below)

This way, they get an idea that they are not "on-air", even if they have an internet connection

State 4 - When balance becomes available, e.g. from Infura (or Connext?):

Show address and balance in green #00eb87

This way, they know they have direct access to the money they control.

State 5 - When connecting to rtmp endpoint is confirmed:

When it becomes clear that the connection to the rtmp endpoint has been made, and content is streaming.

Show "on-air" in green #00eb87 (attached .png file below)

This way the Publisher knows they are "on-air"

State 6 - After the ENS reverse name lookup has found that the address has an ENS name:

The app should query ENS with the Ethereum address, to see if there are any names associated with the address.

Show the ens name in green #00eb87

This way, a user can start to address their content using their private key on ENS webpage, to aid in content discovery - perhaps as part of this feature request on the Consumer app :)

State Transitions should Fade

All state transitions should be fades - like in this video demo: https://youtu.be/NNOeU8NLEEs

Font

All fonts rendered using LL_AkkuratMono_OTPro (attached below)

Assets

colour-0 = #faf5ef puce
colour-1 = #00eb87 green

note: these colour codes should be configurable during the build of the app, and perhaps even just denoted as colour-0 and colour-1

Font: LL_AkkuratMono_OTPro.zip

[chrishobcroft]

Also, need to manage state in the case that:

• Cannot retrieve balance / ENS name from Ethereum / Connext

• Disconnected by rtmp endpoint