feat: add dynamic player

midarrlabs · Apr 13, 2023 · c496ca3 · c496ca3
1 parent 807a6e4
commit c496ca3
Show file tree

Hide file tree

Showing 9 changed files with 152 additions and 16 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -1,2 +1 @@
-.github/
-dev/
+.github/
diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
@@ -14,7 +14,7 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        brand: "#FD4F00",
+        brand: "#ef4444",
       }
     },
   },

diff --git a/lib/exstream_web/components/layouts/root.html.heex b/lib/exstream_web/components/layouts/root.html.heex
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="csrf-token" content={get_csrf_token()} />
-    <.live_title suffix=" · Phoenix Framework">
+    <.live_title>
       <%= assigns[:page_title] || "Exstream" %>
     </.live_title>
     <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />

diff --git a/lib/exstream_web/controllers/page_controller.ex b/lib/exstream_web/controllers/page_controller.ex
@@ -1,6 +1,13 @@
 defmodule ExstreamWeb.PageController do
   use ExstreamWeb, :controller
 
+    def index(conn, %{"path" => path, "duration" => duration}) do
+      render(conn
+        |> assign(:path, path)
+        |> assign(:duration, duration),
+      :index, layout: false)
+    end
+
   def home(conn, _params) do
     # The home page is often custom made,
     # so skip the default app layout.

diff --git a/lib/exstream_web/controllers/page_html/home.html.heex b/lib/exstream_web/controllers/page_html/home.html.heex
@@ -1,11 +1,133 @@
-<media-player
-    src="/api/playlist.m3u8?url=/api/stream&path=dev/sample__1080__libx265__ac3__30s__video.mkv&duration=00:00:30"
-    controlsList="nodownload"
-    controls
-    autoplay>
-        <media-outlet></media-outlet>
-</media-player>
+<.flash_group flash={@flash} />
+<div class="left-[40rem] fixed inset-y-0 right-0 z-0 hidden lg:block xl:left-[50rem]">
+  <svg
+    viewBox="0 0 1480 957"
+    fill="none"
+    aria-hidden="true"
+    class="absolute inset-0 h-full w-full"
+    preserveAspectRatio="xMinYMid slice"
+  >
+    <path fill="#ef4444" d="M0 0h1480v957H0z" />
+    <path
+      d="M137.542 466.27c-582.851-48.41-988.806-82.127-1608.412 658.2l67.39 810 3083.15-256.51L1535.94-49.622l-98.36 8.183C1269.29 281.468 734.115 515.799 146.47 467.012l-8.928-.742Z"
+      fill="#FF9F92"
+    />
+    <path
+      d="M371.028 528.664C-169.369 304.988-545.754 149.198-1361.45 665.565l-182.58 792.025 3014.73 694.98 389.42-1689.25-96.18-22.171C1505.28 697.438 924.153 757.586 379.305 532.09l-8.277-3.426Z"
+      fill="#FA8372"
+    />
+    <path
+      d="M359.326 571.714C-104.765 215.795-428.003-32.102-1349.55 255.554l-282.3 1224.596 3047.04 722.01 312.24-1354.467C1411.25 1028.3 834.355 935.995 366.435 577.166l-7.109-5.452Z"
+      fill="#E96856"
+      fill-opacity=".6"
+    />
+    <path
+      d="M1593.87 1236.88c-352.15 92.63-885.498-145.85-1244.602-613.557l-5.455-7.105C-12.347 152.31-260.41-170.8-1225-131.458l-368.63 1599.048 3057.19 704.76 130.31-935.47Z"
+      fill="#C42652"
+      fill-opacity=".2"
+    />
+    <path
+      d="M1411.91 1526.93c-363.79 15.71-834.312-330.6-1085.883-863.909l-3.822-8.102C72.704 125.95-101.074-242.476-1052.01-408.907l-699.85 1484.267 2837.75 1338.01 326.02-886.44Z"
+      fill="#A41C42"
+      fill-opacity=".2"
+    />
+    <path
+      d="M1116.26 1863.69c-355.457-78.98-720.318-535.27-825.287-1115.521l-1.594-8.816C185.286 163.833 112.786-237.016-762.678-643.898L-1822.83 608.665 571.922 2635.55l544.338-771.86Z"
+      fill="#A41C42"
+      fill-opacity=".2"
+    />
+  </svg>
+</div>
+<div class="px-4 py-10 sm:px-6 sm:py-28 lg:px-8 xl:px-28 xl:py-32">
+  <div class="mx-auto max-w-xl lg:mx-0">
+    <svg viewBox="0 0 20 20" class="h-12" fill="#ef4444">
+      <path
+        fill-rule="evenodd"
+        d="M13.5 4.938a7 7 0 11-9.006 1.737c.202-.257.59-.218.793.039.278.352.594.672.943.954.332.269.786-.049.773-.476a5.977 5.977 0 01.572-2.759 6.026 6.026 0 012.486-2.665c.247-.14.55-.016.677.238A6.967 6.967 0 0013.5 4.938zM14 12a4 4 0 01-4 4c-1.913 0-3.52-1.398-3.91-3.182-.093-.429.44-.643.814-.413a4.043 4.043 0 001.601.564c.303.038.531-.24.51-.544a5.975 5.975 0 011.315-4.192.447.447 0 01.431-.16A4.001 4.001 0 0114 12z"
+        clip-rule="evenodd"
+      />
+    </svg>
+    <h1 class="text-brand mt-10 flex items-center text-sm font-semibold leading-6">
+      Exstream
+      <small class="bg-brand/5 text-[0.8125rem] ml-3 rounded-full px-2 font-medium leading-6">
+        v1.0.0
+      </small>
+    </h1>
+    <p class="text-[2rem] mt-4 font-semibold leading-10 tracking-tighter text-zinc-900">
+      Simple HLS HTTP server. Agnostic and on-demand.
+    </p>
+    <p class="mt-4 text-base leading-7 text-zinc-600">
+      Self host and serve your own static media files with fewer moving parts. Coming soon out of the box integration with <a target="_blank" href="https://github.com/midarrlabs/midarr-server" class="text-blue-600 hover:underline">Midarr server</a> allows you to enjoy your media for fun or at scale.
+    </p>
+  </div>
 
