Skip to content

Commit db28763

Browse files
szewczukkszewczukk
authored
Create a Streaming View (#1)
* Create a basic layout for the stream_viewer * Add a hook for automatically scrolling down * Center the droppings * Fix hook & revisit some of the text sizes * Add LIVE dropping * Style the second dropping * Adjust to feedback * Add max-h-screen * Hide some elements if the stream isnt started * Add an alias to corecomponents * Add scrollbar if necessary to the description
1 parent b57c510 commit db28763

File tree

5 files changed

+154
-44
lines changed

5 files changed

+154
-44
lines changed

‎assets/js/ScrollDownHook.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/**
2+
* @type {import("phoenix_live_view").ViewHookInterface}
3+
*/
4+
export default {
5+
mounted() {
6+
this.el.scrollTo(0, this.el.scrollHeight);
7+
},
8+
};

‎assets/js/app.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,12 @@ import {Socket} from "phoenix"
2222
import {LiveSocket} from "phoenix_live_view"
2323
import topbar from "../vendor/topbar"
2424
import { createPublisherHook, createPlayerHook } from "live_ex_webrtc";
25+
import ScrollDownHook from "./ScrollDownHook";
2526

2627
let Hooks = {};
28+
29+
Hooks.ScrollDownHook = ScrollDownHook;
30+
2731
const iceServers = [{ urls: "stun:stun.l.google.com:19302" }];
2832
Hooks.Publisher = createPublisherHook(iceServers);
2933
Hooks.Player = createPlayerHook(iceServers);

‎lib/sludge_web/components/core_components.ex‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -156,8 +156,7 @@ defmodule SludgeWeb.CoreComponents do
156156
phx-connected={hide("#client-error")}
157157
hidden
158158
>
159-
Attempting to reconnect
160-
<.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
159+
Attempting to reconnect <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
161160
</.flash>
162161
163162
<.flash
@@ -669,4 +668,12 @@ defmodule SludgeWeb.CoreComponents do
669668
def translate_errors(errors, field) when is_list(errors) do
670669
for {^field, {msg, opts}} <- errors, do: translate_error({msg, opts})
671670
end
671+
672+
def dropping(assigns) do
673+
~H"""
674+
<div class="bg-violet-50 px-4 py-3 rounded-lg flex items-center">
675+
{render_slot(@inner_block)}
676+
</div>
677+
"""
678+
end
672679
end

‎lib/sludge_web/components/layouts/app.html.heex‎

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
1-
<header class="px-4 sm:px-6 lg:px-8">
2-
<div class="flex items-center justify-between border-b border-zinc-100 py-3 text-sm">
3-
<div class="flex items-center gap-4">
4-
<a href="/">
5-
<img src={~p"/images/logo.svg"} width="36" />
6-
</a>
7-
<p class="bg-brand/5 text-brand rounded-full px-2 font-medium leading-6">
8-
v{Application.spec(:phoenix, :vsn)}
9-
</p>
1+
<div class="h-screen max-h-screen flex flex-col">
2+
<header class="px-4 sm:px-6 lg:px-8">
3+
<div class="flex items-center justify-between border-b border-zinc-100 py-3 text-sm">
4+
<div class="flex items-center gap-4">
5+
<a href="/">
6+
<img src={~p"/images/logo.svg"} width="36" />
7+
</a>
8+
<p class="bg-brand/5 text-brand rounded-full px-2 font-medium leading-6">
9+
v{Application.spec(:phoenix, :vsn)}
10+
</p>
11+
</div>
12+
<div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900">
13+
<a href="https://twitter.com/elixirphoenix" class="hover:text-zinc-700">
14+
@elixirphoenix
15+
</a>
16+
<a href="https://github.com/phoenixframework/phoenix" class="hover:text-zinc-700">
17+
GitHub
18+
</a>
19+
<a
20+
href="https://hexdocs.pm/phoenix/overview.html"
21+
class="rounded-lg bg-zinc-100 px-2 py-1 hover:bg-zinc-200/80"
22+
>
23+
Get Started <span aria-hidden="true">&rarr;</span>
24+
</a>
25+
</div>
1026
</div>
11-
<div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900">
12-
<a href="https://twitter.com/elixirphoenix" class="hover:text-zinc-700">
13-
@elixirphoenix
14-
</a>
15-
<a href="https://github.com/phoenixframework/phoenix" class="hover:text-zinc-700">
16-
GitHub
17-
</a>
18-
<a
19-
href="https://hexdocs.pm/phoenix/overview.html"
20-
class="rounded-lg bg-zinc-100 px-2 py-1 hover:bg-zinc-200/80"
21-
>
22-
Get Started <span aria-hidden="true">&rarr;</span>
23-
</a>
24-
</div>
25-
</div>
26-
</header>
27-
<main class="px-4 py-20 sm:px-6 lg:px-8">
28-
<div class="mx-auto max-w-2xl">
27+
</header>
28+
<main class="px-4 sm:px-6 lg:px-8 mx-auto w-full flex-grow">
2929
<.flash_group flash={@flash} />
3030
{@inner_content}
31-
</div>
32-
</main>
31+
</main>
32+
</div>

‎lib/sludge_web/live/stream_viewer_live.ex‎

Lines changed: 104 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,97 @@ defmodule SludgeWeb.StreamViewerLive do
55

66
@impl true
77
def render(assigns) do
8+
# TODO: Better logic for this
9+
assigns =
10+
assign(
11+
assigns,
12+
:start_difference,
13+
if assigns.stream_metadata != nil do
14+
{:ok, started_datetime} =
15+
DateTime.from_naive(assigns.stream_metadata.started, "Etc/UTC")
16+
17+
{:ok, now_datetime} = DateTime.now("Etc/UTC")
18+
19+
DateTime.diff(now_datetime, started_datetime, :minute)
20+
else
21+
2
22+
end
23+
)
24+
825
~H"""
9-
<div :if={!@stream_metadata}>
10-
No-one is streaming... :c
11-
</div>
12-
<div :if={@stream_metadata}>
13-
<h1>{@stream_metadata.title}</h1>
14-
<p>{@stream_metadata.description}</p>
15-
<p>Started: {@stream_metadata.started}</p>
26+
<div class="h-full flex gap-4 p-6">
27+
<div class="flex-grow flex flex-col gap-4">
28+
<Player.live_render socket={@socket} player={@player} />
29+
<div class="flex flex-col gap-4 flex-grow h-[0px]">
30+
<div class="flex gap-3 items-center justify-start">
31+
<span :if={@stream_metadata}>
32+
<.live_dropping />
33+
</span>
34+
<h1 class="text-2xl">
35+
{if @stream_metadata, do: @stream_metadata.title, else: "The stream is offline"}
36+
</h1>
37+
</div>
38+
<div :if={@stream_metadata} class="flex gap-4 text-sm">
39+
<.dropping>
40+
Started:&nbsp;
41+
<span class="text-indigo-800 font-medium">
42+
{@start_difference} minutes ago
43+
</span>
44+
</.dropping>
45+
<.dropping>
46+
<span class="text-indigo-800 font-medium">
47+
435 viewers
48+
</span>
49+
</.dropping>
50+
<button class="border border-indigo-200 text-indigo-800 font-medium rounded-lg px-6 py-3 flex gap-2 items-center">
51+
Share <.icon name="hero-share" class="fill-indigo-800" />
52+
</button>
53+
</div>
54+
<p :if={@stream_metadata} class="flex-grow overflow-y-scroll">
55+
{@stream_metadata.description}
56+
</p>
57+
</div>
58+
</div>
59+
<div class="flex flex-col justify-between border border-indigo-200 rounded-lg">
60+
<ul
61+
class="w-[448px] h-[0px] overflow-y-scroll flex-grow flex flex-col gap-6 p-6"
62+
phx-hook="ScrollDownHook"
63+
id="message_box"
64+
>
65+
<li :for={comment <- @comments} class="flex flex-col gap-1">
66+
<p class="text-indigo-800 text-[13px] text-medium">
67+
{comment.author}
68+
</p>
69+
<p>
70+
{comment.text}
71+
</p>
72+
</li>
73+
</ul>
74+
<form class="flex flex-col gap-2 border-t border-indigo-200 p-6">
75+
<textarea
76+
class="border border-indigo-200 rounded-lg resize-none h-[128px] text-[13px]"
77+
placeholder="Your message"
78+
/>
79+
<div class="flex gap-2">
80+
<input
81+
class="flex-grow border border-indigo-200 rounded-lg px-4 text-[13px]"
82+
placeholder="Your Nickname"
83+
/>
84+
<button class="bg-indigo-800 text-white px-12 py-2 rounded-lg text-[13px] font-medium">
85+
Send
86+
</button>
87+
</div>
88+
</form>
89+
</div>
1690
</div>
91+
"""
92+
end
1793

18-
<Player.live_render socket={@socket} player={@player} />
94+
defp live_dropping(assigns) do
95+
~H"""
96+
<p class="uppercase inline text-sm bg-[#FF0011] p-1 px-2 text-xs text-white rounded-md font-medium tracking-[8%]">
97+
live
98+
</p>
1999
"""
20100
end
21101

@@ -35,12 +115,23 @@ defmodule SludgeWeb.StreamViewerLive do
35115

36116
@impl true
37117
def handle_params(_params, _, socket) do
38-
{:noreply,
39-
socket
118+
{
119+
:noreply,
120+
socket
40121
# XXX make it update pubsub or event or sth dont care really
41-
|> assign(:stream_metadata, Sludge.StreamService.get_stream_metadata())
42-
# |> assign(:page_title, page_title(socket.assigns.live_action))
43-
# |> assign(:recording, Recordings.get_recording!(id))}
122+
|> assign(:stream_metadata, Sludge.StreamService.get_stream_metadata())
123+
|> assign(
124+
:comments,
125+
Enum.map(1..20, fn _ ->
126+
%{
127+
author: "AnthonyBrookeWood",
128+
text:
129+
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec ante ac nulla vulputate ultricies."
130+
}
131+
end)
132+
)
133+
# |> assign(:page_title, page_title(socket.assigns.live_action))
134+
# |> assign(:recording, Recordings.get_recording!(id))}
44135
}
45136
end
46137

0 commit comments

Comments
 (0)