Skip to content

Commit 8acf30c

Browse files
kieraneglinkieraneglin
committed
Adds new UI to media profiles page
1 parent fcc40df commit 8acf30c

File tree

8 files changed

+147
-70
lines changed

8 files changed

+147
-70
lines changed

‎lib/pinchflat/profiles/media_profile.ex

+2-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@ defmodule Pinchflat.Profiles.MediaProfile do
2727

2828
schema "media_profiles" do
2929
field :name, :string
30-
field :output_path_template, :string
30+
31+
field :output_path_template, :string, default: "/{{ uploader }}/{{ title }}.{{ ext }}"
3132

3233
field :download_subs, :boolean, default: true
3334
field :download_auto_subs, :boolean, default: true

‎lib/pinchflat_web/components/layouts/partials/header.html.heex

+3-16
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<header class="sticky top-0 z-999 flex w-full bg-white drop-shadow-1 dark:bg-boxdark dark:drop-shadow-none">
2-
<div class="flex flex-grow items-center justify-between px-4 py-4 shadow-2 md:px-6 2xl:px-11">
2+
<div class="flex flex-grow items-center justify-end px-4 py-4 shadow-2 md:px-6 2xl:px-11">
33
<div class="flex items-center gap-2 sm:gap-4 lg:hidden">
44
<button
55
class="z-99999 block rounded-sm border border-stroke bg-white p-1.5 shadow-sm dark:border-strokedark dark:bg-boxdark lg:hidden"
@@ -11,10 +11,10 @@
1111
<h2 class="text-title-md2 font-bold text-white">Pinchflat</h2>
1212
</a>
1313
</div>
14-
<div class="hidden sm:block">
14+
<div class="hidden sm:block bg-meta-4 rounded-md">
1515
<%!-- Aspirational (for now) --%>
1616
<div class="relative">
17-
<span class="absolute left-0 top-1/2 -translate-y-1/2">
17+
<span class="absolute left-2 top-1/2 -translate-y-1/2 flex">
1818
<.icon name="hero-magnifying-glass" />
1919
</span>
2020

@@ -25,18 +25,5 @@
2525
/>
2626
</div>
2727
</div>
28-
<div class="flex items-center gap-3 2xsm:gap-7">
29-
<ul class="flex items-center gap-2 2xsm:gap-4">
30-
<li class="relative">
31-
<%!-- Aspirational (for now) --%>
32-
<a
33-
class="relative flex h-8.5 w-8.5 items-center justify-center rounded-full border-[0.5px] border-stroke bg-gray hover:text-primary dark:border-strokedark dark:bg-meta-4 dark:text-white"
34-
href="#"
35-
>
36-
<.icon name="hero-cog-8-tooth" />
37-
</a>
38-
</li>
39-
</ul>
40-
</div>
4128
</div>
4229
</header>

‎lib/pinchflat_web/controllers/media_profiles/media_profile_html/edit.html.heex

+13-7
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
1-
<.old_header>
2-
Edit Media profile <%= @media_profile.id %>
3-
<:subtitle>Use this form to manage media_profile records in your database.</:subtitle>
4-
</.old_header>
1+
<div class="mb-6 flex gap-3 flex-row items-center">
2+
<.link navigate={~p"/media_profiles"}>
3+
<.icon name="hero-arrow-left" class="w-10 h-10 hover:dark:text-white" />
4+
</.link>
5+
<h2 class="text-title-md2 font-bold text-black dark:text-white ml-4">Edit Media Profile</h2>
6+
</div>
57

6-
<.media_profile_form changeset={@changeset} action={~p"/media_profiles/#{@media_profile}"} />
7-
8-
<.back navigate={~p"/media_profiles"}>Back to media_profiles</.back>
8+
<div class="rounded-sm border border-stroke bg-white px-5 pb-2.5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
9+
<div class="max-w-full overflow-x-auto">
10+
<div class="flex flex-col gap-10">
11+
<.media_profile_form changeset={@changeset} action={~p"/media_profiles/#{@media_profile}"} />
12+
</div>
13+
</div>
14+
</div>

‎lib/pinchflat_web/controllers/media_profiles/media_profile_html/index.html.heex

+38-7
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,39 @@
1-
<.old_header>
2-
Listing Media profiles
3-
<:actions>
4-
<.link href={~p"/media_profiles/new"}>
5-
<.button>New Media profile</.button>
1+
<div class="mb-6 flex gap-3 flex-row items-center justify-between">
2+
<h2 class="text-title-md2 font-bold text-black dark:text-white">All Media Profiles</h2>
3+
<nav>
4+
<.link navigate={~p"/media_profiles/new"}>
5+
<.button color="bg-primary" rounding="rounded-full">
6+
<span class="font-bold mx-2">+</span> New Media Profile
7+
</.button>
68
</.link>
7-
</:actions>
8-
</.old_header>
9+
</nav>
10+
</div>
11+
12+
<div class="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
13+
<div class="max-w-full overflow-x-auto">
14+
<div class="flex flex-col gap-10">
15+
<.table rows={@media_profiles} table_class="text-black dark:text-white">
16+
<:col :let={media_profile} label="Name">
17+
<%= media_profile.name %>
18+
</:col>
19+
<:col :let={media_profile} label="Output Template">
20+
<code class="text-sm"><%= media_profile.output_path_template %></code>
21+
</:col>
22+
<:col :let={media_profile} label="" class="flex place-content-evenly">
23+
<.link
24+
navigate={~p"/media_profiles/#{media_profile.id}"}
25+
class="hover:text-secondary duration-200 ease-in-out mx-0.5"
26+
>
27+
<.icon name="hero-eye" />
28+
</.link>
29+
<.link
30+
navigate={~p"/media_profiles/#{media_profile.id}/edit"}
31+
class="hover:text-secondary duration-200 ease-in-out mx-0.5"
32+
>
33+
<.icon name="hero-pencil-square" />
34+
</.link>
35+
</:col>
36+
</.table>
37+
</div>
38+
</div>
39+
</div>

‎lib/pinchflat_web/controllers/media_profiles/media_profile_html/media_profile_form.html.heex

+48-15
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,62 @@
22
<.error :if={@changeset.action}>
33
Oops, something went wrong! Please check the errors below.
44
</.error>
5-
<.input field={f[:name]} type="text" label="Name" />
6-
<.input field={f[:output_path_template]} type="text" label="Output path template" />
5+
<h3 class="my-4 text-2xl text-black dark:text-white">
6+
General Options
7+
</h3>
8+
<.input field={f[:name]} type="text" label="Name" placeholder="New Profile" help="(required)" />
9+
<.input
10+
field={f[:output_path_template]}
11+
type="text"
12+
label="Output path template"
13+
help="TODO: provide docs (required)"
14+
/>
15+
16+
<h3 class="mb-4 mt-8 text-2xl text-black dark:text-white">
17+
Subtitle Options
18+
</h3>
19+
<.input field={f[:download_subs]} type="toggle" label="Download Subtitles" />
20+
<.input
21+
field={f[:download_auto_subs]}
22+
type="toggle"
23+
label="Download Autogenerated Subtitles"
24+
help="Prefers normal subs but will download autogenerated if needed"
25+
/>
26+
<.input
27+
field={f[:embed_subs]}
28+
type="toggle"
29+
label="Embed Subtitles"
30+
help="Embeds subtitles in the video file itself, if supported"
31+
/>
32+
<.input
33+
field={f[:sub_langs]}
34+
type="text"
35+
label="Subtitle Languages"
36+
help="Use commas for multiple languages (eg: en,de)"
37+
/>
738

8-
<h3>Subtitle Options</h3>
9-
<.input field={f[:download_subs]} type="checkbox" label="Download Subs" />
10-
<.input field={f[:download_auto_subs]} type="checkbox" label="Download Autogenerated Subs" />
11-
<.input field={f[:embed_subs]} type="checkbox" label="Embed Subs" />
12-
<.input field={f[:sub_langs]} type="text" label="Sub Langs" />
39+
<h3 class="mb-4 mt-8 text-2xl text-black dark:text-white">
40+
Thumbnail Options
41+
</h3>
42+
<.input field={f[:download_thumbnail]} type="toggle" label="Download Thumbnail" />
43+
<.input field={f[:embed_thumbnail]} type="toggle" label="Embed Thumbnail" />
1344

14-
<h3>Thumbnail Options</h3>
15-
<.input field={f[:download_thumbnail]} type="checkbox" label="Download Thumbnail" />
16-
<.input field={f[:embed_thumbnail]} type="checkbox" label="Embed Thumbnail" />
45+
<h3 class="mb-4 mt-8 text-2xl text-black dark:text-white">
46+
Metadata Options
47+
</h3>
48+
<.input field={f[:download_metadata]} type="toggle" label="Download Metadata" />
49+
<.input field={f[:embed_metadata]} type="toggle" label="Embed Metadata" />
1750

18-
<h3>Metadata Options</h3>
19-
<.input field={f[:download_metadata]} type="checkbox" label="Download Metadata" />
20-
<.input field={f[:embed_metadata]} type="checkbox" label="Embed Metadata" />
51+
<h3 class="mb-4 mt-8 text-2xl text-black dark:text-white">
52+
Release Format Options
53+
</h3>
2154

22-
<h3>Release Format Options</h3>
2355
<.input
2456
field={f[:shorts_behaviour]}
2557
options={friendly_format_type_options()}
2658
type="select"
2759
label="Include Shorts?"
60+
help="Experimental"
2861
/>
2962
<.input
3063
field={f[:livestream_behaviour]}
@@ -34,6 +67,6 @@
3467
/>
3568

3669
<:actions>
37-
<.button>Save Media profile</.button>
70+
<.button class="mt-15 mb-5 sm:mb-7.5">Save Media profile</.button>
3871
</:actions>
3972
</.simple_form>

‎lib/pinchflat_web/controllers/media_profiles/media_profile_html/new.html.heex

+13-7
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
1-
<.old_header>
2-
New Media profile
3-
<:subtitle>Use this form to manage media_profile records in your database.</:subtitle>
4-
</.old_header>
1+
<div class="mb-6 flex gap-3 flex-row items-center">
2+
<.link navigate={~p"/media_profiles"}>
3+
<.icon name="hero-arrow-left" class="w-10 h-10 hover:dark:text-white" />
4+
</.link>
5+
<h2 class="text-title-md2 font-bold text-black dark:text-white ml-4">New Media Profile</h2>
6+
</div>
57

6-
<.media_profile_form changeset={@changeset} action={~p"/media_profiles"} />
7-
8-
<.back navigate={~p"/media_profiles"}>Back to media_profiles</.back>
8+
<div class="rounded-sm border border-stroke bg-white px-5 pb-2.5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
9+
<div class="max-w-full overflow-x-auto">
10+
<div class="flex flex-col gap-10">
11+
<.media_profile_form changeset={@changeset} action={~p"/media_profiles"} />
12+
</div>
13+
</div>
14+
</div>

‎lib/pinchflat_web/controllers/media_profiles/media_profile_html/show.html.heex

