Merge branch 'main' into multiple-rooms

adityathakurxd · Feb 29, 2024 · 111b61d · 111b61d
2 parents 1121e8e + cc1fdde
commit 111b61d
Show file tree

Hide file tree

Showing 13 changed files with 142 additions and 123 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,3 +1,6 @@
 {
-  "extends": "next/core-web-vitals"
+	"extends": "next/core-web-vitals",
+	"rules": {
+		"@next/next/no-img-element": "off"
+	}
 }
diff --git a/app/components/CreatePollButton.tsx b/app/components/CreatePollButton.tsx
@@ -46,20 +46,16 @@ export function CreatePollButton() {
 			{pollFormIsShown && questionData && <PollForm onClose={hidePollFormHandler} />}
 			<button
 				title="Create poll"
-				className="makeRealButton btn-control primary"
+				className="create-poll-button"
 				onClick={handleClick}
 				disabled={fetchingQuestion}
 			>
 				{fetchingQuestion ? (
-					<RefreshIcon
-						style={{
-							transform: 'rotate(180deg)',
-							transition: 'transform 2s linear',
-						}}
-					/>
+					<RefreshIcon style={{ animation: 'spin 2s linear infinite' }} />
 				) : (
 					<>
-						<p className="create-poll-text">Create Poll</p> <SparkleIcon />
+						<span className="create-poll-text">Create Poll</span>
+						<SparkleIcon style={{ marginRight: -4 }} />
 					</>
 				)}
 			</button>

diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
@@ -7,14 +7,13 @@ function Footer() {
 
 	return (
 		<div className="control-bar">
-			<a target="_blank" href="https://www.100ms.live">
-				{/* eslint-disable-next-line */}
+			<a target="_blank" href="https://www.100ms.live" style={{ width: 48, height: 48 }}>
 				<img
 					alt="100ms Logo"
 					src="https://storage.googleapis.com/100ms-cms-prod/cms/100ms_18a29f69f2/100ms_18a29f69f2.png?updated_at=2023-08-18T06:05:59.858Z"
 					height={48}
 					width={48}
-					style={{ position: 'relative', bottom: 2 }}
+					style={{ position: 'relative' }}
 				/>
 			</a>
 			<div style={{ display: 'flex', gap: '0.5rem' }}>
@@ -24,7 +23,7 @@ function Footer() {
 				<button className="btn-control secondary" onClick={toggleVideo}>
 					{isLocalVideoEnabled ? <VideoOnIcon /> : <VideoOffIcon />}
 				</button>
-				<button
+				{/* <button
 					className="btn-control"
 					style={{
 						backgroundColor: 'var(--error_default)',
@@ -41,7 +40,7 @@ function Footer() {
 						}}
 					/>
 					<p>Leave</p>
-				</button>
+				</button> */}
 			</div>
 		</div>
 	)

diff --git a/app/components/JoinForm.tsx b/app/components/JoinForm.tsx
@@ -142,13 +142,7 @@ const JoinForm = () => {
 			</div>
 
 			<div className="input-graphic">
-				<Image
-					alt="Generate Polls with AI"
-					src="/images/pollsAI.png"
-					priority
-					width={625}
-					height={530}
-				/>
+				<img alt="Generate Polls with AI" src="/images/pollsAI.png" width={600} />
 			</div>
 		</>
 	)

diff --git a/app/components/LiveResults.tsx b/app/components/LiveResults.tsx
@@ -15,8 +15,8 @@ export const LiveResults = () => {
 					padding: '4rem 2rem',
 				}}
 			>
-				{/* eslint-disable-next-line */}
 				<img
+					alt="Create poll"
 					height={75}
 					width={75}
 					src="https://storage.googleapis.com/100ms-cms-prod/cms/create_poll_67b25c6048/create_poll_67b25c6048.png?updated_at=2024-01-12T11:18:48.664Z"
@@ -29,31 +29,25 @@ export const LiveResults = () => {
 	}
 
 	return (
-		<div
-			style={{
-				maxHeight: 'calc(50% - 70px)',
-				overflowY: 'auto',
-				position: 'relative',
-				paddingRight: '0.75rem',
-				marginRight: '-0.75rem',
-			}}
-		>
+		<>
 			<h3
 				style={{
 					color: 'black',
-					position: 'sticky',
-					top: 0,
-					margin: '0.5rem 0',
+					margin: 0,
+					padding: '0.5rem 0',
 					background: 'var(--surface_default)',
+					alignSelf: 'flex-start',
 				}}
 			>
 				Live poll{livePolls?.length > 1 ? 's' : ''}
 			</h3>
-			<div style={{ flexDirection: 'column', display: 'flex', gap: '0.75rem' }}>
-				{livePolls?.map((livePoll) => (
-					<PollVotes key={livePoll.id} poll={livePoll} />
-				))}
+			<div className="live-results-container">
+				<div style={{ flexDirection: 'column', display: 'flex', gap: '0.75rem' }}>
+					{livePolls?.map((livePoll) => (
+						<PollVotes key={livePoll.id} poll={livePoll} />
+					))}
+				</div>
 			</div>
-		</div>
+		</>
 	)
 }
diff --git a/app/components/Modal.module.css b/app/components/Modal.module.css
@@ -4,27 +4,27 @@
 	left: 0;
 	width: 100%;
 	height: 100vh;
-	z-index: 20;
+	z-index: 20000;
 	background-color: rgba(0, 0, 0, 0.75);
 }
 
 .modal {
 	position: fixed;
 	top: 20vh;
 	left: 5%;
-	width: 40%;
+	right: 5%;
 	background-color: var(--surface_default);
 	padding: 2rem 3rem;
 	border-radius: 14px;
 	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
-	z-index: 30;
+	z-index: 30000;
 	animation: slide-down 300ms ease-out forwards;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 35rem) {
 	.modal {
 		width: 30rem;
-		left: calc(50% - 20rem);
+		left: calc(50% - 15rem);
 	}
 }
 

