Set up material-ui w/ basic custom theme and styled-components infra.

• credits icon
• volume icon
• full-screen toggle icons

• juxtapose block
• small, medium, full-screen variations
• accompanying controls

• rewrite headline component
• load the component in the app, idoc
• make an editable variation of the component
• allow for changing properties of the component in the app
• allow for changing inspector properties of the component in the app

• data schema
• responsiveness
• first chapter variation
• last chapter variation
• allow for background image w/ blend mode?

• idoc
• styleguide
• app
• site
• ui

• simple video/audio transcript player block
• allow for background image when playing audio
• define acceptable media formats
• define data schema
• accompanying controls

• define supported video and audio formats
• create sample ffmpeg conversion processes w/ support for error/success/loading states

As a developer I want to be able to build and package the app:

• mac
• windows

• blockquote component
• size variations
• allow for audio to be played
• accompanying controls
• data schema

Please check packages/idoc/src/chapters and packages/idoc/src/essentials for naming conventions and folder structure.

When opening a project folder we need:

• ability to read children json files as data
• ability to write over children json data files from within the app

Also… we don’t need to be running any Gatsby tasks till Preview or Export being triggered from the app.

• Topbar
• Shortcuts

• page transitions
• headline elements

• nav anchor variation
• headline building block
• allow for background image
• data schema
• allow for animations
• editable variations
• accompanying controls
• s, m, l variations

• https://jamie.build/styled-theming.html
• https://github.com/styled-components/styled-theming

• define media types supported
• ui components
• data schema
• accompanying controls
• size variations
• …

• it’s not ideal how the components responds to all different breakpoints
• hover/active interactions on the items need tweaking
• …

• copy block
• test against s, m, l variations
• accompanying controls for bold, italic, link, ecc…

• allow for 2 columns to start with
• define schema
• accompanying controls
• allow for full-width variation

We need a way to assemble pages out of a json file containing list of components with their props and order.

We want to be able to switch between document pages

• image block w/ and w/o caption
• size variations
• data schema
• accompanying controls

• size variations
• data schema
• accompanying controls
• …

• building block
• data schema
• s, m, l size support
• accompanying controls

• data schema
• media support
• playback/volume change interactions
• …

• Meta information panel
• Brand experience panel
• Sound experience panel
• Motivation panel

• data schema
• interactions
• icon font
• breadcrumbs
• breadcrumb tooltips
• prev / next
• hamburger
• take action
• share

• data schema
• responsiveness
• interaction

• themeable variations
• data schema
• reponsiveness
• micro interactions: hovers/active
• abstract anilink/button component variation?

• define media types supported
• ui components
• data schema
• accompanying controls
• …

We need an easy to manage and nicely abstracted theming for the idoc:

1. review:

• use of ${color.xyz} -> port to a theme provider where possible
• font sizes ${setType.xyz}
• roundness
• animation times
• …

2. abstract

• colors
• font-families
• features such as borders, underlines, ecc…

• localstorage not

• allow for loading ui/ things from within gatsby-default-tpl
• allow for styleguide imports from within Gatsby
• set up MUI theme provider
• set up styleguide infra

• define variations
• data schema
• accompanying controls
• editing capabilities for links, italic, bold?

• blend modes
• full-size only
• data schema
• responsiveness
• …

page inspector controls

• page details
• list components
• rearrange components
• target components to element inspector (also w/ scrollTo)

update document inspector controls

• new color pickers
• plug in motivation controls
• plug in meta data for helmet
• plug in typography controls and brand color controls
• plug in story cover controls
• plug in story logo controls
• plug in story favicon controls
• plug in story sound controls
• plug in headline backgImage controls

misc

• don’t show page avatar image if cover disabled for that particular page
• fix broken gatsby image reference backgImage: { name: 'xyz' } for headlines, ecc.
• last round of tests for all image assets so far

Ideally one command to launch electron chrome and app dev server:

• electron dev env set-up
• cra or gatsby

Steps to reproduce:

In sound experience settings

1. enable soundtrack
2. play media
3. pause media
4. disable soundtrack
5. move focus to another app window
6. hit keyboard media Play key

Result:

Audio restarts playing while it should not.

Replace Catalog w/ Storybook.

• data schema
• interactions
• responsiveness
• …

• top controls
• bottom controls

Would be nice to have a preloader and some nice page transitions when navigating between the pages.