Programming Phoenix book: syncing frontend-backend state in example Rumbl app

Hello, I’ve been going thru this great book, building the example app, and ran into some issues. I am trying to check whether these issues are “by design” or I understand it incorrectly, or there’s something else to keep in mind:

To quickly summarize, the app plays a youtube video and lets you write annotations (comments) as the video is playing. Each annotation has a timestamp that should make sure it’s displayed at given time of the playback.

It runs on websockets. On join, all annotations are loaded from backend. Then on frontend, there’s a scheduling function that “ticks” every second and renders the annotations that match the current time on the video player.

The important bits on frontend:

let vidChannel   = socket.channel("videos:" + videoId, () => {
      return {last_seen_id: lastSeenId} // sending this param when user joins (or rejoins) channel
    }

vidChannel.join()
      .receive("ok", resp => {
        let ids = resp.annotations.map(ann => ann.id)
        if(ids.length > 0){ lastSeenId = Math.max(...ids) } //sets lastSeenId to newest existing annotation/
        this.scheduleMessages(msgContainer, resp.annotations)
      })
      .receive("error", reason => console.log("join failed", reason))

vidChannel.on("new_annotation", (resp) => {
      lastSeenId = resp.id // update lastSeenId to the newly created annotation id /
      this.renderAnnotation(msgContainer, resp)
    })

on backend this is the core:

def join("videos:" <> video_id, params, socket) do
    send(self(), :after_join)
    last_seen_id = params["last_seen_id"] || 0
    video_id = String.to_integer(video_id)
    video = Multimedia.get_video!(video_id)

    annotations =
      video
      |> Multimedia.list_annotations(last_seen_id)
      |> Phoenix.View.render_many(AnnotationView, "annotation.json")

    {:ok, %{annotations: annotations}, assign(socket, :video_id, video_id)}
  end

def handle_in("new_annotation", params, user, socket) do
    case Multimedia.annotate_video(user, socket.assigns.video_id, params) do
      {:ok, annotation} ->
        broadcast!(socket, "new_annotation", %{
          id: annotation.id,
          user: RumblWeb.UserView.render("user.json", %{user: user}),
          body: annotation.body,
          at: annotation.at
        })

        {:reply, :ok, socket}

      {:error, changeset} ->
        {:reply, {:error, %{errors: changeset}}, socket}
    end
  end

This works mostly fine, but here are the issues:

When one user posts an annotation while playing video, this is immediately shown to all users, regardless their current player time. It shows even when the player is stopped. This is obviously caused by directly calling the renderAnnotation once any is received. I assume this is by design to simplify things.

Now what if I wanted the new annotation to be “scheduled” together with the other ones, to appear only at the right time? I can think of two approaches:

1. keeping annotations array on client too, push new annotations to it, and call the schedule function - however this means two states that need to be kept in sync, probably a nightmare and not very functional apporach

2. every time new annotation is added, return all annotations from backend, rather than just the new one, and call the scheduling function. however, this would mean transferring potentially almost the same data to all clients every time new annotation is added. sounds like overkill.

3. rewrite the annotations as LiveView component What I’m not exacly sure whether I’d be able to keep this component in sync with the video player.. Has anyone tried this approach by any chance?

Can you think of some other efficient solutions to this, please? Thank you!

For completeness, this is the full repo of the app: GitHub - josefrichter/rumbl_umbrella: rumbl app from programming phoenix book · GitHub