Improved plugin syntax, refactoring...
This commit is contained in:
Sam Potts
6
assets/icons/bubble.svg
Executable file
6
assets/icons/bubble.svg
Executable file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generated by IcoMoon.io -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
|
||||
<path d="M9.016 3c2.748 0 4.984 2.243 4.984 5s-2.236 5-4.97 5l-0.060-0.004c-0.055-0.004-0.11-0.007-0.165-0.010l-0.336-0.014-3.665 1.098 0.629-2.483-0.517-0.747c-0.58-0.839-0.886-1.822-0.886-2.842 0-2.757 2.236-5 4.984-5zM9.016 1c-3.857 0-6.984 3.134-6.984 7 0 1.479 0.46 2.848 1.241 3.978l-1.272 5.022 6.722-2.015c0.098 0.004 0.194 0.015 0.293 0.015 3.857 0 6.984-3.134 6.984-7s-3.127-7-6.984-7v0z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 726 B |
@ -1,6 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generated by IcoMoon.io -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
|
||||
<path d="M17 2h-16c-0.552 0-1 0.448-1 1v12c0 0.552 0.448 1 1 1h16c0.552 0 1-0.448 1-1v-12c0-0.552-0.448-1-1-1zM2 4h2v2h-2v-2zM2 8h2v2h-2v-2zM2 14v-2h2v2h-2zM6 14v-10h6v10h-6zM16 14h-2v-2h2v2zM16 10h-2v-2h2v2zM16 6h-2v-2h2v2z"></path>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 553 B |
14
assets/icons/muted.svg
Normal file
14
assets/icons/muted.svg
Normal file
@ -0,0 +1,14 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>muted</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage">
|
||||
<g id="sound" sketch:type="MSLayerGroup" transform="translate(0.000000, 2.000000)">
|
||||
<path d="M9.214,0 C9.103,0 8.989,0.032 8.88,0.101 L4.832,2.911 C4.749,2.969 4.65,3 4.549,3 L0.996,3 C0.446,3 1.33226763e-15,3.448 1.33226763e-15,4 L1.33226763e-15,10 C1.33226763e-15,10.552 0.446,11 0.996,11 L4.549,11 C4.651,11 4.749,11.031 4.832,11.089 L8.88,13.899 C8.989,13.968 9.103,14 9.214,14 C9.606,14 9.961,13.6 9.961,13.051 L9.961,0.95 C9.961,0.4 9.606,0.001 9.214,0.001 L9.214,0 Z M7.969,10.834 L5.582,9.177 C5.416,9.062 5.218,8.999 5.016,8.999 L2.491,8.999 C2.216,8.999 1.993,8.775 1.993,8.499 L1.993,5.499 C1.993,5.223 2.216,4.999 2.491,4.999 L5.016,4.999 C5.218,4.999 5.416,4.937 5.582,4.821 L7.969,3.164 L7.969,10.833 L7.969,10.834 Z" id="Shape" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M14.934,6.799 C14.848,5.051 13.42,3.808 12.427,3.15 C11.957,2.838 11.333,3.028 11.102,3.558 L11.064,3.644 C10.876,4.075 11.019,4.583 11.4,4.838 C12.106,5.311 12.986,6.085 13.024,6.903 C13.056,7.579 12.471,8.371 11.361,9.173 C10.963,9.461 10.832,10.012 11.076,10.448 L11.118,10.523 C11.384,10.998 11.984,11.147 12.418,10.835 C14.158,9.584 15.004,8.229 14.934,6.798 L14.934,6.799 Z" id="Shape" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M17.934,6.799 C17.848,5.051 16.42,3.808 15.427,3.15 C14.957,2.838 14.333,3.028 14.102,3.558 L14.064,3.644 C13.876,4.075 14.019,4.583 14.4,4.838 C15.106,5.311 15.986,6.085 16.024,6.903 C16.056,7.579 15.471,8.371 14.361,9.173 C13.963,9.461 13.832,10.012 14.076,10.448 L14.118,10.523 C14.384,10.998 14.984,11.147 15.418,10.835 C17.158,9.584 18.004,8.229 17.934,6.798 L17.934,6.799 Z" id="Shape-2" sketch:type="MSShapeGroup" transform="translate(15.945467, 6.999165) rotate(-180.000000) translate(-15.945467, -6.999165) "></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
@ -4,10 +4,10 @@
|
||||
<title>pause</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<g id="pause" sketch:type="MSLayerGroup" transform="translate(3.000000, 3.000000)" stroke="#FFFFFF" stroke-width="2">
|
||||
<rect id="Rectangle-1" sketch:type="MSShapeGroup" x="8" y="0" width="4" height="12" rx="1"></rect>
|
||||
<rect id="Rectangle-2" sketch:type="MSShapeGroup" x="0" y="0" width="4" height="12" rx="1"></rect>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage">
|
||||
<g id="pause" sketch:type="MSLayerGroup" transform="translate(2.000000, 2.000000)">
|
||||
<path d="M0,2 L0,12 C5.24848613e-17,14 2,14 2,14 L4,14 C4,14 6,14 6,12 C6,11.786438 6,11.572876 6,11 L6,2 C6,3.17446247e-09 4,0 4,0 L2,0 C2,0 0,0 0,2 Z M2,2 L4,2 L4,12 L2,12 L2,2 Z" id="Path-1" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M8,2 L8,12 C8,14 10,14 10,14 L12,14 C12,14 14,14 14,12 C14,11.786438 14,11.572876 14,11 L14,2 C14,3.17446247e-09 12,0 12,0 L10,0 C10,0 8,0 8,2 Z M10,2 L12,2 L12,12 L10,12 L10,2 Z" id="Path-2" sketch:type="MSShapeGroup"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 899 B After Width: | Height: | Size: 1.1 KiB |
@ -2,16 +2,16 @@
|
||||
// Docs example
|
||||
// ==========================================================================
|
||||
|
||||
/*global InitPxVideo, Mustache, templates */
|
||||
/*global simpleMedia, templates */
|
||||
|
||||
// Initialize
|
||||
var video = new InitPxVideo({
|
||||
"videoId": "myvid",
|
||||
"captionsOnDefault": true,
|
||||
"seekInterval": 20,
|
||||
"videoTitle": "PayPal Austin promo",
|
||||
"debug": true,
|
||||
"html": templates.controls.render({})
|
||||
// Register a callback
|
||||
simpleMedia.on("setup", function() {
|
||||
console.log(this);
|
||||
});
|
||||
|
||||
console.log(video);
|
||||
//execute shout
|
||||
simpleMedia.setup({
|
||||
debug: true,
|
||||
title: "PayPal demo",
|
||||
html: templates.controls.render({})
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
@ -5,26 +5,21 @@
|
||||
// Variables
|
||||
// -------------------------------
|
||||
// Colors
|
||||
@base-color: #2E3C44;
|
||||
@green: #1ABC9C;
|
||||
@red: #D44334;
|
||||
@blue: #3498DB;
|
||||
|
||||
// Grays
|
||||
@gray-dark: #343f4a;
|
||||
@gray: #565d64;
|
||||
@gray-light: #6f7e86;
|
||||
@gray-lighter: #859093;
|
||||
@gray-lightest: #cbd0d3;
|
||||
@gray-light-mega: #dadfe2;
|
||||
@off-white: #f9fafb;
|
||||
@blue: #3498DB;
|
||||
@gray-dark: #343f4a;
|
||||
@gray: #565d64;
|
||||
@gray-light: #cbd0d3;
|
||||
|
||||
// Controls
|
||||
@control-color: @gray-lightest;
|
||||
@control-color-active: @blue;
|
||||
@control-color-inactive: @gray;
|
||||
@control-spacing: 10px;
|
||||
@controls-bg: @gray-dark;
|
||||
@control-color: @gray-light;
|
||||
@control-color-active: @blue;
|
||||
@control-color-inactive: @gray;
|
||||
@control-spacing: 10px;
|
||||
|
||||
// Progress
|
||||
@progress-bg: @gray;
|
||||
@progress-value-bg: @blue;
|
||||
|
||||
// BORDER-BOX ALL THE THINGS! (http://paulirish.com/2012/box-sizing-border-box-ftw/)
|
||||
// -------------------------------
|
||||
@ -37,6 +32,7 @@
|
||||
|
||||
// Utility classes & mixins
|
||||
// -------------------------------
|
||||
// Screen reader only
|
||||
.sr-only {
|
||||
position: absolute !important;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
@ -46,12 +42,6 @@
|
||||
width: 1px !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
.show-inline {
|
||||
display: inline-block;
|
||||
}
|
||||
// Contain floats: nicolasgallagher.com/micro-clearfix-hack/
|
||||
.clearfix() {
|
||||
zoom: 1;
|
||||
@ -59,6 +49,13 @@
|
||||
&:after { content: ""; display: table; }
|
||||
&:after { clear: both; }
|
||||
}
|
||||
|
||||
// Tab focus styles
|
||||
.tab-focus() {
|
||||
outline: thin dotted #000;
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
// Font smoothing
|
||||
// ---------------------------------------
|
||||
.font-smoothing(@mode: on) when (@mode = on) {
|
||||
@ -79,47 +76,21 @@
|
||||
overflow: hidden; // For the controls
|
||||
background: #000;
|
||||
|
||||
|
||||
// For video
|
||||
&-video {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&:fullscreen {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
&-video {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
&-controls {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
.icon-exit-fullscreen {
|
||||
display: block;
|
||||
|
||||
& + svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
video {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
.px-video-captions {
|
||||
|
||||
// Captions
|
||||
&-captions {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
@ -132,13 +103,26 @@
|
||||
text-align: center;
|
||||
.font-smoothing();
|
||||
}
|
||||
&.captions &-captions {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Player controls
|
||||
&-controls {
|
||||
.clearfix();
|
||||
.font-smoothing();
|
||||
position: relative;
|
||||
padding: (@control-spacing * 2) @control-spacing @control-spacing;
|
||||
background: @gray-dark;
|
||||
background: @controls-bg;
|
||||
line-height: 1;
|
||||
|
||||
// Layout
|
||||
&-playback {
|
||||
float: left;
|
||||
}
|
||||
&-sound {
|
||||
float: right;
|
||||
}
|
||||
|
||||
input + label,
|
||||
button {
|
||||
@ -152,6 +136,8 @@
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: block;
|
||||
fill: currentColor;
|
||||
transition: fill .3s ease;
|
||||
@ -170,25 +156,28 @@
|
||||
border: 0;
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
button:hover,
|
||||
button:focus,
|
||||
label:hover,
|
||||
input:focus + label {
|
||||
label:hover {
|
||||
background: @control-color-active;
|
||||
|
||||
svg {
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
.icon-exit-fullscreen {
|
||||
input:focus + label,
|
||||
button:focus {
|
||||
.tab-focus();
|
||||
|
||||
svg {
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
.icon-exit-fullscreen,
|
||||
.icon-muted {
|
||||
display: none;
|
||||
}
|
||||
.px-video-time {
|
||||
.player-time {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: @control-spacing;
|
||||
@ -198,7 +187,9 @@
|
||||
.font-smoothing();
|
||||
}
|
||||
}
|
||||
progress {
|
||||
|
||||
// Player progress
|
||||
&-progress {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -211,45 +202,48 @@
|
||||
&[value] {
|
||||
-webkit-appearance: none;
|
||||
border: none;
|
||||
background: @gray;
|
||||
background: @progress-bg;
|
||||
cursor: pointer;
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
background: @gray;
|
||||
background: @progress-bg;
|
||||
}
|
||||
|
||||
// The value
|
||||
&::-webkit-progress-value {
|
||||
background: @control-color-active;
|
||||
background: @progress-value-bg;
|
||||
}
|
||||
&::-moz-progress-bar {
|
||||
background: @control-color-active;
|
||||
background: @progress-value-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
.play-controls {
|
||||
float: left;
|
||||
}
|
||||
.sound-controls {
|
||||
float: right;
|
||||
}
|
||||
|
||||
&-controls .px-video-pause,
|
||||
&.playing .player-controls .px-video-play {
|
||||
// States
|
||||
&-controls [data-player='pause'],
|
||||
&.playing .player-controls [data-player='play'] {
|
||||
display: none;
|
||||
}
|
||||
&.playing .player-controls .px-video-pause {
|
||||
&.playing .player-controls [data-player='pause'] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Muted
|
||||
&.muted .player-controls .icon-muted {
|
||||
display: block;
|
||||
|
||||
& + svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Volume control
|
||||
input[type='range'] {
|
||||
&-volume {
|
||||
-webkit-appearance: none;
|
||||
height: 6px;
|
||||
width: 100px;
|
||||
margin-right: @control-spacing;
|
||||
background: @gray;
|
||||
outline: 0;
|
||||
border-radius: 10px;
|
||||
|
||||
&::-moz-range-track {
|
||||
@ -274,27 +268,59 @@
|
||||
background: @control-color;
|
||||
border-radius: 100%;
|
||||
}
|
||||
&:focus::-webkit-slider-thumb {
|
||||
background: @control-color-active;
|
||||
&:focus {
|
||||
outline: 0;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
background: @control-color-active;
|
||||
}
|
||||
&::-moz-range-thumb {
|
||||
background: @control-color-active;
|
||||
}
|
||||
}
|
||||
&:focus::-moz-range-thumb {
|
||||
background: @control-color-active;
|
||||
}
|
||||
|
||||
// Full screen mode
|
||||
&:fullscreen {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.player-video {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.player-controls {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
.icon-exit-fullscreen {
|
||||
display: block;
|
||||
|
||||
& + svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* fixing display for IE10+ */
|
||||
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
||||
.px-video-controls input[type='range'] {
|
||||
.video-controls .player-volume {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
height: 8px;
|
||||
top: -3px;
|
||||
}
|
||||
.px-video-time {
|
||||
.player-time {
|
||||
margin-top: 4px;
|
||||
}
|
||||
.px-video-captions {
|
||||
.player-captions {
|
||||
padding: 8px;
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
@ -1,54 +1,53 @@
|
||||
<div class="player-controls">
|
||||
<progress class="px-video-progress" max="100" value="0"><span>0</span>% played</progress>
|
||||
<progress class="player-progress" max="100" value="0">
|
||||
<span>0</span>% played
|
||||
</progress>
|
||||
|
||||
<div class="play-controls">
|
||||
<button class="px-video-restart" data-player="restart">
|
||||
<div class="player-controls-playback">
|
||||
<button data-player="restart">
|
||||
<svg><use xlink:href="#icon-refresh"></use></svg>
|
||||
<span class="sr-only">Restart</span>
|
||||
</button>
|
||||
<button class="px-video-rewind" data-player="rewind">
|
||||
<button data-player="rewind">
|
||||
<svg><use xlink:href="#icon-rewind"></use></svg>
|
||||
<span class="sr-only">Rewind <span class="px-seconds">10</span> seconds</span>
|
||||
<span class="sr-only">Rewind <span class="player-seek-time">10</span> seconds</span>
|
||||
</button>
|
||||
<button class="px-video-play" aria-label="{aria-label}" data-player="play">
|
||||
<button aria-label="{aria-label}" data-player="play">
|
||||
<svg><use xlink:href="#icon-play"></use></svg>
|
||||
<span class="sr-only">Play</span>
|
||||
</button>
|
||||
<button class="px-video-pause" data-player="pause">
|
||||
<button data-player="pause">
|
||||
<svg><use xlink:href="#icon-pause"></use></svg>
|
||||
<span class="sr-only">Pause</span>
|
||||
</button>
|
||||
<button class="px-video-forward" data-player="fast-forward">
|
||||
<button data-player="fast-forward">
|
||||
<svg><use xlink:href="#icon-fast-forward"></use></svg>
|
||||
<span class="sr-only">Fast forward <span class="px-seconds">10</span> seconds</span>
|
||||
<span class="sr-only">Fast forward <span class="player-seek-time">10</span> seconds</span>
|
||||
</button>
|
||||
<div class="px-video-time">
|
||||
<span class="player-time">
|
||||
<span class="sr-only">Time</span>
|
||||
<span class="px-video-duration">00:00</span>
|
||||
</div>
|
||||
<span class="player-duration">00:00</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="sound-controls">
|
||||
<!--<div class="px-video-mute-btn-container">-->
|
||||
<input class="px-video-mute inverted sr-only" id="btnMute{id}" type="checkbox">
|
||||
<label id="labelMute{id}" for="btnMute{id}">
|
||||
<svg><use xlink:href="#icon-sound"></use></svg>
|
||||
<span class="sr-only">Mute</span>
|
||||
</label>
|
||||
<!--</div>-->
|
||||
<div class="player-controls-sound">
|
||||
<input class="inverted sr-only" id="mute{id}" type="checkbox" data-player="mute">
|
||||
<label id="mute{id}" for="mute{id}">
|
||||
<svg class="icon-muted"><use xlink:href="#icon-muted"></use></svg>
|
||||
<svg><use xlink:href="#icon-sound"></use></svg>
|
||||
<span class="sr-only">Mute</span>
|
||||
</label>
|
||||
|
||||
<label for="volume{id}" class="sr-only">Volume:</label>
|
||||
<input id="volume{id}" class="px-video-volume" type="range" min="0" max="10" value="5">
|
||||
<input id="volume{id}" class="player-volume" type="range" min="0" max="10" value="5" data-player="volume">
|
||||
|
||||
<!--<div class="px-video-captions-btn-container hide">-->
|
||||
<input class="px-video-btnCaptions sr-only" id="btnCaptions{id}" type="checkbox">
|
||||
<label for="btnCaptions{id}">
|
||||
<svg><use xlink:href="#icon-film"></use></svg>
|
||||
<span class="sr-only">Captions</span>
|
||||
</label>
|
||||
<!--</div>-->
|
||||
<input class="sr-only" id="captions{id}" type="checkbox" data-player="captions">
|
||||
<label for="captions{id}">
|
||||
<svg><use xlink:href="#icon-bubble"></use></svg>
|
||||
<span class="sr-only">Captions</span>
|
||||
</label>
|
||||
|
||||
<button class="player-toggle-fullscreen" data-player="toggle-fullscreen">
|
||||
<button data-player="fullscreen">
|
||||
<svg class="icon-exit-fullscreen"><use xlink:href="#icon-collapse"></use></svg>
|
||||
<svg><use xlink:href="#icon-expand"></use></svg>
|
||||
<span class="sr-only">Toggle fullscreen</span>
|
||||
|
||||
Reference in New Issue
Block a user