[Reco] Unify layout to be similar to the Broadcaster (#23)

Author: mickel8

reco/assets/css/app.css

@@ -3,3 +3,13 @@
 @import "tailwindcss/utilities";
 
 /* This file is for your main application CSS */
+
+/* Hiding scrollbar for IE, Edge and Firefox */
+main {
+    scrollbar-width: none;  /* Firefox */
+    -ms-overflow-style: none;  /* IE and Edge */
+  }
+  
+main::-webkit-scrollbar {
+    display: none;
+}

reco/assets/js/app.js

@@ -22,8 +22,13 @@ import { Socket } from "phoenix"
 import { LiveSocket } from "phoenix_live_view"
 import topbar from "../vendor/topbar"
 
+import { Room } from "./room.js"
+
+let Hooks = {}
+Hooks.Room = Room
+
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
-let liveSocket = new LiveSocket("/live", Socket, { params: { _csrf_token: csrfToken } })
+let liveSocket = new LiveSocket("/live", Socket, { params: { _csrf_token: csrfToken }, hooks: Hooks })
 
 // Show progress bar on live navigation and form submits
 topbar.config({ barColors: { 0: "#29d" }, shadowColor: "rgba(0, 0, 0, .3)" })

reco/assets/js/reco.js renamed to reco/assets/js/room.js

@@ -16,8 +16,9 @@ let socket;
 let channel;
 let pc;
 
-async function run() {
-  console.log("Starting");
+async function connect() {
+  console.log("Connecting");
+  button.onclick = disconnect;
 
   localStream = await navigator.mediaDevices.getUserMedia({
     audio: true,
@@ -34,13 +35,13 @@ async function run() {
   socket.connect();
 
   channel = socket.channel("room:" + roomId, {});
-  channel.onClose(_ => { window.location.href = "/reco" });
+  channel.onClose(_ => { window.location.href = "/" });
 
   channel.join()
     .receive("ok", resp => { console.log("Joined successfully", resp) })
     .receive("error", resp => {
       console.log("Unable to join", resp);
-      window.location.href = "/reco";
+      window.location.href = "/";
     })
 
   channel.on("signaling", msg => {
@@ -56,7 +57,7 @@ async function run() {
   channel.on("imgReco", msg => {
     const pred = msg['predictions'][0];
     imgpred.innerText = pred['label'];
-    imgscore.innerText = pred['score'];
+    imgscore.innerText = pred['score'].toFixed(3);
   })
 
   channel.on("sessionTime", msg => {
@@ -75,8 +76,8 @@ async function run() {
   channel.push("signaling", JSON.stringify(offer));
 }
 
-button.onclick = () => {
-  console.log("Leaving");
+function disconnect() {
+  console.log("Disconnecting");
   localStream.getTracks().forEach(track => track.stop());
   videoPlayer.srcObject = null;
 
@@ -93,4 +94,8 @@ button.onclick = () => {
   }
 }
 
-run();
+export const Room = {
+  mounted() {
+    connect();
+  }
+}

reco/assets/tailwind.config.js

@@ -14,7 +14,7 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        brand: "#FD4F00",
+        brand: "#4339AC",
       }
     },
   },

reco/config/config.exs

@@ -26,14 +26,14 @@ config :esbuild,
   version: "0.17.11",
   default: [
     args:
-      ~w(js/app.js js/reco.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
+      ~w(js/app.js js/room.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
     cd: Path.expand("../assets", __DIR__),
     env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
   ]
 
 # Configure tailwind (the version is required)
 config :tailwind,
-  version: "3.3.2",
+  version: "3.4.4",
   default: [
     args: ~w(
       --config=tailwind.config.js

reco/lib/reco/application.ex

@@ -8,6 +8,20 @@ defmodule Reco.Application do
 
   @max_rooms Application.compile_env!(:reco, :max_rooms)
 
+  @version Mix.Project.config()[:version]
+
+  @spec version() :: String.t()
+  def version() do
+    "v#{@version} #{commit()}"
+  end
+
+  defp commit() do
+    case System.cmd("git", ["rev-parse", "--short", "HEAD"]) do
+      {hash, 0} -> "(#{String.trim(hash)})"
+      _ -> ""
+    end
+  end
+
   @impl true
   def start(_type, _args) do
     children = [

reco/lib/reco_web/components/layouts/app.html.heex

@@ -1,23 +1,31 @@
 <header class="px-4 sm:px-6 lg:px-8">
-  <div class="flex items-center justify-center border-b border-zinc-100 py-4 text-sm">
+  <div class="flex flex-col lg:flex-row items-center justify-between border-b border-brand/15 py-3 text-sm">
     <div class="flex items-center gap-4">
-      <a href="https://github.com/elixir-webrtc/ex_webrtc">
-        <img src={~p"/images/logo.svg"} width="36" />
+      <a href="/">
+        <img src={~p"/images/logo.svg"} width="225" />
       </a>
     </div>
-    <div class="flex items-center content-center gap-4 font-semibold leading-6 text-zinc-900">
-      <a href="https://github.com/elixir-webrtc/ex_webrtc" class="hover:text-zinc-700">
-        GitHub
-      </a>
-      <a href="https://hexdocs.pm/ex_webrtc/" class="hover:text-zinc-700">
-        Documentation
-      </a>
+    <div class="flex">
+      <div class="flex items-center gap-4 font-semibold leading-6 text-brand/80">
+        <a href="https://github.com/elixir-webrtc/ex_webrtc" class="hover:text-brand">
+          GitHub
+        </a>
+        <a
+          href="https://hexdocs.pm/ex_webrtc/readme.html"
+          class="rounded-lg bg-brand/10 px-2 py-1 hover:bg-brand/20"
+        >
+          Docs <span aria-hidden="true">&rarr;</span>
+        </a>
+      </div>
     </div>
   </div>
 </header>
-<main class="p-72 px-4 py-8 sm:px-6 lg:px-8">
-  <div class="mx-auto max-w-2xl">
+<main class="flex flex-1 justify-center overflow-scroll">
+  <div class="h-full py-7 px-7 w-[800px]">
     <.flash_group flash={@flash} />
     <%= @inner_content %>
   </div>
 </main>
+<footer class="flex flex-row px-4 py-2 lg:justify-start justify-center font-semibold text-brand/80">
+  <%= Reco.Application.version() %>
+</footer>

reco/lib/reco_web/components/layouts/root.html.heex

@@ -4,14 +4,14 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="csrf-token" content={get_csrf_token()} />
-    <.live_title suffix=" · Phoenix Framework">
-      <%= assigns[:page_title] || "Reco" %>
+    <.live_title suffix=" · Reco">
+      <%= assigns[:page_title] %>
     </.live_title>
     <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
     <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
     </script>
   </head>
-  <body class="bg-white antialiased">
+  <body class="bg-white antialiased h-svh flex flex-col">
     <%= @inner_content %>
   </body>
 </html>