livechat 0.5.1 → 0.5.2

data/lib/livechat/widget.js

@@ -34,9 +34,18 @@
   var errorEl = null;
   var fileInputEl = null;
   var filesBarEl = null;
+  var recordBtnEl = null;
+  var recordingBarEl = null;
+  var recordingTimeEl = null;
   // Files the visitor has picked but not yet sent. Sent as multipart; kept
   // out of the JSON path so a text-only message stays a plain JSON POST.
   var pendingFiles = [];
+  var mediaRecorder = null;
+  var recordingStream = null;
+  var recordingChunks = [];
+  var recordingStartedAt = 0;
+  var recordingTimer = null;
+  var recordingCancelled = false;
   var isOpen = false;
   var lastFocused = null;
   var expandBtnEl = null;
@@ -47,7 +56,9 @@
   // locked); on desktop it stays a non-modal popover you can chat alongside.
   var mobileModal = window.matchMedia ? window.matchMedia("(max-width: 480px)") : null;
   var savedBodyStyle = null; // body's style while the mobile scroll lock is on
+  var savedHtmlStyle = null;
   var savedScrollY = 0;
+  var lastTouchY = 0;
   // The id of the newest message actually RENDERED into the list — never
   // advanced by background polls, so reopening the panel refetches exactly
   // the messages it hasn't shown yet.
@@ -324,6 +335,20 @@
       attach.addEventListener("click", function () { fileInputEl.click(); });
       tools.appendChild(attach);
       formEl.appendChild(fileInputEl);
+
+      recordBtnEl = document.createElement("button");
+      recordBtnEl.type = "button";
+      recordBtnEl.id = "lvc-record";
+      recordBtnEl.className = "lvc-tool";
+      recordBtnEl.setAttribute("aria-label", config.labels.recordAudio);
+      recordBtnEl.title = config.labels.recordAudio;
+      recordBtnEl.innerHTML =
+        '<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">' +
+        '<path fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" ' +
+        'stroke-linejoin="round" d="M12 3a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V6a3 3 0 0 0-3-3Z' +
+        'M5 11a7 7 0 0 0 14 0M12 18v3M8.5 21h7"/></svg>';
+      recordBtnEl.addEventListener("click", startRecording);
+      tools.appendChild(recordBtnEl);
     }
     toolbar.appendChild(tools);
 
@@ -342,6 +367,10 @@
     toolbar.appendChild(sendButton);
 
     formEl.appendChild(toolbar);
