Merge pull request #106 from midarrlabs/feature/v1.13.0

v1.13.0

Author: trueChazza

lib/media_server_web/components/nav_component.ex

@@ -2,4 +2,13 @@ defmodule MediaServerWeb.Components.NavComponent do
   use MediaServerWeb, :live_component
 
   alias Phoenix.LiveView.JS
+
+  @impl true
+  def handle_event("search", %{"search" => %{"query" => query}}, socket) do
+    {
+      :noreply,
+      socket
+      |> push_redirect(to: Routes.search_index_path(socket, :index, query: query))
+    }
+  end
 end

lib/media_server_web/components/nav_component.html.heex

@@ -29,7 +29,14 @@
           </div>
         </div>
 
-        <div class="flex-none">
+        <div class="flex space-x-6">
+
+           <button phx-click={JS.toggle(to: "#search-command")} type="button" class={"text-base font-medium focus:outline-none focus:ring-2 focus:ring-slate-500 #{ @class }"}>
+              <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+              </svg>
+            </button>
+
             <div class="relative">
                 <button phx-click={JS.toggle(to: "#profile-dropdown")} phx-click-away={JS.hide(to: "#profile-dropdown")} type="button" class="flex text-sm focus:outline-none focus:ring-2 focus:ring-slate-500">
                     <span class="flex-shrink-0 inline-block relative">
@@ -66,4 +73,21 @@
         <%= live_redirect "Continues", to: Routes.continues_index_path(@socket, :index), class: "text-base block px-3 py-2 font-medium #{ @class }" %>
     </div>
   </div>
+
+  <div class="hidden relative z-10" id="search-command">
+    <div class="fixed inset-0 bg-gray-500 bg-opacity-25 transition-opacity"></div>
+
+    <div class="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20">
+      <div class="mx-auto max-w-xl transform divide-y divide-gray-100 overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
+        <div class="relative" phx-click-away={JS.hide(to: "#search-command")}>
+          <svg class="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+            <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
+          </svg>
+          <.form let={f} for={:search} id="search" phx-target={@myself} phx-submit="search">
+              <%= text_input f, :query, placeholder: "Search...", class: "h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-800 placeholder-gray-400 focus:ring-0 sm:text-sm" %>
+          </.form>
+        </div>
+      </div>
+    </div>
+  </div>
 </nav>

lib/media_server_web/components/spinner_component.ex

@@ -0,0 +1,9 @@
+defmodule MediaServerWeb.Components.SpinnerComponent do
+  use Phoenix.Component
+
+  def render(assigns) do
+    ~H"""
+      <div class="w-12 h-12 rounded-full animate-spin border-2 border-solid border-slate-500 border-t-transparent"></div>
+    """
+  end
+end

lib/media_server_web/live/components_live/index.ex

@@ -0,0 +1,20 @@
+defmodule MediaServerWeb.ComponentsLive.Index do
+  use MediaServerWeb, :live_view
+
+  @impl true
+  def mount(_params, _session, socket) do
+    {
+      :ok,
+      socket
+      |> assign(page_title: "Components")
+    }
+  end
+
+  @impl true
+  def handle_params(_params, _url, socket) do
+    {
+      :noreply,
+      socket
+    }
+  end
+end

lib/media_server_web/live/components_live/index.html.heex

@@ -0,0 +1,6 @@
+<.live_component module={MediaServerWeb.Components.NavComponent}
+    id="nav-component"
+    class="text-slate-600 hover:text-slate-800"
+/>
+
+<%= MediaServerWeb.Components.SpinnerComponent.render(%{}) %>

lib/media_server_web/live/search_live/index.ex

@@ -0,0 +1,42 @@
+defmodule MediaServerWeb.SearchLive.Index do
+  use MediaServerWeb, :live_view
+
+  alias MediaServerWeb.Repositories.Movies
+  alias MediaServerWeb.Repositories.Series
+
+  @impl true
+  def handle_params(%{"query" => query}, _url, socket) do
+    pid = self()
+
+    Task.start(fn ->
+      send(pid, {:movies, Movies.search(query)})
+    end)
+
+    Task.start(fn ->
+      send(pid, {:series, Series.search(query)})
+    end)
+
+    {
+      :noreply,
+      socket
+      |> assign(:page_title, query)
+    }
+  end
+
+  @impl true
+  def handle_info({:movies, movies}, socket) do
+    {
+      :noreply,
+      socket
+      |> assign(:movies, movies)
+    }
+  end
+
+  def handle_info({:series, series}, socket) do
+    {
+      :noreply,
+      socket
+      |> assign(:series, series)
+    }
+  end
+end

