@44-audio/components 0.1.0-dev.1 → 0.1.0-dev.13

package/dist/player.es.js

@@ -1,213 +1,221 @@
-import { h as Q, t as ne, d as le, c as W, p as X, a as Y, b as M, s as d, f as m, A as de, e as h, g as b, i as k, j as i, k as Z, l as R, m as P, n as f, u as ce, r as y, o as I, q as z, v as S, w as V, x as N, y as ue, z as ve, B as ge } from "./AudioPlayer-bUgQMAfs.mjs";
-function fe(a, t, s, r) {
-  var n = a.__style;
-  if (Q || n !== t) {
-    var c = ne(t);
-    (!Q || c !== a.getAttribute("style")) && (c == null ? a.removeAttribute("style") : a.style.cssText = c), a.__style = t;
-  }
-  return r;
-}
-function me(a, t) {
-  d(t, !f(t));
+import { d as ne, c as W, p as X, a as Y, b as k, s as n, f as p, A as le, i as y, e as i, g as Z, h as E, j as x, k as _, l as g, u as de, r as h, m as b, n as I, t as R, o as M, q as V, v as Q, w as ce, x as ve, y as ue, z as ge } from "./AudioPlayer-DW6UJXCt.mjs";
+function pe(c, t) {
+  n(t, !g(t));
 }
-var pe = m('&bull; <button class="link svelte-8utcjm"> </button>', 1), _e = (a, t) => d(t, !0), he = m(' <button class="link svelte-8utcjm">Show more</button>', 1), be = (a, t) => d(t, !1), ye = m(' <button class="link svelte-8utcjm">Show less</button>', 1), ke = m('<div class="details svelte-8utcjm"><div class="title svelte-8utcjm">Transcription <!></div> <div class="transcription"><!></div></div>'), xe = m('<div class="container svelte-8utcjm" role="group" aria-label="44 audio player"><div class="display svelte-8utcjm"><!></div> <!></div>');
-const je = {
+var me = p('&bull; <button class="link svelte-8utcjm"> </button>', 1), fe = (c, t) => n(t, !0), _e = p(' <button class="link svelte-8utcjm">Show more</button>', 1), he = (c, t) => n(t, !1), be = p(' <button class="link svelte-8utcjm">Show less</button>', 1), ye = p('<div class="details svelte-8utcjm"><div class="title svelte-8utcjm">Transcription <!></div> <div class="transcription"><!></div></div>'), ke = p('<div class="container svelte-8utcjm" role="group" aria-label="44 audio player"><div class="display svelte-8utcjm"><!></div> <!></div>');
+const xe = {
   hash: "svelte-8utcjm",
   code: "button.svelte-8utcjm {font:inherit;margin:0;padding:0;box-sizing:border-box;border:none;background:none;cursor:pointer;}.link.svelte-8utcjm {background:none;border:none;color:var(--44-color-2);cursor:pointer;padding:0;font:inherit;}.link.svelte-8utcjm:hover {color:var(--44-color-3);text-decoration:underline;}.container.svelte-8utcjm {padding:16px;}.display.svelte-8utcjm {display:flex;align-items:center;gap:12px;}.details.svelte-8utcjm .title:where(.svelte-8utcjm) {font-weight:bold;margin-top:16px;margin-bottom:8px;}"
 };
-function $(a, t) {
-  X(t, !0), Y(a, je);
-  let s = M(t, "recordingId", 7), r = M(t, "recording", 7), n = M(t, "audioRef", 7), c = R(!1), p = R(!1), E = R(0), _ = R("idle");
-  n().addEventListener("play", () => {
-    d(_, "playing");
-  }), n().addEventListener("pause", () => {
-    d(_, "paused");
-  }), n().addEventListener("ended", () => {
-    d(_, "idle"), d(E, 0);
-  }), n().addEventListener("timeupdate", () => {
-    d(E, n().currentTime * 1e3);
+function $(c, t) {
+  X(t, !0), Y(c, xe);
+  let l = k(t, "recordingId", 7), r = k(t, "recording", 7), a = k(t, "audioRef", 7), P = k(t, "apiHost", 7), L = E(!1), m = E(!1), T = E(0), f = E("idle");
+  a().addEventListener("play", () => {
+    n(f, "playing");
+  }), a().addEventListener("pause", () => {
+    n(f, "paused");
+  }), a().addEventListener("ended", () => {
+    n(f, "idle"), n(T, 0);
+  }), a().addEventListener("timeupdate", () => {
+    n(T, a().currentTime * 1e3);
   });
-  var F = {
+  var O = {
     get recordingId() {
-      return s();
+      return l();
     },
     set recordingId(e) {
-      s(e), P();
+      l(e), x();
     },
     get recording() {
       return r();
     },
     set recording(e) {
-      r(e), P();
+      r(e), x();
     },
     get audioRef() {
-      return n();
+      return a();
     },
     set audioRef(e) {
-      n(e), P();
+      a(e), x();
+    },
+    get apiHost() {
+      return P();
+    },
+    set apiHost(e) {
+      P(e), x();
     }
-  }, v = xe(), x = b(v), O = b(x);
+  }, v = ke(), j = _(v), U = _(j);
   {
-    let e = ce(() => `https://44hz.zuuu.us/recordings/${s()}/audio.mp3`);
-    de(O, {
+    let e = de(() => `https://${P()}/v1/recordings/${l()}/audio.mp3`);
+    le(U, {
       get audioURL() {
-        return f(e);
+        return g(e);
       },
       get waveform() {
         return r().waveform;
       }
     });
   }
-  y(x);
-  var U = h(x, 2);
+  h(j);
+  var B = b(j, 2);
   {
-    var B = (e) => {
-      var o = ke(), L = b(o), D = h(b(L));
+    var F = (e) => {
+      var o = ye(), q = _(o), D = b(_(q));
       {
-        var G = (l) => {
-          var g = pe(), T = h(I(g));
-          T.__click = [me, c];
-          var J = b(T, !0);
-          y(T), z(() => S(J, f(c) ? "Original" : "Translation")), i(l, g);
+        var G = (s) => {
+          var u = me(), C = b(I(u));
+          C.__click = [pe, L];
+          var K = _(C, !0);
+          h(C), R(() => M(K, g(L) ? "Original" : "Translation")), i(s, u);
         };
-        k(D, (l) => {
-          r().translation && l(G);
+        y(D, (s) => {
+          r().translation && s(G);
         });
       }
-      y(L);
-      var u = h(L, 2), H = b(u);
+      h(q);
+      var d = b(q, 2), J = _(d);
       {
-        var ee = (l) => {
-          var g = V();
-          z(() => S(g, r().translation)), i(l, g);
-        }, te = (l) => {
-          var g = N(), T = I(g);
+        var ee = (s) => {
+          var u = V();
+          R(() => M(u, r().translation)), i(s, u);
+        }, te = (s) => {
+          var u = Q(), C = I(u);
           {
-            var J = (j) => {
-              var q = N(), ae = I(q);
+            var K = (w) => {
+              var S = Q(), ae = I(S);
               {
-                var oe = (w) => {
-                  var A = he(), C = I(A), K = h(C);
-                  K.__click = [_e, p], z((se) => S(C, `${se ?? ""}... `), [() => r().transcription.slice(0, 200)]), i(w, A);
-                }, ie = (w) => {
-                  var A = ye(), C = I(A), K = h(C);
-                  K.__click = [be, p], z(() => S(C, `${r().transcription ?? ""} `)), i(w, A);
+                var oe = (H) => {
+                  var z = _e(), A = I(z), N = b(A);
+                  N.__click = [fe, m], R((se) => M(A, `${se ?? ""}... `), [() => r().transcription.slice(0, 200)]), i(H, z);
+                }, ie = (H) => {
+                  var z = be(), A = I(z), N = b(A);
+                  N.__click = [he, m], R(() => M(A, `${r().transcription ?? ""} `)), i(H, z);
                 };
-                k(ae, (w) => {
-                  f(p) ? w(ie, !1) : w(oe);
+                y(ae, (H) => {
+                  g(m) ? H(ie, !1) : H(oe);
                 });
               }
-              i(j, q);
-            }, re = (j) => {
-              var q = V();
-              z(() => S(q, r().transcription)), i(j, q);
+              i(w, S);
+            }, re = (w) => {
+              var S = V();
+              R(() => M(S, r().transcription)), i(w, S);
             };
-            k(
-              T,
-              (j) => {
-                r().transcription.length > 200 ? j(J) : j(re, !1);
+            y(
+              C,
+              (w) => {
+                r().transcription.length > 200 ? w(K) : w(re, !1);
               },
               !0
             );
           }
-          i(l, g);
+          i(s, u);
         };
-        k(H, (l) => {
-          f(c) ? l(ee) : l(te, !1);
+        y(J, (s) => {
+          g(L) ? s(ee) : s(te, !1);
         });
       }
-      y(u), y(o), i(e, o);
+      h(d), h(o), i(e, o);
     };
-    k(U, (e) => {
-      r().transcription && e(B);
+    y(B, (e) => {
+      r().transcription && e(F);
     });
   }
-  return y(v), i(a, v), Z(F);
+  return h(v), i(c, v), Z(O);
 }
-le(["click"]);
-W($, { recordingId: {}, recording: {}, audioRef: {} }, [], [], !0);
-var we = m("<p>Loading...</p>"), Ie = m("<p>Error loading recording.</p>"), ze = m('<div class="container svelte-1kcle3q" role="group" aria-label="44 audio player"><!> <audio></audio></div>');
-const Re = {
+ne(["click"]);
+W($, { recordingId: {}, recording: {}, audioRef: {}, apiHost: {} }, [], [], !0);
+var je = p("<p>Loading...</p>"), we = p("<p>Error loading recording.</p>"), He = p('<div class="container svelte-1kcle3q" role="group" aria-label="44 audio player"><!> <audio></audio></div>');
+const Ie = {
   hash: "svelte-1kcle3q",
   code: ":host {display:inline-block;font-size:inherit;font-family:system-ui;line-height:1.35;color:var(--44-color-1);}.container.svelte-1kcle3q {width:100%;border-radius:16px;background:var(--44-color-0);color:var(--44-color-1);}"
 };
-function Ee(a, t) {
-  X(t, !0), Y(a, Re);
-  let s = M(t, "recordingId", 7), r = M(t, "theme", 7);
-  const c = r().split(",").map((e) => e.trim()).map((e, o) => `--44-color-${o}: ${e};`).join(" ");
-  let p, E = R(!0), _ = R(null);
-  ue(async () => {
+function Re(c, t) {
+  X(t, !0), Y(c, Ie);
+  let l = k(t, "recordingId", 7), r = k(t, "theme", 7), a = k(t, "apiHost", 7, "api.44.audio");
+  const L = r().split(",").map((e) => e.trim()).map((e, o) => `--44-color-${o}: ${e};`).join(" ");
+  let m, T = E(!0), f = E(null);
+  ce(async () => {
     try {
-      const e = await fetch(`https://44hz.zuuu.us/recordings/${s()}/player`);
+      const e = await fetch(`https://${a()}/v1/recordings/${l()}/player`);
       if (!e.ok)
         throw new Error("Failed to fetch data");
       const o = await e.json();
-      o.status === "ready" && d(_, o, !0);
+      o.status === "ready" && n(f, o, !0);
     } catch (e) {
       console.error(e);
     } finally {
-      d(E, !1);
+      n(T, !1);
     }
   });
-  var F = {
+  var O = {
     get recordingId() {
-      return s();
+      return l();
     },
     set recordingId(e) {
-      s(e), P();
+      l(e), x();
     },
     get theme() {
       return r();
     },
     set theme(e) {
-      r(e), P();
+      r(e), x();
+    },
+    get apiHost() {
+      return a();
+    },
+    set apiHost(e = "api.44.audio") {
+      a(e), x();
     }
-  }, v = ze(), x = b(v);
+  }, v = He(), j = _(v);
   {
-    var O = (e) => {
-      var o = we();
+    var U = (e) => {
+      var o = je();
       i(e, o);
-    }, U = (e) => {
-      var o = N(), L = I(o);
+    }, B = (e) => {
+      var o = Q(), q = I(o);
       {
-        var D = (u) => {
-          $(u, {
+        var D = (d) => {
+          $(d, {
+            get apiHost() {
+              return a();
+            },
             get recordingId() {
-              return s();
+              return l();
             },
             get recording() {
-              return f(_);
+              return g(f);
             },
             get audioRef() {
-              return p;
+              return m;
             }
           });
-        }, G = (u) => {
-          var H = Ie();
-          i(u, H);
+        }, G = (d) => {
+          var J = we();
+          i(d, J);
         };
-        k(
-          L,
-          (u) => {
-            f(_) ? u(D) : u(G, !1);
+        y(
+          q,
+          (d) => {
+            g(f) ? d(D) : d(G, !1);
           },
           !0
         );
       }
       i(e, o);
     };
-    k(x, (e) => {
-      f(E) ? e(O) : e(U, !1);
+    y(j, (e) => {
+      g(T) ? e(U) : e(B, !1);
     });
   }
-  var B = h(x, 2);
-  return ve(B, (e) => p = e, () => p), y(v), z(() => {
-    fe(v, c), ge(B, "src", `https://44hz.zuuu.us/recordings/${s() ?? ""}/audio.mp3`);
-  }), i(a, v), Z(F);
+  var F = b(j, 2);
+  return ve(F, (e) => m = e, () => m), h(v), R(() => {
+    ue(v, L), ge(F, "src", `https://${a() ?? ""}/v1/recordings/${l() ?? ""}/audio.mp3`);
+  }), i(c, v), Z(O);
 }
 customElements.define("fortyfour-audio-player", W(
-  Ee,
+  Re,
   {
+    apiHost: { attribute: "api-host" },
     recordingId: { attribute: "recording-id" },
     theme: { attribute: "theme" }
   },