diff options
Diffstat (limited to 'docs/src')
| -rw-r--r-- | docs/src/js/docs.js | 223 | ||||
| -rw-r--r-- | docs/src/less/components/base.less | 45 | ||||
| -rw-r--r-- | docs/src/less/components/buttons.less | 144 | ||||
| -rw-r--r-- | docs/src/less/components/error.less | 19 | ||||
| -rw-r--r-- | docs/src/less/components/examples.less | 39 | ||||
| -rw-r--r-- | docs/src/less/components/panels.less | 13 | ||||
| -rw-r--r-- | docs/src/less/components/type.less | 47 | ||||
| -rw-r--r-- | docs/src/less/docs.less | 240 | ||||
| -rw-r--r-- | docs/src/less/lib/animation.less | 9 | ||||
| -rw-r--r-- | docs/src/less/lib/fontface.less | 10 | ||||
| -rw-r--r-- | docs/src/less/variables.less | 30 |
11 files changed, 497 insertions, 322 deletions
diff --git a/docs/src/js/docs.js b/docs/src/js/docs.js index 072a9236..df205260 100644 --- a/docs/src/js/docs.js +++ b/docs/src/js/docs.js @@ -14,6 +14,10 @@ plyr.setup({ defaultActive: true }, onSetup: function() { + if(!("media" in this)) { + return; + } + var player = this, type = player.media.tagName.toLowerCase(), toggle = document.querySelector("[data-toggle='fullscreen']"); @@ -26,116 +30,145 @@ plyr.setup({ } }); -// Popup -function popup(event) { - // Prevent the link opening - if(event.target.nodeName.toLowerCase() == "a") { - if(event.preventDefault) { - event.preventDefault(); +// General functions +(function() { + // Popup + function popup(event) { + // Prevent the link opening + if(event.target.nodeName.toLowerCase() == "a") { + if(event.preventDefault) { + event.preventDefault(); + } + else { + event.returnValue = false; + } + } + + var link = event.target, + url = link.href, + width = link.getAttribute("data-window-width") || 600, + height = link.getAttribute("data-window-height") || 600, + name = link.getAttribute("data-window-name") || "popup"; + + // If window exists, just focus it + if(window["window-"+name] && !window["window-"+name].closed) { + window["window-"+name].focus(); } else { - event.returnValue = false; + // Get position + var left = window.screenLeft !== undefined ? window.screenLeft : screen.left; + var top = window.screenTop !== undefined ? window.screenTop : screen.top; + + // Open in the centre of the screen + var x = (screen.width / 2) - (width / 2) + left, + y = (screen.height / 2) - (height / 2) + top; + + // Open that window + window["window-"+name] = window.open(url, name, "top=" + y +",left="+ x +",width=" + width + ",height=" + height); + + // Focus new window + window["window-"+name].focus(); } } - var link = event.target, - url = link.href, - width = link.getAttribute("data-window-width") || 600, - height = link.getAttribute("data-window-height") || 600, - name = link.getAttribute("data-window-name") || "popup"; + // Trigger popups + document.querySelector(".js-popup").addEventListener("click", popup); + + // Get JSONP + function getJSONP(url, callback) { + var name = "jsonp_callback_" + Math.round(100000 * Math.random()); + + // Cleanup to prevent memory leaks and hit original callback + window[name] = function(data) { + delete window[name]; + document.body.removeChild(script); + callback(data); + }; + + // Create a faux script + var script = document.createElement("script"); + script.setAttribute("src", url + (url.indexOf("?") >= 0 ? "&" : "?") + "callback=" + name); + + // Inject to the body + document.body.appendChild(script); + } + + // Get star count + var storageSupported = ("sessionStorage" in window), + selectors = { + github: ".js-stargazers-count", + twitter: ".js-tweet-count" + }; - // If window exists, just focus it - if(window["window-"+name] && !window["window-"+name].closed) { - window["window-"+name].focus(); + // Display the count next to the button + function displayCount(selector, count) { + document.querySelector(selector).innerHTML = count; + } + + // Add star + function formatGitHubCount(count) { + return "★ " + count; + } + + // Check if it's in session storage first + if(storageSupported && "github_stargazers" in window.sessionStorage) { + displayCount(selectors.github, formatGitHubCount(window.sessionStorage.github_stargazers)); } else { - // Get position - var left = window.screenLeft !== undefined ? window.screenLeft : screen.left; - var top = window.screenTop !== undefined ? window.screenTop : screen.top; + getJSONP("https://api.github.com/repos/selz/plyr?access_token=a46ac653210ba6a6be44260c29c333470c3fbbf5", function (json) { + if (json && typeof json.data.stargazers_count !== "undefined") { + // Update UI + displayCount(selectors.github, formatGitHubCount(json.data.stargazers_count)); + + // Store in session storage + window.sessionStorage.github_stargazers = json.data.stargazers_count; + } + }); + } - // Open in the centre of the screen - var x = (screen.width / 2) - (width / 2) + left, - y = (screen.height / 2) - (height / 2) + top; + // Get tweet count + if(storageSupported && "tweets" in window.sessionStorage) { + displayCount(selectors.twitter, window.sessionStorage.tweets); + } + else { + getJSONP("https://cdn.api.twitter.com/1/urls/count.json?url=plyr.io", function (json) { + if (json && typeof json.count !== "undefined") { + // Update UI + displayCount(selectors.twitter, json.count); + + // Store in session storage + window.sessionStorage.tweets = json.count; + } + }); + } - // Open that window - window["window-"+name] = window.open(url, name, "top=" + y +",left="+ x +",width=" + width + ",height=" + height); + // Tabs + var tabs = document.querySelectorAll(".nav-panel a"), + panels = document.querySelectorAll(".panels > .panel"), + activeClass = "active"; - // Focus new window - window["window-"+name].focus(); + for (var i = tabs.length - 1; i >= 0; i--) { + tabs[i].addEventListener("click", togglePanel); } -} - -// Trigger popups -document.querySelector(".js-popup").addEventListener("click", popup); - -// Get JSONP -function getJSONP(url, callback) { - var name = "jsonp_callback_" + Math.round(100000 * Math.random()); - - // Cleanup to prevent memory leaks and hit original callback - window[name] = function(data) { - delete window[name]; - document.body.removeChild(script); - callback(data); - }; - - // Create a faux script - var script = document.createElement("script"); - script.setAttribute("src", url + (url.indexOf("?") >= 0 ? "&" : "?") + "callback=" + name); - - // Inject to the body - document.body.appendChild(script); -} - -// Get star count -var storageSupported = ("sessionStorage" in window), - selectors = { - github: ".js-stargazers-count", - twitter: ".js-tweet-count" - }; - -// Display the count next to the button -function displayCount(selector, count) { - document.querySelector(selector).innerHTML = count; -} - -// Add star -function formatGitHubCount(count) { - return "★ " + count; -} - -// Check if it's in session storage first -if(storageSupported && "github_stargazers" in window.sessionStorage) { - displayCount(selectors.github, formatGitHubCount(window.sessionStorage.github_stargazers)); -} -else { - getJSONP("https://api.github.com/repos/selz/plyr?access_token=a46ac653210ba6a6be44260c29c333470c3fbbf5", function (json) { - if (json && typeof json.data.stargazers_count !== "undefined") { - // Update UI - displayCount(selectors.github, formatGitHubCount(json.data.stargazers_count)); - - // Store in session storage - window.sessionStorage.github_stargazers = json.data.stargazers_count; + + function togglePanel(event) { + event.preventDefault(); + + var tab = event.target, + panel = document.querySelector(tab.getAttribute("href")); + + for (var i = panels.length - 1; i >= 0; i--) { + panels[i].classList.remove(activeClass); } - }); -} - -// Get tweet count -if(storageSupported && "tweets" in window.sessionStorage) { - displayCount(selectors.twitter, window.sessionStorage.tweets); -} -else { - getJSONP("https://cdn.api.twitter.com/1/urls/count.json?url=plyr.io", function (json) { - if (json && typeof json.count !== "undefined") { - // Update UI - displayCount(selectors.twitter, json.count); - - // Store in session storage - window.sessionStorage.tweets = json.count; + + for (var x = tabs.length - 1; x >= 0; x--) { + tabs[x].classList.remove(activeClass); } - }); -} + panel.classList.add(activeClass); + event.target.classList.add(activeClass); + } +})(); // Google analytics // For demo site (http://[www.]plyr.io) only diff --git a/docs/src/less/components/base.less b/docs/src/less/components/base.less new file mode 100644 index 00000000..81a68058 --- /dev/null +++ b/docs/src/less/components/base.less @@ -0,0 +1,45 @@ +// ========================================================================== +// Base layout +// ========================================================================== + +// BORDER-BOX ALL THE THINGS! +// http://paulirish.com/2012/box-sizing-border-box-ftw/ +*, *::after, *::before { + box-sizing: border-box; +} + +// Base +html { + font-size: 100%; +} +body { + font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif; + background: @body-background; + line-height: 1.5; + text-align: center; + color: @gray; + .font-smoothing(on); +} + +// Header +header { + padding: @padding-base; + margin-bottom: @padding-base; + + p { + .font-size(18); + } + @media (min-width: @screen-sm) { + padding-top: (@padding-base * 3); + padding-bottom: (@padding-base * 3); + } +} + +// Sections +section { + padding-bottom: @padding-base; + + @media (min-width: @screen-sm) { + padding-bottom: (@padding-base * 2); + } +}
\ No newline at end of file diff --git a/docs/src/less/components/buttons.less b/docs/src/less/components/buttons.less new file mode 100644 index 00000000..749cd11f --- /dev/null +++ b/docs/src/less/components/buttons.less @@ -0,0 +1,144 @@ +// ========================================================================== +// Buttons +// ========================================================================== + +nav { + ul { + list-style: none; + margin: 0; + padding: 0; + font-size: 0; + } + li { + display: inline-block; + margin-top: (@padding-base / 2); + .font-size(); + white-space: nowrap; + } + li + li { + margin-left: @padding-base; + } +} + +// Tabs +.btn-bar { + position: relative; + margin: 0 auto @padding-base; + max-width: @example-width-video; + + &::before { + content: ""; + position: absolute; + top: 50%; + left: 0; + right: 0; + height: 1px; + background: @gray-lighter; + } + + ul { + position: relative; + z-index: 1; + display: inline-block; + user-select: none; + } + li { + margin: 0; + + &:first-child .btn { + border-radius: 4px 0 0 4px; + } + &:last-child .btn { + border-radius: 0 4px 4px 0; + } + & + li .btn { + margin-left: -1px; + } + } + .btn { + display: block; + border-radius: 0; + } + .active { + &:extend(.btn-primary); + } + .btn.active { + box-shadow: inset 0 1px 1px rgba(0,0,0, .2); + position: relative; + z-index: 1; + } + + @media (min-width: 560px) { + margin-bottom: (@padding-base * 2); + } +} + +// Shared +.btn, +.btn-count { + display: inline-block; + vertical-align: middle; + border-radius: @border-radius-base; + font-weight: 600; + user-select: none; +} + +// Buttons +.btn { + padding: (@padding-base / 2) @padding-base; + background: @body-background; + border: 1px solid @gray-light; + box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0, .05); + text-shadow: 0 1px 1px #fff; + color: @gray; + + &:hover, + &:focus { + background-color: #fff; + border-color: darken(@gray-light, 5%); + color: @link-color; + outline: 0; + } +} +.btn-primary { + background: linear-gradient(@link-color, darken(@link-color, 3%)); + border-color: darken(@link-color, 10%); + box-shadow: 0 1px 1px rgba(0,0,0, .15); + text-shadow: 0 1px 1px rgba(0,0,0, .1); + color: #fff; + + &:hover, + &:focus { + color: #fff; + border-color: darken(@link-color, 20%); + } +} +.btn-small { + padding-top: ceil(@padding-base / 3); + padding-bottom: ceil(@padding-base / 3); +} + +// Count bubble +.btn-count { + position: relative; + margin-left: 6px; + padding: ((@padding-base / 2) - 1px); + background: @body-background; + border: 1px solid @gray-light; + + &::before { + content: ""; + position: absolute; + display: block; + width: @arrow-size; + height: @arrow-size; + left: 1px; + top: 50%; + margin-top: -(@arrow-size / 2); + + background: inherit; + border: inherit; + border-width: 1px 0 0 1px; + transform: rotate(-45deg) translate(-50%, -50%); + } +}
\ No newline at end of file diff --git a/docs/src/less/components/error.less b/docs/src/less/components/error.less new file mode 100644 index 00000000..b1427173 --- /dev/null +++ b/docs/src/less/components/error.less @@ -0,0 +1,19 @@ +// ========================================================================== +// Errors (AWS pages) +// ========================================================================== + +// Error page +html.error, +.error body { + height: 100%; +} +.error body { + width: 100%; + display: table; + table-layout: fixed; +} +.error main { + display: table-cell; + width: 100%; + vertical-align: middle; +}
\ No newline at end of file diff --git a/docs/src/less/components/examples.less b/docs/src/less/components/examples.less new file mode 100644 index 00000000..9c145847 --- /dev/null +++ b/docs/src/less/components/examples.less @@ -0,0 +1,39 @@ +// ========================================================================== +// Examples +// ========================================================================== + +// Example players +.example-audio .player, +.example-video .player { + margin: 0 auto @padding-base; + + &-controls { + border-radius: 0 0 @border-radius-base @border-radius-base; + } +} +.example-audio .player { + max-width: @example-width-audio; + + &-controls { + border-radius: @border-radius-base; + } + &-progress { + border-radius: @border-radius-base @border-radius-base 0 0; + overflow: hidden; + } +} +.example-video .player { + max-width: @example-width-video; + + video, + iframe { + border-radius: @border-radius-base @border-radius-base 0 0; + } + iframe { + -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); + } + &-fullscreen, + &.fullscreen-active { + max-width: none; + } +}
\ No newline at end of file diff --git a/docs/src/less/components/panels.less b/docs/src/less/components/panels.less new file mode 100644 index 00000000..290e5dfc --- /dev/null +++ b/docs/src/less/components/panels.less @@ -0,0 +1,13 @@ +// ========================================================================== +// Panels +// ========================================================================== + +// Panels +.panel { + display: none; + + &.active { + display: block; + animation: fade-in .3s ease; + } +}
\ No newline at end of file diff --git a/docs/src/less/components/type.less b/docs/src/less/components/type.less new file mode 100644 index 00000000..97652342 --- /dev/null +++ b/docs/src/less/components/type.less @@ -0,0 +1,47 @@ +// ========================================================================== +// Typography +// ========================================================================== + +// Headings +h1, +h2 { + letter-spacing: -.025em; + color: #2E3C44; + margin: 0 0 (@padding-base / 2); + line-height: 1.2; + .font-smoothing(); +} +h1 { + .font-size(64); + color: #3498DB; +} + +// Paragraph and small +p, +small { + margin: 0 0 @padding-base; +} +small { + display: block; + padding: 0 (@padding-base / 2); + .font-size(14); +} + +// Links +a { + text-decoration: none; + color: @link-color; + border-bottom: 1px solid currentColor; + transition: background .3s ease, color .3s ease; + + &:hover, + &:focus { + color: @gray-dark; + } + &:focus { + .tab-focus(); + } + &.logo { + border: 0; + } +}
\ No newline at end of file diff --git a/docs/src/less/docs.less b/docs/src/less/docs.less index 12b0674a..cea3a2af 100644 --- a/docs/src/less/docs.less +++ b/docs/src/less/docs.less @@ -2,239 +2,33 @@ // HTML5 Video Player Demo Page // ========================================================================== -// Reset +// CSS Reset @import "lib/normalize.less"; + // Mixins @import "lib/mixins.less"; -// Fonts - docs only! -@import "lib/fontface.less"; // Variables -// --------------------------------------- -// Colors -@blue: #3498db; -@gray-dark: #343f4a; -@gray: #565d64; -@gray-light: #cbd0d3; -@off-white: #f2f5f7; - -// Elements -@link-color: @blue; -@padding-base: 20px; -@arrow-size: 8px; - -// Breakpoints -@screen-md: 768px; - -// BORDER-BOX ALL THE THINGS! -// http://paulirish.com/2012/box-sizing-border-box-ftw/ -*, *::after, *::before { - box-sizing: border-box; -} +@import "variables.less"; -// Base -html { - font-size: 100%; -} -body { - font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif; - background: @off-white; - line-height: 1.5; - text-align: center; - color: @gray; - .font-smoothing(on); -} +// Animation +@import "lib/animation.less"; -// Error page -html.error, -.error body { - height: 100%; -} -.error body { - width: 100%; - display: table; - table-layout: fixed; -} -.error main { - display: table-cell; - width: 100%; - vertical-align: middle; -} +// Base layout +@import "components/base.less"; // Type -h1, -h2 { - letter-spacing: -.025em; - color: #2E3C44; - margin: 0 0 (@padding-base / 2); - line-height: 1.2; - .font-smoothing(); -} -h1 { - .font-size(64); - color: #3498DB; -} -p, -small { - margin: 0 0 @padding-base; -} -small { - display: block; - padding: 0 (@padding-base / 2); - .font-size(14); -} - -// Header -header { - padding: @padding-base; - margin-bottom: @padding-base; - - p { - .font-size(18); - } - @media (min-width: 560px) { - padding-top: (@padding-base * 3); - padding-bottom: (@padding-base * 3); - } -} - -// Sections -section { - padding-bottom: @padding-base; - - @media (min-width: 560px) { - padding-bottom: (@padding-base * 2); - } -} - -// Links & Buttons -.actions { - list-style: none; - margin: 0; - padding: 0; - font-size: 0; - - li { - display: inline-block; - margin-top: (@padding-base / 2); - .font-size(); - white-space: nowrap; - } - li + li { - margin-left: @padding-base; - } -} -a { - text-decoration: none; - color: @link-color; - border-bottom: 1px solid currentColor; - transition: all .3s ease; - - &:hover, - &:focus { - color: #000; - } - &:focus { - .tab-focus(); - } - &.logo { - border: 0; - } -} -.btn, -.btn-count { - display: inline-block; - vertical-align: middle; - border-radius: 3px; - font-weight: 600; - user-select: none; -} -.btn { - padding: (@padding-base / 2) @padding-base; - background: @link-color; - border: 0; - color: #fff; - - &:hover, - &:focus { - color: #fff; - background: darken(@link-color, 5%); - } - - &-twitter { - background: #8799A2; - - &:hover, - &:focus { - background: darken(#8799A2, 5%); - } - } -} -.btn-count { - position: relative; - margin-left: 6px; - padding: ((@padding-base / 2) - 1px); - background: #fff; - border: 1px solid @gray-light; - - &::before { - content: ""; - position: absolute; - display: block; - width: @arrow-size; - height: @arrow-size; - left: 1px; - top: 50%; - margin-top: -(@arrow-size / 2); - - background: inherit; - border: inherit; - border-width: 1px 0 0 1px; - transform: rotate(-45deg) translate(-50%, -50%); - } -} - -// Example players -.example-audio .player, -.example-video .player { - margin: 0 auto @padding-base; - - &-controls { - border-radius: 0 0 4px 4px; - } -} -.example-audio .player { - max-width: 520px; +@import "lib/fontface.less"; +@import "components/type.less"; - &-controls { - border-radius: 4px; - } - &-progress { - border-radius: 4px 4px 0 0; - overflow: hidden; - } -} -.example-video .player { - max-width: 1200px; +// Buttons +@import "components/buttons.less"; - video, - iframe { - border-radius: 4px 4px 0 0; - } - iframe { - -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); - } - &-fullscreen, - &.fullscreen-active { - max-width: none; - } -} +// Panels +@import "components/panels.less"; -// Footer -footer { - margin-bottom: @padding-base; +// Error +@import "components/error.less"; - p { - margin-bottom: (@padding-base / 2); - } -}
\ No newline at end of file +// Examples +@import "components/examples.less";
\ No newline at end of file diff --git a/docs/src/less/lib/animation.less b/docs/src/less/lib/animation.less new file mode 100644 index 00000000..386c6613 --- /dev/null +++ b/docs/src/less/lib/animation.less @@ -0,0 +1,9 @@ +// ========================================================================== +// Animations +// ========================================================================== + +// Fade +@keyframes fade-in { + 0% { opacity: 0 } + 100% { opacity: 1 } +}
\ No newline at end of file diff --git a/docs/src/less/lib/fontface.less b/docs/src/less/lib/fontface.less index 479f7fa4..9442f17d 100644 --- a/docs/src/less/lib/fontface.less +++ b/docs/src/less/lib/fontface.less @@ -1,16 +1,18 @@ +// ========================================================================== +// Fonts +// ========================================================================== + @font-face { font-family: "Avenir"; src: url("//cdn.plyr.io/fonts/avenir-medium.woff2") format("woff2"), - url("//cdn.plyr.io/fonts/avenir-medium.woff") format("woff"), - url("//cdn.plyr.io/fonts/avenir-medium.ttf") format("truetype"); + url("//cdn.plyr.io/fonts/avenir-medium.woff") format("woff"); font-style: normal; font-weight: 400; } @font-face { font-family: "Avenir"; src: url("//cdn.plyr.io/fonts/avenir-bold.woff2") format("woff2"), - url("//cdn.plyr.io/fonts/avenir-bold.woff") format("woff"), - url("//cdn.plyr.io/fonts/avenir-bold.ttf") format("truetype"); + url("//cdn.plyr.io/fonts/avenir-bold.woff") format("woff"); font-style: normal; font-weight: 600; }
\ No newline at end of file diff --git a/docs/src/less/variables.less b/docs/src/less/variables.less new file mode 100644 index 00000000..4ea34d84 --- /dev/null +++ b/docs/src/less/variables.less @@ -0,0 +1,30 @@ +// ========================================================================== +// Variables +// ========================================================================== + +// Colors +@blue: #3498db; +@gray-dark: #343f4a; +@gray: #55646b; +@gray-light: #cbd0d3; +@gray-lighter: #dbe3e8; +@off-white: #f2f5f7; + +// Base +@body-background: @off-white; + +// Elements +@link-color: @blue; +@padding-base: 20px; +@arrow-size: 8px; + +// Breakpoints +@screen-sm: 480px; +@screen-md: 768px; + +// Radii +@border-radius-base: 4px; + +// Examples +@example-width-audio: 520px; +@example-width-video: 1200px;
\ No newline at end of file |