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

Fixing Vimeo captions, WIP on settings menu, prettier and VS code settings

Browse Source
This commit is contained in:
Sam Potts 2017-09-03 14:36:55 +10:00
parent 2196665495
commit 2bba1f30e2
12 changed files with 976 additions and 605 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.eslintrc.json
View File

@ -14,6 +14,7 @@
"SwitchCase": 1 "SwitchCase": 1
}], }],
"quotes": ["error", "single"], "quotes": ["error", "single"],
"semi": ["error", "always"] "semi": ["error", "always"],
"eqeqeq": ["error", "always"]
} }
} }

32
.jsbeautifyrc
View File

@ -1,32 +0,0 @@
{
"html": {
"allowed_file_extensions": []
},
"css": {
"allowed_file_extensions": []
},
"js": {
"allowed_file_extensions": ["js", "json", "jsbeautifyrc"],
"brace_style": "collapse",
"break_chained_methods": false,
"e4x": false,
"end_with_newline": false,
"indent_char": " ",
"indent_level": 0,
"indent_size": 4,
"indent_with_tabs": false,
"jslint_happy": false,
"keep_array_indentation": true,
"keep_function_indentation": true,
"max_preserve_newlines": 2,
"preserve_newlines": true,
"space_after_anon_function": false,
"space_before_conditional": true,
"space_in_empty_paren": false,
"space_in_paren": false,
"unescape_strings": false,
"wrap_line_length": 0,
"wrap_attributes": "auto",
"wrap_attributes_indent_size": 4
}
}

25
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,25 @@
{
// Exclude from the editor
"files.exclude": {
"**/node_modules": true
},
// Exclude from search
"search.exclude": {
"dist/": true
},
// Formatting
"editor.tabSize": 4,
"editor.insertSpaces": true,
"editor.formatOnSave": true,
// Trim on save
"files.trimTrailingWhitespace": true,
// Prettier settings
"prettier.tabWidth": 4,
"prettier.eslintIntegration": true,
"prettier.printWidth": 120,
"prettier.cssEnable": ["css", "less", "scss"]
}

2
demo/dist/demo.css vendored
View File

File diff suppressed because one or more lines are too long

2
demo/dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

101
demo/src/js/main.js
View File