+24-11
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,26 @@
1-
<.old_header>
2-
Media profile <%= @media_profile.id %>
3-
<:subtitle>This is a media_profile record from your database.</:subtitle>
4-
<:actions>
5-
<.link href={~p"/media_profiles/#{@media_profile}/edit"}>
6-
<.button>Edit media_profile</.button>
1+
<div class="mb-6 flex gap-3 flex-row items-center justify-between">
2+
<div class="flex gap-3 items-center">
3+
<.link navigate={~p"/media_profiles"}>
4+
<.icon name="hero-arrow-left" class="w-10 h-10 hover:dark:text-white" />
75
</.link>
8-
</:actions>
9-
</.old_header>
6+
<h2 class="text-title-md2 font-bold text-black dark:text-white ml-4">
7+
Media Profile #<%= @media_profile.id %>
8+
</h2>
9+
</div>
1010

11-
<.list_items_from_map map={Map.from_struct(@media_profile)} />
12-
13-
<.back navigate={~p"/media_profiles"}>Back to media_profiles</.back>
11+
<nav>
12+
<.link navigate={~p"/media_profiles/#{@media_profile}/edit"}>
13+
<.button color="bg-primary" rounding="rounded-full">
14+
<.icon name="hero-pencil-square" class="mr-2" /> Edit Media Profile
15+
</.button>
16+
</.link>
17+
</nav>
18+
</div>
19+
<div class="rounded-sm border border-stroke bg-white px-5 pb-2.5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
20+
<div class="max-w-full overflow-x-auto">
21+
<div class="flex flex-col gap-10 dark:text-white">
22+
<h3 class="font-bold text-xl">Attributes</h3>
23+
<.list_items_from_map map={Map.from_struct(@media_profile)} />
24+
</div>
25+
</div>
26+
</div>

‎test/pinchflat_web/controllers/media_profile_controller_test.exs

+6-6
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,14 @@ defmodule PinchflatWeb.MediaProfileControllerTest do
1313
describe "index" do
1414
test "lists all media_profiles", %{conn: conn} do
1515
conn = get(conn, ~p"/media_profiles")
16-
assert html_response(conn, 200) =~ "Listing Media profiles"
16+
assert html_response(conn, 200) =~ "All Media Profiles"
1717
end
1818
end
1919

2020
describe "new media_profile" do
2121
test "renders form", %{conn: conn} do
2222
conn = get(conn, ~p"/media_profiles/new")
23-
assert html_response(conn, 200) =~ "New Media profile"
23+
assert html_response(conn, 200) =~ "New Media Profile"
2424
end
2525
end
2626

@@ -32,12 +32,12 @@ defmodule PinchflatWeb.MediaProfileControllerTest do
3232
assert redirected_to(conn) == ~p"/media_profiles/#{id}"
3333

3434
conn = get(conn, ~p"/media_profiles/#{id}")
35-
assert html_response(conn, 200) =~ "Media profile #{id}"
35+
assert html_response(conn, 200) =~ "Media Profile ##{id}"
3636
end
3737

3838
test "renders errors when data is invalid", %{conn: conn} do
3939
conn = post(conn, ~p"/media_profiles", media_profile: @invalid_attrs)
40-
assert html_response(conn, 200) =~ "New Media profile"
40+
assert html_response(conn, 200) =~ "New Media Profile"
4141
end
4242
end
4343

@@ -49,7 +49,7 @@ defmodule PinchflatWeb.MediaProfileControllerTest do
4949
media_profile: media_profile
5050
} do
5151
conn = get(conn, ~p"/media_profiles/#{media_profile}/edit")
52-
assert html_response(conn, 200) =~ "Edit Media profile"
52+
assert html_response(conn, 200) =~ "Edit Media Profile"
5353
end
5454
end
5555

@@ -66,7 +66,7 @@ defmodule PinchflatWeb.MediaProfileControllerTest do
6666

6767
test "renders errors when data is invalid", %{conn: conn, media_profile: media_profile} do
6868
conn = put(conn, ~p"/media_profiles/#{media_profile}", media_profile: @invalid_attrs)
69-
assert html_response(conn, 200) =~ "Edit Media profile"
69+
assert html_response(conn, 200) =~ "Edit Media Profile"
7070
end
7171
end
7272

0 commit comments

Comments
 (0)