1 files changed, 123 insertions, 0 deletions
diff --git a/public/assets/js/lib/views/details/audioPlayer.js b/public/assets/js/lib/views/details/audioPlayer.js
new file mode 100644
index 0000000..700daa5
--- /dev/null
+++ b/public/assets/js/lib/views/details/audioPlayer.js
@@ -0,0 +1,123 @@
+const AudioPlayer = View.extend({
+  el: "#audioPlayer",
+
+  events: {
+    "click .icon": "toggle",
+  },
+
+  initialize: function () {
+    this.$title = this.$(".title");
+
+    this.icon_el = this.$(".icon").get(0);
+    this.pos_el = this.$(".pos").get(0);
+    this.track_el = this.$(".track").get(0);
+    this.dot_el = this.$(".dot").get(0);
+    this.time_el = this.$(".time").get(0);
+
+    this.mousedown = this.mousedown.bind(this);
+    this.mousemove = this.mousemove.bind(this);
+    this.mouseup = this.mouseup.bind(this);
+
+    if (is_mobile) {
+      this.pos_el.addEventListener("touchstart", (e) =>
+        this.mousedown(e.touches[0])
+      );
+      this.pos_el.addEventListener("touchmove", (e) =>
+        this.mousemove(this.e.touches[0])
+      );
+      window.addEventListener("touchend", this.mouseup.bind);
+    } else {
+      this.pos_el.addEventListener("mousedown", this.mousedown);
+      this.pos_el.addEventListener("mousemove", this.mousemove);
+      window.addEventListener("mouseup", this.mouseup);
+    }
+    this.down = false;
+    this.mousex = 0;
+
+    audio.listen(this);
+    audio.el.addEventListener("timeupdate", this.onTimeUpdate.bind(this));
+  },
+
+  /**
+   * Mouse movements
+   * */
+  mousedown: function (e) {
+    e.preventDefault && e.preventDefault();
+    const track_left = this.pos_el.offsetLeft;
+    this.down = true;
+    this.mousex = (e.pageX - track_left) / this.track_el.offsetWidth;
+  },
+
+  mousemove: function (e, isTouch) {
+    if (!this.down) return;
+    const track_left = this.pos_el.offsetLeft;
+    this.mousex = Math.min(
+      Math.max(0, (e.pageX - track_left) / this.track_el.offsetWidth),
+      1
+    );
+    this.dot_el.style.transform =
+      "translateX(" + this.mousex * this.track_el.offsetWidth + "px)";
+  },
+
+  mouseup: function (e) {
+    if (!this.down) return;
+    this.down = false;
+    var t = this.mousex * (audio.el.duration || 1);
+    audio.el.currentTime = Math.round(t);
+    this.dot_el.style.transform =
+      "translateX(" + this.mousex * this.track_el.offsetWidth + "px)";
+  },
+
+  toggle: function () {
+    audio.toggle();
+  },
+
+  /**
+   * Receiving play events
+   */
+  onPlay: function (element) {
+    if (!this.active) {
+      this.active = true;
+      this.$el.addClass("active");
+    }
+    // if (index === music.length) return stop();
+    if (!this.icon_el.classList.contains("active")) {
+      this.icon_el.classList.add("active");
+    }
+    this.onTimeUpdate();
+
+    if (element) {
+      const title = element.innerText;
+      this.$title.html(title);
+    }
+  },
+
+  onPause: function () {
+    this.icon_el.classList.remove("active");
+  },
+
+  onStop: function () {
+    this.$el.removeClass("active");
+    this.active = false;
+  },
+
+  onTimeUpdate: function () {
+    if (this.down) {
+      return;
+    }
+    let { currentTime, duration } = audio.el;
+    let t = currentTime / (duration || 1);
+    this.dot_el.style.transform =
+      "translateX(" + this.track_el.offsetWidth * t + "px)";
+    this.time_el.innerHTML = time(currentTime) + " / " + time(duration);
+  },
+});
+
+function time(n) {
+  if (!n) return "0:00";
+  n = Math.floor(n);
+  let s = n % 60;
+  if (s < 10) s = "0" + s;
+  let m = Math.floor(n / 60);
+  return m + ":" + s;
+}