GITBOOK-214: Fileshare web component

videsk · Sep 26, 2023 · b4dfdbf · b4dfdbf
1 parent b66edb8
commit b4dfdbf
Show file tree

Hide file tree

Showing 122 changed files with 734 additions and 278 deletions.
diff --git a/.gitbook/assets/file.excalidraw.svg b/.gitbook/assets/file.excalidraw.svg
diff --git a/.gitbook/assets/image (1) (1).png b/.gitbook/assets/image (1) (1).png
diff --git a/.gitbook/assets/image (1).png b/.gitbook/assets/image (1).png
diff --git a/.gitbook/assets/image (10).png b/.gitbook/assets/image (10).png
diff --git a/.gitbook/assets/image (11).png b/.gitbook/assets/image (11).png
diff --git a/.gitbook/assets/image (12).png b/.gitbook/assets/image (12).png
diff --git a/.gitbook/assets/image (13).png b/.gitbook/assets/image (13).png
diff --git a/.gitbook/assets/image (14).png b/.gitbook/assets/image (14).png
diff --git a/.gitbook/assets/image (15).png b/.gitbook/assets/image (15).png
diff --git a/.gitbook/assets/image (16).png b/.gitbook/assets/image (16).png
diff --git a/.gitbook/assets/image (17).png b/.gitbook/assets/image (17).png
diff --git a/.gitbook/assets/image (18).png b/.gitbook/assets/image (18).png
diff --git a/.gitbook/assets/image (19).png b/.gitbook/assets/image (19).png
diff --git a/.gitbook/assets/image (2).png b/.gitbook/assets/image (2).png
diff --git a/.gitbook/assets/image (20).png b/.gitbook/assets/image (20).png
diff --git a/.gitbook/assets/image (21).png b/.gitbook/assets/image (21).png
diff --git a/.gitbook/assets/image (22).png b/.gitbook/assets/image (22).png
diff --git a/.gitbook/assets/image (23).png b/.gitbook/assets/image (23).png
diff --git a/.gitbook/assets/image (24).png b/.gitbook/assets/image (24).png
diff --git a/.gitbook/assets/image (25).png b/.gitbook/assets/image (25).png
diff --git a/.gitbook/assets/image (26).png b/.gitbook/assets/image (26).png
diff --git a/.gitbook/assets/image (27).png b/.gitbook/assets/image (27).png
diff --git a/.gitbook/assets/image (28).png b/.gitbook/assets/image (28).png
diff --git a/.gitbook/assets/image (29).png b/.gitbook/assets/image (29).png
diff --git a/.gitbook/assets/image (3).png b/.gitbook/assets/image (3).png
diff --git a/.gitbook/assets/image (30).png b/.gitbook/assets/image (30).png
diff --git a/.gitbook/assets/image (31).png b/.gitbook/assets/image (31).png
diff --git a/.gitbook/assets/image (32).png b/.gitbook/assets/image (32).png
diff --git a/.gitbook/assets/image (33).png b/.gitbook/assets/image (33).png
diff --git a/.gitbook/assets/image (34).png b/.gitbook/assets/image (34).png
diff --git a/.gitbook/assets/image (35).png b/.gitbook/assets/image (35).png
diff --git a/.gitbook/assets/image (36).png b/.gitbook/assets/image (36).png
diff --git a/.gitbook/assets/image (37).png b/.gitbook/assets/image (37).png
diff --git a/.gitbook/assets/image (38).png b/.gitbook/assets/image (38).png
diff --git a/.gitbook/assets/image (39).png b/.gitbook/assets/image (39).png
diff --git a/.gitbook/assets/image (4).png b/.gitbook/assets/image (4).png
diff --git a/.gitbook/assets/image (40).png b/.gitbook/assets/image (40).png
diff --git a/.gitbook/assets/image (41).png b/.gitbook/assets/image (41).png
diff --git a/.gitbook/assets/image (42).png b/.gitbook/assets/image (42).png
diff --git a/.gitbook/assets/image (44).png b/.gitbook/assets/image (44).png
diff --git a/.gitbook/assets/image (45).png b/.gitbook/assets/image (45).png
diff --git a/.gitbook/assets/image (46).png b/.gitbook/assets/image (46).png
diff --git a/.gitbook/assets/image (47).png b/.gitbook/assets/image (47).png
diff --git a/.gitbook/assets/image (48).png b/.gitbook/assets/image (48).png
diff --git a/.gitbook/assets/image (49).png b/.gitbook/assets/image (49).png
diff --git a/.gitbook/assets/image (5).png b/.gitbook/assets/image (5).png
diff --git a/.gitbook/assets/image (50).png b/.gitbook/assets/image (50).png
diff --git a/.gitbook/assets/image (51).png b/.gitbook/assets/image (51).png
diff --git a/.gitbook/assets/image (52).png b/.gitbook/assets/image (52).png
diff --git a/.gitbook/assets/image (53).png b/.gitbook/assets/image (53).png
diff --git a/.gitbook/assets/image (54).png b/.gitbook/assets/image (54).png
diff --git a/.gitbook/assets/image (55).png b/.gitbook/assets/image (55).png
diff --git a/.gitbook/assets/image (56).png b/.gitbook/assets/image (56).png
diff --git a/.gitbook/assets/image (57).png b/.gitbook/assets/image (57).png
diff --git a/.gitbook/assets/image (58).png b/.gitbook/assets/image (58).png
diff --git a/.gitbook/assets/image (59).png b/.gitbook/assets/image (59).png
diff --git a/.gitbook/assets/image (6).png b/.gitbook/assets/image (6).png
diff --git a/.gitbook/assets/image (60).png b/.gitbook/assets/image (60).png
diff --git a/.gitbook/assets/image (61).png b/.gitbook/assets/image (61).png
diff --git a/.gitbook/assets/image (62).png b/.gitbook/assets/image (62).png
diff --git a/.gitbook/assets/image (63).png b/.gitbook/assets/image (63).png
diff --git a/.gitbook/assets/image (64).png b/.gitbook/assets/image (64).png
diff --git a/.gitbook/assets/image (65).png b/.gitbook/assets/image (65).png
diff --git a/.gitbook/assets/image (66).png b/.gitbook/assets/image (66).png
diff --git a/.gitbook/assets/image (67).png b/.gitbook/assets/image (67).png
diff --git a/.gitbook/assets/image (68).png b/.gitbook/assets/image (68).png
diff --git a/.gitbook/assets/image (69).png b/.gitbook/assets/image (69).png
diff --git a/.gitbook/assets/image (7).png b/.gitbook/assets/image (7).png
diff --git a/.gitbook/assets/image (70).png b/.gitbook/assets/image (70).png
diff --git a/.gitbook/assets/image (71).png b/.gitbook/assets/image (71).png
diff --git a/.gitbook/assets/image (72).png b/.gitbook/assets/image (72).png
diff --git a/.gitbook/assets/image (73).png b/.gitbook/assets/image (73).png
diff --git a/.gitbook/assets/image (74).png b/.gitbook/assets/image (74).png
diff --git a/.gitbook/assets/image (75).png b/.gitbook/assets/image (75).png
diff --git a/.gitbook/assets/image (76).png b/.gitbook/assets/image (76).png
diff --git a/.gitbook/assets/image (77).png b/.gitbook/assets/image (77).png
diff --git a/.gitbook/assets/image (78).png b/.gitbook/assets/image (78).png
diff --git a/.gitbook/assets/image (79).png b/.gitbook/assets/image (79).png
diff --git a/.gitbook/assets/image (8).png b/.gitbook/assets/image (8).png
diff --git a/.gitbook/assets/image (80).png b/.gitbook/assets/image (80).png
diff --git a/.gitbook/assets/image (81).png b/.gitbook/assets/image (81).png
diff --git a/.gitbook/assets/image (82).png b/.gitbook/assets/image (82).png
diff --git a/.gitbook/assets/image (83).png b/.gitbook/assets/image (83).png
diff --git a/.gitbook/assets/image (84).png b/.gitbook/assets/image (84).png
diff --git a/.gitbook/assets/image (85).png b/.gitbook/assets/image (85).png
diff --git a/.gitbook/assets/image (86).png b/.gitbook/assets/image (86).png
diff --git a/.gitbook/assets/image (87).png b/.gitbook/assets/image (87).png
diff --git a/.gitbook/assets/image (88).png b/.gitbook/assets/image (88).png
diff --git a/.gitbook/assets/image (89).png b/.gitbook/assets/image (89).png
diff --git a/.gitbook/assets/image (9).png b/.gitbook/assets/image (9).png
diff --git a/.gitbook/assets/image (90).png b/.gitbook/assets/image (90).png
diff --git a/.gitbook/assets/image.png b/.gitbook/assets/image.png
diff --git a/SUMMARY.md b/SUMMARY.md
@@ -19,6 +19,8 @@
 * [📂 Intercambio archivos](sdks/intercambio-archivos/README.md)
   * [Métodos](sdks/intercambio-archivos/metodos.md)
   * [Eventos](sdks/intercambio-archivos/eventos.md)
