[Broadcaster] Add chat #13
Conversation
mickel8
force-pushed
the
chat
branch
14 times, most recently
from
0e8a8c3
to
94bf4c6
Compare
| @@ -18,12 +18,12 @@ import "./user_socket.js" | |||
| // Include phoenix_html to handle method=PUT/DELETE in forms and buttons. | |||
| import "phoenix_html" | |||
| // Establish Phoenix Socket and LiveView configuration. | |||
| import {Socket} from "phoenix" | |||
| import {LiveSocket} from "phoenix_live_view" | |||
| import { Socket } from "phoenix" | |||
There was a problem hiding this comment.
vscode formatts this by default. I will try to add linter in a separate PR
| @@ -1,6 +1,6 @@ | |||
| // If you want to use Phoenix channels, run `mix help phx.gen.channel` | |||
| // to get started and then uncomment the line below. | |||
| import "./user_socket.js" | |||
| // import "./user_socket.js" | |||
There was a problem hiding this comment.
Importing user_socket this way, we count our player panel into the viewers. It could also be tricky to make sure that HTML chat elements are already loaded so I've renamed this file to chat.js, wrapped everything into a function and import this function in home.js.
This way, chat.js is only loaded and used when needed.
| @@ -11,7 +11,7 @@ | |||
| <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}> | |||
| </script> | |||
| </head> | |||
| <body class="bg-white antialiased w-screen h-screen flex flex-col"> | |||
| <body class="bg-white antialiased h-svh flex flex-col"> | |||
There was a problem hiding this comment.
h-svh so we don't have any issues with address bar on mobile phones
There was a problem hiding this comment.
All good with some nitpicks:
- pressing enter in the chat input area adds actual enter before the user joins the chat and sends the message after, which I find a bit weird
- the font in the chat is black which looks a bit weird next to everything else
- a very tiny scrollbar appears in the chat input when the message gets too long, which also looks a bit weird
|
Fixed everything except color. I tried setting nickname to our brand color but body remains black so I am not sure. On the other hand, everything in violet colors is too much, at least for me. I am gonna leave it as it is. Maybe someday someone will make it better |
This PR adds chat to the Broadcaster app.
Chat behaviour differs depending on the screen width.
On screens < 1024, the chat is by default hidden and either it or video player can be displayed at the same time.
On screens > 1024, both video player and chat are displayed.
Example screenshots: