Added ability to embed the video call and change theme color

vasanthv · Dec 26, 2024 · 666c8b2 · 666c8b2
1 parent 1dd87dd
commit 666c8b2
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 33 deletions.
diff --git a/EMBED.md b/EMBED.md
@@ -1,13 +1,15 @@
 # Hello embed
 
-Hello can be embedded in any webpage using iFrame as shown below.
+Hello can be embedded in any webpage using iFrame as shown below. [Demo link](https://hello-demo-embed.surge.sh/)
 
 ```
-<iframe src="https://hello.vasanthv.me/your-channel-here" allow="camera; microphone" seamless width="320" height="640"></iframe>
+<iframe src="https://hello.vasanthv.me/your-channel-here?nameJohn&theme=F22952" allow="camera; microphone" seamless width="480" height="640"></iframe>
 ```
 
 Hello supports the following URL params.
 
-| Param | Description                       | Type   |
-| ----- | --------------------------------- | ------ |
-| name  | Adds a default name for the user. | string |
+| Param | Description                            | Type    | Example  | Default |
+| ----- | -------------------------------------- | ------- | -------- | ------- |
+| name  | Adds a default name for the user.      | string  | `John`   | `null`  |
+| theme | Hex code of a color without the #.     | string  | `F22952` | `null`  |
+| chat  | A boolean to disable the chat feature. | boolean | `false`  | `true`  |
diff --git a/views/channel.ejs b/views/channel.ejs
@@ -13,7 +13,12 @@
 					<div class="title name flex-1">
 						<a href="javascript:void(0)" v-on:click="copyURL">#{{channelId}}</a>
 					</div>
-					<a href="javascript:void(0)" class="icon-message-circle" v-on:click="showChat=true" v-if="callInitiated"></a>
+					<a
+						href="javascript:void(0)"
+						class="icon-message-circle"
+						v-on:click="showChat=true"
+						v-if="chatEnabled && callInitiated"
+					></a>
 				</header>
 
 				<section id="nameWrap" class="wrap mini" v-if="!callInitiated">
@@ -85,7 +90,7 @@
 						<div id="chats">
 							<div class="chat" v-for="(chat, i) in chats" v-bind:key="i">
 								<span class="name">{{chat.name}}</span>
-								<span class="date light"> &middot; {{formatDate(chat.date)}}</span>
+								<span class="date light small"> &middot; {{formatDate(chat.date)}}</span>
 								<div class="message" v-html="linkify(chat.message)"></div>
 							</div>
 							<div id="noChat" class="light" v-if="!chats.length"><small>No chat messages.</small></div>

diff --git a/www/script.js b/www/script.js
@@ -9,6 +9,7 @@ const App = Vue.createApp({
 		const searchParams = new URLSearchParams(window.location.search);
 
 		const name = searchParams.get("name");
+		const chatEnabled = searchParams.get("chat") !== "false";
 
 		return {
 			channelId,
@@ -27,6 +28,7 @@ const App = Vue.createApp({
 			localMediaStream: null,
 			peers: {},
 			dataChannels: {},
+			chatEnabled,
 			chats: [],
 			chatMessage: "",
 			showChat: false,
@@ -171,7 +173,22 @@ const App = Vue.createApp({
 	},
 }).mount("#app");
 
+const setTheme = (themeColor) => {
+	if (!themeColor) return null;
+	if (!/^[0-9A-F]{6}$/i.test(themeColor)) return alert("Invalid theme color");
+
+	const textColor = parseInt(themeColor, 16) > 0xffffff / 2 ? "#000" : "#fff";
+
+	document.documentElement.style.setProperty("--background", `#${themeColor}`);
+	document.documentElement.style.setProperty("--text", textColor);
+};
+
 (async () => {
+	const searchParams = new URLSearchParams(window.location.search);
+	const themeColor = searchParams.get("theme");
+
+	if (themeColor) setTheme(themeColor);
+
 	if ("serviceWorker" in navigator) {
 		navigator.serviceWorker.register("/sw.js");
 	}

diff --git a/www/styles.css b/www/styles.css
@@ -2,13 +2,13 @@
 
 :root {
 	--background: #101010;
-	--background-trans: rgba(50, 50, 50, 0.6);
 	--text: #efefef;
-	--text-light: #a8a8a8;
-	--blue: #2980b9;
+
+	--background-trans: rgba(50, 50, 50, 0.6);
 	--red: #c0392b;
 	--green: #27ae60;
-	--gray: #434343;
+
+	--black: #000;
 	--white: #fff;
 }
 
@@ -89,31 +89,16 @@ button:active,
 button:focus {
 	text-decoration: underline;
 }
-button.ptt {
-	display: block;
+::placeholder {
 	color: var(--text);
-	margin: auto;
-	width: 5rem;
-	height: 5rem;
-	padding: 0px;
-	transition: box-shadow 0.1s ease-in;
-	box-shadow: 0rem 0rem 1rem 1rem var(--background);
-	border: 0.75rem solid var(--text);
-	border-radius: 50%;
-	background: var(--background);
-}
-button.ptt.active {
-	transform: translateY(0rem);
-	color: var(--green);
-	border-color: var(--green);
-	box-shadow: 0rem 0rem 10rem 2rem var(--green);
+	opacity: 0.75;
 }
 
 .bold {
 	font-weight: bold;
 }
 .light {
-	color: var(--text-light);
+	opacity: 0.8;
 }
 .red {
 	color: var(--red);
@@ -255,14 +240,14 @@ img.talking {
 	bottom: 0.5rem;
 	left: 0.5rem;
 	background: var(--background-trans);
-	color: var(--text);
+	color: var(--white);
 	font-size: small;
 	padding: 0.1rem 0.25rem;
 	border-radius: 0.2rem;
 	z-index: 5;
 }
 #videos .video .name i.green {
-	color: green;
+	color: var(--green);
 }
 #videos .video .buttons {
 	position: absolute;
@@ -328,14 +313,18 @@ img.talking {
 	border-radius: 1rem;
 }
 #chatwrap #chats {
+	color: var(--black);
 	flex: 1;
 	overflow-y: auto;
 }
 #chatwrap textarea {
-	color: var(--background);
-	background: var(--text);
+	color: var(--black);
+	background: var(--white);
 	border: 0.15rem solid var(--background-trans);
 }
+#chatwrap textarea::placeholder {
+	color: var(--background-trans);
+}
 
 @media only screen and (max-width: 600px) {
 	html {