+  * [Propiedades](sdks/intercambio-archivos/propiedades.md)
+  * [BeamPortFile](sdks/intercambio-archivos/beamportfile.md)
 * [📅 Calendario](sdks/calendario/README.md)
   * [Métodos](sdks/calendario/metodos.md)
   * [Eventos](sdks/calendario/eventos.md)
@@ -34,6 +36,11 @@
   * [Propiedades](componentes-web/webrtc/propiedades.md)
   * [Métodos](componentes-web/webrtc/metodos.md)
   * [Eventos](componentes-web/webrtc/eventos.md)
+* [🗃 Fileshare](componentes-web/fileshare/README.md)
+  * [Slots](componentes-web/fileshare/slots.md)
+  * [Propiedades](componentes-web/fileshare/propiedades.md)
+  * [Métodos](componentes-web/fileshare/metodos.md)
+  * [Eventos](componentes-web/fileshare/eventos.md)
 
 ## Widgets
 
@@ -44,14 +51,14 @@
 * [🖌 Personalización](widgets/personalizacion/README.md)
   * [Posición del widget](widgets/personalizacion/posicion-del-widget.md)
   * [Burbuja personalizable](widgets/personalizacion/burbuja-personalizable.md)
-* [🔗 Acciones por URL](widgets/url-triggers.md)
+* [🔗 Acciones por URL](widgets/acciones-por-url.md)
 * [🛰 API](widgets/api/README.md)
   * [Introducción](widgets/api/introduccion.md)
   * [Variables globales](widgets/api/variables-globales.md)
   * [Propiedades](widgets/api/propiedades.md)
   * [Métodos](widgets/api/metodos.md)
   * [Eventos](widgets/api/eventos.md)
