diff --git a/public/section/video/VideoSection.jsx b/public/section/video/VideoSection.jsx index f90be92..e0c0d02 100644 --- a/public/section/video/VideoSection.jsx +++ b/public/section/video/VideoSection.jsx @@ -35,7 +35,8 @@ class VideoSection extends React.Component { <Section full={this.props.full} className="c-video-section"> <Video className="c-video-section__video" - sources={ this.props.sources ? this.props.sources : this.props } + autoPlay + loop /> { this.props.children } diff --git a/public/styles/index.scss b/public/styles/index.scss index c73fd10..a544849 100644 --- a/public/styles/index.scss +++ b/public/styles/index.scss @@ -52,6 +52,7 @@ @import './objects/_app.scss'; @import './objects/_navbar.scss'; +@import './objects/_video.scss'; //Components @import './components/_page.scss'; diff --git a/public/styles/objects/_video.scss b/public/styles/objects/_video.scss new file mode 100644 index 0000000..fc10eb8 --- /dev/null +++ b/public/styles/objects/_video.scss @@ -0,0 +1,18 @@ +/* + * Video + * Video Object, with general fallbacks and smarter controls for better + * cross-browser compatibility. + * + * Also allows for better and more styled controls. + * + * Dependencies: + * + * Version: + * 1.0.0 - 2018/05/07 + */ +.o-video { + + &__video { + + } +} diff --git a/public/video/Video.jsx b/public/video/Video.jsx index ceec3da..0f402e6 100644 --- a/public/video/Video.jsx +++ b/public/video/Video.jsx @@ -36,6 +36,7 @@ class Video extends React.Component { render() { //TODO: Add image fallback support. + //TODO: Add state support, as well as functional controls. let sources = []; let sourceProps = this.props.sources ? this.props.sources : this.props; @@ -47,11 +48,25 @@ class Video extends React.Component { let clazz = "o-video"; 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"; return ( - <video className={clazz}> - { sources } - </video> + <div class={clazz}> + { /* Video Element (And sources) */ } + <video className="o-video__video" autoPlay={this.props.autoPlay} loop={this.props.loop} > + { sources } + </video> + + { /* Fallback Picture */ } + { + if(sourceProps.image) { + <img src={sourceProps.image} className="o-video__image" /> + } + } + </div> ); } }