maxmmyron / clips Goto Github PK
View Code? Open in Web Editor NEWBlazing-fast editing in the browser
Home Page: https://clippy.mov
Blazing-fast editing in the browser
Home Page: https://clippy.mov
Video: use input.files to get media stream (depends on #2)
Audio: AudioContext.createMediaElementSource()
<- takes in HTMLMediaElement
(works for <video>
and <audio>
)
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.
<
media size>
media sizeDepends on #1
Should default to approx 5s clip when dragged into timeline
why the hell not
Deleting elements will reorder them in some unknown fashion; it must've gotten messed up while working on #21
Should be supplied at bottom of element.
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.)
#31 helps resolve this, but an ideal solution involves parsing video and finding some shot with a certain level of "vibrancy"
Seems do be regression due to #43
I'm particularly curious as to why???
.mov doesn't work currently
Media element should dynamically resize based on what is currently happening w.r.t. drag/drop events
dragstart
)mousedown
-> mousemove
: element resizes from MediaElement size to something smallerdragenter
)mousemove
-> Timeline hover
: transforms to a line and snaps to where it would be placedmousemove
-> Preview hover
: Preview video
element shows some kind of indication that it can play the mediadrop
)mousemove
-> Timeline mouseup
: TimelineElement
replaces media drag element, size transitions from 0 -> scaled duration widthmousemove
-> mouseup
(default behavior): element fades out, removed from treeWould be loaded and displayed in order, and shown in MediaPool as well
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)
Depends on #14
using import button should import new files that don't already exist in the media store.
Depends on #12
depends on #1
why can't chrome implement floating scrollbar :(
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
Mental note: \short clips would have their selectable area and edit edges overlapping, which may make it cumbersome to work with.
depends on #5
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.
Reproduce: import portrait aspect-ratio content and preview in player
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.
Should split current interface into two types: one for uploaded media (which is used in media pool), and one for timeline media.
Depends on #1
Section off into HH:MM:SS:sss; zeros follow leading digit in each section if not already max length
Minor bug
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
Would allow for a better default grid structure:
45% | 55% |
---|---|
20% | 80% |
Should export finalized video to specified type
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.