Search videos from it's own live component

* Move add video icon to the player controls section at the footer

lib/livedj_web/live/components/add_video_component.ex

@@ -0,0 +1,57 @@
+defmodule LivedjWeb.Components.AddVideoComponent do
+  @moduledoc false
+  use LivedjWeb, :live_component
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div class="flex">
+      <.live_component
+        id={"video_search_bar_#{@room.id}"}
+        module={LivedjWeb.Components.SearchBarComponent}
+        form={@search_form}
+        search_result={@search_result}
+      >
+        <:button>
+          <.button class="
+            rounded-md
+            cursor-default w-5 h-5 !p-0 flex flex-wrap justify-center content-center
+            align-middle ml-2 bg-zinc-300 dark:bg-zinc-700
+            transition-all duration-300
+            shadow-[2.0px_2.0px_1px_0.5px_rgba(24,24,27,0.5)]
+            hover:shadow-[1.5px_1.5px_1px_0.5px_rgba(24,24,27,0.9)]
+            active:shadow-[0.5px_0.5px_1px_0.5px_rgba(24,24,27,0.2)]
+            dark:shadow-[1.5px_1.5px_1px_0.5px_rgba(250,250,255,0.4)]
+            dark:hover:shadow-[1.5px_1.5px_1px_0.5px_rgba(250,250,255,0.6)]
+            dark:active:shadow-[0.5px_0.5px_1px_0.5px_rgba(250,250,255,0.2)]
+            hover:bg-zinc-300 dark:hover:bg-zinc-700
+            active:bg-zinc-200 dark:active:bg-zinc-800 group
+            text-zinc-900 dark:text-zinc-100
+            active:text-green-500 dark:active:text-green-500
+          ">
+            <.icon name="hero-plus" class="w-3 h-3" />
+          </.button>
+        </:button>
+      </.live_component>
+    </div>
+    """
+  end
+
+  @impl true
+  def mount(socket) do
+    {:ok,
+     socket
+     |> assign(
+       player: to_form(%{}),
+       search_form: to_form(%{}),
+       search_result: []
+     )}
+  end
+
+  @impl true
+  def update(assigns, socket) do
+    {:ok,
+     socket
+     |> assign(assigns)}
+  end
+end

lib/livedj_web/live/components/search_bar_component.ex

@@ -3,13 +3,38 @@ defmodule LivedjWeb.Components.SearchBarComponent do
 
   use LivedjWeb, :live_component
 
+  alias Livedj.Sessions
+
   @impl true
   def update(assigns, socket) do
     {:ok,
      socket
      |> assign(assigns)}
   end
 
+  @impl true
+  def handle_event("change", %{"search" => %{"query" => ""}}, socket) do
+    {:noreply, socket}
+  end
+
+  def handle_event("change", %{"search" => %{"query" => _search_query}}, socket) do
+    {:noreply, socket}
+  end
+
+  def handle_event("submit", %{"search" => %{"query" => search_query}}, socket) do
+    case validate_url(search_query) do
+      {:ok, media_id} ->
+        add_media(socket, media_id)
+
+      {:error, :invalid_url} ->
+        search_media(socket, search_query)
+    end
+  end
+
+  def handle_event("submit", _params, socket) do
+    {:noreply, socket}
+  end
+
   def open_modal(js \\ %JS{}) do
     js
     |> JS.show(
@@ -40,4 +65,58 @@ defmodule LivedjWeb.Components.SearchBarComponent do
         {"transition ease-in duration-300", "opacity-100", "opacity-0"}
     )
   end
+
+  defp validate_url(url) do
+    case URI.parse(url) do
+      %URI{query: query} when not is_nil(query) ->
+        {:ok, String.replace(query, "v=", "")}
+
+      _uri ->
+        {:error, :invalid_url}
+    end
+  end
+
+  defp add_media(socket, media_id) do
+    case Sessions.add_media(socket.assigns.room.id, media_id) do
+      {:ok, :added} ->
+        {:noreply,
+         socket
+         |> assign(form: to_form(%{}))
+         |> assign(search_form: to_form(%{}))
+         |> put_flash(:info, gettext("Track queued to playlist"))}
+
+      {:error, :invalid_url} ->
+        {:noreply,
+         socket
+         |> assign(form: to_form(%{}))
+         |> put_flash(
+           :warn,
+           dgettext("errors", "The youtube url is not valid")
+         )}
+
+      {:error, {type, msg}} when type in [:warn, :error] and is_binary(msg) ->
+        {:noreply,
+         socket
+         |> assign(form: to_form(%{}))
+         |> put_flash(type, msg)}
+    end
+  end
+
+  def search_media(socket, query) do
+    case Sessions.search_by_query(query) do
+      {:ok, result} ->
+        {:noreply, assign(socket, search_result: result)}
+
+      {:error, :service_unavailable} ->
+        {:noreply,
+         socket
+         |> put_flash(
+           :warn,
+           dgettext(
+             "warnings",
+             "Search service unavailable. Please try inserting a youtube url."
+           )
+         )}
+    end
+  end
 end

lib/livedj_web/live/components/search_bar_component.html.heex

@@ -43,6 +43,7 @@
             role="search"
             phx-change="change"
             phx-submit="submit"
+            phx-target={@myself}
             class="bg-zinc-100 dark:bg-zinc-900"
           >
             <div class="group relative flex">
@@ -117,7 +118,7 @@
                 overflow-y-scroll
                 rounded-b-lg
                 border-t-0 border-zinc-200 text-sm leading-6
-                mx-2 max-h-96
+                mx-2 max-h-[80vh]
                 bg-transparent
                 #{if @search_result != [], do: "!py-2 !my-1"}
               "}
@@ -144,7 +145,7 @@
                   dark:hover:shadow-[1.5px_1.5px_1px_0.5px_rgba(250,250,255,0.6)]
                   active:shadow-[0.5px_0.5px_1px_0.5px_rgba(24,24,27,0.2)]
                   dark:active:shadow-[0.5px_0.5px_1px_0.5px_rgba(250,250,255,0.2)]
-                  active:scale-[0.99] grayscale-[50%] hover:grayscale-0
+                  active:scale-[0.99] grayscale-[70%] hover:grayscale-0
                 "
               >
                 <div class="

lib/livedj_web/live/player_controls_live.ex

@@ -21,6 +21,7 @@ defmodule LivedjWeb.PlayerControlsLive do
            time_slider_id: "player-controls-time-slider",
            volume_control_id: "volume-control-#{room_id}",
            fullscreen_control_id: "fullscreen-control-#{room_id}",
+           add_video_control_id: "add-video-control-#{room_id}",
            layout: false,
            player: nil,
            room: room

lib/livedj_web/live/player_controls_live.html.heex

@@ -108,7 +108,12 @@
             muted?={false}
           />
           <.live_component
-            id={@volume_control_id}
+            id={@add_video_control_id}
+            module={LivedjWeb.Components.AddVideoComponent}
+            room={@room}
+          />
+          <.live_component
+            id={@fullscreen_control_id}
             module={
               LivedjWeb.Components.PlayerControls.FullscreenControlComponent
             }

lib/livedj_web/live/sessions/room_live/list.ex

@@ -70,59 +70,12 @@ defmodule LivedjWeb.Sessions.RoomLive.List do
     end
   end
 
-  def handle_event("add", %{"url" => url}, socket) do
-    with {:ok, media_id} <- validate_url(url),
-         {:ok, :added} <- Sessions.add_media(socket.assigns.room.id, media_id) do
-      {:noreply,
-       socket
-       |> assign(form: to_form(%{}))
-       |> put_flash(:info, gettext("Track queued to playlist"))}
-    else
-      {:error, :invalid_url} ->
-        {:noreply,
-         socket
-         |> assign(form: to_form(%{}))
-         |> put_flash(
-           :warn,
-           dgettext("errors", "The youtube url is not valid")
-         )}
-
-      {:error, {type, msg}} when type in [:warn, :error] and is_binary(msg) ->
-        {:noreply,
-         socket
-         |> assign(form: to_form(%{}))
-         |> put_flash(type, msg)}
-    end
-  end
-
   def handle_event("remove_track", %{"track_id" => track_id}, socket) do
     :ok = Sessions.remove_media(socket.assigns.room.id, track_id)
 
     {:noreply, socket}
   end
 
-  def handle_event("change", %{"search" => %{"query" => ""}}, socket) do
-    {:noreply, socket}
-  end
-
-  def handle_event("change", %{"search" => %{"query" => _search_query}}, socket) do
-    {:noreply, socket}
-  end
-
-  def handle_event("submit", %{"search" => %{"query" => search_query}}, socket) do
-    case validate_url(search_query) do
-      {:ok, media_id} ->
-        add_media(socket, media_id)
-
-      {:error, :invalid_url} ->
-        search_media(socket, search_query)
-    end
-  end
-
-  def handle_event("submit", _params, socket) do
-    {:noreply, socket}
-  end
-
   # ----------------------------------------------------------------------------
   # Playlist event handling
   #
@@ -259,50 +212,6 @@ defmodule LivedjWeb.Sessions.RoomLive.List do
   defp assign_current_media(socket, media_id),
     do: assign(socket, :current_media, media_id)
 
-  defp add_media(socket, media_id) do
-    case Sessions.add_media(socket.assigns.room.id, media_id) do
-      {:ok, :added} ->
-        {:noreply,
-         socket
-         |> assign(form: to_form(%{}))
-         |> assign(search_form: to_form(%{}))
-         |> put_flash(:info, gettext("Track queued to playlist"))}
-
-      {:error, :invalid_url} ->
-        {:noreply,
-         socket
-         |> assign(form: to_form(%{}))
-         |> put_flash(
-           :warn,
-           dgettext("errors", "The youtube url is not valid")
-         )}
-
-      {:error, {type, msg}} when type in [:warn, :error] and is_binary(msg) ->
-        {:noreply,
-         socket
-         |> assign(form: to_form(%{}))
-         |> put_flash(type, msg)}
-    end
-  end
-
-  def search_media(socket, query) do
-    case Sessions.search_by_query(query) do
-      {:ok, result} ->
-        {:noreply, assign(socket, search_result: result)}
-
-      {:error, :service_unavailable} ->
-        {:noreply,
-         socket
-         |> put_flash(
-           :warn,
-           dgettext(
-             "warnings",
-             "Search service unavailable. Please try inserting a youtube url."
-           )
-         )}
-    end
-  end
-
   defp on_drag_start(room_id) do
     fn socket, _from ->
       case Sessions.lock_playlist_drag(room_id) do
@@ -344,14 +253,4 @@ defmodule LivedjWeb.Sessions.RoomLive.List do
         end
     end
   end
-
-  defp validate_url(url) do
-    case URI.parse(url) do
-      %URI{query: query} when not is_nil(query) ->
-        {:ok, String.replace(query, "v=", "")}
-
-      _uri ->
-        {:error, :invalid_url}
-    end
-  end
 end

lib/livedj_web/live/sessions/room_live/list.html.heex

@@ -12,31 +12,3 @@
     topic={"room:#{@room.id}"}
   />
 </div>
-<div class="flex mt-4">
-  <.live_component
-    id={"video_search_bar_#{@room.id}"}
-    module={LivedjWeb.Components.SearchBarComponent}
-    form={@search_form}
-    search_result={@search_result}
-  >
-    <:button>
-      <.button class="
-        cursor-default w-6 h-6 !p-0 
-        align-middle ml-2 bg-zinc-300 dark:bg-zinc-700
-        transition-all duration-300
-        shadow-[3.0px_3.0px_1px_0.5px_rgba(24,24,27,0.5)]
-        hover:shadow-[2.5px_2.5px_1px_0.5px_rgba(24,24,27,0.9)]
-        active:shadow-[0.5px_0.5px_1px_0.5px_rgba(24,24,27,0.2)]
-        dark:shadow-[2.5px_2.5px_1px_0.5px_rgba(250,250,255,0.4)]
-        dark:hover:shadow-[2.0px_2.0px_1px_0.5px_rgba(250,250,255,0.6)]
-        dark:active:shadow-[0.5px_0.5px_1px_0.5px_rgba(250,250,255,0.2)]
-        hover:bg-zinc-300 dark:hover:bg-zinc-700
-        active:bg-zinc-200 dark:active:bg-zinc-800 group
-        text-zinc-900 dark:text-zinc-100
-        active:text-green-500 dark:active:text-green-500
-      ">
-        <.icon name="hero-plus" class="w-4 h-4" />
-      </.button>
-    </:button>
-  </.live_component>
-</div>