WIP tracklist navigation via now playing buffer #143

rtshkmr · 2025-02-25T22:31:16Z

No description provided.

rtshkmr

Notes

Adding some notes to guide our direction.

We should be very clear with prioritisation and focus on functionality wire ups before any cleanups

the code is ugly because we were rushing but the code is close to completion in terms of functionality. Integrating it is the main task.

rtshkmr · 2025-02-28T13:08:43Z

lib/vyasa_web/components/contexts/read.ex

@@ -255,18 +379,49 @@ defmodule VyasaWeb.Context.Read do
    })
  end

+  ### @bala here's how the injection is being done, we can hardcode inject the tracklist id and cursor and things will work as intended


This is where the injection is currently being done, the integration for this requires us to parse from URL to make this dynamic instead of this stubbed, static version of things

rtshkmr · 2025-02-28T13:10:45Z

lib/vyasa_web/components/contexts/read.ex

+          tracklist_cursor={@tracklist_cursor}
+          tracklist_id={@tracklist_id}


this visual debug dump is intended to help with ensuring correctness of the first mount state.

previously, the state issues @ mount that we experienced were happening because of the way that the injection of tracklist id was being trackloaded.

this is expected.

the integration task is what completes the proper wire-up of this.

rtshkmr · 2025-02-28T13:11:40Z

assets/js/app.js

+function addEmphasis(selectorId, className) {
+  const element = document.getElementById(selectorId);
+  if (element) {
+    if (!element.classList.contains(className)) {
+      element.classList.add(className);
+    }
+    element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    element.focus({ preventScroll: true });
+  }
+}
+
+function removeEmphasis(selectorId, className) {
+  console.log("WALDO", {selectorId, className})
+  const element = document.getElementById(selectorId);
+  if (element && element.classList.contains(className)) {
+    element.classList.remove(className);
+  }
+}


although the emphasis manager exists, this already does the job.

The wire up and pending tasks should prioritise other state management and sorting those aspects out rather than focusing on how the add emphasis works.

rtshkmr · 2025-02-28T13:13:36Z

lib/vyasa_web/components/contexts/read.ex

+    curr_tracklist =
+      Vyasa.Bhaj.get_tracklist(tracklist_id)
+      |> Vyasa.Repo.preload(tracks: [event: [verse: [:source, :chapter]]])
+
+    tracks = curr_tracklist.tracks
+    old_selector_id = "foo_track_" <> Enum.find(tracks, fn t -> t.order === curr_cursor end).id
+    selector_id = "foo_track_" <> track_id
+    class_name = "emphasized-verse"
+


this part is an unclean way of finding out the current tracklist.

however, fixing this can be scheduled to be done later (and the state wire ups / url parsing should be prioritised)

reason being that, just like how the read context currently has the other fields like the cursor in its state, we can just keep current tracklist within the socket state to avoid this JIT querying entirely.

rtshkmr · 2025-02-28T13:16:00Z

lib/vyasa_web/components/contexts/read.ex

+    selector_id = "foo_track_" <> track_id
+    class_name = "emphasized-verse"


currently thhere's a lack of coherence in the navigation targets.

this is the current integration task that is top priority.

lack of coherence:

the selector is dependent on the current content_action within the read mode

the two functions (one for :show_tracks and another for :show_verses) need to be wired up together.

^ this is the pending integration work.

once this is done, the navigation and everything will work

the emphasis and such already works

rtshkmr · 2025-02-28T13:17:23Z

lib/vyasa_web/components/contexts/read/tracks.ex

+          <div id={ "foo_track_" <> track.id } class="font-dn text-2xl">
+            TODO track foo_track_{track.id} view: <br /> {to_title_case(track.event.verse.body)}


this was a stubbed example of deterministic ids that could be targetted by the event handler and emphasized

it was supposed to be an example to follow for the content_action = :show_verses

we can clean this up and it's good to go

rtshkmr · 2025-02-28T13:17:57Z

lib/vyasa_web/components/core_components.ex

+  slot :trigger, doc: "The element that triggers the sheet to open."
+  slot :content, required: true, doc: "The content of the sheet."
+
+  def sheet(assigns) do


