sm-click-library-ui 0.0.613 → 0.0.614-dev.69

package/dist/tailwind.css

@@ -716,12 +716,6 @@ video {
 .-top-0\.5 {
   top: -0.125rem;
 }
-.-top-1 {
-  top: -0.25rem;
-}
-.-top-1\.5 {
-  top: -0.375rem;
-}
 .-top-10 {
   top: -2.5rem;
 }
@@ -854,6 +848,9 @@ video {
 .z-\[51\] {
   z-index: 51;
 }
+.z-\[70\] {
+  z-index: 70;
+}
 .z-\[9999\] {
   z-index: 9999;
 }
@@ -883,10 +880,6 @@ video {
   margin-top: 0.75rem;
   margin-bottom: 0.75rem;
 }
-.my-4 {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
 .my-auto {
   margin-top: auto;
   margin-bottom: auto;
@@ -951,6 +944,9 @@ video {
 .mr-2 {
   margin-right: 0.5rem;
 }
+.mr-3 {
+  margin-right: 0.75rem;
+}
 .mr-4 {
   margin-right: 1rem;
 }
@@ -1440,15 +1436,6 @@ video {
 .min-w-19 {
   min-width: 4.5rem;
 }
-.min-w-3 {
-  min-width: 0.75rem;
-}
-.min-w-3\.5 {
-  min-width: 0.875rem;
-}
-.min-w-4 {
-  min-width: 1rem;
-}
 .min-w-48 {
   min-width: 12rem;
 }
@@ -1479,9 +1466,6 @@ video {
 .min-w-full {
   min-width: 100%;
 }
-.max-w-0 {
-  max-width: 0px;
-}
 .max-w-28 {
   max-width: 7rem;
 }
@@ -2317,28 +2301,12 @@ video {
 .bg-white\/40 {
   background-color: rgb(255 255 255 / 0.4);
 }
-.bg-gradient-to-br {
-  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
-}
 .bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
 .bg-gradient-to-t {
   background-image: linear-gradient(to top, var(--tw-gradient-stops));
 }
-.bg-gradient-to-tr {
-  background-image: linear-gradient(to top right, var(--tw-gradient-stops));
-}
-.from-\[\#2AABEE\] {
-  --tw-gradient-from: #2AABEE var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(42 171 238 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-.from-\[\#4ade80\] {
-  --tw-gradient-from: #4ade80 var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(74 222 128 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
 .from-amber-500\/80 {
   --tw-gradient-from: rgb(245 158 11 / 0.8) var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position);
@@ -2349,11 +2317,6 @@ video {
   --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
-.from-blue-400 {
-  --tw-gradient-from: #60a5fa var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(96 165 250 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
 .from-blue-500\/10 {
   --tw-gradient-from: rgb(59 130 246 / 0.1) var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
@@ -2374,59 +2337,26 @@ video {
   --tw-gradient-to: rgb(148 163 184 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
-.from-violet-500 {
-  --tw-gradient-from: #8b5cf6 var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(139 92 246 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
 .from-violet-500\/80 {
   --tw-gradient-from: rgb(139 92 246 / 0.8) var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(139 92 246 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
-.from-yellow-400 {
-  --tw-gradient-from: #facc15 var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(250 204 21 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-.via-cyan-500 {
-  --tw-gradient-to: rgb(6 182 212 / 0)  var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), #06b6d4 var(--tw-gradient-via-position), var(--tw-gradient-to);
-}
-.via-pink-500 {
-  --tw-gradient-to: rgb(236 72 153 / 0)  var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), #ec4899 var(--tw-gradient-via-position), var(--tw-gradient-to);
-}
-.to-\[\#16a34a\] {
-  --tw-gradient-to: #16a34a var(--tw-gradient-to-position);
-}
-.to-\[\#229ED9\] {
-  --tw-gradient-to: #229ED9 var(--tw-gradient-to-position);
-}
 .to-amber-300 {
   --tw-gradient-to: #fcd34d var(--tw-gradient-to-position);
 }
 .to-blue-400\/10 {
   --tw-gradient-to: rgb(96 165 250 / 0.1) var(--tw-gradient-to-position);
 }
-.to-blue-700 {
-  --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position);
-}
 .to-fuchsia-300 {
   --tw-gradient-to: #f0abfc var(--tw-gradient-to-position);
 }
-.to-purple-600 {
-  --tw-gradient-to: #9333ea var(--tw-gradient-to-position);
-}
 .to-sky-300 {
   --tw-gradient-to: #7dd3fc var(--tw-gradient-to-position);
 }
 .to-slate-300 {
   --tw-gradient-to: #cbd5e1 var(--tw-gradient-to-position);
 }
-.to-teal-500 {
-  --tw-gradient-to: #14b8a6 var(--tw-gradient-to-position);
-}
 .to-transparent {
   --tw-gradient-to: transparent var(--tw-gradient-to-position);
 }
@@ -2658,15 +2588,9 @@ video {
 .pt-1 {
   padding-top: 0.25rem;
 }
-.pt-1\.5 {
-  padding-top: 0.375rem;
-}
 .pt-2 {
   padding-top: 0.5rem;
 }
-.pt-4 {
-  padding-top: 1rem;
-}
 .text-left {
   text-align: left;
 }
@@ -2716,9 +2640,6 @@ video {
 .text-\[15px\] {
   font-size: 15px;
 }
-.text-\[8px\] {
-  font-size: 8px;
-}
 .text-\[9px\] {
   font-size: 9px;
 }
@@ -3261,9 +3182,6 @@ video {
 .ring-base-300\/60 {
   --tw-ring-color: rgb(var(--bg-base-300) / 0.6);
 }
-.ring-black\/10 {
-  --tw-ring-color: rgb(0 0 0 / 0.1);
-}
 .ring-black\/20 {
   --tw-ring-color: rgb(0 0 0 / 0.2);
 }
@@ -3639,9 +3557,6 @@ video {
 .group:hover .group-hover\:inline-block {
   display: inline-block;
 }
-.group:hover .group-hover\:max-w-\[3em\] {
-  max-width: 3em;
-}
 .group:hover .group-hover\:-translate-x-40 {
   --tw-translate-x: -10rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -3841,10 +3756,6 @@ video {
 .hover\:to-red-400:hover {
   --tw-gradient-to: #f87171 var(--tw-gradient-to-position);
 }
-.hover\:px-1:hover {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-}
 .hover\:font-medium:hover {
   font-weight: 500;
 }

package/dist/{vue3-lottie.es-zeYgdqze.js → vue3-lottie.es-iL3x_HjQ.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, watchEffect, computed, watch, createElementBlock, openBlock, normalizeStyle } from "vue";
-import { c as commonjsGlobal, g as getDefaultExportFromCjs } from "./index-c4ps4TBc.js";
+import { c as commonjsGlobal, g as getDefaultExportFromCjs } from "./index-DYaf2nn_.js";
 var lottie = { exports: {} };
 (function(module, exports) {
   typeof navigator < "u" && function(t, e) {

package/dist/{web-DMY-0jKr.js → web-DjNzVuT4.js}

@@ -1,5 +1,5 @@
-import { W as P, b as x } from "./index-c4ps4TBc.js";
-import { E } from "./web-DYAIgUw0.js";
+import { W as P, b as x } from "./index-DYaf2nn_.js";
+import { E } from "./web-Uhw2x6hp.js";
 function m(w) {
   const e = w.split("/").filter((t) => t !== "."), r = [];
   return e.forEach((t) => {

package/dist/{web-DYAIgUw0.js → web-Uhw2x6hp.js}

@@ -1,4 +1,4 @@
-import { r as le, C as ge, g as me, W as we } from "./index-c4ps4TBc.js";
+import { r as le, C as ge, g as me, W as we } from "./index-DYaf2nn_.js";
 const F = {
   RECORDING: "RECORDING",
   PAUSED: "PAUSED",
@@ -58,7 +58,7 @@ var te;
   n.UTF8 = "utf8", n.ASCII = "ascii", n.UTF16 = "utf16";
 })(te || (te = {}));
 const k = le("Filesystem", {
-  web: () => import("./web-DMY-0jKr.js").then((n) => new n.FilesystemWeb())
+  web: () => import("./web-DjNzVuT4.js").then((n) => new n.FilesystemWeb())
 });
 Ee();
 const _e = le("BlobWriter");

package/package.json

@@ -5,7 +5,7 @@
         "dist",
         "src/test-utils"
     ],
-    "version": "0.0.613",
+    "version": "0.0.614-dev.69",
     "main": "dist/sm-click-library-ui.es.js",
     "module": "dist/sm-click-library-ui.umd.js",
     "style": "dist/style.css",

package/src/test-utils/components/chat/audioPlayback.test.js

@@ -6,43 +6,49 @@ import { createPinia, setActivePinia } from "pinia";
 // elemento recebido em `media`, e o `destroy` mata esse elemento mesmo sendo externo
 // (como as versões < 7.4) — era isso que cortava o áudio na troca de conversa.
 const instances = [];
+const seeks = [];
 vi.mock("wavesurfer.js", () => ({
-  default: {
-    create(options) {
-      const handlers = {};
-      const ws = {
-        options,
-        media: options.media,
-        subscriptions: [],
-        timer: { start: () => {} },
-        initPlayerEvents: () => {},
-        on: (evt, cb) => {
-          (handlers[evt] ||= []).push(cb);
-        },
-        emit: (evt) => (handlers[evt] || []).forEach((cb) => cb()),
-        unAll: () => {},
-        destroy: () => {
-          ws.media.pause();
-          ws.media.removeAttribute("src");
-        },
-        getDuration: () => 12,
-        getCurrentTime: () => ws.media.currentTime,
-        setPlaybackRate: (rate) => {
-          ws.media.playbackRate = rate;
-        },
-        load: async (url) => {
-          ws.media.src = url;
-          ws.emit("ready");
-        },
-        playPause: () => {
-          if (ws.media.paused) ws.media.play();
-          else ws.media.pause();
-        },
-      };
-      instances.push(ws);
-      return ws;
-    },
-  },
+    default: {
+        create(options) {
+            const handlers = {};
+            const ws = {
+                options,
+                media: options.media,
+                loads: 0,
+                subscriptions: [],
+                timer: { start: () => {} },
+                initPlayerEvents: () => {},
+                on: (evt, cb) => {
+                    (handlers[evt] ||= []).push(cb);
+                },
+                emit: (evt) => (handlers[evt] || []).forEach((cb) => cb()),
+                unAll: () => {},
+                destroy: () => {
+                    ws.media.pause();
+                    ws.media.removeAttribute("src");
+                },
+                getDuration: () => 12,
+                getCurrentTime: () => ws.media.currentTime,
+                setPlaybackRate: (rate) => {
+                    ws.media.playbackRate = rate;
+                },
+                load: async (url) => {
+                    ws.loads += 1;
+                    ws.media.src = url;
+                    ws.emit("ready");
+                },
+                seekTo: (progress) => {
+                    seeks.push(progress);
+                },
+                playPause: () => {
+                    if (ws.media.paused) ws.media.play();
+                    else ws.media.pause();
+                }
+            };
+            instances.push(ws);
+            return ws;
+        }
+    }
 }));
 
 import MessageAudio from "~/components/chat/messages/MessageAudio.vue";
@@ -51,101 +57,168 @@ import { useAudioPlaybackStore } from "~/stores/audioPlaybackStore";
 
 // jsdom não implementa play/pause de mídia.
 beforeEach(() => {
-  instances.length = 0;
-  Object.defineProperty(HTMLMediaElement.prototype, "paused", {
-    configurable: true,
-    get() {
-      return this.__paused !== false;
-    },
-  });
-  HTMLMediaElement.prototype.play = function () {
-    this.__paused = false;
-    this.dispatchEvent(new Event("play"));
-    return Promise.resolve();
-  };
-  HTMLMediaElement.prototype.pause = function () {
-    this.__paused = true;
-    this.dispatchEvent(new Event("pause"));
-  };
-  HTMLMediaElement.prototype.load = function () {};
-  setActivePinia(createPinia());
+    instances.length = 0;
+    seeks.length = 0;
+    Object.defineProperty(HTMLMediaElement.prototype, "paused", {
+        configurable: true,
+        get() {
+            return this.__paused !== false;
+        }
+    });
+    HTMLMediaElement.prototype.play = function () {
+        this.__paused = false;
+        this.dispatchEvent(new Event("play"));
+        return Promise.resolve();
+    };
+    HTMLMediaElement.prototype.pause = function () {
+        this.__paused = true;
+        this.dispatchEvent(new Event("pause"));
+    };
+    HTMLMediaElement.prototype.load = function () {};
+    setActivePinia(createPinia());
 });
 
 async function mountAudio(trackId = "m1") {
-  const wrapper = mount(MessageAudio, {
-    props: {
-      audio: "https://example.test/a.mp3",
-      trackId,
-      trackMeta: { title: "Contato", chatId: 7, messageId: trackId },
-    },
-    attachTo: document.body,
-  });
-  await new Promise((resolve) => setTimeout(resolve));
-  return wrapper;
+    const wrapper = mount(MessageAudio, {
+        props: {
+            audio: "https://example.test/a.mp3",
+            trackId,
+            trackMeta: { title: "Contato", chatId: 7, messageId: trackId }
+        },
+        attachTo: document.body
+    });
+    await new Promise((resolve) => setTimeout(resolve));
+    return wrapper;
 }
 
 describe("áudio da mensagem fora da árvore da bolha", () => {
-  it("continua tocando depois que a bolha desmonta", async () => {
-    const store = useAudioPlaybackStore();
-    const wrapper = await mountAudio();
-
-    await wrapper.find("button.audio-play").trigger("click");
-    const el = store.activeElement();
-    expect(store.trackId).toBe("m1");
-    expect(store.isPlaying).toBe(true);
-
-    wrapper.unmount();
-
-    expect(store.activeElement()).toBe(el);
-    expect(el.paused).toBe(false);
-    expect(el.getAttribute("src")).not.toBeNull();
-    expect(store.isPlaying).toBe(true);
-    expect(store.isFloating).toBe(true);
-  });
-
-  it("volta para a bolha sem cortar o áudio", async () => {
-    const store = useAudioPlaybackStore();
-    const first = await mountAudio();
-    await first.find("button.audio-play").trigger("click");
-    const el = store.activeElement();
-    el.currentTime = 5;
-    first.unmount();
-
-    const again = await mountAudio();
-    expect(store.activeElement()).toBe(el);
-    expect(el.paused).toBe(false);
-    expect(el.currentTime).toBe(5);
-    expect(store.isFloating).toBe(false);
-    // A onda remontada controla o mesmo elemento.
-    await again.find("button.audio-play").trigger("click");
-    expect(el.paused).toBe(true);
-  });
-
-  it("faixa de controle aparece e comanda a reprodução", async () => {
-    const store = useAudioPlaybackStore();
-    const wrapper = await mountAudio();
-    await wrapper.find("button.audio-play").trigger("click");
-    wrapper.unmount();
-
-    const player = mount(AudioPlaybackBar);
-    expect(player.find(".apb-root").exists()).toBe(true);
-    expect(player.text()).toContain("Contato");
-
-    await player.find(".apb-play").trigger("click");
-    expect(store.isPlaying).toBe(false);
-  });
-
-  it("outra faixa derruba a anterior", async () => {
-    const store = useAudioPlaybackStore();
-    const first = await mountAudio("m1");
-    const second = await mountAudio("m2");
-
-    await first.find("button.audio-play").trigger("click");
-    const firstEl = store.activeElement();
-    await second.find("button.audio-play").trigger("click");
-
-    expect(store.trackId).toBe("m2");
-    expect(firstEl.paused).toBe(true);
-    expect(store.activeElement().paused).toBe(false);
-  });
+    it("continua tocando depois que a bolha desmonta", async () => {
+        const store = useAudioPlaybackStore();
+        const wrapper = await mountAudio();
+
+        await wrapper.find("button.audio-play").trigger("click");
+        const el = store.activeElement();
+        expect(store.trackId).toBe("m1");
+        expect(store.isPlaying).toBe(true);
+
+        wrapper.unmount();
+
+        expect(store.activeElement()).toBe(el);
+        expect(el.paused).toBe(false);
+        expect(el.getAttribute("src")).not.toBeNull();
+        expect(store.isPlaying).toBe(true);
+        expect(store.isFloating).toBe(true);
+    });
+
+    it("volta para a bolha sem cortar o áudio", async () => {
+        const store = useAudioPlaybackStore();
+        const first = await mountAudio();
+        await first.find("button.audio-play").trigger("click");
+        const el = store.activeElement();
+        el.currentTime = 5;
+        first.unmount();
+
+        const again = await mountAudio();
+        expect(store.activeElement()).toBe(el);
+        expect(el.paused).toBe(false);
+        expect(el.currentTime).toBe(5);
+        expect(store.isFloating).toBe(false);
+        // A onda remontada controla o mesmo elemento.
+        await again.find("button.audio-play").trigger("click");
+        expect(el.paused).toBe(true);
+    });
+
+    it("faixa de controle aparece e comanda a reprodução", async () => {
+        const store = useAudioPlaybackStore();
+        const wrapper = await mountAudio();
+        await wrapper.find("button.audio-play").trigger("click");
+        wrapper.unmount();
+
+        const player = mount(AudioPlaybackBar);
+        expect(player.find(".apb-root").exists()).toBe(true);
+        expect(player.text()).toContain("Contato");
+
+        await player.find(".apb-play").trigger("click");
+        expect(store.isPlaying).toBe(false);
+    });
+
+    it("outra faixa derruba a anterior", async () => {
+        const store = useAudioPlaybackStore();
+        const first = await mountAudio("m1");
+        const second = await mountAudio("m2");
+
+        await first.find("button.audio-play").trigger("click");
+        const firstEl = store.activeElement();
+        await second.find("button.audio-play").trigger("click");
+
+        expect(store.trackId).toBe("m2");
+        expect(firstEl.paused).toBe(true);
+        expect(store.activeElement().paused).toBe(false);
+    });
+});
+
+// jsdom não tem PointerEvent; os listeners escutam por nome do evento.
+function pointer(type, target, clientX = 120) {
+    target.dispatchEvent(new MouseEvent(type, { bubbles: true, cancelable: true, clientX, clientY: 20 }));
+}
+
+describe("seek por gesto na onda", () => {
+    it("toque na onda não seeka por conta do componente", async () => {
+        const wrapper = await mountAudio();
+        const wave = wrapper.find(".ws-surface").element;
+
+        pointer("pointerdown", wave);
+        pointer("pointerup", wave);
+
+        // Quem decide se um toque virou clique ou arrasto é o wavesurfer, com threshold.
+        expect(seeks).toEqual([]);
+        wrapper.unmount();
+    });
+
+    it("ponteiro cancelado pela rolagem não deixa o arrasto ligado", async () => {
+        const wrapper = await mountAudio();
+        const wave = wrapper.find(".ws-surface").element;
+
+        // O WebView assume o gesto como rolagem da conversa: vem pointercancel, não pointerup.
+        pointer("pointerdown", wave, 120);
+        pointer("pointercancel", wave, 120);
+        pointer("pointermove", window, 300);
+        pointer("pointermove", window, 60);
+
+        expect(seeks).toEqual([]);
+        wrapper.unmount();
+    });
+
+    it("delega threshold e cancelamento de arrasto ao wavesurfer", async () => {
+        const store = useAudioPlaybackStore();
+        const bubble = await mountAudio();
+        expect(instances.at(-1).options.dragToSeek).toBe(true);
+
+        await bubble.find("button.audio-play").trigger("click");
+        bubble.unmount();
+
+        const player = mount(AudioPlaybackBar);
+        await new Promise((resolve) => setTimeout(resolve));
+        expect(store.isFloating).toBe(true);
+        expect(instances.at(-1).options.dragToSeek).toBe(true);
+        player.unmount();
+    });
+
+    it("resize da janela não recarrega o áudio", async () => {
+        const wrapper = await mountAudio();
+        await wrapper.find("button.audio-play").trigger("click");
+        const ws = instances.at(-1);
+        ws.media.currentTime = 5;
+
+        window.dispatchEvent(new Event("resize"));
+        await new Promise((resolve) => setTimeout(resolve));
+
+        // O renderer do wavesurfer redesenha sozinho; recriar tudo baixava e decodificava de novo.
+        expect(instances).toHaveLength(1);
+        expect(ws.loads).toBe(1);
+        expect(seeks).toEqual([]);
+        expect(ws.media.currentTime).toBe(5);
+        expect(ws.media.paused).toBe(false);
+        wrapper.unmount();
+    });
 });