1 files changed, 165 insertions, 0 deletions
diff --git a/client/player.js b/client/player.js
new file mode 100644
index 0000000..0d7cadc
--- /dev/null
+++ b/client/player.js
@@ -0,0 +1,165 @@
+
+var is_mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)
+var links = document.querySelectorAll("a")
+var audio, music = [], current_index = -1, typing = false
+var active = false
+// var comment = document.querySelector("#comment")
+Array.prototype.slice.apply(links).forEach(function(url){
+  if (url.href.match(/\.(mp3|wav|ogg)/i)) {
+    var index = music.length
+    if (is_mobile) url.href = url.href.replace(/^https/,"http")
+    music.push(url)
+    url.addEventListener("click", function(e){
+      if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return
+      e.preventDefault()
+      play(index)
+    })
+  }
+  else if (url.href.match(/(gif|jpe?g|png|bmp)/i)) {
+    // url.innerHTML = "<img src='" + url.href + "'>"
+    // url.addEventListener("click", function(e){
+    //   if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return
+    //   e.preventDefault()
+    //   url.classList.toggle("zoomed")
+    // })
+  }
+})
+const el = document.querySelector('.player')
+const title_el = el.querySelector('.title')
+const icon_el = el.querySelector('.icon')
+const pos_el = el.querySelector('.pos')
+const track_el = el.querySelector('.track')
+const dot_el = el.querySelector('.dot')
+const time_el = el.querySelector('.time')
+const track_width = track_el.offsetWidth
+const track_left = pos_el.offsetLeft
+if (music.length) {
+  audio = document.createElement("audio")
+  window.a = audio
+  audio.setAttribute("controls", true)
+  audio.addEventListener("ended", next)
+  audio.addEventListener("timeupdate", timeupdate)
+  // audio.src = music[0].href
+  // var player = document.querySelector("table")
+  // player.parentNode.insertBefore(audio, player)
+  document.body.addEventListener("keydown", keydown)
+  // comment.addEventListener("focus", focusTextBox)
+  // comment.addEventListener("blur", blurTextBox)
+}
+icon_el.addEventListener('click', toggle)
+
+if (is_mobile) {
+  pos_el.addEventListener('touchstart', e => mousedown(e.touches[0]))
+  pos_el.addEventListener('touchmove', e => mousemove(e.touches[0]))
+  window.addEventListener('touchup', mouseup)
+} else {
+  pos_el.addEventListener('mousedown', mousedown)
+  pos_el.addEventListener('mousemove', mousemove)
+  window.addEventListener('mouseup', mouseup)
+}
+var down = false
+var mousex = 0
+function mousedown(e) {
+  e.preventDefault && e.preventDefault()
+  down = true
+  mousex = (e.pageX - track_left) / track_width
+}
+function mousemove(e) {
+  if (!down) return
+  mousex = Math.min(Math.max(0, (e.pageX - track_left) / track_width), 1)
+  dot_el.style.transform = 'translateX(' + (mousex * track_width) + 'px)'
+}
+function mouseup(e) {
+  if (!down) return
+  down = false
+  var t = mousex * audio.duration
+  audio.currentTime = Math.round(t)
+  dot_el.style.transform = 'translateX(' + (mousex * track_width) + 'px)'
+}
+
+function play(index){
+  if (!active) {
+    active = true
+    el.classList.add('active')
+  }
+  if (index === music.length) return stop();
+  if (!icon_el.classList.contains('active')) {
+    icon_el.classList.add('active')
+  }
+  current_index = (index + music.length) % music.length
+  const a_el = music[current_index]
+  audio.src = a_el.href
+  audio.play()
+
+  const header = prevUntil(a_el.parentNode, 'h3')
+  const title = (index + 1) + '. ' + header.innerText + ': ' + a_el.innerText
+  title_el.innerHTML = title
+  var playing = document.querySelector(".playing")
+  if (playing) playing.classList.remove("playing")
+  music[current_index].classList.add("playing")
+}
+function prev(){
+  play(current_index - 1)
+}
+function next(){
+  play(current_index + 1)
+}
+function pause() {
+  icon_el.classList.remove('active')
+}
+function stop() {
+  el.classList.remove('active')
+  var playing = document.querySelector(".playing")
+  if (playing) playing.classList.remove("playing")
+  active = false
+}
+function toggle(){
+  if (audio.paused) {
+    icon_el.classList.add('active')
+    audio.play()
+  } else {
+    pause()
+    audio.pause()
+  }
+}
+function timeupdate() {
+  if (down) return
+  let { currentTime, duration } = audio
+  let t = currentTime / duration
+  dot_el.style.transform = 'translateX(' + (track_width * t) + 'px)'
+  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
+}
+function keydown(e){
+  if (typing || e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return
+  switch (e.keyCode) {
+    case 37: // left
+      prev()
+      break;
+    case 39: // right
+      next()
+      break;
+    case 32: // spacebar
+      e.preventDefault()
+      toggle()
+      break;
+  }
+}
+
+function prevUntil (elem, selector) {
+  elem = elem.previousElementSibling;
+  while (elem) {
+    if (elem.matches(selector)) break;
+    elem = elem.previousElementSibling;
+  }
+  return elem;
+}
+// function focusTextBox (){ typing = true }
+// function blurTextBox (){ typing = false }