How does one implement this with a Browserify workflow? about react-drive-in

[mshick]

Can you help me understand your setup a little more? Maybe create a super minimal gist with your index.html, main.js, and a relevant browserify command?

[josephdburdick]

@mshick Sure, no problem. Thanks for the reply!

You can see the setup here:
http://github.com/josephdburdick/adoptive-2015

It's using Browserify, Gulp, etc to pull in and compile all assets.

You can see it all in action here:
http://josephdburdick.github.io/adoptive-2015

[mshick]

Thanks for that. I'm still having a look. Having some trouble with the browserify-shim, which is throwing me off. Might just try repackaging this whole thing differently, not loving browserify (aside from the light config).

[josephdburdick]

Well do you think you can make any sense of this error?

return ReactDriveIn;
})(_react2["default"].Component);  // Uncaught TypeError: Cannot read property 'Component' of undefined

ReactDriveIn.displayName = "DriveIn";

[josephdburdick]

To give you better context, this is the entire babelified version of your script:

"use strict";

exports.__esModule = true;

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var _react = (typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null);

var _react2 = _interopRequireDefault(_react);

var _driveIn = require("drive-in");

var _driveIn2 = _interopRequireDefault(_driveIn);

var ReactDriveIn = (function (_React$Component) {
  _inherits(ReactDriveIn, _React$Component);

  function ReactDriveIn(props) {
    _classCallCheck(this, ReactDriveIn);

    _React$Component.call(this, props);

    this.state = {
      className: props.className,
      mute: props.mute,
      loop: props.loop,
      loopPaylistItems: props.loopPlaylistItems,
      slideshow: props.slideshow,
      volume: props.volume,
      onTimeFrequency: props.onTimeFrequency
    };

    this.setPlaying = this.setPlaying.bind(this);
    this.setPause = this.setPause.bind(this);
    this.setLoading = this.setLoading.bind(this);
    this.setCanPlay = this.setCanPlay.bind(this);
  }

  ReactDriveIn.prototype.getMedia = function getMedia() {
    return this.refs.media.getDOMNode();
  };

  ReactDriveIn.prototype.getPlaylist = function getPlaylist() {
    return this.state.playlist;
  };

  ReactDriveIn.prototype.setPlaying = function setPlaying(currentItem) {
    this.setState({ playing: true, currentItem: currentItem });
    if (this.props.onPlaying) {
      this.props.onPlaying(currentItem);
    }
  };

  ReactDriveIn.prototype.setPause = function setPause() {
    this.setState({ playing: false });
    if (this.props.onPause) {
      this.props.onPause();
    }
  };

  ReactDriveIn.prototype.setLoading = function setLoading() {
    this.setState({ canPlay: false });
  };

  ReactDriveIn.prototype.setCanPlay = function setCanPlay() {
    this.setState({ canPlay: true });
    if (this.props.onCanPlay) {
      this.props.onCanPlay();
    }
  };

  ReactDriveIn.prototype.componentWillMount = function componentWillMount() {
    this.DI = new _driveIn2["default"]();
    this.DI.on("media.playing", this.setPlaying);
    this.DI.on("media.pause", this.setPause);
    this.DI.on("media.loading", this.setLoading);
    this.DI.on("media.canplay", this.setCanPlay);
  };

  ReactDriveIn.prototype.componentDidMount = function componentDidMount() {
    var _this = this;

    var playlist = undefined;

    this.DI.init({
      el: this.getMedia(),
      slideshow: this.props.slideshow
    });

    var options = {
      mute: this.props.mute,
      loop: this.props.loop,
      loopPlaylistItems: this.props.loopPlaylistItems,
      poster: this.props.poster,
      isTouch: this.props.isTouch
    };

    if (this.props.showPlaylist) {
      playlist = this.DI.showPlaylist(this.props.showPlaylist, options);
    } else {
      playlist = this.DI.show(this.props.show, options);
    }

    if (this.props.onTime) {
      this.intervalId = window.setInterval(function () {
        _this.props.onTime(_this.DI.currentTime());
      }, this.props.onTimeFrequency);
    }

    if (this.props.playbackRate) {
      this.playbackRate(this.props.playbackRate);
    }

    this.setState({ initalized: true, playlist: playlist });
  };

  ReactDriveIn.prototype.componentWillUnmount = function componentWillUnmount() {
    if (this.intervalId) {
      window.clearInterval(this.intervalId);
    }

    this.DI.removeAllListeners();
    this.DI.close();
    delete this.DI;
  };

  ReactDriveIn.prototype.play = function play(itemNum) {
    this.DI.play(itemNum);
  };

  ReactDriveIn.prototype.pause = function pause() {
    this.DI.pause();
  };

  ReactDriveIn.prototype.mute = function mute() {
    this.DI.setVolume(0);
    this.setState({ mute: true });
  };

  ReactDriveIn.prototype.unmute = function unmute() {
    this.DI.setVolume(this.props.volume);
    this.setState({ mute: false });
  };

  ReactDriveIn.prototype.playbackRate = function playbackRate(rate) {
    rate = rate || 1.0;
    this.DI.setPlaybackRate(rate);
    this.setState({ playbackRate: rate });
  };

  ReactDriveIn.prototype.seekTo = function seekTo(time) {
    this.DI.seekTo(time);
  };

  ReactDriveIn.prototype.duration = function duration() {
    return this.DI.duration();
  };

  ReactDriveIn.prototype.render = function render() {
    return _react2["default"].createElement(
      "div",
      { ref: "wrap", className: this.props.className + " drive-in-wrap" },
      _react2["default"].createElement("div", { ref: "media", className: "drive-in-media" })
    );
  };

  return ReactDriveIn;
})(_react2["default"].Component); // << Uncaught TypeError: Cannot read property 'Component' of undefined

