Skip to content

Instantly share code, notes, and snippets.

@kevin-chau
Last active July 16, 2017 04:31
Show Gist options
  • Save kevin-chau/7d64516debdfeb31257169e521135d63 to your computer and use it in GitHub Desktop.
Save kevin-chau/7d64516debdfeb31257169e521135d63 to your computer and use it in GitHub Desktop.
A To-Do List for Treactr

TReactr

A Traktor clone in React

TReactr is a javascript digital DJ mixing application built for the modern web, based on the legendary UI from Native Instrument' Traktor.

GitHub

Heroku

To-Do:

  • MAJOR TO-DO: Refactor and re-encapsulate player and mixer in to Deck object
  • TO-DO: state should be reorganizaed to have subobjects for each deck
    • remove state from home?
  • Rename *Deck components to *Player components
  • SoundcloudPlayer
  • change PropTypes to prop-types

  • HTML5 video from youtube:

https://github.com/mediaelement/mediaelement/blob/master/docs/usage.md#react

http://stackoverflow.com/questions/13177359/how-to-embed-youtube-videos-into-html5-video-tag

http://www.mediaelementjs.com/

https://github.com/mediaelement/mediaelement

  • Release Map
  • User youtube link
  • Play button for soundcloud
  • Youtube video seeking
  • Refactor decks with props for volume and url
  • clean up redundant volume props in home route
  • dotenv soundcloud API keys
    • variable working client side with webpack defineplugin
    • works with heroku as well through config variable.
  • Bi directional slider (for crossfader)
    • Border styling
  • Update README Screenshot (4-15-2017)
  • Update treactr knob
  • Fix treactr knob 0.4 error, pull in to treactr
  • Crossfade Deck A and B
    • Front-End Slider
  • TESTING THIS IS URGENT
    • Unit Tests
  • Master/ Global Unit Front-End Work
  • FX Selector Menu
  • Decks
    • Waveform
  • Load audio and play
  • Audio Signal Chain
  • Youtube Playback Speed
  • Randomize youtube video from top music
  • Better volume scaling
  • Better filter scaling
  • Double click to reset sliders

Future:

Bugs:

  • Toggle buttons on mobile, sliders on mobile
  • Headphone cue svg not centered, fx # not centered

Enhancements:

  • Knob +/- buttons
  • Knob Percent
  • radial gradient and shading for toggle buttons
  • gradients for all containers
  • FX unit icon
  • Enhanced Volume Slider Style (Side rails instead of border)
  • Scroll on slider elements

Completed:

  • Mixer labels
  • Put Deck Volume Slider under knobs
  • Fix heroku deploy (npm update, not yarn upgrade! 2-26-2017)
  • Slider Basic Style
  • Update README
  • Knob Kill Toggle Buttons
  • bi-directional-knobs
  • Containers / organize mixer unit
  • FX Unit Select Toggle Buttons (seperate mixer box)
  • React component
  • Style
  • 1 / 2
  • Key and Pan Knobs
  • Headphone cue toggle button
  • SVG
  • size css
  • fix heroku deploy, again... NOTE: Treactr-toggle must list loader-utils v.0.2.16 or else babel-loader will user v0.2.17, which breaks heroku deployment. This is regardless of the version of babel-loader specified. I expect that other react packages which use babel-loader will have similar problems.
  • GitHub Link in Header, similar to footer.
  • Remove page not found link from footer.
  • mixer state variables: headphone cue toggle, fx select, etc.
  • Mirror Image mixer: using component props
  • center and arrange mixer units
  • grey mixer divisions + black border
  • Youtube videos in deck
  • Deck A and B Volume faders actually control volume
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment