feature: start to stub in live connections

README.md

@@ -23,6 +23,14 @@ feature discussions.
 	- [X] avatar uploads
 - [X] chat topics
 	- [X] chat messages
+	- [ ] membership and presence
+		- [ ] add memberships to topics
+			- [ ] join to get notifications
+			- [ ] join for additional permissions
+			- [ ] filters for allowing joining a topic based on criteria on the user?
+			- [ ] display topic members somehwere
+		- [ ] emit presence events on join/leave
+		- [ ] display user presence
 	- [ ] chat message actions
 		- [X] '...' button to show actions
 		- [ ] delete message

public/base.css

@@ -614,6 +614,44 @@ body[data-perms*="files.write.own"] [data-requires-permission="files.write.own"]
 	top: 2px;
 }
 
+/* ICON - CAMERA */
+.icon.camera {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	transform: scale(var(--icon-scale, 1));
+	border: 2px solid;
+	border-radius: 3px;
+	width: 18px;
+	height: 12px;
+	perspective: 24px;
+}
+.icon.camera::after,
+.icon.camera::before {
+	content: "";
+	display: block;
+	box-sizing: border-box;
+	position: absolute;
+}
+.icon.camera::before {
+	border: 2px solid;
+	border-left-color: transparent;
+	transform: rotateY(-70deg);
+	width: 8px;
+	height: 8px;
+	right: -7px;
+	top: 0;
+}
+.icon.camera::after {
+	width: 10px;
+	height: 5px;
+	border-top: 2px solid;
+	border-right: 2px solid;
+	top: -5px;
+	right: 2px;
+	border-top-right-radius: 2px;
+}
+
 /* ICON - CHAT */
 .icon.chat {
 	box-sizing: border-box;
@@ -911,6 +949,38 @@ body[data-perms*="files.write.own"] [data-requires-permission="files.write.own"]
 	bottom: 0;
 }
 
+/* ICON - LIVE */
+.icon.live {
+	transform: scale(var(--icon-scale, 1));
+}
+.icon.live,
+.icon.live::after,
+.icon.live::before {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	width: 14px;
+	height: 14px;
+	border: 2px solid;
+	border-bottom-color: transparent;
+	border-radius: 50%;
+}
+.icon.live::after,
+.icon.live::before {
+	content: "";
+	position: absolute;
+	width: 6px;
+	height: 6px;
+	top: 2px;
+	left: 2px;
+}
+.icon.live::after {
+	width: 22px;
+	height: 22px;
+	top: -6px;
+	left: -6px;
+}
+
 /* ICON - MORE */
 .icon.more {
 	box-sizing: border-box;
@@ -993,6 +1063,49 @@ body[data-perms*="files.write.own"] [data-requires-permission="files.write.own"]
 		5px 0 0;
 }
 
+/* ICON - PHONE */
+.icon.phone {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	width: 22px;
+	height: 22px;
+	transform: scale(var(--icon-scale, 1));
+}
+.icon.phone::after,
+.icon.phone::before {
+	content: "";
+	display: block;
+	box-sizing: border-box;
+	position: absolute;
+}
+.icon.phone::after {
+	width: 18px;
+	height: 18px;
+	border-top-left-radius: 1px;
+	border-bottom-right-radius: 1px;
+	border-bottom-left-radius: 12px;
+	border-left: 4px solid;
+	border-bottom: 4px solid;
+	left: 2px;
+	bottom: 2px;
+	background:
+		linear-gradient(to left, currentColor 10px, transparent 0) no-repeat right 11px/6px 4px,
+		linear-gradient(to left, currentColor 10px, transparent 0) no-repeat -1px 0/4px 6px;
+}
+.icon.phone::before {
+	width: 20px;
+	height: 20px;
+	border: 6px double;
+	border-top-color: transparent;
+	border-bottom-color: transparent;
+	border-left-color: transparent;
+	border-radius: 50%;
+	transform: rotate(-45deg);
+	bottom: 2px;
+	left: 2px;
+}
+
 /* ICON - PLUS */
 .icon.plus,
 .icon.plus::after,

public/tabs/live/live.html

@@ -0,0 +1,73 @@
+<script></script>
+<style></style>
+<div id="live-tab" class="tab">
+	<input
+		type="radio"
+		name="top-level-tabs"
+		id="live-tab-input"
+		class="tab-switch"
+		data-view="profile"
+	/>
+	<label for="live-tab-input" class="tab-label mockup"
+		><div class="icon live"></div>
+		<div class="label">Live</div></label
+	>
+	<div class="tab-content">
+		<div
+			class="live-container"
+			style="
+				position: relative;
+				width: 100%;
+				height: 100%;
+				overflow: hidden;
+				display: flex;
+				align-content: center;
+				justify-content: center;
+				flex-flow: wrap;
+			"
+		>
+			<div
+				class="mockup"
+				style="
+					width: 95%;
+					max-width: 1024px;
+					border: 1px solid rgba(128, 128, 128, 0.5);
+					height: 66vh;
+					overflow: hidden;
+				"
+			></div>
+
+			<div
+				class="live-actions-container"
+				style="
+					width: 80%;
+					margin: 0 auto;
+					display: flex;
+					align-items: center;
+					justify-content: space-evenly;
+					height: 4rem;
+				"
+			>
+				<input
+					id="toggle-live-audio"
+					type="checkbox"
+					style="display: none; visibility: hidden"
+				/>
+				<label for="toggle-live-audio" class="mockup">
+					<i class="icon phone"></i>
+					<span>Audio</span>
+				</label>
+
+				<input
+					id="toggle-live-video"
+					type="checkbox"
+					style="display: none; visibility: hidden"
+				/>
+				<label for="toggle-live-video" class="mockup">
+					<i class="icon camera"></i>
+					<span>Video</span>
+				</label>
+			</div>
+		</div>
+	</div>
+</div>

public/tabs/tabs.html

@@ -122,9 +122,9 @@
 
 <div class="tabs">
 	<!-- #include file="./chat/chat.html" -->
+	<!-- #include file="./live/live.html" -->
 	<!-- #include file="./blurbs/blurbs.html" -->
 	<!-- #include file="./forum/forum.html" -->
 	<!-- #include file="./essays/essays.html" -->
-	<!-- #include file="./resources/resources.html" -->
 	<!-- #include file="./calendar/calendar.html" -->
 </div>