refactor(mobile): replace wavesurfer with simple-wave-record for audio recording

Author: xyhp915

gulpfile.js

@@ -130,8 +130,7 @@ const common = {
         'node_modules/prop-types/prop-types.min.js',
         'node_modules/interactjs/dist/interact.min.js',
         'node_modules/photoswipe/dist/umd/*.js',
-        'node_modules/wavesurfer.js/dist/wavesurfer.min.js',
-        'node_modules/wavesurfer.js/dist/plugins/record.min.js',
+        'node_modules/@xyhp915/simple-wave-record/dist/simple-wave-record.umd.js',
         'packages/amplify/dist/amplify.js',
         'packages/ui/dist/ui/ui.js',
         'node_modules/@sqlite.org/sqlite-wasm/sqlite-wasm/jswasm/sqlite3.wasm',

package.json

@@ -138,6 +138,7 @@
         "@js-joda/timezone": "2.5.0",
         "@logseq/diff-merge": "^0.2.2",
         "@logseq/react-tweet-embed": "1.3.1-1",
+        "@xyhp915/simple-wave-record": "^0.0.2",
         "@radix-ui/colors": "^0.1.8",
         "@sentry/react": "^6.18.2",
         "@sentry/tracing": "^6.18.2",
@@ -192,7 +193,6 @@
         "threads": "1.6.5",
         "url": "^0.11.0",
         "util": "^0.12.5",
-        "wavesurfer.js": "7.10.1",
         "yargs-parser": "20.2.4"
     },
     "resolutions": {

resources/mobile/index.html

@@ -15,7 +15,7 @@
 <script defer src="./js/interact.min.js"></script>
 <script defer src="./js/marked.min.js"></script>
 <script defer src="./js/eventemitter3.umd.min.js"></script>
-<script defer src="./js/wavesurfer.min.js"></script>
+<script defer src="./js/simple-wave-record.umd.js"></script>
 <script defer src="./js/record.min.js"></script>
 <script defer src="./js/photoswipe.umd.min.js"></script>
 <script defer src="./js/photoswipe-lightbox.umd.min.js"></script>

src/main/mobile/components/recorder.cljs

@@ -55,8 +55,9 @@
 
     ;; save local
     (when-let [filename (some->> ext (str "Audio-"
-                                          (date/get-date-time-string (t/now)
-                                                                     {:formatter-str audio-file-format})
+                                          (date/get-date-time-string
+                                           (t/now)
+                                           {:formatter-str audio-file-format})
                                           "."))]
       (p/let [file (js/File. [blob] filename #js {:type (.-type blob)})
               result (editor-handler/db-based-save-assets! (state/get-current-repo)
@@ -98,7 +99,7 @@
                                              #js {:renderRecordedAudio false
                                                   :scrollingWaveform true
                                                   :scrollingWaveformWindow 5
-                                                  :mimeType "audio/mp4"          ;; m4a
+                                                  :mimeType "audio/mp4" ;; m4a
                                                   :audioBitsPerSecond 128000}))]
          (set-wavesurfer! w)
          (reset! *wavesurfer w)
@@ -117,7 +118,7 @@
                                        (catch js/Error e
                                          (js/console.warn "WARN: bad progress time:" e))))
                                    33)))
-           ;; auto start
+         ;; auto start
          (.startRecording r)
          #(some-> @*wavesurfer (.destroy))))
      [])
@@ -156,9 +157,9 @@
      [])
     [:div.p-6.flex.justify-between
      [:div.flex.justify-between.items-center.w-full
-    ;; [:span.flex.flex-col.timer-wrap
-    ;;  [:strong.timer "00:00"]
-    ;;  [:small "05:00"]]
+      ;; [:span.flex.flex-col.timer-wrap
+      ;;  [:strong.timer "00:00"]
+      ;;  [:small "05:00"]]
       (shui/button {:variant :outline
                     :class "record-ctrl-btn rounded-full recording"
                     :on-click (fn []

tailwind.mobile.css

@@ -15,6 +15,7 @@
 @import "codemirror/theme/solarized.css";
 @import "resources/css/tabler-extension.css";
 @import "@tabler/icons-webfont/tabler-icons.min.css";
+@import "@xyhp915/simple-wave-record/dist/style.css";
 @import "src/main/frontend/animations.css";
 @import "src/main/frontend/common.css";
 @import "src/main/frontend/ui.css";

yarn.lock

@@ -1672,6 +1672,11 @@
   resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
   integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
 
+"@xyhp915/simple-wave-record@^0.0.2":
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/@xyhp915/simple-wave-record/-/simple-wave-record-0.0.2.tgz#cfedf0b37f4cb7e077e2be42253894e913bb2393"
+  integrity sha512-KSMSTii8D+tXPyrjg/kiPjNR1LPWFGWApUVdN2QLpfiM1O3LRxM7/oGS7ZZFFiH8wXtiCS3d5dGp4s7K5KZVGg==
+
 JSONStream@^1.0.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.5.tgz#3208c1f08d3a4d99261ab64f92302bc15e111ca0"
@@ -10784,11 +10789,6 @@ watchpack@^2.4.1:
     glob-to-regexp "^0.4.1"
     graceful-fs "^4.1.2"
 
-wavesurfer.js@7.10.1:
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/wavesurfer.js/-/wavesurfer.js-7.10.1.tgz#c2f799a05d939cbb1e5df8aa7e0485ab44ad7594"
-  integrity sha512-tF1ptFCAi8SAqKbM1e7705zouLC3z4ulXCg15kSP5dQ7VDV30Q3x/xFRcuVIYTT5+jB/PdkhiBRCfsMshZG1Ug==
-
 webidl-conversions@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"