# Live typing

###### tags: `Live typing`

## algemeen

vanaf het moment dat user begint te typen (wanneer de inhoud van de chat-inputbox wijzigt) moet sowieso een 'user is typing' control message naar de server gestuurd worden
met setTimeOut werken: wanneer de inhoud van de inputbox voor bepaalde tijd (timeOut s) niet verandert wordt een ander bericht gestuurd naar de server (bv. user not typing anymore)
per inputbox (dus per gebruiker) bijvoorbeeld 3 toestanden:
- typing: gebruiker heeft minder dan timeOut s geleden nog getypt
- idle: tekstbox is niet leeg, maar gebruiker heeft al timeOut s niet meer getypt
- default: tekstbox is leeg
4 toestandsovergangen: default -> typing, typing -> idle, idle -> typing & typing -> default
keystrokes/3 bolletjes bij zowel dm's als 3D wereld
per toestandswijzing (on entering state) bericht sturen naar server

server houdt bij wie aan het typen is en in welke chat, en bepaalt wie hiervan op de hoogte gebracht dient te worden.

server stuurt door naar andere users, deze krijgen dan indicatie te zien:
- bij DM's/vrienden: 3 bolletjes die:
-- zichtbaar zijn wanneer de inputbox van de user niet leeg is
-- bewegen wanneer gebruiker actief typt (dus inputbox is niet leeg én inhoud wijzigde minder dan 1s geleden)
-- afwezig zijn wanneer de inputbox leeg is
- bij DM's/vrienden wanneer chat openstaat: afhankelijk van instelling -> live zichtbaar wat gebruiker typt
- 3D room: in de buurt van tekstballon waarin wat gebruiker zegt staat een indicatie van het feit dat de user aan het typen is (bijvoorbeeld 3 bolletjes)
- in groepschat: namen van gebruikers die aan het typen zijn weergeven boven inputbox.

## live typing vs playback
om verwarring te voorkomen:
- Live typing: in real time aangeven of gebruiker aan het typen is en eventueel wat gebruiker aan het typen is
- playback: play messages in chat history at the same speed they were typed by the user in chat history

## Live-typing protocols
- Voor zowel DMs als tekstballonnetjes in de 3D-wereld
- Als de gebruiker keystrokes ontvangt : elke seconde een keystroke update
- Als de gebruiker geen keystrokes ontvangt : update over toestanden (default, typing, idle)
- Technisch : schema liveTypingUpdate met toestandswisselinformatie OF keystrokes
- 2 verschillende protocols voor channels & DMs, bevatten elk een liveTypingUpdate

const LiveTypingUpdate = {
    updateType : Default/typing/idle/keystrokes, // gebruiken indien geen keystrokes meegekregen
    content : [string, number][] // prioriteit, enkel die nieuwe van de laatste seconde, volledige inhoud van inputbox + timing -> content = '' impliceert gebruiker typt niet, number is absoluut tov het begin van het typen
}  

// protocol : 
type liveTypingUpdate = {
    fromId : string,
    inGroup : boolean, // Whether the update is in the current group
    channelId : string | undefined, // undefined if in limbo, ignore if inGroup = false,
    update : LiveTypingUpdate,
}

client.sendLiveTypingUpdate()
onLiveTypingUpdate()

## enkele instellingen die hierbij belangrijk zijn:
- of je je keystrokes deelt is ook belangrijk: enkel als ze gedeeld worden kan playback in chat history of live bekomen worden
- of andere gebruikers mogen zien wat je aan het typen bent, want dan zien anderen ook wat je nog backspacet
- of backspaces mogen weergegeven worden bij playback
- of je wil dat berichten waarvoor de keystrokes voor jou beschikbaar zijn in de chat history worden geplaybackt
- een instelling die je toelaat om het tempo waaraan berichten in de chat history geplaybackt worden aan te passen (snelheid (dus keystrokes) vermenigvuldigen met bepaalde factor)
- of je je eigen berichten wil naspelen aan de snelheid waaraan je ze getypt hebt

P.S. het in real time afspelen van wat een gebruiker typt zullen we hoogstwaarschijnlijk laten vallen.
P.P.S. zou wel nice zijn
oplossing voor veel client-server verkeer: om de seconde keystroke data van de laatste seconde doorsturen, ipv in real time on update

## references
nuttige links/inspiratiebronnen:
https://observablehq.com/@grantcuster/textbox-typing-playback
https://codepen.io/familjenpersson/pen/YzGmWOv
https://codepen.io/uzor13/pen/MxGyGp