-<p class="hidden">
-  Peace of mind from prototype to production.
-</p>
+  <div class="flex">
+    <div class="w-full sm:w-auto">
+      <div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-3">
+        <a
+          href={~p"/watch?path=dev/sample__1080__libx265__ac3__30s__video.mkv&duration=00:00:30"}
+          class="group relative rounded-2xl px-6 py-4 text-sm font-semibold leading-6 text-zinc-900 sm:py-6"
+        >
+          <span class="absolute inset-0 rounded-2xl bg-zinc-50 transition group-hover:bg-zinc-100 sm:group-hover:scale-105">
+          </span>
+          <span class="relative flex items-center gap-4 sm:flex-col">
+            <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 01-1.125-1.125M3.375 19.5h1.5C5.496 19.5 6 18.996 6 18.375m-3.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-1.5A1.125 1.125 0 0118 18.375M20.625 4.5H3.375m17.25 0c.621 0 1.125.504 1.125 1.125M20.625 4.5h-1.5C18.504 4.5 18 5.004 18 5.625m3.75 0v1.5c0 .621-.504 1.125-1.125 1.125M3.375 4.5c-.621 0-1.125.504-1.125 1.125M3.375 4.5h1.5C5.496 4.5 6 5.004 6 5.625m-3.75 0v1.5c0 .621.504 1.125 1.125 1.125m0 0h1.5m-1.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m1.5-3.75C5.496 8.25 6 7.746 6 7.125v-1.5M4.875 8.25C5.496 8.25 6 8.754 6 9.375v1.5m0-5.25v5.25m0-5.25C6 5.004 6.504 4.5 7.125 4.5h9.75c.621 0 1.125.504 1.125 1.125m1.125 2.625h1.5m-1.5 0A1.125 1.125 0 0118 7.125v-1.5m1.125 2.625c-.621 0-1.125.504-1.125 1.125v1.5m2.625-2.625c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125M18 5.625v5.25M7.125 12h9.75m-9.75 0A1.125 1.125 0 016 10.875M7.125 12C6.504 12 6 12.504 6 13.125m0-2.25C6 11.496 5.496 12 4.875 12M18 10.875c0 .621-.504 1.125-1.125 1.125M18 10.875c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125m-12 5.25v-5.25m0 5.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125m-12 0v-1.5c0-.621-.504-1.125-1.125-1.125M18 18.375v-5.25m0 5.25v-1.5c0-.621.504-1.125 1.125-1.125M18 13.125v1.5c0 .621.504 1.125 1.125 1.125M18 13.125c0-.621.504-1.125 1.125-1.125M6 13.125v1.5c0 .621-.504 1.125-1.125 1.125M6 13.125C6 12.504 5.496 12 4.875 12m-1.5 0h1.5m-1.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125M19.125 12h1.5m0 0c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h1.5m14.25 0h1.5" />
+            </svg>
+            Watch Sample
+          </span>
+        </a>
+        <a
+          target="_blank"
+          href="https://github.com/midarrlabs/exstream"
+          class="group relative rounded-2xl px-6 py-4 text-sm font-semibold leading-6 text-zinc-900 sm:py-6"
+        >
+          <span class="absolute inset-0 rounded-2xl bg-zinc-50 transition group-hover:bg-zinc-100 sm:group-hover:scale-105">
+          </span>
+          <span class="relative flex items-center gap-4 sm:flex-col">
+            <svg viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6">
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M12 0C5.37 0 0 5.506 0 12.303c0 5.445 3.435 10.043 8.205 11.674.6.107.825-.262.825-.585 0-.292-.015-1.261-.015-2.291C6 21.67 5.22 20.346 4.98 19.654c-.135-.354-.72-1.446-1.23-1.738-.42-.23-1.02-.8-.015-.815.945-.015 1.62.892 1.845 1.261 1.08 1.86 2.805 1.338 3.495 1.015.105-.8.42-1.338.765-1.645-2.67-.308-5.46-1.37-5.46-6.075 0-1.338.465-2.446 1.23-3.307-.12-.308-.54-1.569.12-3.26 0 0 1.005-.323 3.3 1.26.96-.276 1.98-.415 3-.415s2.04.139 3 .416c2.295-1.6 3.3-1.261 3.3-1.261.66 1.691.24 2.952.12 3.26.765.861 1.23 1.953 1.23 3.307 0 4.721-2.805 5.767-5.475 6.075.435.384.81 1.122.81 2.276 0 1.645-.015 2.968-.015 3.383 0 .323.225.707.825.585a12.047 12.047 0 0 0 5.919-4.489A12.536 12.536 0 0 0 24 12.304C24 5.505 18.63 0 12 0Z"
+                fill="#18181B"
+              />
+            </svg>
+            Source Code
+          </span>
+        </a>
+        <a
+          target="_blank"
+          href="https://github.com/midarrlabs/exstream/issues"
+          class="group relative rounded-2xl px-6 py-4 text-sm font-semibold leading-6 text-zinc-900 sm:py-6"
+        >
+          <span class="absolute inset-0 rounded-2xl bg-zinc-50 transition group-hover:bg-zinc-100 sm:group-hover:scale-105">
+          </span>
+          <span class="relative flex items-center gap-4 sm:flex-col">
+            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" class="h-6 w-6">
+              <path
+                d="M12 1v6M12 17v6"
+                stroke="#18181B"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <circle
+                cx="12"
+                cy="12"
+                r="4"
+                fill="#18181B"
+                fill-opacity=".15"
+                stroke="#18181B"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+            Issues
+          </span>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/lib/exstream_web/controllers/page_html/index.html.heex b/lib/exstream_web/controllers/page_html/index.html.heex
@@ -0,0 +1,7 @@
+<media-player
+    src={"/api/playlist.m3u8?url=/api/stream&path=#{ @path }&duration=#{ @duration }"}
+    controlsList="nodownload"
+    controls
+    autoplay>
+        <media-outlet></media-outlet>
+</media-player>
diff --git a/lib/exstream_web/router.ex b/lib/exstream_web/router.ex
@@ -18,6 +18,7 @@ defmodule ExstreamWeb.Router do
     pipe_through :browser
 
     get "/", PageController, :home
+    get "/watch", PageController, :index
   end
 
   scope "/api", ExstreamWeb do

diff --git a/mix.exs b/mix.exs
@@ -4,7 +4,7 @@ defmodule Exstream.MixProject do
   def project do
     [
       app: :exstream,
-      version: "0.1.0",
+      version: "1.0.0",
       elixir: "~> 1.14",
       elixirc_paths: elixirc_paths(Mix.env()),
       start_permanent: Mix.env() == :prod,

diff --git a/test/exstream_web/controllers/page_controller_test.exs b/test/exstream_web/controllers/page_controller_test.exs
@@ -3,6 +3,6 @@ defmodule ExstreamWeb.PageControllerTest do
 
   test "GET /", %{conn: conn} do
     conn = get(conn, ~p"/")
-    assert html_response(conn, 200) =~ "Peace of mind from prototype to production"
+    assert html_response(conn, 200) =~ "Simple HLS HTTP server. Agnostic and on-demand."
   end
 end