livechat 0.5.2 → 0.5.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 69c3cd167112ced4976fb8b759c45586255c4f9c94f8d89aedfc481efd138e09
-  data.tar.gz: c1762cc48eb85e28d203c4ac272137f12ced552a1dc96555be8c8c9af14d7161
+  metadata.gz: 4f04a8c3aee0c2e7c9f4f3eff556bf450f4f81844750d8ebfb80d058ac49e180
+  data.tar.gz: 0f62d39bd16d1e02836fe8dbd8a777652e466db06406c60108a3ef75c3321161
 SHA512:
-  metadata.gz: b84e5860f58d5cffc5da5eb0694f600597e5c7932805ab7a376a12997fbfb8e0ba3e380eecfe1462bdf7f167f46c79cdb46d52f4c5a63ebfe2c4458bb8165263
-  data.tar.gz: 0dc49e26bf29a41797a96317a5c4cbaeca3c3ec5edbe6a0b253c451ad1ab08cbec4c60c1f66faf14de0916a118d6f4ede433b6c3db6ca42d5dfe434bc2e5ddab
+  metadata.gz: 2c3cbfefe5b627c5e919b9306ea72509026e107d28e5a69c5e83923286d6bf7e360ee5c8bfb5b0481883267dbf61630e1cfae40819d31760e0121463602e2cc6
+  data.tar.gz: b1c8c7782956dd04291838094131f904970011cfb92ed08473a359ad02046af18c88fc04b38d3c0e917361db5e7de3b79871fcb15c49a13d1d666d94a751a248

data/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 0.5.4
+
+- Balanced the recording controls visually: the stop/finish square now uses
+  the same icon box as the cancel control, so the actions read with equal
+  weight in the composer.
+
+## 0.5.3
+
+- Refined the audio recording controls. While recording, the composer now
+  shows a compact REC pill with a stable timer, an icon-only discard control,
+  and an icon-only stop control. Sending is disabled until recording is
+  stopped or cancelled.
+
 ## 0.5.2
 
 - Added audio messages. Visitors can record a voice note from the widget, send

data/app/views/layouts/livechat/application.html.erb

@@ -111,6 +111,7 @@
                      display: flex; align-items: center; justify-content: center; }
     .reply .attach:hover { background: var(--border); color: var(--text); }
     .reply .attach.recording-on { color: var(--danger); }
+    .reply.is-recording .attach { display: none; }
     .reply .chips { display: flex; flex-wrap: wrap; gap: 6px; }
     .reply .chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
                    padding: 4px 6px 4px 10px; border: 1px solid var(--border); border-radius: 999px;
@@ -119,14 +120,23 @@
     .reply .chip-x { padding: 0 2px; border: none; background: none; color: var(--muted);
                      font-size: 16px; line-height: 1; cursor: pointer; }
     .reply .chip-x:hover { color: var(--text); }
-    .reply .recording { display: flex; align-items: center; justify-content: space-between; gap: 8px;
-                        padding: 6px 4px 0; color: var(--muted); font-size: 12px; }
+    .reply .recording { display: inline-flex; align-items: center; gap: 8px; height: 32px;
+                        padding: 0 4px 0 8px; border: 1px solid var(--border); border-radius: 999px;
+                        background: var(--surface); color: var(--muted); font-size: 12px;
+                        white-space: nowrap; }
     .reply .recording[hidden] { display: none; }
-    .reply .recording-status { display: inline-flex; align-items: center; gap: 6px; }
-    .reply .recording-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }
+    .reply .recording-status { display: inline-grid; grid-template-columns: 8px 24px 34px;
+                               align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
+    .reply .recording-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger);
+                            box-shadow: 0 0 0 3px rgba(220,38,38,.12); }
+    .reply .recording-rec { font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--danger); }
     .reply .recording-actions { display: flex; align-items: center; gap: 4px; }