diff --git a/app/components/Peer.tsx b/app/components/Peer.tsx
@@ -28,13 +28,14 @@ const Peer: React.FC<PeerProps> = ({ peer }) => {
 					textTransform: 'capitalize',
 					margin: 0,
 					background: 'rgba(0, 0, 0, 0.5)',
-					padding: '0.125rem',
+					padding: '0.125rem 0.25rem',
 					borderRadius: '0.25rem',
 					fontSize: '12px',
 					fontWeight: '600',
+					color: 'white',
 				}}
 			>
-				{roleName}
+				{peer.name} {peer.isLocal ? '(You)' : ''}
 			</p>
 			<div className="tile tile-cover">
 				<PersonIcon height={32} width={32} />
@@ -46,9 +47,9 @@ const Peer: React.FC<PeerProps> = ({ peer }) => {
 				muted
 				playsInline
 			/>
-			<div className="peer-name">
+			{/* <div className="peer-name">
 				{peer.name} {peer.isLocal ? '(You)' : ''}
-			</div>
+			</div> */}
 		</div>
 	)
 }

diff --git a/app/components/PollForm.tsx b/app/components/PollForm.tsx
@@ -1,10 +1,10 @@
-import { useState, useCallback, useEffect } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import { useHMSActions } from '@100mslive/react-sdk'
-import { useEditor, useToasts } from '@tldraw/tldraw'
 import Modal from './Modal'
 import { HMSPollQuestionType } from './constants'
-import { makeReal } from '../makeReal'
 import { useQuestionContext } from '../context'
