live_beats/assets/js/app.js

127 lines
3.9 KiB
JavaScript
Raw Normal View History

2021-09-02 18:00:57 +00:00
import "phoenix_html"
import {Socket} from "phoenix"
2021-11-16 16:58:22 +00:00
// import {LiveSocket} from "./phoenix_live_view"
import {LiveSocket} from "phoenix_live_view"
2021-09-02 18:00:57 +00:00
import topbar from "../vendor/topbar"
2021-11-05 19:57:33 +00:00
let nowSeconds = () => Math.round(Date.now() / 1000)
2021-10-27 20:02:56 +00:00
2021-11-08 19:32:40 +00:00
let execJS = (selector, attr) => {
document.querySelectorAll(selector).forEach(el => liveSocket.execJS(el, el.getAttribute(attr)))
}
2021-10-27 20:02:56 +00:00
let Hooks = {}
Hooks.Flash = {
2021-10-27 20:02:56 +00:00
mounted(){
let hide = () => this.el.click()
let timer = setTimeout(() => hide(), 8000)
this.el.addEventListener("mouseover", () => {
clearTimeout(timer)
timer = setTimeout(() => hide(), 8000)
})
2021-10-27 20:02:56 +00:00
}
}
2021-11-05 00:49:19 +00:00
Hooks.AudioPlayer = {
mounted(){
this.playbackBeganAt = null
this.player = this.el.querySelector("audio")
this.currentTime = this.el.querySelector("#player-time")
this.duration = this.el.querySelector("#player-duration")
this.progress = this.el.querySelector("#player-progress")
let enableAudio = () => {
2021-11-08 18:46:23 +00:00
if(this.player.src){
document.removeEventListener("click", enableAudio)
2021-11-16 16:58:22 +00:00
if(this.player.readyState === 0){
this.player.play().catch(error => null)
this.player.pause()
}
2021-11-08 18:46:23 +00:00
}
2021-11-05 00:49:19 +00:00
}
document.addEventListener("click", enableAudio)
2021-11-05 19:57:33 +00:00
this.el.addEventListener("js:listen_now", () => this.play({sync: true}))
2021-11-05 00:49:19 +00:00
this.el.addEventListener("js:play_pause", () => {
2021-11-05 19:57:33 +00:00
if(this.player.paused){
this.play()
}
2021-11-05 00:49:19 +00:00
})
2021-11-06 03:02:31 +00:00
this.handleEvent("play", ({url, token, elapsed}) => {
2021-11-05 19:57:33 +00:00
this.playbackBeganAt = nowSeconds() - elapsed
2021-11-06 03:02:31 +00:00
let currentSrc = this.player.src.split("?")[0]
if(currentSrc === url && this.player.paused){
2021-11-05 19:57:33 +00:00
this.play({sync: true})
2021-11-06 03:02:31 +00:00
} else if(currentSrc !== url) {
this.player.src = `${url}?token=${token}`
2021-11-05 19:57:33 +00:00
this.play({sync: true})
}
2021-11-05 00:49:19 +00:00
})
2021-11-12 03:42:10 +00:00
this.handleEvent("pause", () => this.pause())
this.handleEvent("stop", () => this.stop())
2021-11-05 00:49:19 +00:00
},
2021-11-05 19:57:33 +00:00
play(opts = {}){
let {sync} = opts
2021-11-05 00:49:19 +00:00
this.player.play().then(() => {
2021-11-05 19:57:33 +00:00
if(sync){ this.player.currentTime = nowSeconds() - this.playbackBeganAt }
2021-11-05 00:49:19 +00:00
this.progressTimer = setInterval(() => this.updateProgress(), 100)
}, error => {
if(error.name === "NotAllowedError"){
execJS("#enable-audio", "data-js-show")
}
})
2021-11-05 00:49:19 +00:00
},
pause(){
clearInterval(this.progressTimer)
2021-11-05 19:57:33 +00:00
this.player.pause()
2021-11-05 00:49:19 +00:00
},
2021-11-12 03:42:10 +00:00
stop(){
clearInterval(this.progressTimer)
this.player.pause()
this.player.currentTime = 0
this.updateProgress()
this.duration.innerText = ""
this.currentTime.innerText = ""
},
2021-11-05 00:49:19 +00:00
updateProgress(){
if(isNaN(this.player.duration)){ return false }
2021-11-10 19:29:53 +00:00
if(this.player.currentTime >= this.player.duration){
2021-11-12 03:42:10 +00:00
this.pushEvent("next_song_auto")
2021-11-10 19:29:53 +00:00
clearInterval(this.progressTimer)
return
}
2021-11-05 00:49:19 +00:00
this.progress.style.width = `${(this.player.currentTime / (this.player.duration) * 100)}%`
this.duration.innerText = this.formatTime(this.player.duration)
this.currentTime.innerText = this.formatTime(this.player.currentTime)
},
formatTime(seconds){ return new Date(1000 * seconds).toISOString().substr(14, 5) }
}
2021-09-02 18:00:57 +00:00
let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
let liveSocket = new LiveSocket("/live", Socket, {
2021-10-27 20:02:56 +00:00
hooks: Hooks,
2021-11-10 21:07:10 +00:00
params: {_csrf_token: csrfToken}
2021-09-02 18:00:57 +00:00
})
// Show progress bar on live navigation and form submits
topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
window.addEventListener("phx:page-loading-start", info => topbar.show())
window.addEventListener("phx:page-loading-stop", info => topbar.hide())
2021-11-05 00:49:19 +00:00
window.addEventListener("js:exec", e => e.target[e.detail.call](...e.detail.args))
2021-09-02 18:00:57 +00:00
// connect if there are any LiveViews on the page
liveSocket.connect()
// expose liveSocket on window for web console debug logs and latency simulation:
// >> liveSocket.enableDebug()
// >> liveSocket.enableLatencySim(1000) // enabled for duration of browser session
// >> liveSocket.disableLatencySim()
window.liveSocket = liveSocket
2021-09-03 13:57:15 +00:00