Can we please add in readme how to initialise this and pass in a timeline?

I seem to be getting that "is not a constructor"

⚠️ @eugenechu is currently working on this one ⚠️

Please read the help wanted guide before start.

Create react (preact) component of the timeline panel. It should take 100% of parent width.

The precise sizes in pixels:

Colors:

• small dash: #AE9BAE
• large dash and number label: white
• purple background: #512750

Shadow of the panel: 0 2px 4px black

All time labels are exactly in the middle of the large dash.

Requirements for the component

As you can notice from size illustration, gap between dashes is 4px, it should be defined in em units. So if you set font-size on the root of the component to 10px, the gap should be set to 0.4em so the result will be equal to 4px.
Having that component will receive scale property and the timeline will be scaled accordingly, simply by setting root's font-size to appropriate value. For instance, if scale property is 1.5 the font-size should be set to 10 * 1.5 = 15px. This will allow to scale the timeline by means of em units. All other sizes must not use ems, only the size of dash gap should scale.

The timeline should cover at least 20 seconds or 20 000 milliseconds.

Entire sketch mockup could be found here: link and here link.

Cheers! ~

We need this for the timeline-editor since the curve-editor will be a part of it.

mojs/mojs-curve-editor#8

⚠️ @eugenechu is currently working on this one ⚠️

Please read the help wanted guide before start.

Create react (preact) component of the main panel. It should have position: fixed, be at the bottom and take all width of the window.
It will have child panels - left and right:

• the left panel is fixed size of 165px.
• the right panel is fluid width of totalWidth - left panel width

And two buttons:

• resize button: you can drag and resize the panel vertically
• hide button: you can switch the state of the panel by clicking on the button, just like mojs-player can.
• both buttons are exact in the center of the right child panel.

Please note that the panel can have optional MojsPlayer at the bottom, so be sure that the panel doesn't go less than 40px while hide and resize happens. Component will receive player property that will define if player is present. Illustration with MojsPlayer at the bottom:

hide and resize buttons are separate components. Those have been used in mojs-player and mojs-curve-editor repos so you can copy them.

The sketch mockup - main-panel.zip

Cheers!

We need this for the timeline editor: mojs/mojs-player#2

Please read the help wanted guide before start.

Illustration:

Task:

Create react (preact) component of the timeline handle. It should take 100% of parent height and should be shifted -10px top :

Colors:

• purple background: #3D1B3C
• orange: #FF4F02
• lines: white

Component Requirements

It should receive shift prop and set that shift as translateX for the component.

Also it should receive scale prop that will affect the translateX value, regarding the simple formular: translateX({shift * scale}px).

Component will have horizontal drag/pan event handler but that's not relevant right now.

Entire sketch mockup could be found here: link and here link.

Cheers! ~

Need to add eslint-loader to webpack.config and linting rules file. The file could be a airbnb's eslint config or this one.