this is redundant, not being used and can be rm

i'm currently just using modal wrapper directly

rtshkmr · 2025-02-28T13:20:12Z

lib/vyasa_web/live/media_live/media_bridge.ex

+  end
+
+  @impl true
+  def handle_event(


there's a state management bug here (that's why the double clicking is necessary)

easiest signal for this is to look at the vissual debug dump and realise the value for :is_queue_visible doesn't toggle correctly

two actions to consdier:

clicking the button @ action bar

click-out from the playback queue

i haven't investigated the state management bug actually, so not sure as to the cause of it yet

this is an annoyance, but it can be tolerated, we can wontfix it for the meantime and this is low priority.

rtshkmr · 2025-02-28T13:21:11Z

lib/vyasa_web/live/media_live/media_bridge.ex

+      tracklist_cursor: track_order,
+      track_id: track_id,
+      tracklist_id: tracklist_id,
+      verse_id: verse_id,
+      chapter_no: chapter_no,
+      source_id: source_id,
+      source: source


this could be cleaned up by passingthe tracklist around, i had issues with it because of the json encoding stuff, but didn't know that we could jsut do a struct-serialise of sorts and pass it around

this is a refactoring candidate, but once again we can prioritse that cleanup for later

rtshkmr · 2025-02-28T13:22:09Z

lib/vyasa_web/live/media_live/media_bridge.html.heex

+    <.debug_dump
+      label="Loaded tracklist"
+      tracklist_id={@tracklist_id}
+      is_queue_visible={@is_queue_visible}


this is the debugdump signal i was talking about -- the toggling for this bool flag isn't entirely right

rtshkmr

@ks0m1c here are the key steps to getthis wired up

rtshkmr · 2025-02-28T14:32:57Z

lib/vyasa_web/components/contexts/read.ex

+          id: "read",
+          event: :set_cursor_in_tracklist,
+          tracklist_cursor: tracklist_cursor,
+          track_id: track_id,
+          tracklist_id: tracklist_id
+          # verse_id: verse_id,
+          # chapter_no: chapter_no,
+          # source_id: source_id,
+          # source: source


step 2: flat thing can just be :

cursor

tracklist

rtshkmr · 2025-02-28T14:33:44Z

lib/vyasa_web/components/contexts/read.ex

  defp apply_action(%Socket{} = socket, :show_tracks, _params) do
+    # FIXME: this is a static stub, for now, these can be injected via url params / slug
+    tracklist_id = "fc4bb25c-41c0-447a-90c7-894d4f52b183"


step 1: inject correctly, allow url params to override

cursor

tracklist id

rtshkmr · 2025-02-28T14:37:56Z

lib/vyasa_web/components/contexts/read.ex

+
+    IO.inspect(tracklist.title, label: "showing tracks in tracklist")
+
+    tracklist_loader = fn ->


this is where the loader gets init, 2 things that can affect it:

url params

clicking a single tracklist from the list of tracklists

rtshkmr · 2025-02-28T14:40:05Z

lib/vyasa_web/live/media_live/media_bridge.ex

+    tracklist_id: nil,
+    tracklist_cursor: 0,
    voice: nil,
    video: nil,
+    tracks: nil,


Step 3: handle the initial load @ media bridge

comments:

can be cleaned up to make it less flat.
a. the playback stuff (cursor + tracklist)
b. ui state stuff (is action bar visible, is queue visible)

bala is suggesting a non-sync model for this that will be simpler to do

an user-triggerred event-emitter model

rtshkmr · 2025-02-28T14:42:37Z

lib/vyasa_web/live/media_live/media_bridge.ex

