@mattebox/player-cast 0.1.0

package/dist/es2015/cast-button.js

@@ -0,0 +1,59 @@
+import { cast } from "./cast.js";
+import { Component } from "./component.js";
+import { icon } from "./icons.js";
+import { BUTTON_STYLE, iconSlots, show, style } from "./shared.js";
+//#region src/cast-button.ts
+const STATES = ["default", "active"];
+var MbxCastButton = class extends Component {
+	static get observedAttributes() {
+		return ["label-start", "label-stop"];
+	}
+	constructor() {
+		super();
+		this.api = null;
+		const root = this.attachShadow({ mode: "open" });
+		this.button = document.createElement("button");
+		this.button.type = "button";
+		this.button.setAttribute("part", "button");
+		this.slots = iconSlots(STATES, (state) => icon(state === "active" ? "cast-active" : "cast"));
+		for (const state of STATES) this.button.append(this.slots[state]);
+		this.button.addEventListener("click", () => {
+			const api = this.api;
+			if (api === null) return;
+			if (api.state() === "casting") api.stop();
+			else api.start(this);
+		});
+		root.append(style(BUTTON_STYLE), this.button);
+	}
+	attach(player) {
+		const api = cast(player);
+		this.api = api;
+		api.connect(this.getAttribute("receiver"), this.getAttribute("sdk"));
+		this.keep(api.watch(() => {
+			this.render();
+		}));
+		this.follow(player, () => {
+			this.render();
+		});
+	}
+	detach() {
+		var _this$api;
+		(_this$api = this.api) === null || _this$api === void 0 || _this$api.disconnect();
+		this.api = null;
+	}
+	render() {
+		var _player$player, _this$getAttribute, _this$getAttribute2;
+		const player = this.player;
+		const api = this.api;
+		if (player === null || api === null) return;
+		const state = api.state();
+		const active = state === "casting";
+		this.hidden = state === "unavailable";
+		this.button.disabled = !active && ((_player$player = player.player) === null || _player$player === void 0 ? void 0 : _player$player.session) == null;
+		this.button.toggleAttribute("aria-busy", state === "connecting");
+		show(this.slots, active ? "active" : "default");
+		this.button.setAttribute("aria-label", active ? (_this$getAttribute = this.getAttribute("label-stop")) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : "Stop casting" : (_this$getAttribute2 = this.getAttribute("label-start")) !== null && _this$getAttribute2 !== void 0 ? _this$getAttribute2 : "Cast");
+	}
+};
+//#endregion
+export { MbxCastButton };

package/dist/es2015/cast-screen.js

@@ -0,0 +1,151 @@
+import { cast } from "./cast.js";
+import { Component } from "./component.js";
+import { icon } from "./icons.js";
+import { BUTTON_STYLE, SLIDER_STYLE, describe, el, fill, format, iconSlots, show, style } from "./shared.js";
+import { slider } from "./slider.js";
+//#region src/cast-screen.ts
+const STATES = ["play", "pause"];
+const STEP = 5;
+const PAGE = 30;
+const STYLE = `${BUTTON_STYLE}
+${SLIDER_STYLE}
+:host {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  background: rgba(0, 0, 0, 0.85);
+  color: var(--mbx-text);
+  font: 400 15px/1.4 var(--mbx-font);
+  text-align: center;
+}
+:host([hidden]) { display: none; }
+[part~="box"] { display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(100%, 420px); }
+[part~="title"] { font-size: 18px; font-weight: 600; }
+[part~="row"] { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; }
+[part~="slider"] { flex: 1; }
+[part~="time"] { font-variant-numeric: tabular-nums; color: var(--mbx-muted); font-size: 13px; }
+[part~="stop"] {
+  height: 36px;
+  padding: 0 16px;
+  font: inherit;
+  font-weight: 600;
+  color: inherit;
+  background: transparent;
+  border: 1px solid currentColor;
+  border-radius: var(--mbx-radius);
+  cursor: pointer;
+}
+[part~="stop"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }
+[hidden] { display: none; }
+`;
+var MbxCastScreen = class extends Component {
+	static get observedAttributes() {
+		return [
+			"label",
+			"label-stop",
+			"label-play",
+			"label-pause",
+			"label-seek"
+		];
+	}
+	constructor() {
+		super();
+		this.api = null;
+		this.held = null;
+		const root = this.attachShadow({ mode: "open" });
+		const box = el("div", "box");
+		this.title_ = el("div", "title");
+		this.play = document.createElement("button");
+		this.play.type = "button";
+		this.play.setAttribute("part", "button play");
+		this.slots = iconSlots(STATES, icon);
+		for (const state of STATES) this.play.append(this.slots[state]);
+		this.play.addEventListener("click", () => {
+			var _this$api;
+			(_this$api = this.api) === null || _this$api === void 0 || _this$api.playPause();
+		});
+		this.seek = slider({
+			step: () => STEP,
+			page: () => PAGE,
+			onInput: (value) => {
+				var _this$api2;
+				if (this.seek.dragging()) {
+					this.held = value;
+					this.paint();
+					return;
+				}
+				this.held = null;
+				(_this$api2 = this.api) === null || _this$api2 === void 0 || _this$api2.seek(value);
+			},
+			onDrag: (on) => {
+				this.toggleAttribute("dragging", on);
+				if (!on) this.held = null;
+			}
+		});
+		this.time = el("span", "time");
+		this.row = el("div", "row");
+		this.row.append(this.play, this.seek.root, this.time);
+		this.stop = el("button", "stop");
+		this.stop.type = "button";
+		this.stop.addEventListener("click", () => {
+			var _this$api3;
+			(_this$api3 = this.api) === null || _this$api3 === void 0 || _this$api3.stop();
+		});
+		box.append(this.title_, this.row, this.stop);
+		root.append(style(STYLE), box);
+	}
+	/** Hidden before attaching: a constructor must not add attributes. */
+	connectedCallback() {
+		if (this.player === null) this.hidden = true;
+		super.connectedCallback();
+	}
+	attach(player) {
+		const api = cast(player);
+		this.api = api;
+		this.keep(api.watch(() => {
+			this.render();
+		}));
+		this.render();
+	}
+	detach() {
+		this.api = null;
+		this.hidden = true;
+	}
+	/** The slider and the time, from the receiver or from the held thumb. */
+	paint() {
+		var _this$held;
+		const api = this.api;
+		if (api === null) return;
+		const remote = api.remote();
+		const seekable = remote.loaded && Number.isFinite(remote.duration);
+		this.seek.root.hidden = !seekable;
+		this.time.hidden = !seekable;
+		if (!seekable) return;
+		const at = (_this$held = this.held) !== null && _this$held !== void 0 ? _this$held : remote.time;
+		this.seek.range(0, remote.duration);
+		this.seek.set(at, describe(at, remote.duration));
+		this.time.textContent = `${format(at)} / ${format(remote.duration)}`;
+	}
+	render() {
+		var _this$getAttribute, _this$getAttribute2, _this$getAttribute3, _this$getAttribute4, _api$device;
+		const api = this.api;
+		if (api === null) return;
+		const remote = api.remote();
+		const state = remote.loaded && !remote.paused ? "pause" : "play";
+		show(this.slots, state);
+		this.play.setAttribute("aria-label", (_this$getAttribute = this.getAttribute(`label-${state}`)) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : state === "play" ? "Play" : "Pause");
+		this.seek.label((_this$getAttribute2 = this.getAttribute("label-seek")) !== null && _this$getAttribute2 !== void 0 ? _this$getAttribute2 : "Seek");
+		this.stop.textContent = (_this$getAttribute3 = this.getAttribute("label-stop")) !== null && _this$getAttribute3 !== void 0 ? _this$getAttribute3 : "Stop casting";
+		const casting = api.state() === "casting";
+		this.hidden = !casting;
+		if (!casting) return;
+		this.title_.textContent = fill((_this$getAttribute4 = this.getAttribute("label")) !== null && _this$getAttribute4 !== void 0 ? _this$getAttribute4 : "Casting to {device}", { device: (_api$device = api.device()) !== null && _api$device !== void 0 ? _api$device : "" });
+		this.play.disabled = !remote.loaded;
+		this.paint();
+	}
+};
+//#endregion
+export { MbxCastScreen };

package/dist/es2015/cast.js

@@ -0,0 +1,299 @@
+//#region src/cast.ts
+/** Whether the session is live: the engine's `live` namespace, once it has an edge. */
+function live(engine) {
+	const api = engine === null || engine === void 0 ? void 0 : engine.live;
+	return api !== void 0 && api.edge !== null;
+}
+/** The Default Media Receiver: Google's player, which plays HLS and DASH by itself. */
+const DEFAULT_RECEIVER = "CC1AD845";
+const SDK_URL = "https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1";
+let framework = null;
+let configured = null;
+let remotePlayer = null;
+let remoteController = null;
+const watchers = /* @__PURE__ */ new Set();
+/** The player whose session this is, so two players on a page do not both take a session. */
+let owner = null;
+/** The receiver's last known playback, read while it reports and kept once it stops. */
+const NOTHING = {
+	loaded: false,
+	paused: true,
+	time: 0,
+	duration: NaN
+};
+let last = NOTHING;
+function globals() {
+	return globalThis;
+}
+function notify() {
+	for (const fn of [...watchers]) fn();
+}
+/**
+* The framework, once the page has it. Resolves null where the SDK never
+* arrives: a browser without Cast, a page whose CSP refused the script, or
+* `sdk="none"` with no script of the page's own.
+*/
+function load(sdk) {
+	var _held$cast;
+	if (framework !== null) return framework;
+	const held = globals();
+	if (((_held$cast = held.cast) === null || _held$cast === void 0 ? void 0 : _held$cast.framework) !== void 0) {
+		framework = Promise.resolve(held.cast.framework);
+		return framework;
+	}
+	if (!("chrome" in held)) {
+		framework = Promise.resolve(null);
+		return framework;
+	}
+	framework = new Promise((resolve) => {
+		const previous = held.__onGCastApiAvailable;
+		held.__onGCastApiAvailable = (available) => {
+			var _globals$cast$framewo, _globals$cast;
+			previous === null || previous === void 0 || previous(available);
+			resolve(available ? (_globals$cast$framewo = (_globals$cast = globals().cast) === null || _globals$cast === void 0 ? void 0 : _globals$cast.framework) !== null && _globals$cast$framewo !== void 0 ? _globals$cast$framewo : null : null);
+		};
+		if (sdk === "none") return;
+		const script = document.createElement("script");
+		script.src = SDK_URL;
+		script.async = true;
+		script.addEventListener("error", () => resolve(null));
+		document.head.append(script);
+	});
+	return framework;
+}
+/** The context, set up once per page. */
+function context(fw, receiver) {
+	const ctx = fw.CastContext.getInstance();
+	const wanted = receiver !== null && receiver !== void 0 ? receiver : DEFAULT_RECEIVER;
+	if (configured === null) {
+		var _globals$chrome$cast$, _globals$chrome;
+		const policy = (_globals$chrome$cast$ = (_globals$chrome = globals().chrome) === null || _globals$chrome === void 0 || (_globals$chrome = _globals$chrome.cast) === null || _globals$chrome === void 0 ? void 0 : _globals$chrome.AutoJoinPolicy.ORIGIN_SCOPED) !== null && _globals$chrome$cast$ !== void 0 ? _globals$chrome$cast$ : "origin_scoped";
+		ctx.setOptions({
+			receiverApplicationId: wanted,
+			autoJoinPolicy: policy
+		});
+		configured = wanted;
+		ctx.addEventListener(fw.CastContextEventType.CAST_STATE_CHANGED, notify);
+		ctx.addEventListener(fw.CastContextEventType.SESSION_STATE_CHANGED, (event) => {
+			var _event$sessionState;
+			onSession(fw, ctx, (_event$sessionState = event.sessionState) !== null && _event$sessionState !== void 0 ? _event$sessionState : "");
+		});
+		remotePlayer = new fw.RemotePlayer();
+		remoteController = new fw.RemotePlayerController(remotePlayer);
+		remoteController.addEventListener(fw.RemotePlayerEventType.ANY_CHANGE, () => {
+			const remote = remotePlayer;
+			if ((remote === null || remote === void 0 ? void 0 : remote.isConnected) === true && remote.isMediaLoaded) last = {
+				loaded: true,
+				paused: remote.isPaused,
+				time: remote.currentTime,
+				duration: remote.duration > 0 ? remote.duration : Number.POSITIVE_INFINITY
+			};
+			notify();
+		});
+	} else if (receiver !== null && receiver !== configured) console.error(`mattebox-player: the Cast context already uses receiver ${configured}`);
+	return ctx;
+}
+function onSession(fw, ctx, state) {
+	const states = fw.SessionState;
+	if (state === states.SESSION_STARTED && owner !== null && owner.pending) {
+		last = NOTHING;
+		owner.begin(ctx);
+	} else if (state === states.SESSION_RESUMED) {
+		var _ctx$getCurrentSessio;
+		const playing = (_ctx$getCurrentSessio = ctx.getCurrentSession()) === null || _ctx$getCurrentSessio === void 0 || (_ctx$getCurrentSessio = _ctx$getCurrentSessio.getMediaSession()) === null || _ctx$getCurrentSessio === void 0 || (_ctx$getCurrentSessio = _ctx$getCurrentSessio.media) === null || _ctx$getCurrentSessio === void 0 ? void 0 : _ctx$getCurrentSessio.contentId;
+		const found = [...connected].find((cast) => cast.plays(playing));
+		if (found !== void 0 && owner === null) {
+			owner = found;
+			found.adopt();
+		}
+	} else if (state === states.SESSION_ENDED || state === states.SESSION_START_FAILED) {
+		const ended = owner;
+		owner = null;
+		ended === null || ended === void 0 || ended.end(state === states.SESSION_ENDED);
+	}
+	notify();
+}
+/** One per player, found again by its button and its screen. Weak, so a player that leaves is not held. */
+const players = /* @__PURE__ */ new WeakMap();
+/** The players with a cast button attached, for a session Chrome rejoins on load. */
+const connected = /* @__PURE__ */ new Set();
+var CastOf = class {
+	constructor(player) {
+		this.player = player;
+		this.target = null;
+		this.ctx = null;
+		this.fw = null;
+		this.pending = false;
+		this.casting = false;
+		this.handoff = null;
+	}
+	connect(receiver, sdk) {
+		connected.add(this);
+		load(sdk).then((fw) => {
+			if (fw === null) return;
+			this.fw = fw;
+			this.ctx = context(fw, receiver);
+			notify();
+		});
+	}
+	disconnect() {
+		connected.delete(this);
+	}
+	state() {
+		const ctx = this.ctx;
+		const fw = this.fw;
+		if (ctx === null || fw === null) return "unavailable";
+		if (this.casting) return "casting";
+		const cast = ctx.getCastState();
+		if (cast === fw.CastState.NO_DEVICES_AVAILABLE) return "unavailable";
+		if (cast === fw.CastState.CONNECTING || this.pending) return "connecting";
+		return "idle";
+	}
+	device() {
+		var _this$ctx$getCurrentS, _this$ctx;
+		if (!this.casting) return null;
+		return (_this$ctx$getCurrentS = (_this$ctx = this.ctx) === null || _this$ctx === void 0 || (_this$ctx = _this$ctx.getCurrentSession()) === null || _this$ctx === void 0 ? void 0 : _this$ctx.getCastDevice().friendlyName) !== null && _this$ctx$getCurrentS !== void 0 ? _this$ctx$getCurrentS : null;
+	}
+	remote() {
+		return last;
+	}
+	start(target) {
+		const ctx = this.ctx;
+		if (ctx === null || this.casting) return;
+		if (owner !== null && owner !== this) {
+			ctx.endCurrentSession(true);
+			return;
+		}
+		this.target = target;
+		this.pending = true;
+		owner = this;
+		notify();
+		ctx.requestSession().catch(() => {
+			if (owner === this) owner = null;
+			this.pending = false;
+			notify();
+		});
+	}
+	stop() {
+		var _this$ctx2;
+		if (this.casting) (_this$ctx2 = this.ctx) === null || _this$ctx2 === void 0 || _this$ctx2.endCurrentSession(true);
+	}
+	playPause() {
+		if (this.casting) remoteController === null || remoteController === void 0 || remoteController.playOrPause();
+	}
+	seek(time) {
+		if (!this.casting || remotePlayer === null) return;
+		remotePlayer.currentTime = time;
+		remoteController === null || remoteController === void 0 || remoteController.seek();
+	}
+	watch(fn) {
+		watchers.add(fn);
+		return () => {
+			watchers.delete(fn);
+		};
+	}
+	/** Whether this player's session plays `url`. */
+	plays(url) {
+		var _this$player$player;
+		return url !== void 0 && ((_this$player$player = this.player.player) === null || _this$player$player === void 0 || (_this$player$player = _this$player$player.session) === null || _this$player$player === void 0 ? void 0 : _this$player$player.source.url) === url;
+	}
+	/** A session started for this player: freeze the picture and send the source. */
+	begin(ctx) {
+		var _this$player$player$s, _this$player$player2, _this$target, _ctx$getCurrentSessio2;
+		this.pending = false;
+		const session = (_this$player$player$s = (_this$player$player2 = this.player.player) === null || _this$player$player2 === void 0 ? void 0 : _this$player$player2.session) !== null && _this$player$player$s !== void 0 ? _this$player$player$s : null;
+		const video = this.player.video;
+		const time = video.currentTime;
+		const autoplay = !video.paused;
+		this.freeze();
+		if (session === null) return;
+		const request = this.request(session.source, time, autoplay);
+		if (request === null) return;
+		const event = new CustomEvent("castload", {
+			detail: request,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		});
+		if (((_this$target = this.target) === null || _this$target === void 0 ? void 0 : _this$target.dispatchEvent(event)) === false) return;
+		(_ctx$getCurrentSessio2 = ctx.getCurrentSession()) === null || _ctx$getCurrentSessio2 === void 0 || _ctx$getCurrentSessio2.loadMedia(request).catch(() => {});
+	}
+	/** A session Chrome rejoined, already playing this player's source. */
+	adopt() {
+		this.freeze();
+	}
+	freeze() {
+		const engine = this.player.engine;
+		this.handoff = { live: live(engine) };
+		this.player.video.pause();
+		engine === null || engine === void 0 || engine.suspend();
+		this.casting = true;
+		this.player.toggleAttribute("casting", true);
+		notify();
+	}
+	/** The session ended: give the video back where the receiver left it. */
+	end(cleanly) {
+		this.pending = false;
+		if (!this.casting) return;
+		this.casting = false;
+		const handoff = this.handoff;
+		this.handoff = null;
+		const video = this.player.video;
+		const engine = this.player.engine;
+		engine === null || engine === void 0 || engine.resume();
+		this.player.removeAttribute("casting");
+		if (!cleanly || !last.loaded) return;
+		if ((handoff === null || handoff === void 0 ? void 0 : handoff.live) !== true && Number.isFinite(last.time)) video.currentTime = last.time;
+		if (!last.paused) video.play().catch(() => void 0);
+	}
+	/** The load request: the source, the time, the stream type, and the video's own text tracks. */
+	request(source, time, autoplay) {
+		var _globals$chrome2, _source$type;
+		const media = (_globals$chrome2 = globals().chrome) === null || _globals$chrome2 === void 0 || (_globals$chrome2 = _globals$chrome2.cast) === null || _globals$chrome2 === void 0 ? void 0 : _globals$chrome2.media;
+		if (media === void 0) return null;
+		const engine = this.player.engine;
+		const type = (_source$type = source.type) !== null && _source$type !== void 0 ? _source$type : "";
+		const info = new media.MediaInfo(source.url, type);
+		info.streamType = live(engine) ? media.StreamType.LIVE : media.StreamType.BUFFERED;
+		if (/mpegurl/i.test(type)) {
+			const ts = tsSegments(engine);
+			info.hlsSegmentFormat = ts ? "ts" : "fmp4";
+			info.hlsVideoSegmentFormat = ts ? "mpeg2_ts" : "fmp4";
+		}
+		const tracks = [];
+		for (const node of this.player.video.querySelectorAll("track[src]")) {
+			const track = node;
+			if (track.kind !== "subtitles" && track.kind !== "captions") continue;
+			const out = new media.Track(tracks.length + 1, media.TrackType.TEXT);
+			out.trackContentId = track.src;
+			out.trackContentType = "text/vtt";
+			out.subtype = track.kind === "captions" ? media.TextTrackType.CAPTIONS : media.TextTrackType.SUBTITLES;
+			out.name = track.label;
+			out.language = track.srclang;
+			tracks.push(out);
+		}
+		info.tracks = tracks.length > 0 ? tracks : null;
+		const request = new media.LoadRequest(info);
+		request.currentTime = time;
+		request.autoplay = autoplay;
+		return request;
+	}
+};
+/** Whether the engine's presentation carries MPEG-TS renditions. */
+function tsSegments(engine) {
+	const presentation = engine === null || engine === void 0 ? void 0 : engine.stats.snapshot().presentation;
+	if (presentation === null || presentation === void 0) return false;
+	for (const period of presentation.periods) for (const track of period.tracks) for (const rendition of track.renditions) if (/mp2t/i.test(rendition.mimeType)) return true;
+	return false;
+}
+/** The player's Cast, one per player, shared by its cast button and cast screen. */
+function cast(player) {
+	let held = players.get(player);
+	if (held === void 0) {
+		held = new CastOf(player);
+		players.set(player, held);
+	}
+	return held;
+}
+//#endregion
+export { cast };

package/dist/es2015/component.js

@@ -0,0 +1,84 @@
+import { PLAYER, findPlayer } from "./host.js";
+//#region src/component.ts
+var Component = class extends HTMLElement {
+	constructor() {
+		super();
+		this.player = null;
+		this.offs = [];
+		this.epoch = 0;
+	}
+	connectedCallback() {
+		const found = findPlayer(this);
+		if (found === null) return;
+		this.epoch += 1;
+		const epoch = this.epoch;
+		const attach = () => {
+			if (epoch !== this.epoch || !this.isConnected) return;
+			customElements.upgrade(found);
+			if (!("video" in found)) return;
+			this.player = found;
+			this.attach(this.player);
+		};
+		if ("video" in found) attach();
+		else customElements.whenDefined(PLAYER).then(attach);
+	}
+	disconnectedCallback() {
+		this.epoch += 1;
+		for (const off of this.offs) off();
+		this.offs = [];
+		const player = this.player;
+		if (player === null) return;
+		this.player = null;
+		this.detach(player);
+	}
+	attributeChangedCallback() {
+		if (this.player !== null) this.render();
+	}
+	/** Adds `fn` for every name on `target`, to be removed on detach. */
+	listen(target, names, fn) {
+		for (const name of names) target.addEventListener(name, fn);
+		this.offs.push(() => {
+			for (const name of names) target.removeEventListener(name, fn);
+		});
+	}
+	/** Keeps `off` to run on detach. */
+	keep(off) {
+		this.offs.push(off);
+	}
+	/**
+	* Runs `fn` over the current engine now and on every session change,
+	* running what the last call returned first, so a control's engine
+	* subscriptions live exactly as long as the session. Detach runs it too.
+	*/
+	follow(player, fn) {
+		let off;
+		const run = () => {
+			off === null || off === void 0 || off();
+			off = fn(player.engine);
+		};
+		this.listen(player, ["sourcechange"], run);
+		this.offs.push(() => {
+			off === null || off === void 0 || off();
+			off = void 0;
+		});
+		run();
+	}
+	/** Runs `fn` when any of `names` changes on `target`, or under it with `subtree`, until detach. */
+	observe(target, names, fn, subtree = false) {
+		const observer = new MutationObserver(fn);
+		observer.observe(target, {
+			attributes: true,
+			attributeFilter: [...names],
+			subtree
+		});
+		this.offs.push(() => {
+			observer.disconnect();
+		});
+	}
+	/** The control left its player. Listeners are already gone; undo anything else. */
+	detach(_player) {}
+	/** Draws the current state. Called on every observed attribute change while attached. */
+	render() {}
+};
+//#endregion
+export { Component };

