feat(cast): add customizable google cast button and native launcher #85

jboix · 2025-08-25T09:21:15Z

Description

Resolves #75 by introducing two new components:

GoogleCastButton: a customizable Cast button based on SvgButton, allowing developers to integrate with their own visual identity. The icon can be customized via idleIcon and activeIcon options.
GoogleCastLauncher: a wrapper around the native <google-cast-launcher> element for a plug-and-play experience (the default component).

Changes Made

The enableDefaultCastButton option has been renamed enableDefaultCastLauncher.
Utilized the Video.js plugin state API to monitor session state changes in the google-cast-sender plugin. See: https://videojs.com/guides/plugins/#statefulness
Added a statechanged listener to the customizable GoogleCastButton to reflect session state using default active and idle SVGs.
Enabled configuration of both active and idle SVGs via the button options.
Added endSessionOnClick to the GoogleCastButton options to allow terminating the session without showing the session context menu. Default is false.

Checklist

I have followed the project's style and contribution guidelines.
I have performed a self-review of my own changes.
I have made corresponding changes to the documentation.
I have added tests that prove my fix is effective or that my feature works.

github-actions · 2025-08-25T09:22:43Z

Coverage Report

Status	Category	Percentage	Covered / Total
🔵	Lines	96.86%	4659 / 4810
🔵	Statements	96.86%	4659 / 4810
🔵	Functions	94.63%	335 / 354
🔵	Branches	88.87%	551 / 620

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
packages/google-cast-sender/src/google-cast-sender.js	98.5%	94.11%	95.65%	98.5%	169-170, 305, 309, 454-455
packages/google-cast-sender/src/components/google-cast-button.js	98.62%	94.11%	100%	98.62%	74-75
packages/google-cast-sender/src/components/google-cast-launcher.js	92.78%	62.5%	100%	92.78%	39-40, 43-44, 66-68

Generated in workflow #212 for commit aeca0ac by the Vitest Coverage Report Action

github-actions · 2025-08-25T09:23:01Z

PR Preview Action v1.6.2
🚀 View preview at https://SRGSSR.github.io/pillarbox-web-suite/pr-preview/pr-85/
Built to branch `gh-pages` at 2025-09-17 11:51 UTC. Preview will be ready when the GitHub Pages deployment is complete.

amtins

Thanks for the PR and the work done, I've a few general comments:

there is indentation edits that don't affect behavior but make the diff harder to review and clutter history
could you create a separate PR for the svg-button to keep reviews atomic
deviation from original idea:

import "./scss/google-cast-sender.scss";
import "./src/google-cast-sender.js";

window.player = pillarbox("player", {
  plugins: {
    googleCastSender: true
  },
});

jboix · 2025-09-12T09:56:09Z

there is indentation edits that don't affect behavior but make the diff harder to review and clutter history

For the destructred objects in the GoogleCastSender class I've revert the changes and changed my IDE configuration so that it doesn't bother when reformatting again.

For the SCSS file the the .editorconfig has it set to 2 spaces across the project. The SCSS was using 4 (not sure why 🤷), but 2 spaces should be the default.

could you create a separate PR for the svg-button to keep reviews atomic

Sure, I'll have to put this in hold though since it needs those changes.

deviation from original idea:

import "./scss/google-cast-sender.scss";
import "./src/google-cast-sender.js";

window.player = pillarbox("player", {
  plugins: {
    googleCastSender: true
  },
});

I didn't understand it like that but I like the idea, however it would come at the cost of the integrators not being able to tree shake the launcher off the final build even if they decide to use the customisable button.

It is also possible to do this without reintroducing the flag if we want to, so that the button import substitute the launcher automatically.

jboix · 2025-09-16T06:57:26Z

On hold until #97 is merged.

Resolves #75 by introducing two new components: - `GoogleCastButton`: a customizable Cast button based on SvgButton, allowing developers to integrate with their own visual identity. The icon can be customized via `icon` or `iconName`. - `GoogleCastLauncher`: a wrapper around the native `<google-cast-launcher>` element for a plug-and-play experience. The enableDefaultCastButton option has been renamed enableDefaultCastLauncher.

- Utilized the Video.js plugin state API to monitor session state changes in the `google-cast-sender` plugin. See: https://videojs.com/guides/plugins/#statefulness - Added a `statechanged` listener to the customizable `GoogleCastButton` to reflect session state using default active and idle SVGs. - Enabled configuration of both active and idle SVGs via the button options.

…ogle-cast-button - Added `endSessionOnClick` to the `GoogleCastButton` options to allow terminating the session without showing the session context menu. Default is `false`.

amtins · 2025-09-18T14:02:23Z

