Merge pull request #10 from falvojr/feat/code-review-v6

Code Review V6 (API V2)
falvojr · Jan 29, 2024 · c0f1f63 · c0f1f63
2 parents 4cf884b + fb4dffc
commit c0f1f63
Show file tree

Hide file tree

Showing 14 changed files with 718 additions and 231 deletions.
diff --git a/6-speech2learning-instance-libras/1-poc-accessible-video-player/src/css/style.css b/6-speech2learning-instance-libras/1-poc-accessible-video-player/src/css/style.css
@@ -143,15 +143,16 @@ button.resumo-idioma span {
 }
 
 .controller {
-  width: 82px;
-  height: 46px;
+  width: auto;
+  height: 100%;
   border-radius: 8px;
   background: #d6e4ff;
   transition: all 0.2s ease-in-out;
 }
 
 .controller p {
   margin: 0;
+  white-space: nowrap;
 }
 
 .controller:hover {

diff --git a/6-speech2learning-instance-libras/1-poc-accessible-video-player/src/index.html b/6-speech2learning-instance-libras/1-poc-accessible-video-player/src/index.html
@@ -26,9 +26,7 @@
         </div>
 
         <div class="right col-5 col-s-4">
-            <div class="carousel-controllers">
-
-            </div>
+            <div class="carousel-controllers"></div>
             <div class="aside">
                 <!-- Botões de idioma -->
                 <div class="text-area">

diff --git a/6-speech2learning-instance-libras/1-poc-accessible-video-player/src/js/lib.js b/6-speech2learning-instance-libras/1-poc-accessible-video-player/src/js/lib.js
@@ -2,7 +2,7 @@
 const url_base = 'https://falvojr.github.io/speech2learning';
 
 // Variável global para manipular retorno da API
-let api_return = {
+let apiModel = {
     id: '',
     url: '',
     metadata: {
@@ -11,15 +11,17 @@ let api_return = {
     },
 }
 
+// Função para obter elementos da página
+const getById = (id) => document.getElementById(id);
+const getFirstByClass = (className) => document.getElementsByClassName(className)[0];
+
 // Módulo de elementos da página
 const elements = {
-    resumoButtonBR: document.getElementById('resumo-pt-BR'),
-    resumoButtonUS: document.getElementById('resumo-en-US'),
-    resumoButtonES: document.getElementById('resumo-es-ES'),
-    resumoText: document.getElementById('resume-text'),
-    titleText: document.getElementById('title-text'),
-    descriptionText: document.getElementById('description-text'),
-    btnShowResume: document.getElementById('btn-show-resume')
+    resumoButtons: {}, // será preenchido dinamicamente
+    resumoText: getById('resume-text'),
+    titleText: getById('title-text'),
+    descriptionText: getById('description-text'),
+    btnShowResume: getById('btn-show-resume'),
 };
 
 // Função para exibir ou ocultar o botão 'btn-show-resume' com base na transcrição selecionada
@@ -41,22 +43,21 @@ function hideTranscription() {
 // Carregar video a partir do retorno da api
 async function loadVideo(videoElement) {
     const sourceElement = document.createElement('source');
-    sourceElement.src = api_return.url;
+    sourceElement.src = apiModel.url;
     sourceElement.type = 'video/mp4';
     videoElement.appendChild(sourceElement);
 }
 
 // Carregar título e descrição a partir do retorno da api, definido a lingua original
 async function loadTitleAndDescription(originalLanguage) {
     let language = originalLanguage;
-    elements.titleText.innerHTML = api_return.metadata.localizations[language].name;
-    elements.descriptionText.innerHTML = api_return.metadata.localizations[language].description;
+    elements.titleText.innerHTML = apiModel.metadata.localizations[language].name;
+    elements.descriptionText.innerHTML = apiModel.metadata.localizations[language].description;
 }
 
-
 // Carregar legendas a partir do retorno da api
 async function loadSubtitles(videoElement) {
-    const localizations = api_return.metadata.localizations;
+    const localizations = apiModel.metadata.localizations;
 
     for (const langCode in localizations) {
         const loc = localizations[langCode];
@@ -66,7 +67,7 @@ async function loadSubtitles(videoElement) {
         trackElement.label = langCode;
         trackElement.srclang = langCode;
         trackElement.src = loc.subtitleUrl;
-        trackElement.default = langCode === api_return.metadata.originalLanguage;
+        trackElement.default = langCode === apiModel.metadata.originalLanguage;
 
         videoElement.appendChild(trackElement);
     }
@@ -84,7 +85,7 @@ function toggleContrast() {
 
 // Carregar o resumo com base no idioma selecionado
 function carregarResumo(idioma) {
-    let linkFetch = api_return.metadata.localizations[idioma].transcriptUrl;
+    let linkFetch = apiModel.metadata.localizations[idioma].transcriptUrl;
 
     fetch(linkFetch)
         .then((response) => response.text())
@@ -112,54 +113,26 @@ function carregarResumo(idioma) {
 
 // Evento para carregar video e legenda ao entrar na página.
 document.addEventListener('DOMContentLoaded', async () => {
-    const videoElement = document.getElementById('video');
+    const videoElement = getById('video');
 
     try {
         const response = await fetch(url_base + '/api/mockV2.json');
         if (!response.ok) throw new Error('Network response was not ok ' + response.statusText);
 
-        api_return = await response.json();
+        apiModel = await response.json();
 
         // Carregar o vídeo
         await loadVideo(videoElement);
 
         // Carregar o título e descrição
-        await loadTitleAndDescription(api_return.metadata.originalLanguage);
+        await loadTitleAndDescription(apiModel.metadata.originalLanguage);
 
         // Carregar as legendas
         await loadSubtitles(videoElement); 
 
         // Criar dinamicamente os controles de idioma
-        const carouselControllers = document.querySelector('.carousel-controllers');
-        for (const langCode in api_return.metadata.localizations) {
-            const controllerDiv = document.createElement('div');
-            controllerDiv.classList.add('controller');
-
-            const button = document.createElement('button');
-            button.id = `resumo-${langCode}`;
-            button.classList.add('resumo-idioma');
-
-            const img = document.createElement('img');
-            img.src = `./assets/icon/${langCode}.png`;
-            img.alt = `Bandeira do ${langCode}`;
-
-            const p = document.createElement('p');
-            p.textContent = langCode;
-
-            button.appendChild(img);
-            button.appendChild(p);
-
-            controllerDiv.appendChild(button);
-
-            carouselControllers.appendChild(controllerDiv);
-
-            // Adicione um event listener para cada botão
-            button.addEventListener('click', function () {
-                carregarResumo(langCode);
-                loadTitleAndDescription(langCode);
-                resetControllers();
-                this.parentElement.classList.add('active');
-            });
+        for (const langCode in apiModel.metadata.localizations) {
+            addLanguageButton(langCode);
         }
 
         // Ocultar botão transcrição
@@ -173,27 +146,37 @@ document.addEventListener('DOMContentLoaded', async () => {
 // Eventos para carregar o resumo quando o botão "Ver Resumo" for clicado.
 elements.btnShowResume.addEventListener('click', () => {hideTranscription(); toggleBtnShowResumeVisibility();});
 
-// Adicione um event listener para cada botão
-document.getElementById('resumo-pt-BR').addEventListener('click', function() {
-    carregarResumo('pt-BR');
-    loadTitleAndDescription('pt-BR');
-    resetControllers(); // Resetar todas as classes
-    this.parentElement.classList.add('active'); // Adicionar classe à linguagem selecionada
-});
-
-document.getElementById('resumo-en-US').addEventListener('click', function() {
-    carregarResumo('en-US');
-    loadTitleAndDescription('en-US');
-    resetControllers();
-    this.parentElement.classList.add('active');
-});
-
-document.getElementById('resumo-es-ES').addEventListener('click', function() {
-    carregarResumo('es-ES');
-    loadTitleAndDescription('es-ES');
-    resetControllers();
-    this.parentElement.classList.add('active');
-});
+// Função para criar e adicionar elementos de botão de idioma
+function addLanguageButton(langCode) {
+    const carouselControllers = getFirstByClass('carousel-controllers');
+    const controllerDiv = document.createElement('div');
+    controllerDiv.classList.add('controller');
+
+    const button = document.createElement('button');
+    button.id = `resumo-${langCode}`;
+    button.classList.add('resumo-idioma');
+    elements.resumoButtons[langCode] = button; // Adicionar ao módulo de elementos
+
+    const img = document.createElement('img');
+    img.src = `./assets/icon/${langCode.toLowerCase()}.png`;
+    img.alt = `Bandeira do ${langCode}`;
+
+    const p = document.createElement('p');
+    p.textContent = langCode.toUpperCase();
+
+    button.appendChild(img);
+    button.appendChild(p);
+    controllerDiv.appendChild(button);
+    carouselControllers.appendChild(controllerDiv);
+
+    // Adicionar event listener
+    button.addEventListener('click', function () {
+        carregarResumo(langCode);
+        loadTitleAndDescription(langCode);
+        resetControllers();
+        this.parentElement.classList.add('active');
+    });
+}
 
 // Função para resetar todas as classes para a cor padrão
 function resetControllers() {

diff --git a/docs/player/css/lib.css b/docs/player/css/lib.css
@@ -1,14 +1,10 @@
 /* Criar aqui um sumário ou cabeçlho */
 /* Esse arquivo contém as estilizações do tipo biblioteca, para criar classes comuns e úteis (tipo uma framework)*/
 
-.bg-baby-blue{
-    background-color: #F0F5FF;
+body{
+  padding: .5vw;
+  padding-bottom: 2vw;
 }
-
-.bg-dark{
-    background-color: #000000;
-}
-
 /* For mobile phones: */
 [class*="col-"] {
     width: 100%;
@@ -50,7 +46,13 @@
     padding: 10px;
   }
 
-  html {
+* {
+  box-sizing: border-box;
+}
+
+  * {
     font-family: "Open Sans", sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 100%; /* 24px */
   }
-