the main story (editor) view, used to edit/create stories (funken):

• top floating action bars (only 1 can be visible at a time)
  • Save Action Bar (default):
    • (x) (icon button) (liquid glass)
    • (✔︎) (icon button) (liquid glass)
  • Action Controls (custom action buttons based on the current action thats in progress)
    • an action may define its own set of action controls (max 2, one left and one right)
• main story canvas (9:16), containing the story (z under the top buttons)
  • single page
  • overflow auto (y scrolling if necessary; only for foreground)
    • when moving a fg element over the bottom of the canvas, the canvas becomes scrollable and auto scrolls while the element still moves
• bottom action bar, containing buttons that can trigger various edit actions:
  • text
  • camera
  • gallery (no functionality yet, future)
  • microphone (no functionality yet, future)
  • location (no functionality yet, future)

when saving a story,

• save the data (canvas) so that the story can be edited again
• save also a render (video / photo depending on the type) to the data model (this will be used for overview grid thumbnails)
  • async as background task with circular progress indicator on the overview page for the corresponding story (cant click / share etc. while in progress)

Text §

• fg element

when clicking

• on the text button from the action bar,
• OR an existing text element then
• show the keyboard
• and edit a textfield
  • transparent background
  • when typing, automatically resize the textfield width/height
    • max width = canvas width
    • max height = canvas height (if reached, add y scrolling overflow)
  • textfield border indicators (dotted lines)
  • resize handle on the bottom right of the textfield
    • when dragged, resizes the text field accordingly and adds y scroll overflow if necessary
• and show the Action Controls with:
  • “Cancel” (discards the changes)
  • “Ok” (exits text action and leaves text on the canvas)

when clicking

• on “Ok” then
• exit the text editing action and dismiss the keyboard

when dragging

• a text element then
• move that text element on the canvas accordingly

when pinching/zooming

• a text element then
• scale it accordingly

Future §

• allow triggering text edit when clicking on an empty spot on the canvas
• while in text action, and clicking anywhere outside the text element, then do the same as the “Ok” button

Camera §

• bg element
  • background size cover

other:

• max vid size: 60 seconds
  • dont allow picking longer videos
  • stop recording after 60s

when clicking

• the camera button from the action bar then
• switch the bottom action bar to the camera mode:
  • gallery button (opens gallery app to pick photo/video)
  • shutter button (only supports taking photo for now, long press for video in the future)
  • flip camera (front/back) button
• and show the Action Controls with:
  • “Cancel” (exit the camera action)

when clicking

• the stutter button
• OR selecting a video / image from the gallery then
• set the image/video as background (videos keep looping)
• and show the Action Controls with:
  • “New” (discards the image/video and starts the camera action fresh)
  • “Ok” (-> adds the image/video as the background of the story and exists the camera action mode) and
• switch the bottom action bar to camera mode - edit (photo/video)
  • video:
    • mute button (when toggled on (default), the vid has no sound)
  • photo:
    • crop button (when clicked, lets the user crop the image) until either “New” or “Ok” are clicked