packages/google-cast-sender/README.md

 ```javascript
 import videojs from 'video.js';
 import '@srgssr/google-cast-sender';
+import '@srgssr/google-cast-sender/launcher';


oversight ?

amtins · 2025-09-23T09:26:19Z

packages/google-cast-sender/src/components/google-cast-button.js

+   * Dispose of the GoogleCastButton instance.
+   */
+  dispose() {
+    this.googleCastSender().off('statechanged', this.onPlaylistStateChanged_);


wrong copy-tomato-sauce-pasta ?

amtins · 2025-09-23T09:28:12Z

packages/google-cast-sender/src/components/google-cast-button.js

+      this.options().endSessionOnClick &&
+      this.player().hasClass('vjs-chromecast-connected')
+    ) {
+      this.player().googleCastSender().endCurrentSession();


why not using googleCastSender since it's defined above?

amtins · 2025-09-23T10:14:27Z

packages/google-cast-sender/src/components/google-cast-button.js

+  idleIcon: {
+    iconName: 'google-cast',
+    icon: googleCastIconIdle
+  },


In retrospective, I find the semantics strange. We are in the context of an icon, but we repeat icon in that same context. Why not something like :

idleIcon: { name: 'google-cast-active', src: googleCastIconActive }

Also is it really an icon or a button? I should have noticed this in:

pillarbox-web-suite/packages/svg-button/src/svg-button.js

Lines 36 to 37 in bb08391

* @param {Object | undefined} options Configuration options for the button.

* @param {SVGElement|string|URL} [options.icon] An optional icon to be loaded into the button.

amtins · 2025-09-24T08:08:58Z

packages/google-cast-sender/README.md

+    googleCastButton: {
+      idleIcon: {
+        icon: idleIcon,
+        iconName: 'custom-idle'
+      },
+      activeIcon: {
+        icon: activeIcon,
+        iconName: 'custom-active'
      }
    }
+  },


shouldn't you register it into the control bar like this?

controlBarChildren.splice(controlBarChildren.length - 1, 0, 'googleCastButton');

amtins · 2025-09-24T08:09:45Z

packages/google-cast-sender/package.json

    "test": "vitest run --silent --coverage --coverage.reporter text"
  },
+  "dependencies": {
+    "@srgssr/svg-button": "^1.0.0"


should be 1.1.0

jboix self-assigned this Aug 25, 2025

jboix requested a review from amtins August 25, 2025 09:21

jboix force-pushed the feat/google-cast-button branch 2 times, most recently from f6db814 to f93cffd Compare August 27, 2025 13:30

jboix changed the title ~~feat(cast): add customizable Google Cast button and native launcher~~ feat(cast): add customizable google cast button and native launcher Aug 27, 2025

jboix force-pushed the feat/google-cast-button branch 2 times, most recently from 89c2811 to c0ca45c Compare August 27, 2025 13:45

amtins requested changes Sep 11, 2025

View reviewed changes

jboix force-pushed the feat/google-cast-button branch from c0ca45c to 8ce5354 Compare September 16, 2025 06:56

jboix marked this pull request as draft September 16, 2025 06:57

jboix force-pushed the feat/google-cast-button branch from 8ce5354 to 6dfbe21 Compare September 17, 2025 08:25

jboix marked this pull request as ready for review September 17, 2025 10:54

jboix marked this pull request as draft September 17, 2025 10:55

jboix added 3 commits September 17, 2025 13:49

feat(cast): add option to end the current session on click for the go…

aeca0ac

…ogle-cast-button - Added `endSessionOnClick` to the `GoogleCastButton` options to allow terminating the session without showing the session context menu. Default is `false`.

jboix force-pushed the feat/google-cast-button branch from 6dfbe21 to aeca0ac Compare September 17, 2025 11:50

jboix marked this pull request as ready for review September 17, 2025 11:52

amtins reviewed Sep 18, 2025

View reviewed changes

amtins reviewed Sep 23, 2025

View reviewed changes

amtins reviewed Sep 24, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(cast): add customizable google cast button and native launcher #85

feat(cast): add customizable google cast button and native launcher #85

Uh oh!

jboix commented Aug 25, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Aug 25, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Aug 25, 2025 •

edited

Loading

Built to branch `gh-pages` at 2025-09-17 11:51 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

Uh oh!

amtins left a comment

Uh oh!

jboix commented Sep 12, 2025 •

edited

Loading

Uh oh!

jboix commented Sep 16, 2025

Uh oh!

amtins Sep 18, 2025

Uh oh!

amtins Sep 23, 2025

Uh oh!

amtins Sep 23, 2025

Uh oh!

amtins Sep 23, 2025

Uh oh!

amtins Sep 24, 2025

Uh oh!

amtins Sep 24, 2025

Uh oh!

Uh oh!

	* @param {Object \| undefined} options Configuration options for the button.
	* @param {SVGElement\|string\|URL} [options.icon] An optional icon to be loaded into the button.

feat(cast): add customizable google cast button and native launcher #85

Are you sure you want to change the base?

feat(cast): add customizable google cast button and native launcher #85

Uh oh!

Conversation

jboix commented Aug 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changes Made

Checklist

Uh oh!

github-actions bot commented Aug 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Coverage Report

Uh oh!

github-actions bot commented Aug 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Built to branch gh-pages at 2025-09-17 11:51 UTC. Preview will be ready when the GitHub Pages deployment is complete.

Uh oh!

amtins left a comment

Choose a reason for hiding this comment

Uh oh!

jboix commented Sep 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jboix commented Sep 16, 2025

Uh oh!

amtins Sep 18, 2025

Choose a reason for hiding this comment

Uh oh!

amtins Sep 23, 2025

Choose a reason for hiding this comment

Uh oh!

amtins Sep 23, 2025

Choose a reason for hiding this comment

Uh oh!

amtins Sep 23, 2025

Choose a reason for hiding this comment

Uh oh!

amtins Sep 24, 2025

Choose a reason for hiding this comment

Uh oh!

amtins Sep 24, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jboix commented Aug 25, 2025 •

edited

Loading

github-actions bot commented Aug 25, 2025 •

edited

Loading

github-actions bot commented Aug 25, 2025 •

edited

Loading

Built to branch `gh-pages` at 2025-09-17 11:51 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

jboix commented Sep 12, 2025 •

edited

Loading