From 51bd49f4bcc507803ac7b8b612576c85b202ab75 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 | 42 +++++++ sandbox/combined-tracks.html.example | 2 +- sandbox/descriptions.html.example | 2 +- sandbox/flash.html.example | 2 +- sandbox/index.html.example | 24 ++-- 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, 473 insertions(+), 45 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 8a5d3b9780..b1b02dff35 100644 --- a/docs/examples/elephantsdream/index.html +++ b/docs/examples/elephantsdream/index.html @@ -16,7 +16,7 @@ don't currently support 'description' text tracks in any useful way! Currently this means that iOS will not display ANY text tracks --> -