Merge pull request #47 from ve1ld/chore/player-improvements

Support playback seeking by clicking on the verse

Author: ks0m1c

lib/vyasa_web/live/media_live/player_live.ex

@@ -41,8 +41,12 @@ defmodule VyasaWeb.MediaLive.Player do
 
   @impl true
   def handle_event("seekToMs", %{"position_ms" => position_ms} = _payload, socket) do
-    IO.puts("[handleEvent] seekToMs #{position_ms} is_integer? #{is_integer(position_ms)} is string? #{is_binary(position_ms)}")
+    IO.puts("[handleEvent] seekToMs #{position_ms}")
+    socket
+    |> handle_seek(position_ms)
+    end
 
+  defp handle_seek(socket, position_ms) do
     %{playback: %Playback{
          medium: %Voice{} = _voice,
          playing?: playing?,
@@ -58,12 +62,12 @@ defmodule VyasaWeb.MediaLive.Player do
 
     {:noreply, socket
      |> push_event("seekTo", %{positionS: position_s})
-     |> assign(playback: %{playback | played_at: played_at, elapsed: position_s})
+     |> assign(playback: %{playback | played_at: played_at, elapsed: position_s}) #modifies the socket after emitting client-side event
     }
-    end
+  end
 
   @impl true
-  @doc"""
+  @doc """
   On receiving a voice_ack, the written and player contexts are now synced.
   A playback struct is created that represents this synced-state and the client-side hook is triggerred
   to register the associated events timeline.
@@ -72,11 +76,10 @@ defmodule VyasaWeb.MediaLive.Player do
     %Playback{
       medium: %Voice{events: events},
     } = playback = voice |> Playback.create_playback()
-    # } = playback = voice |> MediaLibrary.gen_voice_playback()
+    # } = playback = voice |> MediaLibrary.gen_voice_playback() # TODO: example of where the media bridge can be introduced
 
     socket = socket
     |> assign(playback: playback)
-    # Registers Events Timeline on Client-Side:
     |> push_event("registerEventsTimeline", %{voice_events: events |> create_events_payload()})
 
     {:noreply, socket}
@@ -87,6 +90,26 @@ defmodule VyasaWeb.MediaLive.Player do
     {:noreply, socket}
   end
 
+  # Handles playback sync relative to a particular verse id. In this case, the playback state is expected
+  # to get updated to the start of the event corresponding to that particular verse.
+  @impl true
+  def handle_info({_, :playback_sync, %{verse_id: verse_id} = _inner_msg} = _msg, socket) do
+    %{playback: %Playback{
+         medium: %Voice{
+           events: events,
+         } = _voice,
+     } = _playback} = socket.assigns
+
+    %Event{
+      origin: target_ms
+    } = _target_event = events
+    |> get_target_event(verse_id)
+
+
+    socket
+    |> handle_seek(target_ms)
+  end
+
   def handle_info(msg, socket) do
     IO.inspect(msg, label: "unexpected message in @player_live")
     {:noreply, socket}
@@ -97,6 +120,10 @@ defp create_events_payload([%Event{} | _] = events) do
   events|> Enum.map(&(&1 |> Map.take([:origin, :duration, :phase, :fragments, :verse_id])))
 end
 
+defp get_target_event([%Event{} | _] = events, verse_id) do
+  events
+  |> Enum.find(fn e -> e.verse_id === verse_id  end)
+end
 
 
 defp play_voice(socket, %Playback{

lib/vyasa_web/live/source_live/chapter/index.ex

@@ -58,6 +58,18 @@ defmodule VyasaWeb.SourceLive.Chapter.Index do
     |> assign_meta()
   end
 
+  @impl true
+  @doc """
+  Handles the action of clicking to seek by emitting the verse_id to the live player
+  via the pubsub system.
+  """
+  def handle_event("clickVerseToSeek",
+                %{"verse_id" => verse_id} = _payload,
+                %{assigns: %{session: %{"id" => sess_id}}}  = socket) do
+    Vyasa.PubSub.publish(%{verse_id: verse_id}, :playback_sync, "media:session:" <> sess_id)
+    {:noreply, socket}
+  end
+
   @doc """
   Upon rcv of :media_handshake, which indicates an intention to sync by the player,
   returns a message containing %Voice{} info that can be used to generate a playback.
@@ -79,8 +91,7 @@ defmodule VyasaWeb.SourceLive.Chapter.Index do
     {:noreply, socket}
   end
 
-  def handle_info(msg, socket) do
-    IO.inspect(msg, label: "unexpected message in @chapter")
+  def handle_info(msg, socket) do IO.inspect(msg, label: "unexpected message in @chapter")
     {:noreply, socket}
   end
 
@@ -96,35 +107,36 @@ defmodule VyasaWeb.SourceLive.Chapter.Index do
   end
 
   @doc """
-  Renders a clickable verse list.
+  Renders a clickable verse display.
 
   ## Examples
-      <.verse_list>
+      <.verse_display>
         <:item title="Title" navigate={~p"/myPath"}><%= @post.title %></:item>
-      </.list>
+      </.verse_display>
   """
   attr :id, :string, required: false
   slot :item, required: true do
     attr :title, :string
+    attr :verse_id, :string, required: false
     attr :navigate, :any, required: false
   end
-  def verse_list(assigns) do
+  def verse_display(assigns) do
     ~H"""
     <div class="mt-14" id={@id}>
       <dl class="-my-4 divide-y divide-zinc-100">
         <div :for={item <- @item} class="flex gap-4 py-4 text-sm leading-6 sm:gap-8">
           <dt
-            :if={Map.has_key?(item, :title) && Map.has_key?(item, :navigate)}
+            :if={Map.has_key?(item, :title) && Map.has_key?(item, :verse_id)}
             class="w-1/6 flex-none text-zinc-500"
           >
-            <.link
-              navigate={item[:navigate]}
+           <button
+              phx-click={JS.push("clickVerseToSeek", value: %{verse_id: item.verse_id})}
               class="text-sm font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
             >
               <div class="font-dn text-2xl mb-4">
                 <%= item.title %>
               </div>
-            </.link>
+           </button>
           </dt>
           <dd class="text-zinc-700"><%= render_slot(item) %></dd>
         </div>
@@ -133,4 +145,4 @@ defmodule VyasaWeb.SourceLive.Chapter.Index do
     """
   end
 
-end
+ end

lib/vyasa_web/live/source_live/chapter/index.html.heex

@@ -13,9 +13,11 @@
         </:subtitle>
     </.header>
 
-    <.verse_list id={dom_id} :for={{dom_id, verse} <- @streams.verses}>
-        <:item title={"#{verse.chapter_no}.#{verse.no}"}
-            navigate={~p"/explore/#{@source_title}/#{@chap.no}/#{verse.no}"} >
+    <.verse_display id={dom_id} :for={{dom_id, verse} <- @streams.verses}>
+        <:item
+            title={"#{verse.chapter_no}.#{verse.no}"}
+            verse_id={verse.id}
+        >
 
         <p class="font-dn text-xl">
         <%= verse.body |> String.split("।।") |> List.first()  %>
@@ -36,7 +38,7 @@
                 <%=  verse && Enum.any?(verse.translations) && hd(verse.translations).target.body %>
             </p>
         </:item>
-    </.verse_list>
+    </.verse_display>
 
     <.back navigate={~p"/explore/#{@source_title}"}>Back to <%= @source_title %> Chapters</.back>
 </div>