@tavus/cvi-ui 0.0.1-beta.2 → 0.0.1-beta.3
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/README.md +44 -33
- package/dev-components/components/README.md +62 -1
- package/dev-components/components/audio-wave/audio-wave.module.css +33 -0
- package/dev-components/components/audio-wave/index.tsx +55 -0
- package/dev-components/components/controls/controls.module.css +75 -73
- package/dev-components/components/controls/index.tsx +2 -2
- package/dev-components/components/conversation-01/conversation.module.css +222 -0
- package/dev-components/components/conversation-01/index.tsx +180 -0
- package/dev-components/components/{hair-check → hair-check-01}/hair-check.module.css +2 -1
- package/dev-components/components/{hair-check → hair-check-01}/index.tsx +1 -1
- package/dist/index.js +412 -104
- package/dist/types/templates/components.d.ts +32 -2
- package/dist/types/templates/jsx/index.d.ts +11 -1
- package/dist/types/templates/tsx/index.d.ts +11 -1
- package/dist/types/utils/version-utils.d.ts +3 -0
- package/package.json +6 -4
- package/src/templates/components.ts +18 -0
- package/src/templates/index.ts +2 -0
- package/src/templates/jsx/components/audio-wave.json +5 -0
- package/src/templates/jsx/components/controls.json +10 -0
- package/src/templates/jsx/components/conversation-01.json +11 -0
- package/src/templates/jsx/components/cvi-provider.json +5 -0
- package/src/templates/jsx/components/hair-check-01.json +10 -0
- package/src/templates/jsx/hooks/cvi-events-hooks.json +5 -0
- package/src/templates/jsx/hooks/use-cvi-call.json +5 -0
- package/src/templates/jsx/hooks/use-local-camera.json +5 -0
- package/src/templates/jsx/hooks/use-local-microphone.json +5 -0
- package/src/templates/jsx/hooks/use-local-screenshare.json +5 -0
- package/src/templates/jsx/hooks/use-remote-participant-ids.json +5 -0
- package/src/templates/jsx/hooks/use-replica-ids.json +5 -0
- package/src/templates/jsx/hooks/use-request-permissions.json +5 -0
- package/src/templates/jsx/hooks/use-start-haircheck.json +5 -0
- package/src/templates/jsx/index.ts +14 -0
- package/src/templates/tsx/components/audio-wave.json +5 -0
- package/src/templates/tsx/components/controls.json +10 -0
- package/src/templates/tsx/components/conversation-01.json +11 -0
- package/src/templates/tsx/components/cvi-provider.json +5 -0
- package/src/templates/tsx/components/hair-check-01.json +10 -0
- package/src/templates/tsx/hooks/cvi-events-hooks.json +5 -0
- package/src/templates/tsx/hooks/use-cvi-call.json +5 -0
- package/src/templates/tsx/hooks/use-local-camera.json +5 -0
- package/src/templates/tsx/hooks/use-local-microphone.json +5 -0
- package/src/templates/tsx/hooks/use-local-screenshare.json +5 -0
- package/src/templates/tsx/hooks/use-remote-participant-ids.json +5 -0
- package/src/templates/tsx/hooks/use-replica-ids.json +5 -0
- package/src/templates/tsx/hooks/use-request-permissions.json +8 -0
- package/src/templates/tsx/hooks/use-start-haircheck.json +5 -0
- package/src/templates/tsx/index.ts +14 -0
- package/src/utils/resolve-components-tree.ts +59 -2
- package/src/utils/update-files.ts +38 -10
- package/src/utils/version-utils.ts +26 -0
- /package/dev-components/hooks/{use-cvi-call.ts → use-cvi-call.tsx} +0 -0
- /package/dev-components/hooks/{use-local-camera.ts → use-local-camera.tsx} +0 -0
- /package/dev-components/hooks/{use-local-microphone.ts → use-local-microphone.tsx} +0 -0
- /package/dev-components/hooks/{use-local-screenshare.ts → use-local-screenshare.tsx} +0 -0
- /package/dev-components/hooks/{use-remote-participant-ids.ts → use-remote-participant-ids.tsx} +0 -0
- /package/dev-components/hooks/{use-replica-ids.ts → use-replica-ids.tsx} +0 -0
- /package/dev-components/hooks/{use-request-permissions.ts → use-request-permissions.tsx} +0 -0
- /package/dev-components/hooks/{use-start-haircheck.ts → use-start-haircheck.tsx} +0 -0
package/dist/index.js
CHANGED
|
@@ -1489,11 +1489,11 @@ function requireSnippet () {
|
|
|
1489
1489
|
return snippet;
|
|
1490
1490
|
}
|
|
1491
1491
|
|
|
1492
|
-
var type$
|
|
1492
|
+
var type$s;
|
|
1493
1493
|
var hasRequiredType;
|
|
1494
1494
|
|
|
1495
1495
|
function requireType () {
|
|
1496
|
-
if (hasRequiredType) return type$
|
|
1496
|
+
if (hasRequiredType) return type$s;
|
|
1497
1497
|
hasRequiredType = 1;
|
|
1498
1498
|
|
|
1499
1499
|
var YAMLException = requireException();
|
|
@@ -1559,8 +1559,8 @@ function requireType () {
|
|
|
1559
1559
|
}
|
|
1560
1560
|
}
|
|
1561
1561
|
|
|
1562
|
-
type$
|
|
1563
|
-
return type$
|
|
1562
|
+
type$s = Type;
|
|
1563
|
+
return type$s;
|
|
1564
1564
|
}
|
|
1565
1565
|
|
|
1566
1566
|
var schema;
|
|
@@ -217864,7 +217864,7 @@ const wrapAnsi256 = (offset = 0) => code => `\u001B[${38 + offset};5;${code}m`;
|
|
|
217864
217864
|
|
|
217865
217865
|
const wrapAnsi16m = (offset = 0) => (red, green, blue) => `\u001B[${38 + offset};2;${red};${green};${blue}m`;
|
|
217866
217866
|
|
|
217867
|
-
const styles$
|
|
217867
|
+
const styles$t = {
|
|
217868
217868
|
modifier: {
|
|
217869
217869
|
reset: [0, 0],
|
|
217870
217870
|
// 21 isn't widely supported and 22 does the same thing
|
|
@@ -217923,49 +217923,49 @@ const styles$9 = {
|
|
|
217923
217923
|
},
|
|
217924
217924
|
};
|
|
217925
217925
|
|
|
217926
|
-
Object.keys(styles$
|
|
217927
|
-
const foregroundColorNames = Object.keys(styles$
|
|
217928
|
-
const backgroundColorNames = Object.keys(styles$
|
|
217926
|
+
Object.keys(styles$t.modifier);
|
|
217927
|
+
const foregroundColorNames = Object.keys(styles$t.color);
|
|
217928
|
+
const backgroundColorNames = Object.keys(styles$t.bgColor);
|
|
217929
217929
|
[...foregroundColorNames, ...backgroundColorNames];
|
|
217930
217930
|
|
|
217931
217931
|
function assembleStyles() {
|
|
217932
217932
|
const codes = new Map();
|
|
217933
217933
|
|
|
217934
|
-
for (const [groupName, group] of Object.entries(styles$
|
|
217934
|
+
for (const [groupName, group] of Object.entries(styles$t)) {
|
|
217935
217935
|
for (const [styleName, style] of Object.entries(group)) {
|
|
217936
|
-
styles$
|
|
217936
|
+
styles$t[styleName] = {
|
|
217937
217937
|
open: `\u001B[${style[0]}m`,
|
|
217938
217938
|
close: `\u001B[${style[1]}m`,
|
|
217939
217939
|
};
|
|
217940
217940
|
|
|
217941
|
-
group[styleName] = styles$
|
|
217941
|
+
group[styleName] = styles$t[styleName];
|
|
217942
217942
|
|
|
217943
217943
|
codes.set(style[0], style[1]);
|
|
217944
217944
|
}
|
|
217945
217945
|
|
|
217946
|
-
Object.defineProperty(styles$
|
|
217946
|
+
Object.defineProperty(styles$t, groupName, {
|
|
217947
217947
|
value: group,
|
|
217948
217948
|
enumerable: false,
|
|
217949
217949
|
});
|
|
217950
217950
|
}
|
|
217951
217951
|
|
|
217952
|
-
Object.defineProperty(styles$
|
|
217952
|
+
Object.defineProperty(styles$t, 'codes', {
|
|
217953
217953
|
value: codes,
|
|
217954
217954
|
enumerable: false,
|
|
217955
217955
|
});
|
|
217956
217956
|
|
|
217957
|
-
styles$
|
|
217958
|
-
styles$
|
|
217957
|
+
styles$t.color.close = '\u001B[39m';
|
|
217958
|
+
styles$t.bgColor.close = '\u001B[49m';
|
|
217959
217959
|
|
|
217960
|
-
styles$
|
|
217961
|
-
styles$
|
|
217962
|
-
styles$
|
|
217963
|
-
styles$
|
|
217964
|
-
styles$
|
|
217965
|
-
styles$
|
|
217960
|
+
styles$t.color.ansi = wrapAnsi16();
|
|
217961
|
+
styles$t.color.ansi256 = wrapAnsi256();
|
|
217962
|
+
styles$t.color.ansi16m = wrapAnsi16m();
|
|
217963
|
+
styles$t.bgColor.ansi = wrapAnsi16(ANSI_BACKGROUND_OFFSET);
|
|
217964
|
+
styles$t.bgColor.ansi256 = wrapAnsi256(ANSI_BACKGROUND_OFFSET);
|
|
217965
|
+
styles$t.bgColor.ansi16m = wrapAnsi16m(ANSI_BACKGROUND_OFFSET);
|
|
217966
217966
|
|
|
217967
217967
|
// From https://github.com/Qix-/color-convert/blob/3f0e0d4e92e235796ccb17f6e85c72094a651f49/conversions.js
|
|
217968
|
-
Object.defineProperties(styles$
|
|
217968
|
+
Object.defineProperties(styles$t, {
|
|
217969
217969
|
rgbToAnsi256: {
|
|
217970
217970
|
value(red, green, blue) {
|
|
217971
217971
|
// We use the extended greyscale palette here, with the exception of
|
|
@@ -218015,7 +218015,7 @@ function assembleStyles() {
|
|
|
218015
218015
|
enumerable: false,
|
|
218016
218016
|
},
|
|
218017
218017
|
hexToAnsi256: {
|
|
218018
|
-
value: hex => styles$
|
|
218018
|
+
value: hex => styles$t.rgbToAnsi256(...styles$t.hexToRgb(hex)),
|
|
218019
218019
|
enumerable: false,
|
|
218020
218020
|
},
|
|
218021
218021
|
ansi256ToAnsi: {
|
|
@@ -218064,16 +218064,16 @@ function assembleStyles() {
|
|
|
218064
218064
|
enumerable: false,
|
|
218065
218065
|
},
|
|
218066
218066
|
rgbToAnsi: {
|
|
218067
|
-
value: (red, green, blue) => styles$
|
|
218067
|
+
value: (red, green, blue) => styles$t.ansi256ToAnsi(styles$t.rgbToAnsi256(red, green, blue)),
|
|
218068
218068
|
enumerable: false,
|
|
218069
218069
|
},
|
|
218070
218070
|
hexToAnsi: {
|
|
218071
|
-
value: hex => styles$
|
|
218071
|
+
value: hex => styles$t.ansi256ToAnsi(styles$t.hexToAnsi256(hex)),
|
|
218072
218072
|
enumerable: false,
|
|
218073
218073
|
},
|
|
218074
218074
|
});
|
|
218075
218075
|
|
|
218076
|
-
return styles$
|
|
218076
|
+
return styles$t;
|
|
218077
218077
|
}
|
|
218078
218078
|
|
|
218079
218079
|
const ansiStyles = assembleStyles();
|
|
@@ -218155,7 +218155,7 @@ const levelMapping = [
|
|
|
218155
218155
|
'ansi16m',
|
|
218156
218156
|
];
|
|
218157
218157
|
|
|
218158
|
-
const styles$
|
|
218158
|
+
const styles$s = Object.create(null);
|
|
218159
218159
|
|
|
218160
218160
|
const applyOptions = (object, options = {}) => {
|
|
218161
218161
|
if (options.level && !(Number.isInteger(options.level) && options.level >= 0 && options.level <= 3)) {
|
|
@@ -218183,7 +218183,7 @@ function createChalk(options) {
|
|
|
218183
218183
|
Object.setPrototypeOf(createChalk.prototype, Function.prototype);
|
|
218184
218184
|
|
|
218185
218185
|
for (const [styleName, style] of Object.entries(ansiStyles)) {
|
|
218186
|
-
styles$
|
|
218186
|
+
styles$s[styleName] = {
|
|
218187
218187
|
get() {
|
|
218188
218188
|
const builder = createBuilder(this, createStyler(style.open, style.close, this[STYLER]), this[IS_EMPTY]);
|
|
218189
218189
|
Object.defineProperty(this, styleName, {value: builder});
|
|
@@ -218192,7 +218192,7 @@ for (const [styleName, style] of Object.entries(ansiStyles)) {
|
|
|
218192
218192
|
};
|
|
218193
218193
|
}
|
|
218194
218194
|
|
|
218195
|
-
styles$
|
|
218195
|
+
styles$s.visible = {
|
|
218196
218196
|
get() {
|
|
218197
218197
|
const builder = createBuilder(this, this[STYLER], true);
|
|
218198
218198
|
Object.defineProperty(this, 'visible', {value: builder});
|
|
@@ -218223,7 +218223,7 @@ const getModelAnsi = (model, level, type, ...arguments_) => {
|
|
|
218223
218223
|
const usedModels = ['rgb', 'hex', 'ansi256'];
|
|
218224
218224
|
|
|
218225
218225
|
for (const model of usedModels) {
|
|
218226
|
-
styles$
|
|
218226
|
+
styles$s[model] = {
|
|
218227
218227
|
get() {
|
|
218228
218228
|
const {level} = this;
|
|
218229
218229
|
return function (...arguments_) {
|
|
@@ -218234,7 +218234,7 @@ for (const model of usedModels) {
|
|
|
218234
218234
|
};
|
|
218235
218235
|
|
|
218236
218236
|
const bgModel = 'bg' + model[0].toUpperCase() + model.slice(1);
|
|
218237
|
-
styles$
|
|
218237
|
+
styles$s[bgModel] = {
|
|
218238
218238
|
get() {
|
|
218239
218239
|
const {level} = this;
|
|
218240
218240
|
return function (...arguments_) {
|
|
@@ -218246,7 +218246,7 @@ for (const model of usedModels) {
|
|
|
218246
218246
|
}
|
|
218247
218247
|
|
|
218248
218248
|
const proto = Object.defineProperties(() => {}, {
|
|
218249
|
-
...styles$
|
|
218249
|
+
...styles$s,
|
|
218250
218250
|
level: {
|
|
218251
218251
|
enumerable: true,
|
|
218252
218252
|
get() {
|
|
@@ -218328,7 +218328,7 @@ const applyStyle = (self, string) => {
|
|
|
218328
218328
|
return openAll + string + closeAll;
|
|
218329
218329
|
};
|
|
218330
218330
|
|
|
218331
|
-
Object.defineProperties(createChalk.prototype, styles$
|
|
218331
|
+
Object.defineProperties(createChalk.prototype, styles$s);
|
|
218332
218332
|
|
|
218333
218333
|
const chalk = createChalk();
|
|
218334
218334
|
createChalk({level: stderrColor ? stderrColor.level : 0});
|
|
@@ -232514,107 +232514,313 @@ function requirePrompts () {
|
|
|
232514
232514
|
var promptsExports = requirePrompts();
|
|
232515
232515
|
var prompts = /*@__PURE__*/getDefaultExportFromCjs$1(promptsExports);
|
|
232516
232516
|
|
|
232517
|
-
var type$
|
|
232518
|
-
var content$7 = "import React, { memo } from \"react\";\nimport { useDevices } from \"@daily-co/daily-react\";\nimport { useLocalCamera } from \"../../hooks/use-local-camera\";\nimport { useLocalMicrophone } from \"../../hooks/use-local-microphone\";\nimport { useLocalScreenshare } from \"../../hooks/use-local-screenshare\";\nimport styles from \"./controls.module.css\";\n\nexport const SelectDevice = ({\n value,\n devices,\n disabled,\n onChange,\n}: {\n value: string | undefined;\n devices: { device: MediaDeviceInfo }[];\n disabled: boolean;\n onChange: (value: string) => void;\n}) => {\n return (\n <div className={styles.selectDeviceContainer}>\n <select\n value={value}\n onChange={(e) => onChange(e.target.value)}\n disabled={disabled}\n className={styles.selectDevice}\n >\n {devices.map(({ device }) => (\n <option key={device.deviceId} value={device.deviceId}>\n {device.label}\n </option>\n ))}\n </select>\n <span className={styles.selectArrow}>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#fff\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n </span>\n </div>\n );\n};\n\nexport const MicrophoneButton = memo(() => {\n const { onToggleMicrophone, isMicReady, isMicMuted } = useLocalMicrophone();\n const { microphones, currentMic, setMicrophone } = useDevices();\n\n return (\n <div className={styles.deviceButtonContainer}>\n <button\n type=\"button\"\n onClick={onToggleMicrophone}\n disabled={!isMicReady}\n className={styles.deviceButton}\n >\n <span className={styles.deviceButtonIcon}>\n {isMicMuted || !isMicReady ? (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n role=\"img\"\n aria-label=\"Microphone Muted\"\n >\n <path\n d=\"M12 18C10.1435 18 8.36301 17.2625 7.05025 15.9497C5.7375 14.637 5 12.8565 5 11V10M12 18C13.8565 18 15.637 17.2625 16.9497 15.9497C18.2625 14.637 18.1339 14.0992 18.1339 14.0992M12 18V21\"\n stroke=\"#020617\"\n strokeWidth=\"1.66667\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <rect\n x=\"1.30225\"\n y=\"3\"\n width=\"26\"\n height=\"2.24738\"\n rx=\"1.12369\"\n transform=\"rotate(30 1.30225 3)\"\n fill=\"#020617\"\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M9 9.39031V11C9 11.7956 9.31607 12.5587 9.87868 13.1213C10.4413 13.6839 11.2044 14 12 14C12.7956 14 13.5587 13.6839 14.1213 13.1213C14.2829 12.9597 14.4242 12.7816 14.5435 12.5908L9 9.39031ZM15 7.71466V6C15 5.20435 14.6839 4.44129 14.1213 3.87868C13.5587 3.31607 12.7956 3 12 3C11.2044 3 10.4413 3.31607 9.87868 3.87868C9.69528 4.06208 9.53807 4.26678 9.40948 4.48697L15 7.71466Z\"\n fill=\"#020617\"\n />\n <path\n d=\"M9 9.39031L9.41667 8.66862C9.15883 8.51976 8.84117 8.51976 8.58333 8.66862C8.3255 8.81748 8.16667 9.09259 8.16667 9.39031H9ZM9.87868 13.1213L9.28942 13.7106H9.28942L9.87868 13.1213ZM14.1213 13.1213L14.7106 13.7106L14.7106 13.7106L14.1213 13.1213ZM14.5435 12.5908L15.25 13.0327C15.3699 12.841 15.4068 12.6088 15.3521 12.3894C15.2974 12.17 15.156 11.9822 14.9601 11.8692L14.5435 12.5908ZM15 7.71466L14.5833 8.43635C14.8412 8.58521 15.1588 8.58521 15.4167 8.43635C15.6745 8.28749 15.8333 8.01238 15.8333 7.71466H15ZM14.1213 3.87868L14.7106 3.28942L14.7106 3.28942L14.1213 3.87868ZM9.87868 3.87868L9.28942 3.28942L9.28942 3.28942L9.87868 3.87868ZM9.40948 4.48697L8.68988 4.06671C8.57806 4.25818 8.54715 4.48633 8.604 4.70065C8.66086 4.91497 8.80078 5.09779 8.99281 5.20866L9.40948 4.48697ZM9.83333 11V9.39031H8.16667V11H9.83333ZM10.4679 12.5321C10.0616 12.1257 9.83333 11.5746 9.83333 11H8.16667C8.16667 12.0167 8.57053 12.9917 9.28942 13.7106L10.4679 12.5321ZM12 13.1667C11.4254 13.1667 10.8743 12.9384 10.4679 12.5321L9.28942 13.7106C10.0083 14.4295 10.9833 14.8333 12 14.8333V13.1667ZM13.5321 12.5321C13.1257 12.9384 12.5746 13.1667 12 13.1667V14.8333C13.0167 14.8333 13.9917 14.4295 14.7106 13.7106L13.5321 12.5321ZM13.837 12.149C13.7508 12.2867 13.6488 12.4153 13.5321 12.5321L14.7106 13.7106C14.917 13.5041 15.0976 13.2764 15.25 13.0327L13.837 12.149ZM14.9601 11.8692L9.41667 8.66862L8.58333 10.112L14.1268 13.3125L14.9601 11.8692ZM14.1667 6V7.71466H15.8333V6H14.1667ZM13.5321 4.46794C13.9384 4.87426 14.1667 5.42536 14.1667 6H15.8333C15.8333 4.98334 15.4295 4.00831 14.7106 3.28942L13.5321 4.46794ZM12 3.83333C12.5746 3.83333 13.1257 4.06161 13.5321 4.46794L14.7106 3.28942C13.9917 2.57053 13.0167 2.16667 12 2.16667V3.83333ZM10.4679 4.46794C10.8743 4.06161 11.4254 3.83333 12 3.83333V2.16667C10.9833 2.16667 10.0083 2.57053 9.28942 3.28942L10.4679 4.46794ZM10.1291 4.90724C10.2219 4.74824 10.3354 4.60042 10.4679 4.46794L9.28942 3.28942C9.05511 3.52374 8.85421 3.78533 8.68988 4.06671L10.1291 4.90724ZM8.99281 5.20866L14.5833 8.43635L15.4167 6.99298L9.82615 3.76529L8.99281 5.20866Z\"\n fill=\"#020617\"\n />\n </svg>\n ) : (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n role=\"img\"\n aria-label=\"Microphone\"\n >\n <path\n d=\"M9 6C9 5.20435 9.31607 4.44129 9.87868 3.87868C10.4413 3.31607 11.2044 3 12 3C12.7956 3 13.5587 3.31607 14.1213 3.87868C14.6839 4.44129 15 5.20435 15 6V11C15 11.7956 14.6839 12.5587 14.1213 13.1213C13.5587 13.6839 12.7956 14 12 14C11.2044 14 10.4413 13.6839 9.87868 13.1213C9.31607 12.5587 9 11.7956 9 11V6Z\"\n fill=\"#020617\"\n stroke=\"#020617\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M12 18C10.1435 18 8.36301 17.2625 7.05025 15.9497C5.7375 14.637 5 12.8565 5 11V10M12 18C13.8565 18 15.637 17.2625 16.9497 15.9497C18.2625 14.637 19 12.8565 19 11V10M12 18V21\"\n stroke=\"#020617\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n )}\n </span>\n <span className={styles.srOnly}>Microphone</span>\n </button>\n <SelectDevice\n value={currentMic?.device?.deviceId}\n devices={microphones || []}\n disabled={!isMicReady}\n onChange={(val) => setMicrophone(val)}\n />\n </div>\n );\n});\n\nMicrophoneButton.displayName = \"MicrophoneButton\";\n\nexport const CameraButton = memo(() => {\n const { onToggleCamera, isCamReady, isCamMuted } = useLocalCamera();\n const { currentCam, cameras, setCamera } = useDevices();\n\n\n return (\n <div className={styles.deviceButtonContainer}>\n <button\n type=\"button\"\n onClick={onToggleCamera}\n disabled={!isCamReady || !currentCam}\n className={styles.deviceButton}\n >\n <span>\n {isCamMuted ? (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n role=\"img\"\n aria-label=\"Camera Muted\"\n >\n <g clipPath=\"url(#clip0_7082_14220)\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M3.19874 5.60093C3.08628 5.68537 2.97928 5.77808 2.87868 5.87868C2.31607 6.44129 2 7.20435 2 8V16C2 16.7956 2.31607 17.5587 2.87868 18.1213C3.44129 18.6839 4.20435 19 5 19H15C15.7956 19 16.5587 18.6839 17.1213 18.1213C17.6839 17.5587 18 16.7956 18 16V15.048C17.7787 14.8204 17.5304 14.6189 17.2595 14.4485L3.19874 5.60093ZM22 12.655V8C22 7.80225 21.9413 7.60895 21.8314 7.44454C21.7215 7.28013 21.5654 7.15199 21.3827 7.07632C21.2 7.00065 20.9989 6.98085 20.805 7.01942C20.611 7.05798 20.4329 7.15319 20.293 7.293L18 9.586V8C18 7.20435 17.6839 6.44129 17.1213 5.87868C16.5587 5.31607 15.7956 5 15 5H8.7412L22 12.655Z\"\n fill=\"#020617\"\n />\n <rect\n x=\"0.777222\"\n y=\"2.64844\"\n width=\"26.7988\"\n height=\"2.24738\"\n rx=\"1.12369\"\n transform=\"rotate(30 0.777222 2.64844)\"\n fill=\"#020617\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_7082_14220\">\n <rect width=\"24\" height=\"24\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n ) : (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n role=\"img\"\n aria-label=\"Camera\"\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M5 5C4.20435 5 3.44129 5.31607 2.87868 5.87868C2.31607 6.44129 2 7.20435 2 8V16C2 16.7956 2.31607 17.5587 2.87868 18.1213C3.44129 18.6839 4.20435 19 5 19H15C15.7956 19 16.5587 18.6839 17.1213 18.1213C17.6839 17.5587 18 16.7956 18 16V14.414L20.293 16.707C20.4329 16.8468 20.611 16.942 20.805 16.9806C20.9989 17.0192 21.2 16.9993 21.3827 16.9237C21.5654 16.848 21.7215 16.7199 21.8314 16.5555C21.9413 16.391 22 16.1978 22 16V8C22 7.80225 21.9413 7.60895 21.8314 7.44454C21.7215 7.28013 21.5654 7.15199 21.3827 7.07632C21.2 7.00065 20.9989 6.98085 20.805 7.01942C20.611 7.05798 20.4329 7.15319 20.293 7.293L18 9.586V8C18 7.20435 17.6839 6.44129 17.1213 5.87868C16.5587 5.31607 15.7956 5 15 5H5Z\"\n fill=\"#020617\"\n />\n </svg>\n )}\n </span>\n <span className={styles.srOnly}>Camera</span>\n </button>\n <SelectDevice\n value={currentCam?.device?.deviceId}\n devices={cameras || []}\n disabled={!isCamReady}\n onChange={(val) => setCamera(val)}\n />\n </div>\n );\n});\n\nCameraButton.displayName = \"CameraButton\";\n\nexport const ScreenShareButton = memo(() => {\n const { onToggleScreenshare, isScreenSharing } = useLocalScreenshare();\n\n return (\n <button\n type=\"button\"\n onClick={onToggleScreenshare}\n className={styles.deviceButton}\n >\n <span>\n {isScreenSharing ? (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n role=\"img\"\n aria-label=\"Screen Share\"\n >\n <path\n d=\"M21.0008 19C21.2557 19.0003 21.5009 19.0979 21.6862 19.2728C21.8715 19.4478 21.9831 19.687 21.998 19.9414C22.013 20.1958 21.9302 20.4464 21.7666 20.6418C21.603 20.8373 21.3709 20.9629 21.1178 20.993L21.0008 21H3.00085C2.74597 20.9997 2.50081 20.9021 2.31548 20.7272C2.13014 20.5522 2.01861 20.313 2.00367 20.0586C1.98874 19.8042 2.07152 19.5536 2.23511 19.3582C2.3987 19.1627 2.63075 19.0371 2.88385 19.007L3.00085 19H21.0008ZM19.0008 4C19.5054 3.99984 19.9914 4.19041 20.3614 4.5335C20.7314 4.87659 20.958 5.34684 20.9958 5.85L21.0008 6V16C21.001 16.5046 20.8104 16.9906 20.4673 17.3605C20.1243 17.7305 19.654 17.9572 19.1508 17.995L19.0008 18H5.00085C4.49627 18.0002 4.01028 17.8096 3.6403 17.4665C3.27032 17.1234 3.04369 16.6532 3.00585 16.15L3.00085 16V6C3.00069 5.49542 3.19125 5.00943 3.53434 4.63945C3.87743 4.26947 4.34769 4.04284 4.85085 4.005L5.00085 4H19.0008Z\"\n fill=\"#2D65FF\"\n />\n </svg>\n ) : (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n role=\"img\"\n aria-label=\"Screen Share\"\n >\n <path\n d=\"M20.9999 19C21.2547 19.0003 21.4999 19.0979 21.6852 19.2728C21.8706 19.4478 21.9821 19.687 21.997 19.9414C22.012 20.1958 21.9292 20.4464 21.7656 20.6418C21.602 20.8373 21.37 20.9629 21.1169 20.993L20.9999 21H2.99987C2.74499 20.9997 2.49984 20.9021 2.3145 20.7272C2.12916 20.5522 2.01763 20.313 2.0027 20.0586C1.98776 19.8042 2.07054 19.5536 2.23413 19.3582C2.39772 19.1627 2.62977 19.0371 2.88287 19.007L2.99987 19H20.9999ZM18.9999 4C19.5044 3.99984 19.9904 4.19041 20.3604 4.5335C20.7304 4.87659 20.957 5.34684 20.9949 5.85L20.9999 6V16C21 16.5046 20.8095 16.9906 20.4664 17.3605C20.1233 17.7305 19.653 17.9572 19.1499 17.995L18.9999 18H4.99987C4.49529 18.0002 4.0093 17.8096 3.63932 17.4665C3.26934 17.1234 3.04271 16.6532 3.00487 16.15L2.99987 16V6C2.99971 5.49542 3.19028 5.00943 3.53337 4.63945C3.87646 4.26947 4.34671 4.04284 4.84987 4.005L4.99987 4H18.9999Z\"\n fill=\"white\"\n />\n </svg>\n )}\n </span>\n </button>\n );\n});\n\nScreenShareButton.displayName = \"ScreenShareButton\";";
|
|
232519
|
-
var styles$
|
|
232520
|
-
var
|
|
232517
|
+
var type$r = "components";
|
|
232518
|
+
var content$r = "import React, { useCallback, useRef, memo } from \"react\";\nimport { useActiveSpeakerId } from \"@daily-co/daily-react\";\nimport { useAudioLevelObserver } from \"@daily-co/daily-react\";\nimport styles from \"./audio-wave.module.css\";\n\nexport const AudioWave = memo(({ id }: { id: string }) => {\n\tconst activeSpeakerId = useActiveSpeakerId();\n\tconst isActiveSpeaker = activeSpeakerId === id;\n\n\tconst leftBarRef = useRef<HTMLDivElement>(null);\n\tconst centerBarRef = useRef<HTMLDivElement>(null);\n\tconst rightBarRef = useRef<HTMLDivElement>(null);\n\tconst animationFrameRef = useRef<number | undefined>(undefined);\n\n\tuseAudioLevelObserver(\n\t\tid,\n\t\tuseCallback((volume) => {\n\t\t\t// Cancel any pending animation frame to prevent accumulation\n\t\t\tif (animationFrameRef.current) {\n\t\t\t\tcancelAnimationFrame(animationFrameRef.current);\n\t\t\t}\n\n\t\t\t// Use requestAnimationFrame to batch DOM updates\n\t\t\tanimationFrameRef.current = requestAnimationFrame(() => {\n\t\t\t\tconst scaledVolume = Number(Math.max(0.01, volume).toFixed(2));\n\t\t\t\tif (leftBarRef.current && centerBarRef.current && rightBarRef.current) {\n\t\t\t\t\tleftBarRef.current.style.height = `${20 + scaledVolume * 40}%`;\n\t\t\t\t\tcenterBarRef.current.style.height = `${20 + scaledVolume * 130}%`;\n\t\t\t\t\trightBarRef.current.style.height = `${20 + scaledVolume * 40}%`;\n\t\t\t\t}\n\t\t\t});\n\t\t}, []),\n\t);\n\n\treturn (\n\t\t<div className={styles.container}>\n\t\t\t<div className={styles.waveContainer}>\n\t\t\t\t<div\n\t\t\t\t\tref={leftBarRef}\n\t\t\t\t\tclassName={`${styles.bar} ${!isActiveSpeaker ? styles.barInactive : ''}`}\n\t\t\t\t/>\n\t\t\t\t<div\n\t\t\t\t\tref={centerBarRef}\n\t\t\t\t\tclassName={`${styles.bar} ${!isActiveSpeaker ? styles.barInactive : ''}`}\n\t\t\t\t/>\n\t\t\t\t<div\n\t\t\t\t\tref={rightBarRef}\n\t\t\t\t\tclassName={`${styles.bar} ${!isActiveSpeaker ? styles.barInactive : ''}`}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n});\n\nAudioWave.displayName = 'AudioWave';\n";
|
|
232519
|
+
var styles$r = ".container {\n\toverflow: hidden;\n\tborder: 1px solid white;\n\twidth: 1.5rem;\n\theight: 1.5rem;\n\tborder-radius: 9999px;\n\twill-change: transform;\n\ttransform: translateZ(0);\n}\n\n.waveContainer {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tgap: 0.125rem;\n\twidth: 100%;\n\theight: 100%;\n}\n\n.bar {\n\twidth: 0.25rem;\n\theight: 0.25rem;\n\tbackground-color: white;\n\tborder-radius: 9999px;\n\ttransition: height 200ms ease-out;\n\twill-change: height;\n\ttransform: translateZ(0);\n}\n\n.barInactive {\n\twidth: 0.25rem !important;\n\theight: 0.25rem !important;\n}\n";
|
|
232520
|
+
var audioWave$1 = {
|
|
232521
|
+
type: type$r,
|
|
232522
|
+
content: content$r,
|
|
232523
|
+
styles: styles$r
|
|
232524
|
+
};
|
|
232525
|
+
|
|
232526
|
+
var type$q = "components";
|
|
232527
|
+
var content$q = "import React, { memo } from \"react\";\nimport { useDevices } from \"@daily-co/daily-react\";\nimport { useLocalCamera } from \"../../hooks/use-local-camera\";\nimport { useLocalMicrophone } from \"../../hooks/use-local-microphone\";\nimport { useLocalScreenshare } from \"../../hooks/use-local-screenshare\";\nimport styles from \"./controls.module.css\";\n\nexport const SelectDevice = ({\n value,\n devices,\n disabled,\n onChange,\n}: {\n value: string | undefined;\n devices: { device: MediaDeviceInfo }[];\n disabled: boolean;\n onChange: (value: string) => void;\n}) => {\n return (\n <div className={styles.selectDeviceContainer}>\n <select\n value={value}\n onChange={(e) => onChange(e.target.value)}\n disabled={disabled}\n className={styles.selectDevice}\n >\n {devices.map(({ device }) => (\n <option key={device.deviceId} value={device.deviceId}>\n {device.label}\n </option>\n ))}\n </select>\n <span className={styles.selectArrow}>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#fff\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n </span>\n </div>\n );\n};\n\nexport const MicrophoneButton = memo(() => {\n const { onToggleMicrophone, isMicReady, isMicMuted } = useLocalMicrophone();\n const { microphones, currentMic, setMicrophone } = useDevices();\n\n return (\n <div className={styles.deviceButtonContainer}>\n <button\n type=\"button\"\n onClick={onToggleMicrophone}\n disabled={!isMicReady}\n className={styles.deviceButton}\n >\n <span className={styles.deviceButtonIcon}>\n {isMicMuted || !isMicReady ? (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n role=\"img\"\n aria-label=\"Microphone Muted\"\n >\n <path\n d=\"M12 18C10.1435 18 8.36301 17.2625 7.05025 15.9497C5.7375 14.637 5 12.8565 5 11V10M12 18C13.8565 18 15.637 17.2625 16.9497 15.9497C18.2625 14.637 18.1339 14.0992 18.1339 14.0992M12 18V21\"\n stroke=\"#020617\"\n strokeWidth=\"1.66667\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <rect\n x=\"1.30225\"\n y=\"3\"\n width=\"26\"\n height=\"2.24738\"\n rx=\"1.12369\"\n transform=\"rotate(30 1.30225 3)\"\n fill=\"#020617\"\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M9 9.39031V11C9 11.7956 9.31607 12.5587 9.87868 13.1213C10.4413 13.6839 11.2044 14 12 14C12.7956 14 13.5587 13.6839 14.1213 13.1213C14.2829 12.9597 14.4242 12.7816 14.5435 12.5908L9 9.39031ZM15 7.71466V6C15 5.20435 14.6839 4.44129 14.1213 3.87868C13.5587 3.31607 12.7956 3 12 3C11.2044 3 10.4413 3.31607 9.87868 3.87868C9.69528 4.06208 9.53807 4.26678 9.40948 4.48697L15 7.71466Z\"\n fill=\"#020617\"\n />\n <path\n d=\"M9 9.39031L9.41667 8.66862C9.15883 8.51976 8.84117 8.51976 8.58333 8.66862C8.3255 8.81748 8.16667 9.09259 8.16667 9.39031H9ZM9.87868 13.1213L9.28942 13.7106H9.28942L9.87868 13.1213ZM14.1213 13.1213L14.7106 13.7106L14.7106 13.7106L14.1213 13.1213ZM14.5435 12.5908L15.25 13.0327C15.3699 12.841 15.4068 12.6088 15.3521 12.3894C15.2974 12.17 15.156 11.9822 14.9601 11.8692L14.5435 12.5908ZM15 7.71466L14.5833 8.43635C14.8412 8.58521 15.1588 8.58521 15.4167 8.43635C15.6745 8.28749 15.8333 8.01238 15.8333 7.71466H15ZM14.1213 3.87868L14.7106 3.28942L14.7106 3.28942L14.1213 3.87868ZM9.87868 3.87868L9.28942 3.28942L9.28942 3.28942L9.87868 3.87868ZM9.40948 4.48697L8.68988 4.06671C8.57806 4.25818 8.54715 4.48633 8.604 4.70065C8.66086 4.91497 8.80078 5.09779 8.99281 5.20866L9.40948 4.48697ZM9.83333 11V9.39031H8.16667V11H9.83333ZM10.4679 12.5321C10.0616 12.1257 9.83333 11.5746 9.83333 11H8.16667C8.16667 12.0167 8.57053 12.9917 9.28942 13.7106L10.4679 12.5321ZM12 13.1667C11.4254 13.1667 10.8743 12.9384 10.4679 12.5321L9.28942 13.7106C10.0083 14.4295 10.9833 14.8333 12 14.8333V13.1667ZM13.5321 12.5321C13.1257 12.9384 12.5746 13.1667 12 13.1667V14.8333C13.0167 14.8333 13.9917 14.4295 14.7106 13.7106L13.5321 12.5321ZM13.837 12.149C13.7508 12.2867 13.6488 12.4153 13.5321 12.5321L14.7106 13.7106C14.917 13.5041 15.0976 13.2764 15.25 13.0327L13.837 12.149ZM14.9601 11.8692L9.41667 8.66862L8.58333 10.112L14.1268 13.3125L14.9601 11.8692ZM14.1667 6V7.71466H15.8333V6H14.1667ZM13.5321 4.46794C13.9384 4.87426 14.1667 5.42536 14.1667 6H15.8333C15.8333 4.98334 15.4295 4.00831 14.7106 3.28942L13.5321 4.46794ZM12 3.83333C12.5746 3.83333 13.1257 4.06161 13.5321 4.46794L14.7106 3.28942C13.9917 2.57053 13.0167 2.16667 12 2.16667V3.83333ZM10.4679 4.46794C10.8743 4.06161 11.4254 3.83333 12 3.83333V2.16667C10.9833 2.16667 10.0083 2.57053 9.28942 3.28942L10.4679 4.46794ZM10.1291 4.90724C10.2219 4.74824 10.3354 4.60042 10.4679 4.46794L9.28942 3.28942C9.05511 3.52374 8.85421 3.78533 8.68988 4.06671L10.1291 4.90724ZM8.99281 5.20866L14.5833 8.43635L15.4167 6.99298L9.82615 3.76529L8.99281 5.20866Z\"\n fill=\"#020617\"\n />\n </svg>\n ) : (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n role=\"img\"\n aria-label=\"Microphone\"\n >\n <path\n d=\"M9 6C9 5.20435 9.31607 4.44129 9.87868 3.87868C10.4413 3.31607 11.2044 3 12 3C12.7956 3 13.5587 3.31607 14.1213 3.87868C14.6839 4.44129 15 5.20435 15 6V11C15 11.7956 14.6839 12.5587 14.1213 13.1213C13.5587 13.6839 12.7956 14 12 14C11.2044 14 10.4413 13.6839 9.87868 13.1213C9.31607 12.5587 9 11.7956 9 11V6Z\"\n fill=\"#020617\"\n stroke=\"#020617\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M12 18C10.1435 18 8.36301 17.2625 7.05025 15.9497C5.7375 14.637 5 12.8565 5 11V10M12 18C13.8565 18 15.637 17.2625 16.9497 15.9497C18.2625 14.637 19 12.8565 19 11V10M12 18V21\"\n stroke=\"#020617\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n )}\n </span>\n <span className={styles.srOnly}>Microphone</span>\n </button>\n <SelectDevice\n value={currentMic?.device?.deviceId}\n devices={microphones || []}\n disabled={!isMicReady}\n onChange={(val) => setMicrophone(val)}\n />\n </div>\n );\n});\n\nMicrophoneButton.displayName = \"MicrophoneButton\";\n\nexport const CameraButton = memo(() => {\n const { onToggleCamera, isCamReady, isCamMuted } = useLocalCamera();\n const { currentCam, cameras, setCamera } = useDevices();\n\n\n return (\n <div className={styles.deviceButtonContainer}>\n <button\n type=\"button\"\n onClick={onToggleCamera}\n disabled={!isCamReady || !currentCam}\n className={styles.deviceButton}\n >\n <span className={styles.deviceButtonIcon}>\n {isCamMuted ? (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n role=\"img\"\n aria-label=\"Camera Muted\"\n >\n <g clipPath=\"url(#clip0_7082_14220)\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M3.19874 5.60093C3.08628 5.68537 2.97928 5.77808 2.87868 5.87868C2.31607 6.44129 2 7.20435 2 8V16C2 16.7956 2.31607 17.5587 2.87868 18.1213C3.44129 18.6839 4.20435 19 5 19H15C15.7956 19 16.5587 18.6839 17.1213 18.1213C17.6839 17.5587 18 16.7956 18 16V15.048C17.7787 14.8204 17.5304 14.6189 17.2595 14.4485L3.19874 5.60093ZM22 12.655V8C22 7.80225 21.9413 7.60895 21.8314 7.44454C21.7215 7.28013 21.5654 7.15199 21.3827 7.07632C21.2 7.00065 20.9989 6.98085 20.805 7.01942C20.611 7.05798 20.4329 7.15319 20.293 7.293L18 9.586V8C18 7.20435 17.6839 6.44129 17.1213 5.87868C16.5587 5.31607 15.7956 5 15 5H8.7412L22 12.655Z\"\n fill=\"#020617\"\n />\n <rect\n x=\"0.777222\"\n y=\"2.64844\"\n width=\"26.7988\"\n height=\"2.24738\"\n rx=\"1.12369\"\n transform=\"rotate(30 0.777222 2.64844)\"\n fill=\"#020617\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_7082_14220\">\n <rect width=\"24\" height=\"24\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n ) : (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n role=\"img\"\n aria-label=\"Camera\"\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M5 5C4.20435 5 3.44129 5.31607 2.87868 5.87868C2.31607 6.44129 2 7.20435 2 8V16C2 16.7956 2.31607 17.5587 2.87868 18.1213C3.44129 18.6839 4.20435 19 5 19H15C15.7956 19 16.5587 18.6839 17.1213 18.1213C17.6839 17.5587 18 16.7956 18 16V14.414L20.293 16.707C20.4329 16.8468 20.611 16.942 20.805 16.9806C20.9989 17.0192 21.2 16.9993 21.3827 16.9237C21.5654 16.848 21.7215 16.7199 21.8314 16.5555C21.9413 16.391 22 16.1978 22 16V8C22 7.80225 21.9413 7.60895 21.8314 7.44454C21.7215 7.28013 21.5654 7.15199 21.3827 7.07632C21.2 7.00065 20.9989 6.98085 20.805 7.01942C20.611 7.05798 20.4329 7.15319 20.293 7.293L18 9.586V8C18 7.20435 17.6839 6.44129 17.1213 5.87868C16.5587 5.31607 15.7956 5 15 5H5Z\"\n fill=\"#020617\"\n />\n </svg>\n )}\n </span>\n <span className={styles.srOnly}>Camera</span>\n </button>\n <SelectDevice\n value={currentCam?.device?.deviceId}\n devices={cameras || []}\n disabled={!isCamReady}\n onChange={(val) => setCamera(val)}\n />\n </div>\n );\n});\n\nCameraButton.displayName = \"CameraButton\";\n\nexport const ScreenShareButton = memo(() => {\n const { onToggleScreenshare, isScreenSharing } = useLocalScreenshare();\n\n return (\n <button\n type=\"button\"\n onClick={onToggleScreenshare}\n className={`${styles.deviceButtonContainer} ${styles.screenShareButton}`}\n >\n <span>\n {isScreenSharing ? (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n role=\"img\"\n aria-label=\"Screen Share\"\n >\n <path\n d=\"M21.0008 19C21.2557 19.0003 21.5009 19.0979 21.6862 19.2728C21.8715 19.4478 21.9831 19.687 21.998 19.9414C22.013 20.1958 21.9302 20.4464 21.7666 20.6418C21.603 20.8373 21.3709 20.9629 21.1178 20.993L21.0008 21H3.00085C2.74597 20.9997 2.50081 20.9021 2.31548 20.7272C2.13014 20.5522 2.01861 20.313 2.00367 20.0586C1.98874 19.8042 2.07152 19.5536 2.23511 19.3582C2.3987 19.1627 2.63075 19.0371 2.88385 19.007L3.00085 19H21.0008ZM19.0008 4C19.5054 3.99984 19.9914 4.19041 20.3614 4.5335C20.7314 4.87659 20.958 5.34684 20.9958 5.85L21.0008 6V16C21.001 16.5046 20.8104 16.9906 20.4673 17.3605C20.1243 17.7305 19.654 17.9572 19.1508 17.995L19.0008 18H5.00085C4.49627 18.0002 4.01028 17.8096 3.6403 17.4665C3.27032 17.1234 3.04369 16.6532 3.00585 16.15L3.00085 16V6C3.00069 5.49542 3.19125 5.00943 3.53434 4.63945C3.87743 4.26947 4.34769 4.04284 4.85085 4.005L5.00085 4H19.0008Z\"\n fill=\"#2D65FF\"\n />\n </svg>\n ) : (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n role=\"img\"\n aria-label=\"Screen Share\"\n >\n <path\n d=\"M20.9999 19C21.2547 19.0003 21.4999 19.0979 21.6852 19.2728C21.8706 19.4478 21.9821 19.687 21.997 19.9414C22.012 20.1958 21.9292 20.4464 21.7656 20.6418C21.602 20.8373 21.37 20.9629 21.1169 20.993L20.9999 21H2.99987C2.74499 20.9997 2.49984 20.9021 2.3145 20.7272C2.12916 20.5522 2.01763 20.313 2.0027 20.0586C1.98776 19.8042 2.07054 19.5536 2.23413 19.3582C2.39772 19.1627 2.62977 19.0371 2.88287 19.007L2.99987 19H20.9999ZM18.9999 4C19.5044 3.99984 19.9904 4.19041 20.3604 4.5335C20.7304 4.87659 20.957 5.34684 20.9949 5.85L20.9999 6V16C21 16.5046 20.8095 16.9906 20.4664 17.3605C20.1233 17.7305 19.653 17.9572 19.1499 17.995L18.9999 18H4.99987C4.49529 18.0002 4.0093 17.8096 3.63932 17.4665C3.26934 17.1234 3.04271 16.6532 3.00487 16.15L2.99987 16V6C2.99971 5.49542 3.19028 5.00943 3.53337 4.63945C3.87646 4.26947 4.34671 4.04284 4.84987 4.005L4.99987 4H18.9999Z\"\n fill=\"white\"\n />\n </svg>\n )}\n </span>\n </button>\n );\n});\n\nScreenShareButton.displayName = \"ScreenShareButton\";";
|
|
232528
|
+
var styles$q = "/* SelectDevice styles */\n.selectDevice {\n\theight: 3rem;\n\twidth: 5.5rem;\n\tborder-radius: 9999px;\n\tbackground-color: rgba(255, 255, 255, 0.2);\n\tpadding: 0 0.75rem;\n\tborder: 1px solid rgba(255, 255, 255, 0.2);\n\tbackdrop-filter: blur(10px);\n\tcolor: transparent;\n\tpadding-right: 2rem; /* space for arrow */\n\tbox-sizing: border-box;\n\t-webkit-appearance: none;\n\t-moz-appearance: none;\n\tappearance: none;\n\tcursor: pointer;\n}\n\n.selectDevice::-ms-expand {\n\tdisplay: none;\n}\n\n.selectDevice option {\n\tcolor: transparent;\n\tbackground-color: transparent;\n}\n\n.selectDevice:focus {\n\toutline: none;\n}\n\n/* Device button container styles */\n.deviceButtonContainer {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tborder-radius: 9999px;\n\tbackdrop-filter: blur(4px);\n}\n\n/* Device button styles */\n.deviceButton {\n\tposition: absolute;\n\tleft: 0;\n\ttop: 0;\n\tz-index: 10;\n\theight: 3rem;\n\twidth: 3rem;\n\tborder-radius: 9999px;\n\tbackground-color: white;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tborder: 1px solid transparent;\n\tcursor: pointer;\n}\n\n.deviceButtonIcon {\n\tdisplay: flex;\n}\n\n.deviceButton:disabled {\n\topacity: 0.5;\n}\n\n/* Screen reader only text */\n.srOnly {\n\tposition: absolute;\n\twidth: 1px;\n\theight: 1px;\n\tpadding: 0;\n\tmargin: -1px;\n\toverflow: hidden;\n\tclip: rect(0, 0, 0, 0);\n\twhite-space: nowrap;\n\tborder-width: 0;\n}\n\n/* Controls container */\n.controlsContainer {\n\tdisplay: flex;\n\tgap: 1rem;\n\tjustify-content: center;\n\talign-items: center;\n}\n\n.selectDeviceContainer {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.selectArrow {\n\tposition: absolute;\n\tright: 1rem;\n\tpointer-events: none;\n\tdisplay: flex;\n\talign-items: center;\n\theight: 100%;\n}\n\n.screenShareButton {\n\tcursor: pointer;\n\tposition: relative;\n\theight: 3rem;\n\twidth: 3rem;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tborder-radius: 9999px;\n\tbackdrop-filter: blur(4px);\n\tbackground-color: rgba(255, 255, 255, 0.2);\n\tborder: 1px solid rgba(255, 255, 255, 0.2);\n}\n";
|
|
232529
|
+
var componentsDependencies$5 = [
|
|
232521
232530
|
"use-local-camera",
|
|
232522
232531
|
"use-local-microphone",
|
|
232523
232532
|
"use-local-screenshare"
|
|
232524
232533
|
];
|
|
232525
232534
|
var controls$1 = {
|
|
232526
|
-
type: type$
|
|
232527
|
-
content: content$
|
|
232528
|
-
styles: styles$
|
|
232529
|
-
componentsDependencies: componentsDependencies$
|
|
232535
|
+
type: type$q,
|
|
232536
|
+
content: content$q,
|
|
232537
|
+
styles: styles$q,
|
|
232538
|
+
componentsDependencies: componentsDependencies$5
|
|
232530
232539
|
};
|
|
232531
232540
|
|
|
232532
|
-
var type$
|
|
232533
|
-
var content$
|
|
232534
|
-
var styles$
|
|
232541
|
+
var type$p = "components";
|
|
232542
|
+
var content$p = "import React, { useEffect } from \"react\";\nimport {\n\tDailyAudio,\n\tDailyVideo,\n\tuseDaily,\n\tuseDevices,\n\tuseLocalSessionId,\n\tuseMeetingState,\n\tuseScreenVideoTrack,\n\tuseVideoTrack\n} from \"@daily-co/daily-react\";\nimport { MicrophoneButton, CameraButton, ScreenShareButton } from '../controls'\nimport { useLocalScreenshare } from \"../../hooks/use-local-screenshare\";\nimport { useReplicaIDs } from \"../../hooks/use-replica-ids\";\nimport { AudioWave } from \"../audio-wave\";\n\nimport styles from \"./conversation.module.css\";\n\ninterface ConversationData {\n\tconversation_id: string;\n\tconversation_name: string;\n\tstatus: 'active' | 'ended' | 'error';\n\tconversation_url: string;\n\treplica_id: string | null;\n\tpersona_id: string | null;\n\tcreated_at: string;\n}\n\ninterface ConversationProps {\n\tonLeave: () => void;\n\tconversation: ConversationData;\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</div>\n\t);\n});\n\nexport const Conversation = React.memo(({ onLeave, conversation }: ConversationProps) => {\n\tconst daily = useDaily();\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\tif (conversation?.conversation_url) {\n\t\t\tdaily?.join({\n\t\t\t\turl: conversation.conversation_url,\n\t\t\t});\n\t\t}\n\t}, [conversation, daily]);\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<MicrophoneButton />\n\t\t\t\t\t<CameraButton />\n\t\t\t\t\t<ScreenShareButton />\n\t\t\t\t\t<button type=\"button\" className={styles.leaveButton} onClick={onLeave}>\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\taria-label=\"Leave Call\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M18 6L6 18M6 6L18 18\"\n\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<DailyAudio />\n\t\t</div>\n\t);\n});\n";
|
|
232543
|
+
var styles$p = ".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\tbackground: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);\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/* 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";
|
|
232544
|
+
var componentsDependencies$4 = [
|
|
232545
|
+
"controls",
|
|
232546
|
+
"use-local-screenshare",
|
|
232547
|
+
"use-replica-ids",
|
|
232548
|
+
"audio-wave"
|
|
232549
|
+
];
|
|
232550
|
+
var conversation01$1 = {
|
|
232551
|
+
type: type$p,
|
|
232552
|
+
content: content$p,
|
|
232553
|
+
styles: styles$p,
|
|
232554
|
+
componentsDependencies: componentsDependencies$4
|
|
232555
|
+
};
|
|
232556
|
+
|
|
232557
|
+
var type$o = "components";
|
|
232558
|
+
var content$o = "import { DailyProvider } from \"@daily-co/daily-react\";\n\nexport const CVIProvider = ({ children }: { children: React.ReactNode }) => {\n return (\n <DailyProvider>\n {children}\n </DailyProvider>\n )\n}\n";
|
|
232559
|
+
var styles$o = "";
|
|
232535
232560
|
var cviProvider$1 = {
|
|
232536
|
-
type: type$
|
|
232537
|
-
content: content$
|
|
232538
|
-
styles: styles$
|
|
232561
|
+
type: type$o,
|
|
232562
|
+
content: content$o,
|
|
232563
|
+
styles: styles$o
|
|
232539
232564
|
};
|
|
232540
232565
|
|
|
232541
|
-
var type$
|
|
232542
|
-
var content$
|
|
232543
|
-
var styles$
|
|
232544
|
-
var componentsDependencies$
|
|
232566
|
+
var type$n = "components";
|
|
232567
|
+
var content$n = "import React, { memo, useEffect } from \"react\";\nimport {\n DailyVideo,\n useDaily,\n} from \"@daily-co/daily-react\";\nimport { CameraButton, MicrophoneButton } from \"../controls\";\nimport { useStartHaircheck } from \"../../hooks/use-start-haircheck\";\nimport { useLocalCamera } from \"../../hooks/use-local-camera\";\n\nimport styles from \"./hair-check.module.css\";\n\nconst JoinBtn = ({\n onClick,\n disabled,\n className,\n loading,\n}: {\n loading?: boolean;\n onClick: () => void;\n disabled?: boolean;\n className?: string;\n}) => {\n return (\n <button\n className={`${styles.buttonJoin} ${className || ''}`}\n type=\"button\"\n onClick={onClick}\n disabled={disabled || loading}\n >\n <div className={styles.buttonJoinInner}>\n {loading ? \"Joining...\" : \"Join Video Chat\"}\n </div>\n </button>\n );\n};\n\nexport const HairCheck = memo(({\n isJoinBtnLoading = false,\n onJoin,\n onCancel,\n}: {\n isJoinBtnLoading?: boolean;\n onJoin: () => void;\n onCancel?: () => void;\n}) => {\n const daily = useDaily();\n const { localSessionId, isCamMuted } = useLocalCamera();\n\n const { isPermissionsPrompt,\n isPermissionsLoading,\n isPermissionsGranted,\n isPermissionsDenied,\n requestPermissions\n } = useStartHaircheck();\n\n useEffect(() => {\n requestPermissions();\n }, []);\n\n const onCancelHairCheck = () => {\n if (daily) {\n daily.leave();\n }\n onCancel?.();\n };\n\n const getDescription = () => {\n if (isPermissionsPrompt) {\n return \"Make sure your camera and mic are ready!\";\n }\n if (isPermissionsLoading) {\n return \"Getting your camera and mic ready...\";\n }\n if (isPermissionsDenied) {\n return \"Camera and mic access denied. Allow permissions to continue.\";\n }\n return \"You're all set! Your device is ready.\";\n };\n return (\n <div className={styles.haircheckBlock}>\n {isPermissionsGranted && !isCamMuted ? (\n <DailyVideo\n type=\"video\"\n sessionId={localSessionId}\n mirror\n className={styles.dailyVideo}\n />\n ) : (\n <div className={styles.haircheckUserPlaceholder}>\n <span className={styles.haircheckUserIcon}>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"88\"\n height=\"89\"\n viewBox=\"0 0 88 89\"\n fill=\"none\"\n aria-label=\"Haircheck User\"\n role=\"img\"\n >\n <path\n d=\"M44 48.6406C17.952 48.6406 8.80005 61.8406 8.80005 70.6406V83.8406H79.2001V70.6406C79.2001 61.8406 70.0481 48.6406 44 48.6406Z\"\n fill=\"url(#paint0_linear_7135_21737)\"\n />\n <path\n d=\"M44 44.2406C54.9352 44.2406 63.7999 35.3759 63.7999 24.4406C63.7999 13.5054 54.9352 4.64062 44 4.64062C33.0647 4.64062 24.2 13.5054 24.2 24.4406C24.2 35.3759 33.0647 44.2406 44 44.2406Z\"\n fill=\"url(#paint1_linear_7135_21737)\"\n />\n <defs>\n <linearGradient\n id=\"paint0_linear_7135_21737\"\n x1=\"36.5001\"\n y1=\"43\"\n x2=\"44.0001\"\n y2=\"97.5\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stopColor=\"white\" />\n <stop offset=\"1\" stopColor=\"white\" stopOpacity=\"0\" />\n </linearGradient>\n <linearGradient\n id=\"paint1_linear_7135_21737\"\n x1=\"44\"\n y1=\"4.64062\"\n x2=\"44\"\n y2=\"44.2406\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stopColor=\"white\" />\n <stop offset=\"1\" stopColor=\"white\" stopOpacity=\"0\" />\n </linearGradient>\n </defs>\n </svg>\n </span>\n </div>\n )}\n\n <div className={styles.haircheckSidebar}>\n <div className={styles.haircheckSidebarContent}>\n {isPermissionsDenied ?\n <button\n type=\"button\"\n onClick={onCancelHairCheck}\n className={`${styles.buttonCancel} ${styles.buttonJoinMobile}`}\n >\n Cancel\n </button> :\n <JoinBtn\n loading={isJoinBtnLoading}\n disabled={!isPermissionsGranted}\n className={styles.buttonJoinMobile}\n onClick={onJoin}\n />\n }\n <div />\n <div className={styles.haircheckContent}>\n <div className={styles.haircheckDescription}>\n {getDescription()}\n </div>\n {isPermissionsDenied ?\n <button\n type=\"button\"\n onClick={onCancelHairCheck}\n className={`${styles.buttonCancel} ${styles.buttonJoinDesktop}`}\n >\n Cancel\n </button> :\n <JoinBtn\n loading={isJoinBtnLoading}\n disabled={!isPermissionsGranted}\n className={styles.buttonJoinDesktop}\n onClick={onJoin}\n />}\n </div>\n <div className={styles.haircheckControls}>\n <MicrophoneButton />\n <CameraButton />\n </div>\n </div>\n </div>\n </div >\n );\n});\n\nHairCheck.displayName = \"HairCheck\";\n";
|
|
232568
|
+
var styles$n = "/* Button Component */\n/* Start of Selection */\n.buttonCancel {\n\tpadding: 1rem;\n\tborder: 1px solid rgba(255, 255, 255, 0.1);\n\tbackground-color: rgba(239, 68, 68, 0.8);\n\tborder-radius: 9999px;\n\tcolor: white;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-weight: 500;\n\tcursor: pointer;\n\ttransition: all 0.2s;\n\toutline: none;\n}\n\n.buttonCancel:hover {\n\tbackground-color: rgba(239, 68, 68, 1);\n}\n/* End of Selection */\n\n/* ButtonJoin Component */\n.buttonJoin {\n\tpadding: 5px;\n\tborder: 1px solid rgba(255, 255, 255, 0.1);\n\tbackground-color: rgba(255, 255, 255, 0.1);\n\tborder-radius: 9999px;\n\tcolor: white;\n\theight: 3.625rem;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-weight: 500;\n\tcursor: pointer;\n}\n\n.buttonJoinInner {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground-color: #32c75c;\n\tborder-radius: 9999px;\n\tpadding: 1rem;\n\tbox-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n\theight: 3rem;\n\ttransition: background-color 0.2s;\n\tfont-weight: 500;\n\tmin-width: 8.5rem;\n}\n\n.buttonJoin:hover .buttonJoinInner {\n\tbackground-color: rgba(62, 192, 97, 0.9);\n}\n\n.buttonJoin:disabled .buttonJoinInner {\n\tbackground-color: rgba(34, 197, 94, 0.5);\n\tcursor: not-allowed;\n}\n\n.buttonJoinDesktop {\n\tdisplay: none;\n}\n\n@media (min-width: 768px) {\n\t.buttonJoinDesktop {\n\t\tdisplay: flex;\n\t}\n}\n\n.buttonJoinMobile {\n\tposition: absolute;\n\ttop: -5.125rem;\n\tleft: 50%;\n\ttransform: translateX(-50%);\n\tz-index: 20;\n}\n\n@media (min-width: 768px) {\n\t.buttonJoinMobile {\n\t\tdisplay: none;\n\t}\n}\n\n/* HaircheckScreen Component */\n.haircheckBlock {\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}\n\n@media (min-width: 768px) {\n\t.haircheckBlock {\n\t\taspect-ratio: 16/9;\n\t}\n}\n\n.dailyVideo {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover !important;\n\tposition: absolute;\n\tinset: 0;\n\ttransition: opacity 0.3s ease-in-out;\n}\n\n.haircheckUserPlaceholder {\n\tposition: absolute;\n\tinset: 0;\n\tbackground-color: #334155;\n\tz-index: 5;\n\tpointer-events: none;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.haircheckUserIcon {\n\twidth: 12.5rem;\n\theight: 12.5rem;\n\tborder-radius: 9999px;\n\tbackground-color: rgba(255, 255, 255, 0.1);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.haircheckSidebar {\n\tposition: absolute;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\twidth: 100%;\n\tbackground-color: rgba(2, 6, 23, 0.45);\n\tbackdrop-filter: blur(20px);\n\tborder-left: 1px solid rgba(255, 255, 255, 0.2);\n\tz-index: 5;\n}\n\n@media (min-width: 768px) {\n\t.haircheckSidebar {\n\t\tleft: auto;\n\t\ttop: 0;\n\t\tbottom: 0;\n\t\twidth: 17.5rem;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.haircheckSidebar {\n\t\twidth: 23rem;\n\t}\n}\n\n.haircheckSidebarContent {\n\tposition: relative;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 1.5rem 1.25rem;\n\tgap: 1.5rem;\n\twidth: 100%;\n\theight: 100%;\n}\n\n@media (min-width: 768px) {\n\t.haircheckSidebarContent {\n\t\tpadding: 1rem 1.25rem;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.haircheckSidebarContent {\n\t\tpadding: 2rem 1.25rem;\n\t}\n}\n\n.haircheckContent {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 2rem;\n}\n\n.haircheckDescription {\n\tcolor: #ffffff;\n\tfont-size: 1.125rem;\n\tfont-weight: 500;\n}\n\n@media (min-width: 768px) {\n\t.haircheckDescription {\n\t\tfont-size: 1.25rem;\n\t}\n}\n\n.haircheckControls {\n\tdisplay: flex;\n\talign-items: flex-end;\n\tjustify-content: space-between;\n\tgap: 1rem;\n}\n";
|
|
232569
|
+
var componentsDependencies$3 = [
|
|
232545
232570
|
"controls",
|
|
232546
232571
|
"use-start-haircheck",
|
|
232547
|
-
"use-local-camera"
|
|
232548
|
-
"cvi-provider"
|
|
232572
|
+
"use-local-camera"
|
|
232549
232573
|
];
|
|
232550
|
-
var
|
|
232551
|
-
type: type$
|
|
232552
|
-
content: content$
|
|
232553
|
-
styles: styles$
|
|
232554
|
-
componentsDependencies: componentsDependencies$
|
|
232574
|
+
var hairCheck01$1 = {
|
|
232575
|
+
type: type$n,
|
|
232576
|
+
content: content$n,
|
|
232577
|
+
styles: styles$n,
|
|
232578
|
+
componentsDependencies: componentsDependencies$3
|
|
232555
232579
|
};
|
|
232556
232580
|
|
|
232557
|
-
var type$
|
|
232558
|
-
var content$
|
|
232559
|
-
var styles$
|
|
232581
|
+
var type$m = "hooks";
|
|
232582
|
+
var content$m = "import { useCallback } from \"react\";\nimport { useAppMessage, useDailyEvent } from \"@daily-co/daily-react\";\n\ntype AppMessageUtterance = {\n \"message_type\": \"conversation\",\n \"event_type\": \"conversation.utterance\",\n \"conversation_id\": string,\n \"inference_id\": string,\n \"properties\": {\n \"role\": \"user\" | \"replica\",\n \"speech\": string,\n \"visual_context\": string\n }\n}\n\ntype AppMessageToolCall<T> = {\n \"message_type\": \"conversation\",\n \"event_type\": \"conversation.tool_call\",\n \"conversation_id\": string,\n \"inference_id\": string,\n \"properties\": T\n}\n\ntype AppMessagePerceptionToolCall<T> = {\n \"message_type\": \"conversation\",\n \"event_type\": \"conversation.perception_tool_call\",\n \"conversation_id\": string,\n \"properties\": T\n}\n\ntype AppMessagePerceptionAnalysis = {\n \"message_type\": \"conversation\",\n \"event_type\": \"conversation.perception_analysis\",\n \"conversation_id\": string,\n \"properties\": {\n \"analysis\": string\n }\n}\n\ntype AppMessageReplicaStartedSpeaking = {\n \"message_type\": \"conversation\",\n \"event_type\": \"conversation.replica.started_speaking\",\n \"inference_id\": string\n}\n\ntype AppMessageReplicaStoppedSpeaking = {\n \"message_type\": \"conversation\",\n \"event_type\": \"conversation.replica.stopped_speaking\",\n \"inference_id\": string\n}\n\ntype AppMessageUserStartedSpeaking = {\n \"message_type\": \"conversation\",\n \"event_type\": \"conversation.user.started_speaking\",\n \"inference_id\": string\n}\n\ntype AppMessageUserStoppedSpeaking = {\n \"message_type\": \"conversation\",\n \"event_type\": \"conversation.user.stopped_speaking\",\n \"inference_id\": string\n}\n\ntype AppMessageReplicaInterrupted = {\n \"message_type\": \"conversation\",\n \"event_type\": \"conversation.replica_interrupted\",\n \"conversation_id\": string,\n \"inference_id\": string\n}\n\ntype AppMessage<T> = {\n data: AppMessageUtterance |\n AppMessageToolCall<T> |\n AppMessagePerceptionToolCall<T> |\n AppMessagePerceptionAnalysis |\n AppMessageReplicaStartedSpeaking |\n AppMessageReplicaStoppedSpeaking |\n AppMessageUserStartedSpeaking |\n AppMessageUserStoppedSpeaking |\n AppMessageReplicaInterrupted\n};\n\nexport function useObservableEvent<T>(callback: (event: AppMessage<T>['data']) => void): void {\n return useDailyEvent(\n \"app-message\",\n useCallback(\n (event: AppMessage<T>) => {\n callback(event.data);\n },\n [callback],\n ),\n )\n}\n\ntype AppMessageEcho = {\n \"message_type\": \"conversation\",\n \"event_type\": \"conversation.echo\",\n \"conversation_id\": string,\n \"properties\": {\n \"modality\": \"audio\" | \"text\",\n \"text\": string,\n \"audio\": string,\n \"sample_rate\": number,\n \"inference_id\": string,\n \"done\": boolean\n }\n}\n\ntype AppMessageRespond = {\n \"message_type\": \"conversation\",\n \"event_type\": \"conversation.respond\",\n \"conversation_id\": string,\n \"properties\": {\n \"text\": string\n }\n}\n\ntype AppMessageInterrupt = {\n \"message_type\": \"conversation\",\n \"event_type\": \"conversation.interrupt\",\n \"conversation_id\": string\n}\n\ntype AppMessageOverwriteLlmContext = {\n \"message_type\": \"conversation\",\n \"event_type\": \"conversation.overwrite_llm_context\",\n \"conversation_id\": string,\n \"properties\": {\n \"context\": string\n }\n}\n\ntype AppMessageAppendLlmContext = {\n \"message_type\": \"conversation\",\n \"event_type\": \"conversation.append_llm_context\",\n \"conversation_id\": string,\n \"properties\": {\n \"context\": string\n }\n}\n\ntype Sensitivity = \"superlow\" | \"verylow\" | \"low\" | \"medium\" | \"high\" | \"auto\"\n\ntype AppMessageSensitivity = {\n \"message_type\": \"conversation\",\n \"event_type\": \"conversation.sensitivity\",\n \"conversation_id\": string,\n \"properties\": {\n \"participant_pause_sensitivity\": Sensitivity,\n \"participant_interrupt_sensitivity\": Sensitivity\n }\n}\n\ntype SendAppMessageProps =\n AppMessageEcho |\n AppMessageRespond |\n AppMessageInterrupt |\n AppMessageOverwriteLlmContext |\n AppMessageAppendLlmContext |\n AppMessageSensitivity\n\nexport function useSendAppMessage(): (message: SendAppMessageProps) => void {\n const sendAppMessage = useAppMessage();\n\n return useCallback((message: SendAppMessageProps) => {\n sendAppMessage({ msg: message }, '*');\n }, [sendAppMessage]);\n}";
|
|
232583
|
+
var styles$m = "";
|
|
232560
232584
|
var cviEventsHooks$1 = {
|
|
232561
|
-
type: type$
|
|
232562
|
-
content: content$
|
|
232563
|
-
styles: styles$
|
|
232585
|
+
type: type$m,
|
|
232586
|
+
content: content$m,
|
|
232587
|
+
styles: styles$m
|
|
232588
|
+
};
|
|
232589
|
+
|
|
232590
|
+
var type$l = "hooks";
|
|
232591
|
+
var content$l = "import { useCallback } from 'react';\nimport { useDaily } from '@daily-co/daily-react';\n\nexport const useCVICall = (): {\n\tjoinCall: (props: { url: string }) => void;\n\tleaveCall: () => void;\n} => {\n\tconst daily = useDaily();\n\n\tconst joinCall = useCallback(\n\t\t({ url }: { url: string }) => {\n\t\t\tdaily?.join({\n\t\t\t\turl: url,\n\t\t\t});\n\t\t},\n\t\t[daily]\n\t);\n\n\tconst leaveCall = useCallback(() => {\n\t\tdaily?.leave();\n\t}, [daily]);\n\n\treturn { joinCall, leaveCall };\n};\n";
|
|
232592
|
+
var styles$l = "";
|
|
232593
|
+
var useCviCall$1 = {
|
|
232594
|
+
type: type$l,
|
|
232595
|
+
content: content$l,
|
|
232596
|
+
styles: styles$l
|
|
232597
|
+
};
|
|
232598
|
+
|
|
232599
|
+
var type$k = "hooks";
|
|
232600
|
+
var content$k = "import { useCallback, useMemo } from 'react';\nimport { useDaily, useDevices, useLocalSessionId, useVideoTrack } from '@daily-co/daily-react';\n\nexport const useLocalCamera = (): {\n\tisCamReady: boolean;\n\tisCamMuted: boolean;\n\tlocalSessionId: string;\n\tonToggleCamera: () => void;\n} => {\n\tconst daily = useDaily();\n\tconst localSessionId = useLocalSessionId();\n\tconst { isOff: isCamMuted } = useVideoTrack(localSessionId);\n\tconst { camState } = useDevices();\n\tconst isCamReady = useMemo(() => camState === 'granted', [camState]);\n\n\tconst onToggleCamera = useCallback(() => {\n\t\tdaily?.setLocalVideo(isCamMuted);\n\t}, [daily, isCamMuted]);\n\n\treturn {\n\t\tisCamReady,\n\t\tisCamMuted,\n\t\tlocalSessionId,\n\t\tonToggleCamera,\n\t};\n};\n";
|
|
232601
|
+
var styles$k = "";
|
|
232602
|
+
var useLocalCamera$1 = {
|
|
232603
|
+
type: type$k,
|
|
232604
|
+
content: content$k,
|
|
232605
|
+
styles: styles$k
|
|
232606
|
+
};
|
|
232607
|
+
|
|
232608
|
+
var type$j = "hooks";
|
|
232609
|
+
var content$j = "import { useCallback, useMemo } from 'react';\nimport { useAudioTrack, useDaily, useDevices, useLocalSessionId } from '@daily-co/daily-react';\n\nexport const useLocalMicrophone = (): {\n\tisMicReady: boolean;\n\tisMicMuted: boolean;\n\tlocalSessionId: string;\n\tonToggleMicrophone: () => void;\n} => {\n\tconst daily = useDaily();\n\tconst localSessionId = useLocalSessionId();\n\tconst { isOff: isMicMuted } = useAudioTrack(localSessionId);\n\tconst { micState } = useDevices();\n\tconst isMicReady = useMemo(() => micState === 'granted', [micState]);\n\n\tconst onToggleMicrophone = useCallback(() => {\n\t\tdaily?.setLocalAudio(isMicMuted);\n\t}, [daily, isMicMuted]);\n\n\treturn {\n\t\tisMicReady,\n\t\tisMicMuted,\n\t\tlocalSessionId,\n\t\tonToggleMicrophone,\n\t};\n};\n";
|
|
232610
|
+
var styles$j = "";
|
|
232611
|
+
var useLocalMicrophone$1 = {
|
|
232612
|
+
type: type$j,
|
|
232613
|
+
content: content$j,
|
|
232614
|
+
styles: styles$j
|
|
232615
|
+
};
|
|
232616
|
+
|
|
232617
|
+
var type$i = "hooks";
|
|
232618
|
+
var content$i = "import { useCallback } from 'react';\nimport { useDaily, useLocalSessionId, useScreenVideoTrack } from '@daily-co/daily-react';\n\nexport const useLocalScreenshare = (): {\n\tisScreenSharing: boolean;\n\tlocalSessionId: string;\n\tonToggleScreenshare: () => void;\n} => {\n\tconst daily = useDaily();\n\tconst localSessionId = useLocalSessionId();\n\tconst { isOff } = useScreenVideoTrack(localSessionId);\n\tconst isScreenSharing = !isOff;\n\n\tconst onToggleScreenshare = useCallback(() => {\n\t\tif (isScreenSharing) {\n\t\t\tdaily?.stopScreenShare();\n\t\t} else {\n\t\t\tdaily?.startScreenShare({\n\t\t\t\tdisplayMediaOptions: {\n\t\t\t\t\taudio: false,\n\t\t\t\t\tselfBrowserSurface: 'exclude',\n\t\t\t\t\tsurfaceSwitching: 'include',\n\t\t\t\t\tvideo: {\n\t\t\t\t\t\twidth: 1920,\n\t\t\t\t\t\theight: 1080,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t});\n\t\t}\n\t}, [daily, isScreenSharing]);\n\n\treturn {\n\t\tisScreenSharing,\n\t\tlocalSessionId,\n\t\tonToggleScreenshare,\n\t};\n};\n";
|
|
232619
|
+
var styles$i = "";
|
|
232620
|
+
var useLocalScreenshare$1 = {
|
|
232621
|
+
type: type$i,
|
|
232622
|
+
content: content$i,
|
|
232623
|
+
styles: styles$i
|
|
232624
|
+
};
|
|
232625
|
+
|
|
232626
|
+
var type$h = "hooks";
|
|
232627
|
+
var content$h = "import { useParticipantIds } from '@daily-co/daily-react';\n\nexport const useRemoteParticipantIDs = (): string[] => {\n\tconst remoteParticipantIds = useParticipantIds({ filter: 'remote' });\n\n\treturn remoteParticipantIds;\n};\n";
|
|
232628
|
+
var styles$h = "";
|
|
232629
|
+
var useRemoteParticipantIds$1 = {
|
|
232630
|
+
type: type$h,
|
|
232631
|
+
content: content$h,
|
|
232632
|
+
styles: styles$h
|
|
232633
|
+
};
|
|
232634
|
+
|
|
232635
|
+
var type$g = "hooks";
|
|
232636
|
+
var content$g = "import { useParticipantIds } from '@daily-co/daily-react';\n\nexport const useReplicaIDs = (): string[] => {\n\tconst replicasIDs = useParticipantIds({\n\t\tfilter: (participant) => participant.user_id.includes('tavus-replica'),\n\t});\n\n\treturn replicasIDs;\n};\n";
|
|
232637
|
+
var styles$g = "";
|
|
232638
|
+
var useReplicaIds$1 = {
|
|
232639
|
+
type: type$g,
|
|
232640
|
+
content: content$g,
|
|
232641
|
+
styles: styles$g
|
|
232642
|
+
};
|
|
232643
|
+
|
|
232644
|
+
var type$f = "hooks";
|
|
232645
|
+
var content$f = "import { useCallback } from 'react';\nimport { useDaily } from '@daily-co/daily-react';\nimport type { DailyDeviceInfos } from '@daily-co/daily-js';\n\nexport const useRequestPermissions = (): (() => Promise<DailyDeviceInfos>) => {\n\tconst daily = useDaily();\n\n\tconst requestPermissions = useCallback(async () => {\n\t\treturn await daily!.startCamera({\n\t\t\tstartVideoOff: false,\n\t\t\tstartAudioOff: false,\n\t\t\taudioSource: 'default',\n\t\t\tinputSettings: {\n\t\t\t\taudio: {\n\t\t\t\t\tprocessor: {\n\t\t\t\t\t\ttype: 'noise-cancellation',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}, [daily]);\n\n\treturn requestPermissions;\n};\n";
|
|
232646
|
+
var styles$f = "";
|
|
232647
|
+
var dependencies = [
|
|
232648
|
+
"@daily-co/daily-js"
|
|
232649
|
+
];
|
|
232650
|
+
var useRequestPermissions$1 = {
|
|
232651
|
+
type: type$f,
|
|
232652
|
+
content: content$f,
|
|
232653
|
+
styles: styles$f,
|
|
232654
|
+
dependencies: dependencies
|
|
232655
|
+
};
|
|
232656
|
+
|
|
232657
|
+
var type$e = "hooks";
|
|
232658
|
+
var content$e = "import { useCallback, useEffect, useMemo, useState } from 'react';\nimport { useDaily, useDevices } from '@daily-co/daily-react';\n\nexport const useStartHaircheck = (): {\n\tisPermissionsPrompt: boolean;\n\tisPermissionsLoading: boolean;\n\tisPermissionsGranted: boolean;\n\tisPermissionsDenied: boolean;\n\trequestPermissions: () => void;\n} => {\n\tconst daily = useDaily();\n\tconst { micState } = useDevices();\n\n\tconst [permissionState, setPermissionState] = useState<PermissionState | null>(null);\n\n\tuseEffect(() => {\n\t\tnavigator.permissions\n\t\t\t.query({ name: 'microphone' as PermissionName })\n\t\t\t.then((permissionStatus) => {\n\t\t\t\tsetPermissionState(permissionStatus.state);\n\t\t\t\tpermissionStatus.onchange = () => {\n\t\t\t\t\tsetPermissionState(permissionStatus.state);\n\t\t\t\t};\n\t\t\t});\n\t}, []);\n\n\tconst requestPermissions = useCallback(() => {\n\t\tif (!daily) return;\n\t\tdaily.startCamera({\n\t\t\tstartVideoOff: false,\n\t\t\tstartAudioOff: false,\n\t\t\taudioSource: 'default',\n\t\t\tinputSettings: {\n\t\t\t\taudio: {\n\t\t\t\t\tprocessor: {\n\t\t\t\t\t\ttype: 'noise-cancellation',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}, [daily]);\n\n\tconst isPermissionsPrompt = useMemo(() => {\n\t\treturn permissionState === 'prompt';\n\t}, [permissionState]);\n\n\tconst isPermissionsLoading = useMemo(() => {\n\t\treturn (permissionState === null || permissionState === 'granted') && micState === 'idle';\n\t}, [permissionState, micState]);\n\n\tconst isPermissionsGranted = useMemo(() => {\n\t\treturn permissionState === 'granted';\n\t}, [permissionState]);\n\n\tconst isPermissionsDenied = useMemo(() => {\n\t\treturn permissionState === 'denied';\n\t}, [permissionState]);\n\n\treturn {\n\t\tisPermissionsPrompt,\n\t\tisPermissionsLoading,\n\t\tisPermissionsGranted,\n\t\tisPermissionsDenied,\n\t\trequestPermissions,\n\t};\n};\n";
|
|
232659
|
+
var styles$e = "";
|
|
232660
|
+
var useStartHaircheck$1 = {
|
|
232661
|
+
type: type$e,
|
|
232662
|
+
content: content$e,
|
|
232663
|
+
styles: styles$e
|
|
232564
232664
|
};
|
|
232565
232665
|
|
|
232566
232666
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
232567
232667
|
__proto__: null,
|
|
232668
|
+
"audio-wave": audioWave$1,
|
|
232568
232669
|
controls: controls$1,
|
|
232670
|
+
"conversation-01": conversation01$1,
|
|
232569
232671
|
"cvi-events-hooks": cviEventsHooks$1,
|
|
232570
232672
|
"cvi-provider": cviProvider$1,
|
|
232571
|
-
"hair-check":
|
|
232673
|
+
"hair-check-01": hairCheck01$1,
|
|
232674
|
+
"use-cvi-call": useCviCall$1,
|
|
232675
|
+
"use-local-camera": useLocalCamera$1,
|
|
232676
|
+
"use-local-microphone": useLocalMicrophone$1,
|
|
232677
|
+
"use-local-screenshare": useLocalScreenshare$1,
|
|
232678
|
+
"use-remote-participant-ids": useRemoteParticipantIds$1,
|
|
232679
|
+
"use-replica-ids": useReplicaIds$1,
|
|
232680
|
+
"use-request-permissions": useRequestPermissions$1,
|
|
232681
|
+
"use-start-haircheck": useStartHaircheck$1
|
|
232572
232682
|
});
|
|
232573
232683
|
|
|
232574
|
-
var type$
|
|
232575
|
-
var content$3 = "import React, { memo } from 'react';\nimport { useDevices } from '@daily-co/daily-react';\nimport { useLocalCamera } from '../../hooks/use-local-camera';\nimport { useLocalMicrophone } from '../../hooks/use-local-microphone';\nimport { useLocalScreenshare } from '../../hooks/use-local-screenshare';\nimport styles from './controls.module.css';\n\nexport const SelectDevice = ({ value, devices, disabled, onChange }) => {\n\treturn (\n\t\t<div className={styles.selectDeviceContainer}>\n\t\t\t<select\n\t\t\t\tvalue={value}\n\t\t\t\tonChange={(e) => onChange(e.target.value)}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tclassName={styles.selectDevice}\n\t\t\t>\n\t\t\t\t{devices.map(({ device }) => (\n\t\t\t\t\t<option key={device.deviceId} value={device.deviceId}>\n\t\t\t\t\t\t{device.label}\n\t\t\t\t\t</option>\n\t\t\t\t))}\n\t\t\t</select>\n\t\t\t<span className={styles.selectArrow}>\n\t\t\t\t<svg\n\t\t\t\t\twidth=\"16\"\n\t\t\t\t\theight=\"16\"\n\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M4 6L8 10L12 6\"\n\t\t\t\t\t\tstroke=\"#fff\"\n\t\t\t\t\t\tstrokeWidth=\"1.5\"\n\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t</span>\n\t\t</div>\n\t);\n};\n\nexport const MicrophoneButton = memo(() => {\n\tconst { onToggleMicrophone, isMicReady, isMicMuted } = useLocalMicrophone();\n\tconst { microphones, currentMic, setMicrophone } = useDevices();\n\n\treturn (\n\t\t<div className={styles.deviceButtonContainer}>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tonClick={onToggleMicrophone}\n\t\t\t\tdisabled={!isMicReady}\n\t\t\t\tclassName={styles.deviceButton}\n\t\t\t>\n\t\t\t\t<span className={styles.deviceButtonIcon}>\n\t\t\t\t\t{isMicMuted || !isMicReady ? (\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\taria-label=\"Microphone Muted\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M12 18C10.1435 18 8.36301 17.2625 7.05025 15.9497C5.7375 14.637 5 12.8565 5 11V10M12 18C13.8565 18 15.637 17.2625 16.9497 15.9497C18.2625 14.637 18.1339 14.0992 18.1339 14.0992M12 18V21\"\n\t\t\t\t\t\t\t\tstroke=\"#020617\"\n\t\t\t\t\t\t\t\tstrokeWidth=\"1.66667\"\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\t\tx=\"1.30225\"\n\t\t\t\t\t\t\t\ty=\"3\"\n\t\t\t\t\t\t\t\twidth=\"26\"\n\t\t\t\t\t\t\t\theight=\"2.24738\"\n\t\t\t\t\t\t\t\trx=\"1.12369\"\n\t\t\t\t\t\t\t\ttransform=\"rotate(30 1.30225 3)\"\n\t\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\t\t\td=\"M9 9.39031V11C9 11.7956 9.31607 12.5587 9.87868 13.1213C10.4413 13.6839 11.2044 14 12 14C12.7956 14 13.5587 13.6839 14.1213 13.1213C14.2829 12.9597 14.4242 12.7816 14.5435 12.5908L9 9.39031ZM15 7.71466V6C15 5.20435 14.6839 4.44129 14.1213 3.87868C13.5587 3.31607 12.7956 3 12 3C11.2044 3 10.4413 3.31607 9.87868 3.87868C9.69528 4.06208 9.53807 4.26678 9.40948 4.48697L15 7.71466Z\"\n\t\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M9 9.39031L9.41667 8.66862C9.15883 8.51976 8.84117 8.51976 8.58333 8.66862C8.3255 8.81748 8.16667 9.09259 8.16667 9.39031H9ZM9.87868 13.1213L9.28942 13.7106H9.28942L9.87868 13.1213ZM14.1213 13.1213L14.7106 13.7106L14.7106 13.7106L14.1213 13.1213ZM14.5435 12.5908L15.25 13.0327C15.3699 12.841 15.4068 12.6088 15.3521 12.3894C15.2974 12.17 15.156 11.9822 14.9601 11.8692L14.5435 12.5908ZM15 7.71466L14.5833 8.43635C14.8412 8.58521 15.1588 8.58521 15.4167 8.43635C15.6745 8.28749 15.8333 8.01238 15.8333 7.71466H15ZM14.1213 3.87868L14.7106 3.28942L14.7106 3.28942L14.1213 3.87868ZM9.87868 3.87868L9.28942 3.28942L9.28942 3.28942L9.87868 3.87868ZM9.40948 4.48697L8.68988 4.06671C8.57806 4.25818 8.54715 4.48633 8.604 4.70065C8.66086 4.91497 8.80078 5.09779 8.99281 5.20866L9.40948 4.48697ZM9.83333 11V9.39031H8.16667V11H9.83333ZM10.4679 12.5321C10.0616 12.1257 9.83333 11.5746 9.83333 11H8.16667C8.16667 12.0167 8.57053 12.9917 9.28942 13.7106L10.4679 12.5321ZM12 13.1667C11.4254 13.1667 10.8743 12.9384 10.4679 12.5321L9.28942 13.7106C10.0083 14.4295 10.9833 14.8333 12 14.8333V13.1667ZM13.5321 12.5321C13.1257 12.9384 12.5746 13.1667 12 13.1667V14.8333C13.0167 14.8333 13.9917 14.4295 14.7106 13.7106L13.5321 12.5321ZM13.837 12.149C13.7508 12.2867 13.6488 12.4153 13.5321 12.5321L14.7106 13.7106C14.917 13.5041 15.0976 13.2764 15.25 13.0327L13.837 12.149ZM14.9601 11.8692L9.41667 8.66862L8.58333 10.112L14.1268 13.3125L14.9601 11.8692ZM14.1667 6V7.71466H15.8333V6H14.1667ZM13.5321 4.46794C13.9384 4.87426 14.1667 5.42536 14.1667 6H15.8333C15.8333 4.98334 15.4295 4.00831 14.7106 3.28942L13.5321 4.46794ZM12 3.83333C12.5746 3.83333 13.1257 4.06161 13.5321 4.46794L14.7106 3.28942C13.9917 2.57053 13.0167 2.16667 12 2.16667V3.83333ZM10.4679 4.46794C10.8743 4.06161 11.4254 3.83333 12 3.83333V2.16667C10.9833 2.16667 10.0083 2.57053 9.28942 3.28942L10.4679 4.46794ZM10.1291 4.90724C10.2219 4.74824 10.3354 4.60042 10.4679 4.46794L9.28942 3.28942C9.05511 3.52374 8.85421 3.78533 8.68988 4.06671L10.1291 4.90724ZM8.99281 5.20866L14.5833 8.43635L15.4167 6.99298L9.82615 3.76529L8.99281 5.20866Z\"\n\t\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\taria-label=\"Microphone\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M9 6C9 5.20435 9.31607 4.44129 9.87868 3.87868C10.4413 3.31607 11.2044 3 12 3C12.7956 3 13.5587 3.31607 14.1213 3.87868C14.6839 4.44129 15 5.20435 15 6V11C15 11.7956 14.6839 12.5587 14.1213 13.1213C13.5587 13.6839 12.7956 14 12 14C11.2044 14 10.4413 13.6839 9.87868 13.1213C9.31607 12.5587 9 11.7956 9 11V6Z\"\n\t\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t\t\tstroke=\"#020617\"\n\t\t\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M12 18C10.1435 18 8.36301 17.2625 7.05025 15.9497C5.7375 14.637 5 12.8565 5 11V10M12 18C13.8565 18 15.637 17.2625 16.9497 15.9497C18.2625 14.637 19 12.8565 19 11V10M12 18V21\"\n\t\t\t\t\t\t\t\tstroke=\"#020617\"\n\t\t\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t)}\n\t\t\t\t</span>\n\t\t\t\t<span className={styles.srOnly}>Microphone</span>\n\t\t\t</button>\n\t\t\t<SelectDevice\n\t\t\t\tvalue={currentMic?.device?.deviceId}\n\t\t\t\tdevices={microphones || []}\n\t\t\t\tdisabled={!isMicReady}\n\t\t\t\tonChange={(val) => setMicrophone(val)}\n\t\t\t/>\n\t\t</div>\n\t);\n});\n\nMicrophoneButton.displayName = 'MicrophoneButton';\n\nexport const CameraButton = memo(() => {\n\tconst { onToggleCamera, isCamReady, isCamMuted } = useLocalCamera();\n\tconst { currentCam, cameras, setCamera } = useDevices();\n\n\treturn (\n\t\t<div className={styles.deviceButtonContainer}>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tonClick={onToggleCamera}\n\t\t\t\tdisabled={!isCamReady || !currentCam}\n\t\t\t\tclassName={styles.deviceButton}\n\t\t\t>\n\t\t\t\t<span>\n\t\t\t\t\t{isCamMuted ? (\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\taria-label=\"Camera Muted\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<g clipPath=\"url(#clip0_7082_14220)\">\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\t\t\t\td=\"M3.19874 5.60093C3.08628 5.68537 2.97928 5.77808 2.87868 5.87868C2.31607 6.44129 2 7.20435 2 8V16C2 16.7956 2.31607 17.5587 2.87868 18.1213C3.44129 18.6839 4.20435 19 5 19H15C15.7956 19 16.5587 18.6839 17.1213 18.1213C17.6839 17.5587 18 16.7956 18 16V15.048C17.7787 14.8204 17.5304 14.6189 17.2595 14.4485L3.19874 5.60093ZM22 12.655V8C22 7.80225 21.9413 7.60895 21.8314 7.44454C21.7215 7.28013 21.5654 7.15199 21.3827 7.07632C21.2 7.00065 20.9989 6.98085 20.805 7.01942C20.611 7.05798 20.4329 7.15319 20.293 7.293L18 9.586V8C18 7.20435 17.6839 6.44129 17.1213 5.87868C16.5587 5.31607 15.7956 5 15 5H8.7412L22 12.655Z\"\n\t\t\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\t\t\tx=\"0.777222\"\n\t\t\t\t\t\t\t\t\ty=\"2.64844\"\n\t\t\t\t\t\t\t\t\twidth=\"26.7988\"\n\t\t\t\t\t\t\t\t\theight=\"2.24738\"\n\t\t\t\t\t\t\t\t\trx=\"1.12369\"\n\t\t\t\t\t\t\t\t\ttransform=\"rotate(30 0.777222 2.64844)\"\n\t\t\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t<defs>\n\t\t\t\t\t\t\t\t<clipPath id=\"clip0_7082_14220\">\n\t\t\t\t\t\t\t\t\t<rect width=\"24\" height=\"24\" fill=\"white\" />\n\t\t\t\t\t\t\t\t</clipPath>\n\t\t\t\t\t\t\t</defs>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\taria-label=\"Camera\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\t\t\td=\"M5 5C4.20435 5 3.44129 5.31607 2.87868 5.87868C2.31607 6.44129 2 7.20435 2 8V16C2 16.7956 2.31607 17.5587 2.87868 18.1213C3.44129 18.6839 4.20435 19 5 19H15C15.7956 19 16.5587 18.6839 17.1213 18.1213C17.6839 17.5587 18 16.7956 18 16V14.414L20.293 16.707C20.4329 16.8468 20.611 16.942 20.805 16.9806C20.9989 17.0192 21.2 16.9993 21.3827 16.9237C21.5654 16.848 21.7215 16.7199 21.8314 16.5555C21.9413 16.391 22 16.1978 22 16V8C22 7.80225 21.9413 7.60895 21.8314 7.44454C21.7215 7.28013 21.5654 7.15199 21.3827 7.07632C21.2 7.00065 20.9989 6.98085 20.805 7.01942C20.611 7.05798 20.4329 7.15319 20.293 7.293L18 9.586V8C18 7.20435 17.6839 6.44129 17.1213 5.87868C16.5587 5.31607 15.7956 5 15 5H5Z\"\n\t\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t)}\n\t\t\t\t</span>\n\t\t\t\t<span className={styles.srOnly}>Camera</span>\n\t\t\t</button>\n\t\t\t<SelectDevice\n\t\t\t\tvalue={currentCam?.device?.deviceId}\n\t\t\t\tdevices={cameras || []}\n\t\t\t\tdisabled={!isCamReady}\n\t\t\t\tonChange={(val) => setCamera(val)}\n\t\t\t/>\n\t\t</div>\n\t);\n});\n\nCameraButton.displayName = 'CameraButton';\n\nexport const ScreenShareButton = memo(() => {\n\tconst { onToggleScreenshare, isScreenSharing } = useLocalScreenshare();\n\n\treturn (\n\t\t<button type=\"button\" onClick={onToggleScreenshare} className={styles.deviceButton}>\n\t\t\t<span>\n\t\t\t\t{isScreenSharing ? (\n\t\t\t\t\t<svg\n\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\taria-label=\"Screen Share\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M21.0008 19C21.2557 19.0003 21.5009 19.0979 21.6862 19.2728C21.8715 19.4478 21.9831 19.687 21.998 19.9414C22.013 20.1958 21.9302 20.4464 21.7666 20.6418C21.603 20.8373 21.3709 20.9629 21.1178 20.993L21.0008 21H3.00085C2.74597 20.9997 2.50081 20.9021 2.31548 20.7272C2.13014 20.5522 2.01861 20.313 2.00367 20.0586C1.98874 19.8042 2.07152 19.5536 2.23511 19.3582C2.3987 19.1627 2.63075 19.0371 2.88385 19.007L3.00085 19H21.0008ZM19.0008 4C19.5054 3.99984 19.9914 4.19041 20.3614 4.5335C20.7314 4.87659 20.958 5.34684 20.9958 5.85L21.0008 6V16C21.001 16.5046 20.8104 16.9906 20.4673 17.3605C20.1243 17.7305 19.654 17.9572 19.1508 17.995L19.0008 18H5.00085C4.49627 18.0002 4.01028 17.8096 3.6403 17.4665C3.27032 17.1234 3.04369 16.6532 3.00585 16.15L3.00085 16V6C3.00069 5.49542 3.19125 5.00943 3.53434 4.63945C3.87743 4.26947 4.34769 4.04284 4.85085 4.005L5.00085 4H19.0008Z\"\n\t\t\t\t\t\t\tfill=\"#2D65FF\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</svg>\n\t\t\t\t) : (\n\t\t\t\t\t<svg\n\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\taria-label=\"Screen Share\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M20.9999 19C21.2547 19.0003 21.4999 19.0979 21.6852 19.2728C21.8706 19.4478 21.9821 19.687 21.997 19.9414C22.012 20.1958 21.9292 20.4464 21.7656 20.6418C21.602 20.8373 21.37 20.9629 21.1169 20.993L20.9999 21H2.99987C2.74499 20.9997 2.49984 20.9021 2.3145 20.7272C2.12916 20.5522 2.01763 20.313 2.0027 20.0586C1.98776 19.8042 2.07054 19.5536 2.23413 19.3582C2.39772 19.1627 2.62977 19.0371 2.88287 19.007L2.99987 19H20.9999ZM18.9999 4C19.5044 3.99984 19.9904 4.19041 20.3604 4.5335C20.7304 4.87659 20.957 5.34684 20.9949 5.85L20.9999 6V16C21 16.5046 20.8095 16.9906 20.4664 17.3605C20.1233 17.7305 19.653 17.9572 19.1499 17.995L18.9999 18H4.99987C4.49529 18.0002 4.0093 17.8096 3.63932 17.4665C3.26934 17.1234 3.04271 16.6532 3.00487 16.15L2.99987 16V6C2.99971 5.49542 3.19028 5.00943 3.53337 4.63945C3.87646 4.26947 4.34671 4.04284 4.84987 4.005L4.99987 4H18.9999Z\"\n\t\t\t\t\t\t\tfill=\"white\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</svg>\n\t\t\t\t)}\n\t\t\t</span>\n\t\t</button>\n\t);\n});\n\nScreenShareButton.displayName = 'ScreenShareButton';\n";
|
|
232576
|
-
var styles$
|
|
232577
|
-
var
|
|
232684
|
+
var type$d = "components";
|
|
232685
|
+
var content$d = "import React, { useCallback, useRef, memo } from 'react';\nimport { useActiveSpeakerId } from '@daily-co/daily-react';\nimport { useAudioLevelObserver } from '@daily-co/daily-react';\nimport styles from './audio-wave.module.css';\n\nexport const AudioWave = memo(({ id }) => {\n\tconst activeSpeakerId = useActiveSpeakerId();\n\tconst isActiveSpeaker = activeSpeakerId === id;\n\n\tconst leftBarRef = useRef(null);\n\tconst centerBarRef = useRef(null);\n\tconst rightBarRef = useRef(null);\n\tconst animationFrameRef = useRef(undefined);\n\n\tuseAudioLevelObserver(\n\t\tid,\n\t\tuseCallback((volume) => {\n\t\t\t// Cancel any pending animation frame to prevent accumulation\n\t\t\tif (animationFrameRef.current) {\n\t\t\t\tcancelAnimationFrame(animationFrameRef.current);\n\t\t\t}\n\n\t\t\t// Use requestAnimationFrame to batch DOM updates\n\t\t\tanimationFrameRef.current = requestAnimationFrame(() => {\n\t\t\t\tconst scaledVolume = Number(Math.max(0.01, volume).toFixed(2));\n\t\t\t\tif (leftBarRef.current && centerBarRef.current && rightBarRef.current) {\n\t\t\t\t\tleftBarRef.current.style.height = `${20 + scaledVolume * 40}%`;\n\t\t\t\t\tcenterBarRef.current.style.height = `${20 + scaledVolume * 130}%`;\n\t\t\t\t\trightBarRef.current.style.height = `${20 + scaledVolume * 40}%`;\n\t\t\t\t}\n\t\t\t});\n\t\t}, [])\n\t);\n\n\treturn (\n\t\t<div className={styles.container}>\n\t\t\t<div className={styles.waveContainer}>\n\t\t\t\t<div\n\t\t\t\t\tref={leftBarRef}\n\t\t\t\t\tclassName={`${styles.bar} ${!isActiveSpeaker ? styles.barInactive : ''}`}\n\t\t\t\t/>\n\n\t\t\t\t<div\n\t\t\t\t\tref={centerBarRef}\n\t\t\t\t\tclassName={`${styles.bar} ${!isActiveSpeaker ? styles.barInactive : ''}`}\n\t\t\t\t/>\n\n\t\t\t\t<div\n\t\t\t\t\tref={rightBarRef}\n\t\t\t\t\tclassName={`${styles.bar} ${!isActiveSpeaker ? styles.barInactive : ''}`}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n});\n\nAudioWave.displayName = 'AudioWave';\n";
|
|
232686
|
+
var styles$d = ".container {\n\toverflow: hidden;\n\tborder: 1px solid white;\n\twidth: 1.5rem;\n\theight: 1.5rem;\n\tborder-radius: 9999px;\n\twill-change: transform;\n\ttransform: translateZ(0);\n}\n\n.waveContainer {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tgap: 0.125rem;\n\twidth: 100%;\n\theight: 100%;\n}\n\n.bar {\n\twidth: 0.25rem;\n\theight: 0.25rem;\n\tbackground-color: white;\n\tborder-radius: 9999px;\n\ttransition: height 200ms ease-out;\n\twill-change: height;\n\ttransform: translateZ(0);\n}\n\n.barInactive {\n\twidth: 0.25rem !important;\n\theight: 0.25rem !important;\n}\n";
|
|
232687
|
+
var audioWave = {
|
|
232688
|
+
type: type$d,
|
|
232689
|
+
content: content$d,
|
|
232690
|
+
styles: styles$d
|
|
232691
|
+
};
|
|
232692
|
+
|
|
232693
|
+
var type$c = "components";
|
|
232694
|
+
var content$c = "import React, { memo } from 'react';\nimport { useDevices } from '@daily-co/daily-react';\nimport { useLocalCamera } from '../../hooks/use-local-camera';\nimport { useLocalMicrophone } from '../../hooks/use-local-microphone';\nimport { useLocalScreenshare } from '../../hooks/use-local-screenshare';\nimport styles from './controls.module.css';\n\nexport const SelectDevice = ({ value, devices, disabled, onChange }) => {\n\treturn (\n\t\t<div className={styles.selectDeviceContainer}>\n\t\t\t<select\n\t\t\t\tvalue={value}\n\t\t\t\tonChange={(e) => onChange(e.target.value)}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tclassName={styles.selectDevice}\n\t\t\t>\n\t\t\t\t{devices.map(({ device }) => (\n\t\t\t\t\t<option key={device.deviceId} value={device.deviceId}>\n\t\t\t\t\t\t{device.label}\n\t\t\t\t\t</option>\n\t\t\t\t))}\n\t\t\t</select>\n\t\t\t<span className={styles.selectArrow}>\n\t\t\t\t<svg\n\t\t\t\t\twidth=\"16\"\n\t\t\t\t\theight=\"16\"\n\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M4 6L8 10L12 6\"\n\t\t\t\t\t\tstroke=\"#fff\"\n\t\t\t\t\t\tstrokeWidth=\"1.5\"\n\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t</span>\n\t\t</div>\n\t);\n};\n\nexport const MicrophoneButton = memo(() => {\n\tconst { onToggleMicrophone, isMicReady, isMicMuted } = useLocalMicrophone();\n\tconst { microphones, currentMic, setMicrophone } = useDevices();\n\n\treturn (\n\t\t<div className={styles.deviceButtonContainer}>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tonClick={onToggleMicrophone}\n\t\t\t\tdisabled={!isMicReady}\n\t\t\t\tclassName={styles.deviceButton}\n\t\t\t>\n\t\t\t\t<span className={styles.deviceButtonIcon}>\n\t\t\t\t\t{isMicMuted || !isMicReady ? (\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\taria-label=\"Microphone Muted\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M12 18C10.1435 18 8.36301 17.2625 7.05025 15.9497C5.7375 14.637 5 12.8565 5 11V10M12 18C13.8565 18 15.637 17.2625 16.9497 15.9497C18.2625 14.637 18.1339 14.0992 18.1339 14.0992M12 18V21\"\n\t\t\t\t\t\t\t\tstroke=\"#020617\"\n\t\t\t\t\t\t\t\tstrokeWidth=\"1.66667\"\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\t\tx=\"1.30225\"\n\t\t\t\t\t\t\t\ty=\"3\"\n\t\t\t\t\t\t\t\twidth=\"26\"\n\t\t\t\t\t\t\t\theight=\"2.24738\"\n\t\t\t\t\t\t\t\trx=\"1.12369\"\n\t\t\t\t\t\t\t\ttransform=\"rotate(30 1.30225 3)\"\n\t\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\t\t\td=\"M9 9.39031V11C9 11.7956 9.31607 12.5587 9.87868 13.1213C10.4413 13.6839 11.2044 14 12 14C12.7956 14 13.5587 13.6839 14.1213 13.1213C14.2829 12.9597 14.4242 12.7816 14.5435 12.5908L9 9.39031ZM15 7.71466V6C15 5.20435 14.6839 4.44129 14.1213 3.87868C13.5587 3.31607 12.7956 3 12 3C11.2044 3 10.4413 3.31607 9.87868 3.87868C9.69528 4.06208 9.53807 4.26678 9.40948 4.48697L15 7.71466Z\"\n\t\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M9 9.39031L9.41667 8.66862C9.15883 8.51976 8.84117 8.51976 8.58333 8.66862C8.3255 8.81748 8.16667 9.09259 8.16667 9.39031H9ZM9.87868 13.1213L9.28942 13.7106H9.28942L9.87868 13.1213ZM14.1213 13.1213L14.7106 13.7106L14.7106 13.7106L14.1213 13.1213ZM14.5435 12.5908L15.25 13.0327C15.3699 12.841 15.4068 12.6088 15.3521 12.3894C15.2974 12.17 15.156 11.9822 14.9601 11.8692L14.5435 12.5908ZM15 7.71466L14.5833 8.43635C14.8412 8.58521 15.1588 8.58521 15.4167 8.43635C15.6745 8.28749 15.8333 8.01238 15.8333 7.71466H15ZM14.1213 3.87868L14.7106 3.28942L14.7106 3.28942L14.1213 3.87868ZM9.87868 3.87868L9.28942 3.28942L9.28942 3.28942L9.87868 3.87868ZM9.40948 4.48697L8.68988 4.06671C8.57806 4.25818 8.54715 4.48633 8.604 4.70065C8.66086 4.91497 8.80078 5.09779 8.99281 5.20866L9.40948 4.48697ZM9.83333 11V9.39031H8.16667V11H9.83333ZM10.4679 12.5321C10.0616 12.1257 9.83333 11.5746 9.83333 11H8.16667C8.16667 12.0167 8.57053 12.9917 9.28942 13.7106L10.4679 12.5321ZM12 13.1667C11.4254 13.1667 10.8743 12.9384 10.4679 12.5321L9.28942 13.7106C10.0083 14.4295 10.9833 14.8333 12 14.8333V13.1667ZM13.5321 12.5321C13.1257 12.9384 12.5746 13.1667 12 13.1667V14.8333C13.0167 14.8333 13.9917 14.4295 14.7106 13.7106L13.5321 12.5321ZM13.837 12.149C13.7508 12.2867 13.6488 12.4153 13.5321 12.5321L14.7106 13.7106C14.917 13.5041 15.0976 13.2764 15.25 13.0327L13.837 12.149ZM14.9601 11.8692L9.41667 8.66862L8.58333 10.112L14.1268 13.3125L14.9601 11.8692ZM14.1667 6V7.71466H15.8333V6H14.1667ZM13.5321 4.46794C13.9384 4.87426 14.1667 5.42536 14.1667 6H15.8333C15.8333 4.98334 15.4295 4.00831 14.7106 3.28942L13.5321 4.46794ZM12 3.83333C12.5746 3.83333 13.1257 4.06161 13.5321 4.46794L14.7106 3.28942C13.9917 2.57053 13.0167 2.16667 12 2.16667V3.83333ZM10.4679 4.46794C10.8743 4.06161 11.4254 3.83333 12 3.83333V2.16667C10.9833 2.16667 10.0083 2.57053 9.28942 3.28942L10.4679 4.46794ZM10.1291 4.90724C10.2219 4.74824 10.3354 4.60042 10.4679 4.46794L9.28942 3.28942C9.05511 3.52374 8.85421 3.78533 8.68988 4.06671L10.1291 4.90724ZM8.99281 5.20866L14.5833 8.43635L15.4167 6.99298L9.82615 3.76529L8.99281 5.20866Z\"\n\t\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\taria-label=\"Microphone\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M9 6C9 5.20435 9.31607 4.44129 9.87868 3.87868C10.4413 3.31607 11.2044 3 12 3C12.7956 3 13.5587 3.31607 14.1213 3.87868C14.6839 4.44129 15 5.20435 15 6V11C15 11.7956 14.6839 12.5587 14.1213 13.1213C13.5587 13.6839 12.7956 14 12 14C11.2044 14 10.4413 13.6839 9.87868 13.1213C9.31607 12.5587 9 11.7956 9 11V6Z\"\n\t\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t\t\tstroke=\"#020617\"\n\t\t\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M12 18C10.1435 18 8.36301 17.2625 7.05025 15.9497C5.7375 14.637 5 12.8565 5 11V10M12 18C13.8565 18 15.637 17.2625 16.9497 15.9497C18.2625 14.637 19 12.8565 19 11V10M12 18V21\"\n\t\t\t\t\t\t\t\tstroke=\"#020617\"\n\t\t\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t)}\n\t\t\t\t</span>\n\t\t\t\t<span className={styles.srOnly}>Microphone</span>\n\t\t\t</button>\n\t\t\t<SelectDevice\n\t\t\t\tvalue={currentMic?.device?.deviceId}\n\t\t\t\tdevices={microphones || []}\n\t\t\t\tdisabled={!isMicReady}\n\t\t\t\tonChange={(val) => setMicrophone(val)}\n\t\t\t/>\n\t\t</div>\n\t);\n});\n\nMicrophoneButton.displayName = 'MicrophoneButton';\n\nexport const CameraButton = memo(() => {\n\tconst { onToggleCamera, isCamReady, isCamMuted } = useLocalCamera();\n\tconst { currentCam, cameras, setCamera } = useDevices();\n\n\treturn (\n\t\t<div className={styles.deviceButtonContainer}>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tonClick={onToggleCamera}\n\t\t\t\tdisabled={!isCamReady || !currentCam}\n\t\t\t\tclassName={styles.deviceButton}\n\t\t\t>\n\t\t\t\t<span className={styles.deviceButtonIcon}>\n\t\t\t\t\t{isCamMuted ? (\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\taria-label=\"Camera Muted\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<g clipPath=\"url(#clip0_7082_14220)\">\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\t\t\t\td=\"M3.19874 5.60093C3.08628 5.68537 2.97928 5.77808 2.87868 5.87868C2.31607 6.44129 2 7.20435 2 8V16C2 16.7956 2.31607 17.5587 2.87868 18.1213C3.44129 18.6839 4.20435 19 5 19H15C15.7956 19 16.5587 18.6839 17.1213 18.1213C17.6839 17.5587 18 16.7956 18 16V15.048C17.7787 14.8204 17.5304 14.6189 17.2595 14.4485L3.19874 5.60093ZM22 12.655V8C22 7.80225 21.9413 7.60895 21.8314 7.44454C21.7215 7.28013 21.5654 7.15199 21.3827 7.07632C21.2 7.00065 20.9989 6.98085 20.805 7.01942C20.611 7.05798 20.4329 7.15319 20.293 7.293L18 9.586V8C18 7.20435 17.6839 6.44129 17.1213 5.87868C16.5587 5.31607 15.7956 5 15 5H8.7412L22 12.655Z\"\n\t\t\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\t\t\tx=\"0.777222\"\n\t\t\t\t\t\t\t\t\ty=\"2.64844\"\n\t\t\t\t\t\t\t\t\twidth=\"26.7988\"\n\t\t\t\t\t\t\t\t\theight=\"2.24738\"\n\t\t\t\t\t\t\t\t\trx=\"1.12369\"\n\t\t\t\t\t\t\t\t\ttransform=\"rotate(30 0.777222 2.64844)\"\n\t\t\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t<defs>\n\t\t\t\t\t\t\t\t<clipPath id=\"clip0_7082_14220\">\n\t\t\t\t\t\t\t\t\t<rect width=\"24\" height=\"24\" fill=\"white\" />\n\t\t\t\t\t\t\t\t</clipPath>\n\t\t\t\t\t\t\t</defs>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\taria-label=\"Camera\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\t\t\td=\"M5 5C4.20435 5 3.44129 5.31607 2.87868 5.87868C2.31607 6.44129 2 7.20435 2 8V16C2 16.7956 2.31607 17.5587 2.87868 18.1213C3.44129 18.6839 4.20435 19 5 19H15C15.7956 19 16.5587 18.6839 17.1213 18.1213C17.6839 17.5587 18 16.7956 18 16V14.414L20.293 16.707C20.4329 16.8468 20.611 16.942 20.805 16.9806C20.9989 17.0192 21.2 16.9993 21.3827 16.9237C21.5654 16.848 21.7215 16.7199 21.8314 16.5555C21.9413 16.391 22 16.1978 22 16V8C22 7.80225 21.9413 7.60895 21.8314 7.44454C21.7215 7.28013 21.5654 7.15199 21.3827 7.07632C21.2 7.00065 20.9989 6.98085 20.805 7.01942C20.611 7.05798 20.4329 7.15319 20.293 7.293L18 9.586V8C18 7.20435 17.6839 6.44129 17.1213 5.87868C16.5587 5.31607 15.7956 5 15 5H5Z\"\n\t\t\t\t\t\t\t\tfill=\"#020617\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t)}\n\t\t\t\t</span>\n\t\t\t\t<span className={styles.srOnly}>Camera</span>\n\t\t\t</button>\n\t\t\t<SelectDevice\n\t\t\t\tvalue={currentCam?.device?.deviceId}\n\t\t\t\tdevices={cameras || []}\n\t\t\t\tdisabled={!isCamReady}\n\t\t\t\tonChange={(val) => setCamera(val)}\n\t\t\t/>\n\t\t</div>\n\t);\n});\n\nCameraButton.displayName = 'CameraButton';\n\nexport const ScreenShareButton = memo(() => {\n\tconst { onToggleScreenshare, isScreenSharing } = useLocalScreenshare();\n\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tonClick={onToggleScreenshare}\n\t\t\tclassName={`${styles.deviceButtonContainer} ${styles.screenShareButton}`}\n\t\t>\n\t\t\t<span>\n\t\t\t\t{isScreenSharing ? (\n\t\t\t\t\t<svg\n\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\taria-label=\"Screen Share\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M21.0008 19C21.2557 19.0003 21.5009 19.0979 21.6862 19.2728C21.8715 19.4478 21.9831 19.687 21.998 19.9414C22.013 20.1958 21.9302 20.4464 21.7666 20.6418C21.603 20.8373 21.3709 20.9629 21.1178 20.993L21.0008 21H3.00085C2.74597 20.9997 2.50081 20.9021 2.31548 20.7272C2.13014 20.5522 2.01861 20.313 2.00367 20.0586C1.98874 19.8042 2.07152 19.5536 2.23511 19.3582C2.3987 19.1627 2.63075 19.0371 2.88385 19.007L3.00085 19H21.0008ZM19.0008 4C19.5054 3.99984 19.9914 4.19041 20.3614 4.5335C20.7314 4.87659 20.958 5.34684 20.9958 5.85L21.0008 6V16C21.001 16.5046 20.8104 16.9906 20.4673 17.3605C20.1243 17.7305 19.654 17.9572 19.1508 17.995L19.0008 18H5.00085C4.49627 18.0002 4.01028 17.8096 3.6403 17.4665C3.27032 17.1234 3.04369 16.6532 3.00585 16.15L3.00085 16V6C3.00069 5.49542 3.19125 5.00943 3.53434 4.63945C3.87743 4.26947 4.34769 4.04284 4.85085 4.005L5.00085 4H19.0008Z\"\n\t\t\t\t\t\t\tfill=\"#2D65FF\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</svg>\n\t\t\t\t) : (\n\t\t\t\t\t<svg\n\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\taria-label=\"Screen Share\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M20.9999 19C21.2547 19.0003 21.4999 19.0979 21.6852 19.2728C21.8706 19.4478 21.9821 19.687 21.997 19.9414C22.012 20.1958 21.9292 20.4464 21.7656 20.6418C21.602 20.8373 21.37 20.9629 21.1169 20.993L20.9999 21H2.99987C2.74499 20.9997 2.49984 20.9021 2.3145 20.7272C2.12916 20.5522 2.01763 20.313 2.0027 20.0586C1.98776 19.8042 2.07054 19.5536 2.23413 19.3582C2.39772 19.1627 2.62977 19.0371 2.88287 19.007L2.99987 19H20.9999ZM18.9999 4C19.5044 3.99984 19.9904 4.19041 20.3604 4.5335C20.7304 4.87659 20.957 5.34684 20.9949 5.85L20.9999 6V16C21 16.5046 20.8095 16.9906 20.4664 17.3605C20.1233 17.7305 19.653 17.9572 19.1499 17.995L18.9999 18H4.99987C4.49529 18.0002 4.0093 17.8096 3.63932 17.4665C3.26934 17.1234 3.04271 16.6532 3.00487 16.15L2.99987 16V6C2.99971 5.49542 3.19028 5.00943 3.53337 4.63945C3.87646 4.26947 4.34671 4.04284 4.84987 4.005L4.99987 4H18.9999Z\"\n\t\t\t\t\t\t\tfill=\"white\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</svg>\n\t\t\t\t)}\n\t\t\t</span>\n\t\t</button>\n\t);\n});\n\nScreenShareButton.displayName = 'ScreenShareButton';\n";
|
|
232695
|
+
var styles$c = "/* SelectDevice styles */\n.selectDevice {\n\theight: 3rem;\n\twidth: 5.5rem;\n\tborder-radius: 9999px;\n\tbackground-color: rgba(255, 255, 255, 0.2);\n\tpadding: 0 0.75rem;\n\tborder: 1px solid rgba(255, 255, 255, 0.2);\n\tbackdrop-filter: blur(10px);\n\tcolor: transparent;\n\tpadding-right: 2rem; /* space for arrow */\n\tbox-sizing: border-box;\n\t-webkit-appearance: none;\n\t-moz-appearance: none;\n\tappearance: none;\n\tcursor: pointer;\n}\n\n.selectDevice::-ms-expand {\n\tdisplay: none;\n}\n\n.selectDevice option {\n\tcolor: transparent;\n\tbackground-color: transparent;\n}\n\n.selectDevice:focus {\n\toutline: none;\n}\n\n/* Device button container styles */\n.deviceButtonContainer {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tborder-radius: 9999px;\n\tbackdrop-filter: blur(4px);\n}\n\n/* Device button styles */\n.deviceButton {\n\tposition: absolute;\n\tleft: 0;\n\ttop: 0;\n\tz-index: 10;\n\theight: 3rem;\n\twidth: 3rem;\n\tborder-radius: 9999px;\n\tbackground-color: white;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tborder: 1px solid transparent;\n\tcursor: pointer;\n}\n\n.deviceButtonIcon {\n\tdisplay: flex;\n}\n\n.deviceButton:disabled {\n\topacity: 0.5;\n}\n\n/* Screen reader only text */\n.srOnly {\n\tposition: absolute;\n\twidth: 1px;\n\theight: 1px;\n\tpadding: 0;\n\tmargin: -1px;\n\toverflow: hidden;\n\tclip: rect(0, 0, 0, 0);\n\twhite-space: nowrap;\n\tborder-width: 0;\n}\n\n/* Controls container */\n.controlsContainer {\n\tdisplay: flex;\n\tgap: 1rem;\n\tjustify-content: center;\n\talign-items: center;\n}\n\n.selectDeviceContainer {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.selectArrow {\n\tposition: absolute;\n\tright: 1rem;\n\tpointer-events: none;\n\tdisplay: flex;\n\talign-items: center;\n\theight: 100%;\n}\n\n.screenShareButton {\n\tcursor: pointer;\n\tposition: relative;\n\theight: 3rem;\n\twidth: 3rem;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tborder-radius: 9999px;\n\tbackdrop-filter: blur(4px);\n\tbackground-color: rgba(255, 255, 255, 0.2);\n\tborder: 1px solid rgba(255, 255, 255, 0.2);\n}\n";
|
|
232696
|
+
var componentsDependencies$2 = [
|
|
232578
232697
|
"use-local-camera",
|
|
232579
232698
|
"use-local-microphone",
|
|
232580
232699
|
"use-local-screenshare"
|
|
232581
232700
|
];
|
|
232582
232701
|
var controls = {
|
|
232583
|
-
type: type$
|
|
232584
|
-
content: content$
|
|
232585
|
-
styles: styles$
|
|
232702
|
+
type: type$c,
|
|
232703
|
+
content: content$c,
|
|
232704
|
+
styles: styles$c,
|
|
232705
|
+
componentsDependencies: componentsDependencies$2
|
|
232706
|
+
};
|
|
232707
|
+
|
|
232708
|
+
var type$b = "components";
|
|
232709
|
+
var content$b = "import React, { useEffect } from 'react';\nimport {\n\tDailyAudio,\n\tDailyVideo,\n\tuseDaily,\n\tuseDevices,\n\tuseLocalSessionId,\n\tuseMeetingState,\n\tuseScreenVideoTrack,\n\tuseVideoTrack,\n} from '@daily-co/daily-react';\nimport { MicrophoneButton, CameraButton, ScreenShareButton } from '../controls';\nimport { useLocalScreenshare } from '../../hooks/use-local-screenshare';\nimport { useReplicaIDs } from '../../hooks/use-replica-ids';\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\t\t</div>\n\t);\n});\n\nexport const Conversation = React.memo(({ onLeave, conversation }) => {\n\tconst daily = useDaily();\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\tif (conversation?.conversation_url) {\n\t\t\tdaily?.join({\n\t\t\t\turl: conversation.conversation_url,\n\t\t\t});\n\t\t}\n\t}, [conversation, daily]);\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<MicrophoneButton />\n\t\t\t\t\t<CameraButton />\n\t\t\t\t\t<ScreenShareButton />\n\t\t\t\t\t<button type=\"button\" className={styles.leaveButton} onClick={onLeave}>\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\taria-label=\"Leave Call\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M18 6L6 18M6 6L18 18\"\n\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<DailyAudio />\n\t\t</div>\n\t);\n});\n";
|
|
232710
|
+
var styles$b = ".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\tbackground: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);\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/* 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";
|
|
232711
|
+
var componentsDependencies$1 = [
|
|
232712
|
+
"controls",
|
|
232713
|
+
"use-local-screenshare",
|
|
232714
|
+
"use-replica-ids",
|
|
232715
|
+
"audio-wave"
|
|
232716
|
+
];
|
|
232717
|
+
var conversation01 = {
|
|
232718
|
+
type: type$b,
|
|
232719
|
+
content: content$b,
|
|
232720
|
+
styles: styles$b,
|
|
232586
232721
|
componentsDependencies: componentsDependencies$1
|
|
232587
232722
|
};
|
|
232588
232723
|
|
|
232589
|
-
var type$
|
|
232590
|
-
var content$
|
|
232591
|
-
var styles$
|
|
232724
|
+
var type$a = "components";
|
|
232725
|
+
var content$a = "import { DailyProvider } from '@daily-co/daily-react';\n\nexport const CVIProvider = ({ children }) => {\n\treturn <DailyProvider>{children}</DailyProvider>;\n};\n";
|
|
232726
|
+
var styles$a = "";
|
|
232592
232727
|
var cviProvider = {
|
|
232593
|
-
type: type$
|
|
232594
|
-
content: content$
|
|
232595
|
-
styles: styles$
|
|
232728
|
+
type: type$a,
|
|
232729
|
+
content: content$a,
|
|
232730
|
+
styles: styles$a
|
|
232596
232731
|
};
|
|
232597
232732
|
|
|
232598
|
-
var type$
|
|
232599
|
-
var content$
|
|
232600
|
-
var styles$
|
|
232733
|
+
var type$9 = "components";
|
|
232734
|
+
var content$9 = "import React, { memo, useEffect } from 'react';\nimport { DailyVideo, useDaily } from '@daily-co/daily-react';\nimport { CameraButton, MicrophoneButton } from '../controls';\nimport { useStartHaircheck } from '../../hooks/use-start-haircheck';\nimport { useLocalCamera } from '../../hooks/use-local-camera';\n\nimport styles from './hair-check.module.css';\n\nconst JoinBtn = ({ onClick, disabled, className, loading }) => {\n\treturn (\n\t\t<button\n\t\t\tclassName={`${styles.buttonJoin} ${className || ''}`}\n\t\t\ttype=\"button\"\n\t\t\tonClick={onClick}\n\t\t\tdisabled={disabled || loading}\n\t\t>\n\t\t\t<div className={styles.buttonJoinInner}>{loading ? 'Joining...' : 'Join Video Chat'}</div>\n\t\t</button>\n\t);\n};\n\nexport const HairCheck = memo(({ isJoinBtnLoading = false, onJoin, onCancel }) => {\n\tconst daily = useDaily();\n\tconst { localSessionId, isCamMuted } = useLocalCamera();\n\n\tconst {\n\t\tisPermissionsPrompt,\n\t\tisPermissionsLoading,\n\t\tisPermissionsGranted,\n\t\tisPermissionsDenied,\n\t\trequestPermissions,\n\t} = useStartHaircheck();\n\n\tuseEffect(() => {\n\t\trequestPermissions();\n\t}, []);\n\n\tconst onCancelHairCheck = () => {\n\t\tif (daily) {\n\t\t\tdaily.leave();\n\t\t}\n\t\tonCancel?.();\n\t};\n\n\tconst getDescription = () => {\n\t\tif (isPermissionsPrompt) {\n\t\t\treturn 'Make sure your camera and mic are ready!';\n\t\t}\n\t\tif (isPermissionsLoading) {\n\t\t\treturn 'Getting your camera and mic ready...';\n\t\t}\n\t\tif (isPermissionsDenied) {\n\t\t\treturn 'Camera and mic access denied. Allow permissions to continue.';\n\t\t}\n\t\treturn \"You're all set! Your device is ready.\";\n\t};\n\treturn (\n\t\t<div className={styles.haircheckBlock}>\n\t\t\t{isPermissionsGranted && !isCamMuted ? (\n\t\t\t\t<DailyVideo type=\"video\" sessionId={localSessionId} mirror className={styles.dailyVideo} />\n\t\t\t) : (\n\t\t\t\t<div className={styles.haircheckUserPlaceholder}>\n\t\t\t\t\t<span className={styles.haircheckUserIcon}>\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\twidth=\"88\"\n\t\t\t\t\t\t\theight=\"89\"\n\t\t\t\t\t\t\tviewBox=\"0 0 88 89\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\taria-label=\"Haircheck User\"\n\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M44 48.6406C17.952 48.6406 8.80005 61.8406 8.80005 70.6406V83.8406H79.2001V70.6406C79.2001 61.8406 70.0481 48.6406 44 48.6406Z\"\n\t\t\t\t\t\t\t\tfill=\"url(#paint0_linear_7135_21737)\"\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M44 44.2406C54.9352 44.2406 63.7999 35.3759 63.7999 24.4406C63.7999 13.5054 54.9352 4.64062 44 4.64062C33.0647 4.64062 24.2 13.5054 24.2 24.4406C24.2 35.3759 33.0647 44.2406 44 44.2406Z\"\n\t\t\t\t\t\t\t\tfill=\"url(#paint1_linear_7135_21737)\"\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<defs>\n\t\t\t\t\t\t\t\t<linearGradient\n\t\t\t\t\t\t\t\t\tid=\"paint0_linear_7135_21737\"\n\t\t\t\t\t\t\t\t\tx1=\"36.5001\"\n\t\t\t\t\t\t\t\t\ty1=\"43\"\n\t\t\t\t\t\t\t\t\tx2=\"44.0001\"\n\t\t\t\t\t\t\t\t\ty2=\"97.5\"\n\t\t\t\t\t\t\t\t\tgradientUnits=\"userSpaceOnUse\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<stop stopColor=\"white\" />\n\t\t\t\t\t\t\t\t\t<stop offset=\"1\" stopColor=\"white\" stopOpacity=\"0\" />\n\t\t\t\t\t\t\t\t</linearGradient>\n\t\t\t\t\t\t\t\t<linearGradient\n\t\t\t\t\t\t\t\t\tid=\"paint1_linear_7135_21737\"\n\t\t\t\t\t\t\t\t\tx1=\"44\"\n\t\t\t\t\t\t\t\t\ty1=\"4.64062\"\n\t\t\t\t\t\t\t\t\tx2=\"44\"\n\t\t\t\t\t\t\t\t\ty2=\"44.2406\"\n\t\t\t\t\t\t\t\t\tgradientUnits=\"userSpaceOnUse\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<stop stopColor=\"white\" />\n\t\t\t\t\t\t\t\t\t<stop offset=\"1\" stopColor=\"white\" stopOpacity=\"0\" />\n\t\t\t\t\t\t\t\t</linearGradient>\n\t\t\t\t\t\t\t</defs>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t<div className={styles.haircheckSidebar}>\n\t\t\t\t<div className={styles.haircheckSidebarContent}>\n\t\t\t\t\t{isPermissionsDenied ? (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tonClick={onCancelHairCheck}\n\t\t\t\t\t\t\tclassName={`${styles.buttonCancel} ${styles.buttonJoinMobile}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tCancel\n\t\t\t\t\t\t</button>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<JoinBtn\n\t\t\t\t\t\t\tloading={isJoinBtnLoading}\n\t\t\t\t\t\t\tdisabled={!isPermissionsGranted}\n\t\t\t\t\t\t\tclassName={styles.buttonJoinMobile}\n\t\t\t\t\t\t\tonClick={onJoin}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t<div />\n\t\t\t\t\t<div className={styles.haircheckContent}>\n\t\t\t\t\t\t<div className={styles.haircheckDescription}>{getDescription()}</div>\n\t\t\t\t\t\t{isPermissionsDenied ? (\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tonClick={onCancelHairCheck}\n\t\t\t\t\t\t\t\tclassName={`${styles.buttonCancel} ${styles.buttonJoinDesktop}`}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tCancel\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<JoinBtn\n\t\t\t\t\t\t\t\tloading={isJoinBtnLoading}\n\t\t\t\t\t\t\t\tdisabled={!isPermissionsGranted}\n\t\t\t\t\t\t\t\tclassName={styles.buttonJoinDesktop}\n\t\t\t\t\t\t\t\tonClick={onJoin}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className={styles.haircheckControls}>\n\t\t\t\t\t\t<MicrophoneButton />\n\t\t\t\t\t\t<CameraButton />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n});\n\nHairCheck.displayName = 'HairCheck';\n";
|
|
232735
|
+
var styles$9 = "/* Button Component */\n/* Start of Selection */\n.buttonCancel {\n\tpadding: 1rem;\n\tborder: 1px solid rgba(255, 255, 255, 0.1);\n\tbackground-color: rgba(239, 68, 68, 0.8);\n\tborder-radius: 9999px;\n\tcolor: white;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-weight: 500;\n\tcursor: pointer;\n\ttransition: all 0.2s;\n\toutline: none;\n}\n\n.buttonCancel:hover {\n\tbackground-color: rgba(239, 68, 68, 1);\n}\n/* End of Selection */\n\n/* ButtonJoin Component */\n.buttonJoin {\n\tpadding: 5px;\n\tborder: 1px solid rgba(255, 255, 255, 0.1);\n\tbackground-color: rgba(255, 255, 255, 0.1);\n\tborder-radius: 9999px;\n\tcolor: white;\n\theight: 3.625rem;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-weight: 500;\n\tcursor: pointer;\n}\n\n.buttonJoinInner {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground-color: #32c75c;\n\tborder-radius: 9999px;\n\tpadding: 1rem;\n\tbox-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n\theight: 3rem;\n\ttransition: background-color 0.2s;\n\tfont-weight: 500;\n\tmin-width: 8.5rem;\n}\n\n.buttonJoin:hover .buttonJoinInner {\n\tbackground-color: rgba(62, 192, 97, 0.9);\n}\n\n.buttonJoin:disabled .buttonJoinInner {\n\tbackground-color: rgba(34, 197, 94, 0.5);\n\tcursor: not-allowed;\n}\n\n.buttonJoinDesktop {\n\tdisplay: none;\n}\n\n@media (min-width: 768px) {\n\t.buttonJoinDesktop {\n\t\tdisplay: flex;\n\t}\n}\n\n.buttonJoinMobile {\n\tposition: absolute;\n\ttop: -5.125rem;\n\tleft: 50%;\n\ttransform: translateX(-50%);\n\tz-index: 20;\n}\n\n@media (min-width: 768px) {\n\t.buttonJoinMobile {\n\t\tdisplay: none;\n\t}\n}\n\n/* HaircheckScreen Component */\n.haircheckBlock {\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}\n\n@media (min-width: 768px) {\n\t.haircheckBlock {\n\t\taspect-ratio: 16/9;\n\t}\n}\n\n.dailyVideo {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover !important;\n\tposition: absolute;\n\tinset: 0;\n\ttransition: opacity 0.3s ease-in-out;\n}\n\n.haircheckUserPlaceholder {\n\tposition: absolute;\n\tinset: 0;\n\tbackground-color: #334155;\n\tz-index: 5;\n\tpointer-events: none;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.haircheckUserIcon {\n\twidth: 12.5rem;\n\theight: 12.5rem;\n\tborder-radius: 9999px;\n\tbackground-color: rgba(255, 255, 255, 0.1);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.haircheckSidebar {\n\tposition: absolute;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\twidth: 100%;\n\tbackground-color: rgba(2, 6, 23, 0.45);\n\tbackdrop-filter: blur(20px);\n\tborder-left: 1px solid rgba(255, 255, 255, 0.2);\n\tz-index: 5;\n}\n\n@media (min-width: 768px) {\n\t.haircheckSidebar {\n\t\tleft: auto;\n\t\ttop: 0;\n\t\tbottom: 0;\n\t\twidth: 17.5rem;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.haircheckSidebar {\n\t\twidth: 23rem;\n\t}\n}\n\n.haircheckSidebarContent {\n\tposition: relative;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 1.5rem 1.25rem;\n\tgap: 1.5rem;\n\twidth: 100%;\n\theight: 100%;\n}\n\n@media (min-width: 768px) {\n\t.haircheckSidebarContent {\n\t\tpadding: 1rem 1.25rem;\n\t}\n}\n\n@media (min-width: 1024px) {\n\t.haircheckSidebarContent {\n\t\tpadding: 2rem 1.25rem;\n\t}\n}\n\n.haircheckContent {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 2rem;\n}\n\n.haircheckDescription {\n\tcolor: #ffffff;\n\tfont-size: 1.125rem;\n\tfont-weight: 500;\n}\n\n@media (min-width: 768px) {\n\t.haircheckDescription {\n\t\tfont-size: 1.25rem;\n\t}\n}\n\n.haircheckControls {\n\tdisplay: flex;\n\talign-items: flex-end;\n\tjustify-content: space-between;\n\tgap: 1rem;\n}\n";
|
|
232601
232736
|
var componentsDependencies = [
|
|
232602
232737
|
"controls",
|
|
232603
232738
|
"use-start-haircheck",
|
|
232604
|
-
"use-local-camera"
|
|
232605
|
-
"cvi-provider"
|
|
232739
|
+
"use-local-camera"
|
|
232606
232740
|
];
|
|
232607
|
-
var
|
|
232741
|
+
var hairCheck01 = {
|
|
232742
|
+
type: type$9,
|
|
232743
|
+
content: content$9,
|
|
232744
|
+
styles: styles$9,
|
|
232745
|
+
componentsDependencies: componentsDependencies
|
|
232746
|
+
};
|
|
232747
|
+
|
|
232748
|
+
var type$8 = "hooks";
|
|
232749
|
+
var content$8 = "import { useCallback } from 'react';\nimport { useAppMessage, useDailyEvent } from '@daily-co/daily-react';\n\nexport function useObservableEvent(callback) {\n\treturn useDailyEvent(\n\t\t'app-message',\n\t\tuseCallback(\n\t\t\t(event) => {\n\t\t\t\tcallback(event.data);\n\t\t\t},\n\t\t\t[callback]\n\t\t)\n\t);\n}\n\nexport function useSendAppMessage() {\n\tconst sendAppMessage = useAppMessage();\n\n\treturn useCallback(\n\t\t(message) => {\n\t\t\tsendAppMessage({ msg: message }, '*');\n\t\t},\n\t\t[sendAppMessage]\n\t);\n}\n";
|
|
232750
|
+
var styles$8 = "";
|
|
232751
|
+
var cviEventsHooks = {
|
|
232752
|
+
type: type$8,
|
|
232753
|
+
content: content$8,
|
|
232754
|
+
styles: styles$8
|
|
232755
|
+
};
|
|
232756
|
+
|
|
232757
|
+
var type$7 = "hooks";
|
|
232758
|
+
var content$7 = "import { useCallback } from 'react';\nimport { useDaily } from '@daily-co/daily-react';\n\nexport const useCVICall = () => {\n\tconst daily = useDaily();\n\n\tconst joinCall = useCallback(\n\t\t({ url }) => {\n\t\t\tdaily?.join({\n\t\t\t\turl: url,\n\t\t\t});\n\t\t},\n\t\t[daily]\n\t);\n\n\tconst leaveCall = useCallback(() => {\n\t\tdaily?.leave();\n\t}, [daily]);\n\n\treturn { joinCall, leaveCall };\n};\n";
|
|
232759
|
+
var styles$7 = "";
|
|
232760
|
+
var useCviCall = {
|
|
232761
|
+
type: type$7,
|
|
232762
|
+
content: content$7,
|
|
232763
|
+
styles: styles$7
|
|
232764
|
+
};
|
|
232765
|
+
|
|
232766
|
+
var type$6 = "hooks";
|
|
232767
|
+
var content$6 = "import { useCallback, useMemo } from 'react';\nimport { useDaily, useDevices, useLocalSessionId, useVideoTrack } from '@daily-co/daily-react';\n\nexport const useLocalCamera = () => {\n\tconst daily = useDaily();\n\tconst localSessionId = useLocalSessionId();\n\tconst { isOff: isCamMuted } = useVideoTrack(localSessionId);\n\tconst { camState } = useDevices();\n\tconst isCamReady = useMemo(() => camState === 'granted', [camState]);\n\n\tconst onToggleCamera = useCallback(() => {\n\t\tdaily?.setLocalVideo(isCamMuted);\n\t}, [daily, isCamMuted]);\n\n\treturn {\n\t\tisCamReady,\n\t\tisCamMuted,\n\t\tlocalSessionId,\n\t\tonToggleCamera,\n\t};\n};\n";
|
|
232768
|
+
var styles$6 = "";
|
|
232769
|
+
var useLocalCamera = {
|
|
232770
|
+
type: type$6,
|
|
232771
|
+
content: content$6,
|
|
232772
|
+
styles: styles$6
|
|
232773
|
+
};
|
|
232774
|
+
|
|
232775
|
+
var type$5 = "hooks";
|
|
232776
|
+
var content$5 = "import { useCallback, useMemo } from 'react';\nimport { useAudioTrack, useDaily, useDevices, useLocalSessionId } from '@daily-co/daily-react';\n\nexport const useLocalMicrophone = () => {\n\tconst daily = useDaily();\n\tconst localSessionId = useLocalSessionId();\n\tconst { isOff: isMicMuted } = useAudioTrack(localSessionId);\n\tconst { micState } = useDevices();\n\tconst isMicReady = useMemo(() => micState === 'granted', [micState]);\n\n\tconst onToggleMicrophone = useCallback(() => {\n\t\tdaily?.setLocalAudio(isMicMuted);\n\t}, [daily, isMicMuted]);\n\n\treturn {\n\t\tisMicReady,\n\t\tisMicMuted,\n\t\tlocalSessionId,\n\t\tonToggleMicrophone,\n\t};\n};\n";
|
|
232777
|
+
var styles$5 = "";
|
|
232778
|
+
var useLocalMicrophone = {
|
|
232779
|
+
type: type$5,
|
|
232780
|
+
content: content$5,
|
|
232781
|
+
styles: styles$5
|
|
232782
|
+
};
|
|
232783
|
+
|
|
232784
|
+
var type$4 = "hooks";
|
|
232785
|
+
var content$4 = "import { useCallback } from 'react';\nimport { useDaily, useLocalSessionId, useScreenVideoTrack } from '@daily-co/daily-react';\n\nexport const useLocalScreenshare = () => {\n\tconst daily = useDaily();\n\tconst localSessionId = useLocalSessionId();\n\tconst { isOff } = useScreenVideoTrack(localSessionId);\n\tconst isScreenSharing = !isOff;\n\n\tconst onToggleScreenshare = useCallback(() => {\n\t\tif (isScreenSharing) {\n\t\t\tdaily?.stopScreenShare();\n\t\t} else {\n\t\t\tdaily?.startScreenShare({\n\t\t\t\tdisplayMediaOptions: {\n\t\t\t\t\taudio: false,\n\t\t\t\t\tselfBrowserSurface: 'exclude',\n\t\t\t\t\tsurfaceSwitching: 'include',\n\t\t\t\t\tvideo: {\n\t\t\t\t\t\twidth: 1920,\n\t\t\t\t\t\theight: 1080,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t});\n\t\t}\n\t}, [daily, isScreenSharing]);\n\n\treturn {\n\t\tisScreenSharing,\n\t\tlocalSessionId,\n\t\tonToggleScreenshare,\n\t};\n};\n";
|
|
232786
|
+
var styles$4 = "";
|
|
232787
|
+
var useLocalScreenshare = {
|
|
232788
|
+
type: type$4,
|
|
232789
|
+
content: content$4,
|
|
232790
|
+
styles: styles$4
|
|
232791
|
+
};
|
|
232792
|
+
|
|
232793
|
+
var type$3 = "hooks";
|
|
232794
|
+
var content$3 = "import { useParticipantIds } from '@daily-co/daily-react';\n\nexport const useRemoteParticipantIDs = () => {\n\tconst remoteParticipantIds = useParticipantIds({ filter: 'remote' });\n\n\treturn remoteParticipantIds;\n};\n";
|
|
232795
|
+
var styles$3 = "";
|
|
232796
|
+
var useRemoteParticipantIds = {
|
|
232797
|
+
type: type$3,
|
|
232798
|
+
content: content$3,
|
|
232799
|
+
styles: styles$3
|
|
232800
|
+
};
|
|
232801
|
+
|
|
232802
|
+
var type$2 = "hooks";
|
|
232803
|
+
var content$2 = "import { useParticipantIds } from '@daily-co/daily-react';\n\nexport const useReplicaIDs = () => {\n\tconst replicasIDs = useParticipantIds({\n\t\tfilter: (participant) => participant.user_id.includes('tavus-replica'),\n\t});\n\n\treturn replicasIDs;\n};\n";
|
|
232804
|
+
var styles$2 = "";
|
|
232805
|
+
var useReplicaIds = {
|
|
232806
|
+
type: type$2,
|
|
232807
|
+
content: content$2,
|
|
232808
|
+
styles: styles$2
|
|
232809
|
+
};
|
|
232810
|
+
|
|
232811
|
+
var type$1 = "hooks";
|
|
232812
|
+
var content$1 = "import { useCallback } from 'react';\nimport { useDaily } from '@daily-co/daily-react';\n\nexport const useRequestPermissions = () => {\n\tconst daily = useDaily();\n\n\tconst requestPermissions = useCallback(async () => {\n\t\treturn await daily.startCamera({\n\t\t\tstartVideoOff: false,\n\t\t\tstartAudioOff: false,\n\t\t\taudioSource: 'default',\n\t\t\tinputSettings: {\n\t\t\t\taudio: {\n\t\t\t\t\tprocessor: {\n\t\t\t\t\t\ttype: 'noise-cancellation',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}, [daily]);\n\n\treturn requestPermissions;\n};\n";
|
|
232813
|
+
var styles$1 = "";
|
|
232814
|
+
var useRequestPermissions = {
|
|
232608
232815
|
type: type$1,
|
|
232609
232816
|
content: content$1,
|
|
232610
|
-
styles: styles$1
|
|
232611
|
-
componentsDependencies: componentsDependencies
|
|
232817
|
+
styles: styles$1
|
|
232612
232818
|
};
|
|
232613
232819
|
|
|
232614
232820
|
var type = "hooks";
|
|
232615
|
-
var content = "import { useCallback } from 'react';\nimport {
|
|
232821
|
+
var content = "import { useCallback, useEffect, useMemo, useState } from 'react';\nimport { useDaily, useDevices } from '@daily-co/daily-react';\n\nexport const useStartHaircheck = () => {\n\tconst daily = useDaily();\n\tconst { micState } = useDevices();\n\n\tconst [permissionState, setPermissionState] = useState(null);\n\n\tuseEffect(() => {\n\t\tnavigator.permissions.query({ name: 'microphone' }).then((permissionStatus) => {\n\t\t\tsetPermissionState(permissionStatus.state);\n\t\t\tpermissionStatus.onchange = () => {\n\t\t\t\tsetPermissionState(permissionStatus.state);\n\t\t\t};\n\t\t});\n\t}, []);\n\n\tconst requestPermissions = useCallback(() => {\n\t\tif (!daily) return;\n\t\tdaily.startCamera({\n\t\t\tstartVideoOff: false,\n\t\t\tstartAudioOff: false,\n\t\t\taudioSource: 'default',\n\t\t\tinputSettings: {\n\t\t\t\taudio: {\n\t\t\t\t\tprocessor: {\n\t\t\t\t\t\ttype: 'noise-cancellation',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}, [daily]);\n\n\tconst isPermissionsPrompt = useMemo(() => {\n\t\treturn permissionState === 'prompt';\n\t}, [permissionState]);\n\n\tconst isPermissionsLoading = useMemo(() => {\n\t\treturn (permissionState === null || permissionState === 'granted') && micState === 'idle';\n\t}, [permissionState, micState]);\n\n\tconst isPermissionsGranted = useMemo(() => {\n\t\treturn permissionState === 'granted';\n\t}, [permissionState]);\n\n\tconst isPermissionsDenied = useMemo(() => {\n\t\treturn permissionState === 'denied';\n\t}, [permissionState]);\n\n\treturn {\n\t\tisPermissionsPrompt,\n\t\tisPermissionsLoading,\n\t\tisPermissionsGranted,\n\t\tisPermissionsDenied,\n\t\trequestPermissions,\n\t};\n};\n";
|
|
232616
232822
|
var styles = "";
|
|
232617
|
-
var
|
|
232823
|
+
var useStartHaircheck = {
|
|
232618
232824
|
type: type,
|
|
232619
232825
|
content: content,
|
|
232620
232826
|
styles: styles
|
|
@@ -232622,10 +232828,20 @@ var cviEventsHooks = {
|
|
|
232622
232828
|
|
|
232623
232829
|
var index = /*#__PURE__*/Object.freeze({
|
|
232624
232830
|
__proto__: null,
|
|
232831
|
+
"audio-wave": audioWave,
|
|
232625
232832
|
controls: controls,
|
|
232833
|
+
"conversation-01": conversation01,
|
|
232626
232834
|
"cvi-events-hooks": cviEventsHooks,
|
|
232627
232835
|
"cvi-provider": cviProvider,
|
|
232628
|
-
"hair-check":
|
|
232836
|
+
"hair-check-01": hairCheck01,
|
|
232837
|
+
"use-cvi-call": useCviCall,
|
|
232838
|
+
"use-local-camera": useLocalCamera,
|
|
232839
|
+
"use-local-microphone": useLocalMicrophone,
|
|
232840
|
+
"use-local-screenshare": useLocalScreenshare,
|
|
232841
|
+
"use-remote-participant-ids": useRemoteParticipantIds,
|
|
232842
|
+
"use-replica-ids": useReplicaIds,
|
|
232843
|
+
"use-request-permissions": useRequestPermissions,
|
|
232844
|
+
"use-start-haircheck": useStartHaircheck
|
|
232629
232845
|
});
|
|
232630
232846
|
|
|
232631
232847
|
var templates = /*#__PURE__*/Object.freeze({
|
|
@@ -232635,12 +232851,52 @@ var templates = /*#__PURE__*/Object.freeze({
|
|
|
232635
232851
|
});
|
|
232636
232852
|
|
|
232637
232853
|
const components = [
|
|
232854
|
+
{ name: 'audio-wave', path: 'components/audio-wave' },
|
|
232638
232855
|
{ name: 'controls', path: 'components/controls' },
|
|
232856
|
+
{ name: 'conversation-01', path: 'components/conversation-01' },
|
|
232639
232857
|
{ name: 'cvi-provider', path: 'components/cvi-provider' },
|
|
232640
|
-
{ name: 'hair-check', path: 'components/hair-check' },
|
|
232641
|
-
{ name: 'cvi-events-hooks', path: 'hooks/cvi-events-hooks' }
|
|
232858
|
+
{ name: 'hair-check-01', path: 'components/hair-check-01' },
|
|
232859
|
+
{ name: 'cvi-events-hooks', path: 'hooks/cvi-events-hooks' },
|
|
232860
|
+
{ name: 'use-cvi-call', path: 'hooks/use-cvi-call' },
|
|
232861
|
+
{ name: 'use-local-camera', path: 'hooks/use-local-camera' },
|
|
232862
|
+
{ name: 'use-local-microphone', path: 'hooks/use-local-microphone' },
|
|
232863
|
+
{ name: 'use-local-screenshare', path: 'hooks/use-local-screenshare' },
|
|
232864
|
+
{ name: 'use-remote-participant-ids', path: 'hooks/use-remote-participant-ids' },
|
|
232865
|
+
{ name: 'use-replica-ids', path: 'hooks/use-replica-ids' },
|
|
232866
|
+
{ name: 'use-request-permissions', path: 'hooks/use-request-permissions' },
|
|
232867
|
+
{ name: 'use-start-haircheck', path: 'hooks/use-start-haircheck' }
|
|
232642
232868
|
];
|
|
232643
232869
|
|
|
232870
|
+
// Helper function to remove version suffix from component name
|
|
232871
|
+
function removeVersionSuffix(name) {
|
|
232872
|
+
return name.replace(/-\d+$/, '');
|
|
232873
|
+
}
|
|
232874
|
+
// Helper function to get the default version for a component
|
|
232875
|
+
function getDefaultVersion(name) {
|
|
232876
|
+
// Map versionless names to their default versions
|
|
232877
|
+
const versionMap = {
|
|
232878
|
+
'conversation': 'conversation-01',
|
|
232879
|
+
'hair-check': 'hair-check-01',
|
|
232880
|
+
};
|
|
232881
|
+
return versionMap[name] || name;
|
|
232882
|
+
}
|
|
232883
|
+
|
|
232884
|
+
// Helper function to find component by name (with or without version)
|
|
232885
|
+
function findComponentByName(name) {
|
|
232886
|
+
// First try exact match
|
|
232887
|
+
let component = components.find((comp) => comp.name === name);
|
|
232888
|
+
if (!component) {
|
|
232889
|
+
// If no exact match, try without version suffix
|
|
232890
|
+
const nameWithoutVersion = removeVersionSuffix(name);
|
|
232891
|
+
component = components.find((comp) => removeVersionSuffix(comp.name) === nameWithoutVersion);
|
|
232892
|
+
if (component) {
|
|
232893
|
+
// If found by versionless name, use the default version
|
|
232894
|
+
const defaultVersion = getDefaultVersion(nameWithoutVersion);
|
|
232895
|
+
component = components.find((comp) => comp.name === defaultVersion) || component;
|
|
232896
|
+
}
|
|
232897
|
+
}
|
|
232898
|
+
return component;
|
|
232899
|
+
}
|
|
232644
232900
|
async function updateFiles(files, config, options) {
|
|
232645
232901
|
if (!files?.length) {
|
|
232646
232902
|
return {
|
|
@@ -232666,27 +232922,32 @@ async function updateFiles(files, config, options) {
|
|
|
232666
232922
|
const filesUpdated = [];
|
|
232667
232923
|
const filesSkipped = [];
|
|
232668
232924
|
for (const filename of files) {
|
|
232669
|
-
const
|
|
232670
|
-
if (!
|
|
232925
|
+
const component = findComponentByName(filename);
|
|
232926
|
+
if (!component) {
|
|
232671
232927
|
logger.warn(`Component ${filename} not found`);
|
|
232672
232928
|
continue;
|
|
232673
232929
|
}
|
|
232930
|
+
// Use the actual component name from the found component
|
|
232931
|
+
const actualComponentName = component.name;
|
|
232932
|
+
const componentBasePath = component.path;
|
|
232933
|
+
// For file creation, use versionless name
|
|
232934
|
+
const fileDisplayName = removeVersionSuffix(actualComponentName);
|
|
232674
232935
|
let targetPath;
|
|
232675
232936
|
let targetDir;
|
|
232676
232937
|
// Handle different component types based on path structure
|
|
232677
232938
|
if (componentBasePath.startsWith('components/')) {
|
|
232678
|
-
// For components: create folder with filename and index file inside
|
|
232679
|
-
targetDir = require$$0$2.join(config.resolvedPaths.cwd, componentsPath,
|
|
232939
|
+
// For components: create folder with versionless filename and index file inside
|
|
232940
|
+
targetDir = require$$0$2.join(config.resolvedPaths.cwd, componentsPath, 'components', fileDisplayName);
|
|
232680
232941
|
targetPath = require$$0$2.join(targetDir, `index.${config.tsx ? 'tsx' : 'jsx'}`);
|
|
232681
232942
|
}
|
|
232682
232943
|
else if (componentBasePath.startsWith('hooks/')) {
|
|
232683
232944
|
// For hooks: create direct filename.tsx file
|
|
232684
232945
|
targetDir = require$$0$2.join(config.resolvedPaths.cwd, componentsPath, 'hooks');
|
|
232685
|
-
targetPath = require$$0$2.join(targetDir, `${
|
|
232946
|
+
targetPath = require$$0$2.join(targetDir, `${fileDisplayName}.${config.tsx ? 'tsx' : 'jsx'}`);
|
|
232686
232947
|
}
|
|
232687
232948
|
else {
|
|
232688
232949
|
// Fallback to original logic for other cases
|
|
232689
|
-
targetPath = require$$0$2.join(config.resolvedPaths.cwd, componentsPath, componentBasePath, `${
|
|
232950
|
+
targetPath = require$$0$2.join(config.resolvedPaths.cwd, componentsPath, componentBasePath, `${fileDisplayName}.${config.tsx ? 'tsx' : 'jsx'}`);
|
|
232690
232951
|
targetDir = require$$0$2.dirname(targetPath);
|
|
232691
232952
|
}
|
|
232692
232953
|
const existingTarget = existsSync(targetPath);
|
|
@@ -232698,7 +232959,7 @@ async function updateFiles(files, config, options) {
|
|
|
232698
232959
|
const { overwrite } = await prompts({
|
|
232699
232960
|
type: 'confirm',
|
|
232700
232961
|
name: 'overwrite',
|
|
232701
|
-
message: `The file ${highlighter.info(
|
|
232962
|
+
message: `The file ${highlighter.info(fileDisplayName)} already exists. Would you like to overwrite?`,
|
|
232702
232963
|
initial: false,
|
|
232703
232964
|
});
|
|
232704
232965
|
if (!overwrite) {
|
|
@@ -232717,7 +232978,7 @@ async function updateFiles(files, config, options) {
|
|
|
232717
232978
|
if (!existsSync(targetDir)) {
|
|
232718
232979
|
await promises.mkdir(targetDir, { recursive: true });
|
|
232719
232980
|
}
|
|
232720
|
-
const template = templates[config.tsx ? 'tsx' : 'jsx'][
|
|
232981
|
+
const template = templates[config.tsx ? 'tsx' : 'jsx'][actualComponentName];
|
|
232721
232982
|
// Write the content from templates
|
|
232722
232983
|
if (template) {
|
|
232723
232984
|
let content = template.content;
|
|
@@ -232729,14 +232990,14 @@ async function updateFiles(files, config, options) {
|
|
|
232729
232990
|
await promises.writeFile(targetPath, content);
|
|
232730
232991
|
if (template.styles && template.styles.length > 0) {
|
|
232731
232992
|
// For components, create CSS file in the same directory as the index file
|
|
232732
|
-
const cssPath = require$$0$2.join(targetDir, `${
|
|
232993
|
+
const cssPath = require$$0$2.join(targetDir, `${fileDisplayName}.module.css`);
|
|
232733
232994
|
await promises.writeFile(cssPath, template.styles);
|
|
232734
232995
|
}
|
|
232735
232996
|
}
|
|
232736
232997
|
else {
|
|
232737
232998
|
// For other components, we'll need to handle them differently
|
|
232738
232999
|
// This part needs to be implemented based on how other components are structured
|
|
232739
|
-
logger.warn(`Component ${
|
|
233000
|
+
logger.warn(`Component ${actualComponentName} is not yet implemented`);
|
|
232740
233001
|
continue;
|
|
232741
233002
|
}
|
|
232742
233003
|
if (existingTarget) {
|
|
@@ -232791,6 +233052,48 @@ async function updateFiles(files, config, options) {
|
|
|
232791
233052
|
};
|
|
232792
233053
|
}
|
|
232793
233054
|
|
|
233055
|
+
// Helper function to find component template by name (with or without version)
|
|
233056
|
+
function findComponentTemplate(name) {
|
|
233057
|
+
// First try exact match
|
|
233058
|
+
let component = index$1[name];
|
|
233059
|
+
if (!component) {
|
|
233060
|
+
// If no exact match, try without version suffix
|
|
233061
|
+
const nameWithoutVersion = removeVersionSuffix(name);
|
|
233062
|
+
const defaultVersion = getDefaultVersion(nameWithoutVersion);
|
|
233063
|
+
component = index$1[defaultVersion];
|
|
233064
|
+
}
|
|
233065
|
+
return component;
|
|
233066
|
+
}
|
|
233067
|
+
// Helper function to deduplicate components by selecting the latest version
|
|
233068
|
+
function deduplicateComponents(components) {
|
|
233069
|
+
const componentGroups = new Map();
|
|
233070
|
+
// Group components by their base name (without version)
|
|
233071
|
+
components.forEach(componentName => {
|
|
233072
|
+
const baseName = removeVersionSuffix(componentName);
|
|
233073
|
+
if (!componentGroups.has(baseName)) {
|
|
233074
|
+
componentGroups.set(baseName, []);
|
|
233075
|
+
}
|
|
233076
|
+
componentGroups.get(baseName).push(componentName);
|
|
233077
|
+
});
|
|
233078
|
+
// For each group, select the component with the highest version number
|
|
233079
|
+
const deduplicatedComponents = [];
|
|
233080
|
+
componentGroups.forEach((componentVersions) => {
|
|
233081
|
+
if (componentVersions.length === 1) {
|
|
233082
|
+
// Only one version, use it as is
|
|
233083
|
+
deduplicatedComponents.push(componentVersions[0]);
|
|
233084
|
+
}
|
|
233085
|
+
else {
|
|
233086
|
+
// Multiple versions, select the one with the highest version number
|
|
233087
|
+
const latestVersion = componentVersions.reduce((latest, current) => {
|
|
233088
|
+
const latestVersionNum = parseInt(latest.match(/-(\d+)$/)?.[1] || '0');
|
|
233089
|
+
const currentVersionNum = parseInt(current.match(/-(\d+)$/)?.[1] || '0');
|
|
233090
|
+
return currentVersionNum > latestVersionNum ? current : latest;
|
|
233091
|
+
});
|
|
233092
|
+
deduplicatedComponents.push(latestVersion);
|
|
233093
|
+
}
|
|
233094
|
+
});
|
|
233095
|
+
return deduplicatedComponents;
|
|
233096
|
+
}
|
|
232794
233097
|
function resolveComponentsTree(components) {
|
|
232795
233098
|
// npm libraries which should be added to the project
|
|
232796
233099
|
const dependencies = new Set();
|
|
@@ -232798,7 +233101,7 @@ function resolveComponentsTree(components) {
|
|
|
232798
233101
|
const componentsDependencies = new Set([...components]);
|
|
232799
233102
|
// Process each component and its dependencies recursively
|
|
232800
233103
|
function processComponent(componentName) {
|
|
232801
|
-
const component =
|
|
233104
|
+
const component = findComponentTemplate(componentName);
|
|
232802
233105
|
if (!component)
|
|
232803
233106
|
return;
|
|
232804
233107
|
// Add component's dependencies
|
|
@@ -232809,8 +233112,13 @@ function resolveComponentsTree(components) {
|
|
|
232809
233112
|
processComponent(dep);
|
|
232810
233113
|
});
|
|
232811
233114
|
}
|
|
233115
|
+
// Deduplicate components before processing
|
|
233116
|
+
const uniqueComponents = deduplicateComponents(components);
|
|
233117
|
+
// Update componentsDependencies with deduplicated list
|
|
233118
|
+
componentsDependencies.clear();
|
|
233119
|
+
uniqueComponents.forEach(component => componentsDependencies.add(component));
|
|
232812
233120
|
// Process all requested components
|
|
232813
|
-
|
|
233121
|
+
uniqueComponents.forEach((componentName) => {
|
|
232814
233122
|
processComponent(componentName);
|
|
232815
233123
|
});
|
|
232816
233124
|
return {
|
|
@@ -237211,7 +237519,7 @@ const info = new Command()
|
|
|
237211
237519
|
console.log(await getConfig(opts.cwd));
|
|
237212
237520
|
});
|
|
237213
237521
|
|
|
237214
|
-
var version = "0.0.1-beta.
|
|
237522
|
+
var version = "0.0.1-beta.2";
|
|
237215
237523
|
var packageJson = {
|
|
237216
237524
|
version: version};
|
|
237217
237525
|
|