Merge pull request #6 from rauversion/new-form

New form

README.md

@@ -31,13 +31,24 @@ Now you can visit [`localhost:4000`](http://localhost:4000) from your browser.
 - [x] File uploads Avatar
 - [x] User auth
 - [x] Tracks
+- [ ] paginate profile tracks /:username
+- [ ] paginate /tracks
+- [ ] filter public/private tracks (where: private: true)
+- [ ] add metadata form step**
+- [ ] give feedback on upload preprosessing
+- [ ] a logo for rauv
 - [ ] Reposts
 - [ ] Albums
 - [ ] Playlists
 - [ ] Likes
 - [ ] Followers / Followings
+- [ ] telemetry for dashboard
+
 - [x] load waveform data as data
-- [x] Range responses https://github.com/elixir-plug/plug/pull/526/files
+- [x] Range responses
+
+
+
 
 # Setup:
 

assets/css/app.css

@@ -7,31 +7,37 @@
 /* Alerts and form errors used by phx.new */
 .alert {
   padding: 15px;
-  margin-bottom: 20px;
+  /*margin-bottom: 20px;*/
   border: 1px solid transparent;
   border-radius: 4px;
 }
+
 .alert-info {
   color: #31708f;
   background-color: #d9edf7;
   border-color: #bce8f1;
 }
+
 .alert-warning {
   color: #8a6d3b;
   background-color: #fcf8e3;
   border-color: #faebcc;
 }
+
 .alert-danger {
   color: #a94442;
   background-color: #f2dede;
   border-color: #ebccd1;
 }
+
 .alert p {
   margin-bottom: 0;
 }
+
 .alert:empty {
   display: none;
 }
+
 .invalid-feedback {
   color: #a94442;
   display: block;
@@ -49,24 +55,25 @@
   transition: opacity 1s ease-out;
 }
 
-.phx-disconnected{
+.phx-disconnected {
   cursor: wait;
 }
-.phx-disconnected *{
+
+.phx-disconnected * {
   pointer-events: none;
 }
 
 .phx-modal {
-  opacity: 1!important;
+  opacity: 1 !important;
   position: fixed;
   z-index: 1;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: auto;
-  background-color: rgb(0,0,0);
-  background-color: rgba(0,0,0,0.4);
+  background-color: rgb(0, 0, 0);
+  background-color: rgba(0, 0, 0, 0.4);
 }
 
 .phx-modal-content {
@@ -89,5 +96,4 @@
   color: black;
   text-decoration: none;
   cursor: pointer;
-}
-
+}

assets/js/app.js

@@ -29,16 +29,128 @@ import { Application } from "@hotwired/stimulus"
 
 import "./controllers"
 
-import * as ActiveStorage from "@rails/activestorage"
+import WaveSurfer from 'wavesurfer'
+
+// import * as ActiveStorage from "@rails/activestorage"
 
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
-let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
 
 // 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())
 
+let execJS = (selector, attr) => {
+  document.querySelectorAll(selector).forEach(el => liveSocket.execJS(el, el.getAttribute(attr)))
+}
+
+let Hooks = {}
+
+
+Hooks.AudioPlayer = {
+  mounted(){
+    this.heightValue = 70
+    this.playerTarget = this.el
+    this.peaks = JSON.parse(this.el.dataset.audioPeaks)
+    this.url = this.el.dataset.audioUrl
+    this.playiconTarget = this.el.querySelector('[data-audio-target="playicon"]')
+    this.pauseiconTarget =  this.el.querySelector('[data-audio-target="pauseicon"]')
+
+    this._wave = WaveSurfer.create({
+      container: this.playerTarget,
+      backend: 'MediaElement',
+      waveColor: 'grey',
+      progressColor: 'tomato',
+      height: this.heightValue || 70,
+      //fillParent: false,
+      barWidth: 2,
+      //barHeight: 10, // the height of the wave
+      barGap: null,
+      minPxPerSec: 2,
+      pixelRatio: 10,
+      cursorWidth: 1,
+      cursorColor: "lightgray",
+      normalize: false,
+      responsive: true,
+      fillParent: true
+    })
+
+    console.log("VAUES",this.peaks)
+
+    if (!this.url) return 
+
+    this._wave.load(this.url, this.peaks)
+
+    this._wave.on('pause', ()=> {
+      this.playiconTarget.style.display = 'block'
+      this.pauseiconTarget.style.display = 'none'
+    })
+
+    this._wave.on('play', ()=> {
+      this.playiconTarget.style.display = 'none'
+      this.pauseiconTarget.style.display = 'block'
+    })
+
+
+    /*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 = () => {
+      if(this.player.src){
+        document.removeEventListener("click", enableAudio)
+        if(this.player.readyState === 0){
+          this.player.play().catch(error => null)
+          this.player.pause()
+        }
+      }
+    }
+    document.addEventListener("click", enableAudio)
+    this.el.addEventListener("js:listen_now", () => this.play({sync: true}))
+    this.el.addEventListener("js:play_pause", () => {
+      if(this.player.paused){
+        this.play()
+      }
+    })
+    this.handleEvent("play", ({url, token, elapsed, artist, title}) => {
+      this.playbackBeganAt = nowSeconds() - elapsed
+      let currentSrc = this.player.src.split("?")[0]
+      if(currentSrc === url && this.player.paused){
+        this.play({sync: true})
+      } else if(currentSrc !== url) {
+        this.player.src = `${url}?token=${token}`
+        this.play({sync: true})
+      }
+
+      if("mediaSession" in navigator){
+        navigator.mediaSession.metadata = new MediaMetadata({artist, title})
+      }
+    })
+    this.handleEvent("pause", () => this.pause())
+    this.handleEvent("stop", () => this.stop())*/
+  },
+
+  wave(){
+    return this._wave
+  },
+
+  play(opts = {}){
+    this.wave().playPause()
+  },
+
+  pause(){
+    clearInterval(this.progressTimer)
+    this.player.pause()
+  },
+
+  stop(){
+    this.wave().stop()
+  },
+}
+
+let liveSocket = new LiveSocket("/live", Socket, {hooks: Hooks, params: {_csrf_token: csrfToken}})
+
 // connect if there are any LiveViews on the page
 liveSocket.connect()
 

assets/js/controllers/audio_controller.js

@@ -1,70 +1,74 @@
-// app/javascript/controllers/audio_controller.js
 import { Controller } from "@hotwired/stimulus"
 import WaveSurfer from 'wavesurfer'
-
 export default class extends Controller {
-  static targets = ['player', 'play', 'pause']
+  static targets = ['player', 'play', 'pause', 'playicon', 'pauseicon']
 
   static values = {
     height: String
   }
 
+  _wave = null
+
   initialize() {}
+
   connect() {
+    if(!this.data.get('url')) {
+      console.error("skip player, no url found!")
+      return
+    }
     console.log("INIT WAVEEE")
-    this.wave()
+    this.initWave()
+  }
+  disconnect() {
+    this._wave && this._wave.destroy()
   }
-  disconnect() {}
-
-  wave(){
-    if (this._wave == undefined) {
-      this._wave = WaveSurfer.create({
-        container: this.playerTarget,
-        backend: 'MediaElement',
-        waveColor: 'grey',
-        progressColor: 'tomato',
-        height: this.heightValue || 70,
-        //fillParent: false,
-        barWidth: 2,
-        //barHeight: 10, // the height of the wave
-        barGap: null,
-        minPxPerSec: 2,
-        pixelRatio: 10,
-        cursorWidth: 1,
-        cursorColor: "lightgray",
-        normalize: false,
-        responsive: true,
-        fillParent: true
-      })
 
+  initWave() {
+    this._wave = WaveSurfer.create({
+      container: this.playerTarget,
+      backend: 'MediaElement',
+      waveColor: 'grey',
+      progressColor: 'tomato',
+      height: this.heightValue || 70,
+      //fillParent: false,
+      barWidth: 2,
+      //barHeight: 10, // the height of the wave
+      barGap: null,
+      minPxPerSec: 2,
+      pixelRatio: 10,
+      cursorWidth: 1,
+      cursorColor: "lightgray",
+      normalize: false,
+      responsive: true,
+      fillParent: true
+    })
 
-      console.log("VAUES",this.data.get('peaks').length)
-      const data = JSON.parse(this.data.get('peaks')) // [0.45,0.54,0.43,0.61,0.47,0.71,0.42,0.59,0.39,0.59,0.41,0.57,0.39,0.59,0.41,0.56,0.43,0.57,0.44,0.59,0.45,0.6,0.44,0.56,0.42,0.63,0.4,0.63,0.36]
-      this._wave.load(this.data.get('url'), data)
+    console.log("VAUES",this.data.get('peaks').length)
+    const data = JSON.parse(this.data.get('peaks')) 
+    this._wave.load(this.data.get('url'), data)
 
-      window.tt = this
+    var _this = this
 
+    _this.pauseTarget.style.display = 'none'
+    this._wave.on('pause', function () {
+      _this.playiconTarget.style.display = 'block'
+      _this.pauseiconTarget.style.display = 'none'
+    })
+    this._wave.on('play', function () {
+      _this.playiconTarget.style.display = 'none'
+      _this.pauseiconTarget.style.display = 'block'
+    })
+  }
 
-      var _this = this
-      // var that = this
-      _this.pauseTarget.style.display = 'none'
-      this._wave.on('pause', function () {
-        _this.playTarget.style.display = 'block'
-        _this.pauseTarget.style.display = 'none'
-      })
-      this._wave.on('play', function () {
-        _this.playTarget.style.display = 'none'
-        _this.pauseTarget.style.display = 'block'
-      })
-    }
+  wave(){
     return this._wave
   }
 
   play(){
-    this.wave().play()
+    this.wave().playPause()
   }
 
   pause(){
-    this.wave().pause()
+    this.wave().stop()
   }
 }

config/config.exs

@@ -52,7 +52,8 @@ config :tailwind,
 # Configures Elixir's Logger
 config :logger, :console,
   format: "$time $metadata[$level] $message\n",
-  metadata: [:request_id]
+  metadata: [:request_id],
+  truncate: :infinity
 
 # Use Jason for JSON parsing in Phoenix
 config :phoenix, :json_library, Jason

config/dev.exs

@@ -65,7 +65,9 @@ config :rauversion, RauversionWeb.Endpoint,
   ]
 
 # Do not include metadata nor timestamps in development logs
-config :logger, :console, format: "[$level] $message\n"
+config :logger, :console,
+  format: "[$level] $message\n",
+  truncate: :infinity
 
 config :rauversion, :app_name, "Rauversion.com"
 

lib/rauversion/accounts.ex

@@ -8,6 +8,21 @@ defmodule Rauversion.Accounts do
 
   alias Rauversion.Accounts.{User, UserToken, UserNotifier}
 
+  @topic inspect(__MODULE__)
+
+  def subscribe do
+    Phoenix.PubSub.subscribe(Rauversion.PubSub, @topic)
+  end
+
+  def broadcast_change({:ok, result}, event) do
+    Phoenix.PubSub.broadcast(Rauversion.PubSub, @topic, {__MODULE__, event, result})
+    {:ok, result}
+  end
+
+  def broadcast_change({:error, result}, event) do
+    {:error, result}
+  end
+
   def list_accounts(limit \\ 20) do
     User |> limit(^limit) |> Repo.all()
   end