+    if (config.attachments) {
+      recordingBarEl = buildRecordingBar();
+      formEl.appendChild(recordingBarEl);
+    }
     formEl.addEventListener("submit", function (event) {
       event.preventDefault();
       send();
@@ -352,6 +381,162 @@
     return panel;
   }
 
+  // --- audio recording --------------------------------------------------------
+
+  function buildRecordingBar() {
+    var bar = document.createElement("div");
+    bar.id = "lvc-recording";
+    bar.hidden = true;
+
+    var status = document.createElement("span");
+    status.className = "lvc-recording-status";
+    var dot = document.createElement("span");
+    dot.className = "lvc-recording-dot";
+    recordingTimeEl = document.createElement("span");
+    recordingTimeEl.textContent = formatDuration(0);
+    status.appendChild(dot);
+    status.appendChild(recordingTimeEl);
+    bar.appendChild(status);
+
+    var actions = document.createElement("div");
+    actions.className = "lvc-recording-actions";
+    var cancel = document.createElement("button");
+    cancel.type = "button";
+    cancel.className = "lvc-recording-cancel";
+    cancel.textContent = config.labels.cancelRecording;
+    cancel.addEventListener("click", cancelRecording);
+    var stop = document.createElement("button");
+    stop.type = "button";
+    stop.className = "lvc-recording-stop";
+    stop.textContent = config.labels.stopRecording;
+    stop.addEventListener("click", stopRecording);
+    actions.appendChild(cancel);
+    actions.appendChild(stop);
+    bar.appendChild(actions);
+    return bar;
+  }
+
+  function recordingSupported() {
+    return !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia && window.MediaRecorder);
+  }
+
+  function startRecording() {
+    if (mediaRecorder) return;
+    if (!recordingSupported()) {
+      showError(config.labels.microphoneUnsupported);
+      return;
+    }
+    if (pendingFiles.length >= (config.maxAttachments || 5)) {
+      showError(config.labels.attachmentError);
+      return;
+    }
+
+    errorEl.hidden = true;
+    if (recordBtnEl) recordBtnEl.disabled = true;
+    navigator.mediaDevices.getUserMedia({ audio: true })
+      .then(function (stream) {
+        var options = preferredAudioOptions();
+        recordingChunks = [];
+        recordingCancelled = false;
+        recordingStream = stream;
+        try {
+          mediaRecorder = options ? new MediaRecorder(stream, options) : new MediaRecorder(stream);
+        } catch (e) {
+          stopRecordingTracks();
+          throw e;
+        }
+        mediaRecorder.addEventListener("dataavailable", function (event) {
+          if (event.data && event.data.size) recordingChunks.push(event.data);
+        });
+        mediaRecorder.addEventListener("stop", finishRecording);
+        mediaRecorder.start();
+        recordingStartedAt = Date.now();
+        showRecordingBar(true);
+        tickRecording();
+        recordingTimer = setInterval(tickRecording, 500);
+      })
+      .catch(function (error) {
+        if (recordBtnEl) recordBtnEl.disabled = false;
+        var denied = error && (error.name === "NotAllowedError" || error.name === "SecurityError");
+        showError(denied ? config.labels.microphoneDenied : config.labels.microphoneError);
+      });
+  }
+
+  function preferredAudioOptions() {
+    var types = ["audio/webm;codecs=opus", "audio/webm", "audio/mp4", "audio/ogg;codecs=opus"];
+    if (!window.MediaRecorder || !MediaRecorder.isTypeSupported) return null;
+    for (var i = 0; i < types.length; i++) {
+      if (MediaRecorder.isTypeSupported(types[i])) return { mimeType: types[i] };
+    }
+    return null;
+  }
+
+  function stopRecording() {
+    if (mediaRecorder && mediaRecorder.state !== "inactive") mediaRecorder.stop();
+  }
+
+  function cancelRecording() {
+    recordingCancelled = true;
+    stopRecording();
+  }
+
+  function finishRecording() {
+    var mimeType = (mediaRecorder && mediaRecorder.mimeType) || "audio/webm";
+    stopRecordingTracks();
+    clearInterval(recordingTimer);
+    recordingTimer = null;
+    showRecordingBar(false);
+    if (recordBtnEl) recordBtnEl.disabled = false;
+
+    if (!recordingCancelled && recordingChunks.length) {
+      pendingFiles.push(audioFile(recordingChunks, mimeType));
+      renderFiles();
+    }
+    mediaRecorder = null;
+    recordingChunks = [];
+  }
+
+  function stopRecordingTracks() {
+    if (!recordingStream) return;
+    recordingStream.getTracks().forEach(function (track) { track.stop(); });
+    recordingStream = null;
+  }
+
+  function showRecordingBar(show) {
+    if (recordingBarEl) recordingBarEl.hidden = !show;
+    if (recordBtnEl) recordBtnEl.classList.toggle("lvc-recording-on", show);
+  }
+
+  function tickRecording() {
+    if (!recordingTimeEl) return;
+    recordingTimeEl.textContent = config.labels.recording.replace("%{time}", formatDuration(Date.now() - recordingStartedAt));
+  }
+
+  function formatDuration(ms) {
+    var seconds = Math.max(0, Math.floor(ms / 1000));
+    var minutes = Math.floor(seconds / 60);
+    seconds = seconds % 60;
+    return minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
+  }
+
+  function audioFile(chunks, mimeType) {
+    var blob = new Blob(chunks, { type: mimeType });
+    var extension = audioExtension(mimeType);
+    var name = "voice-message-" + new Date().toISOString().replace(/[:.]/g, "-") + "." + extension;
+    try {
+      return new File([blob], name, { type: mimeType });
+    } catch (e) {
+      blob.name = name;
+      return blob;
+    }
+  }
+
+  function audioExtension(mimeType) {
+    if (/mp4|mpeg|m4a/.test(mimeType)) return "m4a";
+    if (/ogg/.test(mimeType)) return "ogg";
+    return "webm";
+  }
+
   // --- pending attachments ----------------------------------------------------
 
   function addFiles(fileList) {
@@ -381,7 +566,7 @@
       chip.className = "lvc-chip";
       var name = document.createElement("span");
       name.className = "lvc-chip-name";
-      name.textContent = file.name;
+      name.textContent = file.name || "voice-message.webm";
       var remove = document.createElement("button");
       remove.type = "button";
       remove.className = "lvc-chip-x";
@@ -537,34 +722,69 @@
     }
   }
 
