Skip to content

Commit e906943

Browse files
trueChazzatrueChazza
committed
feat: improve ux
1 parent 81b238a commit e906943

File tree

3 files changed

+116
-92
lines changed

3 files changed

+116
-92
lines changed

‎lib/media_server_web/live/home_live/index.html.heex‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,16 @@
1919
<p class="text-lg text-white max-w-2xl line-clamp">
2020
<%= Enum.at(@latest_movies, 0)["overview"] %>
2121
</p>
22-
<div class="grid grid-cols-1 gap-y-12 gap-x-6 lg:grid-cols-3">
23-
<%= live_redirect "Visit Page", to: Routes.movies_show_path(@socket, :show, Enum.at(@latest_movies, 0)["id"]), class: "w-full md:w-2/3 inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-gray-900 bg-white hover:bg-gray-50" %>
22+
<div class="grid grid-cols-1 gap-y-4 lg:gap-y-12 gap-x-4 lg:grid-cols-8">
23+
<%= live_redirect "Visit Page", to: Routes.movies_show_path(@socket, :show, Enum.at(@latest_movies, 0)["id"]), class: "inline-flex items-center justify-center px-4 py-2 border border-transparent text-base font-medium rounded-md text-gray-900 bg-white hover:bg-gray-50" %>
24+
25+
<%= live_redirect id: "play-#{ Enum.at(@latest_movies, 0)["id"] }", to: Routes.watch_movie_show_path(@socket, :show, Enum.at(@latest_movies, 0)["id"]), class: "inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-slate-600 hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500" do %>
26+
<svg xmlns="http://www.w3.org/2000/svg" class="-ml-0.5 mr-2 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
27+
<path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
28+
<path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
29+
</svg>
30+
Play
31+
<% end %>
2432
</div>
2533
</div>
2634
</header>

‎lib/media_server_web/live/movies_live/show.html.heex‎

Lines changed: 54 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,65 @@
1-
<.live_component module={MediaServerWeb.Components.NavComponent} id="nav-component" />
1+
<header class="relative pb-24 bg-slate-800 sm:pb-32">
22

3-
<div class="max-w-4xl mx-auto py-6 px-4 sm:py-6 sm:px-6">
3+
<div class="absolute inset-0 bg-cover bg-fixed" style={"background-image: url(#{ MediaServerWeb.Repositories.Movies.get_background(@movie) })"}>
4+
<div class="absolute inset-0 bg-gradient-to-l from-slate-200 to-slate-900 mix-blend-multiply" aria-hidden="true"></div>
5+
</div>
6+
7+
<div class="relative z-10">
8+
<.live_component module={MediaServerWeb.Components.NavDarkComponent} id="nav-dark-component" />
9+
</div>
410

5-
<div class="mt-6 max-w-2xl mx-auto sm:px-6 lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-1 lg:gap-x-8">
6-
<div class="w-full">
7-
<iframe width="100%" height="460" src={"https://www.youtube.com/embed/#{ @movie["youTubeTrailerId"] }"}frameborder="0"></iframe>
8-
</div>
9-
</div>
11+
<div class="relative mt-24 max-w-md mx-auto px-4 sm:max-w-xl sm:mt-32 sm:px-6 lg:max-w-7xl lg:px-8 space-y-6">
12+
<h2 class="text-sm font-semibold text-red-300 tracking-wide uppercase">
13+
Released <%= @movie["year"] %>
14+
</h2>
15+
<h1 class="text-3xl font-extrabold tracking-tight text-white">
16+
<%= @movie["title"] %>
17+
</h1>
18+
<div class="grid grid-cols-1 gap-y-4 lg:gap-y-12 gap-x-4 lg:grid-cols-8">
1019

11-
<div class="max-w-2xl mx-auto pt-10 pb-16 px-4 sm:px-6 lg:max-w-4xl lg:pt-16 lg:pb-24 lg:px-8 lg:grid lg:grid-cols-3 lg:grid-rows-[auto,auto,1fr] lg:gap-x-8">
20+
<%= if is_nil(@favourite) do %>
1221

13-
<div class="lg:col-span-3">
14-
<div class="md:flex md:items-center md:justify-between">
15-
<div class="flex-1 min-w-0">
22+
<button type="button" id="favourite" phx-click="favourite" phx-value-movie_id={@movie["id"]} phx-value-user_id={@current_user.id} class="inline-flex items-center justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500">
23+
<svg xmlns="http://www.w3.org/2000/svg" class="-ml-0.5 mr-2 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
24+
<path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
25+
</svg>
26+
Favourite
27+
</button>
1628