ReactDriveIn.displayName = "DriveIn";

ReactDriveIn.propTypes = {
  show: _react2["default"].PropTypes.oneOfType([_react2["default"].PropTypes.string, _react2["default"].PropTypes.array]),
  showPlaylist: _react2["default"].PropTypes.oneOfType([_react2["default"].PropTypes.array]),
  poster: _react2["default"].PropTypes.string,
  mute: _react2["default"].PropTypes.bool,
  loop: _react2["default"].PropTypes.bool,
  loopPlaylistItems: _react2["default"].PropTypes.bool,
  playbackRate: _react2["default"].PropTypes.number,
  slideshow: _react2["default"].PropTypes.bool,
  onPlaying: _react2["default"].PropTypes.func,
  onPause: _react2["default"].PropTypes.func,
  onTime: _react2["default"].PropTypes.func,
  onTimeFrequency: _react2["default"].PropTypes.number,
  onCanPlay: _react2["default"].PropTypes.func,
  isTouch: _react2["default"].PropTypes.func,
  volume: _react2["default"].PropTypes.number,
  className: _react2["default"].PropTypes.string
};

ReactDriveIn.defaultProps = {
  className: "drive-in",
  mute: true,
  loop: true,
  loopPaylistItems: false,
  slideshow: false,
  volume: 0.5,
  onTimeFrequency: 500
};

exports["default"] = ReactDriveIn;
module.exports = exports["default"];

Any thoughts on this would be very appreciated. Thanks!

[mshick]

Yes, I’m sorry, I started trying to solve some browserify problems in the repo and think it didn’t work out right.

While I square away the packaging problems, if you just want to get something working, I’d suggest copy-pasting the src/react-drive-in.jsx file as a component in your personal project. The only dependency will be “drive-in” (npm install drive-in) at that point. This way you’ll be using your own compilation / babel transforms.

Packaging of react components for npm seems to be a real pain. I’ve been looking through others and have yet to find an approach that feels appropriately light-weight.

On Oct 5, 2015, at 12:00 PM, Joe [email protected] wrote:

To give you better context, this is the entire babelified version of your script:

"use strict";

exports.__esModule = true;

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.proto = superClass; }

var _react = (typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null);

var _react2 = _interopRequireDefault(_react);

var _driveIn = require("drive-in");

var _driveIn2 = _interopRequireDefault(_driveIn);

