diff --git a/public/nav/navbar/Navbar.jsx b/public/nav/navbar/Navbar.jsx index c4dc6b5..05110e5 100644 --- a/public/nav/navbar/Navbar.jsx +++ b/public/nav/navbar/Navbar.jsx @@ -28,7 +28,7 @@ import Language from './../../language/Language'; const NavbarLink = function(props) { return ( - + { Language.get("navbar." + props.title) } ); @@ -51,9 +51,9 @@ class Navbar extends React.Component { className="o-navbar__logo" alt={ Language.get("site.name") } /> - + - + diff --git a/public/video/Video.jsx b/public/video/Video.jsx index 7efc8ee..93c9c21 100644 --- a/public/video/Video.jsx +++ b/public/video/Video.jsx @@ -34,8 +34,39 @@ const VALID_SOURCES = [ class Video extends React.Component { constructor(props) { super(props); + + //Initial State + this.state = { + autoPlay: this.props.autoPlay, + loop: this.props.loop, + loader: true + }; + + //Bound events (for removing event listeners) + this.onPlayingBound = this.onPlaying.bind(this); + this.onWaitingBound = this.onWaiting.bind(this); } + componentDidMount() { + this.refs.video.addEventListener('playing', this.onPlayingBound); + this.refs.video.addEventListener('waiting', this.onWaitingBound); + } + + componentWillUnmount() { + + } + + //Standard Events - https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events + onPlaying() { + this.setState({ + loader: false + }); + } + + onWaiting() { + } + + //React Render render() { //TODO: Add image fallback support. //TODO: Add state support, as well as functional controls. @@ -47,7 +78,7 @@ class Video extends React.Component { for(let i = 0; i < VALID_SOURCES.length; i++) { let s = VALID_SOURCES[i]; if(!sourceProps[s]) continue; - //sources.push(); + sources.push(); } //Classes @@ -55,8 +86,8 @@ class Video extends React.Component { if(this.props.className) clazz += " " + this.props.className; if(sourceProps.image) clazz += " has-image"; if(sourceProps.gif) clazz += " has-gif"; - if(this.props.autoplay) clazz += " is-autoplaying"; - if(this.props.loop) clazz += " is-looping"; + if(this.state.autoplay) clazz += " is-autoplaying"; + if(this.state.loop) clazz += " is-looping"; let videoClass = "o-video__video"; if(this.props.fill) videoClass += " is-full"; @@ -65,20 +96,28 @@ class Video extends React.Component { //Fallback. let fallback; + //Loader + let loader; + if(this.state.loader) { + loader = + } + + return (
{ /* Video Element (And sources) */ } {/* Loader */} - + { loader } { /* Fallback Picture */ } { fallback }