17-
<h2 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">
18-
<%= @movie["title"] %>
19-
</h2>
29+
<% else %>
30+
31+
<button type="button" id="unfavourite" phx-click="unfavourite" phx-value-id={@favourite.id} phx-value-movie_id={@movie["id"]} class="inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-slate-600 hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500">
32+
<svg xmlns="http://www.w3.org/2000/svg" class="-ml-0.5 mr-2 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
33+
<path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
34+
</svg>
35+
Unfavourite
36+
</button>
37+
38+
<% end %>
39+
40+
<%= live_redirect id: "play-#{ @movie["id"] }", to: Routes.watch_movie_show_path(@socket, :show, @movie["id"]), class: "inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-slate-600 hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500" do %>
41+
<svg xmlns="http://www.w3.org/2000/svg" class="-ml-0.5 mr-2 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
42+
<path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
43+
<path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
44+
</svg>
45+
Play
46+
<% end %>
2047

21-
<p><%= @movie["year"] %> - <%= @movie["runtime"] %> minutes</p>
22-
</div>
23-
<div class="mt-4 flex md:mt-0 md:ml-4">
24-
25-
<%= if is_nil(@favourite) do %>
26-
27-
<button type="button" id="favourite" phx-click="favourite" phx-value-movie_id={@movie["id"]} phx-value-user_id={@current_user.id} class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
28-
<svg xmlns="http://www.w3.org/2000/svg" class="-ml-0.5 mr-2 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
29-
<path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
30-
</svg>
31-
Favourite
32-
</button>
33-
34-
<% else %>
35-
36-
<button type="button" id="unfavourite" phx-click="unfavourite" phx-value-id={@favourite.id} phx-value-movie_id={@movie["id"]} class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-slate-600 hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500">
37-
<svg xmlns="http://www.w3.org/2000/svg" class="-ml-0.5 mr-2 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
38-
<path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
39-
</svg>
40-
Unfavourite
41-
</button>
42-
43-
<% end %>
44-
45-
<%= live_redirect id: "play-#{ @movie["id"] }", to: Routes.watch_movie_show_path(@socket, :show, @movie["id"]), class: "ml-3 inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-slate-600 hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500" do %>
46-
<svg xmlns="http://www.w3.org/2000/svg" class="-ml-0.5 mr-2 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
47-
<path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
48-
<path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
49-
</svg>
50-
Play
51-
<% end %>
5248
</div>
5349
</div>
54-
</div>
50+
</header>
5551

56-
<div class="py-10 lg:col-span-3">
57-
<div>
58-
<p class="text-base text-gray-900"><%= @movie["overview"] %></p>
52+
<div class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:py-12 lg:px-8 space-y-8">
53+
<div class="lg:mt-0 lg:col-span-2">
54+
<dl>
55+
<div class="space-y-4">
56+
<dt class="text-lg leading-6 font-medium text-gray-900">
57+
Storyline
58+
</dt>
59+
<dd class="mt-2 text-base text-gray-500">
60+
<%= @movie["overview"] %>
61+
</dd>
62+
</div>
63+
</dl>
5964
</div>
60-
</div>
61-
</div>
6265
</div>

‎lib/media_server_web/live/series_live/show.html.heex‎

Lines changed: 52 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,25 @@
1-
<.live_component module={MediaServerWeb.Components.NavComponent} id="nav-component" />
1+
<header class="relative pb-24 bg-slate-800 sm:pb-32">
22

3-
<div class="mt-6 max-w-2xl mx-auto sm:px-6 lg:max-w-4xl lg:px-8 lg:grid lg:grid-cols-1 lg:gap-x-8">
4-
<div class="w-full">
5-
<img src={MediaServerWeb.Repositories.Series.get_background(@serie)}>
6-
</div>
7-
</div>
3+
<div class="absolute inset-0 bg-cover bg-fixed" style={"background-image: url(#{ MediaServerWeb.Repositories.Series.get_background(@serie) })"}>
4+
<div class="absolute inset-0 bg-gradient-to-l from-slate-200 to-slate-900 mix-blend-multiply" aria-hidden="true"></div>
5+
</div>
86

9-
<div class="max-w-2xl mx-auto pt-10 pb-16 px-4 sm:px-6 lg:max-w-4xl lg:pt-16 lg:pb-24 lg:px-8 lg:grid lg:grid-cols-3 lg:grid-rows-[auto,auto,1fr] lg:gap-x-8">
7+
<div class="relative z-10">
8+
<.live_component module={MediaServerWeb.Components.NavDarkComponent} id="nav-dark-component" />
9+
</div>
1010

