🚧 Colocado o VLibras no video-viewer e iniciado a conexão com o Libra…

…sService
fga-eps-mds · Jan 13, 2025 · a0b1880 · a0b1880
1 parent 09c1af0
commit a0b1880
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 24 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,8 +27,11 @@
     "@angular/service-worker": "^16.2.12",
     "@types/gapi.auth2": "^0.0.60",
     "angular-oauth2-oidc": "^16.0.0",
+    "axios": "^1.7.9",
+    "chart.js": "^4.4.3",
     "hls.js": "^1.4.12",
     "jwt-decode": "^3.1.2",
+    "ng2-charts": "^4.0.0",
     "ngx-google-analytics": "^14.0.1",
     "postcss-cli": "^10.1.0",
     "postcss-import": "^15.1.0",
@@ -39,10 +42,8 @@
     "primeng": "^16.9.1",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.13.3",
     "xlsx": "^0.18.5",
-    "chart.js": "^4.4.3",
-    "ng2-charts": "^4.0.0"
+    "zone.js": "~0.13.3"
   },
   "devDependencies": {
     "@angular-builders/custom-webpack": "^16.0.1",

diff --git a/src/app/pages/video-viewer/video-viewer.component.css b/src/app/pages/video-viewer/video-viewer.component.css
@@ -69,3 +69,7 @@
     justify-content: center; 
   }
 }
+
+[vw] {
+  z-index: 1000;
+}
diff --git a/src/app/pages/video-viewer/video-viewer.component.html b/src/app/pages/video-viewer/video-viewer.component.html
@@ -63,3 +63,9 @@ <h4 class="font-custom font-bold text-gray-800">
     </div>
   </div>
 </div>
+<div vw class="enabled">
+  <div vw-access-button class="active"></div>
+  <div vw-plugin-wrapper>
+    <div class="vw-plugin-top-wrapper"></div>
+  </div>
+</div>
diff --git a/src/app/pages/video-viewer/video-viewer.component.ts b/src/app/pages/video-viewer/video-viewer.component.ts
@@ -9,6 +9,7 @@ import { AuthService } from 'src/app/services/auth.service';
 import jwt_decode from 'jwt-decode';
 import { UNB_TV_CHANNEL_ID } from 'src/app/app.constant';
 import { Catalog } from 'src/shared/model/catalog.model';
+import axios from 'axios';
 
 @Component({
   selector: 'app-video-viewer',
@@ -57,6 +58,7 @@ export class VideoViewerComponent implements OnInit {
   ) { }
 
   ngOnInit(): void {
+    this.loadVLibrasScript();
     const iframe = document.getElementById('embeddedVideo') as HTMLIFrameElement;
     this.idVideo = this.route.snapshot.params['idVideo'];
 
@@ -346,6 +348,63 @@ export class VideoViewerComponent implements OnInit {
     }
   }
 
+private loadVLibrasScript(): void {
+  const existingScript = document.querySelector('script[src="assets/app/vlibras-plugin.js"]');
+  if (!existingScript) {
+    const script = document.createElement('script');
+    script.src = 'assets/app/vlibras-plugin.js';
+    script.async = true;
+    script.onload = () => {
+      const vlibras = new (window as any).VLibras.Widget({
+        rootPath: '/assets/app/',
+        personalization: 'https://vlibras.gov.br/config/configs.json',
+        opacity: 0.75,
+        position: 'R',
+        avatar: 'random'
+      });
+
+      // Busca o texto do microsserviço e lê durante a rolagem do vídeo
+      this.fetchTextForVLibras().then((text) => {
+        this.startVLibrasTranslation(vlibras, text);
+      });
+    };
+    document.body.appendChild(script);
+  } else {
+    // Reinitialize VLibras if script already exists
+    this.fetchTextForVLibras().then((text) => {
+      this.startVLibrasTranslation(new (window as any).VLibras.Widget(), text);
+    });
+  }
+}
+
+private async fetchTextForVLibras(): Promise<string> {
+  try {
+    const response = await axios.get(`http://localhost://8020/get-text/${this.idVideo}`);
+    return response.data.text;
+  } catch (error) {
+    console.error('Erro ao buscar texto do microsserviço:', error);
+    return 'Texto não encontrado.';
+  }
+}
+
+private startVLibrasTranslation(vlibras: any, text: string): void {
+  // Configure VLibras para usar o texto retornado
+  vlibras.translateText(text);
+
+  // Escutar eventos de progresso do vídeo para sincronizar a leitura
+  const iframe = document.getElementById('embeddedVideo') as HTMLIFrameElement;
+  const video = iframe?.contentDocument?.querySelector('video');
+  if (video) {
+    video.ontimeupdate = () => {
+      if (!video.paused) {
+        vlibras.readText(text);
+      }
+    };
+  }
+}
+
+
+
   dummyKeyDown(event: KeyboardEvent): void {
     // Não faz nada
   }

diff --git a/src/index.html b/src/index.html
@@ -20,21 +20,5 @@
   </head>
   <body>
     <app-root></app-root>
-    <div vw class="enabled">
-      <div vw-access-button class="active"></div>
-      <div vw-plugin-wrapper>
-        <div class="vw-plugin-top-wrapper"></div>
-      </div>
-    </div>
-    <script src="assets/app/vlibras-plugin.js"></script>
-    <script>
-      new window.VLibras.Widget({
-        rootPath: "/assets/app/",
-        personalization: 'https://vlibras.gov.br/config/configs.json',
-        opacity: 0.75,
-        position: 'R',
-        avatar: 'random'
-      });
-    </script>
   </body>
 </html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -69,3 +69,7 @@ @@
         justify-content: center;
       }
     }
+    [vw] {
+      z-index: 1000;
+    }