Create tutorial recording and playback feature

[danielbinder]

Sometimes, it is hard to conveigh certain steps over writing.

That is why we want to create a recording and playback feature. This should record certain actions taken with their timestamp and encode them into the link. When someone calls that link, the actions taken are played back.

Tasks:

• Go through the 'I want to make a change' checklist
• Create a 'Recording' tab (fieldset) with a 'Record' button in the frontend
• Clearly indicate in this fieldset if a recording is currently in progress - e.g. change the button text to 'stop recording' and add a red circle to the fieldset. Also add a time for how long the recording is already in progress.
• Record the actions taken and their timestamp into a variable that is added to the link (like e.g. formula is here
• When someone calls this link, the actions should be repeated, but interruptable e.g. change the button text to 'pause playback' and add a green triangle (play button) to indicate a recording is currently playing. Also add a timer of how many seconds are left.
• Make use of well-known symbols for recording and playback in the buttons
• The recording in the link should not get destroyed by playback - only overwritten once a new recroding is made (after stop)
• State graph of the buttons:
  ⏺ Record -> 🔴 + ⏸ Pause + ⏹ Stop
⏸ Pause && recording started -> ⏺ Record + ⏹ Stop
  recording in link -> ▶ Play + ⏹ Stop
⏸ Pause && playback started -> ▶ Play + ⏹ Stop
⏹ Stop -> ⏺ Record