diff --git a/MIGRATION.md b/MIGRATION.md new file mode 100644 index 0000000..04de405 --- /dev/null +++ b/MIGRATION.md @@ -0,0 +1,81 @@ + +## Migration Guide + +### Migrating from 4.0 to 5.0 + +Version 5 introduces a new major of `o-loading`. Updating to this new version will mean updating any other components that you have which are using `o-loading`. + +It also removes the dependency on `o-fetch-jsonp`, and requires the `fetch` polyfill to run in older browsers— we recommend visiting the [documentation for the Polyfill service](https://origami-test.ft.com/docs/components/compatibility/#polyfill-service) to do so. + +This version also introduces the primary mixin, `oVideo()`. + +The following mixins are now private. Make sure your project does not use them, use `oVideo` instead: + +```diff +-oVideoInfoSmall ++_oVideoInfoSmall +-oVideoInfoMedium ++_oVideoInfoMedium +-oVideoInfoLarge ++_oVideoInfoLarge +``` + +### Migrating from 3.0 to 4.0 + +Version 4 introduces the new majors of `o-colors`, `o-loading`, and `o-typography`. Updating to this new version will mean updating any other components that you have which are using `o-colors`, `o-loading`, or `o-typography`. There are no other breaking changes in this release. + +### Migrating from 2.0 to 3.0 + +The `videoSource` and `captionsUrl` options no longer exist. Captions can be toggled on or off by using the `showCaptions` boolean. This defaults to `true`, so if the video data (now gotten from the [next-media-api](https://github.com/Financial-Times/next-media-api)) contains captions, then the component will present them to the user. + +Since 3.0, if `showCaptions` is *true*, calling `addVideo()` directly will throw an error. This is due to the fact the component needs to source the `captionsUrl` first. Either leave `autorender` as *true* or call `init()` instead. + +In the previous version, the call to the API could be skipped by using the `data` option, passing in a response from `next-video-api`. This option can still be used, but the data will now need to match a `next-media-api` response – [see an example](https://next-media-api.ft.com/v1/eebe9cb5-8d4c-3bd7-8dd9-50e869e2f526). + +```diff +
+
+
+``` + +The `placeholdertitle` property no longer exists, it has been replaced by `placeholder-info` which accepts an array containing one or more of `'title'`, `'description'`, `'brand'`. + +```diff +
+
+
+``` + +The `optimumwidth` property is no longer used for the video width, it is now only used for the poster image width. To choose an optimum video width you can use the new property `optimumvideowidth`. + + +```diff +
+
+
+``` diff --git a/README.md b/README.md index 02dc880..9577cc1 100644 --- a/README.md +++ b/README.md @@ -2,15 +2,64 @@ Creates a video player and attaches analytics. Also supports pre roll ads. -## Usage +- [Markup](#markup) +- [Sass](#sass) +- [JavaScript](#javascript) + - [Config](#config) + - [With a playlist](#with-a-playlist) +- [Testing](#testing) +- [Migration](#migration) +- [Contact](#contact) +- [License](#license) + +## Markup -Create an element of the format e.g. +```html +
+``` + +Videos can be styled in three different sizes, namely 'small', 'medium' and 'large', which can be added to the element as class modifiers, e.g. ```html -
+
+``` + +## Sass + +In order to output every size and attribute of `o-video`, you'll need to include the following: + +```scss +@import 'o-video/main'; + +@include oVideo(); ``` -In JS +You can be more selective about which sizes and attributes you would like to output, by using an `$opts` map. It accepts the following lists: + +**attributes** +- `'ads'` +- `'info'` +- `'placeholder'` + +**sizes** +- `'small'` +- `'medium'` +- `'large'` + +```scss +@import 'o-video'; + +@include oVideo($opts:( + 'attributes': ('ads'), + 'sizes': ('small', 'large') +)) + +// outputs small and large video styles, and styling support for ads +``` + +## JavaScript + +In order to initialise `o-video`, you will need the following: ```js const OVideo = require('o-video'); @@ -79,80 +128,20 @@ $ npm test Requires Firefox (v38.0.0 to test with polyfills and mirror CircleCI) -## Migration Guide - -Migrating from 3.0 to 4.0 -------------------------- +## Migration -Version 4 introduces the new majors of o-colors, o-loading, and o-typography. Updating to this new version will mean updating any other components that you have which are using o-colors, o-loading, or o-typography. There are no other breaking changes in this release. +State | Major Version | Last Minor Release | Migration guide | +:---: | :---: | :---: | :---: +✨ active | 5 | N/A | [migrate to v5](MIGRATION.md#migrating-from-v4-to-v5) | +⚠ maintained| 4 | 4.1 | [migrate to v4](MIGRATION.md#migrating-from-v3-to-v4) | +╳ deprecated | 3 | 3.1 | [migrate to v3](MIGRATION.md#migrating-from-v2-to-v3) | +╳ deprecated | 2 | 2.5 | [migrate to v2](MIGRATION.md#migrating-from-v1-to-v2) | +╳ deprecated | 1 | 1.4 | N/A | -Migrating from 2.0 to 3.0 -------------------------- +## Contact -The `videoSource` and `captionsUrl` options no longer exist. Captions can be toggled on or off by using the `showCaptions` boolean. This defaults to `true`, so if the video data (now gotten from the [next-media-api](https://github.com/Financial-Times/next-media-api)) contains captions, then the component will present them to the user. +If you have any questions or comments about this component, or need help using it, please either [raise an issue](https://github.com/Financial-Times/o-loading/issues), visit [#ft-origami](https://financialtimes.slack.com/messages/ft-origami/) or email [Origami Support](mailto:origami-support@ft.com). -Since 3.0, if `showCaptions` is *true*, calling `addVideo()` directly will throw an error. This is due to the fact the component needs to source the `captionsUrl` first. Either leave `autorender` as *true* or call `init()` instead. +## Licence -In the previous version, the call to the API could be skipped by using the `data` option, passing in a response from `next-video-api`. This option can still be used, but the data will now need to match a `next-media-api` response – [see an example](https://next-media-api.ft.com/v1/eebe9cb5-8d4c-3bd7-8dd9-50e869e2f526). - -```diff -
-
-
-``` - -Migrating from 1.0 to 2.0 -------------------------- - -### Configuration - -The `placeholdertitle` property no longer exists, it has been replaced by `placeholder-info` which accepts an array containing one or more of `'title'`, `'description'`, `'brand'`. - -```diff -
-
-
-``` - -The `optimumwidth` property is no longer used for the video width, it is now only used for the poster image width. To choose an optimum video width you can use the new property `optimumvideowidth`. - - -```diff -
-
-
-``` - -### Sass - -The silent flag `_o-video_applied` variable has been renamed to `o-video-is-silent` and has had it's default value changed from `false` to `true`. If you want to include the component with the styles please look at the code diff below. - -```diff -+ $o-video-is-silent: false; -@import 'o-video/main'; -``` +This software is published by the Financial Times under the [MIT licence](http://opensource.org/licenses/MIT). diff --git a/bower.json b/bower.json index 6dedc6b..9536ccf 100644 --- a/bower.json +++ b/bower.json @@ -9,9 +9,9 @@ "dependencies": { "o-icons": ">=4.4.2 <6", "o-colors": "^4", - "o-fetch-jsonp": "^2.0.0", - "o-loading": "^2", + "o-loading": "^3.0.0", "o-typography": "^5", - "o-viewport": "^3.0.1" + "o-viewport": "^3.0.1", + "o-normalise": "^1.6.2" } } diff --git a/main.scss b/main.scss index fca35d6..888b602 100644 --- a/main.scss +++ b/main.scss @@ -1,48 +1,45 @@ $o-video-is-silent: true !default; -@import "o-icons/main"; @import "o-colors/main"; +@import "o-icons/main"; @import "o-loading/main"; +@import "o-normalise/main"; @import "o-typography/main"; -@import "src/scss/placeholder"; -@import "src/scss/info"; @import "src/scss/ads"; +@import "src/scss/base"; +@import "src/scss/info"; +@import "src/scss/placeholder"; -@if $o-video-is-silent == false { - .o-video { - position: relative; - width: 100%; - height: 100%; - - &:before { - content: ''; - display: block; - width: 100%; - padding: 56.25% 0 0; - } +/// @access public +/// @param {Map} $opts - ['attributes': ('ads', 'info', 'placeholder'), 'sizes': ('small', 'medium', 'large')] +/// Outputs all video styles +@mixin oVideo($opts: ( + 'attributes': ('ads', 'info', 'placeholder'), + 'sizes': ('small', 'medium', 'large') +)) { + $attributes: map-get($opts, 'attributes'); + $sizes: map-get($opts, 'sizes'); + + @include _oVideoBase(); + + @if index($attributes, 'ads') { + @include _oVideoAds(); } - .o-video__video { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; + @if index($attributes, 'placeholder') { + @include _oVideoPlaceholder(); } - .o-video__live-region { - position: absolute; - clip: rect(0 0 0 0); - margin: -1px; - border: 0; - overflow: hidden; - padding: 0; - width: 1px; - height: 1px; - white-space: nowrap; + @if index($attributes, 'info') { + @include _oVideoInfo($sizes); } +} + +@if $o-video-is-silent == false { + + @include oVideo() $o-video-is-silent: true !global; } diff --git a/src/js/video.js b/src/js/video.js index c45054b..6a3ee84 100644 --- a/src/js/video.js +++ b/src/js/video.js @@ -1,7 +1,6 @@ /* global fetch */ import oViewport from 'o-viewport'; -import crossDomainFetch from 'o-fetch-jsonp'; import getRendition from './helpers/get-rendition'; import VideoAds from './ads'; import VideoInfo from './info'; @@ -174,7 +173,7 @@ class Video { getData() { const dataPromise = this.opts.data ? Promise.resolve(this.opts.data) : - crossDomainFetch(`https://next-media-api.ft.com/v1/${this.opts.id}`) + fetch(`https://next-media-api.ft.com/v1/${this.opts.id}`) .then(response => { if (response.ok) { return response.json(); diff --git a/src/scss/_ads.scss b/src/scss/_ads.scss index 8c2c38d..62572f6 100644 --- a/src/scss/_ads.scss +++ b/src/scss/_ads.scss @@ -1,5 +1,6 @@ -@if $o-video-is-silent == false { - +/// @access private +/// Outputs styles for ads embedded in videos +@mixin _oVideoAds { .o-video__overlay, .o-video__ad { position: absolute; @@ -39,9 +40,7 @@ outline: 2px solid oColorsGetPaletteColor('black'); &:after { - @include oLoading(); - @include oLoadingSize('small'); - @include oLoadingColor('light'); + @include oLoadingContent($opts: ('theme': 'light', 'size': 'small')); content: ''; position: absolute; @@ -53,5 +52,4 @@ margin-left: -11px; } } - } diff --git a/src/scss/_base.scss b/src/scss/_base.scss new file mode 100644 index 0000000..07e088f --- /dev/null +++ b/src/scss/_base.scss @@ -0,0 +1,28 @@ +/// @access private +/// Outputs base styles for videos +@mixin _oVideoBase { + .o-video { + position: relative; + width: 100%; + height: 100%; + + &:before { + content: ''; + display: block; + width: 100%; + padding: 56.25% 0 0; + } + } + + .o-video__video { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + + .o-video__live-region { + @include oNormaliseVisuallyHidden(); + } +} diff --git a/src/scss/_info.scss b/src/scss/_info.scss index 5808232..783ad7a 100644 --- a/src/scss/_info.scss +++ b/src/scss/_info.scss @@ -1,4 +1,6 @@ -@mixin oVideoInfoSmall { +/// @access private +/// Outputs styling for small variation of video information +@mixin _oVideoInfoSmall { .o-video__info-description { display: none; } @@ -8,7 +10,9 @@ } } -@mixin oVideoInfoMedium { +/// @access private +/// Outputs styling for medium variation of video information +@mixin _oVideoInfoMedium { .o-video__info-brand { display: inline-block; } @@ -18,7 +22,9 @@ } } -@mixin oVideoInfoLarge { +/// @access private +/// Outputs styling for large variation of video information +@mixin _oVideoInfoLarge { .o-video__info-title, .o-video__info-description { margin: 10px 0; @@ -43,8 +49,9 @@ } } -@if $o-video-is-silent == false { - +/// @access private +/// Outputs base styling for video information +@mixin _oVideoInfo($sizes) { .o-video__info { position: absolute; top: 0; @@ -66,9 +73,7 @@ background-color: oColorsGetPaletteColor('claret'); color: oColorsGetPaletteColor('white'); &:empty { - // sass-lint:disable no-important - display: none !important; - // sass-lint:enable no-important + display: none !important;// sass-lint:disable-line no-important } } @@ -77,16 +82,21 @@ line-height: 18px; } - .o-video--small { - @include oVideoInfoSmall(); + @if index($sizes, 'small') { + .o-video--small { + @include _oVideoInfoSmall(); + } } - .o-video--medium { - @include oVideoInfoMedium(); + @if index($sizes, 'medium') { + .o-video--medium { + @include _oVideoInfoMedium(); + } } - .o-video--large { - @include oVideoInfoLarge(); + @if index($sizes, 'large') { + .o-video--large { + @include _oVideoInfoLarge(); + } } - } diff --git a/src/scss/_placeholder.scss b/src/scss/_placeholder.scss index b8da45a..c84099f 100644 --- a/src/scss/_placeholder.scss +++ b/src/scss/_placeholder.scss @@ -1,5 +1,6 @@ -@if $o-video-is-silent == false { - +/// @access private +/// Outpus styling for video placeholder +@mixin _oVideoPlaceholder { .o-video__placeholder, .o-video__placeholder-image { position: absolute; @@ -67,5 +68,4 @@ background-color: oColorsGetPaletteColor('claret'); } } - }