-  * [Ajustes](widgets/api/diseno.md)
+  * [Ajustes](widgets/api/ajustes.md)
   * [Forzar segmentos](widgets/api/forzar-segmentos.md)
 
 ## Seguridad

diff --git a/componentes-web/fileshare/README.md b/componentes-web/fileshare/README.md
@@ -0,0 +1,38 @@
+---
+description: >-
+  A continuación, proveemos la documentación para nuestro componente web de
+  envíos de archivos.
+---
+
+# 🗃 Fileshare
+
+Este componente web permite facilitar la gestión visual de los archivos que se vayan a enviar y recibir con muy pocas líneas de código, pero sin dejar de lado la personalización con HTML, CSS y Javascript.
+
+Podrás usar el componente sin necesidad de modificar o añadir nada, o bien personalizar la caja de selección de archivos, comportamiento de envío, cómo adjuntar archivos y mucho más.
+
+Primero deberás cargar el componente en la cabecera de tu sitio web como script:
+
+```html
+<script src="https://cdn.videsk.io/sdk/fileshare.component.min.js"></script>
+```
+
+{% hint style="warning" %}
+Debes cargar el recurso antes de usar el componente `<videsk-fileshare>`, de lo contario será un elemento sin las propiedades y métodos. Además, debes tener cuidado con el atribute `async` o `defer`.
+{% endhint %}
+
+Para poder personalizar este componente solo deberás definirlo en alguna parte de tú código HTML:
+
+```html
+<videsk-fileshare></videsk-fileshare>
+```
+
+Una vez que has definido el componente podrás acceder a el mediante `querySelector` o cual selector HTML con Javascript.
+
+```javascript
+const component = document.querySelector('videsk-fileshare');
+```
+
+Posteriormente podrás hacer uso de sus propiedades, slots, métodos y eventos disponibles.
+
+
+
diff --git a/componentes-web/fileshare/eventos.md b/componentes-web/fileshare/eventos.md
@@ -0,0 +1,2 @@
+# Eventos
+
diff --git a/componentes-web/fileshare/metodos.md b/componentes-web/fileshare/metodos.md
@@ -0,0 +1,2 @@
+# Métodos
+
diff --git a/componentes-web/fileshare/propiedades.md b/componentes-web/fileshare/propiedades.md
@@ -0,0 +1,2 @@
+# Propiedades
+
diff --git a/componentes-web/fileshare/slots.md b/componentes-web/fileshare/slots.md
@@ -0,0 +1,14 @@
+# Slots
+
+Los slots son espacios que contienen elementos por defecto, pero que podrás reemplazar con tus propios elementos.
+
+## Composición
+
+<img src="../../.gitbook/assets/file.excalidraw.svg" alt="" class="gitbook-drawing">
+
+
+
+
+
+
+
diff --git a/componentes-web/webrtc/slots.md b/componentes-web/webrtc/slots.md
@@ -24,7 +24,7 @@ El listado de botones accionables como compartir pantalla, micrófono, cámara,
 * `button-chat`: botón de chat
 * `button-fullscreen`: botón de pantalla completa
 
