[Feature - Inline Audio Message] - Mini audio player added if message is audio.

Author: milos-dukic

app/assets/stylesheets/soundbar.css

@@ -0,0 +1,132 @@
+@keyframes quiet {
+  25%{
+    transform: scaleY(.6);
+  }
+  50%{
+    transform: scaleY(.4);
+  }
+  75%{
+    transform: scaleY(.8);
+  }
+}
+
+@keyframes normal {
+  25%{
+    transform: scaleY(1);
+  }
+  50%{
+    transform: scaleY(.4);
+  }
+  75%{
+    transform: scaleY(.6);
+  }
+}
+@keyframes loud {
+  25%{
+    transform: scaleY(1);
+  }
+  50%{
+    transform: scaleY(.4);
+  }
+  75%{
+    transform: scaleY(1.2);
+  }
+}
+
+.audio-message-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.audio-message-metadata {
+  color: var(--color-text);
+  font-size: 0.8rem;
+}
+
+.audio-message-btn {
+  height: 24px
+}
+
+.audio-message {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.sound-bar-container{
+  display: flex;
+  justify-content: space-between;
+  height: 32px;
+  --boxSize: 4px;
+  --gutter: 2px;
+  width: calc((var(--boxSize) + var(--gutter)) * 12);
+  margin-left: 6px;
+}
+
+.sound-bar {
+  height: 100%;
+  width: var(--boxSize);
+  background: #0099cc;
+  border-radius: 2px;
+}
+
+.sound-bar-animate {
+  animation-duration: 1.2s;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+}
+
+.sound-bar-0{
+  transform: scaleY(.3);
+  animation-name: quiet;
+}
+
+.sound-bar-1{
+  transform: scaleY(.6);
+  animation-name: normal;
+}
+
+.sound-bar-2{
+  transform: scaleY(.3);
+  animation-name: quiet;
+}
+
+.sound-bar-3{
+  transform: scaleY(.8);
+  animation-name: loud;
+}
+
+.sound-bar-4{
+  transform: scaleY(.3);
+  animation-name: quiet;
+}
+
+.sound-bar-5{
+  transform: scaleY(.6);
+  animation-name: normal;
+}
+
+.sound-bar-6{
+  transform: scaleY(.3);
+  animation-name: quiet;
+}
+
+.sound-bar-7{
+  transform: scaleY(.8);
+  animation-name: loud;
+}
+
+.sound-bar-8{
+  transform: scaleY(.3);
+  animation-name: quiet;
+}
+
+.sound-bar-9{
+  transform: scaleY(.6);
+  animation-name: normal;
+}
+
+.sound-bar-10{
+  transform: scaleY(.3);
+  animation-name: quiet;
+}

app/helpers/messages/attachment_presentation.rb

@@ -5,7 +5,7 @@ def initialize(message, context:)
 
   def render
     if message.attachment.attached?
-      if message.attachment.previewable? || message.attachment.variable?
+      if message.attachment.previewable? || message.attachment.variable? || message.attachment.audio?
         render_preview
       else
         render_link
@@ -20,6 +20,8 @@ def render
     def render_preview
       if message.attachment.video?
         video_preview_tag
+      elsif message.attachment.audio?
+        audio_preview_tag
       else
         lightboxed_image_preview_tag
       end
@@ -35,6 +37,30 @@ def video_preview_tag
       end
     end
 
+    def audio_preview_tag
+      tag.div class: "audio-message-container", data: { controller: "sound", sound_url_value: rails_blob_path(message.attachment), sound_audio_message_duration_value: message.attachment.metadata["duration"].to_i }  do
+        tag.div class: "sound audio-message" do
+          tag.button("🔊", class: "btn btn--plain audio-message-btn", data: { action: "sound#playAndAnimate" }) + sound_preview_tag
+        end + tag.div(message.attachment.metadata["duration"].to_i, class: "audio-message-metadata", data: { sound_target: "audioMessageMetadata" })
+      end
+    end
+
+    def generate_sound_bars_tags
+      html_element = ""
+
+      11.times do |i|
+        html_element << tag.div(class: "sound-bar sound-bar-#{i}")
+      end
+
+      html_element.html_safe
+    end
+
+    def sound_preview_tag
+      tag.div(class: "sound-bar-container", data: { sound_target: "soundBarContainer" }) do
+        generate_sound_bars_tags
+      end
+    end
+
     def lightboxed_image_preview_tag
       width, height = preview_dimensions
 

app/javascript/controllers/sound_controller.js

@@ -1,10 +1,53 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static values = { "url": String }
+  static values = { "url": String, "audioMessageDuration": Number }
+  static targets = [ "soundBarContainer", "audioMessageMetadata" ]
+
+  audioMessageMetadataTargetConnected() {
+    this.#setInitialDurationMetadata();
+  }
 
   play() {
     const sound = new Audio(this.urlValue)
     sound.play()
   }
+
+  playAndAnimate() {
+    const sound = new Audio(this.urlValue)
+    sound.addEventListener("ended", () => {
+        this.#removeSoundBarAnimateCss();
+        this.#setInitialDurationMetadata();
+    });
+
+    sound.addEventListener("timeupdate", (event) => {
+      this.audioMessageMetadataTarget.innerHTML = this.#formatTime(this.audioMessageDurationValue - sound.currentTime)
+    });
+
+    sound.play()
+    this.#addSoundBarAnimateCss()
+  }
+
+  #removeSoundBarAnimateCss () {
+    for (const soundBarItem of this.soundBarContainerTarget.children) {
+      soundBarItem.classList.remove("sound-bar-animate")
+    }
+  }
+
+  #addSoundBarAnimateCss() {
+    for (const soundBarItem of this.soundBarContainerTarget.children) {
+      soundBarItem.classList.add("sound-bar-animate")
+    }
+  }
+
+  #formatTime(timeInSeconds) {
+    let minutes = Math.floor(Math.ceil(timeInSeconds) / 60)
+    let seconds = Math.ceil(timeInSeconds) % 60
+
+    return (minutes < 10 ? '0' + minutes : minutes) + ":" + (seconds < 10 ? '0' + seconds : seconds)
+  }
+
+  #setInitialDurationMetadata() {
+    this.audioMessageMetadataTarget.innerHTML = this.#formatTime(this.audioMessageDurationValue)
+  }
 }