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 }