Commit cf501931 authored by Ind.ie Projects's avatar Ind.ie Projects

Add flexbox with the video player

parent 643a56ab
......@@ -592,11 +592,11 @@
width: 95px /* width of volume slider */;
}
}
.px-video-controls .controls {
.px-video-controls {
position: relative;
/* fixing display for IE10+ */
}
.px-video-controls .controls input[type='range'] {
.px-video-controls input[type='range'] {
-webkit-appearance: none;
height: 6px;
width: 70px;
......@@ -607,44 +607,120 @@
outline: none;
}
@media only screen and (min-width: 540px) {
.px-video-controls .controls input[type='range'] {
.px-video-controls input[type='range'] {
margin-top: 12px;
width: 85px;
}
}
.px-video-controls .controls input[type='range']:focus::-webkit-slider-thumb {
.px-video-controls input[type='range']:focus::-webkit-slider-thumb {
outline: 1px #999 dotted;
}
.px-video-controls .controls input[type='range']::-moz-range-track {
.px-video-controls input[type='range']::-moz-range-track {
-moz-appearance: none;
height: 6px;
background-color: #e6e6e6;
border: none;
}
.px-video-controls .controls input[type='range']::-webkit-slider-thumb {
.px-video-controls input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
height: 10px;
width: 6px;
background-color: #666;
}
.px-video-controls .controls input[type='range']::-moz-range-thumb {
.px-video-controls input[type='range']::-moz-range-thumb {
background-color: #666;
border: none;
height: 12px;
width: 8px;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.px-video-controls .controls input[type='range'] {
.px-video-controls input[type='range'] {
position: relative;
padding: 0;
height: 8px;
top: -3px;
}
.px-video-controls .controls .px-video-time {
.px-video-controls .px-video-time {
margin-top: 4px;
}
.px-video-controls .controls .px-video-captions {
.px-video-controls .px-video-captions {
padding: 8px;
min-height: 36px;
}
}
/* FLEXBOX-ONLY CSS.
This will only work with the including modernizr.js script, which applies the
.flexbox.flexwrap classes to the body element */
.flexbox.flexwrap .px-video-controls {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
align-content: center;
}
.flexbox.flexwrap .progress-bar {
flex-grow: 1;
width: 75%;
}
@media only screen and (min-width: 480px) {
.flexbox.flexwrap .progress-bar {
width: 75%;
}
}
@media only screen and (min-width: 590px) {
.flexbox.flexwrap .progress-bar {
width: 85%;
}
}
@media only screen and (min-width: 970px) {
.flexbox.flexwrap .progress-bar {
width: 85%;
}
}
@media only screen and (min-width: 1795px) {
.flexbox.flexwrap .progress-bar {
width: 85%;
}
}
.flexbox.flexwrap .px-video-progress {
margin-top: 10px;
width: 100%;
}
.flexbox.flexwrap .px-video-time {
flex-grow: 0;
flex-shrink: 0;
padding-left: 10px;
margin-top: 0;
}
.flexbox.flexwrap .px-video-playback-buttons {
flex-grow: 1;
min-width: auto;
}
@media only screen and (min-width: 620px) {
.flexbox.flexwrap .px-video-playback-buttons {
left: auto;
margin-left: auto;
min-width: auto;
position: relative;
width: auto;
display: flex;
flex-direction: row;
flex-wrap: no-wrap;
justify-content: center;
align-items: center;
align-content: center;
padding-left: 180px;
}
}
.flexbox.flexwrap .px-video-controls button {
margin: 0;
}
.flexbox.flexwrap .px-video-volume-controls {
min-width: auto;
}
@media only screen and (min-width: 540px) {
.flexbox.flexwrap .px-video-volume-controls {
margin-top: 0;
}
}
......@@ -43,7 +43,7 @@
</div><!-- end video container -->
</div><!-- end page wrapper container -->
<script src="../js/modernizr.js"></script>
<script src="../js/px-video.js"></script>
<script>
......
/*! modernizr 3.1.0 (Custom Build) | MIT *
* http://modernizr.com/download/?-flexbox-flexwrap !*/
!function(e,n,t){function r(e,n){return typeof e===n}function o(){var e,n,t,o,s,i,a;for(var l in g){if(e=[],n=g[l],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(t=0;t<n.options.aliases.length;t++)e.push(n.options.aliases[t].toLowerCase());for(o=r(n.fn,"function")?n.fn():n.fn,s=0;s<e.length;s++)i=e[s],a=i.split("."),1===a.length?Modernizr[a[0]]=o:(!Modernizr[a[0]]||Modernizr[a[0]]instanceof Boolean||(Modernizr[a[0]]=new Boolean(Modernizr[a[0]])),Modernizr[a[0]][a[1]]=o),w.push((o?"":"no-")+a.join("-"))}}function s(e){var n=x.className,t=Modernizr._config.classPrefix||"";if(_&&(n=n.baseVal),Modernizr._config.enableJSClass){var r=new RegExp("(^|\\s)"+t+"no-js(\\s|$)");n=n.replace(r,"$1"+t+"js$2")}Modernizr._config.enableClasses&&(n+=" "+t+e.join(" "+t),_?x.className.baseVal=n:x.className=n)}function i(e,n){return!!~(""+e).indexOf(n)}function a(){return"function"!=typeof n.createElement?n.createElement(arguments[0]):_?n.createElementNS.call(n,"http://www.w3.org/2000/svg",arguments[0]):n.createElement.apply(n,arguments)}function l(e,n){return function(){return e.apply(n,arguments)}}function f(e,n,t){var o;for(var s in e)if(e[s]in n)return t===!1?e[s]:(o=n[e[s]],r(o,"function")?l(o,t||n):o);return!1}function u(e){return e.replace(/([a-z])-([a-z])/g,function(e,n,t){return n+t.toUpperCase()}).replace(/^-/,"")}function d(e){return e.replace(/([A-Z])/g,function(e,n){return"-"+n.toLowerCase()}).replace(/^ms-/,"-ms-")}function p(){var e=n.body;return e||(e=a(_?"svg":"body"),e.fake=!0),e}function c(e,t,r,o){var s,i,l,f,u="modernizr",d=a("div"),c=p();if(parseInt(r,10))for(;r--;)l=a("div"),l.id=o?o[r]:u+(r+1),d.appendChild(l);return s=a("style"),s.type="text/css",s.id="s"+u,(c.fake?c:d).appendChild(s),c.appendChild(d),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(n.createTextNode(e)),d.id=u,c.fake&&(c.style.background="",c.style.overflow="hidden",f=x.style.overflow,x.style.overflow="hidden",x.appendChild(c)),i=t(d,e),c.fake?(c.parentNode.removeChild(c),x.style.overflow=f,x.offsetHeight):d.parentNode.removeChild(d),!!i}function m(n,r){var o=n.length;if("CSS"in e&&"supports"in e.CSS){for(;o--;)if(e.CSS.supports(d(n[o]),r))return!0;return!1}if("CSSSupportsRule"in e){for(var s=[];o--;)s.push("("+d(n[o])+":"+r+")");return s=s.join(" or "),c("@supports ("+s+") { #modernizr { position: absolute; } }",function(e){return"absolute"==getComputedStyle(e,null).position})}return t}function h(e,n,o,s){function l(){d&&(delete N.style,delete N.modElem)}if(s=r(s,"undefined")?!1:s,!r(o,"undefined")){var f=m(e,o);if(!r(f,"undefined"))return f}for(var d,p,c,h,v,y=["modernizr","tspan"];!N.style;)d=!0,N.modElem=a(y.shift()),N.style=N.modElem.style;for(c=e.length,p=0;c>p;p++)if(h=e[p],v=N.style[h],i(h,"-")&&(h=u(h)),N.style[h]!==t){if(s||r(o,"undefined"))return l(),"pfx"==n?h:!0;try{N.style[h]=o}catch(g){}if(N.style[h]!=v)return l(),"pfx"==n?h:!0}return l(),!1}function v(e,n,t,o,s){var i=e.charAt(0).toUpperCase()+e.slice(1),a=(e+" "+b.join(i+" ")+i).split(" ");return r(n,"string")||r(n,"undefined")?h(a,n,o,s):(a=(e+" "+E.join(i+" ")+i).split(" "),f(a,n,t))}function y(e,n,r){return v(e,t,t,n,r)}var g=[],C={_version:"3.1.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var t=this;setTimeout(function(){n(t[e])},0)},addTest:function(e,n,t){g.push({name:e,fn:n,options:t})},addAsyncTest:function(e){g.push({name:null,fn:e})}},w=[],Modernizr=function(){};Modernizr.prototype=C,Modernizr=new Modernizr;var x=n.documentElement,_="svg"===x.nodeName.toLowerCase(),S="Moz O ms Webkit",b=C._config.usePrefixes?S.split(" "):[];C._cssomPrefixes=b;var E=C._config.usePrefixes?S.toLowerCase().split(" "):[];C._domPrefixes=E;var z={elem:a("modernizr")};Modernizr._q.push(function(){delete z.elem});var N={style:z.elem.style};Modernizr._q.unshift(function(){delete N.style}),C.testAllProps=v,C.testAllProps=y,Modernizr.addTest("flexwrap",y("flexWrap","wrap",!0)),Modernizr.addTest("flexbox",y("flexBasis","1px",!0)),o(),s(w),delete C.addTest,delete C.addAsyncTest;for(var P=0;P<Modernizr._q.length;P++)Modernizr._q[P]();e.Modernizr=Modernizr}(window,document);
\ No newline at end of file
function InitPxVideo(options) {
"use strict";
......@@ -210,34 +209,32 @@ function InitPxVideo(options) {
obj.controls.innerHTML = '<div class="progress-bar">' +
'<progress class="px-video-progress" max="100" value="0"><span>0</span>% played</progress>' +
'</div>' +
'<div class="controls">' +
'<div class="px-video-time">' +
'<span class="sr-only">time</span> <span class="px-video-duration">00:00</span>' +
'</div>' +
'<div class="px-video-playback-buttons">' +
'<button class="px-video-restart"><span class="sr-only">Restart</span></button>' +
'<button class="px-video-rewind"><span class="sr-only">rewind <span class="px-seconds">10</span> seconds</span></button>' +
'<button class="px-video-play" aria-label="'+obj.playAriaLabel+'"><span class="sr-only">Play</span></button>' +
'<button class="px-video-pause hide"><span class="sr-only">Pause</span></button>' +
'<button class="px-video-forward"><span class="sr-only">forward <span class="px-seconds">10</span> seconds</span></button>' +
'<div class="px-video-time">' +
'<span class="sr-only">time</span> <span class="px-video-duration">00:00</span>' +
'</div>' +
'<div class="px-video-playback-buttons">' +
'<button class="px-video-restart"><span class="sr-only">Restart</span></button>' +
'<button class="px-video-rewind"><span class="sr-only">rewind <span class="px-seconds">10</span> seconds</span></button>' +
'<button class="px-video-play" aria-label="'+obj.playAriaLabel+'"><span class="sr-only">Play</span></button>' +
'<button class="px-video-pause hide"><span class="sr-only">Pause</span></button>' +
'<button class="px-video-forward"><span class="sr-only">forward <span class="px-seconds">10</span> seconds</span></button>' +
'</div>' +
'<div class="px-video-volume-controls">' +
'<div class="px-video-mute-btn-container">' +
'<input class="px-video-mute sr-only" id="btnMute'+obj.randomNum+'" type="checkbox" />' +
'<label id="labelMute'+obj.randomNum+'" for="btnMute'+obj.randomNum+'"><span class="sr-only">Mute</span></label>' +
'</div>' +
'<div class="px-video-volume-controls">' +
'<div class="px-video-mute-btn-container">' +
'<input class="px-video-mute sr-only" id="btnMute'+obj.randomNum+'" type="checkbox" />' +
'<label id="labelMute'+obj.randomNum+'" for="btnMute'+obj.randomNum+'"><span class="sr-only">Mute</span></label>' +
'</div>' +
'<div class="px-video-volume-slider">' +
'<label for="volume'+obj.randomNum+'" class="sr-only">Volume:</label><input id="volume'+obj.randomNum+'" class="px-video-volume" type="range" min="0" max="10" value="5" />' +
'</div>' +
'<div class="px-video-captions-btn-container hide">' +
'<input class="px-video-btnCaptions sr-only" id="btnCaptions'+obj.randomNum+'" type="checkbox" />' +
'<label for="btnCaptions'+obj.randomNum+'"><span class="sr-only">Captions</span></label>' +
'</div>' +
'<div class="px-video-fullscreen-btn-container show">' +
'<input class="px-video-btnFullScreen sr-only" id="btnFullscreen'+obj.randomNum+'" type="checkbox" />' +
'<label for="btnFullscreen'+obj.randomNum+'"><span class="sr-only">Fullscreen</span></label>' +
'<div class="px-video-volume-slider">' +
'<label for="volume'+obj.randomNum+'" class="sr-only">Volume:</label><input id="volume'+obj.randomNum+'" class="px-video-volume" type="range" min="0" max="10" value="5" />' +
'</div>' +
'<div class="px-video-captions-btn-container hide">' +
'<input class="px-video-btnCaptions sr-only" id="btnCaptions'+obj.randomNum+'" type="checkbox" />' +
'<label for="btnCaptions'+obj.randomNum+'"><span class="sr-only">Captions</span></label>' +
'</div>' +
'<div class="px-video-fullscreen-btn-container show">' +
'<input class="px-video-btnFullScreen sr-only" id="btnFullscreen'+obj.randomNum+'" type="checkbox" />' +
'<label for="btnFullscreen'+obj.randomNum+'"><span class="sr-only">Fullscreen</span></label>' +
'</div>' +
'</div>';
// Adjust layout per width of video - container
......
......@@ -547,7 +547,7 @@
@media only screen and (min-width: 540px)
width 95px /* width of volume slider */
.px-video-controls .controls
.px-video-controls
position relative
input[type='range']
......@@ -596,4 +596,71 @@
margin-top 4px
.px-video-captions
padding 8px
min-height 36px
\ No newline at end of file
min-height 36px
/* FLEXBOX-ONLY CSS.
This will only work with the including modernizr.js script, which applies the
.flexbox.flexwrap classes to the body element */
.flexbox.flexwrap
.px-video-controls
display flex // enables flex for all its children */
flex-direction row // arrange buttons/inputs in rows, not columns */
flex-wrap wrap // run rows from left-to-right, wrap overflowing items to next row */
justify-content space-between // stick buttons/inputs to left/right edges with excess space distributed between */
align-items center // horizontally centre rows inside container */
align-content center // horizontally centre all content inside container when there are multiple rows */
.progress-bar
flex-grow 1 // flex to fill rest of available space */
width 75%
@media only screen and (min-width: 480px)
width 75%
@media only screen and (min-width: 590px)
width 85%
@media only screen and (min-width: 970px)
width 85%
@media only screen and (min-width: 1795px)
width 85%
.px-video-progress
margin-top 10px
width 100%
.px-video-time
flex-grow 0 // don't grow
flex-shrink 0 // don't shrink
padding-left 10px // space between time and progress bar
margin-top 0
.px-video-playback-buttons
flex-grow 1 // flex to fill rest of available space
min-width auto
@media only screen and (min-width: 620px)
left auto
margin-left auto
min-width auto
position relative
width auto
display flex // enables flex for all its children
flex-direction row // arrange buttons/inputs in rows, not columns
flex-wrap no-wrap // don't let these items wrap
justify-content center // stick buttons/inputs to left/right edges with excess space distributed between
align-items center // horizontally centre rows inside container
align-content center // horizontally centre all content inside container when there are multiple rows
padding-left 180px
.px-video-controls button
margin 0
/* mute button */
.px-video-volume-controls
min-width auto
@media only screen and (min-width: 540px)
margin-top 0
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment