diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 00000000..dd9beec5 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,10 @@ +# See editorconfig.org +root = true + +[*] +charset = utf-8 +end_of_line = lf +indent_size = 4 +indent_style = space +insert_final_newline = true +trim_trailing_whitespace = true diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 00000000..63fefe4d --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,41 @@ +{ + "parser": "babel-eslint", + "extends": ["airbnb-base", "prettier"], + "env": { + "browser": true, + "es6": true + }, + "globals": { "Plyr": false, "jQuery": false }, + "rules": { + "no-const-assign": 1, + "no-shadow": 0, + "no-this-before-super": 1, + "no-undef": 1, + "no-unreachable": 1, + "no-unused-vars": 1, + "constructor-super": 1, + "valid-typeof": 1, + "indent": [2, 4, { "SwitchCase": 1 }], + "quotes": [2, "single", "avoid-escape"], + "semi": [2, "always"], + "eqeqeq": [2, "always"], + "one-var": [2, "never"], + "comma-dangle": [2, "always-multiline"], + "no-restricted-globals": [ + "error", + { + "name": "event", + "message": "Use local parameter instead." + }, + { + "name": "error", + "message": "Use local parameter instead." + } + ], + "array-bracket-newline": [2, { "minItems": 2 }], + "array-element-newline": [2, { "minItems": 2 }] + }, + "parserOptions": { + "sourceType": "module" + } +} diff --git a/.github/issue_template.md b/.github/issue_template.md index 8e3b85b7..f503b944 100644 --- a/.github/issue_template.md +++ b/.github/issue_template.md @@ -1,28 +1,17 @@ - -- [ ] Issue does not already exist -- [ ] Issue observed on https://plyr.io - -### Expected behaviour +### Expected behaviour ### Actual behaviour ### Environment - Browser: -- Version: +- Version: - Operating System: -- Version: +- Version: -Players affected: -- [ ] HTML5 Video -- [ ] HTML5 Audio -- [ ] YouTube -- [ ] Vimeo - -### Steps to reproduce -- - -### Relevant links +### Steps to reproduce +- \ No newline at end of file diff --git a/.gitignore b/.gitignore index 610716ad..b17cd7c7 100644 --- a/.gitignore +++ b/.gitignore @@ -1,11 +1,11 @@ node_modules -*.sublime-project -*.sublime-workspace .DS_Store aws.json -docs/index.dev.html *.mp4 -index-dev.html -notes.txt -*.vtt -docs/index.dev.php +!dist/blank.mp4 +index-*.html +npm-debug.log +*.webm +/package-lock.json +.idea/ + diff --git a/.jsbeautifyrc b/.jsbeautifyrc deleted file mode 100644 index 064bf950..00000000 --- a/.jsbeautifyrc +++ /dev/null @@ -1,11 +0,0 @@ -{ - "html": { - "allowed_file_extensions": [] - }, - "css": { - "allowed_file_extensions": [] - }, - "js": { - "allowed_file_extensions": [] - } -} diff --git a/.jshintrc b/.jshintrc deleted file mode 100644 index 7a55e036..00000000 --- a/.jshintrc +++ /dev/null @@ -1,55 +0,0 @@ -{ - // Settings - "passfail" : false, // Stop on first error. - "maxerr" : 100, // Maximum error before stopping. - - // Predefined globals whom JSHint will ignore. - "browser" : true, // Standard browser globals e.g. `window`, `document`. - "node" : false, - "rhino" : false, - "couch" : false, - "wsh" : false, // Windows Scripting Host. - "jquery" : false, - - // Development. - "debug" : true, // Allow debugger statements e.g. browser breakpoints. - "devel" : true, // Allow developments statements e.g. `console.log();`. - - // ECMAScript 5. - "strict" : false, // Require `use strict` pragma in every file. - "globalstrict" : false, // Allow global "use strict" (also enables 'strict'). - - // The Good Parts. - "asi" : true, // Tolerate Automatic Semicolon Insertion (no semicolons). - "laxbreak" : true, // Tolerate unsafe line breaks e.g. `return [\n] x` without semicolons. - "bitwise" : false, // Prohibit bitwise operators (&, |, ^, etc.). - "boss" : false, // Tolerate assignments inside if, for & while. Usually conditions & loops are for comparison, not assignments. - "curly" : true, // Require {} for every new block or scope. - "eqeqeq" : true, // Require triple equals i.e. `===`. - "eqnull" : false, // Tolerate use of `== null`. - "evil" : false, // Tolerate use of `eval`. - "expr" : false, // Tolerate `ExpressionStatement` as Programs. - "forin" : false, // Tolerate `for in` loops without `hasOwnPrototype`. - "immed" : true, // Require immediate invocations to be wrapped in parens e.g. `( function(){}() );` - "latedef" : false, // Prohipit variable use before definition. - "loopfunc" : true, // Allow functions to be defined within loops. - "noarg" : true, // Prohibit use of `arguments.caller` and `arguments.callee`. - "regexp" : true, // Prohibit `.` and `[^...]` in regular expressions. - "regexdash" : false, // Tolerate unescaped last dash i.e. `[-...]`. - "scripturl" : true, // Tolerate script-targeted URLs. - "shadow" : false, // Allows re-define variables later in code e.g. `var x=1; x=2;`. - "supernew" : false, // Tolerate `new function () { ... };` and `new Object;`. - "undef" : true, // Require all non-global variables be declared before they are used. - - // Personal styling preferences. - "newcap" : true, // Require capitalization of all constructor functions e.g. `new F()`. - "noempty" : true, // Prohibit use of empty blocks. - "nonew" : true, // Prohibit use of constructors for side-effects. - "nomen" : true, // Prohibit use of initial or trailing underbars in names. - "onevar" : false, // Allow only one `var` statement per function. - "plusplus" : false, // Prohibit use of `++` & `--`. - "sub" : false, // Tolerate all forms of subscript notation besides dot notation e.g. `dict['key']` instead of `dict.key`. - "trailing" : true, // Prohibit trailing whitespaces. - "white" : true, // Check against strict whitespace and indentation rules. - "indent" : 4 // Specify indentation spacing -} \ No newline at end of file diff --git a/.npmignore b/.npmignore new file mode 100644 index 00000000..afba951f --- /dev/null +++ b/.npmignore @@ -0,0 +1,4 @@ +demo +.github +.vscode +*.code-workspace diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000..e1544230 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,7 @@ +{ + "useTabs": false, + "tabWidth": 4, + "printWidth": 160, + "singleQuote": true, + "trailingComma": "all" +} diff --git a/.stylelintrc.json b/.stylelintrc.json new file mode 100644 index 00000000..7df4249c --- /dev/null +++ b/.stylelintrc.json @@ -0,0 +1,24 @@ +{ + "plugins": ["stylelint-selector-bem-pattern", "stylelint-scss"], + "extends": ["stylelint-config-recommended", "stylelint-config-sass-guidelines", "stylelint-config-prettier"], + "rules": { + "selector-class-pattern": null, + "selector-no-qualifying-type": [ + true, + { + "ignore": ["attribute", "class"] + } + ], + "indentation": 4, + "string-quotes": "single", + "max-nesting-depth": 2, + "plugin/selector-bem-pattern": { + "preset": "bem", + "componentName": "(([a-z0-9]+(?!-$)-?)+)", + "componentSelectors": { + "initial": "\\.{componentName}(((__|--)(([a-z0-9\\[\\]'=]+(?!-$)-?)+))+)?$" + }, + "ignoreSelectors": [".*\\.has-.*", ".*\\.is-.*"] + } + } +} diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 00000000..81d8ad2b --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,12 @@ +{ + // See http://go.microsoft.com/fwlink/?LinkId=827846 + // for the documentation about the extensions.json format + "recommendations": [ + // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp + "dbaeumer.vscode-eslint", + "wix.vscode-import-cost", + "esbenp.prettier-vscode", + "shinnn.stylelint", + "wayou.vscode-todo-highlight" + ] +} diff --git a/.vscode/settings.json b/.vscode/settings.json index 7a73a41b..9e26dfee 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,2 +1 @@ -{ -} \ No newline at end of file +{} \ No newline at end of file diff --git a/bower.json b/bower.json index 74b2e9fc..53c921b7 100644 --- a/bower.json +++ b/bower.json @@ -6,7 +6,7 @@ "Audio", "Video", "HTML5 Audio", - "HTml5 Video" + "HTML5 Video" ], "authors": [ "Sam Potts " @@ -30,4 +30,4 @@ "url": "git://github.com/sampotts/plyr.git" }, "license": "MIT" -} +} \ No newline at end of file diff --git a/bundles.json b/bundles.json index d6fdf733..402573b6 100644 --- a/bundles.json +++ b/bundles.json @@ -1,24 +1,20 @@ { "plyr": { - "less": { - "plyr.css": ["src/less/plyr.less"] - }, - "scss": { - "plyr.css": ["src/scss/plyr.scss"] + "sass": { + "plyr.css": "src/sass/plyr.scss" }, "js": { - "plyr.js": ["src/js/plyr.js"] + "plyr.js": "src/js/plyr.js", + "plyr.polyfilled.js": "src/js/plyr.polyfilled.js" } }, "demo": { - "less": { - "demo.css": ["demo/src/less/demo.less"] + "sass": { + "demo.css": "demo/src/sass/bundles/demo.scss", + "error.css": "demo/src/sass/bundles/error.csss" }, "js": { - "demo.js": [ - "demo/src/js/lib/classlist.js", - "demo/src/js/main.js" - ] + "demo.js": "demo/src/js/demo.js" } } } diff --git a/changelog.md b/changelog.md index 09864472..2ebbda00 100644 --- a/changelog.md +++ b/changelog.md @@ -1,553 +1,744 @@ -# Changelog +# v3.0.0 + +This is a massive release. A _mostly_ complete rewrite in ES6. What started out as a few changes quickly snowballed. There's many breaking changes so be careful upgrading. + +### Big changes + +* New settings menu complete with funky animations +* Ability to adjust speed of playback +* Ability to toggle caption language (HTML5 and Vimeo only) +* Ability to set YouTube quality (HTML5 will follow) +* Added support for Vimeo captions +* Added Picture-in-Picture support (Safari only) +* Added AirPlay support (again, Safari only) +* Added `playsinline` support for iOS 10+ +* Soundcloud removed until I can work on a plugin framework +* Embedded players are now progressively enhanced - no more empty `
`s! + +### Other stuff + +* Now using SASS exclusively. Sorry, LESS folk it just made sense to maintain one method as SASS is what the cool kids use. It may come back if we work out an automated way to convert the SASS +* Moved to ES6. All the rage these days. You'll need to look at polyfills. The demo uses [polyfill.io](https://polyfill.io) +* Added basic looping support +* Added an aspect ratio option for those that can't leave the 90s and want 4:3 +* `controlshidden` and `controlsshown` events added for when the controls show or hide +* `qualityrequested` and `qualitychange` events for YouTube quality control (HTML5 will follow) +* Volume is now `0` to `1` as per HTML5 spec +* No longer bodging a `` behind the `` to make up for WebKit's lack of lower fill styling +* Captions now render with line breaks as intended +* Captions now render without AJAX using the native events etc +* Added a fallback for getting YouTube video data incase `.getVideoData()` disappears when one of their developers randomly deletes it again +* Setup and building of the UI should be way "snappier" +* Click to toggle inverted time (e.g. 0:01 or -2:59 for a 3 minute video at 1 seconds) - new `toggleInvert` and `invertTime` options +* Added `autopause` option for Vimeo +* Added `muted` option for you guessed it, muted playback +* Restored the `.off()` API method +* `.play()` will now return a promise to prevent that pesky uncaught promise issue in Chrome etc +* Pressing and hold the seek bar no longer freezes all other updates of the UI + +...plus loads of bug fixes. + +### Breaking changes + +You gotta break eggs to make an omelette. Sadly, there's quite a few breaking changes: + +* Setup now uses proper constructor, accepts a single selector/element/node and returns a single instance - much simpler than before +* Much of the API is now using getters and setters rather than methods (where it makes sense) to match the HTML5 API - see the docs for more info +* The data attributes for the embeds are now `data-plyr-provider` and `data-plyr-embed-id` to prevent compatibility issues. These can be changed under `config.attributes.embed` if required +* `blankUrl` -> `blankVideo` +* `volume` is now `0` to `1` as per HTML5 spec +* `keyboardShorcuts` (typo) is now just `keyboard` +* `loop` is now `loop.active` in preparation for loop enhancements later +* `html` option for custom controls removed in favour of the `controls` option which now accepts an array (to use built in controls) or a string of HTML for custom controls. +* `classes` -> `classNames` +* `classes.videoWrapper` -> `classNames.video` +* `classes.embedWrapper` -> `classNames.embed` +* `classes.ready` removed +* `classes.setup` removed +* `classes.muted` removed +* `classes.fullscreen.active` removed in favour of the `:fullscreen` selector +* `selectors.html5` removed +* `selectors.embed` removed +* `selectors.buttons.seek` -> `selectors.inputs.seek` +* `selectors.volume.input` -> `selectors.inputs.volume` +* `selectors.volume.display` -> `selectors.display.volume` +* `selectors.currentTime` -> `selectors.display.currentTime` +* `selectors.duration` -> `selectors.display.duration` + +### Polyfilling + +Because we're using the fancy new ES6 syntax, you will need to polyfill for vintage browsers if you want to use Plyr and still support them. Luckily there's a decent service for this that makes it painless, [polyfill.io](https://polyfill.io). ## v2.0.18 -- Fix for YouTube .getVideoData() issue (fixes #709) + +* Fix for YouTube .getVideoData() issue (fixes #709) ## v2.0.17 -- Vimeo controls fix (fixes #697) -- SVG4everybody compatibility fix -- Allow Plyr.setup event listeners to be set up as separate event listeners (https://github.com/sampotts/plyr/pull/703) -- Added title to the layer html template (for custom controls) (https://github.com/sampotts/plyr/pull/649) -- Target is null bug fix (https://github.com/sampotts/plyr/pull/617) -- fix #684 memory leaks issues after destroy (https://github.com/sampotts/plyr/pull/700) + +* Vimeo controls fix (fixes #697) +* SVG4everybody compatibility fix +* Allow Plyr.setup event listeners to be set up as separate event listeners (https://github.com/sampotts/plyr/pull/703) +* Added title to the layer html template (for custom controls) (https://github.com/sampotts/plyr/pull/649) +* Target is null bug fix (https://github.com/sampotts/plyr/pull/617) +* fix #684 memory leaks issues after destroy (https://github.com/sampotts/plyr/pull/700) ## v2.0.16 -- Fullscreen bug fix (fixes #664) + +* Fullscreen bug fix (fixes #664) ## v2.0.15 -- Demo fix + +* Demo fix ## v2.0.14 -- CDN URL updates. Sorry, still working on V3 as hard as I can... + +* CDN URL updates. Sorry, still working on V3 as hard as I can... ## v2.0.13 -- Repo moved and Vimeo demo fix + +* Repo moved and Vimeo demo fix ## v2.0.12 -- Ability to set custom `blankUrl` for source changes (https://github.com/sampotts/plyr/pull/504) -- Ability to set caption button listener (https://github.com/sampotts/plyr/pull/468) + +* Ability to set custom `blankUrl` for source changes (https://github.com/sampotts/plyr/pull/504) +* Ability to set caption button listener (https://github.com/sampotts/plyr/pull/468) ## v2.0.11 -- Fix for `cleanUp` being called twice (thanks to @sebastiancarlsson) -- Fix for YouTube controls on iPad (fixes #391) + +* Fix for `cleanUp` being called twice (thanks to @sebastiancarlsson) +* Fix for YouTube controls on iPad (fixes #391) ## v2.0.10 -- Added seek event fixes for Vimeo and YouTube (fixes #409) -- Added support for embed URLs rather than ID only (fixes #345) + +* Added seek event fixes for Vimeo and YouTube (fixes #409) +* Added support for embed URLs rather than ID only (fixes #345) ## v2.0.9 -- Temporary patch for the YouTube API issues with `getDuration()` (relates to #374) + +* Temporary patch for the YouTube API issues with `getDuration()` (relates to #374) ## v2.0.8 -- Added `isPaused()` API method (thanks to @darrena092) -- Allowed `.on()` API method to be chainable (thanks to @gurupras) (fixes #357) -- Improved the "awful" rendering of captions on small screens in fullscreen mode (fixes #390) -- Fix for Firefox VTT compatibility (thanks to @magourex) -- Fix for Firefox Developer Edition blank video due to `-webkit-mask-image` issue (fixes #392) -- Added Issue and PR templates with the aim of reducing duplicate or duff issues + +* Added `isPaused()` API method (thanks to @darrena092) +* Allowed `.on()` API method to be chainable (thanks to @gurupras) (fixes #357) +* Improved the "awful" rendering of captions on small screens in fullscreen mode (fixes #390) +* Fix for Firefox VTT compatibility (thanks to @magourex) +* Fix for Firefox Developer Edition blank video due to `-webkit-mask-image` issue (fixes #392) +* Added Issue and PR templates with the aim of reducing duplicate or duff issues ## v2.0.7 -- Fixed `getCurrentTime()` method (fixes #351) -- Added `getVolume()` , `isMuted()` and `getDuration()` API methods (fixes #346) + +* Fixed `getCurrentTime()` method (fixes #351) +* Added `getVolume()` , `isMuted()` and `getDuration()` API methods (fixes #346) ## v2.0.6 -- Fixed merge issue with `Updated define to work with AMD imports #326` PR -- Code formatting + +* Fixed merge issue with `Updated define to work with AMD imports #326` PR +* Code formatting ## v2.0.5 -- Fix for Vimeo in IE9 & IE10 -- Fix for HTML5 elements not firing `ready` event + +* Fix for Vimeo in IE9 & IE10 +* Fix for HTML5 elements not firing `ready` event ## v2.0.4 -- Fix for Firefox full screen (fixes #343) + +* Fix for Firefox full screen (fixes #343) ## v2.0.3 -- Set 'global' keyboard shortcut option to false as default, added `