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

Converted to 2 space indentation

Browse Source
This commit is contained in:
Sam Potts
2020-04-11 16:23:14 +10:00
parent 8f5b59c18c
commit 502d5977d7
125 changed files with 10693 additions and 10797 deletions
Download Patch File Download Diff File Expand all files Collapse all files

241
demo/src/js/demo.js
View File

@ -16,137 +16,134 @@ import sources from './sources';
import toggleClass from './toggle-class';
(() => {
const production = 'plyr.io';
const production = 'plyr.io';
// Sentry for demo site (https://plyr.io) only
if (window.location.host === production) {
Sentry.init({
dsn: 'https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555',
whitelistUrls: [production].map(d => new RegExp(`https://(([a-z0-9])+(.))*${d}`)),
});
// Sentry for demo site (https://plyr.io) only
if (window.location.host === production) {
Sentry.init({
dsn: 'https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555',
whitelistUrls: [production].map(d => new RegExp(`https://(([a-z0-9])+(.))*${d}`)),
});
}
document.addEventListener('DOMContentLoaded', () => {
const selector = '#player';
// Setup share buttons
Shr.setup('.js-shr', {
count: {
className: 'button__count',
},
wrapper: {
className: 'button--with-count',
},
});
// Setup the player
const player = new Plyr(selector, {
debug: true,
title: 'View From A Blue Moon',
iconUrl: 'dist/demo.svg',
keyboard: {
global: true,
},
tooltips: {
controls: true,
},
captions: {
active: true,
},
ads: {
enabled: window.location.host.includes(production),
publisherId: '918848828995742',
},
previewThumbnails: {
enabled: true,
src: ['https://cdn.plyr.io/static/demo/thumbs/100p.vtt', '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
window.player = player;
// Setup type toggle
const buttons = document.querySelectorAll('[data-source]');
const types = Object.keys(sources);
const historySupport = Boolean(window.history && window.history.pushState);
let currentType = window.location.hash.substring(1);
const hasInitialType = currentType.length;
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;
}
document.addEventListener('DOMContentLoaded', () => {
const selector = '#player';
// Set a new source
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 (!types.includes(type) || (!init && type === currentType) || (!currentType.length && type === 'video')) {
return;
}
// Setup share buttons
Shr.setup('.js-shr', {
count: {
className: 'button__count',
},
wrapper: {
className: 'button--with-count',
},
});
// Set the new source
player.source = sources[type];
// Setup the player
const player = new Plyr(selector, {
debug: true,
title: 'View From A Blue Moon',
iconUrl: 'dist/demo.svg',
keyboard: {
global: true,
},
tooltips: {
controls: true,
},
captions: {
active: true,
},
ads: {
enabled: window.location.host.includes(production),
publisherId: '918848828995742',
},
previewThumbnails: {
enabled: true,
src: [
'https://cdn.plyr.io/static/demo/thumbs/100p.vtt',
'https://cdn.plyr.io/static/demo/thumbs/240p.vtt',
],
},
vimeo: {
// Prevent Vimeo blocking plyr.io demo site
referrerPolicy: 'no-referrer',
},
});
// Set the current type for next time
currentType = type;
// Expose for tinkering in the console
window.player = player;
render(type);
}
// Setup type toggle
const buttons = document.querySelectorAll('[data-source]');
const types = Object.keys(sources);
const historySupport = Boolean(window.history && window.history.pushState);
let currentType = window.location.hash.substring(1);
const hasInitialType = currentType.length;
// Bind to each button
Array.from(buttons).forEach(button => {
button.addEventListener('click', () => {
const type = button.getAttribute('data-source');
function render(type) {
// Remove active classes
Array.from(buttons).forEach(button => toggleClass(button.parentElement, 'active', false));
setSource(type);
// 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;
if (historySupport) {
window.history.pushState({ type }, '', `#${type}`);
}
// Set a new source
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 (!types.includes(type) || (!init && type === currentType) || (!currentType.length && type === 'video')) {
return;
}
// Set the new source
player.source = sources[type];
// Set the current type for next time
currentType = type;
render(type);
}
// Bind to each button
Array.from(buttons).forEach(button => {
button.addEventListener('click', () => {
const type = button.getAttribute('data-source');
setSource(type);
if (historySupport) {
window.history.pushState({ type }, '', `#${type}`);
}
});
});
// List for backwards/forwards
window.addEventListener('popstate', event => {
if (event.state && Object.keys(event.state).includes('type')) {
setSource(event.state.type);
}
});
// If there's no current type set, assume video
if (!hasInitialType) {
currentType = 'video';
}
// Replace current history state
if (historySupport && types.includes(currentType)) {
window.history.replaceState({ type: currentType }, '', hasInitialType ? `#${currentType}` : '');
}
// If it's not video, load the source
if (currentType !== 'video') {
setSource(currentType, true);
}
render(currentType);
});
});
// List for backwards/forwards
window.addEventListener('popstate', event => {
if (event.state && Object.keys(event.state).includes('type')) {
setSource(event.state.type);
}
});
// If there's no current type set, assume video
if (!hasInitialType) {
currentType = 'video';
}
// Replace current history state
if (historySupport && types.includes(currentType)) {
window.history.replaceState({ type: currentType }, '', hasInitialType ? `#${currentType}` : '');
}
// If it's not video, load the source
if (currentType !== 'video') {
setSource(currentType, true);
}
render(currentType);
});
})();

148
demo/src/js/sources.js
View File

@ -1,78 +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/40648169',
provider: 'vimeo',
},
],
},
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/40648169',
provider: 'vimeo',
},
],
},
};
export default sources;