-<figure><img src="../../.gitbook/assets/image (1) (1).png" alt=""><figcaption><p>Botones disponibles por defecto</p></figcaption></figure>
+<figure><img src="../../.gitbook/assets/image (61).png" alt=""><figcaption><p>Botones disponibles por defecto</p></figcaption></figure>
 
 {% hint style="info" %}
 Los botones de cambio de cámara y compartir pantalla automáticamente se mostrarán si la función está disponible en el navegador, de lo contrario no se mostrará.

diff --git a/depuracion/devtools.md b/depuracion/devtools.md
@@ -14,6 +14,8 @@ En general nuestros productos intentan ser lo más descriptivos posibles y en su
 
 Lo primero que deberás conocer como mejor herramienta del navegador para depurar ya sea en etapa de desarrollo o producción es **Devtools** o **Inspector de Elementos**.
 
+
+
 ## ¿Cómo acceder a Devtools?
 
 Para acceder a él existen varias maneras y dependerá de cada navegador:
@@ -27,7 +29,7 @@ Para acceder a él existen varias maneras y dependerá de cada navegador:
 **El clic derecho lo podrás realizar en cualquier lugar del sitio web.**
 {% endhint %}
 
-![Menú emergente al hacer clic derecho en el sitio](<../.gitbook/assets/image (66).png>)
+![Menú emergente al hacer clic derecho en el sitio](<../.gitbook/assets/image (87).png>)
 
 {% hint style="info" %}
 Si te hemos solicitado mantener abierto Devtools, por errores que nuestros sistemas de monitoreo no han logrado capturar, lee a continuación.
@@ -37,15 +39,15 @@ Si necesitas caputrar información ya sea de errores de código, red, etc. te su
 
 ### Vista acoplada
 
-![Vista acoplada](<../.gitbook/assets/image (27).png>)
+![Vista acoplada](<../.gitbook/assets/image (10).png>)
 
 ### Vista desacoplada
 
-Para acceder a la vista desacoplada deberás hacer clic en los tres puntos ![](<../.gitbook/assets/image (53).png>) ubicado en la parte superior derecha, y luego selecciona el ícono ![](<../.gitbook/assets/image (58).png>).
+Para acceder a la vista desacoplada deberás hacer clic en los tres puntos ![](<../.gitbook/assets/image (73).png>) ubicado en la parte superior derecha, y luego selecciona el ícono ![](<../.gitbook/assets/image (14).png>).
 
 Luego de esto la ventana quedará completamente desacoplada y podrás minimizarla.
 
-![Vista como ventana desacoplada](<../.gitbook/assets/image (57) (1).png>)
+![Vista como ventana desacoplada](<../.gitbook/assets/image (79).png>)
 
 ## Visualizar errores
 
@@ -55,7 +57,7 @@ La mejor forma de obtener los errores es hacer clic en la pestaña con el nombre
 Si nuestro equipo técnico te ha solicitado que abras Devtools o Inspector de elementos, dirígete a la sección de exportar registros de errores.
 {% endhint %}
 
-![Vista de "console" con errores y advertencias](<../.gitbook/assets/image (54).png>)
+![Vista de "console" con errores y advertencias](<../.gitbook/assets/image (48).png>)
 
 Existen mensajes con distintos colores de fondo, los más comunes serán rojo y amarillo, siendo errores y advertencias, respectivamente.
 