-    .reply .recording-actions button { padding: 6px 8px; border-radius: 8px; font-size: 12px; line-height: 1; }
-    .reply .recording-actions .stop-recording { border-color: var(--danger); color: var(--danger); }
+    .reply .recording-actions button { width: 24px; height: 24px; padding: 0; border: none;
+                                       border-radius: 50%; background: none; color: var(--muted);
+                                       display: flex; align-items: center; justify-content: center; }
+    .reply .recording-actions button:hover { background: var(--border); color: var(--text); }
+    .reply .recording-actions .stop-recording { background: var(--danger); color: #fff; }
+    .reply .recording-actions .stop-recording:hover { background: #b91c1c; color: #fff; }
     .reply .send { width: 32px; min-width: 32px; height: 32px; padding: 0; border: none; border-radius: 50%;
                    background: var(--accent); color: var(--accent-text); cursor: pointer;
                    display: flex; align-items: center; justify-content: center; }

data/lib/livechat/dashboard.js

@@ -134,25 +134,40 @@
       bar.hidden = true;
       var status = document.createElement("span");
       status.className = "recording-status";
+      status.setAttribute("aria-live", "polite");
       var dot = document.createElement("span");
       dot.className = "recording-dot";
+      var rec = document.createElement("span");
+      rec.className = "recording-rec";
+      rec.textContent = "REC";
       var time = document.createElement("span");
       status.appendChild(dot);
+      status.appendChild(rec);
       status.appendChild(time);
       bar.appendChild(status);
       var actions = document.createElement("div");
       actions.className = "recording-actions";
       var cancel = document.createElement("button");
       cancel.type = "button";
-      cancel.textContent = labels.cancelRecording;
+      cancel.setAttribute("aria-label", labels.cancelRecording);
+      cancel.title = labels.cancelRecording;
+      cancel.innerHTML =
+        '<svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true">' +
+        '<path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" ' +
+        'd="M6 6l12 12M18 6 6 18"/></svg>';
       var stop = document.createElement("button");
       stop.type = "button";
       stop.className = "stop-recording";
-      stop.textContent = labels.stopRecording;
+      stop.setAttribute("aria-label", labels.stopRecording);
+      stop.title = labels.stopRecording;
+      stop.innerHTML =
+        '<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">' +
+        '<rect x="5" y="5" width="14" height="14" rx="2" fill="currentColor"/></svg>';
       actions.appendChild(cancel);
       actions.appendChild(stop);
       bar.appendChild(actions);
-      form.appendChild(bar);
+      tools.appendChild(bar);
+      var sendButton = form.querySelector(".send");
 
       recordButton.addEventListener("click", start);
       stop.addEventListener("click", function () {
@@ -190,6 +205,8 @@
             recorder.start();
             startedAt = Date.now();
             recordButton.classList.add("recording-on");
+            form.classList.add("is-recording");
+            if (sendButton) sendButton.disabled = true;
             bar.hidden = false;
             tick();
             timer = setInterval(tick, 500);
@@ -209,6 +226,8 @@
         bar.hidden = true;
         recordButton.disabled = false;
         recordButton.classList.remove("recording-on");
+        form.classList.remove("is-recording");
+        if (sendButton) sendButton.disabled = false;
 
         if (!cancelled && chunks.length && typeof DataTransfer !== "undefined") {
           var kept = new DataTransfer();
@@ -222,7 +241,9 @@
       }
 
       function tick() {
-        time.textContent = labels.recording.replace("%{time}", formatDuration(Date.now() - startedAt));
+        var elapsed = formatDuration(Date.now() - startedAt);
+        time.textContent = elapsed;
+        status.setAttribute("aria-label", labels.recording.replace("%{time}", elapsed));
       }
 
       function stopTracks() {

data/lib/livechat/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Livechat
-  VERSION = '0.5.2'
+  VERSION = '0.5.4'
 end

data/lib/livechat/widget.js

@@ -349,6 +349,9 @@
         'M5 11a7 7 0 0 0 14 0M12 18v3M8.5 21h7"/></svg>';
       recordBtnEl.addEventListener("click", startRecording);
       tools.appendChild(recordBtnEl);
+
+      recordingBarEl = buildRecordingBar();
+      tools.appendChild(recordingBarEl);
     }
     toolbar.appendChild(tools);
 
@@ -367,10 +370,6 @@
     toolbar.appendChild(sendButton);
 
     formEl.appendChild(toolbar);
-    if (config.attachments) {
-      recordingBarEl = buildRecordingBar();
-      formEl.appendChild(recordingBarEl);
-    }
     formEl.addEventListener("submit", function (event) {
       event.preventDefault();
       send();
@@ -390,11 +389,16 @@
 
     var status = document.createElement("span");
     status.className = "lvc-recording-status";
+    status.setAttribute("aria-live", "polite");
     var dot = document.createElement("span");
     dot.className = "lvc-recording-dot";
+    var rec = document.createElement("span");
+    rec.className = "lvc-recording-rec";
+    rec.textContent = "REC";
     recordingTimeEl = document.createElement("span");
     recordingTimeEl.textContent = formatDuration(0);
     status.appendChild(dot);
+    status.appendChild(rec);
     status.appendChild(recordingTimeEl);
     bar.appendChild(status);
 
@@ -403,12 +407,21 @@
     var cancel = document.createElement("button");
     cancel.type = "button";
     cancel.className = "lvc-recording-cancel";
-    cancel.textContent = config.labels.cancelRecording;
+    cancel.setAttribute("aria-label", config.labels.cancelRecording);
+    cancel.title = config.labels.cancelRecording;
+    cancel.innerHTML =
+      '<svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true">' +
+      '<path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" ' +
+      'd="M6 6l12 12M18 6 6 18"/></svg>';
     cancel.addEventListener("click", cancelRecording);
     var stop = document.createElement("button");
     stop.type = "button";
     stop.className = "lvc-recording-stop";
-    stop.textContent = config.labels.stopRecording;
+    stop.setAttribute("aria-label", config.labels.stopRecording);
+    stop.title = config.labels.stopRecording;
+    stop.innerHTML =
+      '<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">' +
+      '<rect x="5" y="5" width="14" height="14" rx="2" fill="currentColor"/></svg>';
     stop.addEventListener("click", stopRecording);
     actions.appendChild(cancel);
     actions.appendChild(stop);
@@ -505,11 +518,17 @@
   function showRecordingBar(show) {
     if (recordingBarEl) recordingBarEl.hidden = !show;
     if (recordBtnEl) recordBtnEl.classList.toggle("lvc-recording-on", show);
+    if (formEl) formEl.classList.toggle("lvc-is-recording", show);
+    var sendButton = formEl && formEl.querySelector("button[type=submit]");
+    if (sendButton) sendButton.disabled = show;
   }
 
   function tickRecording() {
     if (!recordingTimeEl) return;
-    recordingTimeEl.textContent = config.labels.recording.replace("%{time}", formatDuration(Date.now() - recordingStartedAt));
+    var elapsed = formatDuration(Date.now() - recordingStartedAt);
+    recordingTimeEl.textContent = elapsed;
+    var status = recordingTimeEl.closest(".lvc-recording-status");
+    if (status) status.setAttribute("aria-label", config.labels.recording.replace("%{time}", elapsed));
   }
 
   function formatDuration(ms) {
@@ -1215,6 +1234,8 @@
       "display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:8px;padding:0}" +
       "#lvc-root .lvc-tool:hover{background:var(--lvc-border);color:var(--lvc-text)}" +
       "#lvc-root #lvc-record.lvc-recording-on{color:#dc2626}" +
+      "#lvc-root #lvc-form.lvc-is-recording #lvc-attach,#lvc-root #lvc-form.lvc-is-recording #lvc-record" +
+      "{display:none}" +
       "#lvc-send{border:none;border-radius:50%;background:var(--lvc-accent);color:var(--lvc-accent-text);" +
       "width:32px;height:32px;min-width:32px;display:flex;align-items:center;justify-content:center;" +
       "cursor:pointer;padding:0}" +
@@ -1230,16 +1251,22 @@
       "#lvc-root .lvc-chip-x{border:none;background:none;color:var(--lvc-muted);font-size:16px;" +
       "line-height:1;cursor:pointer;padding:0 2px}" +
       "#lvc-root .lvc-chip-x:hover{color:var(--lvc-text)}" +
-      "#lvc-recording{display:flex;align-items:center;justify-content:space-between;gap:8px;" +
-      "padding:6px 4px 0;color:var(--lvc-muted);font-size:12px}" +
+      "#lvc-recording{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 4px 0 8px;" +
+      "border:1px solid var(--lvc-border);border-radius:999px;background:var(--lvc-surface);" +
+      "color:var(--lvc-muted);font-size:12px;white-space:nowrap}" +
       "#lvc-recording[hidden]{display:none}" +
-      "#lvc-root .lvc-recording-status{display:inline-flex;align-items:center;gap:6px}" +
-      "#lvc-root .lvc-recording-dot{width:8px;height:8px;border-radius:50%;background:#dc2626}" +
+      "#lvc-root .lvc-recording-status{display:inline-grid;grid-template-columns:8px 24px 34px;" +
+      "align-items:center;gap:6px;font-variant-numeric:tabular-nums}" +
+      "#lvc-root .lvc-recording-dot{width:8px;height:8px;border-radius:50%;background:#dc2626;" +
+      "box-shadow:0 0 0 3px rgba(220,38,38,.12)}" +
+      "#lvc-root .lvc-recording-rec{font-size:10px;font-weight:700;letter-spacing:.04em;color:#dc2626}" +
       "#lvc-root .lvc-recording-actions{display:flex;align-items:center;gap:4px}" +
-      "#lvc-root .lvc-recording-actions button{border:1px solid var(--lvc-border);border-radius:8px;" +
-      "background:var(--lvc-surface);color:var(--lvc-text);font:inherit;font-size:12px;line-height:1;" +
-      "padding:6px 8px;cursor:pointer}" +
-      "#lvc-root .lvc-recording-stop{border-color:#dc2626;color:#dc2626}" +
+      "#lvc-root .lvc-recording-actions button{width:24px;height:24px;border:none;border-radius:50%;" +
+      "background:none;color:var(--lvc-muted);display:flex;align-items:center;justify-content:center;" +
+      "padding:0;cursor:pointer}" +
+      "#lvc-root .lvc-recording-actions button:hover{background:var(--lvc-border);color:var(--lvc-text)}" +
+      "#lvc-root .lvc-recording-stop{background:#dc2626;color:#fff}" +
+      "#lvc-root .lvc-recording-stop:hover{background:#b91c1c;color:#fff}" +
       // Attachments inside a message bubble: thumbnails and file links.
       "#lvc-root .lvc-atts{display:flex;flex-direction:column;gap:6px;margin-top:6px}" +
       "#lvc-root .lvc-att-img{display:block}" +

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: livechat
 version: !ruby/object:Gem::Version
-  version: 0.5.2
+  version: 0.5.4
 platform: ruby
 authors:
 - Yaroslav Shmarov