draggable min-vid, part 1

since merging john and i’s css PR, i’ve been digging into min-vid again. lots has changed! dave rewrote min-vid in react.js to make it easier for contributors to plug in.

why react.js? because we won’t have to write a thousand different platform checks anymore. for example, we’d have to trigger one set of behaviors if the platform was youtube.com and another set of behaviors if the platform was vimeo.com. this wasn’t scalable and it wasn’t very contributor-friendly. now, to add support for additional video-streaming platforms, contributors will just have to construct the URL to access the platform’s video files (hopefully via a well-documented API) and add the new URL constructing code to min-vid’s /lib folder in file called get-[platform]-url.js.

so that’s awesome!

right now, i’m working on how to make the video panel draggable within the browser window so you’re not just limited to watching yr vids in the lower left-hand corner:

Screen Shot 2016-07-20 at 12.23.26 PM

john came up with a hacky idea for draggability where, on mouseDown, we’ll:

  1. create an invisible container the size of the entire browser window
  2. as long as mouseDown is true, drag the panel wherever we want within the invisible container
  3. onMouseUp, snap the container to be the size of the panel again.

the idea is to make dragging less glitchy by changing our dragging process so we’re no longer sending data back and forth between react, the add-on, and the window.

how to get started? jared broke down the task into smaller pieces for me. here’s the first piece:

Screen Shot 2016-07-20 at 12.25.41 PM

the function for setting up the panel size is in the index.js file. we determine how and when to panel.show() and panel.hide() based on the block of code below. the code tells the panel to listen for

  1. a message being emitted and
  2. for the content of that message, in this case from the controls.js file:

then, do different stuff based on what the message said.

i added another little chunk in there which says: if the title is drag, hide the panel and then show it again with these new dimensions. the whole new block of code looks like this:

so we have some new instructions for the panel. but how do we trigger them?  we trigger the instructions by creating the drag function within the PlayerView component and then rendering it. this code says: on whatever new custom event, send a message. the content of the message is an object with the format {detail: obj}—in this case, {action: 'drag'}. then, render the trigger in a <div> in an <a> tag.

and we style the class in our css file:

so we get something like this, before clicking the red square:

Screen Shot 2016-07-20 at 1.19.37 PM

and after clicking the red square:

Screen Shot 2016-07-20 at 1.19.45 PM

next, i have to see if i can make the panel fill the page, then only drag the video element inside the panel, then snap the panel its position on the window and put it back to its original size, 320 x 180.

playing with react.js

i taught an intro to p5.js workshop earlier this summer, and a big part of what made it possible was jess klein and atul varma’s widget, which lets people play with p5.js sketches and see their changes in the browser without having to refresh the page.

i think it’s an amazing teaching tool, but it currently doesn’t support p5 libraries like p5.dom. this means we can’t incorporate video capture into widget views. ultimately, i’d love to contribute to the widget project and use p5.dom support to create some interactive documentation for kyle mcdonald’s computer vision examples. it’d also be great for making computer vision a little more accessible to beginners.

to contribute to the widget, i need to know some react so i’m playing around with atul’s react tutorial for p5 programmers. react seems really powerful in ways that i don’t totally understand yet. at this point, i’m trying to figure out how everything is wired up in a react program—syntax, which APIs are being referenced where and how, etc.

this code & video is just a slight change from the tutorial. from what i can tell, SVG has?/is? an API, which defines certain shapes like circle and rect. the function within the SVG tag, onClick, is a global event listener. i changed it from what was in the example, onMouseMove. things like clientY and clientX are part of another API; they’re built in (to what? idk) and have specific parameters/syntax rules that you have to follow. none of this is required for react programs, but this exercise is helpful for starting to learn structure and what references i might look to when i get stuck.

and here’s the example from the tutorial. the index.html file is the same, but there are some slight differences in the react-sketch.js file.

day whoscountinganymore: the “good-first-bug” tag

let’s talk about this tag for a minute. it looks like this:Screen Shot 2016-06-30 at 7.46.06 PM

it appears on github. it signals to baby contributors that the issue it is attached to may be a safe one to start with.

while i still imagine myself as a baby contributor, the truth is that i’m really not anymore. it’s been almost a year since i wrote my first line of code in dan shiffman’s “intro to computational media” class, and i’ve been inching my way into open source projects ever since. so that’s where i’m at. one year in. this good-first-bug bug should be a piece of cake. here’s the bug/issue:

Screen Shot 2016-06-30 at 10.35.26 AM

add a link? nbd. i followed all the instructions on the test pilot readme for setting up a development environment, but i hit a 404 page when i tried to navigate to the development server. and then there were npm errors related to gulp. and development permissions issues. and that was setting up the dev environment before editing any files. which, by the way, which file is this url supposed to live in anyway?

it turns out test pilot uses ampersand.js for data binding. which, as far as i can tell, basically means that we’re not directly editing html, but templates for html files. “models” or something. yes, something about scalability. so dave clarified:

Screen Shot 2016-06-30 at 10.35.26 AM copy

to load the dummy data, per step 6, you need the super secret docker command:

docker exec testpilot_server_1 ./manage.py loaddata fixtures/demo_data.json

which lives in this 3-month-old issue here.

i thought i was in the clear, but i hit another error after that:

Screen Shot 2016-06-30 at 8.01.01 PM

how can you say “discourse_url does not exist” when it totally DOES exist BECAUSE I JUST WROTE IT?

sweet salvation finally came in the form of a previous test pilot bug fix for an issue that was basically exactly the same as the one i was working on: “add link to experiment model

after reviewing that commit, i saw that what i was missing, what was producing the “does not exist” error for me, was that i hadn’t yet created a particular python script in the experiments/migrations/ folder.

i’m not totally clear on what that script does—i copy/pasted dave’s script and adjusted it for the changes i was making—but my guess, judging by the folder name “migrations” and the python code that says something like “add a field to the experiment model” is that it tells some part of the add-on that a new thing has been added and that the add-on should incorporate it instead of ignoring it.

okay. the point of this has not been to be boring for boring’s sake. it has been to say: “good-first-bug” is relative. sometimes things that are named hard are easy. sometimes, things that are named intro-level are not. ask for help. iz okay.