-  // A real iOS scroll lock. `overflow:hidden` on <html> is ignored by Safari
-  // for touch scrolling, so the page slid behind the full-screen panel — and
-  // because the panel has no backdrop, that scrolling showed through as the
-  // pinned panel chased visualViewport.offsetTop. Pinning <body> with
-  // position:fixed genuinely freezes the page (offsetTop then stays 0 and the
-  // panel covers the visible area exactly). We snapshot the body's style and
-  // scroll position and restore both on unlock. Mobile modal only; the desktop
-  // popover never locks.
+  // A real iOS scroll lock. `overflow:hidden` alone is ignored by Safari for
+  // touch scrolling, so the page can slide behind the full-screen panel while
+  // the keyboard changes the visual viewport. Pinning <body>, hiding overflow
+  // on both root elements, and cancelling touch scroll that escapes the message
+  // list keeps the host page frozen while the modal remains scrollable.
   function lockScroll() {
     if (savedBodyStyle !== null) return;
     savedScrollY = window.pageYOffset || document.documentElement.scrollTop || 0;
     savedBodyStyle = document.body.getAttribute("style") || "";
-    var s = document.body.style;
-    s.position = "fixed";
-    s.top = -savedScrollY + "px";
-    s.left = "0";
-    s.right = "0";
-    s.width = "100%";
-    s.overflow = "hidden";
+    savedHtmlStyle = document.documentElement.getAttribute("style") || "";
+
+    var html = document.documentElement.style;
+    html.overflow = "hidden";
+    html.overscrollBehavior = "none";
+
+    var body = document.body.style;
+    body.position = "fixed";
+    body.top = -savedScrollY + "px";
+    body.left = "0";
+    body.right = "0";
+    body.width = "100%";
+    body.overflow = "hidden";
+    body.overscrollBehavior = "none";
+
+    document.addEventListener("touchstart", rememberTouchY, { passive: true });
+    document.addEventListener("touchmove", preventBackgroundTouchMove, { passive: false });
   }
 
   function unlockScroll() {
     if (savedBodyStyle === null) return;
+    document.removeEventListener("touchstart", rememberTouchY);
+    document.removeEventListener("touchmove", preventBackgroundTouchMove);
+    document.documentElement.setAttribute("style", savedHtmlStyle || "");
     document.body.setAttribute("style", savedBodyStyle);
     savedBodyStyle = null;
+    savedHtmlStyle = null;
     window.scrollTo(0, savedScrollY);
   }
 
+  function rememberTouchY(event) {
+    if (event.touches && event.touches.length) lastTouchY = event.touches[0].clientY;
+  }
+
+  function preventBackgroundTouchMove(event) {
+    if (!isOpen || !isMobileModal()) return;
+    var target = event.target;
+    if (target && target.closest && target.closest("#lvc-input")) return;
+
+    var scroller = target && target.closest ? target.closest("#lvc-list") : null;
+    if (!scroller) {
+      event.preventDefault();
+      return;
+    }
+
+    var touchY = event.touches && event.touches.length ? event.touches[0].clientY : lastTouchY;
+    var movingDown = touchY > lastTouchY;
+    var atTop = scroller.scrollTop <= 0;
+    var atBottom = Math.ceil(scroller.scrollTop + scroller.clientHeight) >= scroller.scrollHeight;
+    lastTouchY = touchY;
+
+    if ((movingDown && atTop) || (!movingDown && atBottom)) event.preventDefault();
+  }
+
   // --- mobile keyboard: keep the full-screen panel above the keyboard ---------
 
   // On phones the panel is position:fixed at height:100dvh. When the composer