package/dist/es2015/host.js

@@ -0,0 +1,19 @@
+//#region src/host.ts
+const PLAYER = "mattebox-player";
+/** The parent, or the host of the shadow root `node` sits in, or null at the document. */
+function above(node) {
+	const parent = node.parentNode;
+	if (parent !== null) return parent;
+	return node instanceof ShadowRoot ? node.host : null;
+}
+/** The nearest player above `node`, or null outside one. It may not be upgraded yet. */
+function findPlayer(node) {
+	let current = node;
+	while (current !== null) {
+		if (current instanceof HTMLElement && current.localName === "mattebox-player") return current;
+		current = above(current);
+	}
+	return null;
+}
+//#endregion
+export { PLAYER, findPlayer };

package/dist/es2015/icons.js

@@ -0,0 +1,23 @@
+//#region src/icons.ts
+/** Each glyph's subpaths joined into one `d`, drawn even-odd like the player's. */
+const PATHS = {
+	play: "M10.6667 6.6548C10.6667 6.10764 11.2894 5.79346 11.7295 6.11862L24.377 15.4634C24.7377 15.7298 24.7377 16.2692 24.3771 16.5357L11.7295 25.8813C11.2895 26.2065 10.6667 25.8923 10.6667 25.3451L10.6667 6.6548Z",
+	pause: "M8.66667 6.66667C8.29848 6.66667 8 6.96514 8 7.33333V24.6667C8 25.0349 8.29848 25.3333 8.66667 25.3333H12.6667C13.0349 25.3333 13.3333 25.0349 13.3333 24.6667V7.33333C13.3333 6.96514 13.0349 6.66667 12.6667 6.66667H8.66667Z M19.3333 6.66667C18.9651 6.66667 18.6667 6.96514 18.6667 7.33333V24.6667C18.6667 25.0349 18.9651 25.3333 19.3333 25.3333H23.3333C23.7015 25.3333 24 25.0349 24 24.6667V7.33333C24 6.96514 23.7015 6.66667 23.3333 6.66667H19.3333Z",
+	cast: "M4 6h24v18H20v-2h6V8H6v1H4V6zM4 21a3 3 0 0 1 3 3H4zM4 15a9 9 0 0 1 9 9h-2a7 7 0 0 0-7-7zM4 10a14 14 0 0 1 14 14h-2A12 12 0 0 0 4 12z",
+	"cast-active": "M4 6h24v18H20A16 16 0 0 0 4 8zM4 21a3 3 0 0 1 3 3H4zM4 15a9 9 0 0 1 9 9h-2a7 7 0 0 0-7-7zM4 10a14 14 0 0 1 14 14h-2A12 12 0 0 0 4 12z"
+};
+const SVG = "http://www.w3.org/2000/svg";
+/** A glyph, hidden from the accessibility tree: the button it sits in carries the name. */
+function icon(name) {
+	const svg = document.createElementNS(SVG, "svg");
+	svg.setAttribute("viewBox", "0 0 32 32");
+	svg.setAttribute("aria-hidden", "true");
+	svg.setAttribute("part", "icon");
+	const path = document.createElementNS(SVG, "path");
+	path.setAttribute("fill-rule", "evenodd");
+	path.setAttribute("d", PATHS[name]);
+	svg.append(path);
+	return svg;
+}
+//#endregion
+export { icon };

package/dist/es2015/index.js

@@ -0,0 +1,17 @@
+import { MbxCastButton } from "./cast-button.js";
+import { MbxCastScreen } from "./cast-screen.js";
+//#region src/index.ts
+/**
+* @mattebox/player-cast: <mbx-cast-button> and <mbx-cast-screen>, Chromecast
+* from the player over Google's sender SDK. Importing this module registers
+* both elements; that is the package's one side effect. It is a package of
+* its own because the button loads Google's script onto the page, which the
+* player never does on an integrator's behalf: the AirPlay button, over
+* Safari's own API, ships with the player.
+*/
+const CAST_BUTTON = "mbx-cast-button";
+const CAST_SCREEN = "mbx-cast-screen";
+if (customElements.get("mbx-cast-button") === void 0) customElements.define(CAST_BUTTON, MbxCastButton);
+if (customElements.get("mbx-cast-screen") === void 0) customElements.define(CAST_SCREEN, MbxCastScreen);
+//#endregion
+export { CAST_BUTTON, CAST_SCREEN, MbxCastButton, MbxCastScreen };