[Nexus] Add grid layout, fix RCs, improve codebase, remove chat (#41)

* [Nexus] Add grid display
* [Nexus] Fix RCs, improve codebase
* Review fixes
* Remove chat

Author: sgfn

nexus/assets/css/app.css

@@ -2,44 +2,6 @@
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 
-/* This file is for your main application CSS */
-.invalid-input {
-  border-color: #d52b4d;
-}
-
-.chat-message {
-  display: flex;
-  flex-direction: column;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}
-
-.chat-nickname {
-  font-weight: 600;
-}
-
-/* from https://stackoverflow.com/a/38994837/9620900 */
-/* Hiding scrollbar for Chrome, Safari and Opera */
-#chat-messages::-webkit-scrollbar {
-  display: none;
-}
-
-/* Hiding scrollbar for IE, Edge and Firefox */
-#chat-messages {
-  scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none; /* IE and Edge */
-}
-
-#chat-input::-webkit-scrollbar {
-  display: none;
-}
-
-/* Hiding scrollbar for IE, Edge and Firefox */
-#chat-input {
-  scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none; /* IE and Edge */
-}
-
 /* flip the preview horizontally */
 #videoplayer-local {
   -moz-transform: scale(-1, 1);

nexus/assets/js/chat.js

@@ -1,9 +1,9 @@
-import { connectChat } from './chat.js';
-import { Socket } from 'phoenix';
+import { Socket, Presence } from 'phoenix';
 
 const pcConfig = { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] };
 const localVideoPlayer = document.getElementById('videoplayer-local');
 const videoPlayerWrapper = document.getElementById('videoplayer-wrapper');
+const peerCount = document.getElementById('viewercount');
 
 let localStream = undefined;
 let channel = undefined;
@@ -21,18 +21,15 @@ async function createPeerConnection() {
       const videoPlayer = document.createElement('video');
       videoPlayer.srcObject = event.streams[0];
       videoPlayer.autoplay = true;
-      videoPlayer.classList.add(
-        'm-auto',
-        'rounded-xl',
-        'max-h-full',
-        'max-w-full'
-      );
+      videoPlayer.className = 'rounded-xl w-full h-full object-cover';
 
       videoPlayerWrapper.appendChild(videoPlayer);
+      updateVideoGrid();
 
       event.track.onended = (_) => {
         console.log('Track ended: ' + trackId);
         videoPlayerWrapper.removeChild(videoPlayer);
+        updateVideoGrid();
       };
     } else {
       // Audio tracks are associated with the stream (`event.streams[0]`) and require no separate actions
@@ -42,8 +39,13 @@ async function createPeerConnection() {
 
   pc.onicegatheringstatechange = () =>
     console.log('Gathering state change: ' + pc.iceGatheringState);
-  pc.onconnectionstatechange = () =>
+
+  pc.onconnectionstatechange = () => {
     console.log('Connection state change: ' + pc.connectionState);
+    if (pc.connectionState == 'failed') {
+      pc.restartIce();
+    }
+  };
   pc.onicecandidate = (event) => {
     if (event.candidate == null) {
       console.log('Gathering candidates complete');
@@ -113,14 +115,54 @@ async function joinChannel() {
     pc.addIceCandidate(candidate);
   });
 
-  channel.join();
-  console.log('Joined channel peer:signalling');
+  const presence = new Presence(channel);
+  presence.onSync(() => {
+    peerCount.innerText = presence.list().length;
+  });
+
+  channel
+    .join()
+    .receive('ok', (_) => console.log('Joined channel peer:signalling'))
+    .receive('error', (resp) => {
+      console.error('Unable to join the room:', resp);
+      socket.disconnect();
+
+      videoPlayerWrapper.removeChild(localVideoPlayer);
+      console.log(`Closing stream with id: ${localStream.id}`);
+      localStream.getTracks().forEach((track) => track.stop());
+      localStream = undefined;
+
+      const errorNode = document.getElementById('join-error-message');
+      errorNode.innerText = 'Unable to join the room';
+      if (resp == 'peer_limit_reached') {
+        errorNode.innerText +=
+          ': Peer limit reached. Try again in a few minutes';
+      }
+      errorNode.classList.remove('hidden');
+    });
+}
+
+function updateVideoGrid() {
+  const videoCount = videoPlayerWrapper.children.length;
+
+  let columns;
+  if (videoCount <= 1) {
+    columns = 'grid-cols-1';
+  } else if (videoCount <= 4) {
+    columns = 'grid-cols-2';
+  } else if (videoCount <= 9) {
+    columns = 'grid-cols-3';
+  } else if (videoCount <= 16) {
+    columns = 'grid-cols-4';
+  } else {
+    columns = 'grid-cols-5';
+  }
+
+  videoPlayerWrapper.className = `w-full h-full grid gap-2 p-2 auto-rows-fr ${columns}`;
 }
 
 export const Home = {
   async mounted() {
-    connectChat();
-
     await createPeerConnection();
     await setupLocalMedia();
     joinChannel();

nexus/assets/js/home.js

@@ -23,8 +23,7 @@ defmodule Nexus.Application do
       NexusWeb.Presence,
       Nexus.PeerSupervisor,
       Nexus.Room,
-      {Registry, name: Nexus.PeerRegistry, keys: :unique},
-      {Registry, name: Nexus.ChatNicknamesRegistry, keys: :unique}
+      {Registry, name: Nexus.PeerRegistry, keys: :unique}
     ]
 
     # See https://hexdocs.pm/elixir/Supervisor.html