+import { makeReal } from '../makeReal'
+import { useEditor, useToasts } from '@tldraw/tldraw'
 
 interface PollFormProps {
 	onClose: () => void
@@ -115,6 +115,11 @@ const PollForm: React.FC<PollFormProps> = ({ onClose }) => {
 			>
 				<button
 					className="secondary"
+					style={{
+						height: 40,
+						width: 120,
+						padding: 8,
+					}}
 					onClick={() => regenerateQuestion(localQuestionData.question)}
 				>
 					Regenerate

diff --git a/app/components/RoomScreen.tsx b/app/components/RoomScreen.tsx
@@ -48,7 +48,6 @@ export const RoomScreen = () => {
 	}, [notification, localPeerID])
 
 	return (
-		// @ts-ignore
 		<QuestionContext.Provider value={{ questionData, setQuestionData }}>
 			<ToastContainer />
 			<Conference />

diff --git a/app/components/ViewPoll.tsx b/app/components/ViewPoll.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import Modal from './Modal'
 import { useHMSActions } from '@100mslive/react-sdk'
 import { toast } from 'react-toastify'
+import { RefreshIcon } from '@100mslive/react-icons'
 
 interface ViewPollProps {
 	pollNotificationData: any
@@ -11,27 +12,29 @@ interface ViewPollProps {
 const ViewPoll: React.FC<ViewPollProps> = ({ pollNotificationData, onClose }) => {
 	const actions = useHMSActions()
 	const [selectedOptionIndex, setSelectedOptionIndex] = useState<number | undefined>()
+	const [loading, setLoading] = useState(false)
 
 	function handleChange(event: any) {
 		setSelectedOptionIndex(event.target.value)
 	}
 
 	const handleSubmit = async (event: any) => {
 		event.preventDefault()
+		setLoading(true)
 
 		await actions.interactivityCenter.addResponsesToPoll(pollNotificationData.id, [
 			{
 				questionIndex: pollNotificationData.questions[0].index,
 				option: Number(selectedOptionIndex),
 			},
 		])
-		toast(`Vote registered!`)
+		toast(`Vote submitted!`)
 		onClose()
 	}
 
 	return (
 		<Modal onClose={onClose} title={pollNotificationData.title}>
-			<div>
+			<div style={{ display: 'flex', gap: 4, flexDirection: 'column' }}>
 				{pollNotificationData.questions[0].options.map(
 					(
 						option: {
@@ -40,24 +43,38 @@ const ViewPoll: React.FC<ViewPollProps> = ({ pollNotificationData, onClose }) =>
 						},
 						index: number
 					) => (
-						<div
+						<label
 							key={index}
-							style={{ display: 'flex', alignItems: 'center', margin: '0.25rem 0', gap: '0.25rem' }}
+							htmlFor={'' + index}
+							style={{
+								display: 'flex',
+								alignItems: 'center',
+								margin: '0.25rem 0',
+								gap: '0.25rem',
+								width: 'fit-content',
+								cursor: 'pointer',
+							}}
 						>
 							<input
 								style={{ cursor: 'pointer' }}
 								type="radio"
 								value={option.index}
 								checked={Number(selectedOptionIndex) === index + 1}
 								onChange={handleChange}
+								id={'' + index}
 							/>
-							<p style={{ color: 'black', fontWeight: '500' }}>{option.text}</p>
-						</div>
+							<label
+								htmlFor={'' + index}
+								style={{ color: 'black', fontWeight: '500', cursor: 'pointer' }}
+							>
+								{option.text}
+							</label>
+						</label>
 					)
 				)}
 
 				<button className="primary" onClick={handleSubmit} style={{ marginTop: '0.75rem' }}>
-					Submit
+					{loading ? <RefreshIcon style={{ animation: 'spin 2s linear infinite' }} /> : 'Submit'}
 				</button>
 			</div>
 		</Modal>

diff --git a/app/components/styles.css b/app/components/styles.css
@@ -1,40 +1,68 @@
 /* Container for the entire conference component */
 .conference-component {
 	position: relative;
-	height: 100vh; /* Adjust height as needed */
+	height: 100%; /* Adjust height as needed */
+	width: 100%;
+	display: flex;
+	flex-direction: row;
 }
 
 /* Side pane for conference section */
 .conference-section {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 400px; /* Adjust width as needed */
+	padding: 8px;
+	box-sizing: border-box;
+	overflow-y: auto;
+	width: 350px; /* Adjust width as needed */
 	height: 100%;
-	z-index: 2; /* Higher z-index to be on top */
 	background-color: var(--surface_default); /* Light background for visibility */
-	overflow-y: auto; /* Enable scroll for overflow content */
 	display: flex;
 	flex-direction: column;
 	align-items: center;
+	flex-shrink: 0;
 	justify-content: space-between;
 }
 
+.live-results-container {
+	flex-grow: 1;
+	overflow-y: auto;
+	position: relative;
+	width: 100%;
+}
+
+@media screen and (max-width: 1024px) {
+	.conference-section {
+		width: 280px;
+	}
+}
+
 /* Main editor section */
 .editor {
-	position: absolute;
-	top: 0;
-	right: 0;
-	/* right: 400px; */
-	bottom: 0;
-	z-index: 1; /* Lower z-index to be beneath the side pane */
-	/* Additional styling for the editor */
+	/* position: absolute; */
+	width: 100%;
+	height: 100%;
+	overflow: visible;
+	background-color: var(--white);
+	overflow: hidden;
+	overscroll-behavior: none;
+	touch-action: none;
 }
 
 /* Additional styling for peers container */
 .peers-container {
-	padding: 10px;
 	width: 100%;
 }
 
 /* You can add more specific styles here */
+.tlui-navigation-zone {
+	display: none;
+}
+
+/* 'spin' animation */
+@keyframes spin {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}