Work on v1.5

See changelog.md

docs/src/js/docs.js

@@ -5,7 +5,7 @@
 /*global plyr, shr*/
 
 // Setup the player
-plyr.setup({
+plyr.setup('.js-media-player', {
 	debug: 		true,
 	title: 		'Video demo',
 	tooltips: 	true,
@@ -20,7 +20,7 @@ plyr.setup({
 // Setup shr
 shr.setup({
 	count: {
-		classname: 'btn-count'
+		classname: 'btn__count'
 	}
 });
 
@@ -37,22 +37,22 @@ shr.setup({
 	function newSource() {
 		var trigger = this,
 		type        = trigger.getAttribute('data-source'),
-		player      = document.querySelector('.plyr').plyr;
+		player      = document.querySelector('.js-media-player').plyr;
 
 		switch(type) {
 			case 'video':
 				player.source({
 					type:       'video',
-					title: 		'Bug Buck Bunny',
+					title: 		'View From A Blue Moon',
 					sources: [{
-						src:    'https://cdn.selz.com/plyr/1.0/movie.mp4',
+						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.0/movie.webm',
+						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.0/poster.jpg',
+					poster:     'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg',
 					tracks:     [{
 						kind:   'captions',
 						label:  'English',
@@ -66,13 +66,13 @@ shr.setup({
 			case 'audio':
 				player.source({
 					type:       'audio',
-					title: 		'96 by Logistics',
+					title: 		'Kishi Bashi – “It All Began With A Burst”',
 					sources: [{
-						src:    'https://cdn.selz.com/plyr/1.0/logistics-96-sample.mp3',
+						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.0/logistics-96-sample.ogg',
+						src:    'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',
 						type:   'audio/ogg'
 					}]
 				});
@@ -81,25 +81,25 @@ shr.setup({
 			case 'youtube':
 				player.source({
 					type:       'youtube',
-					title: 		'Enovato interview of Dan Cederholm for Made By',
-					sources:    'Au87oAJ2jeE'
+					title: 		'View From A Blue Moon',
+					sources:    'bTqVqk7FSmY'
 				});
 				break;
 
 			case 'vimeo':
 				player.source({
 					type:       'vimeo',
-					title: 		'View from a blue moon',
+					title: 		'View From A Blue Moon',
 					sources:    '143418951'
 				});
 				break;
 		}
 
 		for (var x = buttons.length - 1; x >= 0; x--) {
-			buttons[x].classList.remove('active');
+			buttons[x].classList.remove('btn--active');
 		}
 
-		event.target.classList.add('active');
+		event.target.classList.add('btn--active');
 	}
 })();
 

docs/src/less/components/buttons.less

@@ -21,7 +21,7 @@ nav {
 }
 
 // Tabs
-.btn-bar {
+.btn__bar {
 	position: relative;
 	margin: 0 auto @padding-base;
 	max-width: @example-width-video;
@@ -60,10 +60,8 @@ nav {
 		display: block;
 		border-radius: 0;
 	}
-	.active {
-		&:extend(.btn-primary);
-	}
-	.btn.active {
+	.btn--active {
+		&:extend(.btn--primary);
 		box-shadow: inset 0 1px 1px rgba(0,0,0, .2);
 		position: relative;
 		z-index: 1;
@@ -80,7 +78,7 @@ nav {
 
 // Shared
 .btn,
-.btn-count {
+.btn__count {
 	display: inline-block;
 	vertical-align: middle;
 	border-radius: @border-radius-base;
@@ -91,12 +89,12 @@ nav {
 // Buttons
 .btn {
 	padding: (@padding-base / 2) @padding-base;
-	background: @body-background;
+	background: linear-gradient(lighten(@body-background, 2%), darken(@body-background, 3%));
 	border: 1px solid @gray-light;
-	box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0, .05);
+	box-shadow: 0 1px 1px rgba(0,0,0, .05);
 	text-shadow: 0 1px 1px #fff;
 	color: @gray;
-	transition: background .3s ease, border .3s ease, color .3s ease;
+	transition: background .1s ease, color .1s ease;
 
 	&:hover,
 	&:focus {
@@ -104,18 +102,18 @@ nav {
 		color: @gray;
 		outline: 0;
 	}
-	&-youtube .icon {
+	&--youtube .icon {
 		color: @color-youtube;
 	}
-	&-vimeo .icon {
+	&--vimeo .icon {
 		color: @color-vimeo;
 	}
-	&-twitter .icon {
+	&--twitter .icon {
 		color: @color-twitter;
 	}
 }
-.btn-primary {
-	background-image: linear-gradient(@link-color, darken(@link-color, 3%));
+.btn--primary {
+	background-image: linear-gradient(@link-color, darken(@link-color, 5%));
 	background-color: @link-color;
 	border-color: darken(@link-color, 10%);
 	box-shadow: 0 1px 1px rgba(0,0,0, .15);
@@ -128,13 +126,13 @@ nav {
 		border-color: darken(@link-color, 20%);
 	}
 }
-.btn-small {
+.btn--small {
 	padding-top: ceil(@padding-base / 3);
 	padding-bottom: ceil(@padding-base / 3);
 }
 
 // Count bubble
-.btn-count {
+.btn__count {
 	position: relative;
 	margin-left: (@padding-base / 2);
 	padding: (@padding-base / 2) (@padding-base * .75);

docs/src/less/components/examples.less

@@ -3,10 +3,10 @@
 // ==========================================================================
 
 video,
-.plyr-video-embed {
+.plyr__video-embed {
     border-radius: @border-radius-base;
 }
-.plyr-video-embed {
+.plyr__video-embed {
     -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
 }
 
@@ -15,15 +15,15 @@ video,
     margin: 0 auto @padding-base;
     max-width: @example-width-video;
 
-    &-controls {
+    &__controls {
         border-radius: 0 0 @border-radius-base @border-radius-base;
     }
     video,
-    .plyr-video-embed {
+    .plyr__video-embed {
         border-radius: @border-radius-base @border-radius-base 0 0;
     }
-    &-fullscreen,
-    &.fullscreen-active {
+    &--fullscreen,
+    &--fullscreen-active {
         max-width: none;
 
         .plyr-controls,
@@ -36,20 +36,20 @@ video,
         }
     }
 }
-.plyr-audio {
+.plyr--audio {
     max-width: @example-width-audio;
 
-    .plyr-controls {
+    .plyr__controls {
         border-radius: @border-radius-base;
     }
-    .plyr-progress {
+    .plyr__progress {
         border-radius: @border-radius-base @border-radius-base 0 0;
         overflow: hidden;
     }
 }
 
 // Style full supported player
-.cite {
+.plyr__cite {
     display: none;
 
     .icon {
@@ -57,9 +57,9 @@ video,
     }
 }
 
-.plyr-video ~ ul .cite-video,
-.plyr-audio ~ ul .cite-audio,
-.plyr-youtube ~ ul .cite-youtube,
-.plyr-vimeo ~ ul .cite-vimeo {
+.plyr--video ~ ul .plyr__cite--video,
+.plyr--audio ~ ul .plyr__cite--audio,
+.plyr--youtube ~ ul .plyr__cite--youtube,
+.plyr--vimeo ~ ul .plyr__cite--vimeo {
     display: block;
-}
+}

docs/src/less/components/panels.less

@@ -1,13 +0,0 @@
-// ==========================================================================
-// Panels
-// ==========================================================================
-
-// Panels
-.panel {
-    display: none;
-
-    &.active {
-        display: block;
-        animation: fade-in .3s ease;
-    }
-}

docs/src/less/components/type.less

@@ -26,7 +26,13 @@ small {
     padding: 0 (@padding-base / 2);
     .font-size(14);
 }
-ul
+sup {
+    vertical-align: 2px;
+    .font-size(9);
+}
+
+// Lists
+ul,
 li {
     list-style: none;
     margin: 0;
@@ -53,9 +59,9 @@ a {
     }
 }
 
-.color-vimeo {
+.color--vimeo {
     color: @color-vimeo;
 }
-.color-youtube {
+.color--youtube {
     color: @color-youtube;
 }

docs/src/less/docs.less

@@ -22,6 +22,5 @@
 @import "components/base.less";
 @import "components/icons.less";
 @import "components/buttons.less";
-@import "components/panels.less";
 @import "components/error.less";
 @import "components/examples.less";