function createWrapper(type){
var domFn = DOM[type];
var ctor = createClass({
displayName: 'famous-'+type,
mixins: [Renderable],
render: function(){
var filteredProps = filter(this.props);
var el = domFn(filteredProps, this.props.children);
return el;
}
});
return ctor;
}
'use strict'
var ReactCreateClass = require('react/lib/ReactCompositeComponent').createClass
, ReactDOM = require('react/lib/ReactDOM')
module.exports =
ReactCreateClass
( { getDefaultProps: function() {
return {scale: 1}
}
, render:
function() {
var {svg, path} = ReactDOM
, width = 200 * this.props.scale
, height = 450 * this.props.scale
return svg({width: width, height: height, viewBox: '0 0 1200 1200'}
, path({d: 'M 592.10873,1275.9669 C 461.75172,1268.3902 328.65904,1186.6265 249.0601,1092.783 C 156.77394,983.97782 118.72592,836.04683 128.47199,714.56357 C 157.10277,357.61288 545.27831,146.63848 688.97108,-9.280262 C 785.15294,-113.64625 805.31643,-164.52308 826.79977,-218.19949 C 868.39181,-322.09965 875.09166,-443.8341 792.63375,-452.92251 C 713.90712,-461.59988 649.13737,-337.79201 620.20973,-253.17845 C 594.19587,-177.07331 576.90507,-100.71696 592.5563,13.979673 C 599.58954,65.50958 793.18636,1503.9125 796.45179,1526.2088 C 829.05589,1749.0255 701.63092,1841.2249 571.55248,1857.6251 C 290.65671,1893.038 200.52617,1607.5843 326.4212,1499.1719 C 423.34291,1415.7001 564.35026,1487.3615 556.73245,1624.5919 C 549.98693,1746.1391 430.80546,1749.7197 400.35244,1746.9429 C 447.10065,1830.7846 799.52998,1874.5871 745.41513,1495.7923 C 737.811,1442.5634 558.91549,90.842953 554.53112,60.595454 C 521.71238,-165.84753 516.71147,-345.08557 634.69182,-554.25141 C 678.24767,-631.46637 747.0821,-681.3156 780.87362,-674.7893 C 788.29962,-673.35526 795.69824,-670.62872 801.57144,-664.56827 C 892.07191,-571.31845 919.83494,-364.53202 909.9199,-245.74332 C 899.76736,-124.11391 894.1088,1.7993735 773.16902,148.63428 C 726.36601,205.45738 583.54553,330.63538 501.65851,402.55255 C 386.60107,503.59831 303.14756,591.85179 257.99323,698.31862 C 207.24886,817.97506 198.65826,968.6006 313.27268,1102.2505 C 379.20247,1177.7619 488.59222,1231.3424 580.65459,1232.4842 C 836.63719,1235.6628 911.39048,1109.4801 913.77904,966.58197 C 917.71126,731.28351 633.64596,642.32214 516.85762,804.10953 C 449.14212,897.92109 478.90552,996.66049 524.38411,1043.6371 C 539.99424,1059.7587 557.43121,1072.0395 573.92734,1078.8855 C 579.9056,1081.3654 593.96751,1087.9054 589.97593,1097.4779 C 586.6557,1105.4428 580.20702,1105.8904 574.33381,1105.1871 C 500.68573,1096.3544 419.13667,1025.958 399.0828,904.87212 C 369.86288,728.38801 525.6035,519.0349 747.9133,553.274 C 893.45572,575.68903 1028.5853,700.92182 1016.7338,934.11946 C 1006.5722,1133.9822 840.87996,1290.4262 592.10873,1275.9669 z'}
)
)
}
}
)
var mq = ReactCompositeComponent.createClass({
displayName: 'MediaQuery',
propTypes: types,
getDefaultProps: function(){
return {
component: DOM.div
};
},
getInitialState: function(){
return {
matches: false
};
},
componentWillMount: function(){
this.query = this.props.query || toQuery(this.props);
if (!this.query) {
throw new Error('Invalid or missing MediaQuery!');
}
this._mql = matchMedia(this.query);
this._mql.addListener(this.updateMatches);
this.updateMatches();
},
componentWillUnmount: function(){
this._mql.removeListener(this.updateMatches);
},
updateMatches: function(){
if (this._mql.matches === this.state.matches) {
return;
}
this.setState({
matches: this._mql.matches
});
},
render: function(){
if (this.state.matches === false) {
return null;
}
// TODO: transfer props but omit mq props
return this.props.component(null, this.props.children);
}
});
var sidetap = ReactCompositeComponent.createClass({
displayName: 'SideTap',
propTypes: types,
getDefaultProps: function(){
return {
slidePercent: '85'
};
},
getInitialState: function(){
return {
open: false
};
},
componentWillMount: function(){
},
componentWillReceiveProps: function(props){
return props;
},
componentWillUnmount: function(){
},
toggle: function(){
this.setState({open: !this.state.open});
},
render: function(){
var menuStyle = {
marginLeft: this.state.open ? 0 : '-100vw',
width: this.props.slidePercent + 'vw',
height: '100%',
transition: 'all 0.2s ease'
};
var mainStyle = {
position: 'fixed',
top: '0px',
marginLeft: this.state.open ? this.props.slidePercent + 'vw' : 0,
transition: 'all 0.2s ease'
};
console.log(mainStyle);
return DOM.div({},
DOM.div({className: 'menu', style: menuStyle},
this.props.Menu({
open: this.state.open,
})
),
DOM.div({className: 'main', style: mainStyle},
this.props.Main({
toggle: this.toggle,
})
)
);
}
});
var Player = ReactCompositeComponent.createClass({
displayName: 'Player',
propTypes: {
title: PropTypes.string.isRequired,
artist: PropTypes.string.isRequired,
album: PropTypes.string.isRequired,
autoPlay: PropTypes.bool,
loop: PropTypes.bool,
muted: PropTypes.bool,
preload: PropTypes.bool,
onSkip: PropTypes.func,
onEnd: PropTypes.func
},
getDefaultProps: function() {
return {
autoPlay: false,
loop: false,
muted: false,
preload: true
};
},
getInitialState: function() {
return {
playing: this.props.autoPlay,
duration: 0,
position: 0
};
},
// component states
toggle: function() {
this.setState({
playing: !this.state.playing
}, this.sync);
},
setPosition: function(e) {
var audioTag = this.refs.audioTag.getDOMNode();
var x = e.pageX - e.target.getBoundingClientRect().left;
var scale = e.target.clientWidth;
var time = this.state.duration*(x/scale);
audioTag.currentTime = time;
},
// sync all non-props
// back to the dom element
sync: function() {
var audioTag = this.refs.audioTag.getDOMNode();
if (this.state.playing) {
audioTag.play();
} else {
audioTag.pause();
}
if (!isNaN(audioTag.duration)) {
this.setState({
duration: Math.floor(audioTag.duration*10)/10,
position: Math.floor(audioTag.currentTime*10)/10
});
}
},
componentDidMount: function() {
// hacks around react bug
// TODO: break this out into an audio wrapper
var audioTag = this.refs.audioTag.getDOMNode();
audioTag.addEventListener('timeupdate', this.sync, false);
if (this.props.onEnd) {
audioTag.addEventListener('ended', this.props.onEnd, false);
}
this.sync();
},
componentWillUnmount: function() {
// hacks around react bug
// TODO: break this out into an audio wrapper
var audioTag = this.refs.audioTag.getDOMNode();
audioTag.removeEventListener('timeupdate', this.sync, false);
if (this.props.onEnd) {
audioTag.removeEventListener('ended', this.props.onEnd, false);
}
},
render: function(){
var audioTag = DOM.audio({
ref: 'audioTag',
key: 'audioTag',
controls: false,
loop: this.props.loop,
muted: this.props.muted,
preload: this.props.preload,
autoPlay: this.props.autoPlay,
onTimeUpdate: this.sync,
onEnded: this.props.onEnd
}, this.props.children);
// information
var artwork = DOM.div({
ref: 'artwork',
key: 'artwork',
className: 'hymn-artwork',
style: {
backgroundImage: 'url('+this.props.artwork+')'
}
});
var title = DOM.p({
ref: 'title',
key: 'title',
className: 'hymn-title',
title: this.props.title
}, this.props.title);
var album = DOM.p({
ref: 'album',
key: 'album',
className: 'hymn-album',
title: this.props.album
}, this.props.album);
var artist = DOM.p({
ref: 'artist',
key: 'artist',
className: 'hymn-artist',
title: this.props.artist
}, this.props.artist);
var info = DOM.div({
ref: 'info',
key: 'info',
className: 'hymn-info'
}, [title, album, artist]);
// controls
var playPauseClass = this.state.playing ? 'hymn-pause' : 'hymn-play';
var playPause = DOM.button({
ref: 'playPause',
key: 'playPause',
className: 'hymn-control ' + playPauseClass,
onClick: this.toggle
});
var skipButton = DOM.button({
ref: 'skipButton',
key: 'skipButton',
className: 'hymn-control hymn-skip',
onClick: this.props.onSkip
});
var progressBar = DOM.progress({
ref: 'progressBar',
key: 'progressBar',
className: 'hymn-progress',
value: this.state.position,
max: this.state.duration,
onClick: this.setPosition
});
var controlChildren = [playPause, progressBar];
if (this.props.onSkip) {
controlChildren.push(skipButton);
}
var controls = DOM.div({
ref: 'controls',
key: 'controls',
className: 'hymn-controls'
}, controlChildren);
// bring it all in
var container = DOM.div({
ref: 'container',
className: 'hymn-player'
}, [artwork, info, controls, audioTag]);
return container;
}
});
'use strict';
var PaperDOM = require('./PaperDOM');
var ReactCompositeComponent = require('react/lib/ReactCompositeComponent');
var ReactBrowserComponentMixin = require('react/lib/ReactBrowserComponentMixin');
var PaperToggleComponentMixin = require('./PaperToggleComponentMixin');
// Store a reference to the <paper-menu-button> `ReactDOMComponent`.
var paperMenuButton = PaperDOM['paper-menu-button'];
var PaperDOMMenuButton = ReactCompositeComponent.createClass({
displayName: 'PaperDOMMenuButton',
mixins: [ReactBrowserComponentMixin, PaperToggleComponentMixin],
render: function() {
return paperMenuButton(this.props, this.props.children);
}
});
module.exports = PaperDOMMenuButton;