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 index 85352ac..9e382cd 100644 --- 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,8 +143,8 @@ 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; @@ -152,6 +152,7 @@ button.resumo-idioma span { .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 index f85b441..92e9f0b 100644 --- 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 @@
-
- -
+
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 index dc71a09..bc802dd 100644 --- 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,7 +43,7 @@ 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); } @@ -49,14 +51,13 @@ async function loadVideo(videoElement) { // 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 index 237051f..060af3d 100644 --- 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 */ } - \ No newline at end of file diff --git a/docs/player/css/style.css b/docs/player/css/style.css index bea8d4e..9e382cd 100644 --- a/docs/player/css/style.css +++ b/docs/player/css/style.css @@ -1,98 +1,204 @@ -/* Criar aqui um sumário ou cabeçlho */ -/* Esse arquivo contém as estilizações gerais*/ +/* Global Styles */ +.bg { + background-color: #f0f5ff; +} -* { - box-sizing: border-box; - } +.bg.dark { + background-color: #000000; +} +.border-btn { + font-size: 12px; + padding: 6px; + min-width: 160px; + min-height: 48px; + border-radius: 24px; + border: 3px solid var(--Primary, #4785ff); + color: #4785ff; + background-color: transparent; + font-weight: bold; + transition: all 0.2s ease-in-out; +} -.header { - top: 0; - left: 0; - width: 100%; - background-color: #FFFFFF; - color: #4785FF; - padding: 10px; - box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); - } - - .menu ul { - list-style-type: none; - margin: 0; - padding: 0; - } - - .menu li { - padding: 8px; - margin-bottom: 7px; - background-color: #FFFFFF; - color: #4785FF; - box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); - } - - .menu li:hover { - background-color: #0099cc; - } +.border-btn:hover { + transform: scale(0.955); + cursor: pointer; + background-color: #4785ff; + color: #fff; +} - - .aside { - background-color: #FFFFFF; - padding: 15px; - font-size: 14px; - box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); - border-radius: 16px; - } - - .footer { - position: fixed; - background-color: #0099cc; - color: #ffffff; - text-align: center; - font-size: 12px; - padding: 10px; - bottom: 0; - left: 0; - width: 100%; - } +.toggle-theme, +.toggle-theme.dark { + border: 3px solid var(--Primary, black); + color: black; + font-size: 12px; + padding: 6px; + min-width: 100px; + min-height: 48px; +} - video{ - width: 100%; - height: auto; - border-radius: 16px; - } +.toggle-theme:hover, +.toggle-theme.dark:hover { + background-color: var(--Primary, black); + color: var(--Secondary, white); +} - .resume-text { - color: #465f96; - } +.toggle-theme.dark { + border: 3px solid var(--Primary, white); + color: white; +} -/* Estilo para o contêiner dos botões de idioma */ +.menu ul { + list-style-type: none; + margin: 0; + padding: 0; +} + +.menu li { + padding: 8px; + margin-bottom: 7px; + background-color: #ffffff; + color: #4785ff; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); +} + +.menu li:hover { + background-color: #0099cc; +} + +.aside, +.bottom { + background-color: #ffffff; + font-size: 14px; + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); + border-radius: 16px; + height: 100%; + padding: 2vw; +} + +.aside.dark, +.bottom.dark { + background-color: #36393e; + color: #fff; +} + +.aside { + display: flex; + flex-direction: column; + flex-grow: 0; + max-height: 100%; +} + +.bottom { + margin-top: 4vh; +} + +video { + width: 100%; + height: 100%; + border-radius: 16px; + z-index: -5; +} + +.resume-text { + color: #465f96; +} + +/* Language Buttons Styles */ #idioma-buttons-container { - background-color: #0099cc31; /* Cor de fundo preto */ - display: flex; /* Exibe os botões em uma linha */ - justify-content: center; /* Centraliza os botões horizontalmente */ - padding: 10px; /* Espaçamento interno para os botões */ + background-color: #0099cc31; + display: flex; + justify-content: center; + padding: 10px; border-radius: 12px; } -/* Estilo para os botões de idioma */ button.resumo-idioma { - background-color: #00000000; /* Cor de fundo preto */ + background-color: #00000000; border: none; - padding: 10px; /* Espaçamento interno para os botões */ + padding: 10px; cursor: pointer; display: flex; align-items: center; } -/* Estilo para os ícones de bandeira */ button.resumo-idioma img { - width: 24px; /* Ajuste o tamanho do ícone conforme necessário */ - height: 24px; /* Ajuste o tamanho do ícone conforme necessário */ - margin-right: 8px; /* Espaço entre o ícone e o texto */ + width: 24px; + height: 24px; + margin-right: 8px; } -/* Estilo para o texto do botão de idioma */ button.resumo-idioma span { - font-size: 16px; /* Ajuste o tamanho da fonte conforme necessário */ - color: #fff; /* Cor do texto (branco) */ -} \ No newline at end of file + font-size: 16px; + color: #fff; +} + +.carousel-controllers { + margin: auto; + margin-bottom: 3vh; + display: flex; + justify-content: space-between; + gap: 10px; + width: 250px; +} + +.controller { + 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 { + cursor: pointer; + transform: scale(0.955); +} + +.controller.active { + background: #4785ff; + color: #fff; +} + +#title-text { + font-weight: bold; +} + +.container { + padding: 5vh; + height: auto; + max-height: 620px; + display: flex; + flex-basis: 0; + flex-grow: 1; +} + +.text-area { + flex-grow: 0; + margin-bottom: 2vh; + overflow: auto; +} + +.left, +.right { + display: flex; + flex-direction: column; + flex-grow: 1; +} + +/* Media Query for Smaller Screens */ +@media (max-width: 768px) { + .container { + flex-direction: column; + } + + .left, + .right { + width: 100% !important; + } +} diff --git a/docs/player/index.html b/docs/player/index.html index f85b441..92e9f0b 100644 --- a/docs/player/index.html +++ b/docs/player/index.html @@ -26,9 +26,7 @@
-
- -
+
diff --git a/docs/player/js/lib.js b/docs/player/js/lib.js index dc71a09..bc802dd 100644 --- a/docs/player/js/lib.js +++ b/docs/player/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,7 +43,7 @@ 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); } @@ -49,14 +51,13 @@ async function loadVideo(videoElement) { // 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/old/v5/assets/icon/en-us.png b/docs/player/old/v5/assets/icon/en-us.png new file mode 100644 index 0000000..82b720f Binary files /dev/null and b/docs/player/old/v5/assets/icon/en-us.png differ diff --git a/docs/player/old/v5/assets/icon/es-es.png b/docs/player/old/v5/assets/icon/es-es.png new file mode 100644 index 0000000..048c703 Binary files /dev/null and b/docs/player/old/v5/assets/icon/es-es.png differ diff --git a/docs/player/old/v5/assets/icon/pt-br.png b/docs/player/old/v5/assets/icon/pt-br.png new file mode 100644 index 0000000..f31cc71 Binary files /dev/null and b/docs/player/old/v5/assets/icon/pt-br.png differ diff --git a/docs/player/old/v5/css/lib.css b/docs/player/old/v5/css/lib.css new file mode 100644 index 0000000..237051f --- /dev/null +++ b/docs/player/old/v5/css/lib.css @@ -0,0 +1,56 @@ +/* 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; +} + +.bg-dark{ + background-color: #000000; +} + +/* For mobile phones: */ +[class*="col-"] { + width: 100%; + } + + @media only screen and (min-width: 600px) { + /* For tablets: */ + .col-s-1 {width: 8.33%;} + .col-s-2 {width: 16.66%;} + .col-s-3 {width: 25%;} + .col-s-4 {width: 33.33%;} + .col-s-5 {width: 41.66%;} + .col-s-6 {width: 50%;} + .col-s-7 {width: 58.33%;} + .col-s-8 {width: 66.66%;} + .col-s-9 {width: 75%;} + .col-s-10 {width: 83.33%;} + .col-s-11 {width: 91.66%;} + .col-s-12 {width: 100%;} + } + @media only screen and (min-width: 768px) { + /* For desktop: */ + .col-1 {width: 8.33%;} + .col-2 {width: 16.66%;} + .col-3 {width: 25%;} + .col-4 {width: 33.33%;} + .col-5 {width: 41.66%;} + .col-6 {width: 50%;} + .col-7 {width: 58.33%;} + .col-8 {width: 66.66%;} + .col-9 {width: 75%;} + .col-10 {width: 83.33%;} + .col-11 {width: 91.66%;} + .col-12 {width: 100%;} + } + + [class*="col-"] { + float: left; + padding: 10px; + } + + html { + font-family: "Open Sans", sans-serif; + } + \ No newline at end of file diff --git a/docs/player/old/v5/css/style.css b/docs/player/old/v5/css/style.css new file mode 100644 index 0000000..bea8d4e --- /dev/null +++ b/docs/player/old/v5/css/style.css @@ -0,0 +1,98 @@ +/* Criar aqui um sumário ou cabeçlho */ +/* Esse arquivo contém as estilizações gerais*/ + +* { + box-sizing: border-box; + } + + +.header { + top: 0; + left: 0; + width: 100%; + background-color: #FFFFFF; + color: #4785FF; + padding: 10px; + box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); + } + + .menu ul { + list-style-type: none; + margin: 0; + padding: 0; + } + + .menu li { + padding: 8px; + margin-bottom: 7px; + background-color: #FFFFFF; + color: #4785FF; + box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); + } + + .menu li:hover { + background-color: #0099cc; + } + + + .aside { + background-color: #FFFFFF; + padding: 15px; + font-size: 14px; + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); + border-radius: 16px; + } + + .footer { + position: fixed; + background-color: #0099cc; + color: #ffffff; + text-align: center; + font-size: 12px; + padding: 10px; + bottom: 0; + left: 0; + width: 100%; + } + + video{ + width: 100%; + height: auto; + border-radius: 16px; + } + + .resume-text { + color: #465f96; + } + +/* Estilo para o contêiner dos botões de idioma */ +#idioma-buttons-container { + background-color: #0099cc31; /* Cor de fundo preto */ + display: flex; /* Exibe os botões em uma linha */ + justify-content: center; /* Centraliza os botões horizontalmente */ + padding: 10px; /* Espaçamento interno para os botões */ + border-radius: 12px; +} + +/* Estilo para os botões de idioma */ +button.resumo-idioma { + background-color: #00000000; /* Cor de fundo preto */ + border: none; + padding: 10px; /* Espaçamento interno para os botões */ + cursor: pointer; + display: flex; + align-items: center; +} + +/* Estilo para os ícones de bandeira */ +button.resumo-idioma img { + width: 24px; /* Ajuste o tamanho do ícone conforme necessário */ + height: 24px; /* Ajuste o tamanho do ícone conforme necessário */ + margin-right: 8px; /* Espaço entre o ícone e o texto */ +} + +/* Estilo para o texto do botão de idioma */ +button.resumo-idioma span { + font-size: 16px; /* Ajuste o tamanho da fonte conforme necessário */ + color: #fff; /* Cor do texto (branco) */ +} \ No newline at end of file diff --git a/docs/player/old/v5/index.html b/docs/player/old/v5/index.html new file mode 100644 index 0000000..f85b441 --- /dev/null +++ b/docs/player/old/v5/index.html @@ -0,0 +1,57 @@ + + + + + + + Speech2Learning + + + + + + +
+ +
+ +
+
+ +
+

+

+
+ +
+ +
+
+ +
+
+ +
+

+
+ +
+ + +
+
+
+
+
+
+ + +
+
+ + + + + diff --git a/docs/player/old/v5/js/lib.js b/docs/player/old/v5/js/lib.js new file mode 100644 index 0000000..dc71a09 --- /dev/null +++ b/docs/player/old/v5/js/lib.js @@ -0,0 +1,205 @@ +// Url inicial para requisições de API +const url_base = 'https://falvojr.github.io/speech2learning'; + +// Variável global para manipular retorno da API +let api_return = { + id: '', + url: '', + metadata: { + originalLanguage: '', + localizations: {} + }, +} + +// 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') +}; + +// Função para exibir ou ocultar o botão 'btn-show-resume' com base na transcrição selecionada +function toggleBtnShowResumeVisibility() { + // Verificar se há texto na transcrição + const hasTranscription = elements.resumoText.textContent.trim().length > 0; + + // Exibir ou ocultar o botão com base na presença de transcrição + elements.btnShowResume.style.display = hasTranscription ? 'block' : 'none'; +} + +// Função para ocultar a transcrição e o botão 'btn-show-resume' +function hideTranscription() { + elements.resumoText.innerHTML = ''; // Limpar o conteúdo da transcrição + + elements.btnShowResume.style.display = 'none'; // Ocultar o botão 'btn-show-resume' +} + +// Carregar video a partir do retorno da api +async function loadVideo(videoElement) { + const sourceElement = document.createElement('source'); + sourceElement.src = api_return.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; +} + + +// Carregar legendas a partir do retorno da api +async function loadSubtitles(videoElement) { + const localizations = api_return.metadata.localizations; + + for (const langCode in localizations) { + const loc = localizations[langCode]; + + const trackElement = document.createElement('track'); + trackElement.kind = 'subtitles'; + trackElement.label = langCode; + trackElement.srclang = langCode; + trackElement.src = loc.subtitleUrl; + trackElement.default = langCode === api_return.metadata.originalLanguage; + + videoElement.appendChild(trackElement); + } +} + +// Função de trocar o contraste da tela +function toggleContrast() { + // Adicionar a classe .dark aos elementos específicos + var elementsWithDarkClass = document.querySelectorAll('.bg, .aside, .bottom, .toggle-theme'); + + elementsWithDarkClass.forEach(function (element) { + element.classList.toggle("dark"); + }); +} + +// Carregar o resumo com base no idioma selecionado +function carregarResumo(idioma) { + let linkFetch = api_return.metadata.localizations[idioma].transcriptUrl; + + fetch(linkFetch) + .then((response) => response.text()) + .then((resumo) => { + // Dividir o texto em parágrafos com base nas quebras de linha + const paragrafos = resumo.split('\n'); + + // Limpar o conteúdo existente caso troque de idioma + elements.resumoText.innerHTML = ''; + + // Adicionar cada parágrafo como um elemento

+ paragrafos.forEach(paragrafo => { + const pElement = document.createElement('p'); + pElement.textContent = paragrafo; + elements.resumoText.appendChild(pElement); + }); + + toggleBtnShowResumeVisibility(); + }) + .catch((error) => { + console.error(`Erro ao carregar resumo em ${idioma}:`, error); + } + ); +} + +// Evento para carregar video e legenda ao entrar na página. +document.addEventListener('DOMContentLoaded', async () => { + const videoElement = document.getElementById('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(); + + // Carregar o vídeo + await loadVideo(videoElement); + + // Carregar o título e descrição + await loadTitleAndDescription(api_return.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'); + }); + } + + // Ocultar botão transcrição + elements.btnShowResume.style.display = 'none'; + + } catch (error) { + console.error('There has been a problem with your fetch operation:', error); + } +}); + +// 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 resetar todas as classes para a cor padrão +function resetControllers() { + const controllers = document.querySelectorAll('.controller'); + controllers.forEach(controller => { + controller.classList.remove('active'); + }); +} + \ No newline at end of file