Init media session @ metadata load

Init functions don't have action handlers yet

assets/js/hooks/audio_player.js

@@ -97,10 +97,8 @@ AudioPlayer = {
     localStorage.setItem("session", JSON.stringify(sess))
   },
   handleMetadataLoad(e) {
-    console.log("Loaded metadata!", {
-      duration: this.player.duration,
-      event: e,
-    })
+    const playback = JSON.parse(this?.player?.dataset?.playback)
+    this.initMediaSession(playback)
   },
   handlePlayPause() {
     console.log("{play_pause event triggerred} player:", this.player)
@@ -188,37 +186,25 @@ AudioPlayer = {
       this.player.play() // force a play event if is not paused
     }
   },
+  /**
+   * At the point of init, we register some action handlers and update the media session's metadata
+   * */
+  initMediaSession(playback) {
+    // TODO: register action handlers
+    this.updateMediaSession(playback)
+  },
   updateMediaSession(playback) {
     const isSupported = "mediaSession" in navigator;
     if (!isSupported) {
       return;
     }
     const payload = this.createMediaMetadataPayload(playback)
     console.log("new metadata payload", {playback, payload})
-    // navigator.mediaSession.metadata = new MediaMetadata(payload)
-
     navigator.mediaSession.metadata = new MediaMetadata(payload)
-    // navigator.mediaSession.metadata = new MediaMetadata({
-    //   "title": "Hanuman Chalisa",
-    //   "album": "Shree Hanuman Chalisa - Hanuman Ashtak",
-    //   artwork: playback?.meta?.artwork,
-    //   // "artwork": [
-    //   //   {
-    //   //     "type": "image/jpeg",
-    //   //     "src": "https://i.ytimg.com/vi/AETFvQonfV8/hqdefault.jpg",
-    //   //     "sizes": "480x360"
-    //   //   }
-    //   // ],
-    //   "artist": "Hariharan, Gulshan Kumar",
-    //   "extraKey": "foo"
-    // });
-
-    // TODO: register action handlers
   },
   createMediaMetadataPayload(playback) {
     const {meta} = playback
-    const session = navigator.mediaSession
-    const sessionMetadata = session?.metadata
+    const sessionMetadata = navigator?.mediaSession?.metadata
     const oldMetadata = sessionMetadata
           ? {
             title: sessionMetadata.title,
@@ -237,16 +223,6 @@ AudioPlayer = {
       artist,
     }
 
-    // const res = new MediaMetadata(metadata)
-    console.log("creating new MediaMetadata", {
-      oldMetadata,
-      meta,
-      sessionMetadata,
-      metadata,
-      // res
-    })
-
-    // return res
     return metadata
   }
 }

lib/vyasa_web/components/audio_player.ex

@@ -1,38 +1,43 @@
 defmodule VyasaWeb.AudioPlayer do
-    use VyasaWeb, :live_component
+  use VyasaWeb, :live_component
 
-    def mount(_, _, socket) do
-      socket
-      |> assign(playback: nil)
-    end
+  def mount(_, _, socket) do
+    socket
+    |> assign(playback: nil)
+  end
 
-    @impl true
-    def render(assigns) do
-      ~H"""
-      <div id="audio-player" phx-hook="AudioPlayer">
-        <audio></audio>
-      </div>
-      """
-    end
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div id="audio-player" phx-hook="AudioPlayer">
+      <audio data-playback={Jason.encode!(@playback)}></audio>
+    </div>
+    """
+  end
 
-    @impl true
-    def update(%{
+  @impl true
+  def update(
+        %{
           event: "media_bridge:update_audio_player" = event,
-          playback: playback,
-             } = _assigns, socket) do
-      IO.inspect("handle update case in audio_player.ex with event = #{event}", label: "checkpoint")
+          playback: playback
+        } = _assigns,
+        socket
+      ) do
+    IO.inspect("handle update case in audio_player.ex with event = #{event}", label: "checkpoint")
+
+    {
+      :ok,
+      socket
+      |> assign(playback: playback)
+    }
+  end
 
-      {
-        :ok, socket
-        |> assign(playback: playback)
-      }
-    end
+  @impl true
+  def update(assigns, socket) do
+    IO.inspect(assigns, label: "what")
 
-    @impl true
-    def update(assigns, socket) do
-      IO.inspect(assigns, label: "what")
-      {:ok, socket
-      |> assign(playback: nil)
-      }
-    end
+    {:ok,
+     socket
+     |> assign(playback: nil)}
   end
+end