@tidal-music/player-web-components 0.2.1 → 0.3.0

package/dist/index.js

@@ -1,11 +1,369 @@
-import { n as s, o as r, p as i, r as t, s as d, b as n, U as o, Q as l } from "./index-DHnVYeec.js";
-export {
-  s as TidalCurrentTime,
-  r as TidalDurationTime,
-  i as TidalPlayButton,
-  t as TidalProgressBar,
-  d as TidalVideoView,
-  n as events,
-  o as setCredentialsProvider,
-  l as setEventSender
+import { a as e, d as t, i as n, r, t as i } from "./state-BT7sE_jc-iVaBwnBC.js";
+import { t as a } from "./pushkin-C7W2HCqN-BHqS8oLX.js";
+import { r as o, t as s } from "./audio-context-store-Bf50rcqa-DUuCXOzU.js";
+import { s as c } from "./load-L6Urw8gV-CQAMBwcN.js";
+//#region ../player/dist/index.js
+function l() {
+	return i.activePlayer?.getPosition() ?? 0;
+}
+function u() {
+	return i.activePlayer?.currentMediaProduct ?? null;
+}
+function d() {
+	let e = i.activePlayer;
+	if (e) {
+		let t = n.getMediaProductTransition(e.currentStreamingSessionId);
+		if (t) return t.playbackContext;
+	}
+}
+function f() {
+	return i.activePlayer?.playbackState ?? "IDLE";
+}
+function p() {
+	return i.activePlayer?.pause();
+}
+async function m() {
+	await a.synchronize();
+	let { activePlayer: t } = i;
+	return t ? (e.dispatchEvent(new CustomEvent("user-action")), t.play()) : Promise.reject(/* @__PURE__ */ Error("No active player"));
+}
+async function h(e) {
+	let { activePlayer: t } = i;
+	return t?.seek(e);
+}
+function g(e) {
+	t.credentialsProvider = e;
+}
+function _(e) {
+	r.eventSender = e;
+}
+a.synchronize().then().catch(console.error);
+function v() {
+	let { activePlayer: e } = i;
+	if (!e) return null;
+	switch (e.name) {
+		case "browserPlayer": return e.mediaElement;
+		case "shakaPlayer": return e.mediaElement;
+		default: return null;
+	}
+}
+function y() {
+	let e = localStorage.getItem("ssuid");
+	try {
+		e && indexedDB.deleteDatabase("streaming-sessions-" + e);
+	} catch (t) {
+		console.warn(`DB streaming-sessions-${e} could not be deleted`), console.error(t);
+	}
+}
+o().then().catch(console.error), s().then().catch(console.error), y();
+//#endregion
+//#region src/helpers.ts
+var b = String.raw, x = String.raw;
+function S(e) {
+	if (e === void 0) return "0:00";
+	let t = parseInt(String(e), 10), n = Math.floor(t / 3600), r = Math.floor((t - n * 3600) / 60), i = t - n * 3600 - r * 60, a;
+	return a = n === 0 ? `${r}:` : `${n}:${r < 10 ? `0${r}` : String(r)}:`, a += i < 10 ? `0${i}` : String(i), a;
+}
+function C(e = 0) {
+	let t = typeof e == "number" ? e : parseInt(e, 10);
+	return `P${[
+		Math.floor(t / 3600) % 24,
+		Math.floor(t / 60) % 60,
+		t % 60
+	].map((e, t) => {
+		if (e === 0 && t !== 1) return "";
+		let n;
+		switch (t) {
+			case 0:
+				n = "H";
+				break;
+			case 1:
+				n = "M";
+				break;
+			default:
+				n = "S";
+				break;
+		}
+		return `${n}${e}`;
+	}).join("")}`;
+}
+//#endregion
+//#region src/tidal-current-time.ts
+var w = "tidal-current-time", T = class extends HTMLElement {
+	#e = void 0;
+	#t = /* @__PURE__ */ new Set();
+	#n;
+	#r;
+	#i;
+	constructor() {
+		super(), this.#i = (e) => this.renderTime(e.target.currentTime), this.#r = () => this.renderTime(0), this.#n = this.#a.bind(this);
+	}
+	#a() {
+		let e = v();
+		e && this.#e && !this.#t.has(e) && (e.addEventListener("timeupdate", this.#i, !1), this.#t.add(e));
+	}
+	connectedCallback() {
+		let t = this.attachShadow({ mode: "open" });
+		t.innerHTML = "<time></time>";
+		let n = t.querySelector("time");
+		this.#e === void 0 && n !== null && (this.#e = n), this.renderTime(l()), e.addEventListener("media-product-transition", this.#n, !1), e.addEventListener("ended", this.#r, !1);
+	}
+	disconnectedCallback() {
+		for (let e of this.#t) e.removeEventListener("timeupdate", this.#i, !1);
+		e.removeEventListener("media-product-transition", this.#n, !1), e.removeEventListener("ended", this.#r, !1);
+	}
+	renderTime(e) {
+		let t = Math.floor(e);
+		this.#e && (this.#e.textContent = S(t), this.#e.setAttribute("datetime", C(t)));
+	}
 };
+customElements.define(w, T);
+//#endregion
+//#region src/tidal-duration-time.ts
+var E = "tidal-duration-time", D = class extends HTMLElement {
+	#e;
+	#t = !1;
+	#n;
+	constructor() {
+		super(), this.#n = (e) => {
+			let t = e;
+			this.renderTime(t.detail.playbackContext.actualDuration);
+		}, this.#r();
+	}
+	#r() {
+		this.#t ||= (e.addEventListener("media-product-transition", this.#n, !1), !0);
+	}
+	#i() {
+		let e = this.attachShadow({ mode: "open" });
+		this.#e = document.createElement("time"), e.appendChild(this.#e);
+	}
+	connectedCallback() {
+		this.#r(), this.#i();
+		let e = parseInt(String(this.textContent), 10), t = Number.isNaN(e) ? 0 : e;
+		this.renderTime(d()?.actualDuration ?? t);
+	}
+	disconnectedCallback() {
+		e.removeEventListener("media-product-transition", this.#n, !1), this.#t = !1;
+	}
+	renderTime(e) {
+		let t = parseInt(e.toFixed(0), 10);
+		this.#e && (this.#e.textContent = S(t), this.#e.setAttribute("datetime", C(t)));
+	}
+};
+customElements.define(E, D);
+//#endregion
+//#region src/tidal-play-trigger.ts
+var O = "tidal-play-trigger", k = class extends HTMLElement {
+	#e;
+	#t = !1;
+	constructor() {
+		super(), this.#e = () => {
+			this.#n().catch(console.error);
+		}, this.#i();
+	}
+	static get observedAttributes() {
+		return [
+			"product-id",
+			"product-type",
+			"share-code"
+		];
+	}
+	async #n() {
+		await this.#r(), f() === "PLAYING" ? p() : await m();
+	}
+	#r() {
+		let e = u(), t = this.mediaProduct;
+		if (t && (e?.productId !== t.productId || e?.productType !== t.productType || e?.shareCode !== t.shareCode)) return c(t, 0);
+	}
+	#i() {
+		this.#t || this.addEventListener("click", this.#e, { passive: !0 });
+	}
+	#a() {
+		let e = this.attachShadow({ mode: "closed" }), t = document.createElement("style");
+		t.textContent = b`
+      :host {
+        display: contents;
+      }
+    `;
+		let n = document.createElement("slot");
+		e.appendChild(t), e.appendChild(n);
+	}
+	connectedCallback() {
+		this.#i(), this.#a();
+	}
+	disconnectedCallback() {
+		this.removeEventListener("click", this.#e, { passive: !0 }), this.#t = !1;
+	}
+	get mediaProduct() {
+		let e = this.getAttribute("product-id");
+		if (e) return {
+			productId: e,
+			productType: this.getAttribute("product-type") === "video" ? "video" : "track",
+			shareCode: this.getAttribute("share-code")?.trim() || void 0,
+			sourceId: "",
+			sourceType: ""
+		};
+	}
+};
+customElements.define(O, k);
+//#endregion
+//#region src/tidal-progress-bar.ts
+var A = b`
+  :host {
+    display: inline-block;
+  }
+
+  #wrapper {
+    width: 100%;
+    height: 100%;
+    contain: strict;
+    background-color: rgba(255, 255, 255, 0.2);
+    cursor: pointer;
+  }
+
+  #indicator {
+    width: 100%;
+    height: 100%;
+    transform: none;
+    will-change: transform;
+    background-color: currentColor;
+    pointer-events: none;
+  }
+`, j = { NO_DURATION: "You need to set duration before you can start/stop the progress bar." }, M = class extends HTMLElement {
+	#e;
+	#t = 1;
+	#n = null;
+	#r;
+	#i;
+	#a = /* @__PURE__ */ new Set();
+	#o = null;
+	#s;
+	constructor() {
+		super(), this.#r = (e) => {
+			let t = e;
+			if (this.duration = t.detail.playbackContext.actualDuration, f() === "PLAYING") try {
+				this.start();
+			} catch (e) {
+				console.warn(e);
+			}
+		}, this.#i = (e) => {
+			let t = e;
+			try {
+				t.detail.state === "PLAYING" ? this.start() : this.stop();
+			} catch (e) {
+				console.warn(e);
+			}
+		}, this.#s = (e) => {
+			(e instanceof MouseEvent || e instanceof PointerEvent) && this.handleClick(e);
+		}, this.#c();
+	}
+	#c() {
+		this.#a.has("media-product-transition") || (e.addEventListener("media-product-transition", this.#r, !1), this.#a.add("media-product-transition")), this.#a.has("playback-state-change") || (e.addEventListener("playback-state-change", this.#i), this.#a.add("playback-state-change")), this.#o && !this.#a.has("wrapper-click") && (this.#o.addEventListener("click", this.#s, !1), this.#a.add("wrapper-click"));
+	}
+	#l() {
+		let e = this.attachShadow({ mode: "closed" });
+		e.innerHTML = x`
+      <style>
+        ${A}
+      </style>
+      <div id="wrapper">
+        <div id="indicator"></div>
+      </div>
+    `, this.#o = e.querySelector("#wrapper"), this.#n = e.querySelector("#indicator");
+	}
+	connectedCallback() {
+		this.#l(), this.#c();
+	}
+	set currentTime(e) {
+		this.#e && (this.#e.currentTime = e);
+	}
+	disconnectedCallback() {
+		e.removeEventListener("media-product-transition", this.#r, !1), e.removeEventListener("playback-state-change", this.#i), this.#o?.addEventListener("click", this.#s, !1), this.#a.clear();
+	}
+	set duration(e) {
+		this.#t = e * 1e3;
+		let t = [{ transform: "translateX(-100%)" }, { transform: "translateX(0%)" }];
+		this.#e = this.#n?.animate(t, {
+			duration: this.#t,
+			iterations: 1
+		}), this.#e?.pause();
+	}
+	getMousePositionAsPercent(e) {
+		if (this.#o) {
+			let t = this.#o.getBoundingClientRect(), n = {
+				left: Math.abs(t.left + window.pageXOffset - e.pageX),
+				width: Math.round(t.width)
+			};
+			return n.left / n.width;
+		}
+		return 0;
+	}
+	handleClick(e) {
+		let t = this.getMousePositionAsPercent(e), n = this.#t * t;
+		this.currentTime = n, h(n / 1e3);
+	}
+	set playbackRate(e) {
+		this.stop(), this.#e && (this.#e.playbackRate = e), this.start();
+	}
+	start() {
+		if (!this.#e) throw Error(j.NO_DURATION);
+		this.#e.play();
+	}
+	stop() {
+		if (!this.#e) throw Error(j.NO_DURATION);
+		this.#e.pause();
+	}
+}, N = "tidal-progress-bar";
+customElements.define(N, M);
+//#endregion
+//#region src/tidal-video-view.ts
+var P = b`
+  :host {
+    position: relative;
+    display: block;
+    width: 100%;
+    aspect-ratio: 16/9;
+    background-color: black;
+  }
+
+  ::slotted(video) {
+    display: block;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    position: relative;
+    background-color: black;
+  }
+`, F = "tidal-video-view", I = class extends HTMLElement {
+	#e = !1;
+	#t;
+	#n;
+	constructor() {
+		super(), this.#t = (e) => {
+			e.detail.mediaProduct.productType === "video" && this.mountPlayer();
+		}, this.#n = (e) => {
+			let t = e;
+			this.setAttribute("playback-state", t.detail.state.toLocaleLowerCase());
+		}, this.#r();
+	}
+	#r() {
+		this.#e || (e.addEventListener("media-product-transition", this.#t, !1), e.addEventListener("playback-state-change", this.#n, !1));
+	}
+	connectedCallback() {
+		this.#r();
+		let e = this.attachShadow({ mode: "closed" }), t = document.createElement("style");
+		t.textContent = P;
+		let n = document.createElement("slot");
+		e.appendChild(t), e.appendChild(n);
+	}
+	disconnectedCallback() {
+		e.removeEventListener("media-product-transition", this.#t, !1), e.removeEventListener("playback-state-change", this.#n, !1), this.#e = !0;
+	}
+	mountPlayer() {
+		let e = v();
+		e && (this.innerHTML = "", this.appendChild(e));
+	}
+};
+customElements.define(F, I);
+//#endregion
+export { w as TidalCurrentTime, E as TidalDurationTime, O as TidalPlayButton, N as TidalProgressBar, F as TidalVideoView, e as events, g as setCredentialsProvider, _ as setEventSender };