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:

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:

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:

// require the Panel element from the Mozilla SDK
var panel = require('sdk/panel').Panel({
// set the panel content using the /default.html file
  contentURL: './default.html',
// set the panel functionality using the /controls.js file
  contentScriptFile: './controls.js',
// set the panel dimensions and position
  width: 320,
  height: 180,
  position: {
    bottom: 10,
    left: 10
  }
});

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

// turn the panel port on to listen for a 'message' being emitted
panel.port.on('message', opts => {
// assign title to be whatever 'opts' were emitted
  var title = opts.action;

  if (title === 'send-to-tab') {
    const pageUrl = getPageUrl(opts.domain, opts.id);
    if (pageUrl) require('sdk/tabs').open(pageUrl);
    else console.error('could not parse page url for ', opts); // eslint-disable-line no-console
    panel.hide();
  } else if (title === 'close') {
    panel.hide();
  } else if (title === 'minimize') {
    panel.hide();
    panel.show({
      height: 40,
      position: {
        bottom: 0,
        left: 10
      }
    });
  } else if (title === 'maximize') {
    panel.hide();
    panel.show({
      height: 180,
      position: {
        bottom: 10,
        left: 10
      }
    });
  }
});

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:

panel.port.on('message', opts => {
  var title = opts.action;

  if (title === 'send-to-tab') {
    const pageUrl = getPageUrl(opts.domain, opts.id);
    if (pageUrl) require('sdk/tabs').open(pageUrl);
    else console.error('could not parse page url for ', opts); // eslint-disable-line no-console
    panel.hide();
  } else if (title === 'close') {
    panel.hide();
  } else if (title === 'minimize') {
    panel.hide();
    panel.show({
      height: 40,
      position: {
        bottom: 0,
        left: 10
      }
    });
  } else if (title === 'maximize') {
    panel.hide();
    panel.show({
      height: 180,
      position: {
        bottom: 10,
        left: 10
      }
    });
  }
  else if (title === 'drag') {
    panel.hide();
    panel.show({
      height: 360,
      width: 640,
      position: {
        bottom: 0,
        left: 0
      }
    });
  }
});

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

function sendToAddon(obj) {
  window.dispatchEvent(new CustomEvent('message', {detail: obj}));
}

const PlayerView = React.createClass({
  getInitialState: function() {
    return {showVolume: false, hovered: false};
  },
  drag: function() {
    sendToAddon({action: 'drag'});
  },
...
render: function() {
    return (
     

       
     
    );
  }
...

.drag {
    background: red;
}

http://www.jkitppit.com/2016/07/20/draggable-min-vid-part-1/