ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Styling minor tweaks

Browse Source
This commit is contained in:
Sam Potts 2016-07-10 20:45:54 +10:00
parent 7f7ecf852e
commit bf9de231d8
9 changed files with 146 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/dist/demo.css vendored
View File

File diff suppressed because one or more lines are too long

278
demo/src/js/main.js
View File

@ -8,78 +8,78 @@
// General functions // General functions
;(function() { ;(function() {
document.body.addEventListener('ready', function(event) { console.log(event); }); document.body.addEventListener('ready', function(event) { console.log(event); });
// Setup the player // Setup the player
var instances = plyr.setup({ var instances = plyr.setup({
debug: true, debug: true,
title: 'Video demo', title: 'Video demo',
iconUrl: '../dist/plyr.svg', iconUrl: '../dist/plyr.svg',
tooltips: { tooltips: {
controls: true controls: true
}, },
captions: { captions: {
defaultActive: true defaultActive: true
} }
}); });
plyr.loadSprite('dist/demo.svg'); plyr.loadSprite('dist/demo.svg');
// Plyr returns an array regardless // Plyr returns an array regardless
var player = instances[0].plyr; var player = instances[0].plyr;
// Setup type toggle // Setup type toggle
var buttons = document.querySelectorAll('[data-source]'), var buttons = document.querySelectorAll('[data-source]'),
types = { types = {
video: 'video', video: 'video',
audio: 'audio', audio: 'audio',
youtube: 'youtube', youtube: 'youtube',
vimeo: 'vimeo' vimeo: 'vimeo'
}, },
currentType = window.location.hash.replace('#', ''), currentType = window.location.hash.replace('#', ''),
historySupport = (window.history && window.history.pushState); historySupport = (window.history && window.history.pushState);
// Bind to each button // Bind to each button
for (var i = buttons.length - 1; i >= 0; i--) { for (var i = buttons.length - 1; i >= 0; i--) {
buttons[i].addEventListener('click', function() { buttons[i].addEventListener('click', function() {
var type = this.getAttribute('data-source'); var type = this.getAttribute('data-source');
newSource(type); newSource(type);
if (historySupport) { if (historySupport) {
history.pushState({ 'type': type }, '', '#' + type); history.pushState({ 'type': type }, '', '#' + type);
} }
}); });
} }
// List for backwards/forwards // List for backwards/forwards
window.addEventListener('popstate', function(event) { window.addEventListener('popstate', function(event) {
if(event.state && 'type' in event.state) { if(event.state && 'type' in event.state) {
newSource(event.state.type); newSource(event.state.type);
} }
}); });
// On load // On load
if(historySupport) { if(historySupport) {
var video = !currentType.length; var video = !currentType.length;
// If there's no current type set, assume video // If there's no current type set, assume video
if(video) { if(video) {
currentType = types.video; currentType = types.video;
} }
// Replace current history state // Replace current history state
if(currentType in types) { if(currentType in types) {
history.replaceState({ 'type': currentType }, '', (video ? '' : '#' + currentType)); history.replaceState({ 'type': currentType }, '', (video ? '' : '#' + currentType));
} }
// If it's not video, load the source // If it's not video, load the source
if(currentType !== types.video) { if(currentType !== types.video) {
newSource(currentType, true); newSource(currentType, true);
} }
} }
// Toggle class on an element // Toggle class on an element
function toggleClass(element, className, state) { function toggleClass(element, className, state) {
if (element) { if (element) {
if (element.classList) { if (element.classList) {
element.classList[state ? 'add' : 'remove'](className); element.classList[state ? 'add' : 'remove'](className);
@ -91,95 +91,95 @@
} }
} }
// Set a new source // Set a new source
function newSource(type, init) { function newSource(type, init) {
// Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video // Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video
if(!(type in types) || (!init && type == currentType) || (!currentType.length && type == types.video)) { if(!(type in types) || (!init && type == currentType) || (!currentType.length && type == types.video)) {
return; return;
} }
switch(type) { switch(type) {
case types.video: case types.video:
player.source({ player.source({
type: 'video', type: 'video',
title: 'View From A Blue Moon', title: 'View From A Blue Moon',
sources: [{ sources: [{
src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4', src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4',
type: 'video/mp4' type: 'video/mp4'
}, },
{ {
src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm', src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm',
type: 'video/webm' type: 'video/webm'
}], }],
poster: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg', poster: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg',
tracks: [{ tracks: [{
kind: 'captions', kind: 'captions',
label: 'English', label: 'English',
srclang:'en', srclang:'en',
src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt', src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
default: true default: true
}] }]
}); });
break; break;
case types.audio: case types.audio:
player.source({ player.source({
type: 'audio', type: 'audio',
title: 'Kishi Bashi – “It All Began With A Burst”', title: 'Kishi Bashi – “It All Began With A Burst”',
sources: [{ sources: [{
src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3', src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3',
type: 'audio/mp3' type: 'audio/mp3'
}, },
{ {
src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg', src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',
type: 'audio/ogg' type: 'audio/ogg'
}] }]
}); });
break; break;
case types.youtube: case types.youtube:
player.source({ player.source({
type: 'video', type: 'video',
title: 'View From A Blue Moon', title: 'View From A Blue Moon',
sources: [{ sources: [{
src: 'bTqVqk7FSmY', src: 'bTqVqk7FSmY',
type: 'youtube' type: 'youtube'
}] }]
}); });
break; break;
case types.vimeo: case types.vimeo:
player.source({ player.source({
type: 'video', type: 'video',
title: 'View From A Blue Moon', title: 'View From A Blue Moon',
sources: [{ sources: [{
src: '143418951', src: '143418951',
type: 'vimeo' type: 'vimeo'
}] }]
}); });
break; break;
} }
// Set the current type for next time // Set the current type for next time
currentType = type; currentType = type;
// Remove active classes // Remove active classes
for (var x = buttons.length - 1; x >= 0; x--) { for (var x = buttons.length - 1; x >= 0; x--) {
toggleClass(buttons[x].parentElement, 'active', false); toggleClass(buttons[x].parentElement, 'active', false);
} }
// Set active on parent // Set active on parent
toggleClass(document.querySelector('[data-source="'+ type +'"]').parentElement, 'active', true); toggleClass(document.querySelector('[data-source="'+ type +'"]').parentElement, 'active', true);
} }
})(); })();
// Google analytics // Google analytics
// For demo site (http://[www.]plyr.io) only // For demo site (http://[www.]plyr.io) only
if(document.domain.indexOf('plyr.io') > -1) { if(document.domain.indexOf('plyr.io') > -1) {
(function(i,s,o,g,r,a,m){i.GoogleAnalyticsObject=r;i[r]=i[r]||function(){ (function(i,s,o,g,r,a,m){i.GoogleAnalyticsObject=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga'); })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-40881672-11', 'auto'); ga('create', 'UA-40881672-11', 'auto');
ga('send', 'pageview'); ga('send', 'pageview');
} }

2
demo/src/less/components/examples.less
View File

@ -21,7 +21,7 @@ video {
.plyr--audio { .plyr--audio {
max-width: @example-width-audio; max-width: @example-width-audio;
} }
.plyr--video::after { .plyr__video-wrapper::after {
content: ""; content: "";
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;

2
dist/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

3
src/less/plyr.less
View File

@ -353,7 +353,6 @@
border-radius: inherit; border-radius: inherit;
background: @plyr-audio-controls-bg; background: @plyr-audio-controls-bg;
border: @plyr-audio-controls-border; border: @plyr-audio-controls-border;
box-shadow: @plyr-audio-controls-box-shadow;
color: @plyr-audio-control-color; color: @plyr-audio-control-color;
button { button {
@ -378,7 +377,7 @@
background: @plyr-video-control-bg-hover; background: @plyr-video-control-bg-hover;
border: 4px solid currentColor; border: 4px solid currentColor;
border-radius: 100%; border-radius: 100%;
box-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%); box-shadow: 0 1px 1px fade(#000, 15%);
color: @plyr-video-control-color; color: @plyr-video-control-color;
transition: all .3s ease; transition: all .3s ease;

1
src/less/variables.less
View File

@ -33,7 +33,6 @@
@plyr-video-control-bg-hover: @plyr-color-main; @plyr-video-control-bg-hover: @plyr-color-main;
@plyr-audio-controls-bg: #fff; @plyr-audio-controls-bg: #fff;
@plyr-audio-controls-border: 1px solid #dbe3e8; @plyr-audio-controls-border: 1px solid #dbe3e8;
@plyr-audio-controls-box-shadow: 0 1px 1px fade(#000, 5%);
@plyr-audio-control-color: #565D64; @plyr-audio-control-color: #565D64;
@plyr-audio-control-color-hover: #fff; @plyr-audio-control-color-hover: #fff;
@plyr-audio-control-bg-hover: @plyr-color-main; @plyr-audio-control-bg-hover: @plyr-color-main;

3
src/scss/plyr.scss
View File

@ -353,7 +353,6 @@
border-radius: inherit; border-radius: inherit;
background: $plyr-audio-controls-bg; background: $plyr-audio-controls-bg;
border: $plyr-audio-controls-border; border: $plyr-audio-controls-border;
box-shadow: $plyr-audio-controls-box-shadow;
color: $plyr-audio-control-color; color: $plyr-audio-control-color;
button { button {
@ -378,7 +377,7 @@
background: $plyr-video-control-bg-hover; background: $plyr-video-control-bg-hover;
border: 4px solid currentColor; border: 4px solid currentColor;
border-radius: 100%; border-radius: 100%;
box-shadow: 0 1px 1px transparentize($plyr-video-controls-bg, .85); box-shadow: 0 1px 1px transparentize(#000, .85);
color: $plyr-video-control-color; color: $plyr-video-control-color;
transition: all .3s ease; transition: all .3s ease;

1
src/scss/variables.scss
View File

@ -34,7 +34,6 @@ $plyr-video-control-color-hover: #fff !default;
$plyr-video-control-bg-hover: $plyr-color-main !default; $plyr-video-control-bg-hover: $plyr-color-main !default;
$plyr-audio-controls-bg: #fff !default; $plyr-audio-controls-bg: #fff !default;
$plyr-audio-controls-border: 1px solid #dbe3e8 !default; $plyr-audio-controls-border: 1px solid #dbe3e8 !default;
$plyr-audio-controls-box-shadow: 0 1px 1px transparentize(#000, .95) !default;
$plyr-audio-control-color: #565D64 !default; $plyr-audio-control-color: #565D64 !default;
$plyr-audio-control-color-hover: #fff !default; $plyr-audio-control-color-hover: #fff !default;
$plyr-audio-control-bg-hover: $plyr-color-main; $plyr-audio-control-bg-hover: $plyr-color-main;