@ -52,7 +52,7 @@
vimeo: 'vimeo' vimeo: 'vimeo'
}; };
var currentType = window.location.hash.replace('#', ''); var currentType = window.location.hash.replace('#', '');
var historySupport = (window.history && window.history.pushState); var historySupport = window.history && window.history.pushState;
// Bind to each button // Bind to each button
[].forEach.call(buttons, function(button) { [].forEach.call(buttons, function(button) {
@ -62,9 +62,13 @@
newSource(type); newSource(type);
if (historySupport) { if (historySupport) {
history.pushState({ history.pushState(
'type': type {
}, '', '#' + type); type: type
},
'',
'#' + type
);
} }
}); });
}); });
@ -87,9 +91,13 @@
// Replace current history state // Replace current history state
if (currentType in types) { if (currentType in types) {
history.replaceState({ history.replaceState(
'type': currentType {
}, '', (video ? '' : '#' + currentType)); type: currentType
},
'',
video ? '' : '#' + currentType
);
} }
// If it's not video, load the source // If it's not video, load the source
@ -122,18 +130,28 @@
player.source({ player.source({
type: 'video', type: 'video',
title: 'View From A Blue Moon', title: 'View From A Blue Moon',
sources: [{ sources: [
src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4', {
type: 'video/mp4' src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4',
}], type: 'video/mp4'
}
],
poster: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg', poster: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg',
tracks: [{ tracks: [
kind: 'captions', {
label: 'English', kind: 'captions',
srclang: 'en', label: 'English',
src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt', srclang: 'en',
default: true src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
}] default: true
},
{
kind: 'captions',
label: 'French',
srclang: 'fr',
src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.fr.vtt'
}
]
}); });
break; break;
@ -141,13 +159,16 @@
player.source({ player.source({
type: 'audio', type: 'audio',
title: 'Kishi Bashi – “It All Began With A Burst”', title: 'Kishi Bashi – “It All Began With A Burst”',
sources: [{ sources: [
src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3', {
type: 'audio/mp3' src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3',
}, { type: 'audio/mp3'
src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg', },
type: 'audio/ogg' {
}] src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',
type: 'audio/ogg'
}
]
}); });
break; break;
@ -155,10 +176,12 @@
player.source({ player.source({
type: 'video', type: 'video',
title: 'View From A Blue Moon', title: 'View From A Blue Moon',
sources: [{ sources: [
src: 'https://www.youtube.com/watch?v=bTqVqk7FSmY', {
type: 'youtube' src: 'https://www.youtube.com/watch?v=bTqVqk7FSmY',
}] type: 'youtube'
}
]
}); });
break; break;
@ -166,10 +189,12 @@
player.source({ player.source({
type: 'video', type: 'video',
title: 'View From A Blue Moon', title: 'View From A Blue Moon',
sources: [{ sources: [
src: 'https://vimeo.com/76979871', {
type: 'vimeo' src: 'https://vimeo.com/76979871',
}] type: 'vimeo'
}
]
}); });
break; break;
} }
@ -198,9 +223,11 @@
if (window.location.host === 'plyr.io') { if (window.location.host === 'plyr.io') {
(function(i, s, o, g, r, a, m) { (function(i, s, o, g, r, a, m) {
i.GoogleAnalyticsObject = r; i.GoogleAnalyticsObject = r;
i[r] = i[r] || function() { i[r] =
(i[r].q = i[r].q || []).push(arguments); i[r] ||
}; function() {
(i[r].q = i[r].q || []).push(arguments);
};
i[r].l = 1 * new Date(); i[r].l = 1 * new Date();
a = s.createElement(o); a = s.createElement(o);
m = s.getElementsByTagName(o)[0]; m = s.getElementsByTagName(o)[0];
@ -210,4 +237,4 @@ if (window.location.host === 'plyr.io') {
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
window.ga('create', 'UA-40881672-11', 'auto'); window.ga('create', 'UA-40881672-11', 'auto');
window.ga('send', 'pageview'); window.ga('send', 'pageview');
} }

2
dist/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

4
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

100
package.json
View File

@ -1,51 +1,51 @@
{ {
"name": "plyr", "name": "plyr",
"version": "2.0.13", "version": "2.0.13",
"description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player", "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
"homepage": "http://plyr.io", "homepage": "http://plyr.io",
"main": "src/js/plyr.js", "main": "src/js/plyr.js",
"dependencies": {}, "dependencies": {},
"devDependencies": { "devDependencies": {
"gulp": "^3.9.1", "gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1", "gulp-autoprefixer": "^4.0.0",
"gulp-clean-css": "^2.0.12", "gulp-clean-css": "^3.7.0",
"gulp-concat": "^2.3.3", "gulp-concat": "^2.3.3",
"gulp-less": "^3.0.5", "gulp-less": "^3.3.2",
"gulp-open": "^2.0.0", "gulp-open": "^2.0.0",
"gulp-rename": "^1.2.0", "gulp-rename": "^1.2.0",
"gulp-replace": "^0.5.3", "gulp-replace": "^0.6.1",
"gulp-s3": "^0.3.0", "gulp-s3": "^0.11.0",
"gulp-sass": "^2.3.2", "gulp-sass": "^3.1.0",
"gulp-size": "^2.1.0", "gulp-size": "^2.1.0",
"gulp-svgmin": "^1.2.2", "gulp-svgmin": "^1.2.4",
"gulp-svgstore": "^6.0.0", "gulp-svgstore": "^6.0.0",
"gulp-uglify": "^2.0.0", "gulp-uglify": "^3.0.0",
"gulp-util": "^3.0.7", "gulp-util": "^3.0.7",
"run-sequence": "^1.2.2", "run-sequence": "^1.2.2",
"through2": "^2.0.1" "through2": "^2.0.1"
}, },
"keywords": [ "keywords": [
"HTML5 Video", "HTML5 Video",
"HTML5 Audio", "HTML5 Audio",
"Media Player", "Media Player",
"DASH", "DASH",
"Shaka", "Shaka",
"WordPress", "WordPress",
"HLS" "HLS"
], ],
"repository": { "repository": {
"type": "git", "type": "git",
"url": "git://github.com/sampotts/plyr.git" "url": "git://github.com/sampotts/plyr.git"
}, },
"license": "MIT", "license": "MIT",
"bugs": { "bugs": {
"url": "https://github.com/sampotts/plyr/issues" "url": "https://github.com/sampotts/plyr/issues"
}, },
"directories": { "directories": {
"doc": "readme.md" "doc": "readme.md"
}, },
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1"
}, },
"author": "Sam Potts <sam@potts.es>" "author": "Sam Potts <sam@potts.es>"
} }

1154
src/js/plyr.js
View File

File diff suppressed because it is too large Load Diff

45
src/less/plyr.less
View File

@ -9,7 +9,9 @@
// Animation // Animation
// --------------------------------------- // ---------------------------------------
@keyframes plyr-progress { @keyframes plyr-progress {
to { background-position: @plyr-progress-loading-size 0; } to {
background-position: @plyr-progress-loading-size 0;
}
} }
@keyframes plyr-popup { @keyframes plyr-popup {
from { from {
@ -46,7 +48,10 @@
& when (@plyr-touch-action = true) { & when (@plyr-touch-action = true) {
// Fix 300ms delay // Fix 300ms delay
a, button, input, label { a,
button,
input,
label {
touch-action: manipulation; touch-action: manipulation;
} }
} }
@ -232,19 +237,20 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 100%; width: 100%;
padding: (@plyr-control-spacing * 2); padding: @plyr-control-spacing;
transform: translateY(-(@plyr-control-spacing * 4)); transform: translateY(-(@plyr-control-spacing * 4));
transition: transform .3s ease; transition: transform .3s ease;
color: @plyr-captions-color; color: @plyr-captions-color;
font-size: @plyr-font-size-captions-base; font-size: @plyr-font-size-captions-small;
text-align: center; text-align: center;
span { span {
border-radius: 2px; border-radius: 2px;
padding: floor(@plyr-control-spacing / 3) @plyr-control-spacing; padding: .2em .5em;
background: @plyr-captions-bg; background: @plyr-captions-bg;
box-decoration-break: clone; box-decoration-break: clone;
line-height: 150%; line-height: 170%;
white-space: pre-wrap;
// Firefox adds a <div> when using getCueAsHTML() // Firefox adds a <div> when using getCueAsHTML()
div { div {
@ -255,6 +261,10 @@
display: none; display: none;
} }
@media (min-width: @plyr-bp-screen-sm) {
padding: (@plyr-control-spacing * 2);
font-size: @plyr-font-size-captions-base;
}
@media (min-width: @plyr-bp-screen-md) { @media (min-width: @plyr-bp-screen-md) {
font-size: @plyr-font-size-captions-medium; font-size: @plyr-font-size-captions-medium;
} }
@ -335,9 +345,7 @@
background: transparent; background: transparent;
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
transition: background .3s ease, transition: background .3s ease, color .3s ease, opacity .3s ease;
color .3s ease,
opacity .3s ease;
color: inherit; color: inherit;
svg { svg {
@ -346,7 +354,9 @@
display: block; display: block;
fill: currentColor; fill: currentColor;
pointer-events: none; pointer-events: none;
filter: drop-shadow(0 1px 1px fade(#000, 15%));
} }
// Hide toggle icons by default // Hide toggle icons by default
.icon--exit-fullscreen, .icon--exit-fullscreen,
.icon--muted, .icon--muted,
@ -367,8 +377,8 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
z-index: 2; z-index: 2;
padding: (@plyr-control-spacing * 5) @plyr-control-spacing @plyr-control-spacing; padding: (@plyr-control-spacing * 3.5) @plyr-control-spacing @plyr-control-spacing;
background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 70%)); background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 85%));
border-bottom-left-radius: inherit; border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit; border-bottom-right-radius: inherit;
color: @plyr-video-control-color; color: @plyr-video-control-color;
@ -521,8 +531,7 @@
> div { > div {
overflow: hidden; overflow: hidden;
transition: height .35s cubic-bezier(.4, 0, .2, 1), transition: height .35s cubic-bezier(.4, 0, .2, 1), width .35s cubic-bezier(.4, 0, .2, 1);
width .35s cubic-bezier(.4, 0, .2, 1);
} }
// Arrow // Arrow
@ -719,7 +728,6 @@
} }
} }
// Playback progress // Playback progress
// -------------------------------------------------------------- // --------------------------------------------------------------
// <progress> element // <progress> element
@ -763,7 +771,7 @@
margin: -(@plyr-range-track-height / 2) 0 0; margin: -(@plyr-range-track-height / 2) 0 0;
padding: 0; padding: 0;
vertical-align: top; vertical-align: top;
border: none; border: none;
border-radius: 100px; border-radius: 100px;
@ -830,6 +838,7 @@
.plyr--video .plyr__progress--buffer, .plyr--video .plyr__progress--buffer,
.plyr--video .plyr__volume--display { .plyr--video .plyr__volume--display {
background: @plyr-video-range-track-bg; background: @plyr-video-range-track-bg;
box-shadow: 0 1px 1px fade(#000, 15%);
} }
.plyr--video .plyr__progress--buffer { .plyr--video .plyr__progress--buffer {
color: @plyr-video-progress-buffered-bg; color: @plyr-video-progress-buffered-bg;
@ -855,7 +864,8 @@
@plyr-progress-loading-bg 50%, @plyr-progress-loading-bg 50%,
@plyr-progress-loading-bg 75%, @plyr-progress-loading-bg 75%,
transparent 75%, transparent 75%,
transparent); transparent
);
color: transparent; color: transparent;
} }
.plyr--video.plyr--loading .plyr__progress--buffer { .plyr--video.plyr--loading .plyr__progress--buffer {
@ -886,6 +896,9 @@
margin-right: @plyr-control-spacing; margin-right: @plyr-control-spacing;
} }
} }
.plyr--video .plyr__time {
text-shadow: 0 1px 1px fade(#000, 15%);
}
// Volume // Volume
// -------------------------------------------------------------- // --------------------------------------------------------------

111
src/less/variables.less
View File

@ -4,76 +4,77 @@
// ========================================================================== // ==========================================================================
// Settings // Settings
@plyr-border-box: true; @plyr-border-box: true;
@plyr-touch-action: true; @plyr-touch-action: true;
@plyr-sr-only-important: true; @plyr-sr-only-important: true;
// Colors // Colors
@plyr-color-main: #1aafff; @plyr-color-main: #1aafff;
// Font // Font
@plyr-font-family: inherit; //Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif; @plyr-font-family: inherit; //Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
@plyr-font-size-small: 14px; @plyr-font-size-small: 14px;
@plyr-font-size-base: 16px; @plyr-font-size-base: 16px;
@plyr-font-weight-normal: 500; @plyr-font-weight-normal: 500;
@plyr-font-weight-bold: 600; @plyr-font-weight-bold: 600;
// Captions // Captions
@plyr-captions-bg: fade(#343f4a, 80%); @plyr-captions-bg: fade(#343f4a, 80%);
@plyr-captions-color: #fff; @plyr-captions-color: #fff;
@plyr-font-size-captions-base: @plyr-font-size-base; @plyr-font-size-captions-base: @plyr-font-size-base;
@plyr-font-size-captions-medium: ceil(@plyr-font-size-base * 1.5); @plyr-font-size-captions-small: @plyr-font-size-small;
@plyr-font-size-captions-large: (@plyr-font-size-base * 2); @plyr-font-size-captions-medium: ceil(@plyr-font-size-base * 1.25);
@plyr-font-size-captions-large: (@plyr-font-size-base * 1.5);
// Controls // Controls
@plyr-control-icon-size: 18px; @plyr-control-icon-size: 18px;
@plyr-control-spacing: 10px; @plyr-control-spacing: 10px;
@plyr-control-padding: (@plyr-control-spacing * .7); @plyr-control-padding: (@plyr-control-spacing * .7);
@plyr-video-controls-bg: #343f4a; @plyr-video-controls-bg: #343f4a;
@plyr-video-control-color: #fff; @plyr-video-control-color: #fff;
@plyr-video-control-color-hover: #fff; @plyr-video-control-color-hover: #fff;
@plyr-video-control-bg-hover: @plyr-color-main; @plyr-video-control-bg-hover: @plyr-color-main;
@plyr-audio-controls-bg: #fff; @plyr-audio-controls-bg: #fff;
@plyr-audio-controls-border: 1px solid #dbe3e8; @plyr-audio-controls-border: 1px solid #dbe3e8;
@plyr-audio-control-color: #565d64; @plyr-audio-control-color: #565d64;
@plyr-audio-control-color-hover: #fff; @plyr-audio-control-color-hover: #fff;
@plyr-audio-control-bg-hover: @plyr-color-main; @plyr-audio-control-bg-hover: @plyr-color-main;
// Tooltips // Tooltips
@plyr-tooltip-bg: fade(#343f4a, 90%); @plyr-tooltip-bg: fade(#343f4a, 90%);
@plyr-tooltip-color: #fff; @plyr-tooltip-color: #fff;
@plyr-tooltip-padding: (@plyr-control-spacing / 2); @plyr-tooltip-padding: (@plyr-control-spacing / 2);
@plyr-tooltip-arrow-size: 4px; @plyr-tooltip-arrow-size: 4px;
@plyr-tooltip-radius: 3px; @plyr-tooltip-radius: 3px;
// Menus // Menus
@plyr-menu-bg: @plyr-tooltip-bg; @plyr-menu-bg: @plyr-tooltip-bg;
@plyr-menu-color: @plyr-tooltip-color; @plyr-menu-color: @plyr-tooltip-color;
@plyr-menu-arrow-size: 6px; @plyr-menu-arrow-size: 6px;
// Progress // Progress
@plyr-progress-loading-size: 25px; @plyr-progress-loading-size: 25px;
@plyr-progress-loading-bg: fade(#343f4a, 20%); @plyr-progress-loading-bg: fade(#343f4a, 20%);
@plyr-video-progress-bg: fade(#fff, 25%); @plyr-video-progress-bg: fade(#fff, 25%);
@plyr-video-progress-buffered-bg: @plyr-video-progress-bg; @plyr-video-progress-buffered-bg: @plyr-video-progress-bg;
@plyr-audio-progress-bg: fade(#c6d6db, 66%); @plyr-audio-progress-bg: fade(#c6d6db, 66%);
@plyr-audio-progress-buffered-bg: @plyr-audio-progress-bg; @plyr-audio-progress-buffered-bg: @plyr-audio-progress-bg;
// Range sliders // Range sliders
@plyr-range-track-height: 8px; @plyr-range-track-height: 8px;
@plyr-range-thumb-height: floor(@plyr-range-track-height * 2); @plyr-range-thumb-height: floor(@plyr-range-track-height * 2);
@plyr-range-thumb-width: floor(@plyr-range-track-height * 2); @plyr-range-thumb-width: floor(@plyr-range-track-height * 2);
@plyr-range-thumb-bg: #fff; @plyr-range-thumb-bg: #fff;
@plyr-range-thumb-border: 2px solid transparent; @plyr-range-thumb-border: 2px solid transparent;
@plyr-range-thumb-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%), 0 0 0 1px fade(#343f4a, 20%); @plyr-range-thumb-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%), 0 0 0 1px fade(#343f4a, 20%);
@plyr-range-thumb-active-border-color: #fff; @plyr-range-thumb-active-border-color: #fff;
@plyr-range-thumb-active-bg: @plyr-video-control-bg-hover; @plyr-range-thumb-active-bg: @plyr-video-control-bg-hover;
@plyr-range-thumb-active-scale: 1.25; @plyr-range-thumb-active-scale: 1.25;
@plyr-video-range-track-bg: @plyr-video-progress-buffered-bg; @plyr-video-range-track-bg: @plyr-video-progress-buffered-bg;
@plyr-audio-range-track-bg: @plyr-audio-progress-buffered-bg; @plyr-audio-range-track-bg: @plyr-audio-progress-buffered-bg;
@plyr-range-selected-bg: @plyr-color-main; @plyr-range-selected-bg: @plyr-color-main;
// Breakpoints // Breakpoints
@plyr-bp-screen-sm: 480px; @plyr-bp-screen-sm: 480px;
@plyr-bp-screen-md: 768px; @plyr-bp-screen-md: 768px;
@plyr-bp-screen-lg: 1024px; @plyr-bp-screen-lg: 1024px;