sm-click-library-ui 0.0.614 → 0.0.616-dev.78

package/dist/tailwind.css

@@ -1209,9 +1209,6 @@ video {
 .h-\[200px\] {
   height: 200px;
 }
-.h-\[350px\] {
-  height: 350px;
-}
 .h-\[50vh\] {
   height: 50vh;
 }
@@ -1248,6 +1245,9 @@ video {
 .max-h-\[224px\] {
   max-height: 224px;
 }
+.max-h-\[240px\] {
+  max-height: 240px;
+}
 .max-h-\[250px\] {
   max-height: 250px;
 }
@@ -2105,6 +2105,9 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--bg-base-300) / var(--tw-bg-opacity, 1));
 }
+.bg-base-300\/30 {
+  background-color: rgb(var(--bg-base-300) / 0.3);
+}
 .bg-base-300\/70 {
   background-color: rgb(var(--bg-base-300) / 0.7);
 }
@@ -2173,10 +2176,6 @@ video {
 .bg-gray-800\/80 {
   background-color: rgb(31 41 55 / 0.8);
 }
-.bg-gray-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
-}
 .bg-gray-900\/80 {
   background-color: rgb(17 24 39 / 0.8);
 }

package/dist/{vue3-lottie.es-P3Zf2RlT.js → vue3-lottie.es-BHSMLcdu.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-9nrggOJ-.js";
+import { c as commonjsGlobal, g as getDefaultExportFromCjs } from "./index-xJ8KtM_J.js";
 var lottie = { exports: {} };
 (function(module, exports) {
   typeof navigator < "u" && function(t, e) {

package/dist/{web-7rG00tDy.js → web-B4R0fcQj.js}

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

package/dist/{web-C7axtMyh.js → web-DDm7zRan.js}

@@ -1,4 +1,4 @@
-import { r as le, C as ge, g as me, W as we } from "./index-9nrggOJ-.js";
+import { r as le, C as ge, g as me, W as we } from "./index-xJ8KtM_J.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-7rG00tDy.js").then((n) => new n.FilesystemWeb())
+  web: () => import("./web-B4R0fcQj.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.614",
+    "version": "0.0.616-dev.78",
     "main": "dist/sm-click-library-ui.es.js",
     "module": "dist/sm-click-library-ui.umd.js",
     "style": "dist/style.css",
@@ -70,6 +70,7 @@
     },
     "devDependencies": {
         "@chromatic-com/storybook": "1.6.1",
+        "@playwright/test": "1.63.0",
         "@storybook/addon-essentials": "^8.2.3",
         "@storybook/addon-interactions": "^8.2.3",
         "@storybook/addon-links": "^8.2.3",

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

@@ -1,48 +1,65 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
-import { mount } from "@vue/test-utils";
+import { mount, flushPromises } from "@vue/test-utils";
 import { createPinia, setActivePinia } from "pinia";
 
 // Wavesurfer real precisa de fetch/decode. O dublê reproduz o que importa: toca o
 // 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 = [];
+const peakState = vi.hoisted(() => ({ pending: null }));
+vi.mock("~/utils/audioPeaks", () => ({
+    resolveAudioPeaks: () => peakState.pending || Promise.resolve(null)
+}));
+// jsdom não calcula layout: o portão de viewport nunca intersectaria, e a onda é o objeto do teste.
+vi.mock("~/utils/viewportGate", () => ({
+    onceInViewport: (el, callback) => {
+        callback();
+        return () => {};
+    }
+}));
 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 +68,182 @@ 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());
+    peakState.pending = null;
+    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("não instala observers depois de desmontar durante a carga", async () => {
+        let finish;
+        peakState.pending = new Promise((resolve) => {
+            finish = resolve;
+        });
+        const wrapper = await mountAudio();
+        wrapper.unmount();
+        const observe = vi.spyOn(MutationObserver.prototype, "observe");
+        finish(null);
+        await flushPromises();
+        expect(observe).not.toHaveBeenCalled();
+        observe.mockRestore();
+    });
+    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();
+    });
 });