Controls cleanup, work on captions bug, click to invert time

This commit is contained in:
Sam Potts
2017-11-18 19:30:26 +11:00
parent d7a1c44281
commit 6984d6fb16
32 changed files with 360 additions and 254 deletions

View File

@ -65,6 +65,9 @@ document.addEventListener('DOMContentLoaded', () => {
'pip',
'airplay',
],
keys: {
google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c',
},
});
// Expose for testing
@ -102,24 +105,24 @@ document.addEventListener('DOMContentLoaded', () => {
title: 'View From A Blue Moon',
sources: [
{
src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4',
src: 'media/View_From_A_Blue_Moon_Trailer-HD.mp4',
type: 'video/mp4',
},
],
poster: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg',
poster: 'hmedia/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',
src: 'media/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',
src: 'media/View_From_A_Blue_Moon_Trailer-HD.fr.vtt',
},
],
};

View File

@ -10,7 +10,7 @@ video {
// Example players
.plyr {
margin: 0 auto;
margin: @spacing-base auto;
border-radius: @border-radius-base;
box-shadow: 0 2px 5px fade(#000, 20%);
}

View File

@ -27,15 +27,18 @@ body {
flex-direction: column;
}
.grid {
flex: 1;
overflow: auto;
}
main {
margin: auto;
text-align: center;
}
.grid {
flex: 1;
}
aside {
position: relative;
display: flex;
flex-shrink: 0;
align-items: center;

View File

@ -4,7 +4,7 @@
@font-face {
font-family: 'Avenir';
src: url('https://cdn.plyr.io/static/fonts/avenir-medium.woff2') format('woff2'),
src: local('Avenir-Medium'), url('https://cdn.plyr.io/static/fonts/avenir-medium.woff2') format('woff2'),
url('https://cdn.plyr.io/static/fonts/avenir-medium.woff') format('woff');
font-style: normal;
font-weight: @font-weight-base;
@ -13,7 +13,7 @@
@font-face {
font-family: 'Avenir';
src: url('https://cdn.plyr.io/static/fonts/avenir-bold.woff2') format('woff2'),
src: local('Avenir-Heavy'), url('https://cdn.plyr.io/static/fonts/avenir-bold.woff2') format('woff2'),
url('https://cdn.plyr.io/static/fonts/avenir-bold.woff') format('woff');
font-style: normal;
font-weight: @font-weight-bold;
@ -22,7 +22,7 @@
@font-face {
font-family: 'Avenir';
src: url('https://cdn.plyr.io/static/fonts/avenir-black.woff2?v=3') format('woff2'),
src: local('Avenir-Black'), url('https://cdn.plyr.io/static/fonts/avenir-black.woff2?v=3') format('woff2'),
url('https://cdn.plyr.io/static/fonts/avenir-black.woff?v=3') format('woff');
font-style: normal;
font-weight: @font-weight-heavy;

View File

@ -33,6 +33,7 @@
// ---------------------------------------
.font-size(@font-size: 16) {
@rem: round((@font-size / 16), 3);
font-size: (@font-size * 1px);
font-size: ~'@{rem}rem';
}