Skip to content

Commit e82495a

Browse files
szewczukkszewczukk
committed
Style streamer page
1 parent db28763 commit e82495a

File tree

1 file changed

+158
-17
lines changed

1 file changed

+158
-17
lines changed

‎lib/sludge_web/live/streamer_live.ex‎

Lines changed: 158 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -24,19 +24,155 @@ defmodule SludgeWeb.StreamerLive do
2424
@impl true
2525
def render(assigns) do
2626
~H"""
27-
<div class="text-[#606060] flex flex-col gap-6 py-2.5">
28-
<.simple_form for={@form} phx-submit="stream-config-update">
29-
<.input type="textarea" field={@form[:title]} class="max-w-2xl rounded-lg h-12" placeholder="Title" />
30-
<.input type="textarea" field={@form[:description]} class="max-w-2xl rounded-lg h-40" placeholder="Description" />
31-
<:actions>
32-
<.button class="rounded-lg bg-brand/100 text-white py-2.5 max-w-36 hover:bg-brand/90">
33-
Save
34-
</.button>
35-
</:actions>
36-
</.simple_form>
27+
<div class="flex gap-2 h-full p-4">
28+
<div class="flex flex-col gap-4 flex-grow justify-between">
29+
<div class="border border-violet-200 rounded-lg">
30+
<div class="py-4 p-8 border-b border-violet-200">
31+
<h1 class="font-medium">Stream settings</h1>
32+
</div>
33+
<form
34+
phx-submit="stream-config-update"
35+
class="grid grid-rows-[repeat(2, auto-fill)] grid-cols-[1fr_auto] gap-4 p-8"
36+
>
37+
<div class="flex flex-col">
38+
<label for="title" class="text-sm">Title:</label>
39+
<input
40+
class="flex-grow border border-violet-200 rounded-lg px-4 py-2 text-[13px]"
41+
placeholder="Stream title..."
42+
id="title"
43+
/>
44+
</div>
45+
<div>
46+
<label for="audio-select">Audio device:</label>
47+
<select id="audio-select">
48+
<option>Audio 1</option>
49+
<option>Audio 2</option>
50+
</select>
51+
</div>
52+
<div class="flex flex-col">
53+
<label for="description" class="text-sm">Description:</label>
54+
<textarea
55+
class="border border-violet-200 rounded-lg resize-none h-[128px] text-[13px]"
56+
placeholder="Short description of the stream..."
57+
id="description"
58+
/>
59+
</div>
60+
<div class="flex flex-col justify-between">
61+
<div>
62+
<label for="video-select">Video device:</label>
63+
<select id="video-select">
64+
<option>Video 1</option>
65+
<option>Video 2</option>
66+
</select>
67+
</div>
68+
<div>
69+
<label>Record stream:</label>
70+
<.button class="rounded-lg bg-brand/100 text-white py-2.5 max-w-36 hover:bg-brand/90">
71+
Save
72+
</.button>
73+
</div>
74+
</div>
75+
</form>
76+
</div>
77+
<%!-- <Publisher.live_render socket={@socket} publisher={@publisher} /> --%>
78+
<div class="flex gap-4 flex-grow">
79+
<div class="flex flex-col gap-2 flex-1">
80+
<div class="flex-grow">
81+
<video
82+
src="https://videos.pexels.com/video-files/3195394/3195394-uhd_2560_1440_25fps.mp4"
83+
controls
84+
class="rounded-xl object-cover max-w-full h-full w-full"
85+
/>
86+
</div>
87+
<button class="p-4 bg-red-500 rounded-lg">Start streaming</button>
88+
</div>
89+
<div class="rounded-lg border border-violet-200 flex-1">
90+
<div class="px-8 py-4 border-b border-violet-200">
91+
<h1 class="font-medium">Statistics</h1>
92+
</div>
93+
<div class="p-4 text-sm divide-y divide-violet-200 *:p-4 flex flex-col items-stretch">
94+
<div class="flex justify-between items-center">
95+
<p>Audio bitrate (kbps):</p>
96+
<p>0</p>
97+
</div>
98+
<div class="flex justify-between items-center">
99+
<p>Video bitrate (kbps):</p>
100+
<p>0</p>
101+
</div>
102+
<div class="flex justify-between items-center">
103+
<p>Packet loss (%):</p>
104+
<p>0</p>
105+
</div>
106+
<div class="flex justify-between items-center">
107+
<p>Time:</p>
108+
<p>00:00:00</p>
109+
</div>
110+
<div class="flex justify-center">
111+
<svg
112+
width="24"
113+
height="23"
114+
viewBox="0 0 24 23"
115+
fill="none"
116+
xmlns="http://www.w3.org/2000/svg"
117+
>
118+
<path
119+
d="M16.9409 15.4559C16.5391 15.0976 16.474 14.5111 16.7563 14.055C17.321 13.1645 17.6251 12.122 17.6251 11.0577C17.6251 9.83055 17.2341 8.67941 16.5283 7.71289C16.2025 7.27849 16.235 6.69207 16.6043 6.30111C17.0604 5.82328 17.8423 5.85586 18.2332 6.37713C19.2432 7.71289 19.7971 9.34186 19.7971 11.0577C19.7971 12.5455 19.3735 14.0007 18.5699 15.2387C18.2115 15.7926 17.4405 15.8795 16.9409 15.4451V15.4559Z"
120+
fill="#E15B5B"
121+
/>
122+
<path
123+
d="M7.28653 15.7059C6.81956 16.1621 6.03765 16.1295 5.65756 15.5973C4.71276 14.2833 4.20234 12.7195 4.20234 11.0688C4.20234 9.29866 4.82135 7.57195 5.91819 6.19275C6.33087 5.68234 7.11277 5.67148 7.55803 6.16017C7.9164 6.56199 7.92726 7.14842 7.59061 7.57195C6.79784 8.56019 6.36345 9.77649 6.36345 11.0688C6.36345 12.2525 6.72182 13.3819 7.39513 14.3159C7.6992 14.7503 7.65577 15.3367 7.27567 15.7059H7.28653Z"
124+
fill="#E15B5B"
125+
/>
126+
<path
127+
d="M19.971 18.4315C19.5692 18.0623 19.4932 17.4433 19.8298 17.0089C21.1222 15.3039 21.828 13.2297 21.828 11.0686C21.828 8.71201 21.0136 6.49661 19.504 4.72646C19.1457 4.30293 19.1782 3.68392 19.5692 3.29296C20.0145 2.83685 20.7746 2.85857 21.1873 3.34726C22.99 5.4975 24 8.24504 24 11.0686C24 13.6858 23.1529 16.2053 21.5891 18.2795C21.1982 18.8008 20.4488 18.8659 19.971 18.4315Z"
128+
fill="#E15B5B"
129+
/>
130+
<path
131+
d="M4.28963 18.7247C3.83351 19.1808 3.07333 19.1374 2.67151 18.627C0.933944 16.4985 0 13.8487 0 11.0686C0 8.28845 1.06426 5.34544 2.95387 3.18434C3.3774 2.69565 4.12673 2.68479 4.57198 3.16262C4.94121 3.56443 4.97379 4.18344 4.60456 4.59612C3.05161 6.36627 2.17196 8.67941 2.17196 11.0686C2.17196 13.4577 2.95387 15.5428 4.38736 17.2912C4.73488 17.7148 4.69144 18.3338 4.30049 18.7247H4.28963Z"
132+
fill="#E15B5B"
133+
/>
134+
<path
135+
d="M11.9997 13.6641C13.4332 13.6641 14.5952 12.502 14.5952 11.0686C14.5952 9.63514 13.4332 8.47309 11.9997 8.47309C10.5663 8.47309 9.40424 9.63514 9.40424 11.0686C9.40424 12.502 10.5663 13.6641 11.9997 13.6641Z"
136+
fill="#E15B5B"
137+
/>
138+
<path
139+
d="M2.78572 0.318077C2.36162 -0.106026 1.67402 -0.106026 1.24992 0.318077C0.825813 0.742179 0.825813 1.42978 1.24992 1.85389L21.2078 21.8117C21.6319 22.2358 22.3195 22.2358 22.7436 21.8117C23.1677 21.3876 23.1677 20.7 22.7436 20.2759L2.78572 0.318077Z"
140+
fill="#E15B5B"
141+
/>
142+
</svg>
143+
</div>
144+
</div>
145+
</div>
146+
</div>
147+
</div>
148+
<div class="flex flex-col justify-between border border-violet-200 rounded-lg">
149+
<ul
150+
class="w-[448px] h-[0px] overflow-y-scroll flex-grow flex flex-col gap-6 p-6"
151+
phx-hook="ScrollDownHook"
152+
id="message_box"
153+
>
154+
<li class="flex flex-col gap-1">
155+
<p class="text-violet-800 text-[13px] text-medium"></p>
156+
<p></p>
157+
</li>
158+
</ul>
159+
<form class="flex flex-col gap-2 border-t border-violet-200 p-6">
160+
<textarea
161+
class="border border-violet-200 rounded-lg resize-none h-[128px] text-[13px]"
162+
placeholder="Your message"
163+
/>
164+
<div class="flex gap-2">
165+
<input
166+
class="flex-grow border border-violet-200 rounded-lg px-4 text-[13px]"
167+
placeholder="Your Nickname"
168+
/>
169+
<button class="bg-violet-800 text-white px-12 py-2 rounded-lg text-[13px] font-medium">
170+
Send
171+
</button>
172+
</div>
173+
</form>
174+
</div>
37175
</div>
38-
39-
<Publisher.live_render socket={@socket} publisher={@publisher} />
40176
"""
41177
end
42178

@@ -61,15 +197,20 @@ defmodule SludgeWeb.StreamerLive do
61197

62198
@impl true
63199
def handle_params(_params, _, socket) do
64-
{:noreply,
65-
socket
66-
# |> assign(:page_title, page_title(socket.assigns.live_action))
67-
# |> assign(:recording, Recordings.get_recording!(id))}
200+
{
201+
:noreply,
202+
socket
203+
# |> assign(:page_title, page_title(socket.assigns.live_action))
204+
# |> assign(:recording, Recordings.get_recording!(id))}
68205
}
69206
end
70207

71208
@impl true
72-
def handle_event("stream-config-update", %{"title" => title, "description" => description}, socket) do
209+
def handle_event(
210+
"stream-config-update",
211+
%{"title" => title, "description" => description},
212+
socket
213+
) do
73214
Sludge.StreamService.put_stream_metadata(%{title: title, description: description})
74215

75216
{:noreply, socket}

0 commit comments

Comments
 (0)