From 9c717275d20732fac237b2c1cfb5f4c9d2abd411 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 2 Jun 2019 22:24:41 +1000 Subject: Packages for demo separated --- demo/src/js/demo.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) (limited to 'demo/src') diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js index b1097601..93ffe172 100644 --- a/demo/src/js/demo.js +++ b/demo/src/js/demo.js @@ -5,6 +5,7 @@ // ========================================================================== import Raven from 'raven-js'; +import Shr from 'shr-buttons'; import Plyr from '../../../src/js/plyr'; @@ -20,10 +21,13 @@ import Plyr from '../../../src/js/plyr'; const selector = '#player'; const container = document.getElementById('container'); - if (window.Shr) { - window.Shr.setup('.js-shr-button', { + if (Shr) { + Shr.setup('.js-shr', { count: { - classname: 'button__count', + className: 'button__count', + }, + wrapper: { + className: 'button--with-count', }, }); } -- cgit v1.2.3 From 93f5acbffd32fc016ca0b0b3679ba9184d12009f Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 2 Jun 2019 22:25:00 +1000 Subject: Fixed cite display --- demo/src/js/demo.js | 6 ++++-- demo/src/sass/components/players.scss | 14 -------------- 2 files changed, 4 insertions(+), 16 deletions(-) (limited to 'demo/src') diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js index 93ffe172..a0a6ab1a 100644 --- a/demo/src/js/demo.js +++ b/demo/src/js/demo.js @@ -231,9 +231,11 @@ import Plyr from '../../../src/js/plyr'; // Show cite Array.from(document.querySelectorAll('.plyr__cite')).forEach(cite => { - cite.setAttribute('hidden', ''); + // eslint-disable-next-line no-param-reassign + cite.hidden = true; }); - document.querySelector(`.plyr__cite--${type}`).removeAttribute('hidden'); + + document.querySelector(`.plyr__cite--${type}`).hidden = false; } // Bind to each button diff --git a/demo/src/sass/components/players.scss b/demo/src/sass/components/players.scss index d088a91d..966a6343 100644 --- a/demo/src/sass/components/players.scss +++ b/demo/src/sass/components/players.scss @@ -2,12 +2,6 @@ // Examples // ========================================================================== -// For non supported browsers -video { - max-width: 100%; - vertical-align: middle; -} - // Example players .plyr { border-radius: $border-radius-base; @@ -34,17 +28,9 @@ video { // Style full supported player .plyr__cite { - display: none; margin-top: $spacing-base; .icon { margin-right: ceil($spacing-base / 6); } } - -.plyr--video:not(.plyr--youtube):not(.plyr--vimeo) ~ ul .plyr__cite--video, -.plyr--audio ~ ul .plyr__cite--audio, -.plyr--youtube ~ ul .plyr__cite--youtube, -.plyr--vimeo ~ ul .plyr__cite--vimeo { - display: block; -} -- cgit v1.2.3 From ac88e6e1909d306c797a6361c0ec953cb104f0ca Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 2 Jun 2019 23:16:29 +1000 Subject: Demo clean up --- demo/src/js/demo.js | 243 ++++++++-------------------------- demo/src/js/sources.js | 78 +++++++++++ demo/src/js/tab-focus.js | 31 +++++ demo/src/js/toggle-class.js | 5 + demo/src/sass/components/header.scss | 4 + demo/src/sass/components/icons.scss | 2 +- demo/src/sass/components/players.scss | 8 +- demo/src/sass/lib/mixins.scss | 2 +- demo/src/sass/settings/spacing.scss | 2 +- 9 files changed, 177 insertions(+), 198 deletions(-) create mode 100644 demo/src/js/sources.js create mode 100644 demo/src/js/tab-focus.js create mode 100644 demo/src/js/toggle-class.js (limited to 'demo/src') diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js index a0a6ab1a..a2867b20 100644 --- a/demo/src/js/demo.js +++ b/demo/src/js/demo.js @@ -4,10 +4,16 @@ // Please see readme.md in the root or github.com/sampotts/plyr // ========================================================================== +import './tab-focus'; +import 'custom-event-polyfill'; +import 'url-polyfill'; + import Raven from 'raven-js'; import Shr from 'shr-buttons'; import Plyr from '../../../src/js/plyr'; +import sources from './sources'; +import toggleClass from './toggle-class'; (() => { const { host } = window.location; @@ -19,48 +25,15 @@ import Plyr from '../../../src/js/plyr'; document.addEventListener('DOMContentLoaded', () => { Raven.context(() => { const selector = '#player'; - const container = document.getElementById('container'); - - if (Shr) { - Shr.setup('.js-shr', { - count: { - className: 'button__count', - }, - wrapper: { - className: 'button--with-count', - }, - }); - } - - // Setup tab focus - const tabClassName = 'tab-focus'; - - // Remove class on blur - document.addEventListener('focusout', event => { - if (!event.target.classList || container.contains(event.target)) { - return; - } - - event.target.classList.remove(tabClassName); - }); - - // Add classname to tabbed elements - document.addEventListener('keydown', event => { - if (event.keyCode !== 9) { - return; - } - - // Delay the adding of classname until the focus has changed - // This event fires before the focusin event - setTimeout(() => { - const focused = document.activeElement; - - if (!focused || !focused.classList || container.contains(focused)) { - return; - } - focused.classList.add(tabClassName); - }, 10); + // Setup share buttons + Shr.setup('.js-shr', { + count: { + className: 'button__count', + }, + wrapper: { + className: 'button--with-count', + }, }); // Setup the player @@ -98,144 +71,45 @@ import Plyr from '../../../src/js/plyr'; // Setup type toggle const buttons = document.querySelectorAll('[data-source]'); - const types = { - video: 'video', - audio: 'audio', - youtube: 'youtube', - vimeo: 'vimeo', - }; - let currentType = window.location.hash.replace('#', ''); - const historySupport = window.history && window.history.pushState; + const types = Object.keys(sources); + const historySupport = Boolean(window.history && window.history.pushState); + let currentType = window.location.hash.substring(1); + const hasCurrentType = !currentType.length; - // Toggle class on an element - function toggleClass(element, className, state) { - if (element) { - element.classList[state ? 'add' : 'remove'](className); - } + function render(type) { + // Remove active classes + Array.from(buttons).forEach(button => toggleClass(button.parentElement, 'active', false)); + + // Set active on parent + toggleClass(document.querySelector(`[data-source="${type}"]`), 'active', true); + + // Show cite + Array.from(document.querySelectorAll('.plyr__cite')).forEach(cite => { + // eslint-disable-next-line no-param-reassign + cite.hidden = true; + }); + + document.querySelector(`.plyr__cite--${type}`).hidden = false; } // Set a new source - function newSource(type, init) { + function setSource(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) || + !types.includes(type) || (!init && type === currentType) || - (!currentType.length && type === types.video) + (!currentType.length && type === 'video') ) { return; } - switch (type) { - case types.video: - player.source = { - type: 'video', - title: 'View From A Blue Moon', - sources: [ - { - src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4', - type: 'video/mp4', - size: 576, - }, - { - src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4', - type: 'video/mp4', - size: 720, - }, - { - src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4', - type: 'video/mp4', - size: 1080, - }, - { - src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1440p.mp4', - type: 'video/mp4', - size: 1440, - }, - ], - poster: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg', - tracks: [ - { - kind: 'captions', - label: 'English', - srclang: 'en', - src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt', - default: true, - }, - { - kind: 'captions', - label: 'French', - srclang: 'fr', - src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt', - }, - ], - }; - - break; - - case types.audio: - player.source = { - type: 'audio', - title: 'Kishi Bashi – “It All Began With A Burst”', - sources: [ - { - src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3', - type: 'audio/mp3', - }, - { - src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg', - type: 'audio/ogg', - }, - ], - }; - - break; - - case types.youtube: - player.source = { - type: 'video', - sources: [ - { - src: 'https://youtube.com/watch?v=bTqVqk7FSmY', - provider: 'youtube', - }, - ], - }; - - break; - - case types.vimeo: - player.source = { - type: 'video', - sources: [ - { - src: 'https://vimeo.com/76979871', - provider: 'vimeo', - }, - ], - }; - - break; - - default: - break; - } + // Set the new source + player.source = sources[type]; // Set the current type for next time currentType = type; - // Remove active classes - Array.from(buttons).forEach(button => toggleClass(button.parentElement, 'active', false)); - - // Set active on parent - toggleClass(document.querySelector(`[data-source="${type}"]`), 'active', true); - - // Show cite - Array.from(document.querySelectorAll('.plyr__cite')).forEach(cite => { - // eslint-disable-next-line no-param-reassign - cite.hidden = true; - }); - - document.querySelector(`.plyr__cite--${type}`).hidden = false; + render(type); } // Bind to each button @@ -243,7 +117,7 @@ import Plyr from '../../../src/js/plyr'; button.addEventListener('click', () => { const type = button.getAttribute('data-source'); - newSource(type); + setSource(type); if (historySupport) { window.history.pushState({ type }, '', `#${type}`); @@ -253,36 +127,27 @@ import Plyr from '../../../src/js/plyr'; // List for backwards/forwards window.addEventListener('popstate', event => { - if (event.state && 'type' in event.state) { - newSource(event.state.type); + if (event.state && Object.keys(event.state).includes('type')) { + setSource(event.state.type); } }); - // On load - if (historySupport) { - const 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 (hasCurrentType) { + currentType = 'video'; + } - // Replace current history state - if (currentType in types) { - window.history.replaceState( - { - type: currentType, - }, - '', - video ? '' : `#${currentType}`, - ); - } + // Replace current history state + if (historySupport && types.includes(currentType)) { + window.history.replaceState({ type: currentType }, '', hasCurrentType ? '' : `#${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 !== 'video') { + setSource(currentType, true); } + + render(currentType); }); }); diff --git a/demo/src/js/sources.js b/demo/src/js/sources.js new file mode 100644 index 00000000..8dbed4e3 --- /dev/null +++ b/demo/src/js/sources.js @@ -0,0 +1,78 @@ +const sources = { + video: { + type: 'video', + title: 'View From A Blue Moon', + sources: [ + { + src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4', + type: 'video/mp4', + size: 576, + }, + { + src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4', + type: 'video/mp4', + size: 720, + }, + { + src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4', + type: 'video/mp4', + size: 1080, + }, + { + src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1440p.mp4', + type: 'video/mp4', + size: 1440, + }, + ], + poster: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg', + tracks: [ + { + kind: 'captions', + label: 'English', + srclang: 'en', + src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt', + default: true, + }, + { + kind: 'captions', + label: 'French', + srclang: 'fr', + src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt', + }, + ], + }, + audio: { + type: 'audio', + title: 'Kishi Bashi – “It All Began With A Burst”', + sources: [ + { + src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3', + type: 'audio/mp3', + }, + { + src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg', + type: 'audio/ogg', + }, + ], + }, + youtube: { + type: 'video', + sources: [ + { + src: 'https://youtube.com/watch?v=bTqVqk7FSmY', + provider: 'youtube', + }, + ], + }, + vimeo: { + type: 'video', + sources: [ + { + src: 'https://vimeo.com/76979871', + provider: 'vimeo', + }, + ], + }, +}; + +export default sources; diff --git a/demo/src/js/tab-focus.js b/demo/src/js/tab-focus.js new file mode 100644 index 00000000..c1602cf0 --- /dev/null +++ b/demo/src/js/tab-focus.js @@ -0,0 +1,31 @@ +// Setup tab focus +const container = document.getElementById('container'); +const tabClassName = 'tab-focus'; + +// Remove class on blur +document.addEventListener('focusout', event => { + if (!event.target.classList || container.contains(event.target)) { + return; + } + + event.target.classList.remove(tabClassName); +}); + +// Add classname to tabbed elements +document.addEventListener('keydown', event => { + if (event.keyCode !== 9) { + return; + } + + // Delay the adding of classname until the focus has changed + // This event fires before the focusin event + setTimeout(() => { + const focused = document.activeElement; + + if (!focused || !focused.classList || container.contains(focused)) { + return; + } + + focused.classList.add(tabClassName); + }, 10); +}); diff --git a/demo/src/js/toggle-class.js b/demo/src/js/toggle-class.js new file mode 100644 index 00000000..1661433b --- /dev/null +++ b/demo/src/js/toggle-class.js @@ -0,0 +1,5 @@ +// Toggle class on an element +const toggleClass = (element, className = '', toggle = false) => + element && element.classList[toggle ? 'add' : 'remove'](className); + +export default toggleClass; diff --git a/demo/src/sass/components/header.scss b/demo/src/sass/components/header.scss index eab2214e..b2a04cb1 100644 --- a/demo/src/sass/components/header.scss +++ b/demo/src/sass/components/header.scss @@ -10,6 +10,10 @@ header { margin-top: ($spacing-base * 1.5); } + p:first-of-type { + @include font-size(16); + } + @media only screen and (min-width: $screen-md) { margin-right: ($spacing-base * 3); max-width: 360px; diff --git a/demo/src/sass/components/icons.scss b/demo/src/sass/components/icons.scss index b2b353a6..ec9f8c5c 100644 --- a/demo/src/sass/components/icons.scss +++ b/demo/src/sass/components/icons.scss @@ -19,5 +19,5 @@ label svg { a .icon, .btn .icon { - margin-right: floor($spacing-base / 3); + margin-right: ($spacing-base / 2); } diff --git a/demo/src/sass/components/players.scss b/demo/src/sass/components/players.scss index 966a6343..2bdbb762 100644 --- a/demo/src/sass/components/players.scss +++ b/demo/src/sass/components/players.scss @@ -27,10 +27,6 @@ } // Style full supported player -.plyr__cite { - margin-top: $spacing-base; - - .icon { - margin-right: ceil($spacing-base / 6); - } +.plyr__cite .icon { + margin-right: ceil($spacing-base / 6); } diff --git a/demo/src/sass/lib/mixins.scss b/demo/src/sass/lib/mixins.scss index cdfcb87d..268157ae 100644 --- a/demo/src/sass/lib/mixins.scss +++ b/demo/src/sass/lib/mixins.scss @@ -36,7 +36,7 @@ @return #{$rem}rem; } -@mixin font-size($size: 16) { +@mixin font-size($size: $font-size-base) { font-size: $size * 1px; // Fallback in px font-size: calculate-rem($size); } diff --git a/demo/src/sass/settings/spacing.scss b/demo/src/sass/settings/spacing.scss index a19b0a95..085838fd 100644 --- a/demo/src/sass/settings/spacing.scss +++ b/demo/src/sass/settings/spacing.scss @@ -2,4 +2,4 @@ // Colors // ========================================================================== -$spacing-base: 20px; +$spacing-base: 16px; -- cgit v1.2.3 From d9d2c4a219529df75557b2e105158d8a17d1c56f Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 3 Jun 2019 00:26:08 +1000 Subject: Demo tweaks --- demo/src/sass/components/buttons.scss | 8 ++++---- demo/src/sass/components/header.scss | 15 +++++++++++---- demo/src/sass/lib/animation.scss | 14 ++++++++++++++ demo/src/sass/settings/colors.scss | 8 ++------ demo/src/sass/type/base.scss | 2 +- demo/src/sass/type/headings.scss | 4 ++-- 6 files changed, 34 insertions(+), 17 deletions(-) (limited to 'demo/src') diff --git a/demo/src/sass/components/buttons.scss b/demo/src/sass/components/buttons.scss index 5ff6fc12..6afe98d7 100644 --- a/demo/src/sass/components/buttons.scss +++ b/demo/src/sass/components/buttons.scss @@ -22,13 +22,13 @@ // Buttons .button { font-weight: $font-weight-bold; - padding-left: $spacing-base; - padding-right: $spacing-base; + padding-left: ($spacing-base * 1.25); + padding-right: ($spacing-base * 1.25); transition: all 0.2s ease; &:hover, &:focus { - color: $gray-dark; + color: $color-button-text-hover; // Remove the underline/border &::after { @@ -65,7 +65,7 @@ // Count bubble .button__count { animation: fadein 0.2s ease; - margin-left: ($spacing-base / 2); + margin-left: ($spacing-base * 0.75); &::before { border: $arrow-size solid transparent; diff --git a/demo/src/sass/components/header.scss b/demo/src/sass/components/header.scss index b2a04cb1..3c2ba67e 100644 --- a/demo/src/sass/components/header.scss +++ b/demo/src/sass/components/header.scss @@ -6,12 +6,15 @@ header { padding-bottom: $spacing-base; text-align: center; - .call-to-action { - margin-top: ($spacing-base * 1.5); + h1 span { + animation: shrinkHide 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2s forwards; + display: inline-block; + font-weight: $font-weight-light; + opacity: 0.5; } - p:first-of-type { - @include font-size(16); + .call-to-action { + margin-top: ($spacing-base * 1.5); } @media only screen and (min-width: $screen-md) { @@ -19,5 +22,9 @@ header { max-width: 360px; padding-bottom: ($spacing-base * 2); text-align: left; + + p:first-of-type { + @include font-size($font-size-large); + } } } diff --git a/demo/src/sass/lib/animation.scss b/demo/src/sass/lib/animation.scss index 3c14b0a7..64eb5595 100644 --- a/demo/src/sass/lib/animation.scss +++ b/demo/src/sass/lib/animation.scss @@ -11,3 +11,17 @@ opacity: 1; } } + +@keyframes shrinkHide { + 0% { + opacity: 0.5; + width: 38px; + } + 20% { + width: 45px; + } + 100% { + opacity: 0; + width: 0; + } +} diff --git a/demo/src/sass/settings/colors.scss b/demo/src/sass/settings/colors.scss index 65d3f7b7..61363e67 100644 --- a/demo/src/sass/settings/colors.scss +++ b/demo/src/sass/settings/colors.scss @@ -5,20 +5,15 @@ // Greyscale $gray-dark: #343f4a; $gray: #55646b; -$gray-light: #cbd0d3; -$gray-lighter: #dbe3e8; -$off-white: #f2f5f7; // Text $color-text: #fff; // Plyr -$color-brand-primary: #1aafff; +$color-brand-primary: #1aafff; // #7bc47f // Brands $color-twitter: #4baaf4; -$color-youtube: #cc181e; -$color-vimeo: #19b7ed; // Elements $color-link: #fff; @@ -27,6 +22,7 @@ $color-background: $color-brand-primary; // Buttons $color-button-background: #fff; $color-button-text: $gray; +$color-button-text-hover: $gray-dark; // Focus $tab-focus-default-color: #fff; diff --git a/demo/src/sass/type/base.scss b/demo/src/sass/type/base.scss index 452298bd..4473cb81 100644 --- a/demo/src/sass/type/base.scss +++ b/demo/src/sass/type/base.scss @@ -26,7 +26,7 @@ textarea { p, small { - margin: 0 0 $spacing-base; + margin: 0 0 ($spacing-base * 1.5); } small { diff --git a/demo/src/sass/type/headings.scss b/demo/src/sass/type/headings.scss index 7039dd37..c7449efa 100644 --- a/demo/src/sass/type/headings.scss +++ b/demo/src/sass/type/headings.scss @@ -4,8 +4,8 @@ h1 { @include font-size($font-size-h1); - font-weight: $font-weight-bold; + font-weight: $font-weight-medium; letter-spacing: $letter-spacing-headings; line-height: 1.2; - margin: 0 0 $spacing-base; + margin: 0 0 ($spacing-base * 1.5); } -- cgit v1.2.3 From ab89e055decdb54ebbbe15ecea68cd5b521f46be Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 3 Jun 2019 20:11:31 +1000 Subject: Demo tweaks --- demo/src/sass/components/header.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'demo/src') diff --git a/demo/src/sass/components/header.scss b/demo/src/sass/components/header.scss index 3c2ba67e..fd014ead 100644 --- a/demo/src/sass/components/header.scss +++ b/demo/src/sass/components/header.scss @@ -24,7 +24,7 @@ header { text-align: left; p:first-of-type { - @include font-size($font-size-large); + @include font-size($font-size-base + 1); } } } -- cgit v1.2.3 From 2e40b91ec1aabf33e945cba66fbcdd9b7aa53ba7 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Thu, 20 Jun 2019 23:50:46 +1000 Subject: Styling tweaks for demo --- demo/src/sass/components/buttons.scss | 10 +++++---- demo/src/sass/components/links.scss | 1 - demo/src/sass/components/players.scss | 10 ++++++--- demo/src/sass/layout/core.scss | 3 +-- demo/src/sass/settings/colors.scss | 38 ++++++++++++++++++++++++----------- demo/src/sass/settings/cosmetic.scss | 2 +- demo/src/sass/settings/plyr.scss | 3 +++ demo/src/sass/type/base.scss | 1 - demo/src/sass/type/headings.scss | 3 ++- 9 files changed, 46 insertions(+), 25 deletions(-) (limited to 'demo/src') diff --git a/demo/src/sass/components/buttons.scss b/demo/src/sass/components/buttons.scss index 6afe98d7..279007fb 100644 --- a/demo/src/sass/components/buttons.scss +++ b/demo/src/sass/components/buttons.scss @@ -6,11 +6,9 @@ .button, .button__count { align-items: center; - background: $color-button-background; border: 0; border-radius: $border-radius-base; box-shadow: 0 1px 1px rgba(#000, 0.1); - color: $color-button-text; display: inline-flex; padding: ($spacing-base * 0.75); position: relative; @@ -21,6 +19,8 @@ // Buttons .button { + background: $color-button-background; + color: $color-button-text; font-weight: $font-weight-bold; padding-left: ($spacing-base * 1.25); padding-right: ($spacing-base * 1.25); @@ -28,7 +28,7 @@ &:hover, &:focus { - color: $color-button-text-hover; + background: $color-button-background-hover; // Remove the underline/border &::after { @@ -65,12 +65,14 @@ // Count bubble .button__count { animation: fadein 0.2s ease; + background: $color-button-count-background; + color: $color-button-count-text; margin-left: ($spacing-base * 0.75); &::before { border: $arrow-size solid transparent; border-left-width: 0; - border-right-color: $color-button-background; + border-right-color: $color-button-count-background; content: ''; height: 0; position: absolute; diff --git a/demo/src/sass/components/links.scss b/demo/src/sass/components/links.scss index b2930862..1d49be3a 100644 --- a/demo/src/sass/components/links.scss +++ b/demo/src/sass/components/links.scss @@ -12,7 +12,6 @@ button.faux-link { a { border-bottom: 1px dotted currentColor; color: $color-link; - font-weight: $font-weight-bold; position: relative; text-decoration: none; transition: all 0.2s ease; diff --git a/demo/src/sass/components/players.scss b/demo/src/sass/components/players.scss index 2bdbb762..573b4cb0 100644 --- a/demo/src/sass/components/players.scss +++ b/demo/src/sass/components/players.scss @@ -5,7 +5,7 @@ // Example players .plyr { border-radius: $border-radius-base; - box-shadow: 0 2px 5px rgba(#000, 0.2); + box-shadow: 0 2px 15px rgba(#000, 0.1); margin: $spacing-base auto; &.plyr--audio { @@ -27,6 +27,10 @@ } // Style full supported player -.plyr__cite .icon { - margin-right: ceil($spacing-base / 6); +.plyr__cite { + color: $color-gray-5; + + .icon { + margin-right: ceil($spacing-base / 6); + } } diff --git a/demo/src/sass/layout/core.scss b/demo/src/sass/layout/core.scss index 0501c1df..b9b2d4d5 100644 --- a/demo/src/sass/layout/core.scss +++ b/demo/src/sass/layout/core.scss @@ -35,11 +35,10 @@ main { aside { align-items: center; background: #fff; - color: $gray; display: flex; flex-shrink: 0; justify-content: center; - padding: ($spacing-base * 0.75); + padding: $spacing-base; position: relative; text-align: center; text-shadow: none; diff --git a/demo/src/sass/settings/colors.scss b/demo/src/sass/settings/colors.scss index 61363e67..308e6757 100644 --- a/demo/src/sass/settings/colors.scss +++ b/demo/src/sass/settings/colors.scss @@ -2,27 +2,41 @@ // Colors // ========================================================================== -// Greyscale -$gray-dark: #343f4a; -$gray: #55646b; +// Grayscale +$color-gray-9: hsl(210, 15%, 16%); +$color-gray-8: lighten($color-gray-9, 9%); +$color-gray-7: lighten($color-gray-8, 9%); +$color-gray-6: lighten($color-gray-7, 9%); +$color-gray-5: lighten($color-gray-6, 9%); +$color-gray-4: lighten($color-gray-5, 9%); +$color-gray-3: lighten($color-gray-4, 9%); +$color-gray-2: lighten($color-gray-3, 9%); +$color-gray-1: lighten($color-gray-2, 9%); +$color-gray-0: lighten($color-gray-1, 9%); -// Text -$color-text: #fff; +// Branding +$color-brand-primary: hsl(198, 100%, 50%); -// Plyr -$color-brand-primary: #1aafff; // #7bc47f +// Text +$color-text: $color-gray-7; +$color-headings: $color-brand-primary; // Brands $color-twitter: #4baaf4; // Elements -$color-link: #fff; -$color-background: $color-brand-primary; +$color-link: $color-brand-primary; + +// Background +$color-background-from: hsl(198, 100%, 94%); +$color-background-to: hsl(198, 100%, 98%); // Buttons -$color-button-background: #fff; -$color-button-text: $gray; -$color-button-text-hover: $gray-dark; +$color-button-background: $color-brand-primary; +$color-button-text: #fff; +$color-button-background-hover: hsl(198, 100%, 55%); +$color-button-count-background: #fff; +$color-button-count-text: $color-gray-6; // Focus $tab-focus-default-color: #fff; diff --git a/demo/src/sass/settings/cosmetic.scss b/demo/src/sass/settings/cosmetic.scss index d750efe2..84ff819f 100644 --- a/demo/src/sass/settings/cosmetic.scss +++ b/demo/src/sass/settings/cosmetic.scss @@ -9,4 +9,4 @@ $arrow-size: 5px; $border-radius-base: 4px; // Background -$page-background: linear-gradient(to left top, lighten($color-background, 10%), darken($color-background, 20%)); +$page-background: linear-gradient(to left top, $color-background-from, $color-background-to); diff --git a/demo/src/sass/settings/plyr.scss b/demo/src/sass/settings/plyr.scss index ae6be636..edd917c4 100644 --- a/demo/src/sass/settings/plyr.scss +++ b/demo/src/sass/settings/plyr.scss @@ -14,6 +14,9 @@ $plyr-font-size-badges: 9px; // Other $plyr-font-smoothing: true; +// Colors +$plyr-color-main: $color-brand-primary; + // Captions $plyr-font-size-captions-base: $plyr-font-size-base; $plyr-font-size-captions-small: $plyr-font-size-small; diff --git a/demo/src/sass/type/base.scss b/demo/src/sass/type/base.scss index 4473cb81..736d8e89 100644 --- a/demo/src/sass/type/base.scss +++ b/demo/src/sass/type/base.scss @@ -14,7 +14,6 @@ body { font-family: $font-sans-serif; font-weight: $font-weight-medium; line-height: $line-height-base; - text-shadow: 0 1px 1px rgba(#000, 0.15); } button, diff --git a/demo/src/sass/type/headings.scss b/demo/src/sass/type/headings.scss index c7449efa..670619e8 100644 --- a/demo/src/sass/type/headings.scss +++ b/demo/src/sass/type/headings.scss @@ -4,7 +4,8 @@ h1 { @include font-size($font-size-h1); - font-weight: $font-weight-medium; + color: $color-headings; + font-weight: $font-weight-bold; letter-spacing: $letter-spacing-headings; line-height: 1.2; margin: 0 0 ($spacing-base * 1.5); -- cgit v1.2.3 From 1bb4c207f19da24623cdb831642ae74860288513 Mon Sep 17 00:00:00 2001 From: James Kerrane Date: Tue, 21 Jan 2020 23:08:55 -0700 Subject: Change vimeo demo video Change vimeo video to a more general video, fix #1626. --- demo/src/js/sources.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'demo/src') diff --git a/demo/src/js/sources.js b/demo/src/js/sources.js index 8dbed4e3..77cbd407 100644 --- a/demo/src/js/sources.js +++ b/demo/src/js/sources.js @@ -68,7 +68,7 @@ const sources = { type: 'video', sources: [ { - src: 'https://vimeo.com/76979871', + src: 'https://vimeo.com/383514704', provider: 'vimeo', }, ], -- cgit v1.2.3 From 0f16a018ff741eb6c12e69fa7f7b77f07492432c Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 10 Feb 2020 11:25:25 +0000 Subject: Set referrerPolicy in the demo --- demo/src/js/demo.js | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'demo/src') diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js index a2867b20..39614eeb 100644 --- a/demo/src/js/demo.js +++ b/demo/src/js/demo.js @@ -64,6 +64,10 @@ import toggleClass from './toggle-class'; 'https://cdn.plyr.io/static/demo/thumbs/240p.vtt', ], }, + vimeo: { + // Prevent Vimeo blocking plyr.io demo site + referrerPolicy: 'no-referrer', + } }); // Expose for tinkering in the console -- cgit v1.2.3 From ea350f9d1ded176979b4a8a9a7bf9a66e8ae9a53 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 10 Feb 2020 11:25:48 +0000 Subject: Update demo video --- demo/src/js/sources.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'demo/src') diff --git a/demo/src/js/sources.js b/demo/src/js/sources.js index 77cbd407..f0ec3515 100644 --- a/demo/src/js/sources.js +++ b/demo/src/js/sources.js @@ -68,7 +68,7 @@ const sources = { type: 'video', sources: [ { - src: 'https://vimeo.com/383514704', + src: 'https://vimeo.com/40648169', provider: 'vimeo', }, ], -- cgit v1.2.3 From f6a462549512589855cca6a9abf72ef5ad008d2f Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Wed, 12 Feb 2020 11:35:47 +0000 Subject: Removed redundant keys property --- demo/src/js/demo.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) (limited to 'demo/src') diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js index 39614eeb..1723fcbc 100644 --- a/demo/src/js/demo.js +++ b/demo/src/js/demo.js @@ -50,9 +50,6 @@ import toggleClass from './toggle-class'; captions: { active: true, }, - keys: { - google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c', - }, ads: { enabled: env.prod || env.dev, publisherId: '918848828995742', @@ -67,7 +64,7 @@ import toggleClass from './toggle-class'; vimeo: { // Prevent Vimeo blocking plyr.io demo site referrerPolicy: 'no-referrer', - } + }, }); // Expose for tinkering in the console -- cgit v1.2.3