@tavus/cvi-ui 0.0.1-beta.5 → 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { useEffect, useCallback } from "react";
|
|
2
2
|
import {
|
|
3
|
-
|
|
3
|
+
DailyAudioTrack,
|
|
4
4
|
DailyVideo,
|
|
5
5
|
useDevices,
|
|
6
6
|
useLocalSessionId,
|
|
@@ -90,6 +90,7 @@ const MainVideo = React.memo(() => {
|
|
|
90
90
|
${isScreenSharing ? styles.mainVideoScreenSharing : ''}
|
|
91
91
|
${videoState.isOff ? styles.mainVideoHidden : ''}`}
|
|
92
92
|
/>
|
|
93
|
+
<DailyAudioTrack sessionId={replicaId} />
|
|
93
94
|
</div>
|
|
94
95
|
);
|
|
95
96
|
});
|
|
@@ -166,8 +167,6 @@ export const Conversation = React.memo(({ onLeave, conversationUrl }: Conversati
|
|
|
166
167
|
</button>
|
|
167
168
|
</div>
|
|
168
169
|
</div>
|
|
169
|
-
|
|
170
|
-
<DailyAudio />
|
|
171
170
|
</div>
|
|
172
171
|
);
|
|
173
172
|
});
|
package/dist/index.js
CHANGED
|
@@ -232535,7 +232535,7 @@ var audioWave$1 = {
|
|
|
232535
232535
|
};
|
|
232536
232536
|
|
|
232537
232537
|
var type$s = "components";
|
|
232538
|
-
var content$s = "import React, { useEffect, useCallback } from \"react\";\nimport {\n\
|
|
232538
|
+
var content$s = "import React, { useEffect, useCallback } from \"react\";\nimport {\n\tDailyAudioTrack,\n\tDailyVideo,\n\tuseDevices,\n\tuseLocalSessionId,\n\tuseMeetingState,\n\tuseScreenVideoTrack,\n\tuseVideoTrack\n} from \"@daily-co/daily-react\";\nimport { MicSelectBtn, CameraSelectBtn, ScreenShareButton } from '../device-select'\nimport { useLocalScreenshare } from \"../../hooks/use-local-screenshare\";\nimport { useReplicaIDs } from \"../../hooks/use-replica-ids\";\nimport { useCVICall } from \"../../hooks/use-cvi-call\";\nimport { AudioWave } from \"../audio-wave\";\n\nimport styles from \"./conversation.module.css\";\n\ninterface ConversationProps {\n\tonLeave: () => void;\n\tconversationUrl: string;\n}\n\nconst VideoPreview = React.memo(({ id }: { id: string }) => {\n\tconst videoState = useVideoTrack(id);\n\tconst widthVideo = videoState.track?.getSettings()?.width;\n\tconst heightVideo = videoState.track?.getSettings()?.height;\n\tconst isVertical = widthVideo && heightVideo ? widthVideo < heightVideo : false;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={`${styles.previewVideoContainer} ${isVertical ? styles.previewVideoContainerVertical : ''} ${videoState.isOff ? styles.previewVideoContainerHidden : ''}`}\n\t\t>\n\t\t\t<DailyVideo\n\t\t\t\tautomirror\n\t\t\t\tsessionId={id}\n\t\t\t\ttype=\"video\"\n\t\t\t\tclassName={`${styles.previewVideo} ${isVertical ? styles.previewVideoVertical : ''} ${videoState.isOff ? styles.previewVideoHidden : ''}`}\n\t\t\t/>\n\t\t\t<div className={styles.audioWaveContainer}>\n\t\t\t\t<AudioWave id={id} />\n\t\t\t</div>\n\t\t</div>\n\t);\n});\n\nconst PreviewVideos = React.memo(() => {\n\tconst localId = useLocalSessionId();\n\tconst { isScreenSharing } = useLocalScreenshare();\n\tconst replicaIds = useReplicaIDs();\n\tconst replicaId = replicaIds[0];\n\n\treturn (\n\t\t<>\n\t\t\t{isScreenSharing && (\n\t\t\t\t<VideoPreview id={replicaId} />\n\t\t\t)}\n\t\t\t<VideoPreview id={localId} />\n\t\t</>\n\t);\n});\n\nconst MainVideo = React.memo(() => {\n\tconst replicaIds = useReplicaIDs();\n\tconst localId = useLocalSessionId();\n\tconst videoState = useVideoTrack(replicaIds[0]);\n\tconst screenVideoState = useScreenVideoTrack(localId);\n\tconst isScreenSharing = !screenVideoState.isOff;\n\t// This is one-to-one call, so we can use the first replica id\n\tconst replicaId = replicaIds[0];\n\n\tif (!replicaId) {\n\t\treturn (\n\t\t\t<div className={styles.waitingContainer}>\n\t\t\t\t<p>Connecting...</p>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Switching between replica video and screen sharing video\n\treturn (\n\t\t<div\n\t\t\tclassName={`${styles.mainVideoContainer} ${isScreenSharing ? styles.mainVideoContainerScreenSharing : ''}`}\n\t\t>\n\t\t\t<DailyVideo\n\t\t\t\tautomirror\n\t\t\t\tsessionId={isScreenSharing ? localId : replicaId}\n\t\t\t\ttype={isScreenSharing ? \"screenVideo\" : \"video\"}\n\t\t\t\tclassName={`${styles.mainVideo}\n\t\t\t\t${isScreenSharing ? styles.mainVideoScreenSharing : ''}\n\t\t\t\t${videoState.isOff ? styles.mainVideoHidden : ''}`}\n\t\t\t/>\n\t\t\t<DailyAudioTrack sessionId={replicaId} />\n\t\t</div>\n\t);\n});\n\nexport const Conversation = React.memo(({ onLeave, conversationUrl }: ConversationProps) => {\n\tconst { joinCall, leaveCall } = useCVICall();\n\tconst meetingState = useMeetingState();\n\tconst { hasMicError } = useDevices()\n\n\tuseEffect(() => {\n\t\tif (meetingState === 'error') {\n\t\t\tonLeave();\n\t\t}\n\t}, [meetingState, onLeave]);\n\n\t// Initialize call when conversation is available\n\tuseEffect(() => {\n\t\tjoinCall({ url: conversationUrl });\n\t}, []);\n\n\tconst handleLeave = useCallback(() => {\n\t\tleaveCall();\n\t\tonLeave();\n\t}, [leaveCall, onLeave]);\n\n\treturn (\n\t\t<div className={styles.container}>\n\t\t\t<div className={styles.videoContainer}>\n\t\t\t\t{\n\t\t\t\t\thasMicError && (\n\t\t\t\t\t\t<div className={styles.errorContainer}>\n\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\tCamera or microphone access denied. Please check your settings and try again.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t{/* Main video */}\n\t\t\t\t<div className={styles.mainVideoContainer}>\n\t\t\t\t\t<MainVideo />\n\t\t\t\t</div>\n\n\t\t\t\t{/* Self view */}\n\t\t\t\t<div className={styles.selfViewContainer}>\n\t\t\t\t\t<PreviewVideos />\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div className={styles.footer}>\n\t\t\t\t<div className={styles.footerControls}>\n\t\t\t\t\t<MicSelectBtn />\n\t\t\t\t\t<CameraSelectBtn />\n\t\t\t\t\t<ScreenShareButton />\n\t\t\t\t\t<button type=\"button\" className={styles.leaveButton} onClick={handleLeave}>\n\t\t\t\t\t\t<span className={styles.leaveButtonIcon}>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\t\taria-label=\"Leave Call\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\td=\"M18 6L6 18M6 6L18 18\"\n\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n});\n";
|
|
232539
232539
|
var styles$s = ".container {\n\tposition: relative;\n\twidth: 100%;\n\ttext-align: center;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\taspect-ratio: 9/16;\n\toverflow: hidden;\n\tborder-radius: 0.5rem;\n\tmax-height: 90vh;\n background: linear-gradient(135deg, #4b5563 0%, #1f2937 100%);\n\tbackground-size: 400% 400%;\n\tanimation: gradient 15s ease infinite;\n}\n\n@media (min-width: 768px) {\n\t.container {\n\t\taspect-ratio: 16/9;\n\t}\n}\n\n.errorContainer {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground: rgba(248, 250, 252, 0.08);\n\tcolor: white;\n\theight: 100%;\n\tfont-size: 1.5rem;\n\tfont-weight: 600;\n\ttext-align: center;\n}\n\n.videoContainer {\n\tposition: relative;\n\tz-index: 5;\n\twidth: 100%;\n\theight: 100%;\n}\n\n.footer {\n\tposition: absolute;\n\tbottom: 1.5rem;\n\tleft: 0;\n\tright: 0;\n\tz-index: 20;\n}\n\n.footerControls {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tgap: 16px;\n}\n\n.leaveButton {\n\tbackground: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);\n\tcolor: white;\n\tborder: none;\n\tfont-size: 16px;\n\tcursor: pointer;\n\ttransition: all 0.3s ease;\n\theight: 3rem;\n\twidth: 3rem;\n\tborder-radius: 9999px;\n\tbackground-color: #ef4444;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.leaveButton:hover {\n\topacity: 0.8;\n}\n\n.leaveButtonIcon {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* ReplicaVideo styles */\n.mainVideoContainer {\n\tbackground: transparent;\n\twidth: 100%;\n\theight: 100%;\n\tposition: relative;\n}\n\n.mainVideoContainerScreenSharing {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.mainVideo {\n\tposition: absolute;\n\tinset: 0;\n\tobject-position: center;\n\tobject-fit: cover !important;\n\theight: 100%;\n\twidth: 100%;\n\ttransition: all 0.3s ease;\n}\n\n.mainVideoScreenSharing {\n\tobject-fit: contain !important;\n}\n\n.mainVideoHidden {\n\tdisplay: none;\n}\n\n/* PreviewVideo styles */\n.previewVideoContainer {\n\tposition: relative;\n\tbackground: rgba(2, 6, 23, 0.3);\n\taspect-ratio: 16/9;\n\twidth: 11rem;\n\tborder-radius: 1rem;\n\toverflow: hidden;\n\tmax-height: 120px;\n\tz-index: 10;\n}\n\n@media (min-width: 768px) {\n\t.previewVideoContainer {\n\t\tmax-height: 100%;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.previewVideoContainer {\n\t\twidth: 17.875rem;\n\t}\n}\n\n.previewVideoContainerVertical {\n\theight: 40.5rem;\n\twidth: 6rem;\n}\n\n.previewVideoContainerHidden {\n\tbackground: transparent;\n\tdisplay: none;\n}\n\n.previewVideo {\n\twidth: 100%;\n\theight: auto;\n\tmax-height: 120px;\n}\n\n@media (min-width: 768px) {\n\t.previewVideo {\n\t\tmax-height: 100%;\n\t}\n}\n\n.previewVideoVertical {\n\theight: 40.5rem;\n\twidth: 6rem;\n\tobject-fit: cover;\n}\n\n.previewVideoHidden {\n\tdisplay: none;\n}\n\n/* Main video container */\n.mainVideoContainer {\n\twidth: 100%;\n\theight: 100%;\n}\n\n/* Self view container */\n.selfViewContainer {\n\tposition: absolute;\n\tbottom: 5rem;\n\tleft: 1rem;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex-direction: column;\n\tgap: 0.75rem;\n}\n\n@media (min-width: 768px) {\n\t.selfViewContainer {\n\t\tbottom: 1rem;\n\t}\n}\n\n/* Waiting message container */\n/* Start of Selection */\n.waitingContainer {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground: transparent;\n\tcolor: white;\n\theight: 100%;\n\tfont-size: 1.5rem;\n\tfont-weight: 600;\n}\n\n@keyframes gradient {\n\t0% {\n\t\tbackground-position: 0% 50%;\n\t}\n\t50% {\n\t\tbackground-position: 100% 50%;\n\t}\n\t100% {\n\t\tbackground-position: 0% 50%;\n\t}\n}\n/* End of Selection */\n\n.audioWaveContainer {\n\tposition: absolute;\n\tbottom: 0.5rem;\n\tright: 0.5rem;\n}\n";
|
|
232540
232540
|
var componentsDependencies$7 = [
|
|
232541
232541
|
"device-select",
|
|
@@ -232721,7 +232721,7 @@ var audioWave = {
|
|
|
232721
232721
|
};
|
|
232722
232722
|
|
|
232723
232723
|
var type$d = "components";
|
|
232724
|
-
var content$d = "import React, { useEffect, useCallback } from 'react';\nimport {\n\
|
|
232724
|
+
var content$d = "import React, { useEffect, useCallback } from 'react';\nimport {\n\tDailyAudioTrack,\n\tDailyVideo,\n\tuseDevices,\n\tuseLocalSessionId,\n\tuseMeetingState,\n\tuseScreenVideoTrack,\n\tuseVideoTrack,\n} from '@daily-co/daily-react';\nimport { MicSelectBtn, CameraSelectBtn, ScreenShareButton } from '../device-select';\nimport { useLocalScreenshare } from '../../hooks/use-local-screenshare';\nimport { useReplicaIDs } from '../../hooks/use-replica-ids';\nimport { useCVICall } from '../../hooks/use-cvi-call';\nimport { AudioWave } from '../audio-wave';\n\nimport styles from './conversation.module.css';\n\nconst VideoPreview = React.memo(({ id }) => {\n\tconst videoState = useVideoTrack(id);\n\tconst widthVideo = videoState.track?.getSettings()?.width;\n\tconst heightVideo = videoState.track?.getSettings()?.height;\n\tconst isVertical = widthVideo && heightVideo ? widthVideo < heightVideo : false;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={`${styles.previewVideoContainer} ${isVertical ? styles.previewVideoContainerVertical : ''} ${videoState.isOff ? styles.previewVideoContainerHidden : ''}`}\n\t\t>\n\t\t\t<DailyVideo\n\t\t\t\tautomirror\n\t\t\t\tsessionId={id}\n\t\t\t\ttype=\"video\"\n\t\t\t\tclassName={`${styles.previewVideo} ${isVertical ? styles.previewVideoVertical : ''} ${videoState.isOff ? styles.previewVideoHidden : ''}`}\n\t\t\t/>\n\n\t\t\t<div className={styles.audioWaveContainer}>\n\t\t\t\t<AudioWave id={id} />\n\t\t\t</div>\n\t\t</div>\n\t);\n});\n\nconst PreviewVideos = React.memo(() => {\n\tconst localId = useLocalSessionId();\n\tconst { isScreenSharing } = useLocalScreenshare();\n\tconst replicaIds = useReplicaIDs();\n\tconst replicaId = replicaIds[0];\n\n\treturn (\n\t\t<>\n\t\t\t{isScreenSharing && <VideoPreview id={replicaId} />}\n\t\t\t<VideoPreview id={localId} />\n\t\t</>\n\t);\n});\n\nconst MainVideo = React.memo(() => {\n\tconst replicaIds = useReplicaIDs();\n\tconst localId = useLocalSessionId();\n\tconst videoState = useVideoTrack(replicaIds[0]);\n\tconst screenVideoState = useScreenVideoTrack(localId);\n\tconst isScreenSharing = !screenVideoState.isOff;\n\t// This is one-to-one call, so we can use the first replica id\n\tconst replicaId = replicaIds[0];\n\n\tif (!replicaId) {\n\t\treturn (\n\t\t\t<div className={styles.waitingContainer}>\n\t\t\t\t<p>Connecting...</p>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Switching between replica video and screen sharing video\n\treturn (\n\t\t<div\n\t\t\tclassName={`${styles.mainVideoContainer} ${isScreenSharing ? styles.mainVideoContainerScreenSharing : ''}`}\n\t\t>\n\t\t\t<DailyVideo\n\t\t\t\tautomirror\n\t\t\t\tsessionId={isScreenSharing ? localId : replicaId}\n\t\t\t\ttype={isScreenSharing ? 'screenVideo' : 'video'}\n\t\t\t\tclassName={`${styles.mainVideo}\n\t\t\t\t${isScreenSharing ? styles.mainVideoScreenSharing : ''}\n\t\t\t\t${videoState.isOff ? styles.mainVideoHidden : ''}`}\n\t\t\t/>\n\n\t\t\t<DailyAudioTrack sessionId={replicaId} />\n\t\t</div>\n\t);\n});\n\nexport const Conversation = React.memo(({ onLeave, conversationUrl }) => {\n\tconst { joinCall, leaveCall } = useCVICall();\n\tconst meetingState = useMeetingState();\n\tconst { hasMicError } = useDevices();\n\n\tuseEffect(() => {\n\t\tif (meetingState === 'error') {\n\t\t\tonLeave();\n\t\t}\n\t}, [meetingState, onLeave]);\n\n\t// Initialize call when conversation is available\n\tuseEffect(() => {\n\t\tjoinCall({ url: conversationUrl });\n\t}, []);\n\n\tconst handleLeave = useCallback(() => {\n\t\tleaveCall();\n\t\tonLeave();\n\t}, [leaveCall, onLeave]);\n\n\treturn (\n\t\t<div className={styles.container}>\n\t\t\t<div className={styles.videoContainer}>\n\t\t\t\t{hasMicError && (\n\t\t\t\t\t<div className={styles.errorContainer}>\n\t\t\t\t\t\t<p>Camera or microphone access denied. Please check your settings and try again.</p>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t{/* Main video */}\n\t\t\t\t<div className={styles.mainVideoContainer}>\n\t\t\t\t\t<MainVideo />\n\t\t\t\t</div>\n\n\t\t\t\t{/* Self view */}\n\t\t\t\t<div className={styles.selfViewContainer}>\n\t\t\t\t\t<PreviewVideos />\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div className={styles.footer}>\n\t\t\t\t<div className={styles.footerControls}>\n\t\t\t\t\t<MicSelectBtn />\n\t\t\t\t\t<CameraSelectBtn />\n\t\t\t\t\t<ScreenShareButton />\n\t\t\t\t\t<button type=\"button\" className={styles.leaveButton} onClick={handleLeave}>\n\t\t\t\t\t\t<span className={styles.leaveButtonIcon}>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\t\taria-label=\"Leave Call\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\td=\"M18 6L6 18M6 6L18 18\"\n\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n});\n";
|
|
232725
232725
|
var styles$d = ".container {\n\tposition: relative;\n\twidth: 100%;\n\ttext-align: center;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\taspect-ratio: 9/16;\n\toverflow: hidden;\n\tborder-radius: 0.5rem;\n\tmax-height: 90vh;\n background: linear-gradient(135deg, #4b5563 0%, #1f2937 100%);\n\tbackground-size: 400% 400%;\n\tanimation: gradient 15s ease infinite;\n}\n\n@media (min-width: 768px) {\n\t.container {\n\t\taspect-ratio: 16/9;\n\t}\n}\n\n.errorContainer {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground: rgba(248, 250, 252, 0.08);\n\tcolor: white;\n\theight: 100%;\n\tfont-size: 1.5rem;\n\tfont-weight: 600;\n\ttext-align: center;\n}\n\n.videoContainer {\n\tposition: relative;\n\tz-index: 5;\n\twidth: 100%;\n\theight: 100%;\n}\n\n.footer {\n\tposition: absolute;\n\tbottom: 1.5rem;\n\tleft: 0;\n\tright: 0;\n\tz-index: 20;\n}\n\n.footerControls {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tgap: 16px;\n}\n\n.leaveButton {\n\tbackground: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);\n\tcolor: white;\n\tborder: none;\n\tfont-size: 16px;\n\tcursor: pointer;\n\ttransition: all 0.3s ease;\n\theight: 3rem;\n\twidth: 3rem;\n\tborder-radius: 9999px;\n\tbackground-color: #ef4444;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.leaveButton:hover {\n\topacity: 0.8;\n}\n\n.leaveButtonIcon {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* ReplicaVideo styles */\n.mainVideoContainer {\n\tbackground: transparent;\n\twidth: 100%;\n\theight: 100%;\n\tposition: relative;\n}\n\n.mainVideoContainerScreenSharing {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.mainVideo {\n\tposition: absolute;\n\tinset: 0;\n\tobject-position: center;\n\tobject-fit: cover !important;\n\theight: 100%;\n\twidth: 100%;\n\ttransition: all 0.3s ease;\n}\n\n.mainVideoScreenSharing {\n\tobject-fit: contain !important;\n}\n\n.mainVideoHidden {\n\tdisplay: none;\n}\n\n/* PreviewVideo styles */\n.previewVideoContainer {\n\tposition: relative;\n\tbackground: rgba(2, 6, 23, 0.3);\n\taspect-ratio: 16/9;\n\twidth: 11rem;\n\tborder-radius: 1rem;\n\toverflow: hidden;\n\tmax-height: 120px;\n\tz-index: 10;\n}\n\n@media (min-width: 768px) {\n\t.previewVideoContainer {\n\t\tmax-height: 100%;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.previewVideoContainer {\n\t\twidth: 17.875rem;\n\t}\n}\n\n.previewVideoContainerVertical {\n\theight: 40.5rem;\n\twidth: 6rem;\n}\n\n.previewVideoContainerHidden {\n\tbackground: transparent;\n\tdisplay: none;\n}\n\n.previewVideo {\n\twidth: 100%;\n\theight: auto;\n\tmax-height: 120px;\n}\n\n@media (min-width: 768px) {\n\t.previewVideo {\n\t\tmax-height: 100%;\n\t}\n}\n\n.previewVideoVertical {\n\theight: 40.5rem;\n\twidth: 6rem;\n\tobject-fit: cover;\n}\n\n.previewVideoHidden {\n\tdisplay: none;\n}\n\n/* Main video container */\n.mainVideoContainer {\n\twidth: 100%;\n\theight: 100%;\n}\n\n/* Self view container */\n.selfViewContainer {\n\tposition: absolute;\n\tbottom: 5rem;\n\tleft: 1rem;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex-direction: column;\n\tgap: 0.75rem;\n}\n\n@media (min-width: 768px) {\n\t.selfViewContainer {\n\t\tbottom: 1rem;\n\t}\n}\n\n/* Waiting message container */\n/* Start of Selection */\n.waitingContainer {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground: transparent;\n\tcolor: white;\n\theight: 100%;\n\tfont-size: 1.5rem;\n\tfont-weight: 600;\n}\n\n@keyframes gradient {\n\t0% {\n\t\tbackground-position: 0% 50%;\n\t}\n\t50% {\n\t\tbackground-position: 100% 50%;\n\t}\n\t100% {\n\t\tbackground-position: 0% 50%;\n\t}\n}\n/* End of Selection */\n\n.audioWaveContainer {\n\tposition: absolute;\n\tbottom: 0.5rem;\n\tright: 0.5rem;\n}\n";
|
|
232726
232726
|
var componentsDependencies$3 = [
|
|
232727
232727
|
"device-select",
|
|
@@ -237569,7 +237569,7 @@ const info = new Command()
|
|
|
237569
237569
|
console.log(await getConfig(opts.cwd));
|
|
237570
237570
|
});
|
|
237571
237571
|
|
|
237572
|
-
var version = "0.0.1
|
|
237572
|
+
var version = "0.0.1";
|
|
237573
237573
|
var packageJson = {
|
|
237574
237574
|
version: version};
|
|
237575
237575
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"type": "components",
|
|
3
|
-
"content": "import React, { useEffect, useCallback } from 'react';\nimport {\n\
|
|
3
|
+
"content": "import React, { useEffect, useCallback } from 'react';\nimport {\n\tDailyAudioTrack,\n\tDailyVideo,\n\tuseDevices,\n\tuseLocalSessionId,\n\tuseMeetingState,\n\tuseScreenVideoTrack,\n\tuseVideoTrack,\n} from '@daily-co/daily-react';\nimport { MicSelectBtn, CameraSelectBtn, ScreenShareButton } from '../device-select';\nimport { useLocalScreenshare } from '../../hooks/use-local-screenshare';\nimport { useReplicaIDs } from '../../hooks/use-replica-ids';\nimport { useCVICall } from '../../hooks/use-cvi-call';\nimport { AudioWave } from '../audio-wave';\n\nimport styles from './conversation.module.css';\n\nconst VideoPreview = React.memo(({ id }) => {\n\tconst videoState = useVideoTrack(id);\n\tconst widthVideo = videoState.track?.getSettings()?.width;\n\tconst heightVideo = videoState.track?.getSettings()?.height;\n\tconst isVertical = widthVideo && heightVideo ? widthVideo < heightVideo : false;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={`${styles.previewVideoContainer} ${isVertical ? styles.previewVideoContainerVertical : ''} ${videoState.isOff ? styles.previewVideoContainerHidden : ''}`}\n\t\t>\n\t\t\t<DailyVideo\n\t\t\t\tautomirror\n\t\t\t\tsessionId={id}\n\t\t\t\ttype=\"video\"\n\t\t\t\tclassName={`${styles.previewVideo} ${isVertical ? styles.previewVideoVertical : ''} ${videoState.isOff ? styles.previewVideoHidden : ''}`}\n\t\t\t/>\n\n\t\t\t<div className={styles.audioWaveContainer}>\n\t\t\t\t<AudioWave id={id} />\n\t\t\t</div>\n\t\t</div>\n\t);\n});\n\nconst PreviewVideos = React.memo(() => {\n\tconst localId = useLocalSessionId();\n\tconst { isScreenSharing } = useLocalScreenshare();\n\tconst replicaIds = useReplicaIDs();\n\tconst replicaId = replicaIds[0];\n\n\treturn (\n\t\t<>\n\t\t\t{isScreenSharing && <VideoPreview id={replicaId} />}\n\t\t\t<VideoPreview id={localId} />\n\t\t</>\n\t);\n});\n\nconst MainVideo = React.memo(() => {\n\tconst replicaIds = useReplicaIDs();\n\tconst localId = useLocalSessionId();\n\tconst videoState = useVideoTrack(replicaIds[0]);\n\tconst screenVideoState = useScreenVideoTrack(localId);\n\tconst isScreenSharing = !screenVideoState.isOff;\n\t// This is one-to-one call, so we can use the first replica id\n\tconst replicaId = replicaIds[0];\n\n\tif (!replicaId) {\n\t\treturn (\n\t\t\t<div className={styles.waitingContainer}>\n\t\t\t\t<p>Connecting...</p>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Switching between replica video and screen sharing video\n\treturn (\n\t\t<div\n\t\t\tclassName={`${styles.mainVideoContainer} ${isScreenSharing ? styles.mainVideoContainerScreenSharing : ''}`}\n\t\t>\n\t\t\t<DailyVideo\n\t\t\t\tautomirror\n\t\t\t\tsessionId={isScreenSharing ? localId : replicaId}\n\t\t\t\ttype={isScreenSharing ? 'screenVideo' : 'video'}\n\t\t\t\tclassName={`${styles.mainVideo}\n\t\t\t\t${isScreenSharing ? styles.mainVideoScreenSharing : ''}\n\t\t\t\t${videoState.isOff ? styles.mainVideoHidden : ''}`}\n\t\t\t/>\n\n\t\t\t<DailyAudioTrack sessionId={replicaId} />\n\t\t</div>\n\t);\n});\n\nexport const Conversation = React.memo(({ onLeave, conversationUrl }) => {\n\tconst { joinCall, leaveCall } = useCVICall();\n\tconst meetingState = useMeetingState();\n\tconst { hasMicError } = useDevices();\n\n\tuseEffect(() => {\n\t\tif (meetingState === 'error') {\n\t\t\tonLeave();\n\t\t}\n\t}, [meetingState, onLeave]);\n\n\t// Initialize call when conversation is available\n\tuseEffect(() => {\n\t\tjoinCall({ url: conversationUrl });\n\t}, []);\n\n\tconst handleLeave = useCallback(() => {\n\t\tleaveCall();\n\t\tonLeave();\n\t}, [leaveCall, onLeave]);\n\n\treturn (\n\t\t<div className={styles.container}>\n\t\t\t<div className={styles.videoContainer}>\n\t\t\t\t{hasMicError && (\n\t\t\t\t\t<div className={styles.errorContainer}>\n\t\t\t\t\t\t<p>Camera or microphone access denied. Please check your settings and try again.</p>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t{/* Main video */}\n\t\t\t\t<div className={styles.mainVideoContainer}>\n\t\t\t\t\t<MainVideo />\n\t\t\t\t</div>\n\n\t\t\t\t{/* Self view */}\n\t\t\t\t<div className={styles.selfViewContainer}>\n\t\t\t\t\t<PreviewVideos />\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div className={styles.footer}>\n\t\t\t\t<div className={styles.footerControls}>\n\t\t\t\t\t<MicSelectBtn />\n\t\t\t\t\t<CameraSelectBtn />\n\t\t\t\t\t<ScreenShareButton />\n\t\t\t\t\t<button type=\"button\" className={styles.leaveButton} onClick={handleLeave}>\n\t\t\t\t\t\t<span className={styles.leaveButtonIcon}>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\t\taria-label=\"Leave Call\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\td=\"M18 6L6 18M6 6L18 18\"\n\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n});\n",
|
|
4
4
|
"styles": ".container {\n\tposition: relative;\n\twidth: 100%;\n\ttext-align: center;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\taspect-ratio: 9/16;\n\toverflow: hidden;\n\tborder-radius: 0.5rem;\n\tmax-height: 90vh;\n background: linear-gradient(135deg, #4b5563 0%, #1f2937 100%);\n\tbackground-size: 400% 400%;\n\tanimation: gradient 15s ease infinite;\n}\n\n@media (min-width: 768px) {\n\t.container {\n\t\taspect-ratio: 16/9;\n\t}\n}\n\n.errorContainer {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground: rgba(248, 250, 252, 0.08);\n\tcolor: white;\n\theight: 100%;\n\tfont-size: 1.5rem;\n\tfont-weight: 600;\n\ttext-align: center;\n}\n\n.videoContainer {\n\tposition: relative;\n\tz-index: 5;\n\twidth: 100%;\n\theight: 100%;\n}\n\n.footer {\n\tposition: absolute;\n\tbottom: 1.5rem;\n\tleft: 0;\n\tright: 0;\n\tz-index: 20;\n}\n\n.footerControls {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tgap: 16px;\n}\n\n.leaveButton {\n\tbackground: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);\n\tcolor: white;\n\tborder: none;\n\tfont-size: 16px;\n\tcursor: pointer;\n\ttransition: all 0.3s ease;\n\theight: 3rem;\n\twidth: 3rem;\n\tborder-radius: 9999px;\n\tbackground-color: #ef4444;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.leaveButton:hover {\n\topacity: 0.8;\n}\n\n.leaveButtonIcon {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* ReplicaVideo styles */\n.mainVideoContainer {\n\tbackground: transparent;\n\twidth: 100%;\n\theight: 100%;\n\tposition: relative;\n}\n\n.mainVideoContainerScreenSharing {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.mainVideo {\n\tposition: absolute;\n\tinset: 0;\n\tobject-position: center;\n\tobject-fit: cover !important;\n\theight: 100%;\n\twidth: 100%;\n\ttransition: all 0.3s ease;\n}\n\n.mainVideoScreenSharing {\n\tobject-fit: contain !important;\n}\n\n.mainVideoHidden {\n\tdisplay: none;\n}\n\n/* PreviewVideo styles */\n.previewVideoContainer {\n\tposition: relative;\n\tbackground: rgba(2, 6, 23, 0.3);\n\taspect-ratio: 16/9;\n\twidth: 11rem;\n\tborder-radius: 1rem;\n\toverflow: hidden;\n\tmax-height: 120px;\n\tz-index: 10;\n}\n\n@media (min-width: 768px) {\n\t.previewVideoContainer {\n\t\tmax-height: 100%;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.previewVideoContainer {\n\t\twidth: 17.875rem;\n\t}\n}\n\n.previewVideoContainerVertical {\n\theight: 40.5rem;\n\twidth: 6rem;\n}\n\n.previewVideoContainerHidden {\n\tbackground: transparent;\n\tdisplay: none;\n}\n\n.previewVideo {\n\twidth: 100%;\n\theight: auto;\n\tmax-height: 120px;\n}\n\n@media (min-width: 768px) {\n\t.previewVideo {\n\t\tmax-height: 100%;\n\t}\n}\n\n.previewVideoVertical {\n\theight: 40.5rem;\n\twidth: 6rem;\n\tobject-fit: cover;\n}\n\n.previewVideoHidden {\n\tdisplay: none;\n}\n\n/* Main video container */\n.mainVideoContainer {\n\twidth: 100%;\n\theight: 100%;\n}\n\n/* Self view container */\n.selfViewContainer {\n\tposition: absolute;\n\tbottom: 5rem;\n\tleft: 1rem;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex-direction: column;\n\tgap: 0.75rem;\n}\n\n@media (min-width: 768px) {\n\t.selfViewContainer {\n\t\tbottom: 1rem;\n\t}\n}\n\n/* Waiting message container */\n/* Start of Selection */\n.waitingContainer {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground: transparent;\n\tcolor: white;\n\theight: 100%;\n\tfont-size: 1.5rem;\n\tfont-weight: 600;\n}\n\n@keyframes gradient {\n\t0% {\n\t\tbackground-position: 0% 50%;\n\t}\n\t50% {\n\t\tbackground-position: 100% 50%;\n\t}\n\t100% {\n\t\tbackground-position: 0% 50%;\n\t}\n}\n/* End of Selection */\n\n.audioWaveContainer {\n\tposition: absolute;\n\tbottom: 0.5rem;\n\tright: 0.5rem;\n}\n",
|
|
5
5
|
"componentsDependencies": [
|
|
6
6
|
"device-select",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"type": "components",
|
|
3
|
-
"content": "import React, { useEffect, useCallback } from \"react\";\nimport {\n\
|
|
3
|
+
"content": "import React, { useEffect, useCallback } from \"react\";\nimport {\n\tDailyAudioTrack,\n\tDailyVideo,\n\tuseDevices,\n\tuseLocalSessionId,\n\tuseMeetingState,\n\tuseScreenVideoTrack,\n\tuseVideoTrack\n} from \"@daily-co/daily-react\";\nimport { MicSelectBtn, CameraSelectBtn, ScreenShareButton } from '../device-select'\nimport { useLocalScreenshare } from \"../../hooks/use-local-screenshare\";\nimport { useReplicaIDs } from \"../../hooks/use-replica-ids\";\nimport { useCVICall } from \"../../hooks/use-cvi-call\";\nimport { AudioWave } from \"../audio-wave\";\n\nimport styles from \"./conversation.module.css\";\n\ninterface ConversationProps {\n\tonLeave: () => void;\n\tconversationUrl: string;\n}\n\nconst VideoPreview = React.memo(({ id }: { id: string }) => {\n\tconst videoState = useVideoTrack(id);\n\tconst widthVideo = videoState.track?.getSettings()?.width;\n\tconst heightVideo = videoState.track?.getSettings()?.height;\n\tconst isVertical = widthVideo && heightVideo ? widthVideo < heightVideo : false;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={`${styles.previewVideoContainer} ${isVertical ? styles.previewVideoContainerVertical : ''} ${videoState.isOff ? styles.previewVideoContainerHidden : ''}`}\n\t\t>\n\t\t\t<DailyVideo\n\t\t\t\tautomirror\n\t\t\t\tsessionId={id}\n\t\t\t\ttype=\"video\"\n\t\t\t\tclassName={`${styles.previewVideo} ${isVertical ? styles.previewVideoVertical : ''} ${videoState.isOff ? styles.previewVideoHidden : ''}`}\n\t\t\t/>\n\t\t\t<div className={styles.audioWaveContainer}>\n\t\t\t\t<AudioWave id={id} />\n\t\t\t</div>\n\t\t</div>\n\t);\n});\n\nconst PreviewVideos = React.memo(() => {\n\tconst localId = useLocalSessionId();\n\tconst { isScreenSharing } = useLocalScreenshare();\n\tconst replicaIds = useReplicaIDs();\n\tconst replicaId = replicaIds[0];\n\n\treturn (\n\t\t<>\n\t\t\t{isScreenSharing && (\n\t\t\t\t<VideoPreview id={replicaId} />\n\t\t\t)}\n\t\t\t<VideoPreview id={localId} />\n\t\t</>\n\t);\n});\n\nconst MainVideo = React.memo(() => {\n\tconst replicaIds = useReplicaIDs();\n\tconst localId = useLocalSessionId();\n\tconst videoState = useVideoTrack(replicaIds[0]);\n\tconst screenVideoState = useScreenVideoTrack(localId);\n\tconst isScreenSharing = !screenVideoState.isOff;\n\t// This is one-to-one call, so we can use the first replica id\n\tconst replicaId = replicaIds[0];\n\n\tif (!replicaId) {\n\t\treturn (\n\t\t\t<div className={styles.waitingContainer}>\n\t\t\t\t<p>Connecting...</p>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Switching between replica video and screen sharing video\n\treturn (\n\t\t<div\n\t\t\tclassName={`${styles.mainVideoContainer} ${isScreenSharing ? styles.mainVideoContainerScreenSharing : ''}`}\n\t\t>\n\t\t\t<DailyVideo\n\t\t\t\tautomirror\n\t\t\t\tsessionId={isScreenSharing ? localId : replicaId}\n\t\t\t\ttype={isScreenSharing ? \"screenVideo\" : \"video\"}\n\t\t\t\tclassName={`${styles.mainVideo}\n\t\t\t\t${isScreenSharing ? styles.mainVideoScreenSharing : ''}\n\t\t\t\t${videoState.isOff ? styles.mainVideoHidden : ''}`}\n\t\t\t/>\n\t\t\t<DailyAudioTrack sessionId={replicaId} />\n\t\t</div>\n\t);\n});\n\nexport const Conversation = React.memo(({ onLeave, conversationUrl }: ConversationProps) => {\n\tconst { joinCall, leaveCall } = useCVICall();\n\tconst meetingState = useMeetingState();\n\tconst { hasMicError } = useDevices()\n\n\tuseEffect(() => {\n\t\tif (meetingState === 'error') {\n\t\t\tonLeave();\n\t\t}\n\t}, [meetingState, onLeave]);\n\n\t// Initialize call when conversation is available\n\tuseEffect(() => {\n\t\tjoinCall({ url: conversationUrl });\n\t}, []);\n\n\tconst handleLeave = useCallback(() => {\n\t\tleaveCall();\n\t\tonLeave();\n\t}, [leaveCall, onLeave]);\n\n\treturn (\n\t\t<div className={styles.container}>\n\t\t\t<div className={styles.videoContainer}>\n\t\t\t\t{\n\t\t\t\t\thasMicError && (\n\t\t\t\t\t\t<div className={styles.errorContainer}>\n\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\tCamera or microphone access denied. Please check your settings and try again.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t{/* Main video */}\n\t\t\t\t<div className={styles.mainVideoContainer}>\n\t\t\t\t\t<MainVideo />\n\t\t\t\t</div>\n\n\t\t\t\t{/* Self view */}\n\t\t\t\t<div className={styles.selfViewContainer}>\n\t\t\t\t\t<PreviewVideos />\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div className={styles.footer}>\n\t\t\t\t<div className={styles.footerControls}>\n\t\t\t\t\t<MicSelectBtn />\n\t\t\t\t\t<CameraSelectBtn />\n\t\t\t\t\t<ScreenShareButton />\n\t\t\t\t\t<button type=\"button\" className={styles.leaveButton} onClick={handleLeave}>\n\t\t\t\t\t\t<span className={styles.leaveButtonIcon}>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\t\taria-label=\"Leave Call\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\td=\"M18 6L6 18M6 6L18 18\"\n\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n});\n",
|
|
4
4
|
"styles": ".container {\n\tposition: relative;\n\twidth: 100%;\n\ttext-align: center;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\taspect-ratio: 9/16;\n\toverflow: hidden;\n\tborder-radius: 0.5rem;\n\tmax-height: 90vh;\n background: linear-gradient(135deg, #4b5563 0%, #1f2937 100%);\n\tbackground-size: 400% 400%;\n\tanimation: gradient 15s ease infinite;\n}\n\n@media (min-width: 768px) {\n\t.container {\n\t\taspect-ratio: 16/9;\n\t}\n}\n\n.errorContainer {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground: rgba(248, 250, 252, 0.08);\n\tcolor: white;\n\theight: 100%;\n\tfont-size: 1.5rem;\n\tfont-weight: 600;\n\ttext-align: center;\n}\n\n.videoContainer {\n\tposition: relative;\n\tz-index: 5;\n\twidth: 100%;\n\theight: 100%;\n}\n\n.footer {\n\tposition: absolute;\n\tbottom: 1.5rem;\n\tleft: 0;\n\tright: 0;\n\tz-index: 20;\n}\n\n.footerControls {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tgap: 16px;\n}\n\n.leaveButton {\n\tbackground: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);\n\tcolor: white;\n\tborder: none;\n\tfont-size: 16px;\n\tcursor: pointer;\n\ttransition: all 0.3s ease;\n\theight: 3rem;\n\twidth: 3rem;\n\tborder-radius: 9999px;\n\tbackground-color: #ef4444;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.leaveButton:hover {\n\topacity: 0.8;\n}\n\n.leaveButtonIcon {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* ReplicaVideo styles */\n.mainVideoContainer {\n\tbackground: transparent;\n\twidth: 100%;\n\theight: 100%;\n\tposition: relative;\n}\n\n.mainVideoContainerScreenSharing {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.mainVideo {\n\tposition: absolute;\n\tinset: 0;\n\tobject-position: center;\n\tobject-fit: cover !important;\n\theight: 100%;\n\twidth: 100%;\n\ttransition: all 0.3s ease;\n}\n\n.mainVideoScreenSharing {\n\tobject-fit: contain !important;\n}\n\n.mainVideoHidden {\n\tdisplay: none;\n}\n\n/* PreviewVideo styles */\n.previewVideoContainer {\n\tposition: relative;\n\tbackground: rgba(2, 6, 23, 0.3);\n\taspect-ratio: 16/9;\n\twidth: 11rem;\n\tborder-radius: 1rem;\n\toverflow: hidden;\n\tmax-height: 120px;\n\tz-index: 10;\n}\n\n@media (min-width: 768px) {\n\t.previewVideoContainer {\n\t\tmax-height: 100%;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.previewVideoContainer {\n\t\twidth: 17.875rem;\n\t}\n}\n\n.previewVideoContainerVertical {\n\theight: 40.5rem;\n\twidth: 6rem;\n}\n\n.previewVideoContainerHidden {\n\tbackground: transparent;\n\tdisplay: none;\n}\n\n.previewVideo {\n\twidth: 100%;\n\theight: auto;\n\tmax-height: 120px;\n}\n\n@media (min-width: 768px) {\n\t.previewVideo {\n\t\tmax-height: 100%;\n\t}\n}\n\n.previewVideoVertical {\n\theight: 40.5rem;\n\twidth: 6rem;\n\tobject-fit: cover;\n}\n\n.previewVideoHidden {\n\tdisplay: none;\n}\n\n/* Main video container */\n.mainVideoContainer {\n\twidth: 100%;\n\theight: 100%;\n}\n\n/* Self view container */\n.selfViewContainer {\n\tposition: absolute;\n\tbottom: 5rem;\n\tleft: 1rem;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex-direction: column;\n\tgap: 0.75rem;\n}\n\n@media (min-width: 768px) {\n\t.selfViewContainer {\n\t\tbottom: 1rem;\n\t}\n}\n\n/* Waiting message container */\n/* Start of Selection */\n.waitingContainer {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground: transparent;\n\tcolor: white;\n\theight: 100%;\n\tfont-size: 1.5rem;\n\tfont-weight: 600;\n}\n\n@keyframes gradient {\n\t0% {\n\t\tbackground-position: 0% 50%;\n\t}\n\t50% {\n\t\tbackground-position: 100% 50%;\n\t}\n\t100% {\n\t\tbackground-position: 0% 50%;\n\t}\n}\n/* End of Selection */\n\n.audioWaveContainer {\n\tposition: absolute;\n\tbottom: 0.5rem;\n\tright: 0.5rem;\n}\n",
|
|
5
5
|
"componentsDependencies": [
|
|
6
6
|
"device-select",
|