@@ -580,11 +800,13 @@
     var panel = document.getElementById("lvc-panel");
     if (!panel || !window.visualViewport) return;
     if (isMobileModal()) {
+      if (isOpen) lockScroll();
       panel.style.height = window.visualViewport.height + "px";
       panel.style.top = window.visualViewport.offsetTop + "px";
       scrollToBottom(); // newest message stays in view above the keyboard
     } else {
       // Not the mobile modal — hand height/top back to the stylesheet.
+      unlockScroll();
       panel.style.height = "";
       panel.style.top = "";
     }
@@ -747,6 +969,15 @@
         // re-pin to the bottom so a just-arrived image stays in view.
         img.addEventListener("load", scrollToBottom);
         link.appendChild(img);
+      } else if (att.audio) {
+        var audio = document.createElement("audio");
+        audio.className = "lvc-att-audio";
+        audio.controls = true;
+        audio.preload = "metadata";
+        audio.src = att.url;
+        audio.setAttribute("aria-label", att.name);
+        wrap.appendChild(audio);
+        return;
       } else {
         link.className = "lvc-att-file";
         link.textContent = att.name;
@@ -805,7 +1036,7 @@
 
   function send() {
     var body = (inputEl.value || "").trim();
-    if ((!body && !pendingFiles.length) || sending) return;
+    if (mediaRecorder || (!body && !pendingFiles.length) || sending) return;
     sending = true;
     errorEl.hidden = true;
     var button = formEl.querySelector("button[type=submit]");
@@ -849,7 +1080,7 @@
     form.append("body", body);
     form.append("page_url", window.location.href);
     form.append("locale", config.locale);
-    pendingFiles.forEach(function (file) { form.append("files[]", file); });
+    pendingFiles.forEach(function (file) { form.append("files[]", file, file.name || "voice-message.webm"); });
     return form;
   }
 
@@ -983,6 +1214,7 @@
       "#lvc-root .lvc-tool{border:none;background:none;color:var(--lvc-muted);width:32px;height:32px;" +
       "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-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}" +
@@ -998,10 +1230,21 @@
       "#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[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-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}" +
       // 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}" +
       "#lvc-root .lvc-att-img img{max-width:100%;max-height:220px;border-radius:8px;display:block}" +
+      "#lvc-root .lvc-att-audio{display:block;width:240px;max-width:100%;height:36px}" +
       "#lvc-root .lvc-att-file{display:inline-block;padding:6px 10px;border-radius:8px;" +
       "background:rgba(0,0,0,.06);color:inherit;text-decoration:none;font-size:13px;" +
       "overflow-wrap:anywhere}" +

data/lib/livechat/widget.rb

@@ -103,6 +103,14 @@ module Livechat
           errorSend: t(:error_send, 'Could not send. Please try again.'),
           unreadAria: t(:unread_aria, 'unread messages'),
           attach: t(:attach, 'Attach files'),
+          recordAudio: t(:record_audio, 'Record audio'),
+          stopRecording: t(:stop_recording, 'Stop recording'),
+          cancelRecording: t(:cancel_recording, 'Cancel recording'),
+          recording: t(:recording, 'Recording %{time}'),
+          microphoneUnsupported: t(:microphone_unsupported, 'Audio recording is not supported in this browser.'),
+          microphoneDenied: t(:microphone_denied,
+                              'Microphone access was blocked. Allow microphone access in your browser and try again.'),
+          microphoneError: t(:microphone_error, 'Could not start audio recording.'),
           removeFile: t(:remove_file, 'Remove file'),
           attachmentError: t(:attachment_error, 'Some files could not be sent.'),
           expand: t(:expand, 'Expand'),

metadata

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