feat(common): improve online slide over

midarrlabs · Feb 1, 2022 · b2772a7 · b2772a7
1 parent bcab50a
commit b2772a7
Show file tree

Hide file tree

Showing 8 changed files with 101 additions and 53 deletions.
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -14,16 +14,10 @@ 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 => {
-    if (info.detail.kind === 'initial' && window.location.toString().includes("/watch")) {
-        channel.push('shout', { user_id: window.userId, page_title: document.title })
-    }
-
-    topbar.hide()
-})
+window.addEventListener("phx:page-loading-stop", info => topbar.hide())
 
 channel.on("shout", message => {
-    const element = document.querySelector(`#current-location-${ message.user_id }`)
+    const element = document.querySelector(`#user-status-${ message.user_id }`)
 
     if(element) {
         element.innerHTML = `Watching ${ message.page_title }`
@@ -43,7 +37,7 @@ presence.onSync(() => {
     element.innerHTML = ''
 
     for (const item of presences) {
-      element.innerHTML += `<li>
+      element.innerHTML += `<li id="online-user-${ item.user_id }">
                                <div class="relative group py-6 px-5 flex items-center">
                                  <div class="-m-1 flex-1 block p-1">
                                    <div class="absolute inset-0" aria-hidden="true"></div>
@@ -58,7 +52,7 @@ presence.onSync(() => {
                                      </span>
                                      <div class="ml-4 truncate">
                                         <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>
+                                        <p id="user-status-${ item.user_id }" class="text-sm text-gray-500 truncate">Online</p>
                                      </div>
                                    </div>
                                  </div>

diff --git a/lib/media_server_web/live/watch_live/show.ex b/lib/media_server_web/live/watch_live/show.ex
@@ -1,5 +1,5 @@
 defmodule MediaServerWeb.WatchLive.Show do
-  use Phoenix.LiveView, layout: {MediaServerWeb.WatchView, "watch.html"}
+  use MediaServerWeb, :live_view
 
   @impl true
   def mount(_params, _session, socket) do

diff --git a/lib/media_server_web/live/watch_live/show.html.heex b/lib/media_server_web/live/watch_live/show.html.heex
@@ -1,3 +1,3 @@
-<video style="height: 100vh; width: 100%; background-color: black;" id="video" poster={@poster} controlsList="nodownload" controls autoplay>
+<video id="video" poster={@poster} controlsList="nodownload" controls autoplay>
     <source src={@stream_url} type="video/mp4">
 </video>
diff --git a/lib/media_server_web/router.ex b/lib/media_server_web/router.ex
@@ -21,15 +21,17 @@ defmodule MediaServerWeb.Router do
 
     live "/movies", MoviesLive.Index, :index
     live "/movies/:movie", MoviesLive.Show, :show
-    live "/movies/:movie/watch", WatchLive.Show, :show
 
     live "/series", SeriesLive.Index, :index
     live "/series/:serie", SeriesLive.Show, :show
 
-    live "/episodes/:episode/watch", WatchLive.Show, :show
-
     live "/dev/settings", SettingsLive.Index, :index
 
+    live_session :watch, root_layout: {MediaServerWeb.WatchView, "watch.html"} do
+      live "/movies/:movie/watch", WatchLive.Show, :show
+      live "/episodes/:episode/watch", WatchLive.Show, :show
+    end
+
     get "/movies/:movie/stream", StreamController, :show
     get "/episodes/:episode/stream", StreamController, :show
 

diff --git a/lib/media_server_web/templates/layout/live.html.heex b/lib/media_server_web/templates/layout/live.html.heex
@@ -1,34 +1 @@
-    <div>
-      <header class="z-10 sticky top-0 w-full">
-        <div class="relative flex-shrink-0 h-16 bg-white border-b border-gray-200 shadow-sm flex">
-
-            <div class="flex-1 flex justify-between px-4 sm:px-6">
-
-                <div class="flex-1 flex">
-                  <div class="-my-px flex space-x-8">
-
-                    <%= live_redirect "Home", to: Routes.home_index_path(@socket, :index), class: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium" %>
-                  </div>
-                </div>
-
-                <div class="-my-px ml-6 flex space-x-8">
-
-                    <button type="button" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
-                      <span class="inline-block relative">
-                          <span>Online</span>
-                          <span class="inline-block h-2.5 w-2.5 mx-1 bg-green-400 rounded-full"></span>
-                      </span>
-                    </button>
-
-                    <%= link "Log out", to: Routes.user_session_path(@socket, :delete), method: :delete, class: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium" %>
-                </div>
-            </div>
-        </div>
-      </header>
-
-      <div>
-
-        <%= @inner_content %>
-
-      </div>
-    </div>
+<%= @inner_content %>
diff --git a/lib/media_server_web/templates/layout/root.html.heex b/lib/media_server_web/templates/layout/root.html.heex
@@ -6,10 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <%= csrf_meta_tag() %>
     <%= live_title_tag assigns[:page_title] %>
-    <%= if Phoenix.Controller.current_url(@conn) !== Routes.watch_show_path(@conn, :show, :id) do %>
-    <script src="https://cdn.tailwindcss.com"></script>
     <link href="https://unpkg.com/@tailwindcss/[email protected]/dist/forms.min.css" rel="stylesheet">
-    <% end %>
+    <script src="https://cdn.tailwindcss.com"></script>
     <%= if @current_user do %>
     <script>
         window.userId = "<%= assigns[:current_user].id %>";
@@ -21,6 +19,61 @@
   </head>
   <body>
   <%= if @current_user do %>
+    <header class="z-10 sticky top-0 w-full">
+        <div class="relative flex-shrink-0 h-16 bg-white border-b border-gray-200 shadow-sm flex">
+
+            <div class="flex-1 flex justify-between px-4 sm:px-6">
+
+                <div class="flex-1 flex">
+                  <div class="-my-px flex space-x-8">
+
+                    <%= link "Home", to: Routes.home_index_path(@conn, :index), class: "border-transparent text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium" %>
+                  </div>
+                </div>
+
+                <div class="-my-px ml-6 flex space-x-8 self-center">
+                    <div>
+                        <button phx-click={JS.toggle(to: "#online-slide-over")} type="button" class="border-transparent text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
+                          <span class="inline-block relative">
+                              <span>Online</span>
+                              <span class="inline-block h-2.5 w-2.5 mx-1 bg-green-400 rounded-full"></span>
+                          </span>
+                        </button>
+
+                        <div id="online-slide-over" class="hidden fixed inset-0 overflow-hidden" role="dialog" aria-modal="true">
+                          <div class="absolute inset-0 overflow-hidden">
+
+                            <div class="absolute inset-0 bg-gray-900 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
+                            <div class="fixed inset-y-0 right-0 pl-10 max-w-full flex">
+                              <div class="relative w-96">
+                                <div class="absolute top-0 left-0 -ml-8 pt-6 pr-2 flex sm:-ml-10 sm:pr-4">
+
+                                  <button phx-click={JS.toggle(to: "#online-slide-over")} type="button" class="rounded-md text-gray-300 hover:text-white focus:outline-none focus:ring-2 focus:ring-white">
+                                    <span class="sr-only">Close panel</span>
+                                    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                                    </svg>
+                                  </button>
+                                </div>
+
+                                <div class="h-full bg-white py-6 overflow-y-auto">
+                                    <h2 class="px-4 text-lg font-medium text-gray-900">
+                                        Online
+                                    </h2>
+
+                                    <ul phx-update="ignore" id="online-users" role="list" class="flex-1 divide-y divide-gray-200 overflow-y-auto"></ul>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                    </div>
+
+                    <%= link "Log out", to: Routes.user_session_path(@conn, :delete), method: :delete, class: "border-transparent text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium" %>
+                </div>
+            </div>
+        </div>
+    </header>
 
     <%= @inner_content %>
   <% else %>

diff --git a/lib/media_server_web/templates/watch/watch.html.heex b/lib/media_server_web/templates/watch/watch.html.heex
@@ -1 +1,31 @@
-<%= @inner_content %>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <%= csrf_meta_tag() %>
+    <%= live_title_tag assigns[:page_title] %>
+    <style>
+        body {
+            margin: unset;
+        }
+        video {
+            height: 100vh;
+            width: 100%;
+            background-color: black;
+        }
+    </style>
+    <%= if @current_user do %>
+    <script>
+        window.userId = "<%= assigns[:current_user].id %>";
+        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=10")}></script>
+    <% end %>
+  </head>
+  <body>
+    <%= @inner_content %>
+  </body>
+</html>
diff --git a/lib/media_server_web/views/layout_view.ex b/lib/media_server_web/views/layout_view.ex
@@ -1,6 +1,8 @@
 defmodule MediaServerWeb.LayoutView do
   use MediaServerWeb, :view
 
+  alias Phoenix.LiveView.JS
+
   # Phoenix LiveDashboard is available only in development by default,
   # so we instruct Elixir to not warn if the dashboard route is missing.
   @compile {:no_warn_undefined, {Routes, :live_dashboard_path, 2}}