@@ -12,6 +12,8 @@ module.exports = function (grunt) { | |||
// show elapsed time at the end | |||
require('time-grunt')(grunt); | |||
grunt.loadNpmTasks('grunt-npm-command'); | |||
// configurable paths | |||
var yeomanConfig = { | |||
app: require('./bower.json').appPath || 'src', | |||
@@ -37,11 +39,11 @@ module.exports = function (grunt) { | |||
livereload: '<%= connect.options.livereload %>' | |||
}, | |||
files: [ | |||
'<%= yeoman.app %>/*.html', | |||
'{.tmp,<%= yeoman.app %>}/styles/{,*/}*.css', | |||
'{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js', | |||
'<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}' | |||
], | |||
'<%= yeoman.app %>/*.html', | |||
'{.tmp,<%= yeoman.app %>}/styles/{,*/}*.css', | |||
'{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js', | |||
'<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}' | |||
], | |||
tasks: ['includes:server'] | |||
} | |||
}, | |||
@@ -56,19 +58,19 @@ module.exports = function (grunt) { | |||
options: { | |||
open: true, | |||
base: [ | |||
'.tmp', | |||
'<%= yeoman.app %>' | |||
] | |||
'.tmp', | |||
'<%= yeoman.app %>' | |||
] | |||
} | |||
}, | |||
test: { | |||
options: { | |||
port: 9001, | |||
base: [ | |||
'.tmp', | |||
'test', | |||
'<%= yeoman.app %>' | |||
] | |||
'.tmp', | |||
'test', | |||
'<%= yeoman.app %>' | |||
] | |||
} | |||
}, | |||
dist: { | |||
@@ -82,11 +84,11 @@ module.exports = function (grunt) { | |||
files: [{ | |||
dot: true, | |||
src: [ | |||
'.tmp', | |||
'<%= yeoman.dist %>/*', | |||
'!<%= yeoman.dist %>/.git*' | |||
] | |||
}] | |||
'.tmp', | |||
'<%= yeoman.dist %>/*', | |||
'!<%= yeoman.dist %>/.git*' | |||
] | |||
}] | |||
}, | |||
server: '.tmp' | |||
}, | |||
@@ -96,11 +98,11 @@ module.exports = function (grunt) { | |||
reporter: require('jshint-stylish') | |||
}, | |||
all: [ | |||
'Gruntfile.js', | |||
'<%= yeoman.app %>/scripts/{,*/}*.js', | |||
'!<%= yeoman.app %>/scripts/vendor/*', | |||
'test/spec/{,*/}*.js' | |||
] | |||
'Gruntfile.js', | |||
'<%= yeoman.app %>/scripts/{,*/}*.js', | |||
'!<%= yeoman.app %>/scripts/vendor/*', | |||
'test/spec/{,*/}*.js' | |||
] | |||
}, | |||
@@ -153,11 +155,11 @@ module.exports = function (grunt) { | |||
dist: { | |||
files: { | |||
src: [ | |||
'<%= yeoman.dist %>/scripts/{,*/}*.js', | |||
'<%= yeoman.dist %>/styles/{,*/}*.css', | |||
'<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}', | |||
'<%= yeoman.dist %>/fonts/{,*/}*.*' | |||
] | |||
'<%= yeoman.dist %>/scripts/{,*/}*.js', | |||
'<%= yeoman.dist %>/styles/{,*/}*.css', | |||
'<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}', | |||
'<%= yeoman.dist %>/fonts/{,*/}*.*' | |||
] | |||
} | |||
} | |||
}, | |||
@@ -181,7 +183,7 @@ module.exports = function (grunt) { | |||
cwd: '<%= yeoman.app %>/images', | |||
src: '{,*/}*.{png,jpg,jpeg}', | |||
dest: '<%= yeoman.dist %>/images' | |||
}] | |||
}] | |||
} | |||
}, | |||
@@ -189,9 +191,9 @@ module.exports = function (grunt) { | |||
dist: { | |||
files: { | |||
'<%= yeoman.dist %>/styles/main.css': [ | |||
'.tmp/styles/{,*/}*.css', | |||
'<%= yeoman.app %>/styles/{,*/}*.css' | |||
] | |||
'.tmp/styles/{,*/}*.css', | |||
'<%= yeoman.app %>/styles/{,*/}*.css' | |||
] | |||
} | |||
} | |||
}, | |||
@@ -213,10 +215,24 @@ module.exports = function (grunt) { | |||
cwd: '<%= yeoman.app %>', | |||
src: '*.html', | |||
dest: '<%= yeoman.dist %>' | |||
}] | |||
}] | |||
} | |||
}, | |||
copy: { | |||
'npm-command': { | |||
'videojs-install': { | |||
options: { | |||
cwd: '<%= yeoman.app %>/bower_components/videojs/' | |||
} | |||
}, | |||
'videojs-build': { | |||
options: { | |||
cmd: 'run-script', | |||
args: ['build'], | |||
cwd: '<%= yeoman.app %>/bower_components/videojs/' | |||
} | |||
} | |||
} | |||
,copy: { | |||
dist: { | |||
files: [{ | |||
expand: true, | |||
@@ -224,53 +240,55 @@ module.exports = function (grunt) { | |||
cwd: '<%= yeoman.app %>', | |||
dest: '<%= yeoman.dist %>', | |||
src: [ | |||
'*.{ico,png,txt}', | |||
'fonts/{,*/}*.*', | |||
'.htaccess', | |||
'index.txt', | |||
'404.txt', | |||
'images/{,*/}*.{webp,gif,svg}' | |||
] | |||
}] | |||
'*.{ico,png,txt}', | |||
'fonts/{,*/}*.*', | |||
'.htaccess', | |||
'index.txt', | |||
'404.txt', | |||
'images/{,*/}*.{webp,gif,svg}' | |||
] | |||
}] | |||
}, | |||
server: { | |||
files: [{ | |||
expand: true, | |||
dot: true, | |||
cwd: '<%= yeoman.app %>/bower_components/font-awesome/fonts/', | |||
dest: '<%= yeoman.app %>/fonts/font-awesome', | |||
src: ['*'] | |||
expand: true, | |||
dot: true, | |||
cwd: '<%= yeoman.app %>/bower_components/font-awesome/fonts/', | |||
dest: '<%= yeoman.app %>/fonts/font-awesome', | |||
src: ['*'] | |||
}, { | |||
expand: true, | |||
dot: true, | |||
cwd: '<%= yeoman.app %>/bower_components/bootstrap/dist/fonts/', | |||
dest: '<%= yeoman.app %>/fonts/glyphicons', | |||
src: ['*'] | |||
expand: true, | |||
dot: true, | |||
cwd: '<%= yeoman.app %>/bower_components/bootstrap/dist/fonts/', | |||
dest: '<%= yeoman.app %>/fonts/glyphicons', | |||
src: ['*'] | |||
}] | |||
} | |||
}, | |||
concurrent: { | |||
dist: [ | |||
'less', | |||
'imagemin', | |||
'htmlmin' | |||
] | |||
'less', | |||
'imagemin', | |||
'htmlmin' | |||
] | |||
} | |||
}); | |||
grunt.loadNpmTasks('grunt-npm-command'); | |||
grunt.registerTask('serve', function (target) { | |||
if (target === 'dist') { | |||
return grunt.task.run(['build', 'connect:dist:keepalive']); | |||
} | |||
grunt.task.run([ | |||
'clean:server', | |||
'less', | |||
'includes:server', | |||
'copy:server', | |||
'connect:livereload', | |||
'watch' | |||
]); | |||
'clean:server', | |||
'less', | |||
'includes:server', | |||
'copy:server', | |||
'connect:livereload', | |||
'watch' | |||
]); | |||
}); | |||
grunt.registerTask('server', function () { | |||
@@ -279,30 +297,30 @@ module.exports = function (grunt) { | |||
}); | |||
grunt.registerTask('test', [ | |||
'clean:server', | |||
'less', | |||
'copy:server', | |||
'connect:test', | |||
]); | |||
'clean:server', | |||
'less', | |||
'copy:server', | |||
'connect:test', | |||
]); | |||
grunt.registerTask('build', [ | |||
'clean:dist', | |||
'clean:dist', | |||
'npm-command', | |||
'copy:server', | |||
'useminPrepare', | |||
'concurrent', | |||
'cssmin', | |||
'concat', | |||
'includes:build', | |||
'uglify', | |||
'copy', | |||
'usemin', | |||
'copy:server', | |||
'useminPrepare', | |||
'concurrent', | |||
'cssmin', | |||
'concat', | |||
'includes:build', | |||
'uglify', | |||
'copy', | |||
'usemin', | |||
]); | |||
]); | |||
grunt.registerTask('default', [ | |||
'jshint', | |||
'test', | |||
'build' | |||
]); | |||
'jshint', | |||
'test', | |||
'build' | |||
]); | |||
}; |
@@ -13,6 +13,7 @@ | |||
"tests" | |||
], | |||
"dependencies": { | |||
"videojs": "~7.4.2", | |||
"bootstrap": "~3.0.0", | |||
"modernizr": "~2.6.2", | |||
"uri.js": "~1.14.1", | |||
@@ -20,6 +20,7 @@ | |||
"grunt-contrib-watch": "~0.6.1", | |||
"grunt-include-replace": "^2.0.0", | |||
"grunt-includes": "^0.4.5", | |||
"grunt-npm-command": "^0.1.2", | |||
"grunt-rev": "~0.1.0", | |||
"grunt-svgmin": "1.0.0", | |||
"grunt-usemin": "~2.4.0", | |||
@@ -25,7 +25,13 @@ include "includes/head.html" | |||
</div> | |||
<div id="terminal" class="terminal preview-image"> | |||
<audio data-color="#f6f8f8" src="{{.Url}}" type="{{.ContentType}}"></audio> | |||
<audio id="audio-player" | |||
class="video-js vjs-default-skin" | |||
controls | |||
preload="auto" | |||
data-setup='{}'> | |||
<source src="{{.Url}}" type="{{.ContentType}}"></source> | |||
</audio> | |||
</div> | |||
</div> | |||
</div> | |||
@@ -37,8 +43,8 @@ include "includes/head.html" | |||
include "includes/footer.html" | |||
include "includes/js.html" | |||
<!-- build:js /scripts/ckin.js --> | |||
<script src="/scripts/ckin.js"></script> | |||
<!-- build:js /scripts/vendor/video.js --> | |||
<script src="bower_components/videojs/dist/alt/video.novtt.min.js"></script> | |||
<!-- endbuild --> | |||
</body> | |||
@@ -24,7 +24,13 @@ include "includes/head.html" | |||
</div> | |||
<div id="terminal" class="terminal preview-image"> | |||
<video data-color="#f6f8f8" src="{{.Url}}" type="{{.ContentType}}"></video> | |||
<video id="video-player" | |||
class="video-js vjs-default-skin" | |||
controls | |||
preload="auto" | |||
data-setup='{}'> | |||
<source src="{{.Url}}" type="{{.ContentType}}"></source> | |||
</video> | |||
</div> | |||
</div> | |||
</div> | |||
@@ -36,8 +42,8 @@ include "includes/head.html" | |||
include "includes/footer.html" | |||
include "includes/js.html" | |||
<!-- build:js /scripts/ckin.js --> | |||
<script src="/scripts/ckin.js"></script> | |||
<!-- build:js /scripts/vendor/video.js --> | |||
<script src="bower_components/videojs/dist/alt/video.novtt.min.js"></script> | |||
<!-- endbuild --> | |||
</body> | |||
@@ -1,509 +0,0 @@ | |||
/*! | |||
ckin v0.0.1: Custom HTML5 Media Player Skins. | |||
(c) 2017 | |||
MIT License | |||
git+https://github.com/hunzaboy/ckin.git | |||
*/ | |||
// Source: https://gist.github.com/k-gun/c2ea7c49edf7b757fe9561ba37cb19ca; | |||
(function () { | |||
// helpers | |||
var regExp = function regExp(name) { | |||
return new RegExp('(^| )' + name + '( |$)'); | |||
}; | |||
var forEach = function forEach(list, fn, scope) { | |||
for (var i = 0; i < list.length; i++) { | |||
fn.call(scope, list[i]); | |||
} | |||
}; | |||
// class list object with basic methods | |||
function ClassList(element) { | |||
this.element = element; | |||
} | |||
ClassList.prototype = { | |||
add: function add() { | |||
forEach(arguments, function (name) { | |||
if (!this.contains(name)) { | |||
this.element.className += ' ' + name; | |||
} | |||
}, this); | |||
}, | |||
remove: function remove() { | |||
forEach(arguments, function (name) { | |||
this.element.className = this.element.className.replace(regExp(name), ''); | |||
}, this); | |||
}, | |||
toggle: function toggle(name) { | |||
return this.contains(name) ? (this.remove(name), false) : (this.add(name), true); | |||
}, | |||
contains: function contains(name) { | |||
return regExp(name).test(this.element.className); | |||
}, | |||
// bonus.. | |||
replace: function replace(oldName, newName) { | |||
this.remove(oldName), this.add(newName); | |||
} | |||
}; | |||
// IE8/9, Safari | |||
if (!('classList' in Element.prototype)) { | |||
Object.defineProperty(Element.prototype, 'classList', { | |||
get: function get() { | |||
return new ClassList(this); | |||
} | |||
}); | |||
} | |||
// replace() support for others | |||
if (window.DOMTokenList && DOMTokenList.prototype.replace == null) { | |||
DOMTokenList.prototype.replace = ClassList.prototype.replace; | |||
} | |||
})(); | |||
(function () { | |||
if (typeof NodeList.prototype.forEach === "function") return false; | |||
NodeList.prototype.forEach = Array.prototype.forEach; | |||
})(); | |||
// Unfortunately, due to scattered support, browser sniffing is required | |||
function browserSniff() { | |||
var nVer = navigator.appVersion, | |||
nAgt = navigator.userAgent, | |||
browserName = navigator.appName, | |||
fullVersion = '' + parseFloat(navigator.appVersion), | |||
majorVersion = parseInt(navigator.appVersion, 10), | |||
nameOffset, | |||
verOffset, | |||
ix; | |||
// MSIE 11 | |||
if (navigator.appVersion.indexOf("Windows NT") !== -1 && navigator.appVersion.indexOf("rv:11") !== -1) { | |||
browserName = "IE"; | |||
fullVersion = "11;"; | |||
} | |||
// MSIE | |||
else if ((verOffset = nAgt.indexOf("MSIE")) !== -1) { | |||
browserName = "IE"; | |||
fullVersion = nAgt.substring(verOffset + 5); | |||
} | |||
// Chrome | |||
else if ((verOffset = nAgt.indexOf("Chrome")) !== -1) { | |||
browserName = "Chrome"; | |||
fullVersion = nAgt.substring(verOffset + 7); | |||
} | |||
// Safari | |||
else if ((verOffset = nAgt.indexOf("Safari")) !== -1) { | |||
browserName = "Safari"; | |||
fullVersion = nAgt.substring(verOffset + 7); | |||
if ((verOffset = nAgt.indexOf("Version")) !== -1) { | |||
fullVersion = nAgt.substring(verOffset + 8); | |||
} | |||
} | |||
// Firefox | |||
else if ((verOffset = nAgt.indexOf("Firefox")) !== -1) { | |||
browserName = "Firefox"; | |||
fullVersion = nAgt.substring(verOffset + 8); | |||
} | |||
// In most other browsers, "name/version" is at the end of userAgent | |||
else if ((nameOffset = nAgt.lastIndexOf(' ') + 1) < (verOffset = nAgt.lastIndexOf('/'))) { | |||
browserName = nAgt.substring(nameOffset, verOffset); | |||
fullVersion = nAgt.substring(verOffset + 1); | |||
if (browserName.toLowerCase() == browserName.toUpperCase()) { | |||
browserName = navigator.appName; | |||
} | |||
} | |||
// Trim the fullVersion string at semicolon/space if present | |||
if ((ix = fullVersion.indexOf(";")) !== -1) { | |||
fullVersion = fullVersion.substring(0, ix); | |||
} | |||
if ((ix = fullVersion.indexOf(" ")) !== -1) { | |||
fullVersion = fullVersion.substring(0, ix); | |||
} | |||
// Get major version | |||
majorVersion = parseInt('' + fullVersion, 10); | |||
if (isNaN(majorVersion)) { | |||
fullVersion = '' + parseFloat(navigator.appVersion); | |||
majorVersion = parseInt(navigator.appVersion, 10); | |||
} | |||
// Return data | |||
return [browserName, majorVersion]; | |||
} | |||
var obj = {}; | |||
obj.browserInfo = browserSniff(); | |||
obj.browserName = obj.browserInfo[0]; | |||
obj.browserVersion = obj.browserInfo[1]; | |||
wrapPlayers(); | |||
/* Get Our Elements */ | |||
var players = document.querySelectorAll('.ckin__player'); | |||
var iconPlay = '<i class="ckin-play"></i>'; | |||
var iconPause = '<i class="ckin-pause"></i>'; | |||
var iconVolumeMute = '<i class="ckin-volume-mute"></i>'; | |||
var iconVolumeHigh = '<i class="ckin-volume-high"></i>'; | |||
var iconVolumeMedium = '<i class="ckin-volume-medium"></i>'; | |||
var iconVolumeLow = '<i class="ckin-volume-low"></i>'; | |||
var iconExpand = '<i class="ckin-expand"></i>'; | |||
var iconCompress = '<i class="ckin-compress"></i>'; | |||
players.forEach(function (player) { | |||
var video = player.querySelector('video'); | |||
if (null === video) { | |||
return; | |||
} | |||
var skin = attachSkin(video.dataset.ckin); | |||
player.classList.add(skin); | |||
var overlay = video.dataset.overlay; | |||
addOverlay(player, overlay); | |||
var title = showTitle(skin, video.dataset.title); | |||
if (title) { | |||
player.insertAdjacentHTML('beforeend', title); | |||
} | |||
var html = buildControls(skin); | |||
player.insertAdjacentHTML('beforeend', html); | |||
var color = video.dataset.color; | |||
addColor(player, color); | |||
var playerControls = player.querySelector('.' + skin + '__controls'); | |||
var progress = player.querySelector('.progress');; | |||
var progressBar = player.querySelector('.progress__filled'); | |||
var progressTime = player.querySelector('.progress__time'); | |||
var toggle = player.querySelectorAll('.toggle'); | |||
var skipButtons = player.querySelectorAll('[data-skip]'); | |||
var ranges = player.querySelectorAll('.' + skin + '__slider'); | |||
var volumeButton = player.querySelector('.volume'); | |||
var fullScreenButton = player.querySelector('.fullscreen'); | |||
if (obj.browserName === "IE" && (obj.browserVersion === 8 || obj.browserVersion === 9)) { | |||
showControls(video); | |||
playerControls.style.display = "none"; | |||
} | |||
video.addEventListener('click', function () { | |||
togglePlay(this, player, true); | |||
}); | |||
video.addEventListener('play', function () { | |||
updateButton(this, toggle); | |||
}); | |||
video.addEventListener('pause', function () { | |||
updateButton(this, toggle); | |||
}); | |||
video.addEventListener('timeupdate', function () { | |||
handleProgress(this, progressBar, progressTime); | |||
}); | |||
toggle.forEach(function (button) { | |||
return button.addEventListener('click', function () { | |||
togglePlay(video, player, true); | |||
}); | |||
}); | |||
volumeButton.addEventListener('click', function () { | |||
toggleVolume(video, volumeButton); | |||
}); | |||
var mousedown = false; | |||
progress.addEventListener('click', function (e) { | |||
scrub(e, video, progress, progressTime); | |||
}); | |||
progress.addEventListener('mousemove', function (e) { | |||
return mousedown && scrub(e, video, progress, progressTime); | |||
}); | |||
progress.addEventListener('mousedown', function () { | |||
return mousedown = true; | |||
}); | |||
progress.addEventListener('mouseup', function () { | |||
return mousedown = false; | |||
}); | |||
fullScreenButton.addEventListener('click', function (e) { | |||
return toggleFullScreen(player, fullScreenButton); | |||
}); | |||
addListenerMulti(player, 'webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function (e) { | |||
return onFullScreen(e, player); | |||
}); | |||
}); | |||
players.forEach(function (player) { | |||
var audio = player.querySelector('audio'); | |||
if (null === audio) { | |||
return; | |||
} | |||
var skin = attachSkin(audio.dataset.ckin); | |||
player.classList.add(skin); | |||
var overlay = audio.dataset.overlay; | |||
addOverlay(player, overlay); | |||
var title = showTitle(skin, audio.dataset.title); | |||
if (title) { | |||
player.insertAdjacentHTML('beforeend', title); | |||
} | |||
var html = buildControls(skin); | |||
player.insertAdjacentHTML('beforeend', html); | |||
var color = audio.dataset.color; | |||
addColor(player, color); | |||
var playerControls = player.querySelector('.' + skin + '__controls'); | |||
var progress = player.querySelector('.progress');; | |||
var progressBar = player.querySelector('.progress__filled'); | |||
var progressTime = player.querySelector('.progress__time'); | |||
var toggle = player.querySelectorAll('.toggle'); | |||
var skipButtons = player.querySelectorAll('[data-skip]'); | |||
var ranges = player.querySelectorAll('.' + skin + '__slider'); | |||
var volumeButton = player.querySelector('.volume'); | |||
var fullScreenButton = player.querySelector('.fullscreen'); | |||
if (obj.browserName === "IE" && (obj.browserVersion === 8 || obj.browserVersion === 9)) { | |||
showControls(audio); | |||
playerControls.style.display = "none"; | |||
} | |||
audio.addEventListener('click', function () { | |||
togglePlay(this, player, false); | |||
}); | |||
audio.addEventListener('play', function () { | |||
updateButton(this, toggle); | |||
}); | |||
audio.addEventListener('pause', function () { | |||
updateButton(this, toggle); | |||
}); | |||
audio.addEventListener('timeupdate', function () { | |||
handleProgress(this, progressBar, progressTime); | |||
}); | |||
toggle.forEach(function (button) { | |||
return button.addEventListener('click', function () { | |||
togglePlay(audio, player, false); | |||
}); | |||
}); | |||
volumeButton.addEventListener('click', function () { | |||
toggleVolume(audio, volumeButton); | |||
}); | |||
var mousedown = false; | |||
progress.addEventListener('click', function (e) { | |||
scrub(e, audio, progress, progressTime); | |||
}); | |||
progress.addEventListener('mousemove', function (e) { | |||
return mousedown && scrub(e, audio, progress, progressTime); | |||
}); | |||
progress.addEventListener('mousedown', function () { | |||
return mousedown = true; | |||
}); | |||
progress.addEventListener('mouseup', function () { | |||
return mousedown = false; | |||
}); | |||
fullScreenButton.addEventListener('click', function (e) { | |||
return toggleFullScreen(player, fullScreenButton); | |||
}); | |||
addListenerMulti(player, 'webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function (e) { | |||
return onFullScreen(e, player); | |||
}); | |||
}); | |||
function showControls(media) { | |||
media.setAttribute("controls", "controls"); | |||
} | |||
function togglePlay(media, player, autoHide) { | |||
var method = media.paused ? 'play' : 'pause'; | |||
media[method](); | |||
if (autoHide) { | |||
media.paused ? player.classList.remove('is-playing') : player.classList.add('is-playing'); | |||
} | |||
} | |||
function updateButton(media, toggle) { | |||
var icon = media.paused ? iconPlay : iconPause; | |||
toggle.forEach(function (button) { | |||
return button.innerHTML = icon; | |||
}); | |||
} | |||
function skip() { | |||
media.currentTime += parseFloat(this.dataset.skip); | |||
} | |||
function toggleVolume(media, volumeButton) { | |||
var level = media.volume; | |||
var icon = iconVolumeMedium; | |||
if (level == 1) { | |||
level = 0; | |||
icon = iconVolumeMute; | |||
} else if (level == 0.66) { | |||
level = 1; | |||
icon = iconVolumeHigh; | |||
} else if (level == 0.33) { | |||
level = 0.66; | |||
icon = iconVolumeMedium; | |||
} else { | |||
level = 0.33; | |||
icon = iconVolumeLow; | |||
} | |||
media['volume'] = level; | |||
volumeButton.innerHTML = icon; | |||
} | |||
function handleRangeUpdate() { | |||
media[this.name] = this.value; | |||
} | |||
function handleProgress(media, progressBar, progressTime) { | |||
var percent = media.currentTime / media.duration * 100; | |||
progressBar.style.flexBasis = percent + '%'; | |||
progressTime.innerText = formatTime(media.currentTime) + "/" + formatTime(media.duration); | |||
} | |||
function scrub(e, media, progress, progressTime) { | |||
var scrubTime = e.offsetX / progress.offsetWidth * media.duration; | |||
media.currentTime = scrubTime; | |||
progressTime.innerText = formatTime(media.currentTime) + "/" + formatTime(media.duration); | |||
} | |||
function formatTime(time) { | |||
var date = new Date(null); | |||
date.setSeconds(time); // specify value for SECONDS here | |||
return date.toISOString().substr(11, 8); | |||
} | |||
function wrapPlayers() { | |||
var videos = document.querySelectorAll('video'); | |||
videos.forEach(function (video) { | |||
var wrapper = document.createElement('div'); | |||
wrapper.classList.add('ckin__player'); | |||
video.parentNode.insertBefore(wrapper, video); | |||
wrapper.appendChild(video); | |||
}); | |||
var audios = document.querySelectorAll('audio'); | |||
audios.forEach(function (audio) { | |||
var wrapper = document.createElement('div'); | |||
wrapper.classList.add('ckin__player'); | |||
wrapper.classList.add('audio'); | |||
audio.parentNode.insertBefore(wrapper, audio); | |||
wrapper.appendChild(audio); | |||
}); | |||
} | |||
function buildControls(skin) { | |||
var html = []; | |||
html.push('<button class="' + skin + '__button--big toggle" title="Toggle Play">' + iconPlay + '</button>'); | |||
html.push('<div class="' + skin + '__controls ckin__controls">'); | |||
html.push('<button class="' + skin + '__button toggle" title="Toggle Media">' + iconPlay + '</button>', '<div class="progress">', '<div class="progress__filled"></div>', '<p class="progress__breaker"></p>', '<div class="progress__time"></div>', '</div>', '<button class="' + skin + '__button volume" title="Volume">' + iconVolumeMedium + '</button>', '<button class="' + skin + '__button fullscreen" title="Full Screen">' + iconExpand + '</button>'); | |||
html.push('</div>'); | |||
return html.join(''); | |||
} | |||
function attachSkin(skin) { | |||
if (typeof skin != 'undefined' && skin != '') { | |||
return skin; | |||
} else { | |||
return 'default'; | |||
} | |||
} | |||
function showTitle(skin, title) { | |||
if (typeof title != 'undefined' && title != '') { | |||
return '<div class="' + skin + '__title">' + title + '</div>'; | |||
} else { | |||
return false; | |||
} | |||
} | |||
function addOverlay(player, overlay) { | |||
if (overlay == 1) { | |||
player.classList.add('ckin__overlay'); | |||
} else if (overlay == 2) { | |||
player.classList.add('ckin__overlay--2'); | |||
} else { | |||
return; | |||
} | |||
} | |||
function addColor(player, color) { | |||
if (typeof color != 'undefined' && color != '') { | |||
var buttons = player.querySelectorAll('button'); | |||
var progress = player.querySelector('.progress__filled'); | |||
progress.style.background = color; | |||
buttons.forEach(function (button) { | |||
return button.style.color = color; | |||
}); | |||
} | |||
} | |||
function toggleFullScreen(player, fullScreenButton) { | |||
// let isFullscreen = false; | |||
if (!document.fullscreenElement && // alternative standard method | |||
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) { | |||
player.classList.add('ckin__fullscreen'); | |||
if (player.requestFullscreen) { | |||
player.requestFullscreen(); | |||
} else if (player.mozRequestFullScreen) { | |||
player.mozRequestFullScreen(); // Firefox | |||
} else if (player.webkitRequestFullscreen) { | |||
player.webkitRequestFullscreen(); // Chrome and Safari | |||
} else if (player.msRequestFullscreen) { | |||
player.msRequestFullscreen(); | |||
} | |||
isFullscreen = true; | |||
fullScreenButton.innerHTML = iconCompress; | |||
} else { | |||
player.classList.remove('ckin__fullscreen'); | |||
if (document.cancelFullScreen) { | |||
document.cancelFullScreen(); | |||
} else if (document.mozCancelFullScreen) { | |||
document.mozCancelFullScreen(); | |||
} else if (document.webkitCancelFullScreen) { | |||
document.webkitCancelFullScreen(); | |||
} else if (document.msExitFullscreen) { | |||
document.msExitFullscreen(); | |||
} | |||
isFullscreen = false; | |||
fullScreenButton.innerHTML = iconExpand; | |||
} | |||
} | |||
function onFullScreen(e, player) { | |||
var isFullscreenNow = document.webkitFullscreenElement !== null; | |||
if (!isFullscreenNow) { | |||
player.classList.remove('ckin__fullscreen'); | |||
player.querySelector('.fullscreen').innerHTML = iconExpand; | |||
} else { | |||
// player.querySelector('.fullscreen').innerHTML = iconExpand; | |||
} | |||
} | |||
function addListenerMulti(element, eventNames, listener) { | |||
var events = eventNames.split(' '); | |||
for (var i = 0, iLen = events.length; i < iLen; i++) { | |||
element.addEventListener(events[i], listener, false); | |||
} | |||
} |
@@ -102,108 +102,22 @@ padding: 0px; | |||
} | |||
} | |||
#md-preview,{ | |||
#md-preview { | |||
padding-bottom: 30px; | |||
} | |||
video { | |||
video, audio { | |||
margin: 0 auto; | |||
width: 100%; | |||
} | |||
.wrap { | |||
width: 40%; | |||
height: 40%; | |||
margin: 20px auto; | |||
} | |||
video { | |||
width: 100%; | |||
} | |||
video::-webkit-media-controls-enclosure { | |||
padding: 0px; | |||
height: 50px; | |||
} | |||
video::-webkit-media-controls-panel { | |||
opacity: 1 !important; | |||
display: -webkit-flex !important; | |||
margin-top: 50px; | |||
height: 50px; | |||
background-color: @dark-blue; | |||
border-radius: 0 0 10px 10px; | |||
} | |||
video::-webkit-media-controls-timeline { | |||
height: 12px; | |||
padding: 0px; | |||
border: 0px; | |||
} | |||
video::-webkit-media-controls-volume-slider, video::-webkit-media-controls-timeline { | |||
height: 12px; | |||
border-radius: 5px; | |||
min-width: 15px; | |||
} | |||
video::-webkit-media-controls-volume-slider::-webkit-media-slider-container, video::-webkit-media-controls-timeline::-webkit-media-slider-container { | |||
border: 0px; | |||
border-radius: 5px; | |||
background-color: @blue; | |||
cursor: pointer; | |||
} | |||
::-webkit-media-slider-thumb { | |||
-webkit-appearance: none; | |||
background: red; | |||
} | |||
video::-webkit-media-controls-play-button { | |||
cursor: pointer; | |||
} | |||
video::-webkit-media-controls-play-button:hover { | |||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; | |||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); | |||
opacity: 0.7; | |||
} | |||
video::-webkit-media-controls-fullscreen-button { | |||
-webkit-appearance: none; | |||
background-color: transparent; | |||
cursor: pointer; | |||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAABACAYAAADF2C3zAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2N0Q1MjA3MDc5NjYxMUUyQjQzRjk5Mjc1MTU5Qjk0NSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2N0Q1MjA3MTc5NjYxMUUyQjQzRjk5Mjc1MTU5Qjk0NSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkQyQkE2QUZGNzkzQjExRTJCNDNGOTkyNzUxNTlCOTQ1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkQyQkE2QjAwNzkzQjExRTJCNDNGOTkyNzUxNTlCOTQ1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+1z7uaAAAAVhJREFUeNrsljFuAjEQRb3ACZByii2pECmgySFIGoiUGsEKiaQAimwTToCggSYSNUoJHSfgFJwhMt9oHBlj8Ga2SAqP9KQV7PPY4y1+9PDYEZ4agaHrj4Lwl5LHXFkvsOXKatt1jjykzrq2WeW+Jb6Bhp5BySOvQQLuaKEPYwYnOQLSkpTwBfbUqQam9hDVtieOyaoOGxDTAtNrV9UFqTEc/UGUQeXWmfSZB6BqXMc3aIFlFllY4hP49N2h66p2YJXly3HJ92ABihxZVRPM6BqvViSlFNwqiBwV5CAHOchBDnKQ/5/si4/iOUn5YX0+ec0X1mkBXljH1nlhncTfh3WIF2EdR/gJ677OKqwfdOqHmJ4Nsd17PwU5E/yWgJieY/Biv6MoUVjvOe61j+cGuuwpsLvDOl5KjeFkDusRtiSNKZ6FdXTlhXWIfxTWcf58YR0L3AzrRwEGAJoOgCMfh6hiAAAAAElFTkSuQmCC); | |||
background-size: 16px 64px; | |||
background-position: center 8px; | |||
background-repeat: no-repeat; | |||
} | |||
video::-webkit-media-controls-mute-button { | |||
-webkit-appearance: none; | |||
background-color: transparent; | |||
cursor: pointer; | |||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAABACAYAAAATffeWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2N0Q1MjA3NDc5NjYxMUUyQjQzRjk5Mjc1MTU5Qjk0NSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2N0Q1MjA3NTc5NjYxMUUyQjQzRjk5Mjc1MTU5Qjk0NSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjY3RDUyMDcyNzk2NjExRTJCNDNGOTkyNzUxNTlCOTQ1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjY3RDUyMDczNzk2NjExRTJCNDNGOTkyNzUxNTlCOTQ1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Gp0GRAAAATdJREFUeNpidIsuYMABwoF4BhCvB+IkXIqYcIj7APEiIBYA4jg0OREgLsJnQAgQrwJiNiifGU3eFIi7gDgPxGEBYnYg1gBiDqizQX5ixOEyCyDeC8SNQNwJxJtABuwHYksGwoAR6q3tQFwKxGlAnMtEpGYQ+A+1NROI+aDedGdiIA2sAWJWaDhcBGIVUg1ABqz4ohEXAMXQbyA+DcRaQHwHZMBxIjWDArEcmrg+AXEYEO8ExYIjUjRGQuOXEUcgghLVOahBoAQ1GWTAT2iAgMBJID4BxPOhBqIDkJwnENcDcQkQP8AWBiuAOBiIf0H5f9HkT0NdMAFfIG4D4gggfgtNPMjgDRD3wgPm////DJSAUQNGDRg1YNSAUQNGDRg1YNSA4WhAUnHraI9ltMcy2mMZDD0WgAADADYlybDQKXdAAAAAAElFTkSuQmCC); | |||
background-size: 16px 64px; | |||
background-position: center 8px; | |||
background-repeat: no-repeat; | |||
} | |||
video::-webkit-media-controls-fullscreen-button:hover { | |||
-webkit-appearance: none; | |||
background-position: center -42px; | |||
} | |||
video::-webkit-media-controls-mute-button:hover { | |||
-webkit-appearance: none; | |||
background-position: center -43px; | |||
} | |||
video::-webkit-media-controls-current-time-display, video::-webkit-media-controls-time-remaining-display { | |||
font-size: 13px; | |||
font-weight: normal; | |||
} |
@@ -0,0 +1,147 @@ | |||
/* | |||
Player Skin Designer for Video.js | |||
http://videojs.com | |||
To customize the player skin edit | |||
the CSS below. Click "details" | |||
below to add comments or questions. | |||
This file uses some SCSS. Learn more | |||
at http://sass-lang.com/guide) | |||
This designer can be linked to at: | |||
https://codepen.io/heff/pen/EarCt/left/?editors=010 | |||
*/ | |||
// The following are SCSS variables to automate some of the values. | |||
// But don't feel limited by them. Change/replace whatever you want. | |||
// The color of icons, text, and the big play button border. | |||
// Try changing to #0f0 | |||
@primary-foreground-color: #fff; // #fff default | |||
// The default color of control backgrounds is mostly black but with a little | |||
// bit of blue so it can still be seen on all-black video frames, which are common. | |||
// Try changing to #900 | |||
@primary-background-color: @blue; // #2B333F default | |||
@red-primary-background-color: red(@primary-background-color); | |||
@green-primary-background-color: green(@primary-background-color); | |||
@blue-primary-background-color: blue(@primary-background-color); | |||
// Try changing to true | |||
@center-big-play-button: true; // true default | |||
/* We're using SCSS vars here because the values are used in multiple places. | |||
Now that font size is set, the following em values will be a multiple of the | |||
new font size. If the font-size is 3em (30px), then setting any of | |||
the following values to 3em would equal 30px. 3 * font-size. */ | |||
@big-play-width: 3em; | |||
/* 1.5em = 45px default */ | |||
@big-play-height: 1.5em; | |||
.video-js { | |||
/* The base font size controls the size of everything, not just text. | |||
All dimensions use em-based sizes so that the scale along with the font size. | |||
Try increasing it to 15px and see what happens. */ | |||
font-size: 10px; | |||
width: 100%; | |||
/* The main font color changes the ICON COLORS as well as the text */ | |||
color: @primary-foreground-color; | |||
} | |||
/* The "Big Play Button" is the play button that shows before the video plays. | |||
To center it set the align values to center and middle. The typical location | |||
of the button is the center, but there is trend towards moving it to a corner | |||
where it gets out of the way of valuable content in the poster image.*/ | |||
.vjs-default-skin .vjs-big-play-button { | |||
/* The font size is what makes the big play button...big. | |||
All width/height values use ems, which are a multiple of the font size. | |||
If the .video-js font-size is 10px, then 3em equals 30px.*/ | |||
font-size: 3em; | |||
line-height: @big-play-height; | |||
height: @big-play-height; | |||
width: @big-play-width; | |||
/* 0.06666em = 2px default */ | |||
border: 0.06666em solid @primary-foreground-color; | |||
/* 0.3em = 9px default */ | |||
border-radius: 0.3em; | |||
} | |||
.vjs-default-skin .vjs-big-play-button when (@center-big-play-button = true) { | |||
/* Align center */ | |||
left: 50%; | |||
top: 50%; | |||
margin-left: -(@big-play-width / 2); | |||
margin-top: -(@big-play-height / 2); | |||
} | |||
.vjs-default-skin .vjs-big-play-button when not (@center-big-play-button = true) { | |||
/* Align top left. 0.5em = 15px default */ | |||
left: 0.5em; | |||
top: 0.5em; | |||
} | |||
/* The default color of control backgrounds is mostly black but with a little | |||
bit of blue so it can still be seen on all-black video frames, which are common. */ | |||
.video-js .vjs-control-bar, | |||
.video-js .vjs-big-play-button, | |||
.video-js .vjs-menu-button .vjs-menu-content { | |||
/* IE8 - has no alpha support */ | |||
background-color: @primary-background-color; | |||
/* Opacity: 1.0 = 100%, 0.0 = 0% */ | |||
background-color: rgba(@red-primary-background-color, @green-primary-background-color, @blue-primary-background-color, 0.7); | |||
} | |||
// Make a slightly lighter version of the main background | |||
// for the slider background. | |||
@slider-bg-color: lighten(rgb(@red-primary-background-color, @green-primary-background-color, @blue-primary-background-color), 33%); | |||
@red-slider-bg-color: red(@slider-bg-color); | |||
@green-slider-bg-color: green(@slider-bg-color); | |||
@blue-slider-bg-color: blue(@slider-bg-color); | |||
/* Slider - used for Volume bar and Progress bar */ | |||
.video-js .vjs-slider { | |||
background-color: @slider-bg-color; | |||
background-color: rgba(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color, 0.5); | |||
} | |||
/* The slider bar color is used for the progress bar and the volume bar | |||
(the first two can be removed after a fix that's coming) */ | |||
.video-js .vjs-volume-level, | |||
.video-js .vjs-play-progress, | |||
.video-js .vjs-slider-bar { | |||
background: @primary-foreground-color; | |||
} | |||
/* The main progress bar also has a bar that shows how much has been loaded. */ | |||
.video-js .vjs-load-progress { | |||
/* For IE8 we'll lighten the color */ | |||
background: lighten(rgb(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color), 25%); | |||
/* Otherwise we'll rely on stacked opacities */ | |||
background: rgba(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color, 0.5); | |||
} | |||
/* The load progress bar also has internal divs that represent | |||
smaller disconnected loaded time ranges */ | |||
.video-js .vjs-load-progress div { | |||
/* For IE8 we'll lighten the color */ | |||
background: lighten(rgb(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color), 50%); | |||
/* Otherwise we'll rely on stacked opacities */ | |||
background: rgba(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color, 0.75); | |||
} | |||
:not(.vjs-has-started) .vjs-control-bar { | |||
display: flex; | |||
} | |||
.vjs-audio .vjs-big-play-button { | |||
display: none; | |||
} | |||
.vjs-audio.audio-player-dimensions { | |||
height: 30px; | |||
} | |||
@@ -7,8 +7,9 @@ | |||
@import "includes/global"; | |||
@import "includes/home"; | |||
@import "includes/pages"; | |||
@import "includes/ckin"; | |||
@import "includes/reviews"; | |||
@import "../bower_components/videojs/dist/video-js.min.css"; | |||
@import "includes/video-js"; | |||
@import "includes/transfersh-icons"; | |||
@import "includes/preview"; | |||