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

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

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

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

@ -21,7 +21,7 @@ video {
.plyr--audio {
max-width: @example-width-audio;
}
.plyr--video::after {
.plyr__video-wrapper::after {
content: "";
pointer-events: none;
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;
background: @plyr-audio-controls-bg;
border: @plyr-audio-controls-border;
box-shadow: @plyr-audio-controls-box-shadow;
color: @plyr-audio-control-color;
button {
@ -378,7 +377,7 @@
background: @plyr-video-control-bg-hover;
border: 4px solid currentColor;
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;
transition: all .3s ease;

1
src/less/variables.less
View File

@ -33,7 +33,6 @@
@plyr-video-control-bg-hover: @plyr-color-main;
@plyr-audio-controls-bg: #fff;
@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-hover: #fff;
@plyr-audio-control-bg-hover: @plyr-color-main;

3
src/scss/plyr.scss
View File

@ -353,7 +353,6 @@
border-radius: inherit;
background: $plyr-audio-controls-bg;
border: $plyr-audio-controls-border;
box-shadow: $plyr-audio-controls-box-shadow;
color: $plyr-audio-control-color;
button {
@ -378,7 +377,7 @@
background: $plyr-video-control-bg-hover;
border: 4px solid currentColor;
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;
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-audio-controls-bg: #fff !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-hover: #fff !default;
$plyr-audio-control-bg-hover: $plyr-color-main;