style and layout

src/VideoCall.css

@@ -1,27 +1,62 @@
 .video-call {
 	position: absolute;
-    width: 100%;
-    display: grid;
-    grid-auto-flow: column;
-    align-items: center;
-    justify-content: center;
-    gap: 2rem;
-    top: 1rem;
+	width: 100%;
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(80px, max-content));
+	align-items: center;
+	justify-content: center;
+	gap: 1rem;
+	overflow: hidden;
+	z-index: 1;
+	padding: 1rem;
 
-
-	video {
-		border-radius: 15px;
+	.video-ui {
+		justify-items: center;
 		max-width: 150px;
-		max-height: 150px;
-		z-index: 1;
-		transition: all 0.6s;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		position: relative;
+
+		.name {
+			text-overflow: ellipsis;
+            max-width: inherit;
+            overflow: hidden;
+            display: block;
+            position: absolute;
+            top: 0.25rem;
+            left: 0.25rem;
+            backdrop-filter: brightness(0.5);
+            border-radius: 0.5rem;
+            padding-inline: 0.5rem;
+            font-size: x-small;
+		}
+
+		video {
+			border-radius: 10px;
+			max-width: 100%;
+		}
 	}
 
 	.local {
-		transform: scaleX(-1);
+		transition: all 0.6s;
+
+		video {
+			transform: scaleX(-1);
+		}
 	}
 
 	.alone {
-		transform: scaleX(-1) scale(0.5) translateX(10px);
+		.name {
+			display: none;
+		}
+
+		video {
+			position: fixed;
+			max-width: 150px;
+			top: 0;
+			right: 0;
+			transform: scale(0.5) translateX(10px);
+		}
 	}
 }

src/VideoCall.tsx

@@ -318,8 +318,9 @@ let peerRemoved: (conId: string) => void
 const peersById = new Map<string, PeerConnection>()
 
 export default function VideoCall() {
-	let localVideo: HTMLVideoElement
 	let videoContainer: HTMLDivElement
+	let localVideo: HTMLVideoElement
+	let localVideoContainer: HTMLDivElement
 	let observer: MutationObserver
 
 	const [peers, setPeers] = createSignal<PeerConnection[]>()
@@ -361,7 +362,8 @@ export default function VideoCall() {
 		});
 
 		//handle style changes when videos are added and removed
-		observer = new MutationObserver(() => localVideo?.classList.toggle('alone', videoContainer.childNodes.length === 1))
+		observer = new MutationObserver(() => 
+			localVideoContainer?.classList.toggle('alone', videoContainer.children.length === 1))
 		observer.observe(videoContainer, { childList: true })
 	})
 
@@ -378,9 +380,9 @@ export default function VideoCall() {
 	})
 
 	return <div id="videos-container" class="video-call" ref={videoContainer}>
-		<div>
-			<video id="local-video" class="local alone" ref={localVideo} autoplay playsinline />
-			<div>{myName()}</div>
+		<div class="video-ui local alone" ref={localVideoContainer}>
+			<video id="local-video" ref={localVideo} autoplay playsinline />
+			<span class="name">{myName()}</span>
 		</div>
 
 		<For each={peers()}>
@@ -414,8 +416,8 @@ function PeerVideo(props: { peer: PeerConnection }) {
 		}
 	})
 
-	return <div>
+	return <div class="video-ui peer">
 		<video id={props.peer.conId} class="remote" ref={videoElement} autoplay playsinline />
-		<div>{name()}</div>
+		<span class="name">{name()}</span>
 	</div>
 }

src/helpers.ts

@@ -1,8 +1,9 @@
 import { Connection } from "../server/types";
 
 
-export function displayName(con: Connection): string {
-	return con?.identity ? `${con?.identity?.name} (${con.kind})` : shortId(con?.id);
+export function displayName(con: Connection, verbose: boolean = false): string {
+	const name = con?.identity && verbose ? `${con?.identity?.name} (${con.kind})` : con?.identity?.name
+	return name || shortId(con?.id);
 }
 
 export function shortId(id: string) { return id?.substring(id.length - 4) }

src/planet.tsx

@@ -202,7 +202,7 @@ export function Planet() {
 				return
 
 			if (!avatarsById.has(message.id)) {
-				const label = con?.identity ? `${con?.identity?.name} (${con.kind})` : null
+				const label = displayName(con)
 				avatar = makeAvatar(1)
 				scene.add(avatar.mesh);
 				avatar.connection = con