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

Setup improvements, player -> plyr, docs (WIP)

Browse Source
This commit is contained in:
Sam Potts
2015-10-05 16:33:26 +11:00
parent 262c9f9e13
commit b164a2f3fb
12 changed files with 579 additions and 495 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/dist/docs.css vendored
View File

File diff suppressed because one or more lines are too long

2
docs/dist/docs.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/dist/templates.js vendored
View File

@ -1,2 +0,0 @@
var templates = {};
templates['controls'] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"player-controls\">");t.b("\n" + i);t.b(" <div class=\"player-progress\">");t.b("\n" + i);t.b(" <label for=\"seek{id}\" class=\"sr-only\">Seek</label>");t.b("\n" + i);t.b(" <input id=\"seek{id}\" class=\"player-progress-seek\" type=\"range\" min=\"0\" max=\"100\" step=\"0.5\" value=\"0\" data-player=\"seek\">");t.b("\n" + i);t.b(" <progress class=\"player-progress-played\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b(" <span>0</span>% played");t.b("\n" + i);t.b(" </progress>");t.b("\n" + i);t.b(" <progress class=\"player-progress-buffer\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b(" <span>0</span>% buffered");t.b("\n" + i);t.b(" </progress>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b(" <span class=\"player-controls-left\">");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"restart\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-restart\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Restart</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"rewind\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-rewind\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Rewind {seektime} secs</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"play\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-play\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Play</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"pause\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-pause\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Pause</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"fast-forward\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-fast-forward\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Forward {seektime} secs</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <span class=\"player-time\">");t.b("\n" + i);t.b(" <span class=\"sr-only\">Current time</span>");t.b("\n" + i);t.b(" <span class=\"player-current-time\">00:00</span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" <span class=\"player-time\">");t.b("\n" + i);t.b(" <span class=\"sr-only\">Duration</span>");t.b("\n" + i);t.b(" <span class=\"player-duration\">00:00</span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" <span class=\"player-controls-right\">");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"mute\">");t.b("\n" + i);t.b(" <svg class=\"icon-muted\"><use xlink:href=\"#icon-muted\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-volume\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle Mute</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <label for=\"volume{id}\" class=\"sr-only\">Volume</label>");t.b("\n" + i);t.b(" <input id=\"volume{id}\" class=\"player-volume\" type=\"range\" min=\"0\" max=\"10\" step=\"0.5\" value=\"0\" data-player=\"volume\">");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"captions\">");t.b("\n" + i);t.b(" <svg class=\"icon-captions-on\"><use xlink:href=\"#icon-captions-on\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-captions-off\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle Captions</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"fullscreen\">");t.b("\n" + i);t.b(" <svg class=\"icon-exit-fullscreen\"><use xlink:href=\"#icon-exit-fullscreen\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-enter-fullscreen\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle Fullscreen</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: { }});

10
docs/src/js/docs.js
View File

@ -37,7 +37,7 @@ shr.setup({
function newSource() {
var trigger = this,
type = trigger.getAttribute('data-source'),
player = document.querySelector('.player').plyr;
player = document.querySelector('.plyr').plyr;
switch(type) {
case 'video':
@ -81,16 +81,16 @@ shr.setup({
case 'youtube':
player.source({
type: 'youtube',
title: 'Introducing Apple Pencil',
sources: 'iicnVez5U7M'
title: 'Enovato interview of Dan Cederholm for Made By',
sources: 'Au87oAJ2jeE'
});
break;
case 'vimeo':
player.source({
type: 'vimeo',
title: 'The Beaten Track',
sources: '125220818'
title: 'Yosemite HD II',
sources: '87701971'
});
break;
}

39
docs/src/less/components/examples.less
View File

@ -3,7 +3,7 @@
// ==========================================================================
// Example players
.player {
.plyr {
margin: 0 auto @padding-base;
max-width: @example-width-video;
@ -11,38 +11,38 @@
border-radius: 0 0 @border-radius-base @border-radius-base;
}
}
.player-audio {
.plyr-audio {
max-width: @example-width-audio;
.player-controls {
.plyr-controls {
border-radius: @border-radius-base;
}
.player-progress {
.plyr-progress {
border-radius: @border-radius-base @border-radius-base 0 0;
overflow: hidden;
}
}
video,
.player-video-embed {
.plyr-video-embed {
border-radius: @border-radius-base;
}
.player-video-embed {
.plyr-video-embed {
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
// Style full supported player
.player-video,
.player-youtube,
.player-vimeo {
.plyr-video,
.plyr-youtube,
.plyr-vimeo {
video,
.player-video-embed {
.plyr-video-embed {
border-radius: @border-radius-base @border-radius-base 0 0;
}
&.player-fullscreen,
&.plyr-fullscreen,
&.fullscreen-active {
max-width: none;
.player-controls,
.plyr-controls,
video,
iframe {
border-radius: 0;
@ -51,4 +51,19 @@ video,
-webkit-mask-image: none;
}
}
}
.cite {
display: none;
.icon {
margin-right: (@padding-base / 4);
}
}
.plyr-video ~ ul .cite-video,
.plyr-audio ~ ul .cite-audio,
.plyr-youtube ~ ul .cite-youtube,
.plyr-vimeo ~ ul .cite-vimeo {
display: block;
}

18
docs/src/less/components/type.less
View File

@ -26,17 +26,24 @@ small {
padding: 0 (@padding-base / 2);
.font-size(14);
}
ul
li {
list-style: none;
margin: 0;
padding: 0;
}
// Links
a {
text-decoration: none;
color: @link-color;
border-bottom: 1px solid currentColor;
transition: background .3s ease, color .3s ease;
border-bottom: 1px dotted currentColor;
transition: background .3s ease, color .3s ease, border .3s ease;
&:hover,
&:focus {
color: @gray-dark;
border-bottom-color: rgba(0,0,0,0);
}
&:focus {
.tab-focus();
@ -44,4 +51,11 @@ a {
&.logo {
border: 0;
}
}
.color-vimeo {
color: @color-vimeo;
}
.color-youtube {
color: @color-youtube;
}