feat(common): add online status information

This adds an "Online" status when a user is online, and updates to "Watching" when watching media.
midarrlabs · Jan 31, 2022 · 552f8ab · 552f8ab
1 parent b4fdf0b
commit 552f8ab
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 4 deletions.
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -14,7 +14,21 @@ let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("
 topbar.config({barColors: {0: "#6366f1"}, shadowColor: "rgba(0, 0, 0, .3)"})
 
 window.addEventListener("phx:page-loading-start", info => topbar.show())
-window.addEventListener("phx:page-loading-stop", info => topbar.hide())
+window.addEventListener("phx:page-loading-stop", info => {
+    if (info.detail.kind === 'initial' && window.location.toString().includes("/watch")) {
+        channel.push('shout', { user_id: window.userId, page_title: document.title })
+    }
+
+    topbar.hide()
+})
+
+channel.on("shout", message => {
+    const element = document.querySelector(`#current-location-${ message.user_id }`)
+
+    if(element) {
+        element.innerHTML = `Watching ${ message.page_title }`
+    }
+})
 
 presence.onSync(() => {
   let presences = []
@@ -43,7 +57,8 @@ presence.onSync(() => {
                                        <span class="bg-green-400 absolute top-0 right-0 block h-2.5 w-2.5 rounded-full ring-2 ring-white" aria-hidden="true"></span>
                                      </span>
                                      <div class="ml-4 truncate">
-                                       <p class="text-sm text-gray-900 truncate">${ item.user_name }</p>
+                                        <p class="text-sm text-gray-900 truncate">${ item.user_name }</p>
+                                        <p id="current-location-${ item.user_id }" class="text-sm text-gray-500 truncate">Online</p>
                                      </div>
                                    </div>
                                  </div>

diff --git a/lib/media_server_web/templates/layout/root.html.heex b/lib/media_server_web/templates/layout/root.html.heex
@@ -20,7 +20,7 @@
         window.userName = "<%= assigns[:current_user].name %>";
     </script>
     <script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
-    <script defer phx-track-static type="text/javascript" src={Routes.static_path(@conn, "/assets/app.js?id=9")}></script>
+    <script defer phx-track-static type="text/javascript" src={Routes.static_path(@conn, "/assets/app.js?id=10")}></script>
     <% end %>
   </head>
   <body>

diff --git a/lib/media_server_web/templates/watch/watch.html.heex b/lib/media_server_web/templates/watch/watch.html.heex
@@ -22,7 +22,7 @@
         window.userEmail = "<%= assigns[:current_user].email %>";
         window.userName = "<%= assigns[:current_user].name %>";
     </script>
-    <script defer phx-track-static type="text/javascript" src={Routes.static_path(@conn, "/assets/app.js?id=9")}></script>
+    <script defer phx-track-static type="text/javascript" src={Routes.static_path(@conn, "/assets/app.js?id=10")}></script>
     <% end %>
   </head>
   <body>