diff --git a/assets/js/user_socket.js b/assets/js/user_socket.js index 473b027..f3fd8f6 100644 --- a/assets/js/user_socket.js +++ b/assets/js/user_socket.js @@ -7,9 +7,9 @@ const init = () => { socket.connect(); const main = document.querySelector("body"); + const sidePanel = document.querySelector("#video-side-panel"); let channel; - let chatBox; let chatInput; let chatMessages; let handleSend; @@ -20,9 +20,9 @@ const init = () => { chatInput.value = ""; chatInput.removeEventListener("keypress", handleSend); } - chatBox.classList.add("lg:w-0"); - chatBox.classList.remove("lg:w-[24rem]"); - chatBox.classList.remove("lg:flex"); + sidePanel.classList.add("lg:w-0"); + sidePanel.classList.remove("lg:w-[24rem]"); + sidePanel.classList.remove("lg:flex"); main.classList.remove("lg:mr-[24rem]"); }; @@ -31,15 +31,13 @@ const init = () => { leave(channel); } - player = player; channel = socket.channel(`room:${id}`, {}); - chatBox = document.querySelector("#chat-box"); chatInput = document.querySelector("#chat-input"); chatMessages = document.querySelector("#chat-messages"); chatMessages.scrollTop = chatMessages.scrollHeight; - chatBox.classList.add("lg:w-[24rem]"); - chatBox.classList.add("lg:flex"); - chatBox.classList.remove("lg:w-0"); + sidePanel.classList.add("lg:w-[24rem]"); + sidePanel.classList.add("lg:flex"); + sidePanel.classList.remove("lg:w-0"); main.classList.add("lg:mr-[24rem]"); handleSend = (event) => { diff --git a/lib/algora/library.ex b/lib/algora/library.ex index 6f2afae..d501400 100644 --- a/lib/algora/library.ex +++ b/lib/algora/library.ex @@ -145,6 +145,10 @@ defmodule Algora.Library do |> Enum.map_join(":", fn count -> String.pad_leading("#{count}", 2, ["0"]) end) end + def to_hhmmss(duration) when is_float(duration) do + to_hhmmss(trunc(duration)) + end + def unsubscribe_to_channel(%Channel{} = channel) do Phoenix.PubSub.unsubscribe(@pubsub, topic(channel.user_id)) end diff --git a/lib/algora_web/components/core_components.ex b/lib/algora_web/components/core_components.ex index 5990363..ce0de0a 100644 --- a/lib/algora_web/components/core_components.ex +++ b/lib/algora_web/components/core_components.ex @@ -79,7 +79,7 @@ defmodule AlgoraWeb.CoreComponents do id={@id} class="cursor-pointer truncate" phx-click={ - JS.push("join", value: %{video_id: @video.id}, target: "#chat-box") + JS.push("show", value: %{video_id: @video.id}, target: "#side-panel") |> JS.dispatch("js:play_video", to: "#video-player", detail: %{player: %{src: @video.url, type: Library.player_type(@video)}} @@ -117,7 +117,7 @@ defmodule AlgoraWeb.CoreComponents do id={@id} class="cursor-pointer truncate" phx-click={ - JS.push("join", value: %{video_id: @video.id}, target: "#chat-box") + JS.push("show", value: %{video_id: @video.id}, target: "#side-panel") |> JS.dispatch("js:play_video", to: "#video-player", detail: %{player: %{src: @video.url, type: Library.player_type(@video)}} diff --git a/lib/algora_web/components/layouts/live.html.heex b/lib/algora_web/components/layouts/live.html.heex index 32cb4d7..970a8a5 100644 --- a/lib/algora_web/components/layouts/live.html.heex +++ b/lib/algora_web/components/layouts/live.html.heex @@ -126,7 +126,9 @@ <.live_component module={AlgoraWeb.LayoutComponent} id="layout" /> - <%= live_render(@socket, AlgoraWeb.ChatLive, id: "chat", session: %{}, sticky: true) %> +
<%= live_render(@socket, AlgoraWeb.PlayerLive, id: "player", session: %{}, sticky: true) %> <%= @inner_content %> diff --git a/lib/algora_web/live/chat_live.ex b/lib/algora_web/live/chat_live.ex deleted file mode 100644 index 79dec5c..0000000 --- a/lib/algora_web/live/chat_live.ex +++ /dev/null @@ -1,66 +0,0 @@ -defmodule AlgoraWeb.ChatLive do - alias Algora.Chat.Message - alias Algora.{Library, Chat} - alias Algora.Library.Video - use AlgoraWeb, {:live_view, container: {:div, []}} - - on_mount {AlgoraWeb.UserAuth, :current_user} - - defp system_message?(%Message{} = message) do - message.sender_handle == "algora" - end - - def render(assigns) do - ~H""" - - """ - end - - def mount(_params, _session, socket) do - {:ok, socket, layout: false, temporary_assigns: [messages: []]} - end - - def handle_info({Library, _}, socket), do: {:noreply, socket} - - def handle_event("join", %{"video_id" => video_id}, socket) do - socket = - socket - |> assign(messages: Chat.list_messages(%Video{id: video_id})) - |> push_event("join_chat", %{id: video_id}) - - {:noreply, socket} - end -end diff --git a/lib/algora_web/live/side_panel_live.ex b/lib/algora_web/live/side_panel_live.ex new file mode 100644 index 0000000..582b67c --- /dev/null +++ b/lib/algora_web/live/side_panel_live.ex @@ -0,0 +1,127 @@ +defmodule AlgoraWeb.SidePanelLive do + use AlgoraWeb, {:live_view, container: {:div, class: "flex-1"}} + alias Algora.{Chat, Library} + + on_mount {AlgoraWeb.UserAuth, :current_user} + + def render(assigns) do + tabs = + [:chat] + |> append_if(length(assigns.subtitles) > 0, :transcript) + + assigns = assigns |> assign(:tabs, tabs) + + ~H""" +
+
+
    +
  • + +
    • +
+
+ +
+
+
+
+ + <%= Library.to_hhmmss(subtitle.start) %> + + + <%= subtitle.body %> + +
+
+ +
+
+
+ + <%= message.sender_handle %>: + + + <%= message.body %> + +
+
+ + + Sign in to chat + +
+
+
+
+ """ + end + + def mount(_params, _session, socket) do + {:ok, socket, temporary_assigns: [subtitles: [], messages: []]} + end + + def handle_event("show", %{"video_id" => video_id}, socket) do + socket = + socket + |> assign(subtitles: Library.list_subtitles(%Library.Video{id: video_id})) + |> assign(messages: Chat.list_messages(%Library.Video{id: video_id})) + |> push_event("join_chat", %{id: video_id}) + + {:noreply, socket} + end + + defp set_active_content(js \\ %JS{}, to) do + js + |> JS.hide(to: ".side-panel-content") + |> JS.show(to: to) + end + + defp set_active_tab(js \\ %JS{}, tab) do + js + |> JS.remove_class("active-tab text-white pointer-events-none", + to: "#video-side-panel .active-tab" + ) + |> JS.add_class("active-tab text-white pointer-events-none", to: tab) + end + + defp system_message?(%Chat.Message{} = message) do + message.sender_handle == "algora" + end + + defp append_if(list, cond, extra) do + if cond, do: list ++ [extra], else: list + end +end