@@ -67,7 +69,7 @@ Es probable que nuestro equipo técnico te solicite realizar una descarga de los
 
 Para ello deberás estar en la [vista Console](devtools.md#visualizar-errores) y luego en cualquier lugar de la consola (Console) haz clic derecho, para finalmente dar clic en la opción **`Save as...`**.
 
-![Menú emergente al hacer clic derecho en console](<../.gitbook/assets/image (67).png>)
+![Menú emergente al hacer clic derecho en console](<../.gitbook/assets/image (22).png>)
 
 El archivo que descarges deberás enviarlo a [[email protected]](mailto:[email protected]), con el asunto **Registros de errores**, adjuntando el archivo con registros que habitualmente se llamará **{website}-{date}.log**.
 

diff --git a/depuracion/webrtc.md b/depuracion/webrtc.md
@@ -31,25 +31,25 @@ Lee a continuación para conocer las razones por tus agentes no podrían conecta
 Es posible que las pruebas arrojen errores en el micrófono si este está apagado o silenciado desde tu equipo o teclado.
 {% endhint %}
 
-![Error al capturar audio](<../.gitbook/assets/image (60).png>)
+![Error al capturar audio](<../.gitbook/assets/image (66).png>)
 
 Como requisitos mínimo deberás contar con micrófono para unirte a las videollamadas.
 
-![Éxito al detectar cámara](<../.gitbook/assets/image (33).png>)
+![Éxito al detectar cámara](<../.gitbook/assets/image (53).png>)
 
 ### Red
 
 Para identificar problemas de red es necesario entender ciertos conceptos.&#x20;
 
-![Pruebas de red](<../.gitbook/assets/image (51).png>)
+![Pruebas de red](<../.gitbook/assets/image (41).png>)
 
 `Network` consiste en pruebas propias de la red, siendo necesario disponer de al menos conexiones `UDP` o `TCP`. Si ambos tipos de protocolos de transmisión están restringidos no podrás conectar las videollamadas.
 
 {% hint style="info" %}
 No es requerido contar con compatibilidad IPv6.
 {% endhint %}
 
-![Pruebas de conexión](<../.gitbook/assets/image (59).png>)
+![Pruebas de conexión](<../.gitbook/assets/image (39).png>)
 
 Para el caso de `Connectivity` serán las pruebas de conexión, donde se probará la disponibilidad de conectar desde tu red con `Relay`, es decir, servidores de retransmisión, `Reflexive` para conexión P2P fuera de la red y finalmente conexión `Host` también P2P pero dentro de la red.
 

diff --git a/grabaciones/cloud/gcp.md b/grabaciones/cloud/gcp.md
@@ -26,7 +26,7 @@ Haz clic en **Crear**.
 En caso que tu interfaz esté en inglés una función corresponde a **Roles** en el menú de IAM.
 {% endhint %}
 
-<figure><img src="../../.gitbook/assets/image (1) (1) (1).png" alt=""><figcaption></figcaption></figure>
+<figure><img src="../../.gitbook/assets/image (1) (1).png" alt=""><figcaption></figcaption></figure>
 
 {% hint style="info" %}
 Deberás usar este rol para crear las credenciales en el siguiente paso. Así aseguras que solo tendremos permisos para crear archivos, no leer o modificar.
@@ -57,15 +57,15 @@ Luego deberás buscar la cuenta de servicio, dando clic en el nombre. Posteriorm
 
 Finalmente haz clic en el tipo de clave **JSON**.
 
-<figure><img src="../../.gitbook/assets/image (8) (2).png" alt=""><figcaption><p>Generar clave privada</p></figcaption></figure>
+<figure><img src="../../.gitbook/assets/image (30).png" alt=""><figcaption><p>Generar clave privada</p></figcaption></figure>
 
 Como último paso deberás pegar el contenido del archivo JSON en nuestra interfaz de configuración y Probar las credenciales.
 
 {% hint style="info" %}
 Solo puedes probar las credenciales la primera vez que las creas, luego no podrás utilizar la función.
 {% endhint %}
 
-<figure><img src="../../.gitbook/assets/image (12).png" alt=""><figcaption></figcaption></figure>
+<figure><img src="../../.gitbook/assets/image (9).png" alt=""><figcaption></figcaption></figure>
 
 ## Opción 1
 
@@ -115,3 +115,25 @@ Clave privada otorgada a la cuenta de servicio con permiso de escritura para cre
 ### Client email
 
 Dirección de correo electrónico de la cuenta de servicio asociada y que cuenta con los permisos de escritura.
+
+## Metadata
+
+Una vez que la integración para sincronizar las grabaciones esté completada y correcta, se comenzarán a enviar con metadata asociada a la llamada, lo que te permitirá buscar grabaciones de una manera enriquecida.
+
+<figure><img src="../../.gitbook/assets/image (1).png" alt=""><figcaption></figcaption></figure>
+
+Por defecto, adjuntamos:
+
+| Clave       | Valor  | Descripción                                              |
+| ----------- | ------ | -------------------------------------------------------- |
+| duration    | Number | Duración de la grabación en minutos                      |
+| checkSum    | String | CheckSum de la grabación con SHA-1                       |
+| startedAt   | Date   | Timestamp en la que comenzó la grabación                 |
+| endedAt     | Date   | Timestamp en la que finalizó la grabación                |
+| user        | String | ID del ejecutivo                                         |
+| extension   | String | Extensión del archivo, por defecto: _webm_.              |
+| uploadDate  | Date   | Fecha en la que se intentó sincronizar con cloud storage |
+| recordingId | String | ID de las pistas (no llamada)                            |
+| size        | Number | Tamaño del archivo en bytes                              |
+| identifier  | String | ID de la llamada                                         |
+| contentType | String | MIME type del archivo, por defecto: _video/webm_.        |