jamiewohletz / katana Goto Github PK
View Code? Open in Web Editor NEWWeb app for slicing YouTube videos into repeating segments.
Home Page: http://katana.red
License: MIT License
Web app for slicing YouTube videos into repeating segments.
Home Page: http://katana.red
License: MIT License
When the user enters a YouTube video URL into the app, the app must create a "project" object identified by the video ID and save it into LocalStorage. These projects must be displayed and updated instantly in a vertical bar to the side of the main player.
The most recent project, if it exists, must be loaded into the player when the player first loads.
Lastly, if a user enters a video URL containing a video ID existing in the known projects, the corresponding project must be loaded up rather than creating a new project.
This feature allows users to slice up multiple videos and refer to them later without having to have an account. In fact, the only downsides of this approach are
a) Projects cannot be accessed on different devices
b) Clearing the cache will destroy all projects
For now, these are acceptable downsides, because a full-fledged account system seems like overkill.
The app needs a major rework. Desired features:
I would like to move away from Ember and start over again in React.
When you load a fresh video in (no project associated) and, without clicking play, press the Clip button, the slice will be full width. This is undesirable.
When you enter a new URL and a project is created, the project list should reflect that a new project has been created and saved.
Switching between projects does not trigger an update on the URL input.
The clip button must be disabled when no video is loaded in.
That storage service I wrote is fragile and I'm sure full of bugs. We need to use Ember Data. The problem is just saving things in localstorage. Need to find an appropriate addon that will allow us to do that with Ember Data 1.13
The user can seriously screw up the app right now if they switch projects while slicing. We don't want that one little bit!
Think this can be done just by wrapping it in a
tag, right? Most browsers will autofill it then.Should be able to delete projects.
Right now, the user may be confused and think they need to click something to save their project. Should add some kind of visual signifier that shows that everything saves automatically.
Now that we've got all the functionality we desire, we seriously, SERIOUSLY need some tests, so we can refactor and make the app better as a whole and also not have to worry about breaking everything when we add/change a feature.
Sometimes, the project just keeps trying to save. You can see this evidenced by the "saving..." and "saved!" text at the top.
The current interface makes modifying existing slices a little tricky. A better interface is for slices to
Should be able to click a button to start "slicing" and click it again to stop. "Slicing" is basically the same as recording; the purpose is to create a segment of the video that can be looped and played separately. An infinite number of slices (segments) can be created for a given video, and they may overlap. Ideally, the interface should indicate this overlapping in some way. I suggest displaying each slice in a new row and having their placement and widths correspond to their start and end times.
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.