Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@silvermine/videojs-chromecast
Advanced tools
@silvermine/videojs-chromecast - npm Package Compare versions
Comparing version 1.4.1 to 1.5.0
@@ -6,2 +6,15 @@ # Changelog | ||
| ## [1.5.0](https://github.com/silvermine/videojs-chromecast/compare/v1.4.1...v1.5.0) (2023-11-07) | ||
| ### Features | ||
| * Allow modifying the load request ([#123](https://github.com/silvermine/videojs-chromecast/issues/123), [#141](https://github.com/silvermine/videojs-chromecast/issues/141)) ([7cee052](https://github.com/silvermine/videojs-chromecast/commit/7cee052dcd5473448f882d67bb5bc9d8e9a1763c)) | ||
| ### Bug Fixes | ||
| * Clear the close session timeout after new source starts playing ([4a8eb31](https://github.com/silvermine/videojs-chromecast/commit/4a8eb31faa241235c54c1f8dec897571360e7f19)) | ||
| ### [1.4.1](https://github.com/silvermine/videojs-chromecast/compare/v1.4.0...v1.4.1) (2023-03-21) | ||
@@ -8,0 +21,0 @@ |
| { | ||
| "name": "@silvermine/videojs-chromecast", | ||
| "version": "1.4.1", | ||
| "version": "1.5.0", | ||
| "description": "video.js plugin for casting to chromecast", | ||
| "main": "src/js/index.js", | ||
| "scripts": { | ||
| "commitlint": "commitlint --from d4e7f7e", | ||
| "commitlint": "commitlint --from 5ed6165", | ||
| "test": "check-node-version --npm 8.5.5 && nyc mocha -- -R spec 'tests/**/*.test.js'", | ||
| "stylelint": "stylelint './src/scss/**/*.scss'", | ||
| "eslint": "eslint '{,!(node_modules|dist)/**/}*.js'", | ||
| "markdownlint": "markdownlint -c .markdownlint.json -i CHANGELOG.md '{,!(node_modules)/**/}*.md'", | ||
| "standards": "npm run markdownlint && npm run stylelint && npm run eslint", | ||
| "markdownlint": "markdownlint-cli2", | ||
| "standards": "npm run commitlint && npm run markdownlint && npm run stylelint && npm run eslint", | ||
| "release:preview": "node ./node_modules/@silvermine/standardization/scripts/release.js preview", | ||
@@ -45,4 +45,4 @@ "release:prep-changelog": "node ./node_modules/@silvermine/standardization/scripts/release.js prep-changelog", | ||
| "@silvermine/eslint-config": "3.0.1", | ||
| "@silvermine/standardization": "2.0.0", | ||
| "autoprefixer": "7.1.1", | ||
| "@silvermine/standardization": "2.2.0", | ||
| "autoprefixer": "8.6.5", | ||
| "babel-eslint": "10.1.0", | ||
@@ -49,0 +49,0 @@ "babelify": "10.0.0", |
221
README.md
| # Silvermine VideoJS Chromecast Plugin | ||
| <!-- markdownlint-disable line-length --> | ||
| [](https://travis-ci.org/silvermine/videojs-chromecast) | ||
@@ -7,2 +8,3 @@ [](https://coveralls.io/github/silvermine/videojs-chromecast?branch=master) | ||
| [](https://david-dm.org/silvermine/videojs-chromecast#info=devDependencies&view=table) | ||
| <!-- markdownlint-enable line-length --> | ||
@@ -18,8 +20,8 @@ | ||
| The `@silvermine/videojs-chromecast` plugin includes 3 types of assets: javascript, CSS, | ||
| The `@silvermine/videojs-chromecast` plugin includes 3 types of assets: JavaScript, CSS, | ||
| and images. | ||
| You can either build the plugin locally and use the assets that are output from the build | ||
| process directly, or you can install the plugin as an npm module, include the | ||
| javascript and SCSS source in your project using a Common-JS module loader and SASS build | ||
| process directly, or you can install the plugin as an NPM module, include the | ||
| JavaScript and SCSS source in your project using a Common-JS module loader and SASS build | ||
| process, and copy the images from the image source folder to your project. | ||
@@ -42,3 +44,3 @@ | ||
| running `npm install` from within the `videojs-chromecast` folder. | ||
| 3. Run `grunt build` to build and copy the javascript, CSS and image files to the | ||
| 3. Run `grunt build` to build and copy the JavaScript, CSS and image files to the | ||
| `videojs-chromecast/dist` folder. | ||
@@ -52,5 +54,5 @@ 4. Copy the plugin's files from the `dist` folder into your project as needed. | ||
| Note: when adding the plugin's javascript to your web page, include the | ||
| `silvermine-videojs-chromecast.min.js` javascript file in your HTML *after* loading | ||
| Video.js. The plugin's built javascript file expects there to be a reference to Video.js | ||
| Note: when adding the plugin's JavaScript to your web page, include the | ||
| `silvermine-videojs-chromecast.min.js` JavaScript file in your HTML *after* loading | ||
| Video.js. The plugin's built JavaScript file expects there to be a reference to Video.js | ||
| at `window.videojs` and will throw an error if it does not exist. | ||
@@ -60,27 +62,27 @@ | ||
| * **`preloadWebComponents`** (default: `false`) - The Chromecast framework relies on the | ||
| `webcomponents.js` polyfill when a browser does not have `document.registerElement` in | ||
| order to create the `<google-cast-button>` custom component (which is not used by this | ||
| plugin). If you are using jQuery, this polyfill must be loaded and initialized before | ||
| jQuery is initialized. Unfortunately, the Chromecast framework loads the | ||
| `webcomponents.js` polyfill via a dynamically created `<script>` tag. This causes a race | ||
| condition (see #17). Also, including `webcomponents.js` anywhere on the page will break | ||
| jQuery's fix for bubbling some events to `document` (e.g. `onchange` events for | ||
| `<select>`, see #21). Setting `preloadWebComponents` to `true` will "fix" these 2 | ||
| problems by (1) making this plugin add the `webcomponents` polyfill synchronously when | ||
| the polyfill is needed and (2) using the `webcomponents-lite.js` version as it does not | ||
| include the shadow DOM polyfills, but still provides the `registerElement` polyfill that | ||
| the Chromecast framework needs. If you use the `preloadWebComponents: true` option, you | ||
| should make sure that this plugin is loaded before jQuery. Then include the Chromecast | ||
| framework after this plugin as you normally would. | ||
| * **`preloadWebComponents`** (default: `false`) - The Chromecast framework relies on | ||
| the `webcomponents.js` polyfill when a browser does not have | ||
| `document.registerElement` in order to create the `<google-cast-button>` custom | ||
| component (which is not used by this plugin). If you are using jQuery, this polyfill | ||
| must be loaded and initialized before jQuery is initialized. Unfortunately, the | ||
| Chromecast framework loads the `webcomponents.js` polyfill via a dynamically created | ||
| `<script>` tag. This causes a race condition (see #17). Also, including | ||
| `webcomponents.js` anywhere on the page will break jQuery's fix for bubbling some | ||
| events to `document` (e.g. `onchange` events for `<select>`, see #21). Setting | ||
| `preloadWebComponents` to `true` will "fix" these 2 problems by (1) making this | ||
| plugin add the `webcomponents` polyfill synchronously when the polyfill is needed and | ||
| (2) using the `webcomponents-lite.js` version as it does not include the shadow DOM | ||
| polyfills, but still provides the `registerElement` polyfill that the Chromecast | ||
| framework needs. If you use the `preloadWebComponents: true` option, you should make | ||
| sure that this plugin is loaded before jQuery. Then include the Chromecast framework | ||
| after this plugin as you normally would. | ||
| **Note:** There is a caveat to using the `preloadWebComponents` setting. | ||
| Because the Chromecast plugin uses the shadow DOM to create the | ||
| `<google-cast-button>` custom component, **the `<google-cast-button>` custom | ||
| component may partly render, but it will not be functional**. This tag is not | ||
| used by this plugin. However if you must use this tag elsewhere, you should | ||
| not use the `preloadWebComponents` flag. | ||
| **Note:** There is a caveat to using the `preloadWebComponents` setting. Because the | ||
| Chromecast plugin uses the shadow DOM to create the `<google-cast-button>` custom | ||
| component, **the `<google-cast-button>` custom component may partly render, but it | ||
| will not be functional**. This tag is not used by this plugin. However if you must | ||
| use this tag elsewhere, you should not use the `preloadWebComponents` flag. | ||
| tl;dr: if you use jQuery, you should use the `preloadWebComponents: true` option in | ||
| this plugin. | ||
| tl;dr: if you use jQuery, you should use the `preloadWebComponents: true` option in | ||
| this plugin. | ||
@@ -159,16 +161,17 @@ #### Providing initialization options via `require()` | ||
| * **`plugins.chromecast.receiverAppID`** - the string ID of a custom [Chromecast receiver | ||
| app][cast-receiver] to use. Defaults to the [default Media Receiver ID][def-cast-id]. | ||
| * **`plugins.chromecast.addButtonToControlBar`** - a `boolean` flag that tells the plugin | ||
| whether or not it should automatically add the Chromecast button to the Video.js | ||
| player's control bar component. Defaults to `true`. | ||
| * **`plugins.chromecast.buttonPositionIndex`** - a zero-based number specifying the index | ||
| of the Chromecast button among the control bar's child components (if | ||
| `addButtonToControlBar` is set to `true`). By default the Chromecast Button is added as | ||
| the last child of the control bar. A value less than 0 puts the button at the specified | ||
| position from the end of the control bar. Note that it's likely not all child components | ||
| of the control bar are visible. | ||
| * **`plugins.chromecast.addCastLabelToButton`** (default: `false`) - by default, the Chromecast | ||
| button component will display only an icon. Setting `addCastLabelToButton` to `true` will | ||
| display a label titled `"Cast"` alongside the default icon. | ||
| * **`plugins.chromecast.receiverAppID`** - the string ID of a custom [Chromecast | ||
| receiver app][cast-receiver] to use. Defaults to the [default Media Receiver | ||
| ID][def-cast-id]. | ||
| * **`plugins.chromecast.addButtonToControlBar`** - a `boolean` flag that tells the | ||
| plugin whether or not it should automatically add the Chromecast button to the | ||
| Video.js player's control bar component. Defaults to `true`. | ||
| * **`plugins.chromecast.buttonPositionIndex`** - a zero-based number specifying the | ||
| index of the Chromecast button among the control bar's child components (if | ||
| `addButtonToControlBar` is set to `true`). By default the Chromecast Button is added | ||
| as the last child of the control bar. A value less than 0 puts the button at the | ||
| specified position from the end of the control bar. Note that it's likely not all | ||
| child components of the control bar are visible. | ||
| * **`plugins.chromecast.addCastLabelToButton`** (default: `false`) - by default, the | ||
| Chromecast button component will display only an icon. Setting `addCastLabelToButton` | ||
| to `true` will display a label titled `"Cast"` alongside the default icon. | ||
@@ -179,17 +182,22 @@ ##### Chromecast Tech configuration | ||
| string that will be the title shown in the UI that is shown when a Chromecast session | ||
| is active and connected. When the this plugin calls the `requestTitleFn`, it passes it | ||
| the [current `source` object][player-source] and expects a string in return. If nothing | ||
| is returned or if this option is not defined, no title will be shown. | ||
| * **`chromecast.requestSubtitleFn`** - a function that this plugin calls when it needs a | ||
| string that will be the sub-title shown in the UI that is shown when a Chromecast | ||
| session is active and connected. When the this plugin calls the `requestSubtitleFn`, it | ||
| passes it the [current `source` object][player-source] and expects a string in return. | ||
| If nothing is returned or if this option is not defined, no sub-title will be shown. | ||
| * **`chromecast.requestCustomDataFn`** - a function that this plugin calls when it needs | ||
| an object that contains custom information necessary for a Chromecast receiver app when | ||
| a session is active and connected. When the this plugin calls the `requestCustomDataFn`, | ||
| it passes it the [current `source` object][player-source] and expects an object in return. | ||
| If nothing is returned or if this option is not defined, no custom data will be sent. | ||
| This option is intended to be used with a [custom receiver][custom-receiver] application | ||
| to extend its default capabilities. | ||
| is active and connected. When the this plugin calls the `requestTitleFn`, it passes | ||
| it the [current `source` object][player-source] and expects a string in return. If | ||
| nothing is returned or if this option is not defined, no title will be shown. | ||
| * **`chromecast.requestSubtitleFn`** - a function that this plugin calls when it needs | ||
| a string that will be the sub-title shown in the UI that is shown when a Chromecast | ||
| session is active and connected. When the this plugin calls the `requestSubtitleFn`, | ||
| it passes it the [current `source` object][player-source] and expects a string in | ||
| return. If nothing is returned or if this option is not defined, no sub-title will be | ||
| shown. | ||
| * **`chromecast.requestCustomDataFn`** - a function that this plugin calls when it | ||
| needs an object that contains custom information necessary for a Chromecast receiver | ||
| app when a session is active and connected. When the this plugin calls the | ||
| `requestCustomDataFn`, it passes it the [current `source` object][player-source] and | ||
| expects an object in return. If nothing is returned or if this option is not defined, | ||
| no custom data will be sent. This option is intended to be used with a [custom | ||
| receiver][custom-receiver] application to extend its default capabilities. | ||
| * **`chromecast.modifyLoadRequestFn`** - a function that this plugin calls before doing | ||
| the request to [load media][chromecast-load-media]. The function gets called with | ||
| the [LoadRequest][chromecast-load-request] object as argument and expects it in | ||
| return. | ||
@@ -230,2 +238,7 @@ Here is an example configuration object that makes full use of all required and optional | ||
| return customData[source.url]; | ||
| }, | ||
| modifyLoadRequestFn: function (loadRequest) { // HLS support | ||
| loadRequest.media.hlsSegmentFormat = 'fmp4'; | ||
| loadRequest.media.hlsVideoSegmentFormat = 'fmp4'; | ||
| return loadRequest; | ||
| } | ||
@@ -244,15 +257,16 @@ }, | ||
| The `ChromecastButton` component has two translated strings: "Open Chromecast menu" and "Cast". | ||
| The `ChromecastButton` component has two translated strings: "Open Chromecast menu" and | ||
| "Cast". | ||
| * The "Open Chromecast menu" string appears in both of the standard places for Button | ||
| component accessibility text: inside the `.vjs-control-text` span and as the `<button>` | ||
| element's `title` attribute. | ||
| * The "Cast" string appears in an optional label within the Button component: inside the | ||
| `.vjs-chromecast-button-label` span. | ||
| component accessibility text: inside the `.vjs-control-text` span and as the | ||
| `<button>` element's `title` attribute. | ||
| * The "Cast" string appears in an optional label within the Button component: inside | ||
| the `.vjs-chromecast-button-label` span. | ||
| To localize the Chromecast button strings, follow the steps in the | ||
| [Video.js Languages tutorial][videojs-translation] to add `"Open Chromecast menu"` | ||
| and `"Cast"` keys to the map of translation strings. | ||
| To localize the Chromecast button strings, follow the steps in the [Video.js Languages | ||
| tutorial][videojs-translation] to add `"Open Chromecast menu"` and `"Cast"` keys to the | ||
| map of translation strings. | ||
| ### Using the npm module | ||
| ### Using the NPM module | ||
@@ -263,4 +277,4 @@ If you are using a module loader such as Browserify or Webpack, first install | ||
| into your project's source code. `require('@silvermine/videojs-chromecast')` returns a | ||
| function that you can use to register the plugin with videojs by passing in a reference to | ||
| `videojs`: | ||
| function that you can use to register the plugin with Video.js by passing in a reference | ||
| to `videojs`: | ||
@@ -276,2 +290,11 @@ ```js | ||
| This plugin's source code uses ES6+ syntax and keywords, such as `class` and `static`. If | ||
| you need to support [browsers that do not support newer JavaScript | ||
| syntax](https://caniuse.com/es6), you will need to use a tool like | ||
| [Babel](https://babeljs.io/) to transpile and polyfill your code. | ||
| Alternatively, you can | ||
| `require('@silvermine/videojs-chromecast/dist/silvermine-videojs-chromecast.js')` to use a | ||
| JavaScript file that has already been polyfilled/transpiled down to ES5 compatibility. | ||
| ### Using the CSS and images | ||
@@ -286,20 +309,20 @@ | ||
| Optionally, you can override the SCSS variables that contain the paths to the icon | ||
| image files: | ||
| Optionally, you can override the SCSS variables that contain the paths to the icon image | ||
| files: | ||
| * **`$icon-chromecast--default`** - the path to the icon image that is displayed when the | ||
| Chromecast button is in its normal, default state. Defaults to | ||
| * **`$icon-chromecast--default`** - the path to the icon image that is displayed when | ||
| the Chromecast button is in its normal, default state. Defaults to | ||
| `"images/ic_cast_white_24dp.png"`. | ||
| * **`$icon-chromecast--hover`** - the path to the icon image that is displayed when the | ||
| user hovers over the Chromecast button when it is in its normal, default state. Defaults | ||
| to `"images/ic_cast_white_24dp.png"`. | ||
| * **`$icon-chromecast-casting`** - the path to the icon image that is displayed when the | ||
| Chromecast button is in the "casting" state (when a Chromecast session is active and | ||
| connected). Defaults to `"images/ic_cast_connected_white_24dp.png"`. | ||
| user hovers over the Chromecast button when it is in its normal, default state. | ||
| Defaults to `"images/ic_cast_white_24dp.png"`. | ||
| * **`$icon-chromecast-casting`** - the path to the icon image that is displayed when | ||
| the Chromecast button is in the "casting" state (when a Chromecast session is active | ||
| and connected). Defaults to `"images/ic_cast_connected_white_24dp.png"`. | ||
| * **`$icon-chromecast-casting--hover`** - the path to the icon image that is displayed | ||
| when the user hovers over the Chromecast button when it is in the "casting" state (when | ||
| a Chromecast session is active and connected). Defaults to | ||
| when the user hovers over the Chromecast button when it is in the "casting" state | ||
| (when a Chromecast session is active and connected). Defaults to | ||
| `"images/ic_cast_connected_white_24dp.png"`. | ||
| * **`$chromecast-icon-size`** - the width and height of the icon (the button and icon is | ||
| a square). Defaults to `12px`. | ||
| * **`$chromecast-icon-size`** - the width and height of the icon (the button and icon | ||
| is a square). Defaults to `12px`. | ||
| * **`$chromecast-title-font-size`** - the font size of the title on the screen that is | ||
@@ -309,9 +332,9 @@ shown while a Chromecast session is active and connected. Defaults to `22px`. | ||
| that is shown while a Chromecast session is active and connected. Defaults to `18px`. | ||
| * **`$chromecast-poster-width`** - the width of the poster image on the screen that that | ||
| is shown while a Chromecast session is active and connected. Defaults to `100px`. | ||
| * **`$chromecast-poster-width`** - the width of the poster image on the screen that | ||
| that is shown while a Chromecast session is active and connected. Defaults to | ||
| `100px`. | ||
| * **`$chromecast-poster-max-height`** - the maximum height of the poster image on the | ||
| screen that is shown while a Chromecast session is active and connected. | ||
| Defaults to `180px`. | ||
| screen that is shown while a Chromecast session is active and connected. Defaults to | ||
| `180px`. | ||
| #### Images | ||
@@ -327,14 +350,15 @@ | ||
| In addition, the `ic_cast_white_24dp.png` icon image that is used as the default icon for | ||
| all four button states ("default", "default + hover", "casting", "casting + hover"), the `images` | ||
| folder contains grey, black, and blue versions of the icons. | ||
| all four button states ("default", "default + hover", "casting", "casting + hover"), the | ||
| `images` folder contains grey, black, and blue versions of the icons. | ||
| ### Events | ||
| *`chromecastConnected`: Triggers when Chromecast connected | ||
| *`chromecastDisconnected`: Triggers when Chromecast disconnected | ||
| *`chromecastDevicesAvailable`: Triggers on state change when Chromecast devices are available | ||
| *`chromecastDevicesUnavailable`: Triggers on state change when Chromecast devices are unavailable | ||
| *`chromecastRequested`: Triggers when the user has requested Chromecast playback using this | ||
| plugin's Chromecast button | ||
| * `chromecastConnected` - Triggers when Chromecast connected | ||
| * `chromecastDisconnected` - Triggers when Chromecast disconnected | ||
| * `chromecastDevicesAvailable` - Triggers on state change when Chromecast devices are | ||
| available | ||
| * `chromecastDevicesUnavailable` - Triggers on state change when Chromecast devices are | ||
| unavailable | ||
| * `chromecastRequested`: Triggers when the user has requested Chromecast playback using | ||
| this plugin's Chromecast button | ||
@@ -346,3 +370,2 @@ ## How do I contribute? | ||
| ## License | ||
@@ -360,1 +383,3 @@ | ||
| [contributing]: https://github.com/silvermine/silvermine-info#contributing | ||
| [chromecast-load-media]: https://developers.google.com/cast/docs/reference/web_sender/cast.framework.CastSession#loadMedia | ||
| [chromecast-load-request]: https://developers.google.com/cast/docs/reference/web_sender/chrome.cast.media.LoadRequest |
@@ -78,2 +78,5 @@ var ChromecastSessionManager = require('../chromecast/ChromecastSessionManager'), | ||
| this._requestCustomData = options.requestCustomDataFn || function() { /* noop */ }; | ||
| this._modifyLoadRequestFn = options.modifyLoadRequestFn || function(request) { | ||
| return request; | ||
| }; | ||
| // See `currentTime` function | ||
@@ -213,2 +216,3 @@ this._initialStartTime = options.startTime || 0; | ||
| request.currentTime = startTime; | ||
| request = this._modifyLoadRequestFn(request); | ||
@@ -219,2 +223,3 @@ this._isMediaLoading = true; | ||
| .then(function() { | ||
| this._clearSessionTimeout(); | ||
| if (!this._hasPlayedAnyItem) { | ||
@@ -221,0 +226,0 @@ // `triggerReady` is required here to notify the Video.js |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Number of lines in readme file
- increased by7.25%
370
Worsened metrics
- Total package byte prevSize
- decreased by-10.89%
578963
- Number of package files
- decreased by-2.38%
41
- Lines of code
- decreased by-10.83%
12451
No dependency changes