datakeen-session-react 1.1.158 → 1.1.159
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/dist/cjs/components/selfie/hooks/useVideoRecorderStyles.js +5 -3
- package/dist/cjs/components/selfie/hooks/useVideoRecorderStyles.js.map +1 -1
- package/dist/esm/components/selfie/hooks/useVideoRecorderStyles.js +5 -3
- package/dist/esm/components/selfie/hooks/useVideoRecorderStyles.js.map +1 -1
- package/package.json +1 -1
|
@@ -8,13 +8,15 @@ var React = require('react');
|
|
|
8
8
|
* Hook personnalisé pour injecter des styles CSS globaux qui ciblent spécifiquement
|
|
9
9
|
* le composant VideoRecorder d'Unissey et éliminent les bords arrondis et les fonds noirs.
|
|
10
10
|
*/
|
|
11
|
-
var useVideoRecorderStyles = function () {
|
|
11
|
+
var useVideoRecorderStyles = function (btnBg, btnText) {
|
|
12
|
+
var resolvedBtnBg = "#11E5C5";
|
|
13
|
+
var resolvedBtnText = "#3C3C40";
|
|
12
14
|
React.useEffect(function () {
|
|
13
15
|
// Créer un élément style pour injecter des règles CSS
|
|
14
16
|
var styleElement = document.createElement("style");
|
|
15
17
|
styleElement.id = "video-recorder-custom-styles";
|
|
16
18
|
// Définir les règles CSS nécessaires pour éliminer les bords arrondis et les fonds noirs
|
|
17
|
-
styleElement.textContent = "\n /* Cibler le composant VideoRecorder et tous ses \u00E9l\u00E9ments internes */\n uni-video-recorder,\n uni-video-recorder::shadow-root,\n uni-video-recorder::part(*),\n uni-video-recorder *,\n uni-video-recorder video,\n uni-video-recorder canvas,\n uni-video-recorder div {\n border-radius: 0 !important;\n -webkit-border-radius: 0 !important;\n -moz-border-radius: 0 !important;\n background: transparent !important;\n overflow: hidden !important;\n }\n
|
|
19
|
+
styleElement.textContent = "\n /* Cibler le composant VideoRecorder et tous ses \u00E9l\u00E9ments internes */\n uni-video-recorder,\n uni-video-recorder::shadow-root,\n uni-video-recorder::part(*),\n uni-video-recorder *,\n uni-video-recorder video,\n uni-video-recorder canvas,\n uni-video-recorder div {\n border-radius: 0 !important;\n -webkit-border-radius: 0 !important;\n -moz-border-radius: 0 !important;\n background: transparent !important;\n overflow: hidden !important;\n }\n\n /* Assurer que la vid\u00E9o prend tout l'espace disponible */\n uni-video-recorder video,\n uni-video-recorder canvas {\n width: 100% !important;\n height: 100% !important;\n object-fit: cover !important;\n max-height: none !important;\n }\n\n /* iOS-specific fixes for getUserMedia black screen */\n @supports (-webkit-touch-callout: none) {\n uni-video-recorder video {\n -webkit-playsinline: true !important;\n playsinline: true !important;\n autoplay: true !important;\n muted: true !important;\n }\n }\n\n /* Variables CSS globales que le composant pourrait utiliser */\n :root {\n --uni-video-border-radius: 0 !important;\n --uni-border-radius: 0 !important;\n --uni-component-border-radius: 0 !important;\n --uni-video-background: transparent !important;\n --uni-background: transparent !important;\n }\n\n /* S\u00E9lecteurs tr\u00E8s sp\u00E9cifiques pour garantir que les styles s'appliquent */\n .video-container,\n .video-container > div,\n .video-container > div > uni-video-recorder,\n .video-container uni-video-recorder,\n .selfie .video-container,\n .selfie .video-container > div,\n .selfie .video-container uni-video-recorder {\n border-radius: 0 !important;\n background: transparent !important;\n overflow: hidden !important;\n }\n\n /* Pr\u00E9server les styles des boutons */\n .selfie button.selfie-button,\n button.selfie-button,\n .selfie-button {\n background-color: ".concat(resolvedBtnBg, " !important;\n color: ").concat(resolvedBtnText, " !important;\n border-radius: 12px !important;\n }\n\n .selfie button.selfie-button:hover,\n button.selfie-button:hover,\n .selfie-button:hover {\n background-color: ").concat(resolvedBtnBg, " !important;\n filter: brightness(1.1);\n }\n\n .selfie button.selfie-button:disabled,\n button.selfie-button:disabled,\n .selfie-button:disabled {\n background-color: #e2e8f0 !important;\n opacity: 0.6 !important;\n }\n ");
|
|
18
20
|
// Ajouter l'élément style au head du document
|
|
19
21
|
document.head.appendChild(styleElement);
|
|
20
22
|
// Nettoyer en supprimant l'élément style lors du démontage du composant
|
|
@@ -24,7 +26,7 @@ var useVideoRecorderStyles = function () {
|
|
|
24
26
|
document.head.removeChild(existingStyle);
|
|
25
27
|
}
|
|
26
28
|
};
|
|
27
|
-
}, [
|
|
29
|
+
}, [resolvedBtnBg, resolvedBtnText]);
|
|
28
30
|
};
|
|
29
31
|
|
|
30
32
|
exports.default = useVideoRecorderStyles;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useVideoRecorderStyles.js","sources":["../../../../../../src/components/selfie/hooks/useVideoRecorderStyles.tsx"],"sourcesContent":["import { useEffect } from \"react\";\n\n/**\n * Hook personnalisé pour injecter des styles CSS globaux qui ciblent spécifiquement\n * le composant VideoRecorder d'Unissey et éliminent les bords arrondis et les fonds noirs.\n */\nconst useVideoRecorderStyles = () => {\n useEffect(() => {\n // Créer un élément style pour injecter des règles CSS\n const styleElement = document.createElement(\"style\");\n styleElement.id = \"video-recorder-custom-styles\";\n\n // Définir les règles CSS nécessaires pour éliminer les bords arrondis et les fonds noirs\n styleElement.textContent = `\n /* Cibler le composant VideoRecorder et tous ses éléments internes */\n uni-video-recorder,\n uni-video-recorder::shadow-root,\n uni-video-recorder::part(*),\n uni-video-recorder *,\n uni-video-recorder video,\n uni-video-recorder canvas,\n uni-video-recorder div {\n border-radius: 0 !important;\n -webkit-border-radius: 0 !important;\n -moz-border-radius: 0 !important;\n background: transparent !important;\n overflow: hidden !important;\n }\n
|
|
1
|
+
{"version":3,"file":"useVideoRecorderStyles.js","sources":["../../../../../../src/components/selfie/hooks/useVideoRecorderStyles.tsx"],"sourcesContent":["import { useEffect } from \"react\";\n\n/**\n * Hook personnalisé pour injecter des styles CSS globaux qui ciblent spécifiquement\n * le composant VideoRecorder d'Unissey et éliminent les bords arrondis et les fonds noirs.\n */\nconst useVideoRecorderStyles = (btnBg?: string, btnText?: string) => {\n const resolvedBtnBg = btnBg ?? \"#11E5C5\";\n const resolvedBtnText = btnText ?? \"#3C3C40\";\n\n useEffect(() => {\n // Créer un élément style pour injecter des règles CSS\n const styleElement = document.createElement(\"style\");\n styleElement.id = \"video-recorder-custom-styles\";\n\n // Définir les règles CSS nécessaires pour éliminer les bords arrondis et les fonds noirs\n styleElement.textContent = `\n /* Cibler le composant VideoRecorder et tous ses éléments internes */\n uni-video-recorder,\n uni-video-recorder::shadow-root,\n uni-video-recorder::part(*),\n uni-video-recorder *,\n uni-video-recorder video,\n uni-video-recorder canvas,\n uni-video-recorder div {\n border-radius: 0 !important;\n -webkit-border-radius: 0 !important;\n -moz-border-radius: 0 !important;\n background: transparent !important;\n overflow: hidden !important;\n }\n\n /* Assurer que la vidéo prend tout l'espace disponible */\n uni-video-recorder video,\n uni-video-recorder canvas {\n width: 100% !important;\n height: 100% !important;\n object-fit: cover !important;\n max-height: none !important;\n }\n\n /* iOS-specific fixes for getUserMedia black screen */\n @supports (-webkit-touch-callout: none) {\n uni-video-recorder video {\n -webkit-playsinline: true !important;\n playsinline: true !important;\n autoplay: true !important;\n muted: true !important;\n }\n }\n\n /* Variables CSS globales que le composant pourrait utiliser */\n :root {\n --uni-video-border-radius: 0 !important;\n --uni-border-radius: 0 !important;\n --uni-component-border-radius: 0 !important;\n --uni-video-background: transparent !important;\n --uni-background: transparent !important;\n }\n\n /* Sélecteurs très spécifiques pour garantir que les styles s'appliquent */\n .video-container,\n .video-container > div,\n .video-container > div > uni-video-recorder,\n .video-container uni-video-recorder,\n .selfie .video-container,\n .selfie .video-container > div,\n .selfie .video-container uni-video-recorder {\n border-radius: 0 !important;\n background: transparent !important;\n overflow: hidden !important;\n }\n\n /* Préserver les styles des boutons */\n .selfie button.selfie-button,\n button.selfie-button,\n .selfie-button {\n background-color: ${resolvedBtnBg} !important;\n color: ${resolvedBtnText} !important;\n border-radius: 12px !important;\n }\n\n .selfie button.selfie-button:hover,\n button.selfie-button:hover,\n .selfie-button:hover {\n background-color: ${resolvedBtnBg} !important;\n filter: brightness(1.1);\n }\n\n .selfie button.selfie-button:disabled,\n button.selfie-button:disabled,\n .selfie-button:disabled {\n background-color: #e2e8f0 !important;\n opacity: 0.6 !important;\n }\n `;\n\n // Ajouter l'élément style au head du document\n document.head.appendChild(styleElement);\n\n // Nettoyer en supprimant l'élément style lors du démontage du composant\n return () => {\n const existingStyle = document.getElementById(\n \"video-recorder-custom-styles\"\n );\n if (existingStyle) {\n document.head.removeChild(existingStyle);\n }\n };\n }, [resolvedBtnBg, resolvedBtnText]);\n};\n\nexport default useVideoRecorderStyles;\n"],"names":["useEffect"],"mappings":";;;;;;AAEA;;;AAGG;AACH,IAAM,sBAAsB,GAAG,UAAC,KAAc,EAAE,OAAgB,EAAA;IAC9D,IAAM,aAAa,GAAY,SAAS;IACxC,IAAM,eAAe,GAAc,SAAS;AAE5C,IAAAA,eAAS,CAAC,YAAA;;QAER,IAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AACpD,QAAA,YAAY,CAAC,EAAE,GAAG,8BAA8B;;QAGhD,YAAY,CAAC,WAAW,GAAG,mpEAAA,CAAA,MAAA,CA6DH,aAAa,0CACxB,eAAe,EAAA,0MAAA,CAAA,CAAA,MAAA,CAOJ,aAAa,EAAA,gRAAA,CAUpC;;AAGD,QAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC;;QAGvC,OAAO,YAAA;YACL,IAAM,aAAa,GAAG,QAAQ,CAAC,cAAc,CAC3C,8BAA8B,CAC/B;YACD,IAAI,aAAa,EAAE;AACjB,gBAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC;YAC1C;AACF,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,aAAa,EAAE,eAAe,CAAC,CAAC;AACtC;;;;"}
|
|
@@ -4,13 +4,15 @@ import { useEffect } from 'react';
|
|
|
4
4
|
* Hook personnalisé pour injecter des styles CSS globaux qui ciblent spécifiquement
|
|
5
5
|
* le composant VideoRecorder d'Unissey et éliminent les bords arrondis et les fonds noirs.
|
|
6
6
|
*/
|
|
7
|
-
var useVideoRecorderStyles = function () {
|
|
7
|
+
var useVideoRecorderStyles = function (btnBg, btnText) {
|
|
8
|
+
var resolvedBtnBg = "#11E5C5";
|
|
9
|
+
var resolvedBtnText = "#3C3C40";
|
|
8
10
|
useEffect(function () {
|
|
9
11
|
// Créer un élément style pour injecter des règles CSS
|
|
10
12
|
var styleElement = document.createElement("style");
|
|
11
13
|
styleElement.id = "video-recorder-custom-styles";
|
|
12
14
|
// Définir les règles CSS nécessaires pour éliminer les bords arrondis et les fonds noirs
|
|
13
|
-
styleElement.textContent = "\n /* Cibler le composant VideoRecorder et tous ses \u00E9l\u00E9ments internes */\n uni-video-recorder,\n uni-video-recorder::shadow-root,\n uni-video-recorder::part(*),\n uni-video-recorder *,\n uni-video-recorder video,\n uni-video-recorder canvas,\n uni-video-recorder div {\n border-radius: 0 !important;\n -webkit-border-radius: 0 !important;\n -moz-border-radius: 0 !important;\n background: transparent !important;\n overflow: hidden !important;\n }\n
|
|
15
|
+
styleElement.textContent = "\n /* Cibler le composant VideoRecorder et tous ses \u00E9l\u00E9ments internes */\n uni-video-recorder,\n uni-video-recorder::shadow-root,\n uni-video-recorder::part(*),\n uni-video-recorder *,\n uni-video-recorder video,\n uni-video-recorder canvas,\n uni-video-recorder div {\n border-radius: 0 !important;\n -webkit-border-radius: 0 !important;\n -moz-border-radius: 0 !important;\n background: transparent !important;\n overflow: hidden !important;\n }\n\n /* Assurer que la vid\u00E9o prend tout l'espace disponible */\n uni-video-recorder video,\n uni-video-recorder canvas {\n width: 100% !important;\n height: 100% !important;\n object-fit: cover !important;\n max-height: none !important;\n }\n\n /* iOS-specific fixes for getUserMedia black screen */\n @supports (-webkit-touch-callout: none) {\n uni-video-recorder video {\n -webkit-playsinline: true !important;\n playsinline: true !important;\n autoplay: true !important;\n muted: true !important;\n }\n }\n\n /* Variables CSS globales que le composant pourrait utiliser */\n :root {\n --uni-video-border-radius: 0 !important;\n --uni-border-radius: 0 !important;\n --uni-component-border-radius: 0 !important;\n --uni-video-background: transparent !important;\n --uni-background: transparent !important;\n }\n\n /* S\u00E9lecteurs tr\u00E8s sp\u00E9cifiques pour garantir que les styles s'appliquent */\n .video-container,\n .video-container > div,\n .video-container > div > uni-video-recorder,\n .video-container uni-video-recorder,\n .selfie .video-container,\n .selfie .video-container > div,\n .selfie .video-container uni-video-recorder {\n border-radius: 0 !important;\n background: transparent !important;\n overflow: hidden !important;\n }\n\n /* Pr\u00E9server les styles des boutons */\n .selfie button.selfie-button,\n button.selfie-button,\n .selfie-button {\n background-color: ".concat(resolvedBtnBg, " !important;\n color: ").concat(resolvedBtnText, " !important;\n border-radius: 12px !important;\n }\n\n .selfie button.selfie-button:hover,\n button.selfie-button:hover,\n .selfie-button:hover {\n background-color: ").concat(resolvedBtnBg, " !important;\n filter: brightness(1.1);\n }\n\n .selfie button.selfie-button:disabled,\n button.selfie-button:disabled,\n .selfie-button:disabled {\n background-color: #e2e8f0 !important;\n opacity: 0.6 !important;\n }\n ");
|
|
14
16
|
// Ajouter l'élément style au head du document
|
|
15
17
|
document.head.appendChild(styleElement);
|
|
16
18
|
// Nettoyer en supprimant l'élément style lors du démontage du composant
|
|
@@ -20,7 +22,7 @@ var useVideoRecorderStyles = function () {
|
|
|
20
22
|
document.head.removeChild(existingStyle);
|
|
21
23
|
}
|
|
22
24
|
};
|
|
23
|
-
}, [
|
|
25
|
+
}, [resolvedBtnBg, resolvedBtnText]);
|
|
24
26
|
};
|
|
25
27
|
|
|
26
28
|
export { useVideoRecorderStyles as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useVideoRecorderStyles.js","sources":["../../../../../../src/components/selfie/hooks/useVideoRecorderStyles.tsx"],"sourcesContent":["import { useEffect } from \"react\";\n\n/**\n * Hook personnalisé pour injecter des styles CSS globaux qui ciblent spécifiquement\n * le composant VideoRecorder d'Unissey et éliminent les bords arrondis et les fonds noirs.\n */\nconst useVideoRecorderStyles = () => {\n useEffect(() => {\n // Créer un élément style pour injecter des règles CSS\n const styleElement = document.createElement(\"style\");\n styleElement.id = \"video-recorder-custom-styles\";\n\n // Définir les règles CSS nécessaires pour éliminer les bords arrondis et les fonds noirs\n styleElement.textContent = `\n /* Cibler le composant VideoRecorder et tous ses éléments internes */\n uni-video-recorder,\n uni-video-recorder::shadow-root,\n uni-video-recorder::part(*),\n uni-video-recorder *,\n uni-video-recorder video,\n uni-video-recorder canvas,\n uni-video-recorder div {\n border-radius: 0 !important;\n -webkit-border-radius: 0 !important;\n -moz-border-radius: 0 !important;\n background: transparent !important;\n overflow: hidden !important;\n }\n
|
|
1
|
+
{"version":3,"file":"useVideoRecorderStyles.js","sources":["../../../../../../src/components/selfie/hooks/useVideoRecorderStyles.tsx"],"sourcesContent":["import { useEffect } from \"react\";\n\n/**\n * Hook personnalisé pour injecter des styles CSS globaux qui ciblent spécifiquement\n * le composant VideoRecorder d'Unissey et éliminent les bords arrondis et les fonds noirs.\n */\nconst useVideoRecorderStyles = (btnBg?: string, btnText?: string) => {\n const resolvedBtnBg = btnBg ?? \"#11E5C5\";\n const resolvedBtnText = btnText ?? \"#3C3C40\";\n\n useEffect(() => {\n // Créer un élément style pour injecter des règles CSS\n const styleElement = document.createElement(\"style\");\n styleElement.id = \"video-recorder-custom-styles\";\n\n // Définir les règles CSS nécessaires pour éliminer les bords arrondis et les fonds noirs\n styleElement.textContent = `\n /* Cibler le composant VideoRecorder et tous ses éléments internes */\n uni-video-recorder,\n uni-video-recorder::shadow-root,\n uni-video-recorder::part(*),\n uni-video-recorder *,\n uni-video-recorder video,\n uni-video-recorder canvas,\n uni-video-recorder div {\n border-radius: 0 !important;\n -webkit-border-radius: 0 !important;\n -moz-border-radius: 0 !important;\n background: transparent !important;\n overflow: hidden !important;\n }\n\n /* Assurer que la vidéo prend tout l'espace disponible */\n uni-video-recorder video,\n uni-video-recorder canvas {\n width: 100% !important;\n height: 100% !important;\n object-fit: cover !important;\n max-height: none !important;\n }\n\n /* iOS-specific fixes for getUserMedia black screen */\n @supports (-webkit-touch-callout: none) {\n uni-video-recorder video {\n -webkit-playsinline: true !important;\n playsinline: true !important;\n autoplay: true !important;\n muted: true !important;\n }\n }\n\n /* Variables CSS globales que le composant pourrait utiliser */\n :root {\n --uni-video-border-radius: 0 !important;\n --uni-border-radius: 0 !important;\n --uni-component-border-radius: 0 !important;\n --uni-video-background: transparent !important;\n --uni-background: transparent !important;\n }\n\n /* Sélecteurs très spécifiques pour garantir que les styles s'appliquent */\n .video-container,\n .video-container > div,\n .video-container > div > uni-video-recorder,\n .video-container uni-video-recorder,\n .selfie .video-container,\n .selfie .video-container > div,\n .selfie .video-container uni-video-recorder {\n border-radius: 0 !important;\n background: transparent !important;\n overflow: hidden !important;\n }\n\n /* Préserver les styles des boutons */\n .selfie button.selfie-button,\n button.selfie-button,\n .selfie-button {\n background-color: ${resolvedBtnBg} !important;\n color: ${resolvedBtnText} !important;\n border-radius: 12px !important;\n }\n\n .selfie button.selfie-button:hover,\n button.selfie-button:hover,\n .selfie-button:hover {\n background-color: ${resolvedBtnBg} !important;\n filter: brightness(1.1);\n }\n\n .selfie button.selfie-button:disabled,\n button.selfie-button:disabled,\n .selfie-button:disabled {\n background-color: #e2e8f0 !important;\n opacity: 0.6 !important;\n }\n `;\n\n // Ajouter l'élément style au head du document\n document.head.appendChild(styleElement);\n\n // Nettoyer en supprimant l'élément style lors du démontage du composant\n return () => {\n const existingStyle = document.getElementById(\n \"video-recorder-custom-styles\"\n );\n if (existingStyle) {\n document.head.removeChild(existingStyle);\n }\n };\n }, [resolvedBtnBg, resolvedBtnText]);\n};\n\nexport default useVideoRecorderStyles;\n"],"names":[],"mappings":";;AAEA;;;AAGG;AACH,IAAM,sBAAsB,GAAG,UAAC,KAAc,EAAE,OAAgB,EAAA;IAC9D,IAAM,aAAa,GAAY,SAAS;IACxC,IAAM,eAAe,GAAc,SAAS;AAE5C,IAAA,SAAS,CAAC,YAAA;;QAER,IAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AACpD,QAAA,YAAY,CAAC,EAAE,GAAG,8BAA8B;;QAGhD,YAAY,CAAC,WAAW,GAAG,mpEAAA,CAAA,MAAA,CA6DH,aAAa,0CACxB,eAAe,EAAA,0MAAA,CAAA,CAAA,MAAA,CAOJ,aAAa,EAAA,gRAAA,CAUpC;;AAGD,QAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC;;QAGvC,OAAO,YAAA;YACL,IAAM,aAAa,GAAG,QAAQ,CAAC,cAAc,CAC3C,8BAA8B,CAC/B;YACD,IAAI,aAAa,EAAE;AACjB,gBAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC;YAC1C;AACF,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,aAAa,EAAE,eAAe,CAAC,CAAC;AACtC;;;;"}
|