@@ -12,6 +12,8 @@ module.exports = function (grunt) { | |||||
// show elapsed time at the end | // show elapsed time at the end | ||||
require('time-grunt')(grunt); | require('time-grunt')(grunt); | ||||
grunt.loadNpmTasks('grunt-npm-command'); | |||||
// configurable paths | // configurable paths | ||||
var yeomanConfig = { | var yeomanConfig = { | ||||
app: require('./bower.json').appPath || 'src', | app: require('./bower.json').appPath || 'src', | ||||
@@ -37,11 +39,11 @@ module.exports = function (grunt) { | |||||
livereload: '<%= connect.options.livereload %>' | livereload: '<%= connect.options.livereload %>' | ||||
}, | }, | ||||
files: [ | 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'] | tasks: ['includes:server'] | ||||
} | } | ||||
}, | }, | ||||
@@ -56,19 +58,19 @@ module.exports = function (grunt) { | |||||
options: { | options: { | ||||
open: true, | open: true, | ||||
base: [ | base: [ | ||||
'.tmp', | |||||
'<%= yeoman.app %>' | |||||
] | |||||
'.tmp', | |||||
'<%= yeoman.app %>' | |||||
] | |||||
} | } | ||||
}, | }, | ||||
test: { | test: { | ||||
options: { | options: { | ||||
port: 9001, | port: 9001, | ||||
base: [ | base: [ | ||||
'.tmp', | |||||
'test', | |||||
'<%= yeoman.app %>' | |||||
] | |||||
'.tmp', | |||||
'test', | |||||
'<%= yeoman.app %>' | |||||
] | |||||
} | } | ||||
}, | }, | ||||
dist: { | dist: { | ||||
@@ -82,11 +84,11 @@ module.exports = function (grunt) { | |||||
files: [{ | files: [{ | ||||
dot: true, | dot: true, | ||||
src: [ | src: [ | ||||
'.tmp', | |||||
'<%= yeoman.dist %>/*', | |||||
'!<%= yeoman.dist %>/.git*' | |||||
] | |||||
}] | |||||
'.tmp', | |||||
'<%= yeoman.dist %>/*', | |||||
'!<%= yeoman.dist %>/.git*' | |||||
] | |||||
}] | |||||
}, | }, | ||||
server: '.tmp' | server: '.tmp' | ||||
}, | }, | ||||
@@ -96,11 +98,11 @@ module.exports = function (grunt) { | |||||
reporter: require('jshint-stylish') | reporter: require('jshint-stylish') | ||||
}, | }, | ||||
all: [ | 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: { | dist: { | ||||
files: { | files: { | ||||
src: [ | 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', | cwd: '<%= yeoman.app %>/images', | ||||
src: '{,*/}*.{png,jpg,jpeg}', | src: '{,*/}*.{png,jpg,jpeg}', | ||||
dest: '<%= yeoman.dist %>/images' | dest: '<%= yeoman.dist %>/images' | ||||
}] | |||||
}] | |||||
} | } | ||||
}, | }, | ||||
@@ -189,9 +191,9 @@ module.exports = function (grunt) { | |||||
dist: { | dist: { | ||||
files: { | files: { | ||||
'<%= yeoman.dist %>/styles/main.css': [ | '<%= 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 %>', | cwd: '<%= yeoman.app %>', | ||||
src: '*.html', | src: '*.html', | ||||
dest: '<%= yeoman.dist %>' | 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: { | dist: { | ||||
files: [{ | files: [{ | ||||
expand: true, | expand: true, | ||||
@@ -224,53 +240,55 @@ module.exports = function (grunt) { | |||||
cwd: '<%= yeoman.app %>', | cwd: '<%= yeoman.app %>', | ||||
dest: '<%= yeoman.dist %>', | dest: '<%= yeoman.dist %>', | ||||
src: [ | 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: { | server: { | ||||
files: [{ | 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: { | concurrent: { | ||||
dist: [ | dist: [ | ||||
'less', | |||||
'imagemin', | |||||
'htmlmin' | |||||
] | |||||
'less', | |||||
'imagemin', | |||||
'htmlmin' | |||||
] | |||||
} | } | ||||
}); | }); | ||||
grunt.loadNpmTasks('grunt-npm-command'); | |||||
grunt.registerTask('serve', function (target) { | grunt.registerTask('serve', function (target) { | ||||
if (target === 'dist') { | if (target === 'dist') { | ||||
return grunt.task.run(['build', 'connect:dist:keepalive']); | return grunt.task.run(['build', 'connect:dist:keepalive']); | ||||
} | } | ||||
grunt.task.run([ | 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 () { | grunt.registerTask('server', function () { | ||||
@@ -279,30 +297,30 @@ module.exports = function (grunt) { | |||||
}); | }); | ||||
grunt.registerTask('test', [ | grunt.registerTask('test', [ | ||||
'clean:server', | |||||
'less', | |||||
'copy:server', | |||||
'connect:test', | |||||
]); | |||||
'clean:server', | |||||
'less', | |||||
'copy:server', | |||||
'connect:test', | |||||
]); | |||||
grunt.registerTask('build', [ | 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', [ | grunt.registerTask('default', [ | ||||
'jshint', | |||||
'test', | |||||
'build' | |||||
]); | |||||
'jshint', | |||||
'test', | |||||
'build' | |||||
]); | |||||
}; | }; |
@@ -13,6 +13,7 @@ | |||||
"tests" | "tests" | ||||
], | ], | ||||
"dependencies": { | "dependencies": { | ||||
"videojs": "~7.4.2", | |||||
"bootstrap": "~3.0.0", | "bootstrap": "~3.0.0", | ||||
"modernizr": "~2.6.2", | "modernizr": "~2.6.2", | ||||
"uri.js": "~1.14.1", | "uri.js": "~1.14.1", | ||||
@@ -20,6 +20,7 @@ | |||||
"grunt-contrib-watch": "~0.6.1", | "grunt-contrib-watch": "~0.6.1", | ||||
"grunt-include-replace": "^2.0.0", | "grunt-include-replace": "^2.0.0", | ||||
"grunt-includes": "^0.4.5", | "grunt-includes": "^0.4.5", | ||||
"grunt-npm-command": "^0.1.2", | |||||
"grunt-rev": "~0.1.0", | "grunt-rev": "~0.1.0", | ||||
"grunt-svgmin": "1.0.0", | "grunt-svgmin": "1.0.0", | ||||
"grunt-usemin": "~2.4.0", | "grunt-usemin": "~2.4.0", | ||||
@@ -25,7 +25,13 @@ include "includes/head.html" | |||||
</div> | </div> | ||||
<div id="terminal" class="terminal preview-image"> | <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> | </div> | ||||
</div> | </div> | ||||
@@ -37,8 +43,8 @@ include "includes/head.html" | |||||
include "includes/footer.html" | include "includes/footer.html" | ||||
include "includes/js.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 --> | <!-- endbuild --> | ||||
</body> | </body> | ||||
@@ -24,7 +24,13 @@ include "includes/head.html" | |||||
</div> | </div> | ||||
<div id="terminal" class="terminal preview-image"> | <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> | </div> | ||||
</div> | </div> | ||||
@@ -36,8 +42,8 @@ include "includes/head.html" | |||||
include "includes/footer.html" | include "includes/footer.html" | ||||
include "includes/js.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 --> | <!-- endbuild --> | ||||
</body> | </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; | padding-bottom: 30px; | ||||
} | } | ||||
video { | |||||
video, audio { | |||||
margin: 0 auto; | margin: 0 auto; | ||||
width: 100%; | width: 100%; | ||||
} | } | ||||
.wrap { | .wrap { | ||||
width: 40%; | width: 40%; | ||||
height: 40%; | height: 40%; | ||||
margin: 20px auto; | 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-media-slider-thumb { | ||||
-webkit-appearance: none; | -webkit-appearance: none; | ||||
background: red; | 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/global"; | ||||
@import "includes/home"; | @import "includes/home"; | ||||
@import "includes/pages"; | @import "includes/pages"; | ||||
@import "includes/ckin"; | |||||
@import "includes/reviews"; | @import "includes/reviews"; | ||||
@import "../bower_components/videojs/dist/video-js.min.css"; | |||||
@import "includes/video-js"; | |||||
@import "includes/transfersh-icons"; | @import "includes/transfersh-icons"; | ||||
@import "includes/preview"; | @import "includes/preview"; | ||||