+  def handle_event(
+        "setCursor",
+        %{
+          "track_order" => track_order,


naturally this follows the cleaned up struct for play state

rtshkmr · 2025-02-28T14:43:48Z

lib/vyasa_web/live/media_live/media_bridge.ex

+
+    # Do something with the track_order and track_id here, e.g., update the cursor
+
+    send(socket.parent_pid, %{


step 4:
not sure if this is the best way to send event from media bridge to the action-type specific component @ read context, VIA the mediator

this should likely do the mutate* thingy that relies on the mod registry

rtshkmr · 2025-02-28T15:02:18Z

lib/vyasa_web/live/media_live/media_bridge.ex

@@ -321,6 +409,42 @@ defmodule VyasaWeb.MediaLive.MediaBridge do
    })
  end

+  def handle_info(
+        %{event: :load_tracklist, tracklist_loader: loader, tracklist_cursor: tracklist_cursor},


@ks0m1c commented:
this can be simplified and moved away from a sync model

rtshkmr · 2025-02-28T15:04:57Z

lib/vyasa_web/live/media_live/media_bridge.html.heex

@@ -66,6 +73,13 @@
             px-4 sm:px-6 lg:px-8 py-3 flex items-center justify-center"
    >
      <div class="flex items-center space-x-4 sm:space-x-6 lg:space-x-8">
+        <.action_bar_toggler
+          is_action_bar_visible={@is_action_bar_visible}


step 5: UI

this toggle not done yet, just have to wire this up

nuance:
when in a hidden state, the icon for "show" should be visible on the bottom left or something

Add notes

6e2eba6

rtshkmr self-assigned this Feb 25, 2025

rtshkmr changed the title ~~Add notes~~ WIP tracklist navigation via now playing buffer Feb 25, 2025

rtshkmr added 13 commits February 26, 2025 10:36

Fix socket state assigns for :show_tracks

1665c55

Inject tracklist @ mediabridge on media handshake

410e93f

Jank wire up of state within the queue buffer

243601f

Basic wire up of tracklist_cursor

95502da

Keep buffer @ right, styling update @track summary

68baaee

SetCursor within mediabridge's state

6d92200

Add the msg passing

eea17c7

Add note for bala

462dd67

Add sufficient payload attrs for non-flat case

f2cea38

Minor change

c6db52b

Add emphasis example (still WIP)

01eff0d

Fix emphasis, less rm emphaiss

7cc2bb9

Fix the demphasis, ensure new cursor updates

6952f93

rtshkmr commented Feb 28, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WIP tracklist navigation via now playing buffer #143

WIP tracklist navigation via now playing buffer #143

rtshkmr commented Feb 25, 2025

rtshkmr left a comment

rtshkmr Feb 28, 2025

rtshkmr Feb 28, 2025

rtshkmr Feb 28, 2025

rtshkmr Feb 28, 2025

rtshkmr Feb 28, 2025

rtshkmr Feb 28, 2025

rtshkmr Feb 28, 2025

rtshkmr Feb 28, 2025

rtshkmr Feb 28, 2025

rtshkmr Feb 28, 2025

rtshkmr left a comment

rtshkmr Feb 28, 2025

rtshkmr Feb 28, 2025

rtshkmr Feb 28, 2025

rtshkmr Feb 28, 2025

rtshkmr Feb 28, 2025

rtshkmr Feb 28, 2025

rtshkmr Feb 28, 2025 •

edited

Loading

rtshkmr Feb 28, 2025

rtshkmr Feb 28, 2025 •

edited

Loading

		tracklist_cursor={@tracklist_cursor}
		tracklist_id={@tracklist_id}

		selector_id = "foo_track_" <> track_id
		class_name = "emphasized-verse"

		<div id={ "foo_track_" <> track.id } class="font-dn text-2xl">
		TODO track foo_track_{track.id} view: <br /> {to_title_case(track.event.verse.body)}


		IO.inspect(tracklist.title, label: "showing tracks in tracklist")

		tracklist_loader = fn ->


		# Do something with the track_order and track_id here, e.g., update the cursor

		send(socket.parent_pid, %{

WIP tracklist navigation via now playing buffer #143

Are you sure you want to change the base?

WIP tracklist navigation via now playing buffer #143

Conversation

rtshkmr commented Feb 25, 2025

rtshkmr left a comment

Choose a reason for hiding this comment

Notes

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rtshkmr left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rtshkmr Feb 28, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rtshkmr Feb 28, 2025 • edited Loading

Choose a reason for hiding this comment

rtshkmr Feb 28, 2025 •

edited

Loading

rtshkmr Feb 28, 2025 •

edited

Loading