From f857523f2b8eb7cc0093e0e6d4dfea87bbadd94a Mon Sep 17 00:00:00 2001 From: Pat O'Neill Date: Wed, 10 Oct 2018 15:30:20 -0400 Subject: [PATCH] feat: Add breakpoints option to support toggling classes based on player width. (#5471) This adds a breakpoints option. By default, this option is false meaning this is an opt-in feature. When passing true, it will use a default set of breakpoints. Or custom breakpoints can be passed if users do not like our breakpoints (or previously-existing style decisions). - Add breakpoints option. - Adds some new (currently unused) classes: vjs-layout-medium, vjs-layout-large, vjs-layout-x-large, and vjs-layout-huge. - Add updateCurrentBreakpoint and currentBreakpoint methods to the player. - Update css/components/_adaptive.scss - Add sandbox/responsive.html.example Closes videojs/video.js#4371 --- docs/examples/elephantsdream/index.html | 2 +- docs/examples/simple-embed/index.html | 2 +- docs/guides/options.md | 41 ++++++ sandbox/combined-tracks.html.example | 2 +- sandbox/descriptions.html.example | 2 +- sandbox/flash.html.example | 2 +- sandbox/index.html.example | 23 ++-- sandbox/language.html.example | 2 +- sandbox/plugin.html.example | 2 +- sandbox/responsive.html.example | 160 ++++++++++++++++++++++++ src/css/components/_adaptive.scss | 20 +-- src/js/component.js | 29 +++-- src/js/player.js | 133 +++++++++++++++++++- test/api/api.js | 2 +- test/unit/player-breakpoints.test.js | 92 ++++++++++++++ test/unit/test-helpers.js | 2 +- 16 files changed, 472 insertions(+), 44 deletions(-) create mode 100644 sandbox/responsive.html.example create mode 100644 test/unit/player-breakpoints.test.js diff --git a/docs/examples/elephantsdream/index.html b/docs/examples/elephantsdream/index.html index 109a8002f2..0cce1cca3a 100644 --- a/docs/examples/elephantsdream/index.html +++ b/docs/examples/elephantsdream/index.html @@ -17,7 +17,7 @@ don't currently support 'description' text tracks in any useful way! Currently this means that iOS will not display ANY text tracks --> -