Andrea Spacca
GitHub
184
Gruntfile.js
184
Gruntfile.js
@@ -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'
|
||||
]);
|
||||
};
|
||||
|
||||
6797
bindata_gen.go
6797
bindata_gen.go
File diff suppressed because it is too large
Load Diff
@@ -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);
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -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;
|
||||
}
|
||||
|
||||
147
src/styles/includes/video-js.less
Normal file
147
src/styles/includes/video-js.less
Normal file
@@ -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;
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -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";
|
||||
|
||||
|
||||
Reference in New Issue
Block a user