feat(packages): add chromecast support via remote playback API (#1348)

This commit is contained in:
Wesley Luyten
2026-04-17 14:51:16 -07:00
committed by GitHub
parent 8530316987
commit 31a005eeef
54 changed files with 1928 additions and 89 deletions
@@ -0,0 +1,10 @@
import { CastButtonElement } from '../../ui/cast-button/cast-button-element';
import { safeDefine } from '../safe-define';
safeDefine(CastButtonElement);
declare global {
interface HTMLElementTagNameMap {
[CastButtonElement.tagName]: CastButtonElement;
}
}
@@ -138,6 +138,11 @@ function getTemplateHTML() {
${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}
</media-captions-button>
<media-tooltip id="captions-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-cast-button commandfor="cast-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.cast.button)}">
${renderIcon('cast-enter', { class: cn(icon, iconState.cast.enter) })}
${renderIcon('cast-exit', { class: cn(icon, iconState.cast.exit) })}
</media-cast-button>
<media-tooltip id="cast-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.pip.button)}">
${renderIcon('pip-enter', { class: cn(icon, iconState.pip.off) })}
${renderIcon('pip-exit', { class: cn(icon, iconState.pip.on) })}
@@ -120,6 +120,12 @@ function getTemplateHTML() {
Toggle captions
</media-tooltip>
<media-cast-button commandfor="cast-tooltip" class="media-button media-button--subtle media-button--icon media-button--cast">
${renderIcon('cast-enter', { class: 'media-icon media-icon--cast-enter' })}
${renderIcon('cast-exit', { class: 'media-icon media-icon--cast-exit' })}
</media-cast-button>
<media-tooltip id="cast-tooltip" side="top" class="media-tooltip"></media-tooltip>
<media-pip-button commandfor="pip-tooltip" class="media-button media-button--subtle media-button--icon media-button--pip">
${renderIcon('pip-enter', { class: 'media-icon media-icon--pip-enter' })}
${renderIcon('pip-exit', { class: 'media-icon media-icon--pip-exit' })}
@@ -4,6 +4,7 @@
import { MediaContainerElement } from '../../media/container-element';
import { BufferingIndicatorElement } from '../../ui/buffering-indicator/buffering-indicator-element';
import { CaptionsButtonElement } from '../../ui/captions-button/captions-button-element';
import { CastButtonElement } from '../../ui/cast-button/cast-button-element';
import { FullscreenButtonElement } from '../../ui/fullscreen-button/fullscreen-button-element';
import { MuteButtonElement } from '../../ui/mute-button/mute-button-element';
import { PiPButtonElement } from '../../ui/pip-button/pip-button-element';
@@ -35,6 +36,7 @@ defineTime();
// Standalone elements.
safeDefine(BufferingIndicatorElement);
safeDefine(CaptionsButtonElement);
safeDefine(CastButtonElement);
safeDefine(FullscreenButtonElement);
safeDefine(MuteButtonElement);
safeDefine(PiPButtonElement);
@@ -133,6 +133,11 @@ function getTemplateHTML() {
${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}
</media-captions-button>
<media-tooltip id="captions-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-cast-button commandfor="cast-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.cast.button)}">
${renderIcon('cast-enter', { class: cn(icon, iconState.cast.enter) })}
${renderIcon('cast-exit', { class: cn(icon, iconState.cast.exit) })}
</media-cast-button>
<media-tooltip id="cast-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
<media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.pip.button)}">
${renderIcon('pip-enter', { class: cn(icon, iconState.pip.off) })}
${renderIcon('pip-exit', { class: cn(icon, iconState.pip.on) })}
+6
View File
@@ -114,6 +114,12 @@ function getTemplateHTML() {
</media-captions-button>
<media-tooltip id="captions-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip>
<media-cast-button commandfor="cast-tooltip" class="media-button media-button--subtle media-button--icon media-button--cast">
${renderIcon('cast-enter', { class: 'media-icon media-icon--cast-enter' })}
${renderIcon('cast-exit', { class: 'media-icon media-icon--cast-exit' })}
</media-cast-button>
<media-tooltip id="cast-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip>
<media-pip-button commandfor="pip-tooltip" class="media-button media-button--subtle media-button--icon media-button--pip">
${renderIcon('pip-enter', { class: 'media-icon media-icon--pip-enter' })}
${renderIcon('pip-exit', { class: 'media-icon media-icon--pip-exit' })}
+2
View File
@@ -4,6 +4,7 @@
import { MediaContainerElement } from '../../media/container-element';
import { BufferingIndicatorElement } from '../../ui/buffering-indicator/buffering-indicator-element';
import { CaptionsButtonElement } from '../../ui/captions-button/captions-button-element';
import { CastButtonElement } from '../../ui/cast-button/cast-button-element';
import { FullscreenButtonElement } from '../../ui/fullscreen-button/fullscreen-button-element';
import { GestureElement } from '../../ui/gesture/gesture-element';
import { HotkeyElement } from '../../ui/hotkey/hotkey-element';
@@ -37,6 +38,7 @@ defineTime();
// Standalone elements.
safeDefine(BufferingIndicatorElement);
safeDefine(CaptionsButtonElement);
safeDefine(CastButtonElement);
safeDefine(FullscreenButtonElement);
safeDefine(GestureElement);
safeDefine(HotkeyElement);