resolve channel problems

Author: Tomáš Král

assets/js/video.js

@@ -17,7 +17,10 @@ let Video = {
     let msgContainer = document.getElementById("msg-container");
     let msgInput = document.getElementById("msg-input");
     let postButton = document.getElementById("msg-submit");
-    let vidChannel = socket.channel("videos:" + videoId);
+    let lastSeenId = 0;
+    let vidChannel = socket.channel("videos:" + videoId, () => {
+      return { last_seen_id: lastSeenId };
+    });
 
     postButton.addEventListener("click", (e) => {
       let payload = { body: msgInput.value, at: Player.getCurrentTime() };
@@ -28,13 +31,29 @@ let Video = {
     });
 
     vidChannel.on("new_annotation", (resp) => {
+      lastSeenId = resp.id;
       this.renderAnnotation(msgContainer, resp);
     });
 
+    msgContainer.addEventListener("click", (e) => {
+      e.preventDefault();
+      let seconds =
+        e.target.getAttribute("data-seek") ||
+        e.target.parentNode.getAttribute("data-seek");
+      if (!seconds) {
+        return;
+      }
+      Player.seekTo(seconds);
+    });
+
     vidChannel
       .join()
-      .receive("ok", ({ annotations }) => {
-        annotations.forEach((ann) => this.renderAnnotation(msgContainer, ann));
+      .receive("ok", (resp) => {
+        let ids = resp.annotations.map((ann) => ann.id);
+        if (ids.length > 0) {
+          lastSeenId = Math.max(...ids);
+        }
+        this.scheduleMessages(msgContainer, resp.annotations);
       })
       .receive("error", (reason) => console.log("join failed", reason));
   },
@@ -47,15 +66,41 @@ let Video = {
 
   renderAnnotation(msgContainer, { user, body, at }) {
     let template = document.createElement("div");
-
     template.innerHTML = `
       <a href="#" data-seek="${this.esc(at)}">
+      [${this.formatTime(at)}]
       <b>${this.esc(user.username)}</b>: ${this.esc(body)}
       </a>
       `;
     msgContainer.appendChild(template);
     msgContainer.scrollTop = msgContainer.scrollHeight;
   },
+
+  scheduleMessages(msgContainer, annotations) {
+    clearTimeout(this.scheduleTimer);
+    this.schedulerTimer = setTimeout(() => {
+      let ctime = Player.getCurrentTime();
+      let remaining = this.renderAtTime(annotations, ctime, msgContainer);
+      this.scheduleMessages(msgContainer, remaining);
+    }, 1000);
+  },
+
+  renderAtTime(annotations, seconds, msgContainer) {
+    return annotations.filter((ann) => {
+      if (ann.at > seconds) {
+        return true;
+      } else {
+        this.renderAnnotation(msgContainer, ann);
+        return false;
+      }
+    });
+  },
+
+  formatTime(at) {
+    let date = new Date(null);
+    date.setSeconds(at / 1000);
+    return date.toISOString().substr(14, 5);
+  },
 };
 
 export default Video;

lib/rumbl/multimedia.ex

@@ -73,9 +73,10 @@ defmodule Rumbl.Multimedia do
     |> Repo.insert()
   end
 
-  def list_annotations(%Video{} = video) do
+  def list_annotations(%Video{} = video, since_id \\ 0) do
     Repo.all(
       from a in Ecto.assoc(video, :annotations),
+        where: a.id > ^since_id,
         order_by: [asc: a.at, asc: a.id],
         limit: 500,
         preload: [:user]

lib/rumbl_web/channels/video_channel.ex

@@ -3,13 +3,14 @@ defmodule RumblWeb.VideoChannel do
   alias Rumbl.{Accounts, Multimedia}
   alias RumblWeb.AnnotationView
 
-  def join("videos:" <> video_id, _params, socket) do
+  def join("videos:" <> video_id, params, socket) do
+    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()
+      |> Multimedia.list_annotations(last_seen_id)
       |> Phoenix.View.render_many(AnnotationView, "annotation.json")
 
     {:ok, %{annotations: annotations}, assign(socket, :video_id, video_id)}