@tavus/cvi-ui 0.0.1-beta.4 → 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.
- package/dev-components/components/conversation-01/index.tsx +2 -3
- package/dist/index.js +25 -14
- package/dist/types/constants/frameworks.d.ts +4 -0
- package/package.json +4 -2
- package/src/constants/frameworks.ts +4 -0
- package/src/preflights/preflight-init.ts +1 -1
- package/src/templates/jsx/components/conversation-01.json +1 -1
- package/src/templates/tsx/components/conversation-01.json +1 -1
- package/src/utils/get-project-info.ts +118 -124
|
@@ -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
|
@@ -62,6 +62,10 @@ const FRAMEWORKS = {
|
|
|
62
62
|
name: 'gatsby',
|
|
63
63
|
label: 'Gatsby',
|
|
64
64
|
},
|
|
65
|
+
expo: {
|
|
66
|
+
name: 'expo',
|
|
67
|
+
label: 'Expo',
|
|
68
|
+
},
|
|
65
69
|
manual: {
|
|
66
70
|
name: 'manual',
|
|
67
71
|
label: 'Manual',
|
|
@@ -217757,13 +217761,7 @@ function requireOut () {
|
|
|
217757
217761
|
var outExports = requireOut();
|
|
217758
217762
|
var fg = /*@__PURE__*/getDefaultExportFromCjs$1(outExports);
|
|
217759
217763
|
|
|
217760
|
-
const PROJECT_SHARED_IGNORE = [
|
|
217761
|
-
'**/node_modules/**',
|
|
217762
|
-
'.next',
|
|
217763
|
-
'public',
|
|
217764
|
-
'dist',
|
|
217765
|
-
'build',
|
|
217766
|
-
];
|
|
217764
|
+
const PROJECT_SHARED_IGNORE = ['**/node_modules/**', '.next', 'public', 'dist', 'build'];
|
|
217767
217765
|
async function getProjectInfo(cwd) {
|
|
217768
217766
|
const [configFiles, isSrcDir, isTsx, packageJson] = await Promise.all([
|
|
217769
217767
|
fg.glob('**/{next,vite,astro,app}.config.*|gatsby-config.*|composer.json|react-router.config.*', {
|
|
@@ -217783,9 +217781,7 @@ async function getProjectInfo(cwd) {
|
|
|
217783
217781
|
};
|
|
217784
217782
|
// Next.js.
|
|
217785
217783
|
if (configFiles.find((file) => file.startsWith('next.config.'))?.length) {
|
|
217786
|
-
type.framework = isUsingAppDir
|
|
217787
|
-
? FRAMEWORKS['next-app']
|
|
217788
|
-
: FRAMEWORKS['next-pages'];
|
|
217784
|
+
type.framework = isUsingAppDir ? FRAMEWORKS['next-app'] : FRAMEWORKS['next-pages'];
|
|
217789
217785
|
return type;
|
|
217790
217786
|
}
|
|
217791
217787
|
// Astro.
|
|
@@ -217824,6 +217820,21 @@ async function getProjectInfo(cwd) {
|
|
|
217824
217820
|
type.framework = FRAMEWORKS['vite'];
|
|
217825
217821
|
return type;
|
|
217826
217822
|
}
|
|
217823
|
+
// Vinxi-based (such as @tanstack/start and @solidjs/solid-start)
|
|
217824
|
+
// They are vite-based, and the same configurations used for Vite should work flawlessly
|
|
217825
|
+
const appConfig = configFiles.find((file) => file.startsWith('app.config'));
|
|
217826
|
+
if (appConfig?.length) {
|
|
217827
|
+
const appConfigContents = await fs$4.readFile(path$1.resolve(cwd, appConfig), 'utf8');
|
|
217828
|
+
if (appConfigContents.includes('defineConfig')) {
|
|
217829
|
+
type.framework = FRAMEWORKS['vite'];
|
|
217830
|
+
return type;
|
|
217831
|
+
}
|
|
217832
|
+
}
|
|
217833
|
+
// Expo.
|
|
217834
|
+
if (packageJson?.dependencies?.expo) {
|
|
217835
|
+
type.framework = FRAMEWORKS['expo'];
|
|
217836
|
+
return type;
|
|
217837
|
+
}
|
|
217827
217838
|
return type;
|
|
217828
217839
|
}
|
|
217829
217840
|
async function isTypeScriptProject(cwd) {
|
|
@@ -221513,7 +221524,7 @@ async function preFlightInit(options) {
|
|
|
221513
221524
|
silent: options.silent,
|
|
221514
221525
|
}).start();
|
|
221515
221526
|
const projectInfo = await getProjectInfo(options.cwd);
|
|
221516
|
-
if (!projectInfo
|
|
221527
|
+
if (!projectInfo) {
|
|
221517
221528
|
errors[UNSUPPORTED_FRAMEWORK] = true;
|
|
221518
221529
|
frameworkSpinner?.fail();
|
|
221519
221530
|
logger.break();
|
|
@@ -232524,7 +232535,7 @@ var audioWave$1 = {
|
|
|
232524
232535
|
};
|
|
232525
232536
|
|
|
232526
232537
|
var type$s = "components";
|
|
232527
|
-
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";
|
|
232528
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";
|
|
232529
232540
|
var componentsDependencies$7 = [
|
|
232530
232541
|
"device-select",
|
|
@@ -232710,7 +232721,7 @@ var audioWave = {
|
|
|
232710
232721
|
};
|
|
232711
232722
|
|
|
232712
232723
|
var type$d = "components";
|
|
232713
|
-
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";
|
|
232714
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";
|
|
232715
232726
|
var componentsDependencies$3 = [
|
|
232716
232727
|
"device-select",
|
|
@@ -237558,7 +237569,7 @@ const info = new Command()
|
|
|
237558
237569
|
console.log(await getConfig(opts.cwd));
|
|
237559
237570
|
});
|
|
237560
237571
|
|
|
237561
|
-
var version = "0.0.1
|
|
237572
|
+
var version = "0.0.1";
|
|
237562
237573
|
var packageJson = {
|
|
237563
237574
|
version: version};
|
|
237564
237575
|
|
|
@@ -31,6 +31,10 @@ export declare const FRAMEWORKS: {
|
|
|
31
31
|
readonly name: "gatsby";
|
|
32
32
|
readonly label: "Gatsby";
|
|
33
33
|
};
|
|
34
|
+
readonly expo: {
|
|
35
|
+
readonly name: "expo";
|
|
36
|
+
readonly label: "Expo";
|
|
37
|
+
};
|
|
34
38
|
readonly manual: {
|
|
35
39
|
readonly name: "manual";
|
|
36
40
|
readonly label: "Manual";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tavus/cvi-ui",
|
|
3
|
-
"version": "0.0.1
|
|
3
|
+
"version": "0.0.1",
|
|
4
4
|
"description": "A CLI tool for installing and managing CVI components",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -24,7 +24,9 @@
|
|
|
24
24
|
"convert-to-js": "node prepare-scripts/convert-to-js.js",
|
|
25
25
|
"prepare": "npm run convert-to-js && npm run create-templates",
|
|
26
26
|
"clean": "rm -rf jsx-templates dist src/templates",
|
|
27
|
-
"build-all": "npm run clean && npm run prepare && npm run build"
|
|
27
|
+
"build-all": "npm run clean && npm run prepare && npm run build",
|
|
28
|
+
"publish:beta": "npm run build-all && npm publish --tag beta",
|
|
29
|
+
"publish:latest": "npm run build-all && npm publish"
|
|
28
30
|
},
|
|
29
31
|
"main": "dist/index.js",
|
|
30
32
|
"bin": "./dist/index.js",
|
|
@@ -46,7 +46,7 @@ export async function preFlightInit(options: z.infer<typeof initOptionsSchema>)
|
|
|
46
46
|
silent: options.silent,
|
|
47
47
|
}).start();
|
|
48
48
|
const projectInfo = await getProjectInfo(options.cwd);
|
|
49
|
-
if (!projectInfo
|
|
49
|
+
if (!projectInfo) {
|
|
50
50
|
errors[ERRORS.UNSUPPORTED_FRAMEWORK] = true;
|
|
51
51
|
frameworkSpinner?.fail();
|
|
52
52
|
logger.break();
|
|
@@ -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",
|
|
@@ -1,144 +1,138 @@
|
|
|
1
1
|
import path from 'node:path';
|
|
2
2
|
import { FRAMEWORKS, Framework } from '@/src/constants/frameworks';
|
|
3
|
-
import {
|
|
4
|
-
Config,
|
|
5
|
-
RawConfig,
|
|
6
|
-
getConfig,
|
|
7
|
-
resolveConfigPaths,
|
|
8
|
-
} from '@/src/utils/get-config';
|
|
3
|
+
import { Config, RawConfig, getConfig, resolveConfigPaths } from '@/src/utils/get-config';
|
|
9
4
|
import { getPackageInfo } from '@/src/utils/get-package-info';
|
|
10
5
|
import fg from 'fast-glob';
|
|
11
6
|
import fs from 'fs-extra';
|
|
12
7
|
|
|
13
8
|
export type ProjectInfo = {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
9
|
+
framework: Framework;
|
|
10
|
+
isTsx: boolean;
|
|
11
|
+
isSrcDir: boolean;
|
|
17
12
|
};
|
|
18
13
|
|
|
19
|
-
const PROJECT_SHARED_IGNORE = [
|
|
20
|
-
'**/node_modules/**',
|
|
21
|
-
'.next',
|
|
22
|
-
'public',
|
|
23
|
-
'dist',
|
|
24
|
-
'build',
|
|
25
|
-
];
|
|
14
|
+
const PROJECT_SHARED_IGNORE = ['**/node_modules/**', '.next', 'public', 'dist', 'build'];
|
|
26
15
|
|
|
27
16
|
export async function getProjectInfo(cwd: string): Promise<ProjectInfo | null> {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
17
|
+
const [configFiles, isSrcDir, isTsx, packageJson] = await Promise.all([
|
|
18
|
+
fg.glob(
|
|
19
|
+
'**/{next,vite,astro,app}.config.*|gatsby-config.*|composer.json|react-router.config.*',
|
|
20
|
+
{
|
|
21
|
+
cwd,
|
|
22
|
+
deep: 3,
|
|
23
|
+
ignore: PROJECT_SHARED_IGNORE,
|
|
24
|
+
}
|
|
25
|
+
),
|
|
26
|
+
fs.pathExists(path.resolve(cwd, 'src')),
|
|
27
|
+
isTypeScriptProject(cwd),
|
|
28
|
+
getPackageInfo(cwd, false),
|
|
29
|
+
]);
|
|
30
|
+
|
|
31
|
+
const isUsingAppDir = await fs.pathExists(path.resolve(cwd, `${isSrcDir ? 'src/' : ''}app`));
|
|
32
|
+
|
|
33
|
+
const type: ProjectInfo = {
|
|
34
|
+
framework: FRAMEWORKS['manual'],
|
|
35
|
+
isTsx,
|
|
36
|
+
isSrcDir,
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
// Next.js.
|
|
40
|
+
if (configFiles.find((file) => file.startsWith('next.config.'))?.length) {
|
|
41
|
+
type.framework = isUsingAppDir ? FRAMEWORKS['next-app'] : FRAMEWORKS['next-pages'];
|
|
42
|
+
return type;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
// Astro.
|
|
46
|
+
if (configFiles.find((file) => file.startsWith('astro.config.'))?.length) {
|
|
47
|
+
type.framework = FRAMEWORKS['astro'];
|
|
48
|
+
return type;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
// Gatsby.
|
|
52
|
+
if (configFiles.find((file) => file.startsWith('gatsby-config.'))?.length) {
|
|
53
|
+
type.framework = FRAMEWORKS['gatsby'];
|
|
54
|
+
return type;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
// Remix.
|
|
58
|
+
if (Object.keys(packageJson?.dependencies ?? {}).find((dep) => dep.startsWith('@remix-run/'))) {
|
|
59
|
+
type.framework = FRAMEWORKS['remix'];
|
|
60
|
+
return type;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
// TanStack Start.
|
|
64
|
+
if (
|
|
65
|
+
configFiles.find((file) => file.startsWith('app.config.'))?.length &&
|
|
66
|
+
[
|
|
67
|
+
...Object.keys(packageJson?.dependencies ?? {}),
|
|
68
|
+
...Object.keys(packageJson?.devDependencies ?? {}),
|
|
69
|
+
].find((dep) => dep.startsWith('@tanstack/start'))
|
|
70
|
+
) {
|
|
71
|
+
type.framework = FRAMEWORKS['tanstack-start'];
|
|
72
|
+
return type;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
// React Router.
|
|
76
|
+
if (configFiles.find((file) => file.startsWith('react-router.config.'))?.length) {
|
|
77
|
+
type.framework = FRAMEWORKS['react-router'];
|
|
78
|
+
return type;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
// Vite.
|
|
82
|
+
// Some Remix templates also have a vite.config.* file.
|
|
83
|
+
// We'll assume that it got caught by the Remix check above.
|
|
84
|
+
if (configFiles.find((file) => file.startsWith('vite.config.'))?.length) {
|
|
85
|
+
type.framework = FRAMEWORKS['vite'];
|
|
86
|
+
return type;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
// Vinxi-based (such as @tanstack/start and @solidjs/solid-start)
|
|
90
|
+
// They are vite-based, and the same configurations used for Vite should work flawlessly
|
|
91
|
+
const appConfig = configFiles.find((file) => file.startsWith('app.config'));
|
|
92
|
+
if (appConfig?.length) {
|
|
93
|
+
const appConfigContents = await fs.readFile(path.resolve(cwd, appConfig), 'utf8');
|
|
94
|
+
if (appConfigContents.includes('defineConfig')) {
|
|
95
|
+
type.framework = FRAMEWORKS['vite'];
|
|
96
|
+
return type;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
// Expo.
|
|
101
|
+
if (packageJson?.dependencies?.expo) {
|
|
102
|
+
type.framework = FRAMEWORKS['expo'];
|
|
103
|
+
return type;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
return type;
|
|
111
107
|
}
|
|
112
108
|
|
|
113
109
|
export async function isTypeScriptProject(cwd: string) {
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
110
|
+
const files = await fg.glob('tsconfig.*', {
|
|
111
|
+
cwd,
|
|
112
|
+
deep: 1,
|
|
113
|
+
ignore: PROJECT_SHARED_IGNORE,
|
|
114
|
+
});
|
|
119
115
|
|
|
120
|
-
|
|
116
|
+
return files.length > 0;
|
|
121
117
|
}
|
|
122
118
|
|
|
123
119
|
export async function getProjectConfig(
|
|
124
|
-
|
|
125
|
-
|
|
120
|
+
cwd: string,
|
|
121
|
+
defaultProjectInfo: ProjectInfo | null = null
|
|
126
122
|
): Promise<Config | null> {
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
return await resolveConfigPaths(cwd, config);
|
|
123
|
+
// Check for existing component config.
|
|
124
|
+
const [existingConfig, projectInfo] = await Promise.all([
|
|
125
|
+
getConfig(cwd),
|
|
126
|
+
!defaultProjectInfo ? getProjectInfo(cwd) : Promise.resolve(defaultProjectInfo),
|
|
127
|
+
]);
|
|
128
|
+
|
|
129
|
+
if (existingConfig) {
|
|
130
|
+
return existingConfig;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
const config: RawConfig = {
|
|
134
|
+
tsx: !!projectInfo?.isTsx,
|
|
135
|
+
};
|
|
136
|
+
|
|
137
|
+
return await resolveConfigPaths(cwd, config);
|
|
144
138
|
}
|