34
demo/src/js/tab-focus.js
View File

@ -4,28 +4,28 @@ const tabClassName = 'tab-focus';
// Remove class on blur
document.addEventListener('focusout', event => {
if (!event.target.classList || container.contains(event.target)) {
return;
}
if (!event.target.classList || container.contains(event.target)) {
return;
}
event.target.classList.remove(tabClassName);
event.target.classList.remove(tabClassName);
});
// Add classname to tabbed elements
document.addEventListener('keydown', event => {
if (event.keyCode !== 9) {
return;
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;
}
// 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);
focused.classList.add(tabClassName);
}, 10);
});

2
demo/src/js/toggle-class.js
View File

@ -1,5 +1,5 @@
// Toggle class on an element
const toggleClass = (element, className = '', toggle = false) =>
element && element.classList[toggle ? 'add' : 'remove'](className);
element && element.classList[toggle ? 'add' : 'remove'](className);
export default toggleClass;

110
demo/src/sass/components/buttons.scss
View File

@ -5,80 +5,80 @@
// Shared
.button,
.button__count {
align-items: center;
border: 0;
border-radius: $border-radius-base;
box-shadow: 0 1px 1px rgba(#000, 0.1);
display: inline-flex;
padding: ($spacing-base * 0.75);
position: relative;
text-shadow: none;
user-select: none;
vertical-align: middle;
align-items: center;
border: 0;
border-radius: $border-radius-base;
box-shadow: 0 1px 1px rgba(#000, 0.1);
display: inline-flex;
padding: ($spacing-base * 0.75);
position: relative;
text-shadow: none;
user-select: none;
vertical-align: middle;
}
// 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);
transition: all 0.2s ease;
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);
transition: all 0.2s ease;
&:hover,
&:focus {
background: $color-button-background-hover;
&:hover,
&:focus {
background: $color-button-background-hover;
// Remove the underline/border
&::after {
display: none;
}
// Remove the underline/border
&::after {
display: none;
}
}
&:hover {
box-shadow: 0 2px 2px rgba(#000, 0.1);
}
&:hover {
box-shadow: 0 2px 2px rgba(#000, 0.1);
}
&:focus {
outline: 0;
}
&:focus {
outline: 0;
}
&.tab-focus {
@include tab-focus();
}
&.tab-focus {
@include tab-focus();
}
&:active {
top: 1px;
}
&:active {
top: 1px;
}
}
// Button group
.button--with-count {
display: inline-flex;
display: inline-flex;
.button .icon {
flex-shrink: 0;
}
.button .icon {
flex-shrink: 0;
}
}
// 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);
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-count-background;
content: '';
height: 0;
position: absolute;
right: 100%;
top: 50%;
transform: translateY(-50%);
width: 0;
}
&::before {
border: $arrow-size solid transparent;
border-left-width: 0;
border-right-color: $color-button-count-background;
content: '';
height: 0;
position: absolute;
right: 100%;
top: 50%;
transform: translateY(-50%);
width: 0;
}
}

44
demo/src/sass/components/header.scss
View File

@ -3,28 +3,28 @@
// ==========================================================================
header {
padding-bottom: $spacing-base;
text-align: center;
padding-bottom: $spacing-base;
text-align: center;
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;
}
.call-to-action {
margin-top: ($spacing-base * 1.5);
}
@media only screen and (min-width: $screen-md) {
margin-right: ($spacing-base * 3);
max-width: 360px;
padding-bottom: ($spacing-base * 2);
text-align: left;
p:first-of-type {
@include font-size($font-size-base + 1);
}
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;
}
.call-to-action {
margin-top: ($spacing-base * 1.5);
}
@media only screen and (min-width: $screen-md) {
margin-right: ($spacing-base * 3);
max-width: 360px;
padding-bottom: ($spacing-base * 2);
text-align: left;
p:first-of-type {
@include font-size($font-size-base + 1);
}
}
}