var ReactDriveIn = (function (_React$Component) {
_inherits(ReactDriveIn, _React$Component);

function ReactDriveIn(props) {
_classCallCheck(this, ReactDriveIn);

_React$Component.call(this, props);

this.state = {
  className: props.className,
  mute: props.mute,
  loop: props.loop,
  loopPaylistItems: props.loopPlaylistItems,
  slideshow: props.slideshow,
  volume: props.volume,
  onTimeFrequency: props.onTimeFrequency
};

this.setPlaying = this.setPlaying.bind(this);
this.setPause = this.setPause.bind(this);
this.setLoading = this.setLoading.bind(this);
this.setCanPlay = this.setCanPlay.bind(this);

}

ReactDriveIn.prototype.getMedia = function getMedia() {
return this.refs.media.getDOMNode();
};

ReactDriveIn.prototype.getPlaylist = function getPlaylist() {
return this.state.playlist;
};

ReactDriveIn.prototype.setPlaying = function setPlaying(currentItem) {
this.setState({ playing: true, currentItem: currentItem });
if (this.props.onPlaying) {
this.props.onPlaying(currentItem);
}
};

ReactDriveIn.prototype.setPause = function setPause() {
this.setState({ playing: false });
if (this.props.onPause) {
this.props.onPause();
}
};

ReactDriveIn.prototype.setLoading = function setLoading() {
this.setState({ canPlay: false });
};

ReactDriveIn.prototype.setCanPlay = function setCanPlay() {
this.setState({ canPlay: true });
if (this.props.onCanPlay) {
this.props.onCanPlay();
}
};

ReactDriveIn.prototype.componentWillMount = function componentWillMount() {
this.DI = new _driveIn2"default";
this.DI.on("media.playing", this.setPlaying);
this.DI.on("media.pause", this.setPause);
this.DI.on("media.loading", this.setLoading);
this.DI.on("media.canplay", this.setCanPlay);
};

ReactDriveIn.prototype.componentDidMount = function componentDidMount() {
var _this = this;

var playlist = undefined;

this.DI.init({
  el: this.getMedia(),
  slideshow: this.props.slideshow
});

var options = {
  mute: this.props.mute,
  loop: this.props.loop,
  loopPlaylistItems: this.props.loopPlaylistItems,
  poster: this.props.poster,
  isTouch: this.props.isTouch
};

if (this.props.showPlaylist) {
  playlist = this.DI.showPlaylist(this.props.showPlaylist, options);
} else {
  playlist = this.DI.show(this.props.show, options);
}

if (this.props.onTime) {
  this.intervalId = window.setInterval(function () {
    _this.props.onTime(_this.DI.currentTime());
  }, this.props.onTimeFrequency);
}

if (this.props.playbackRate) {
  this.playbackRate(this.props.playbackRate);
}

this.setState({ initalized: true, playlist: playlist });

};

ReactDriveIn.prototype.componentWillUnmount = function componentWillUnmount() {
if (this.intervalId) {
window.clearInterval(this.intervalId);
}

this.DI.removeAllListeners();
this.DI.close();
delete this.DI;

};

ReactDriveIn.prototype.play = function play(itemNum) {
this.DI.play(itemNum);
};

ReactDriveIn.prototype.pause = function pause() {
this.DI.pause();
};

ReactDriveIn.prototype.mute = function mute() {
this.DI.setVolume(0);
this.setState({ mute: true });
};

ReactDriveIn.prototype.unmute = function unmute() {
this.DI.setVolume(this.props.volume);
this.setState({ mute: false });
};

ReactDriveIn.prototype.playbackRate = function playbackRate(rate) {
rate = rate || 1.0;
this.DI.setPlaybackRate(rate);
this.setState({ playbackRate: rate });
};

ReactDriveIn.prototype.seekTo = function seekTo(time) {
this.DI.seekTo(time);
};

ReactDriveIn.prototype.duration = function duration() {
return this.DI.duration();
};

ReactDriveIn.prototype.render = function render() {
return _react2["default"].createElement(
"div",
{ ref: "wrap", className: this.props.className + " drive-in-wrap" },
_react2["default"].createElement("div", { ref: "media", className: "drive-in-media" })
);
};

return ReactDriveIn;
})(_react2["default"].Component); // << Uncaught TypeError: Cannot read property 'Component' of undefined

ReactDriveIn.displayName = "DriveIn";

ReactDriveIn.propTypes = {
show: _react2["default"].PropTypes.oneOfType([_react2["default"].PropTypes.string, _react2["default"].PropTypes.array]),
showPlaylist: _react2["default"].PropTypes.oneOfType([_react2["default"].PropTypes.array]),
poster: _react2["default"].PropTypes.string,
mute: _react2["default"].PropTypes.bool,
loop: _react2["default"].PropTypes.bool,
loopPlaylistItems: _react2["default"].PropTypes.bool,
playbackRate: _react2["default"].PropTypes.number,
slideshow: _react2["default"].PropTypes.bool,
onPlaying: _react2["default"].PropTypes.func,
onPause: _react2["default"].PropTypes.func,
onTime: _react2["default"].PropTypes.func,
onTimeFrequency: _react2["default"].PropTypes.number,
onCanPlay: _react2["default"].PropTypes.func,
isTouch: _react2["default"].PropTypes.func,
volume: _react2["default"].PropTypes.number,
className: _react2["default"].PropTypes.string
};

ReactDriveIn.defaultProps = {
className: "drive-in",
mute: true,
loop: true,
loopPaylistItems: false,
slideshow: false,
volume: 0.5,
onTimeFrequency: 500
};

exports["default"] = ReactDriveIn;
module.exports = exports["default"];
Any thoughts on this would be very appreciated. Thanks!

—
Reply to this email directly or view it on GitHub #23 (comment).

[mshick]

@josephdburdick Sorry about the time elapsed here. Until I discovered this rollupjs project I didn't really see a great option for accomplishing component includes, short of doing something weird with bower which I don't want to get into...

Rollup isn't perfect, but it does allow me to create a distributed browser release, a commonjs release, and still provide the unadulterated source for inclusion in another project. I'm not sure if it will catch on, but I was able to do everything you need with it.

I've added a bit to the README about it, and created a gist here that shows how you might build this component (or any other) into a rollup bundle, with React included.

Please let me know how it goes. Closing this out for now, but feel free to continue the convo.