lib/media_server_web/live/search_live/index.html.heex

@@ -0,0 +1,38 @@
+<.live_component module={MediaServerWeb.Components.NavComponent}
+    id="nav-component"
+    class="text-slate-600 hover:text-slate-800"
+/>
+
+<div class="max-w-6xl mx-auto py-6 px-4 sm:py-6 sm:px-6">
+
+    <div class="mt-6 grid grid-cols-2 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-6 xl:gap-x-8">
+
+    <%= if assigns[:movies] && assigns[:series] do %>
+      <%= for item <- @movies do %>
+
+        <%= MediaServerWeb.Components.PosterComponent.render(%{
+            img_src: MediaServerWeb.Repositories.Movies.get_poster(item),
+            title: item["title"],
+            link: Routes.movies_show_path(@socket, :show, item["id"])
+        }) %>
+
+      <% end %>
+
+      <%= for item <- @series do %>
+
+        <%= MediaServerWeb.Components.PosterComponent.render(%{
+            img_src: MediaServerWeb.Repositories.Series.get_poster(item),
+            title: item["title"],
+            link: Routes.series_show_path(@socket, :show, item["id"])
+        }) %>
+
+      <% end %>
+
+    <% else %>
+        <div class="flex flex-row col-span-2 lg:col-span-6 justify-center mt-56">
+            <%= MediaServerWeb.Components.SpinnerComponent.render(%{}) %>
+        </div>
+    <% end %>
+
+    </div>
+</div>

lib/media_server_web/repositories/movies.ex

@@ -14,7 +14,7 @@ defmodule MediaServerWeb.Repositories.Movies do
     Jason.decode!(body)
   end
 
-  def handle_response({:error, %HTTPoison.Error{id: nil, reason: :nxdomain}}) do
+  def handle_response(_) do
     []
   end
 
@@ -66,4 +66,11 @@ defmodule MediaServerWeb.Repositories.Movies do
     |> handle_response()
     |> Stream.filter(fn item -> item["type"] === "cast" end)
   end
+
+  def search(query) do
+    HTTPoison.get("#{get_url("movie/lookup")}&term=#{URI.encode(query)}")
+    |> handle_response()
+    |> Stream.filter(fn item -> item["hasFile"] end)
+    |> Enum.sort_by(& &1["title"], :asc)
+  end
 end

lib/media_server_web/repositories/series.ex

@@ -14,7 +14,7 @@ defmodule MediaServerWeb.Repositories.Series do
     Jason.decode!(body)
   end
 
-  def handle_response({:error, %HTTPoison.Error{id: nil, reason: :nxdomain}}) do
+  def handle_response(_) do
     []
   end
 
@@ -47,4 +47,11 @@ defmodule MediaServerWeb.Repositories.Series do
     (Stream.filter(serie["images"], fn item -> item["coverType"] === "fanart" end)
      |> Enum.at(0))["remoteUrl"]
   end
+
+  def search(query) do
+    HTTPoison.get("#{get_url("series/lookup")}&term=#{URI.encode(query)}")
+    |> handle_response()
+    |> Stream.filter(fn item -> item["seasonFolder"] end)
+    |> Enum.sort_by(& &1["title"], :asc)
+  end
 end

lib/media_server_web/router.ex

@@ -36,6 +36,8 @@ defmodule MediaServerWeb.Router do
       live "/episodes/:episode/watch", WatchEpisodeLive.Show, :show
     end
 
+    live "/search", SearchLive.Index, :index
+
     live "/continues", ContinuesLive.Index, :index
     live "/favourites", FavouritesLive.Index, :index
 
@@ -58,16 +60,18 @@ defmodule MediaServerWeb.Router do
     get "/episodes/:episode/stream", StreamEpisodeController, :show
   end
 
-  # Enables the Swoosh mailbox preview in development.
-  #
-  # Note that preview only shows emails that were sent by the same
-  # node running the Phoenix server.
-  if Mix.env() == :dev do
+  if Mix.env() == :dev or Mix.env() == :test do
     scope "/dev" do
       pipe_through :browser
 
       live_dashboard "/dashboard", metrics: MediaServerWeb.Telemetry
 
+      live "/components", MediaServerWeb.ComponentsLive.Index, :index
+
+      # Enables the Swoosh mailbox preview in development.
+      #
+      # Note that preview only shows emails that were sent by the same
+      # node running the Phoenix server.
       forward "/mailbox", Plug.Swoosh.MailboxPreview
     end
   end