maxmmyron/clips

Blazing-fast editing in the browser

clips's Issues

Split audio and video into seperate contexts

Video: use input.files to get media stream (depends on #2)
Audio: AudioContext.createMediaElementSource() <- takes in HTMLMediaElement (works for <video> and <audio>)

Editor preview should use content from timeline

• audio: stringed AudioContext buffers
• video: video -> canvas

Remove promises from StudioMedia interface

Working with a struct of promises is a pain in the ass. It's better to just wait for the data to resolve/reject, rather than manually check and extract.

Timeline element thumbnail doesn't take up available space

• Should clip when < media size
• Should repeat (potentially update media thumbnail) when > media size

Support resizing grid dimensions

Depends on #1

Add support for image import

Should default to approx 5s clip when dragged into timeline

Add cute ascii character to confirm completed actions

why the hell not

Thumbnails array only consists of first frame

Improve media pool design

Dependent on #13

Media elements should:

• be locked to same height
• locked to editor aspect ratio #15

Media pool should:

• support flex-col or flex-row depending on width

Timeline reordering algorithm seems messed up

Deleting elements will reorder them in some unknown fashion; it must've gotten messed up while working on #21

Add support for audio clips

MediaElement doesn't have element name

Should be supplied at bottom of element.

Reimplement loader for unresolved clips

Dependent on #43
Unresolved clip data should show the spinner again, but shouldn't be in media pool store until resolved. If rejected, clip disappears (or shows error on clip container, only action on container would be to remove.)

Thumbnails stack when video ratio is <16:9

Editor playback buttons are not disabled when timeline is empty

`MediaPoolElement` with src whose video begins with black appear invisible

#31 helps resolve this, but an ideal solution involves parsing video and finding some shot with a certain level of "vibrancy"

zoom slider doesn't work

Seems do be regression due to #43

Clip thumbnails don't show on chrome

I'm particularly curious as to why???

Media drag element resizes window when mouse exits window space

disable playback buttons when editor is empty

Some media types don't work by default

.mov doesn't work currently

Implement dynamic media drag element styling

Media element should dynamically resize based on what is currently happening w.r.t. drag/drop events

Initial (equiv. dragstart)

• MediaElement mousedown -> mousemove: element resizes from MediaElement size to something smaller

Hover events (equiv. dragenter)

• mousemove -> Timeline hover: transforms to a line and snaps to where it would be placed
• mousemove -> Preview hover: Preview video element shows some kind of indication that it can play the media

Mouseup events (equiv. drop)

• mousemove -> Timeline mouseup: TimelineElement replaces media drag element, size transitions from 0 -> scaled duration width
• mousemove -> mouseup (default behavior): element fades out, removed from tree

Support dropping files directly into Timeline

Would be loaded and displayed in order, and shown in MediaPool as well

Hook up warnings/errors to cat

Depends on #40

Cat should use popover to display errors/warnings. Should be global sys for registering warnings (similar to "mow" click functionality but as a store)

Support different export aspect ratios

Depends on #14

Audio waveform doens't conform to offset clip duration

Support importing files multiple times

using import button should import new files that don't already exist in the media store.
Depends on #12

Move video controls to media player area

depends on #1

remove scrollbar visibility

why can't chrome implement floating scrollbar :(

Merge `TimelineVideoComponent`, `TimelineAudioComponent`, and `MediaPoolElement`

These all share a lot of code and can be simplified.
Instead of loading up thumbnails/buffers within the component, it's better to load this stuff on import, then just pull it from a store when we need it based on filename

Support editing timeline clip duration, start time, and end time with edge drag

Mental note: \short clips would have their selectable area and edit edges overlapping, which may make it cumbersome to work with.

light mode

Beginning/End buttons don't also pause playback

Implement media element drag/drop

depends on #5

• by default: visually similar to media pool element
• over timeline: expands to width equivalent to media length, shows element that indicates where it would be placed

Discussion: Refactor stores

Current system for studio, media, timeline, and drag-drop system seems pretty messy.
There is a simpler solution out there that doesn't rely on a bunch of different stores.

Implement video/audio timeline

Depends on #1, #4

Requires sampling of both video stream and AudioContext

non-16/9 media distorts preview player aspect ratio

Reproduce: import portrait aspect-ratio content and preview in player

Refactor design grid

Implement UI as a responsive 2x2 grid

May be best move to split 2x2 grid into two: a main 1col:2row grid, and one 2col:1row in each of these grid areas.

Improve media interfaces

Should split current interface into two types: one for uploaded media (which is used in media pool), and one for timeline media.

Implement Media Pool using `input.files`

Depends on #1

Cannot paste videos from clipboard into media player

Improve player time visuals

Section off into HH:MM:SS:sss; zeros follow leading digit in each section if not already max length

Player time doesn't update

Minor bug

Improve timeline positioning algorithm

Implement interactive timeline scrubber

Custom workspace bounds aren't saved on reload

Comfirm editor preview works with clips of short duration

There's only a <video> buffer of length 2 so it's important to make sure everything works with clips of short duration in event of lag

Allow multiple tabs in video viewport pane

Decouple Y-axis resize between rows

Would allow for a better default grid structure:

45%	55%
20%	80%

Implement video export

Should export finalized video to specified type