@tavus/cvi-ui 0.0.1-beta.2 → 0.0.1-beta.4

package/dev-components/components/conversation-01/conversation.module.css

@@ -0,0 +1,228 @@
+.container {
+	position: relative;
+	width: 100%;
+	text-align: center;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	aspect-ratio: 9/16;
+	overflow: hidden;
+	border-radius: 0.5rem;
+	max-height: 90vh;
+  background: linear-gradient(135deg, #4b5563 0%, #1f2937 100%);
+	background-size: 400% 400%;
+	animation: gradient 15s ease infinite;
+}
+
+@media (min-width: 768px) {
+	.container {
+		aspect-ratio: 16/9;
+	}
+}
+
+.errorContainer {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: rgba(248, 250, 252, 0.08);
+	color: white;
+	height: 100%;
+	font-size: 1.5rem;
+	font-weight: 600;
+	text-align: center;
+}
+
+.videoContainer {
+	position: relative;
+	z-index: 5;
+	width: 100%;
+	height: 100%;
+}
+
+.footer {
+	position: absolute;
+	bottom: 1.5rem;
+	left: 0;
+	right: 0;
+	z-index: 20;
+}
+
+.footerControls {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 16px;
+}
+
+.leaveButton {
+	background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
+	color: white;
+	border: none;
+	font-size: 16px;
+	cursor: pointer;
+	transition: all 0.3s ease;
+	height: 3rem;
+	width: 3rem;
+	border-radius: 9999px;
+	background-color: #ef4444;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.leaveButton:hover {
+	opacity: 0.8;
+}
+
+.leaveButtonIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ReplicaVideo styles */
+.mainVideoContainer {
+	background: transparent;
+	width: 100%;
+	height: 100%;
+	position: relative;
+}
+
+.mainVideoContainerScreenSharing {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.mainVideo {
+	position: absolute;
+	inset: 0;
+	object-position: center;
+	object-fit: cover !important;
+	height: 100%;
+	width: 100%;
+	transition: all 0.3s ease;
+}
+
+.mainVideoScreenSharing {
+	object-fit: contain !important;
+}
+
+.mainVideoHidden {
+	display: none;
+}
+
+/* PreviewVideo styles */
+.previewVideoContainer {
+	position: relative;
+	background: rgba(2, 6, 23, 0.3);
+	aspect-ratio: 16/9;
+	width: 11rem;
+	border-radius: 1rem;
+	overflow: hidden;
+	max-height: 120px;
+	z-index: 10;
+}
+
+@media (min-width: 768px) {
+	.previewVideoContainer {
+		max-height: 100%;
+	}
+}
+
+@media (min-width: 1024px) {
+	.previewVideoContainer {
+		width: 17.875rem;
+	}
+}
+
+.previewVideoContainerVertical {
+	height: 40.5rem;
+	width: 6rem;
+}
+
+.previewVideoContainerHidden {
+	background: transparent;
+	display: none;
+}
+
+.previewVideo {
+	width: 100%;
+	height: auto;
+	max-height: 120px;
+}
+
+@media (min-width: 768px) {
+	.previewVideo {
+		max-height: 100%;
+	}
+}
+
+.previewVideoVertical {
+	height: 40.5rem;
+	width: 6rem;
+	object-fit: cover;
+}
+
+.previewVideoHidden {
+	display: none;
+}
+
+/* Main video container */
+.mainVideoContainer {
+	width: 100%;
+	height: 100%;
+}
+
+/* Self view container */
+.selfViewContainer {
+	position: absolute;
+	bottom: 5rem;
+	left: 1rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	gap: 0.75rem;
+}
+
+@media (min-width: 768px) {
+	.selfViewContainer {
+		bottom: 1rem;
+	}
+}
+
+/* Waiting message container */
+/* Start of Selection */
+.waitingContainer {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: transparent;
+	color: white;
+	height: 100%;
+	font-size: 1.5rem;
+	font-weight: 600;
+}
+
+@keyframes gradient {
+	0% {
+		background-position: 0% 50%;
+	}
+	50% {
+		background-position: 100% 50%;
+	}
+	100% {
+		background-position: 0% 50%;
+	}
+}
+/* End of Selection */
+
+.audioWaveContainer {
+	position: absolute;
+	bottom: 0.5rem;
+	right: 0.5rem;
+}

package/dev-components/components/conversation-01/index.tsx

@@ -0,0 +1,173 @@
+import React, { useEffect, useCallback } from "react";
+import {
+	DailyAudio,
+	DailyVideo,
+	useDevices,
+	useLocalSessionId,
+	useMeetingState,
+	useScreenVideoTrack,
+	useVideoTrack
+} from "@daily-co/daily-react";
+import { MicSelectBtn, CameraSelectBtn, ScreenShareButton } from '../device-select'
+import { useLocalScreenshare } from "../../hooks/use-local-screenshare";
+import { useReplicaIDs } from "../../hooks/use-replica-ids";
+import { useCVICall } from "../../hooks/use-cvi-call";
+import { AudioWave } from "../audio-wave";
+
+import styles from "./conversation.module.css";
+
+interface ConversationProps {
+	onLeave: () => void;
+	conversationUrl: string;
+}
+
+const VideoPreview = React.memo(({ id }: { id: string }) => {
+	const videoState = useVideoTrack(id);
+	const widthVideo = videoState.track?.getSettings()?.width;
+	const heightVideo = videoState.track?.getSettings()?.height;
+	const isVertical = widthVideo && heightVideo ? widthVideo < heightVideo : false;
+
+	return (
+		<div
+			className={`${styles.previewVideoContainer} ${isVertical ? styles.previewVideoContainerVertical : ''} ${videoState.isOff ? styles.previewVideoContainerHidden : ''}`}
+		>
+			<DailyVideo
+				automirror
+				sessionId={id}
+				type="video"
+				className={`${styles.previewVideo} ${isVertical ? styles.previewVideoVertical : ''} ${videoState.isOff ? styles.previewVideoHidden : ''}`}
+			/>
+			<div className={styles.audioWaveContainer}>
+				<AudioWave id={id} />
+			</div>
+		</div>
+	);
+});
+
+const PreviewVideos = React.memo(() => {
+	const localId = useLocalSessionId();
+	const { isScreenSharing } = useLocalScreenshare();
+	const replicaIds = useReplicaIDs();
+	const replicaId = replicaIds[0];
+
+	return (
+		<>
+			{isScreenSharing && (
+				<VideoPreview id={replicaId} />
+			)}
+			<VideoPreview id={localId} />
+		</>
+	);
+});
+
+const MainVideo = React.memo(() => {
+	const replicaIds = useReplicaIDs();
+	const localId = useLocalSessionId();
+	const videoState = useVideoTrack(replicaIds[0]);
+	const screenVideoState = useScreenVideoTrack(localId);
+	const isScreenSharing = !screenVideoState.isOff;
+	// This is one-to-one call, so we can use the first replica id
+	const replicaId = replicaIds[0];
+
+	if (!replicaId) {
+		return (
+			<div className={styles.waitingContainer}>
+				<p>Connecting...</p>
+			</div>
+		);
+	}
+
+	// Switching between replica video and screen sharing video
+	return (
+		<div
+			className={`${styles.mainVideoContainer} ${isScreenSharing ? styles.mainVideoContainerScreenSharing : ''}`}
+		>
+			<DailyVideo
+				automirror
+				sessionId={isScreenSharing ? localId : replicaId}
+				type={isScreenSharing ? "screenVideo" : "video"}
+				className={`${styles.mainVideo}
+				${isScreenSharing ? styles.mainVideoScreenSharing : ''}
+				${videoState.isOff ? styles.mainVideoHidden : ''}`}
+			/>
+		</div>
+	);
+});
+
+export const Conversation = React.memo(({ onLeave, conversationUrl }: ConversationProps) => {
+	const { joinCall, leaveCall } = useCVICall();
+	const meetingState = useMeetingState();
+	const { hasMicError } = useDevices()
+
+	useEffect(() => {
+		if (meetingState === 'error') {
+			onLeave();
+		}
+	}, [meetingState, onLeave]);
+
+	// Initialize call when conversation is available
+	useEffect(() => {
+		joinCall({ url: conversationUrl });
+	}, []);
+
+	const handleLeave = useCallback(() => {
+		leaveCall();
+		onLeave();
+	}, [leaveCall, onLeave]);
+
+	return (
+		<div className={styles.container}>
+			<div className={styles.videoContainer}>
+				{
+					hasMicError && (
+						<div className={styles.errorContainer}>
+							<p>
+								Camera or microphone access denied. Please check your settings and try again.
+							</p>
+						</div>
+					)}
+
+				{/* Main video */}
+				<div className={styles.mainVideoContainer}>
+					<MainVideo />
+				</div>
+
+				{/* Self view */}
+				<div className={styles.selfViewContainer}>
+					<PreviewVideos />
+				</div>
+			</div>
+
+			<div className={styles.footer}>
+				<div className={styles.footerControls}>
+					<MicSelectBtn />
+					<CameraSelectBtn />
+					<ScreenShareButton />
+					<button type="button" className={styles.leaveButton} onClick={handleLeave}>
+						<span className={styles.leaveButtonIcon}>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								width="24"
+								height="24"
+								viewBox="0 0 24 24"
+								fill="none"
+								role="img"
+								aria-label="Leave Call"
+							>
+								<path
+									d="M18 6L6 18M6 6L18 18"
+									stroke="currentColor"
+									strokeWidth="2"
+									strokeLinecap="round"
+									strokeLinejoin="round"
+								/>
+							</svg>
+						</span>
+					</button>
+				</div>
+			</div>
+
+			<DailyAudio />
+		</div>
+	);
+});

package/dev-components/components/device-select/device-select.module.css

@@ -0,0 +1,115 @@
+/* SelectDevice styles */
+.selectDevice {
+	height: 3rem;
+	width: 5.5rem;
+	border-radius: 9999px;
+	background-color: rgba(255, 255, 255, 0.2);
+	padding: 0 0.75rem;
+	border: 1px solid rgba(255, 255, 255, 0.2);
+	backdrop-filter: blur(10px);
+	color: transparent;
+	padding-right: 2rem; /* space for arrow */
+	box-sizing: border-box;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+	cursor: pointer;
+}
+
+.selectDevice::-ms-expand {
+	display: none;
+}
+
+.selectDevice option {
+	color: transparent;
+	background-color: transparent;
+}
+
+.selectDevice:focus {
+	outline: none;
+}
+
+/* Device button container styles */
+.deviceButtonContainer {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 9999px;
+	backdrop-filter: blur(4px);
+}
+
+/* Device button styles */
+.deviceButton {
+	position: absolute;
+	left: 0;
+	top: 0;
+	z-index: 10;
+	height: 3rem;
+	width: 3rem;
+	border-radius: 9999px;
+	background-color: white;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border: 1px solid transparent;
+	cursor: pointer;
+}
+
+.deviceButtonIcon {
+	display: flex;
+}
+
+.deviceButton:disabled {
+	opacity: 0.5;
+}
+
+/* Screen reader only text */
+.srOnly {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border-width: 0;
+}
+
+/* Controls container */
+.controlsContainer {
+	display: flex;
+	gap: 1rem;
+	justify-content: center;
+	align-items: center;
+}
+
+.selectDeviceContainer {
+	position: relative;
+	display: flex;
+	align-items: center;
+}
+
+.selectArrow {
+	position: absolute;
+	right: 1rem;
+	pointer-events: none;
+	display: flex;
+	align-items: center;
+	height: 100%;
+}
+
+.screenShareButton {
+	cursor: pointer;
+	position: relative;
+	height: 3rem;
+	width: 3rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 9999px;
+	backdrop-filter: blur(4px);
+	background-color: rgba(255, 255, 255, 0.2);
+	border: 1px solid rgba(255, 255, 255, 0.2);
+}

package/dev-components/components/{controls → device-select}/index.tsx

@@ -3,7 +3,7 @@ import { useDevices } from "@daily-co/daily-react";
 import { useLocalCamera } from "../../hooks/use-local-camera";
 import { useLocalMicrophone } from "../../hooks/use-local-microphone";
 import { useLocalScreenshare } from "../../hooks/use-local-screenshare";
-import styles from "./controls.module.css";
+import styles from "./device-select.module.css";
 
 export const SelectDevice = ({
   value,
@@ -39,7 +39,7 @@ export const SelectDevice = ({
   );
 };
 
-export const MicrophoneButton = memo(() => {
+export const MicSelectBtn = memo(() => {
   const { onToggleMicrophone, isMicReady, isMicMuted } = useLocalMicrophone();
   const { microphones, currentMic, setMicrophone } = useDevices();
 
@@ -129,9 +129,9 @@ export const MicrophoneButton = memo(() => {
   );
 });
 
-MicrophoneButton.displayName = "MicrophoneButton";
+MicSelectBtn.displayName = "MicSelectBtn";
 
-export const CameraButton = memo(() => {
+export const CameraSelectBtn = memo(() => {
   const { onToggleCamera, isCamReady, isCamMuted } = useLocalCamera();
   const { currentCam, cameras, setCamera } = useDevices();
 
@@ -144,7 +144,7 @@ export const CameraButton = memo(() => {
         disabled={!isCamReady || !currentCam}
         className={styles.deviceButton}
       >
-        <span>
+        <span className={styles.deviceButtonIcon}>
           {isCamMuted ? (
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -209,7 +209,7 @@ export const CameraButton = memo(() => {
   );
 });
 
-CameraButton.displayName = "CameraButton";
+CameraSelectBtn.displayName = "CameraSelectBtn";
 
 export const ScreenShareButton = memo(() => {
   const { onToggleScreenshare, isScreenSharing } = useLocalScreenshare();
@@ -218,7 +218,7 @@ export const ScreenShareButton = memo(() => {
     <button
       type="button"
       onClick={onToggleScreenshare}
-      className={styles.deviceButton}
+      className={`${styles.deviceButtonContainer} ${styles.screenShareButton}`}
     >
       <span>
         {isScreenSharing ? (

package/dev-components/components/{hair-check → hair-check-01}/hair-check.module.css

@@ -46,6 +46,7 @@
 	height: 3rem;
 	transition: background-color 0.2s;
 	font-weight: 500;
+	min-width: 8.5rem;
 }
 
 .buttonJoin:hover .buttonJoinInner {
@@ -114,7 +115,7 @@
 .haircheckUserPlaceholder {
 	position: absolute;
 	inset: 0;
-	background-color: #334155;
+  background: linear-gradient(135deg, #4b5563 0%, #1f2937 100%);
 	z-index: 5;
 	pointer-events: none;
 	display: flex;
@@ -207,5 +208,5 @@
 	display: flex;
 	align-items: flex-end;
 	justify-content: space-between;
-	gap: 0.5rem;
+	gap: 1rem;
 }

package/dev-components/components/{hair-check → hair-check-01}/index.tsx

@@ -3,7 +3,7 @@ import {
   DailyVideo,
   useDaily,
 } from "@daily-co/daily-react";
-import { CameraButton, MicrophoneButton } from "../controls";
+import { CameraSelectBtn, MicSelectBtn } from "../device-select";
 import { useStartHaircheck } from "../../hooks/use-start-haircheck";
 import { useLocalCamera } from "../../hooks/use-local-camera";
 
@@ -25,7 +25,7 @@ const JoinBtn = ({
       className={`${styles.buttonJoin} ${className || ''}`}
       type="button"
       onClick={onClick}
-      disabled={disabled}
+      disabled={disabled || loading}
     >
       <div className={styles.buttonJoinInner}>
         {loading ? "Joining..." : "Join Video Chat"}
@@ -172,8 +172,8 @@ export const HairCheck = memo(({
               />}
           </div>
           <div className={styles.haircheckControls}>
-            <MicrophoneButton />
-            <CameraButton />
+            <MicSelectBtn />
+            <CameraSelectBtn />
           </div>
         </div>
       </div>