12
demo/src/sass/components/icons.scss
View File

@ -4,20 +4,20 @@
// Base size icon styles
.icon {
fill: currentColor;
height: $icon-size;
vertical-align: -3px;
width: $icon-size;
fill: currentColor;
height: $icon-size;
vertical-align: -3px;
width: $icon-size;
}
// Within elements
a svg,
button svg,
label svg {
pointer-events: none;
pointer-events: none;
}
a .icon,
.btn .icon {
margin-right: ($spacing-base / 2);
margin-right: ($spacing-base / 2);
}

64
demo/src/sass/components/links.scss
View File

@ -4,45 +4,45 @@
// Make a <button> look like an <a>
button.faux-link {
@extend a; // stylelint-disable-line
@include cancel-button-styles();
@extend a; // stylelint-disable-line
@include cancel-button-styles();
}
// Links
a {
border-bottom: 1px dotted currentColor;
color: $color-link;
position: relative;
text-decoration: none;
transition: all 0.2s ease;
border-bottom: 1px dotted currentColor;
color: $color-link;
position: relative;
text-decoration: none;
transition: all 0.2s ease;
&::after {
background: currentColor;
content: '';
height: 1px;
left: 50%;
position: absolute;
top: 100%;
transform: translateX(-50%);
transition: width 0.2s ease;
width: 0;
}
&:hover,
&:focus {
border-bottom-color: transparent;
outline: 0;
&::after {
background: currentColor;
content: '';
height: 1px;
left: 50%;
position: absolute;
top: 100%;
transform: translateX(-50%);
transition: width 0.2s ease;
width: 0;
width: 100%;
}
}
&:hover,
&:focus {
border-bottom-color: transparent;
outline: 0;
&.tab-focus {
@include tab-focus();
}
&::after {
width: 100%;
}
}
&.tab-focus {
@include tab-focus();
}
&.no-border::after {
display: none;
}
&.no-border::after {
display: none;
}
}

6
demo/src/sass/components/lists.scss
View File

@ -5,7 +5,7 @@
// Lists
ul,
li {
list-style: none;
margin: 0;
padding: 0;
list-style: none;
margin: 0;
padding: 0;
}

4
demo/src/sass/components/media.scss
View File

@ -5,6 +5,6 @@
img,
video,
audio {
max-width: 100%;
vertical-align: middle;
max-width: 100%;
vertical-align: middle;
}

6
demo/src/sass/components/navigation.scss
View File

@ -3,7 +3,7 @@
// ==========================================================================
nav {
display: flex;
justify-content: center;
margin-bottom: $spacing-base;
display: flex;
justify-content: center;
margin-bottom: $spacing-base;
}

40
demo/src/sass/components/players.scss
View File

