From 635a2c9d21cfb429e0818da1c150f57560f4328b Mon Sep 17 00:00:00 2001 From: Chris McCord Date: Wed, 10 Nov 2021 13:23:02 -0500 Subject: [PATCH] Make sidebar live and add enhanced flash --- assets/js/app.js | 15 +- assets/tailwind.config.js | 1 + lib/live_beats_web.ex | 16 +- lib/live_beats_web/live/live_helpers.ex | 20 +- lib/live_beats_web/live/player_live.ex | 2 +- .../templates/layout/live.html.heex | 308 +++++++++++++++++- .../templates/layout/root.html.heex | 296 +---------------- 7 files changed, 338 insertions(+), 320 deletions(-) diff --git a/assets/js/app.js b/assets/js/app.js index dcebec6..a6c6a9a 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -12,15 +12,14 @@ let execJS = (selector, attr) => { let Hooks = {} -Hooks.Progress = { - setWidth(at){ - this.el.style.width = `${Math.floor((at / (this.max - this.min)) * 100)}%` - }, +Hooks.Flash = { mounted(){ - this.min = parseInt(this.el.dataset.min) - this.max = parseInt(this.el.dataset.max) - this.val = parseInt(this.el.dataset.val) - setInterval(() => this.setWidth(this.val++), 1000) + let hide = () => this.el.click() + let timer = setTimeout(() => hide(), 8000) + this.el.addEventListener("mouseover", () => { + clearTimeout(timer) + timer = setTimeout(() => hide(), 8000) + }) } } diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js index 268ccab..cee7805 100644 --- a/assets/tailwind.config.js +++ b/assets/tailwind.config.js @@ -5,6 +5,7 @@ module.exports = { mode: 'jit', purge: [ './js/**/*.js', + '../lib/*_web.ex', '../lib/*_web/**/*.*ex' ], theme: { diff --git a/lib/live_beats_web.ex b/lib/live_beats_web.ex index e41e284..995a23d 100644 --- a/lib/live_beats_web.ex +++ b/lib/live_beats_web.ex @@ -42,10 +42,16 @@ defmodule LiveBeatsWeb do end end - def live_view do + def live_view(opts \\ []) do quote do - use Phoenix.LiveView, - layout: {LiveBeatsWeb.LayoutView, "live.html"} + @opts Keyword.merge( + [ + layout: {LiveBeatsWeb.LayoutView, "live.html"}, + container: {:div, class: "relative h-screen flex overflow-hidden bg-white"} + ], + unquote(opts) + ) + use Phoenix.LiveView, @opts unquote(view_helpers()) end @@ -98,6 +104,10 @@ defmodule LiveBeatsWeb do @doc """ When used, dispatch to the appropriate controller/view/etc. """ + defmacro __using__({which, opts}) when is_atom(which) do + apply(__MODULE__, which, [opts]) + end + defmacro __using__(which) when is_atom(which) do apply(__MODULE__, which, []) end diff --git a/lib/live_beats_web/live/live_helpers.ex b/lib/live_beats_web/live/live_helpers.ex index 976f9e1..b9205d4 100644 --- a/lib/live_beats_web/live/live_helpers.ex +++ b/lib/live_beats_web/live/live_helpers.ex @@ -12,7 +12,14 @@ defmodule LiveBeatsWeb.LiveHelpers do def flash(%{kind: :error} = assigns) do ~H""" <%= if live_flash(@flash, @kind) do %> -
+
hide("#flash")} + phx-hook="Flash" + >
<.icon name={:check_circle} solid /> @@ -25,7 +32,6 @@ defmodule LiveBeatsWeb.LiveHelpers do
@@ -39,7 +45,14 @@ defmodule LiveBeatsWeb.LiveHelpers do def flash(%{kind: :info} = assigns) do ~H""" <%= if live_flash(@flash, @kind) do %> -
+
hide("#flash")} + phx-hook="Flash" + >
<.icon name={:check_circle} solid /> @@ -52,7 +65,6 @@ defmodule LiveBeatsWeb.LiveHelpers do
diff --git a/lib/live_beats_web/live/player_live.ex b/lib/live_beats_web/live/player_live.ex index 1a03f28..308b073 100644 --- a/lib/live_beats_web/live/player_live.ex +++ b/lib/live_beats_web/live/player_live.ex @@ -1,5 +1,5 @@ defmodule LiveBeatsWeb.PlayerLive do - use LiveBeatsWeb, :live_view + use LiveBeatsWeb, {:live_view, container: {:div, []}} alias LiveBeats.MediaLibrary alias LiveBeats.MediaLibrary.Song diff --git a/lib/live_beats_web/templates/layout/live.html.heex b/lib/live_beats_web/templates/layout/live.html.heex index 3981d81..8521b3e 100644 --- a/lib/live_beats_web/templates/layout/live.html.heex +++ b/lib/live_beats_web/templates/layout/live.html.heex @@ -1,12 +1,302 @@ -
- <.live_component module={LiveBeatsWeb.LayoutComponent} id="layout" /> +
+ <%= if @current_user do %> + +
+
+ +
+ +
+ + <% else %> + <%= live_redirect to: Routes.sign_in_path(@socket, :index), + class: "text-gray-600 hover:text-gray-900 hover:bg-gray-50 group flex items-center px-2 py-2 text-base leading-5 font-medium rounded-md" do %> + + + Sign in + <% end %> + <% end %> + +
+
+

+ Rooms +

+
+ <%= for genre <- @genres do %> + + + + <%= genre.title %> + + + <% end %> +
+
+ +
+
+ + +
+ + + + + +
+ +
+ +
+
+
+ +
+
+ +
+ +
+
+
+
+ +
+
+ +
+
+
+
+
+ +
+ <.live_component module={LiveBeatsWeb.LayoutComponent} id="layout" /> + + <%= if @current_user do %> + <%= live_render(@socket, LiveBeatsWeb.PlayerLive, id: "player", session: %{}, sticky: true) %> + <% end %> + + <.flash flash={@flash} kind={:info}/> + <.flash flash={@flash} kind={:error}/> + + <%= @inner_content %> +
+
diff --git a/lib/live_beats_web/templates/layout/root.html.heex b/lib/live_beats_web/templates/layout/root.html.heex index 83cb26d..5eea15f 100644 --- a/lib/live_beats_web/templates/layout/root.html.heex +++ b/lib/live_beats_web/templates/layout/root.html.heex @@ -10,300 +10,6 @@ -
- - - - - - -
- -
- -
-
-
- -
-
- -
- -
-
-
-
- -
-
- -
-
-
-
-
- -
- <%= @inner_content %> -
-
-
+ <%= @inner_content %>