11-
<div class="lg:col-span-3">
12-
<div class="md:flex md:items-center md:justify-between">
13-
<div class="flex-1 min-w-0">
14-
<h2 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">
15-
<%= @serie["title"] %>
16-
</h2>
17-
<p><%= @serie["year"] %> - <%= @serie["runtime"] %> minutes</p>
18-
</div>
19-
<div class="mt-4 flex md:mt-0 md:ml-4">
11+
<div class="relative mt-24 max-w-md mx-auto px-4 sm:max-w-xl sm:mt-32 sm:px-6 lg:max-w-7xl lg:px-8 space-y-6">
12+
<h2 class="text-sm font-semibold text-red-300 tracking-wide uppercase">
13+
Released <%= @serie["year"] %>
14+
</h2>
15+
<h1 class="text-3xl font-extrabold tracking-tight text-white">
16+
<%= @serie["title"] %>
17+
</h1>
18+
<div class="grid grid-cols-1 gap-y-4 lg:gap-y-12 gap-x-4 lg:grid-cols-8">
2019

2120
<%= if is_nil(@favourite) do %>
2221

23-
<button type="button" id="favourite" phx-click="favourite" phx-value-serie_id={@serie["id"]} phx-value-user_id={@current_user.id} class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
22+
<button type="button" id="favourite" phx-click="favourite" phx-value-serie_id={@serie["id"]} phx-value-user_id={@current_user.id} class="inline-flex items-center justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500">
2423
<svg xmlns="http://www.w3.org/2000/svg" class="-ml-0.5 mr-2 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
2524
<path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
2625
</svg>
@@ -29,41 +28,55 @@
2928

3029
<% else %>
3130

32-
<button type="button" id="unfavourite" phx-click="unfavourite" phx-value-id={@favourite.id} phx-value-serie_id={@serie["id"]} class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-slate-600 hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500">
31+
<button type="button" id="unfavourite" phx-click="unfavourite" phx-value-id={@favourite.id} phx-value-serie_id={@serie["id"]} class="inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-slate-600 hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500">
3332
<svg xmlns="http://www.w3.org/2000/svg" class="-ml-0.5 mr-2 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
3433
<path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
3534
</svg>
3635
Unfavourite
3736
</button>
3837

3938
<% end %>
40-
</div>
39+
</div>
4140
</div>
42-
</div>
41+
</header>
4342

44-
<div class="py-10 lg:col-span-3">
45-
<div>
46-
<p class="text-base text-gray-900"><%= @serie["overview"] %></p>
43+
<div class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:py-12 lg:px-8 space-y-8">
44+
<div class="lg:mt-0 lg:col-span-2">
45+
<dl>
46+
<div class="space-y-4">
47+
<dt class="text-lg leading-6 font-medium text-gray-900">
48+
Storyline
49+
</dt>
50+
<dd class="mt-2 text-base text-gray-500">
51+
<%= @serie["overview"] %>
52+
</dd>
53+
</div>
54+
</dl>
4755
</div>
4856

57+
<div class="lg:mt-0 lg:col-span-2">
58+
<dl>
59+
<div class="space-y-4">
60+
<dt class="text-lg leading-6 font-medium text-gray-900">
61+
Seasons
62+
</dt>
63+
<dd>
64+
<ul role="list" class="divide-y divide-gray-200">
4965

50-
<div class="mt-10">
51-
<div class="flow-root mt-6">
52-
<ul role="list" class="-my-5 divide-y divide-gray-200">
53-
54-
<div class="mt-3 grid grid-cols-2 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-6 xl:gap-x-8">
66+
<div class="mt-3 grid grid-cols-2 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-6 xl:gap-x-8">
5567

56-
<%= for item <- @serie["seasons"] |> Enum.filter(fn x -> x["statistics"]["episodeFileCount"] > 0 end) do %>
68+
<%= for item <- @serie["seasons"] |> Enum.filter(fn x -> x["statistics"]["episodeFileCount"] > 0 end) do %>
5769

58-
<%= MediaServerWeb.Components.PosterComponent.render(%{
59-
img_src: "",
60-
title: "Season #{ item["seasonNumber"] }",
61-
link: Routes.seasons_show_path(@socket, :show, @serie["id"], item["seasonNumber"])
62-
}) %>
63-
<% end %>
64-
</div>
65-
</ul>
66-
</div>
70+
<%= MediaServerWeb.Components.PosterComponent.render(%{
71+
img_src: "",
72+
title: "Season #{ item["seasonNumber"] }",
73+
link: Routes.seasons_show_path(@socket, :show, @serie["id"], item["seasonNumber"])
74+
}) %>
75+
<% end %>
76+
</div>
77+
</ul>
78+
</dd>
79+
</div>
80+
</dl>
6781
</div>
68-
</div>
6982
</div>

0 commit comments

Comments
 (0)