@ -4,33 +4,33 @@
// Example players
.plyr {
border-radius: $border-radius-base;
box-shadow: 0 2px 15px rgba(#000, 0.1);
margin: $spacing-base auto;
border-radius: $border-radius-base;
box-shadow: 0 2px 15px rgba(#000, 0.1);
margin: $spacing-base auto;
&.plyr--audio {
max-width: 480px;
}
&.plyr--audio {
max-width: 480px;
}
}
.plyr__video-wrapper::after {
border: 1px solid rgba(#000, 0.15);
border-radius: inherit;
bottom: 0;
content: '';
left: 0;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
z-index: 3;
border: 1px solid rgba(#000, 0.15);
border-radius: inherit;
bottom: 0;
content: '';
left: 0;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
z-index: 3;
}
// Style full supported player
.plyr__cite {
color: $color-gray-500;
color: $color-gray-500;
.icon {
margin-right: ceil($spacing-base / 6);
}
.icon {
margin-right: ceil($spacing-base / 6);
}
}

78
demo/src/sass/layout/core.scss
View File

@ -4,60 +4,60 @@
html,
body {
display: flex;
width: 100%;
display: flex;
width: 100%;
}
html {
background: $page-background;
background-attachment: fixed;
height: 100%;
background: $page-background;
background-attachment: fixed;
height: 100%;
}
body {
align-items: center;
display: flex;
flex-direction: column;
min-height: 100%;
align-items: center;
display: flex;
flex-direction: column;
min-height: 100%;
}
.grid {
flex: 1;
overflow: auto;
flex: 1;
overflow: auto;
}
main {
margin: auto;
padding-bottom: 1px; // Collapsing margins
text-align: center;
margin: auto;
padding-bottom: 1px; // Collapsing margins
text-align: center;
}
aside {
align-items: center;
background: #fff;
display: flex;
flex-shrink: 0;
justify-content: center;
padding: $spacing-base;
position: relative;
text-align: center;
text-shadow: none;
width: 100%;
align-items: center;
background: #fff;
display: flex;
flex-shrink: 0;
justify-content: center;
padding: $spacing-base;
position: relative;
text-align: center;
text-shadow: none;
width: 100%;
.icon {
fill: $color-twitter;
margin-right: ($spacing-base / 2);
}
p {
margin: 0;
}
a {
color: $color-twitter;
&.tab-focus {
@include tab-focus($color-twitter);
}
.icon {
fill: $color-twitter;
margin-right: ($spacing-base / 2);
}
p {
margin: 0;
}
a {
color: $color-twitter;
&.tab-focus {
@include tab-focus($color-twitter);
}
}
}

24
demo/src/sass/layout/error.scss
View File

@ -5,26 +5,26 @@
// Error page
html.error,
.error body {
height: 100%;
height: 100%;
}
html.error {
background: $page-background;
background-attachment: fixed;
background: $page-background;
background-attachment: fixed;
}
.error body {
align-items: center;
display: flex;
width: 100%;
align-items: center;
display: flex;
width: 100%;
}
.error main {
padding: $spacing-base;
text-align: center;
width: 100%;
padding: $spacing-base;
text-align: center;
width: 100%;
p {
@include font-size($font-size-large);
}
p {
@include font-size($font-size-large);
}
}

20
demo/src/sass/layout/grid.scss
View File

@ -3,17 +3,17 @@
// ==========================================================================
.grid {
margin: 0 auto;
padding: $spacing-base;
margin: 0 auto;
padding: $spacing-base;
@media only screen and (min-width: $screen-md) {
align-items: center;
display: flex;
max-width: $container-max-width;
width: 100%;
@media only screen and (min-width: $screen-md) {
align-items: center;
display: flex;
max-width: $container-max-width;
width: 100%;
> * {
flex: 1;
}
> * {
flex: 1;
}
}
}

34
demo/src/sass/lib/animation.scss
View File

@ -4,24 +4,24 @@
// Fade
@keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes shrinkHide {
0% {
opacity: 0.5;
width: 38px;
}
20% {
width: 45px;
}
100% {
opacity: 0;
width: 0;
}
0% {
opacity: 0.5;
width: 38px;
}
20% {
width: 45px;
}
100% {
opacity: 0;
width: 0;
}
}

60
demo/src/sass/lib/fontface.scss
View File

@ -3,46 +3,46 @@
// ==========================================================================
@font-face {
font-display: swap;
font-family: 'Gordita';
font-style: normal;
font-weight: $font-weight-light;
src: url('https://cdn.plyr.io/static/fonts/gordita-light.woff2') format('woff2'),
url('https://cdn.plyr.io/static/fonts/gordita-light.woff') format('woff');
font-display: swap;
font-family: 'Gordita';
font-style: normal;
font-weight: $font-weight-light;
src: url('https://cdn.plyr.io/static/fonts/gordita-light.woff2') format('woff2'),
url('https://cdn.plyr.io/static/fonts/gordita-light.woff') format('woff');
}
@font-face {
font-display: swap;
font-family: 'Gordita';
font-style: normal;
font-weight: $font-weight-regular;
src: url('https://cdn.plyr.io/static/fonts/gordita-regular.woff2') format('woff2'),
url('https://cdn.plyr.io/static/fonts/gordita-regular.woff') format('woff');
font-display: swap;
font-family: 'Gordita';
font-style: normal;
font-weight: $font-weight-regular;
src: url('https://cdn.plyr.io/static/fonts/gordita-regular.woff2') format('woff2'),
url('https://cdn.plyr.io/static/fonts/gordita-regular.woff') format('woff');
}
@font-face {
font-display: swap;
font-family: 'Gordita';
font-style: normal;
font-weight: $font-weight-medium;
src: url('https://cdn.plyr.io/static/fonts/gordita-medium.woff2') format('woff2'),
url('https://cdn.plyr.io/static/fonts/gordita-medium.woff') format('woff');
font-display: swap;
font-family: 'Gordita';
font-style: normal;
font-weight: $font-weight-medium;
src: url('https://cdn.plyr.io/static/fonts/gordita-medium.woff2') format('woff2'),
url('https://cdn.plyr.io/static/fonts/gordita-medium.woff') format('woff');
}
@font-face {
font-display: swap;
font-family: 'Gordita';
font-style: normal;
font-weight: $font-weight-bold;
src: url('https://cdn.plyr.io/static/fonts/gordita-bold.woff2') format('woff2'),
url('https://cdn.plyr.io/static/fonts/gordita-bold.woff') format('woff');
font-display: swap;
font-family: 'Gordita';
font-style: normal;
font-weight: $font-weight-bold;
src: url('https://cdn.plyr.io/static/fonts/gordita-bold.woff2') format('woff2'),
url('https://cdn.plyr.io/static/fonts/gordita-bold.woff') format('woff');
}
@font-face {
font-display: swap;
font-family: 'Gordita';
font-style: normal;
font-weight: $font-weight-black;
src: url('https://cdn.plyr.io/static/fonts/gordita-black.woff2') format('woff2'),
url('https://cdn.plyr.io/static/fonts/gordita-black.woff') format('woff');
font-display: swap;
font-family: 'Gordita';
font-style: normal;
font-weight: $font-weight-black;
src: url('https://cdn.plyr.io/static/fonts/gordita-black.woff2') format('woff2'),
url('https://cdn.plyr.io/static/fonts/gordita-black.woff') format('woff');
}

54
demo/src/sass/lib/mixins.scss
View File

@ -5,50 +5,50 @@
// Convert a <button> into an <a>
// ---------------------------------------
@mixin cancel-button-styles() {
background: transparent;
border: 0;
border-radius: 0;
cursor: pointer;
font: inherit;
line-height: $line-height-base;
margin: 0;
padding: 0;
position: relative;
text-align: inherit;
text-shadow: inherit;
-moz-user-select: text; // stylelint-disable-line
vertical-align: baseline;
width: auto;
background: transparent;
border: 0;
border-radius: 0;
cursor: pointer;
font: inherit;
line-height: $line-height-base;
margin: 0;
padding: 0;
position: relative;
text-align: inherit;
text-shadow: inherit;
-moz-user-select: text; // stylelint-disable-line
vertical-align: baseline;
width: auto;
}
// Nicer focus styles
// ---------------------------------------
@mixin tab-focus($color: $tab-focus-default-color) {
box-shadow: 0 0 0 3px rgba($color, 0.35);
outline: 0;
box-shadow: 0 0 0 3px rgba($color, 0.35);
outline: 0;
}
// Use rems for font sizing
// Leave <body> at 100%/16px
// ---------------------------------------
@function calculate-rem($size) {
$rem: $size / 16;
@return #{$rem}rem;
$rem: $size / 16;
@return #{$rem}rem;
}
@mixin font-size($size: $font-size-base) {
font-size: $size * 1px; // Fallback in px
font-size: calculate-rem($size);
font-size: $size * 1px; // Fallback in px
font-size: calculate-rem($size);
}
// Font smoothing
// ---------------------------------------
@mixin font-smoothing($enabled: true) {
@if $enabled {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
} @else {
-moz-osx-font-smoothing: auto;
-webkit-font-smoothing: subpixel-antialiased;
}
@if $enabled {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
} @else {
-moz-osx-font-smoothing: auto;
-webkit-font-smoothing: subpixel-antialiased;
}
}

148
demo/src/sass/lib/normalize.scss vendored
View File

@ -10,9 +10,9 @@
*/
html {
line-height: 1.15; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
line-height: 1.15; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
@ -23,7 +23,7 @@ html {
*/
body {
margin: 0;
margin: 0;
}
/**
@ -36,7 +36,7 @@ footer,
header,
nav,
section {
display: block;
display: block;
}
/**
@ -45,8 +45,8 @@ section {
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
@ -60,8 +60,8 @@ h1 {
figcaption,
figure,
main {
/* 1 */
display: block;
/* 1 */
display: block;
}
/**
@ -69,7 +69,7 @@ main {
*/
figure {
margin: 1em 40px;
margin: 1em 40px;
}
/**
@ -78,9 +78,9 @@ figure {
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
@ -89,8 +89,8 @@ hr {
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
@ -102,8 +102,8 @@ pre {
*/
a {
background-color: transparent; /* 1 */
-webkit-text-decoration-skip: objects; /* 2 */
background-color: transparent; /* 1 */
-webkit-text-decoration-skip: objects; /* 2 */
}
/**
@ -112,9 +112,9 @@ a {
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
@ -123,7 +123,7 @@ abbr[title] {
b,
strong {
font-weight: inherit;
font-weight: inherit;
}
/**
@ -132,7 +132,7 @@ strong {
b,
strong {
font-weight: bolder;
font-weight: bolder;
}
/**
@ -143,8 +143,8 @@ strong {
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
@ -152,7 +152,7 @@ samp {
*/
dfn {
font-style: italic;
font-style: italic;
}
/**
@ -160,8 +160,8 @@ dfn {
*/
mark {
background-color: #ff0;
color: #000;
background-color: #ff0;
color: #000;
}
/**
@ -169,7 +169,7 @@ mark {
*/
small {
font-size: 80%;
font-size: 80%;
}
/**
@ -179,18 +179,18 @@ small {
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
bottom: -0.25em;
}
sup {
top: -0.5em;
top: -0.5em;
}
/* Embedded content
@ -202,7 +202,7 @@ sup {
audio,
video {
display: inline-block;
display: inline-block;
}
/**
@ -210,8 +210,8 @@ video {
*/
audio:not([controls]) {
display: none;
height: 0;
display: none;
height: 0;
}
/**
@ -219,7 +219,7 @@ audio:not([controls]) {
*/
img {
border-style: none;
border-style: none;
}
/**
@ -227,7 +227,7 @@ img {
*/
svg:not(:root) {
overflow: hidden;
overflow: hidden;
}
/* Forms
@ -243,10 +243,10 @@ input,
optgroup,
select,
textarea {
font-family: sans-serif; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
font-family: sans-serif; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
@ -256,8 +256,8 @@ textarea {
button,
input {
/* 1 */
overflow: visible;
/* 1 */
overflow: visible;
}
/**
@ -267,8 +267,8 @@ input {
button,
select {
/* 1 */
text-transform: none;
/* 1 */
text-transform: none;
}
/**
@ -281,7 +281,7 @@ button,
html [type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button; /* 2 */
-webkit-appearance: button; /* 2 */
}
/**
@ -292,8 +292,8 @@ button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
border-style: none;
padding: 0;
}
/**
@ -304,7 +304,7 @@ button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
outline: 1px dotted ButtonText;
outline: 1px dotted ButtonText;
}
/**
@ -312,7 +312,7 @@ button:-moz-focusring,
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
padding: 0.35em 0.75em 0.625em;
}
/**
@ -323,12 +323,12 @@ fieldset {
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
@ -337,8 +337,8 @@ legend {
*/
progress {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
@ -346,7 +346,7 @@ progress {
*/
textarea {
overflow: auto;
overflow: auto;
}
/**
@ -356,8 +356,8 @@ textarea {
[type='checkbox'],
[type='radio'] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
@ -366,7 +366,7 @@ textarea {
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
height: auto;
height: auto;
}
/**
@ -375,8 +375,8 @@ textarea {
*/
[type='search'] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
@ -385,7 +385,7 @@ textarea {
[type='search']::-webkit-search-cancel-button,
[type='search']::-webkit-search-decoration {
-webkit-appearance: none;
-webkit-appearance: none;
}
/**
@ -394,8 +394,8 @@ textarea {
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
@ -408,7 +408,7 @@ textarea {
details,
menu {
display: block;
display: block;
}
/*
@ -416,7 +416,7 @@ menu {
*/
summary {
display: list-item;
display: list-item;
}
/* Scripting
@ -427,7 +427,7 @@ summary {
*/
canvas {
display: inline-block;
display: inline-block;
}
/**
@ -435,7 +435,7 @@ canvas {
*/
template {
display: none;
display: none;
}
/* Hidden
@ -446,5 +446,5 @@ template {
*/
[hidden] {
display: none;
display: none;
}

2
demo/src/sass/lib/reset.scss
View File

@ -7,5 +7,5 @@
*,
*::after,
*::before {
box-sizing: border-box;
box-sizing: border-box;
}

11
demo/src/sass/settings/plyr.scss
View File

@ -2,16 +2,17 @@
// Plyr Settings
// ==========================================================================
// Font
$plyr-font-family: inherit;
// Sizes
// Font sizes
$plyr-font-size-base: 13px;
$plyr-font-size-small: 12px;
$plyr-font-size-time: 11px;
$plyr-font-size-badges: 9px;
// Other
// Font weight
$plyr-font-weight-regular: 500;
$plyr-font-weight-bold: 600;
// Font smoothing
$plyr-font-smoothing: true;
// Colors

2
demo/src/sass/settings/type.scss
View File

@ -3,7 +3,7 @@
// ==========================================================================
$font-sans-serif: 'Gordita', 'Avenir', 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol';
'Segoe UI Symbol';
$font-size-base: 15;
$font-size-small: 13;

22
demo/src/sass/type/base.scss
View File

@ -4,31 +4,31 @@
// Set to 100% for rem sizing
html {
font-size: 100%;
font-size: 100%;
}
body {
@include font-smoothing();
@include font-size($font-size-base);
color: $color-text;
font-family: $font-sans-serif;
font-weight: $font-weight-medium;
line-height: $line-height-base;
@include font-smoothing();
@include font-size($font-size-base);
color: $color-text;
font-family: $font-sans-serif;
font-weight: $font-weight-medium;
line-height: $line-height-base;
}
button,
input,
select,
textarea {
font: inherit;
font: inherit;
}
p,
small {
margin: 0 0 ($spacing-base * 1.5);
margin: 0 0 ($spacing-base * 1.5);
}
small {
@include font-size($font-size-small);
display: block;
@include font-size($font-size-small);
display: block;
}

12
demo/src/sass/type/headings.scss
View File

@ -3,10 +3,10 @@
// ==========================================================================
h1 {
@include font-size($font-size-h1);
color: $color-headings;
font-weight: $font-weight-bold;
letter-spacing: $letter-spacing-headings;
line-height: 1.2;
margin: 0 0 ($spacing-base * 1.5);
@include font-size($font-size-h1);
color: $color-headings;
font-weight: $font-weight-bold;
letter-spacing: $letter-spacing-headings;
line-height: 1.2;
margin: 0 0 ($spacing-base * 1.5);
}

2
demo/src/sass/utilities/cosmetic.scss
View File

@ -3,5 +3,5 @@
// ==========================================================================
.no-border {
border: 0;
border: 0;
}

20
demo/src/sass/utilities/hidden.scss
View File

@ -3,18 +3,18 @@
// ==========================================================================
[hidden] {
display: none;
display: none;
}
// Hide only visually, but have it available for screen readers: h5bp.com/v
.sr-only {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
opacity: 0.001;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
opacity: 0.001;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}