From 9f26c5e09b24da02092fb329e1a0032bcb380315 Mon Sep 17 00:00:00 2001 From: karoline luz Date: Thu, 5 Dec 2024 22:40:54 -0300 Subject: [PATCH 01/14] Feat:Adicionando fundo escuro da thumb --- src/app/pages/video/video.component.css | 13 ++++++++++ src/app/pages/video/video.component.html | 30 +++++++----------------- 2 files changed, 21 insertions(+), 22 deletions(-) diff --git a/src/app/pages/video/video.component.css b/src/app/pages/video/video.component.css index bc3a0016..9178557b 100755 --- a/src/app/pages/video/video.component.css +++ b/src/app/pages/video/video.component.css @@ -1,3 +1,16 @@ .center { margin: 0 auto; } + +.video-thumbnail { + transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease; +} + +.video-thumbnail:hover { + transform: scale(1.05); + /* Amplia a imagem ao passar o mouse */ + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7); + /* Fundo mais escuro e sombra intensificada */ + filter: brightness(0.6); + /* Escurece ainda mais a imagem */ +} \ No newline at end of file diff --git a/src/app/pages/video/video.component.html b/src/app/pages/video/video.component.html index 84351b8c..55ac65e4 100755 --- a/src/app/pages/video/video.component.html +++ b/src/app/pages/video/video.component.html @@ -1,35 +1,21 @@ -
-
+
+
Programação indisponível no momento
-
-
- {{ video.title }} +
+ {{ video.title }}
-
+
\ No newline at end of file From d010ec5563131ee757451e3bc89247df08bfb80b Mon Sep 17 00:00:00 2001 From: navicg Date: Thu, 5 Dec 2024 23:07:07 -0300 Subject: [PATCH 02/14] =?UTF-8?q?feat:=20Adicionando=20caixa=20de=20texto?= =?UTF-8?q?=20com=20t=C3=ADtulo.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/pages/video/video.component.css | 111 +++++++++++++++++++++-- src/app/pages/video/video.component.html | 6 +- 2 files changed, 110 insertions(+), 7 deletions(-) diff --git a/src/app/pages/video/video.component.css b/src/app/pages/video/video.component.css index 9178557b..3b6d996a 100755 --- a/src/app/pages/video/video.component.css +++ b/src/app/pages/video/video.component.css @@ -2,15 +2,114 @@ margin: 0 auto; } +.video-thumbnail-container { + position: relative; + width: 100%; + height: 100%; + display: block; + overflow: hidden; + border-radius: 12px; + border: 2px solid rgba(0, 0, 0, 0.1); +} + .video-thumbnail { + position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease; + display: block; + width: 140px; + height: 105px; + border-radius: 10px; } -.video-thumbnail:hover { +.video-thumbnail-container:hover .video-thumbnail { transform: scale(1.05); - /* Amplia a imagem ao passar o mouse */ - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7); - /* Fundo mais escuro e sombra intensificada */ - filter: brightness(0.6); - /* Escurece ainda mais a imagem */ + box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); + filter: brightness(0.7); +} + +.video-description-box { + position: absolute; + bottom: -30px; + left: 0; + width: 100%; + background: rgba(0, 0, 0, 0.8); + color: #fff; + font-size: 12px; + padding: 8px; + opacity: 0; + transition: opacity 0.2s ease, bottom 0.2s ease; + text-align: center; + box-sizing: border-box; + border-top-left-radius: 12px; + border-top-right-radius: 12px; + overflow: hidden; +} + +.video-thumbnail-container:hover .video-description-box { + bottom: 0; + opacity: 1; +} + +.description-text { + margin: 0; + padding: 0; + display: inline-block; + white-space: nowrap; + opacity: 0; + transition: opacity 0.2s ease; + animation: scroll-text 8s linear infinite; + animation-play-state: paused; +} + +.video-thumbnail-container:hover .description-text { + opacity: 1; + animation-play-state: running; +} + +@keyframes scroll-text { + 0% { + transform: translateX(100%); + } + 100% { + transform: translateX(-100%); + } +} + +/* Adicionando a caixa de sombra sobre a miniatura do vídeo */ +.video-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.3); + border-radius: 12px; + transition: opacity 0.3s ease; + opacity: 0; +} + +.video-thumbnail-container:hover .video-overlay { + opacity: 1; +} + +/* Estilos para o botão de favoritar */ +.favorite-button { + position: absolute; + top: 8px; + right: 8px; + background: transparent; + border: none; + color: #ffcc00; + font-size: 24px; + cursor: pointer; + z-index: 1; + transition: transform 0.2s ease; +} + +.favorite-button:hover { + transform: scale(1.2); +} + +.favorite-button:focus { + outline: none; } \ No newline at end of file diff --git a/src/app/pages/video/video.component.html b/src/app/pages/video/video.component.html index 55ac65e4..afea50b1 100755 --- a/src/app/pages/video/video.component.html +++ b/src/app/pages/video/video.component.html @@ -12,9 +12,13 @@
-
+
{{ video.title }} +
+
+
{{ video.title }}
+
From 22a15ee0993931ce553541fe0aca378a93fc1029 Mon Sep 17 00:00:00 2001 From: Christopher Date: Thu, 5 Dec 2024 23:43:32 -0300 Subject: [PATCH 03/14] feat: Adicionando o icone de estrela a capa do video --- src/app/pages/video/video.component.css | 25 ++++++++++++++++++++++++ src/app/pages/video/video.component.html | 2 ++ 2 files changed, 27 insertions(+) diff --git a/src/app/pages/video/video.component.css b/src/app/pages/video/video.component.css index 3b6d996a..2487101c 100755 --- a/src/app/pages/video/video.component.css +++ b/src/app/pages/video/video.component.css @@ -70,6 +70,7 @@ 0% { transform: translateX(100%); } + 100% { transform: translateX(-100%); } @@ -112,4 +113,28 @@ .favorite-button:focus { outline: none; +} + +/* Estilo para o ícone da estrela */ +.star-icon { + position: absolute; + top: -5px; + /* Posição ajustada para mais em cima */ + right: 2px; + /* Posição ajustada para o canto direito */ + font-size: 32px; + /* Tamanho da estrela */ + color: #000; + /* Cor preta inicialmente */ + z-index: 2; + transition: color 0.3s ease, transform 0.3s ease; + /* Transições suaves para cor e escala */ +} + +/* Estilo da estrela ao passar o mouse */ +.star-icon:hover { + color: #fefb00; + /* Cor amarela ao passar o mouse */ + transform: scale(1.1); + /* Leve aumento de tamanho */ } \ No newline at end of file diff --git a/src/app/pages/video/video.component.html b/src/app/pages/video/video.component.html index afea50b1..89ee3dd4 100755 --- a/src/app/pages/video/video.component.html +++ b/src/app/pages/video/video.component.html @@ -19,6 +19,8 @@
{{ video.title }}
+ +
★
From 4e716e076f83444a9a16a14e8d408bb464667d4b Mon Sep 17 00:00:00 2001 From: JJOAOMARCOSS Date: Fri, 6 Dec 2024 21:05:27 -0300 Subject: [PATCH 04/14] Feat: Adicionando bandeira e formatando icones --- src/app/pages/video/video.component.css | 332 +++++++++++++---------- src/app/pages/video/video.component.html | 57 ++-- 2 files changed, 225 insertions(+), 164 deletions(-) diff --git a/src/app/pages/video/video.component.css b/src/app/pages/video/video.component.css index 2487101c..c935004e 100755 --- a/src/app/pages/video/video.component.css +++ b/src/app/pages/video/video.component.css @@ -1,140 +1,196 @@ -.center { - margin: 0 auto; +.center { + margin: 0 auto; +} + +.video-thumbnail-container { + position: relative; + width: 100%; + height: 100%; + display: block; + overflow: hidden; + border-radius: 12px; + border: 2px solid rgba(0, 0, 0, 0.1); +} + +.video-thumbnail { + position: relative; + transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease; + display: block; + width: 140px; + height: 105px; + border-radius: 10px; +} + +.video-thumbnail-container:hover .video-thumbnail { + transform: scale(1.05); + box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); + filter: brightness(0.7); +} + +.video-description-box { + position: absolute; + bottom: -30px; + left: 0; + width: 100%; + background: rgba(0, 0, 0, 0.8); + color: #fff; + font-size: 12px; + padding: 8px; + opacity: 0; + transition: opacity 0.2s ease, bottom 0.2s ease; + text-align: center; + box-sizing: border-box; + border-top-left-radius: 12px; + border-top-right-radius: 12px; + overflow: hidden; +} + +.video-thumbnail-container:hover .video-description-box { + bottom: 0; + opacity: 1; +} + +.description-text { + margin: 0; + padding: 0; + display: inline-block; + white-space: nowrap; + opacity: 0; + transition: opacity 0.2s ease; + animation: scroll-text 8s linear infinite; + animation-play-state: paused; +} + +.video-thumbnail-container:hover .description-text { + opacity: 1; + animation-play-state: running; +} + +@keyframes scroll-text { + 0% { + transform: translateX(100%); + } + + 100% { + transform: translateX(-100%); + } +} + +/* Adicionando a caixa de sombra sobre a miniatura do vídeo */ +.video-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.3); + border-radius: 12px; + transition: opacity 0.3s ease; + opacity: 0; +} + +.video-thumbnail-container:hover .video-overlay { + opacity: 1; +} + +/* Estilos para o botão de favoritar */ +.favorite-button { + position: absolute; + top: 8px; + right: 8px; + background: transparent; + border: none; + color: #ffcc00; + font-size: 24px; + cursor: pointer; + z-index: 1; + transition: transform 0.2s ease; +} + +.favorite-button:hover { + transform: scale(1.2); +} + +.favorite-button:focus { + outline: none; +} + +/* Estilo para o ícone da estrela */ +.star-icon { + position: absolute; + top: -5px; + left: 115px; + width: 24px; + height: 52px; + z-index: 2; + transition: transform 0.3s ease, filter 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; + cursor: pointer; +} + +/* Estilos para o tooltip da estrela */ +.star-icon[title]:hover::after { + content: attr(title); + position: absolute; + top: -1px; + /* Posiciona acima do ícone */ + left: 10%; + transform: translateX(-60%); + background-color: rgba(0, 0, 0, 0.7); + color: white; + padding: 4px 8px; + border-radius: 12px; + font-size: 12px; + white-space: nowrap; + opacity: 1; + transition: opacity 0.2s ease; +} +.star-icon img { + width: 100%; + height: 100%; + object-fit: contain; + filter: brightness(1.2) invert(0) sepia(100%) saturate(500%) hue-rotate(50deg); + opacity: 0.7; /* 50% de transparência */ +} +.star-icon:hover img { + transform: scale(1.1); + filter: brightness(0) invert(1)sepia(100%) saturate(500%) hue-rotate(160deg); /* Ajuste para cor amarela */ +} +/* Estilo para o ícone de salvar */ +.save-icon { + position: absolute; + top: -5px; + left: 2px; + width: 24px; + height: 58px; + z-index: 2; + transition: transform 0.3s ease, filter 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; + cursor: pointer; +} + +.save-icon img { + width: 100%; + height: 100%; + object-fit: contain; + filter: brightness(1.2) invert(0) sepia(100%) saturate(500%) hue-rotate(50deg); + opacity: 0.7; /* 50% de transparência */ +} +.save-icon:hover img { + transform: scale(1.1); + filter: brightness(0) invert(1)sepia(100%) saturate(500%) hue-rotate(160deg); /* Ajuste para cor amarela */ } - -.video-thumbnail-container { - position: relative; - width: 100%; - height: 100%; - display: block; - overflow: hidden; - border-radius: 12px; - border: 2px solid rgba(0, 0, 0, 0.1); -} - -.video-thumbnail { - position: relative; - transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease; - display: block; - width: 140px; - height: 105px; - border-radius: 10px; -} - -.video-thumbnail-container:hover .video-thumbnail { - transform: scale(1.05); - box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); - filter: brightness(0.7); -} - -.video-description-box { - position: absolute; - bottom: -30px; - left: 0; - width: 100%; - background: rgba(0, 0, 0, 0.8); - color: #fff; - font-size: 12px; - padding: 8px; - opacity: 0; - transition: opacity 0.2s ease, bottom 0.2s ease; - text-align: center; - box-sizing: border-box; - border-top-left-radius: 12px; - border-top-right-radius: 12px; - overflow: hidden; -} - -.video-thumbnail-container:hover .video-description-box { - bottom: 0; - opacity: 1; -} - -.description-text { - margin: 0; - padding: 0; - display: inline-block; - white-space: nowrap; - opacity: 0; - transition: opacity 0.2s ease; - animation: scroll-text 8s linear infinite; - animation-play-state: paused; -} - -.video-thumbnail-container:hover .description-text { - opacity: 1; - animation-play-state: running; -} - -@keyframes scroll-text { - 0% { - transform: translateX(100%); - } - - 100% { - transform: translateX(-100%); - } -} - -/* Adicionando a caixa de sombra sobre a miniatura do vídeo */ -.video-overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.3); - border-radius: 12px; - transition: opacity 0.3s ease; - opacity: 0; -} - -.video-thumbnail-container:hover .video-overlay { - opacity: 1; -} - -/* Estilos para o botão de favoritar */ -.favorite-button { - position: absolute; - top: 8px; - right: 8px; - background: transparent; - border: none; - color: #ffcc00; - font-size: 24px; - cursor: pointer; - z-index: 1; - transition: transform 0.2s ease; -} - -.favorite-button:hover { - transform: scale(1.2); -} - -.favorite-button:focus { - outline: none; -} - -/* Estilo para o ícone da estrela */ -.star-icon { - position: absolute; - top: -5px; - /* Posição ajustada para mais em cima */ - right: 2px; - /* Posição ajustada para o canto direito */ - font-size: 32px; - /* Tamanho da estrela */ - color: #000; - /* Cor preta inicialmente */ - z-index: 2; - transition: color 0.3s ease, transform 0.3s ease; - /* Transições suaves para cor e escala */ -} - -/* Estilo da estrela ao passar o mouse */ -.star-icon:hover { - color: #fefb00; - /* Cor amarela ao passar o mouse */ - transform: scale(1.1); - /* Leve aumento de tamanho */ +.save-icon[title]:hover::after { + content: attr(title); + position: absolute; + top: -1px; + /* Posiciona acima do ícone */ + left: 50%; + transform: translateX(-20%); + background-color: rgba(0, 0, 0, 0.7); + color: white; + padding: 5px 10px; + border-radius: 12px; + font-size: 12px; + white-space: nowrap; + opacity: 1; + transition: opacity 0.2s ease; } \ No newline at end of file diff --git a/src/app/pages/video/video.component.html b/src/app/pages/video/video.component.html index 89ee3dd4..46fa33cd 100755 --- a/src/app/pages/video/video.component.html +++ b/src/app/pages/video/video.component.html @@ -1,27 +1,32 @@ -
-
-
- Programação indisponível no momento -
- -
- -
-
-
- {{ video.title }} -
-
-
{{ video.title }}
-
- -
★
-
-
-
+
+
+
+ Programação indisponível no momento +
+ +
+ +
+
+
+ {{ video.title }} +
+
+
{{ video.title }}
+
+ +
+ favoritar vídeo +
+
+ salvar vídeo +
+
+
+
\ No newline at end of file From ef9fe74763b1f68d59c1f815616347d694aaaa5c Mon Sep 17 00:00:00 2001 From: Luizaxx Date: Sat, 7 Dec 2024 10:29:12 -0300 Subject: [PATCH 05/14] =?UTF-8?q?=20feat:=20melhoria=20de=20icones=20e=20f?= =?UTF-8?q?omata=C3=A7ao=20de=20titulo=20do=20video?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/pages/video/video.component.css | 441 +++++++++++++---------- src/app/pages/video/video.component.html | 62 ++-- 2 files changed, 277 insertions(+), 226 deletions(-) diff --git a/src/app/pages/video/video.component.css b/src/app/pages/video/video.component.css index c935004e..ea760676 100755 --- a/src/app/pages/video/video.component.css +++ b/src/app/pages/video/video.component.css @@ -1,196 +1,247 @@ -.center { - margin: 0 auto; -} - -.video-thumbnail-container { - position: relative; - width: 100%; - height: 100%; - display: block; - overflow: hidden; - border-radius: 12px; - border: 2px solid rgba(0, 0, 0, 0.1); -} - -.video-thumbnail { - position: relative; - transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease; - display: block; - width: 140px; - height: 105px; - border-radius: 10px; -} - -.video-thumbnail-container:hover .video-thumbnail { - transform: scale(1.05); - box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); - filter: brightness(0.7); -} - -.video-description-box { - position: absolute; - bottom: -30px; - left: 0; - width: 100%; - background: rgba(0, 0, 0, 0.8); - color: #fff; - font-size: 12px; - padding: 8px; - opacity: 0; - transition: opacity 0.2s ease, bottom 0.2s ease; - text-align: center; - box-sizing: border-box; - border-top-left-radius: 12px; - border-top-right-radius: 12px; - overflow: hidden; -} - -.video-thumbnail-container:hover .video-description-box { - bottom: 0; - opacity: 1; -} - -.description-text { - margin: 0; - padding: 0; - display: inline-block; - white-space: nowrap; - opacity: 0; - transition: opacity 0.2s ease; - animation: scroll-text 8s linear infinite; - animation-play-state: paused; -} - -.video-thumbnail-container:hover .description-text { - opacity: 1; - animation-play-state: running; -} - -@keyframes scroll-text { - 0% { - transform: translateX(100%); - } - - 100% { - transform: translateX(-100%); - } -} - -/* Adicionando a caixa de sombra sobre a miniatura do vídeo */ -.video-overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.3); - border-radius: 12px; - transition: opacity 0.3s ease; - opacity: 0; -} - -.video-thumbnail-container:hover .video-overlay { - opacity: 1; -} - -/* Estilos para o botão de favoritar */ -.favorite-button { - position: absolute; - top: 8px; - right: 8px; - background: transparent; - border: none; - color: #ffcc00; - font-size: 24px; - cursor: pointer; - z-index: 1; - transition: transform 0.2s ease; -} - -.favorite-button:hover { - transform: scale(1.2); -} - -.favorite-button:focus { - outline: none; -} - -/* Estilo para o ícone da estrela */ -.star-icon { - position: absolute; - top: -5px; - left: 115px; - width: 24px; - height: 52px; - z-index: 2; - transition: transform 0.3s ease, filter 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; - cursor: pointer; -} - -/* Estilos para o tooltip da estrela */ -.star-icon[title]:hover::after { - content: attr(title); - position: absolute; - top: -1px; - /* Posiciona acima do ícone */ - left: 10%; - transform: translateX(-60%); - background-color: rgba(0, 0, 0, 0.7); - color: white; - padding: 4px 8px; - border-radius: 12px; - font-size: 12px; - white-space: nowrap; - opacity: 1; - transition: opacity 0.2s ease; -} -.star-icon img { - width: 100%; - height: 100%; - object-fit: contain; - filter: brightness(1.2) invert(0) sepia(100%) saturate(500%) hue-rotate(50deg); - opacity: 0.7; /* 50% de transparência */ -} -.star-icon:hover img { - transform: scale(1.1); - filter: brightness(0) invert(1)sepia(100%) saturate(500%) hue-rotate(160deg); /* Ajuste para cor amarela */ -} -/* Estilo para o ícone de salvar */ -.save-icon { - position: absolute; - top: -5px; - left: 2px; - width: 24px; - height: 58px; - z-index: 2; - transition: transform 0.3s ease, filter 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; - cursor: pointer; -} - -.save-icon img { - width: 100%; - height: 100%; - object-fit: contain; - filter: brightness(1.2) invert(0) sepia(100%) saturate(500%) hue-rotate(50deg); - opacity: 0.7; /* 50% de transparência */ -} -.save-icon:hover img { - transform: scale(1.1); - filter: brightness(0) invert(1)sepia(100%) saturate(500%) hue-rotate(160deg); /* Ajuste para cor amarela */ -} -.save-icon[title]:hover::after { - content: attr(title); - position: absolute; - top: -1px; - /* Posiciona acima do ícone */ - left: 50%; - transform: translateX(-20%); - background-color: rgba(0, 0, 0, 0.7); - color: white; - padding: 5px 10px; - border-radius: 12px; - font-size: 12px; - white-space: nowrap; - opacity: 1; - transition: opacity 0.2s ease; +.center { + margin: 0 auto; +} + +.video-thumbnail-container { + position: relative; + width: 100%; + height: 100%; + display: block; + overflow: visible; /* Alterado de hidden para visible para permitir que os tooltips apareçam */ + border-radius: 12px; + border: 2px solid rgba(0, 0, 0, 0.1); +} + +.video-thumbnail { + position: relative; + transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease; + display: block; + width: 140px; + height: 105px; + border-radius: 10px; +} + +.video-thumbnail-container:hover .video-thumbnail { + transform: scale(1.05); + box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); + filter: brightness(0.7); +} + +.video-description-box { + position: absolute; + bottom: 0px; /* Posição da caixa de texto */ + left: 5px; /* Move a caixa de texto para a esquerda */ + width: auto; + max-width: 70%; /* Limita o tamanho da caixa */ + background: rgba(0, 0, 0, 0.822); + color: #fff; + font-size: 11px; + padding: 3px 10px; + line-height: 1.2; /* Ajuste a altura da linha */ + opacity: 0; + transition: opacity 0.2s ease, bottom 0.2s ease; + text-align: left; + box-sizing: border-box; + border-radius: 12px; + overflow: hidden; +} + +.video-thumbnail-container:hover .video-description-box { + opacity: 1.7; + bottom: 5px; /* Ajuste da posição para cima */ +} + +.description-text { + margin: 0; + padding: 0; + display: inline-block; + white-space: nowrap; + opacity: 0; + transition: opacity 0.2s ease; + animation: scroll-text 8s linear infinite; + animation-play-state: paused; +} + +.video-thumbnail-container:hover .description-text { + opacity: 1; + animation-play-state: running; +} + +@keyframes scroll-text { + 0% { + transform: translateX(100%); + } + + 100% { + transform: translateX(-100%); + } +} + +/* Adicionando a caixa de sombra sobre a miniatura do vídeo */ +.video-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.3); + border-radius: 12px; + transition: opacity 0.3s ease; + opacity: 0; +} + +.video-thumbnail-container:hover .video-overlay { + opacity: 1; +} + +/* Estilos para o botão de favoritar */ +.favorite-button { + position: absolute; + top: 8px; + right: 8px; + background: transparent; + border: none; + color: #ffcc00; + font-size: 24px; + cursor: pointer; + z-index: 1; + transition: transform 0.2s ease; +} + +.favorite-button:hover { + transform: scale(1.2); +} + +.favorite-button:focus { + outline: none; +} + +/* Estilo para o ícone da estrela */ +.star-icon { + position: absolute; + top: -5px; + left: 115px; + width: 24px; + height: 52px; + z-index: 2; + transition: transform 0.3s ease, filter 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; + cursor: pointer; + opacity: 0; /* Inicialmente invisível */ + transition: opacity 0.3s ease; +} + +/* Estilos para o tooltip da estrela */ +.save-icon[title]:hover::after { + content: attr(title); + position: absolute; + top: 4px; /* Ajuste para a parte superior do ícone */ + left: 50%; + transform: translateX(-50%); /* Centraliza horizontalmente */ + background-color: rgba(0, 0, 0, 0.863); /* Cor de fundo */ + color: #ffffff; /* Cor do texto */ + padding: 2px 9px; /* Aumentando o padding */ + border-radius: 8px; /* Bordas levemente arredondadas */ + font-size: 12px; /* Tamanho maior da fonte */ + white-space: nowrap; + opacity: 0; + transition: opacity 0.3s ease, transform 0.3s ease; /* Transição suave */ + transform: translateX(-50%) translateY(-10px); /* Levantamento do tooltip */ +} + +/* Animação de visibilidade e movimento */ +.save-icon[title]:hover::after { + opacity: 1; + transform: translateX(-50%) translateY(-30px); /* Movimentação vertical */ +} + +/* Criando a ponta do triângulo do tooltip */ +.save-icon[title]:hover::before { + content: ''; + position: absolute; + bottom: 54px; /* Coloca o triângulo abaixo */ + left: 50%; + transform: translateX(-50%); + border-left: 8px solid transparent; /* Lado esquerdo transparente */ + border-right: 8px solid transparent; /* Lado direito transparente */ + border-top: 8px solid rgba(0, 0, 0, 0.863); /* Cor do triângulo */ +} + +.star-icon img { + width: 100%; + height: 100%; + object-fit: contain; + filter: brightness(0) invert(1); +} + +.star-icon:hover img { + transform: scale(1.1); + filter: brightness(0) invert(1); +} + +/* Estilos para o ícone de salvar */ +.save-icon { + position: absolute; + top: -5px; + left: 2px; + width: 24px; + height: 58px; + z-index: 2; + transition: transform 0.3s ease, filter 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; + cursor: pointer; + opacity: 0; /* Inicialmente invisível */ + transition: opacity 0.3s ease; +} + +.save-icon img { + width: 100%; + height: 100%; + object-fit: contain; + filter: brightness(0) invert(1); +} + +.save-icon:hover img { + transform: scale(1.1); + filter: brightness(0) invert(1); +} + +/* Estilos para o tooltip de salvar */ +.star-icon[title]:hover::after { + content: attr(title); + position: absolute; + top: 4px; /* Ajuste para a parte superior do ícone */ + left: 50%; + transform: translateX(-50%); /* Centraliza horizontalmente */ + background-color: rgba(0, 0, 0, 0.863); /* Cor de fundo mais escura */ + color: #ffffff; /* Texto amarelo */ + padding: 2px 9px; /* Mais espaço dentro do tooltip */ + border-radius: 8px; /* Bordas levemente arredondadas */ + font-size: 12px; /* Tamanho de fonte maior */ + white-space: nowrap; + opacity: 0; + transition: opacity 0.3s ease, transform 0.3s ease; /* Suaviza a animação */ + transform: translateX(-50%) translateY(-10px); /* Levanta o tooltip */ +} + +/* Animação de visibilidade e movimento */ +.star-icon[title]:hover::after { + opacity: 1; + transform: translateX(-50%) translateY(-30px); /* Movimentação vertical */ +} + +/* Criando a ponta do triângulo do tooltip */ +.star-icon[title]:hover::before { + content: ''; + position: absolute; + bottom: 48px; /* Coloca o triângulo abaixo */ + left: 50%; + transform: translateX(-50%); + border-left: 8px solid transparent; /* Cria o lado esquerdo do triângulo */ + border-right: 8px solid transparent; /* Cria o lado direito do triângulo */ + border-top: 8px solid rgba(0, 0, 0, 0.863); /* Cor do triângulo */ +} + +/* Mostrar os ícones de estrela e salvar quando o mouse passar por cima da miniatura */ +.video-thumbnail-container:hover .star-icon, +.video-thumbnail-container:hover .save-icon { + opacity: 1; } \ No newline at end of file diff --git a/src/app/pages/video/video.component.html b/src/app/pages/video/video.component.html index 46fa33cd..0de305f9 100755 --- a/src/app/pages/video/video.component.html +++ b/src/app/pages/video/video.component.html @@ -1,32 +1,32 @@ -
-
-
- Programação indisponível no momento -
- -
- -
-
-
- {{ video.title }} -
-
-
{{ video.title }}
-
- -
- favoritar vídeo -
-
- salvar vídeo -
-
-
-
+
+
+
+ Programação indisponível no momento +
+ +
+ +
+
+
+ {{ video.title }} +
+
+
{{ video.title }}
+
+ +
+ favoritar vídeo +
+
+ salvar vídeo +
+
+
+
\ No newline at end of file From a68454cb6dbd22cc6cdb5b73be822be3fa3b1dfb Mon Sep 17 00:00:00 2001 From: JJOAOMARCOSS Date: Sat, 7 Dec 2024 22:38:20 -0300 Subject: [PATCH 06/14] feat: Adicionando a funcionalidade de favoritar na previa do video --- src/app/pages/video/video.component.css | 39 ++++++++ src/app/pages/video/video.component.html | 14 ++- src/app/pages/video/video.component.ts | 112 ++++++++++++++++++++++- src/shared/model/video.model.ts | 4 +- 4 files changed, 163 insertions(+), 6 deletions(-) diff --git a/src/app/pages/video/video.component.css b/src/app/pages/video/video.component.css index ea760676..19d2fa8c 100755 --- a/src/app/pages/video/video.component.css +++ b/src/app/pages/video/video.component.css @@ -244,4 +244,43 @@ .video-thumbnail-container:hover .star-icon, .video-thumbnail-container:hover .save-icon { opacity: 1; +} + +.favorite-button.favorited img { + filter: brightness(1.5); + /* Aumenta o brilho quando favoritado */ +} + +.favorite-button { + position: absolute; + top: 8px; + right: 8px; + background: transparent; + border: none; + color: #ffcc00; + font-size: 24px; + width: 30px; + /* Defina uma largura fixa */ + height: 30px; + /* Defina uma altura fixa */ + cursor: pointer; + z-index: 1; + transition: transform 0.2s ease; +} + +.icons-container { + position: absolute; + top: 8px; + left: 8px; + display: flex; + gap: 10px; + /* Espaçamento entre os ícones */ + z-index: 2; +} + +.star-icon, +.save-icon { + display: flex; + align-items: center; + justify-content: center; } \ No newline at end of file diff --git a/src/app/pages/video/video.component.html b/src/app/pages/video/video.component.html index 0de305f9..04fac08a 100755 --- a/src/app/pages/video/video.component.html +++ b/src/app/pages/video/video.component.html @@ -19,14 +19,20 @@
{{ video.title }}
+
- favoritar vídeo +
+
salvar vídeo -
+
- - \ No newline at end of file + \ No newline at end of file diff --git a/src/app/pages/video/video.component.ts b/src/app/pages/video/video.component.ts index d7ba5837..4f2da364 100755 --- a/src/app/pages/video/video.component.ts +++ b/src/app/pages/video/video.component.ts @@ -2,19 +2,46 @@ import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { VideoService } from '../../services/video.service'; import { IVideo } from 'src/shared/model/video.model'; +import { AlertService } from 'src/app/services/alert.service'; +import { AuthService } from 'src/app/services/auth.service'; +import { UserService } from 'src/app/services/user.service'; +import jwt_decode from 'jwt-decode'; @Component({ selector: 'app-video', templateUrl: './video.component.html', styleUrls: ['./video.component.css'], }) + export class VideoComponent implements OnInit { unbTvVideos: IVideo[] = []; + isFavorite = true; + idVideo!: number; + userId: string = ''; + user: any; + favoriteMessage: string | null = null; // Armazena a mensagem + eduplayVideoUrl = "https://eduplay.rnp.br/portal/video/embed/"; - constructor(private videoService: VideoService, private router: Router) {} + constructor( + private videoService: VideoService, + private router: Router, + private alertService: AlertService, + private authService: AuthService, + private userService: UserService + ) {} ngOnInit(): void { this.getVideos(); + const iframe = document.getElementById('embeddedVideo') as HTMLIFrameElement; + if (this.authService.isAuthenticated()) { + this.setUserIdFromToken(localStorage.getItem('token') as string); + this.getUserDetails(); + } + // Carrega o vídeo específico e ajusta o iframe + this.findVideoById(); + if (iframe && this.idVideo) { + iframe.src = `${this.eduplayVideoUrl}${this.idVideo}`; + } } getVideos(): void { @@ -28,7 +55,90 @@ export class VideoComponent implements OnInit { }); } + setUserIdFromToken(token: string): void { + const decodedToken: any = jwt_decode(token); + this.userId = decodedToken.id; + } + + getUserDetails(): void { + this.userService.getUser(this.userId).subscribe({ + next: (user) => { + this.user = user; + this.checkFavoriteStatus(); // Checa o status de favoritos + }, + error: (err) => { + console.error('Error fetching user details', err); + }, + }); + } + + findVideoById(): void { + // Aqui você deve definir como pegar o idVideo, talvez com route ou outro método + // Como você já tem o idVideo, só faz a requisição + this.videoService.findVideoById(this.idVideo).subscribe({ + next: (data) => { + // Aqui você pode armazenar o vídeo retornado, como já está no código original + }, + error: (err) => { + console.error('Error fetching video details', err); + }, + }); + } + + // Favoritar + toggleFavorite(video: IVideo): void { + const videoId = video.id ?? 0; // Se video.id for undefined, usa 0 como valor + + // Altera o estado do vídeo + video.isFavorited = !video.isFavorited; + + if (video.isFavorited) { + this.videoService.addToFavorite(videoId.toString(), this.userId.toString()).subscribe({ + next: () => { + this.alertService.showMessage("success", "Sucesso", "Vídeo adicionado à lista de Favoritos"); + }, + error: (err) => { + console.error('Error adding to favorite', err); + this.alertService.showMessage('error', 'Erro', 'Erro ao adicionar o vídeo para lista de favoritos'); + } + }); + } else { + this.videoService.removeFromFavorite(videoId.toString(), this.userId.toString()).subscribe({ + next: () => { + this.alertService.showMessage("success", "Sucesso", "Vídeo removido da lista de Favoritos"); + }, + error: (err) => { + console.error('Error removing from favorite', err); + this.alertService.showMessage('error', 'Erro', 'Erro ao remover o vídeo da lista de favoritos'); + } + }); + } +} + + + checkFavoriteStatus(): void { + this.videoService.checkFavorite(this.idVideo.toString(), this.userId.toString()).subscribe({ + next: (response) => { + this.isFavorite = response.statusfavorite; // Verifique se a resposta tem a estrutura correta + }, + error: (err) => { + console.error('Error checking favorite status', err); + } + }); + } + + showFavoriteMessage(isFavorite: boolean): void { + const message = isFavorite ? 'Vídeo favoritado!' : 'Vídeo desfavoritado!'; + this.favoriteMessage = message; // Armazena a mensagem na variável + alert(message); // Exemplo de alert, mas você pode customizar com mensagens na tela + } + returnToCatalog(): void { this.router.navigate(['/catalog']); } + + // Função que retorna a URL do vídeo + getVideoUrl(): string { + return `${this.eduplayVideoUrl}${this.idVideo}`; + } } diff --git a/src/shared/model/video.model.ts b/src/shared/model/video.model.ts index 14a8032d..7e87d60b 100755 --- a/src/shared/model/video.model.ts +++ b/src/shared/model/video.model.ts @@ -16,6 +16,7 @@ export interface IVideo { embed?: string; channels?: IChannel[]; catalog?: any; + isFavorited?: boolean; // Adiciona a propriedade isFavorited } export class Video implements IVideo { @@ -33,6 +34,7 @@ export class Video implements IVideo { public images?: IImage[], public embed?: string, public channels?: IChannel[], - public catalog?: any + public catalog?: any, + public isFavorited?: boolean ) {} } From fae8fc05a1bfd3d10607dda71ab7c82e633146d9 Mon Sep 17 00:00:00 2001 From: Christopher Date: Sat, 7 Dec 2024 23:56:53 -0300 Subject: [PATCH 07/14] feat: Adicionando funcao de salvar video para assistir mais tarde na previa --- src/app/pages/video/video.component.html | 8 +++- src/app/pages/video/video.component.ts | 49 +++++++++++++++++++++++- src/shared/model/video.model.ts | 4 +- 3 files changed, 56 insertions(+), 5 deletions(-) diff --git a/src/app/pages/video/video.component.html b/src/app/pages/video/video.component.html index 04fac08a..d127ed91 100755 --- a/src/app/pages/video/video.component.html +++ b/src/app/pages/video/video.component.html @@ -21,6 +21,7 @@
{{ video.title }}
+
- +
- salvar vídeo +
diff --git a/src/app/pages/video/video.component.ts b/src/app/pages/video/video.component.ts index 4f2da364..c6bf9246 100755 --- a/src/app/pages/video/video.component.ts +++ b/src/app/pages/video/video.component.ts @@ -21,6 +21,7 @@ export class VideoComponent implements OnInit { user: any; favoriteMessage: string | null = null; // Armazena a mensagem eduplayVideoUrl = "https://eduplay.rnp.br/portal/video/embed/"; + isWatchLater = true; constructor( private videoService: VideoService, @@ -115,7 +116,6 @@ export class VideoComponent implements OnInit { } } - checkFavoriteStatus(): void { this.videoService.checkFavorite(this.idVideo.toString(), this.userId.toString()).subscribe({ next: (response) => { @@ -133,10 +133,55 @@ export class VideoComponent implements OnInit { alert(message); // Exemplo de alert, mas você pode customizar com mensagens na tela } + // Assistir mais tarde + toggleWatchLater(video: IVideo): void { + const videoId = video.id ?? 0; + + video.isWatchLater = !video.isWatchLater; + + if (video.isWatchLater) { + this.videoService.addToWatchLater(videoId.toString(), this.userId.toString()).subscribe({ + next: () => { + this.alertService.showMessage("success", "Sucesso", "Vídeo adicionado à lista de Assistir Mais tarde"); + }, + error: (err) => { + console.error('Error adding to watch later', err); + this.alertService.showMessage('error', 'Erro', 'Erro ao adicionar o vídeo para assistir mais tarde') + } + }); + } else { + this.videoService.removeFromWatchLater(videoId.toString(), this.userId.toString()).subscribe({ + next: () => { + this.alertService.showMessage("success", "Sucesso", "Vídeo removido da lista de Assistir mais tarde."); + }, + error: (err) => { + console.error('Error removing from watch later', err); + this.alertService.showMessage('error', 'Erro', 'Erro ao remover o vídeo da lista de assistir mais tarde') + } + }); + } + } + + checkWatchLaterStatus(): void { + this.videoService.checkWatchLater(this.idVideo.toString(), this.userId.toString()).subscribe({ + next: (response) => { + this.isWatchLater = response.status; // Acessa a propriedade status do objeto response + }, + error: (err) => { + console.error('Error checking watch later status', err); + } + }); + } + + showWatchLaterMessage(isWatchLater: boolean): void { + const message = isWatchLater ? 'Vídeo salvo a lista!' : 'Vídeo removido da lista!'; + this.favoriteMessage = message; // Armazena a mensagem na variável + alert(message); // Exemplo de alert, mas você pode customizar com mensagens na tela + } + returnToCatalog(): void { this.router.navigate(['/catalog']); } - // Função que retorna a URL do vídeo getVideoUrl(): string { return `${this.eduplayVideoUrl}${this.idVideo}`; diff --git a/src/shared/model/video.model.ts b/src/shared/model/video.model.ts index 7e87d60b..5d59d93e 100755 --- a/src/shared/model/video.model.ts +++ b/src/shared/model/video.model.ts @@ -17,6 +17,7 @@ export interface IVideo { channels?: IChannel[]; catalog?: any; isFavorited?: boolean; // Adiciona a propriedade isFavorited + isWatchLater?: boolean; } export class Video implements IVideo { @@ -35,6 +36,7 @@ export class Video implements IVideo { public embed?: string, public channels?: IChannel[], public catalog?: any, - public isFavorited?: boolean + public isFavorited?: boolean, + public isWatchLater?: boolean ) {} } From f5701a4e6e01104b15f8aeb84f557679a3157ea3 Mon Sep 17 00:00:00 2001 From: navicg Date: Sun, 8 Dec 2024 09:39:51 -0300 Subject: [PATCH 08/14] =?UTF-8?q?feat:=20ajustando=20as=20cores=20e=20os?= =?UTF-8?q?=20formatos=20=20dos=20=C3=ADcones=20e=20modificando=20as=20cai?= =?UTF-8?q?xas=20de=20texto?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/pages/video/video.component.css | 23 +++++++++++++++-------- src/app/pages/video/video.component.html | 4 ++-- 2 files changed, 17 insertions(+), 10 deletions(-) diff --git a/src/app/pages/video/video.component.css b/src/app/pages/video/video.component.css index 19d2fa8c..6c2622ad 100755 --- a/src/app/pages/video/video.component.css +++ b/src/app/pages/video/video.component.css @@ -158,7 +158,7 @@ .save-icon[title]:hover::before { content: ''; position: absolute; - bottom: 54px; /* Coloca o triângulo abaixo */ + bottom: 55px; /* Coloca o triângulo abaixo */ left: 50%; transform: translateX(-50%); border-left: 8px solid transparent; /* Lado esquerdo transparente */ @@ -167,14 +167,16 @@ } .star-icon img { - width: 100%; + width: 90%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); + margin-left: 9px; /* Move para a direita */ + margin-top: 4px; /* Ajuste o valor conforme necessário */ } .star-icon:hover img { - transform: scale(1.1); + transform: scale(1.0); filter: brightness(0) invert(1); } @@ -200,7 +202,7 @@ } .save-icon:hover img { - transform: scale(1.1); + transform: scale(1.2); filter: brightness(0) invert(1); } @@ -232,7 +234,7 @@ .star-icon[title]:hover::before { content: ''; position: absolute; - bottom: 48px; /* Coloca o triângulo abaixo */ + bottom: 49px; /* Coloca o triângulo abaixo */ left: 50%; transform: translateX(-50%); border-left: 8px solid transparent; /* Cria o lado esquerdo do triângulo */ @@ -247,10 +249,16 @@ } .favorite-button.favorited img { - filter: brightness(1.5); - /* Aumenta o brilho quando favoritado */ + filter: brightness(1.5) invert(1) sepia(1) hue-rotate(10deg) saturate(15) contrast(1.2); + /* Ajusta pra amarelo quando favoritado */ } +.save-button.saved img { + filter: brightness(1.5) invert(1) sepia(1) hue-rotate(10deg) saturate(15) contrast(1.2); + /* Ajusta pra amarelo quando favoritado */ +} + + .favorite-button { position: absolute; top: 8px; @@ -274,7 +282,6 @@ left: 8px; display: flex; gap: 10px; - /* Espaçamento entre os ícones */ z-index: 2; } diff --git a/src/app/pages/video/video.component.html b/src/app/pages/video/video.component.html index d127ed91..88d43cac 100755 --- a/src/app/pages/video/video.component.html +++ b/src/app/pages/video/video.component.html @@ -26,7 +26,7 @@
{{ video.title }}
@@ -34,7 +34,7 @@
{{ video.title }}
From 469d9649ffcbf2a0381e62312098854a01226ba3 Mon Sep 17 00:00:00 2001 From: KarolineLuz Date: Sun, 8 Dec 2024 15:43:55 -0300 Subject: [PATCH 09/14] =?UTF-8?q?feat:=20Adicionando=20menu=20drop=20down?= =?UTF-8?q?=20para=20dispositivos=20m=C3=B3veis=20com=20os=20prot=C3=B3tip?= =?UTF-8?q?os=20de=20favoritar=20e=20salvar=20v=C3=ADdeo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/pages/video/video.component.css | 161 +++++++++++++++++------ src/app/pages/video/video.component.html | 58 +++++--- src/app/pages/video/video.component.ts | 69 ++++++---- src/shared/model/video.model.ts | 10 +- 4 files changed, 213 insertions(+), 85 deletions(-) diff --git a/src/app/pages/video/video.component.css b/src/app/pages/video/video.component.css index 6c2622ad..7d06196e 100755 --- a/src/app/pages/video/video.component.css +++ b/src/app/pages/video/video.component.css @@ -7,7 +7,8 @@ width: 100%; height: 100%; display: block; - overflow: visible; /* Alterado de hidden para visible para permitir que os tooltips apareçam */ + overflow: visible; + /* Alterado de hidden para visible para permitir que os tooltips apareçam */ border-radius: 12px; border: 2px solid rgba(0, 0, 0, 0.1); } @@ -29,15 +30,19 @@ .video-description-box { position: absolute; - bottom: 0px; /* Posição da caixa de texto */ - left: 5px; /* Move a caixa de texto para a esquerda */ + bottom: 0px; + /* Posição da caixa de texto */ + left: 5px; + /* Move a caixa de texto para a esquerda */ width: auto; - max-width: 70%; /* Limita o tamanho da caixa */ + max-width: 70%; + /* Limita o tamanho da caixa */ background: rgba(0, 0, 0, 0.822); color: #fff; font-size: 11px; padding: 3px 10px; - line-height: 1.2; /* Ajuste a altura da linha */ + line-height: 1.2; + /* Ajuste a altura da linha */ opacity: 0; transition: opacity 0.2s ease, bottom 0.2s ease; text-align: left; @@ -48,7 +53,8 @@ .video-thumbnail-container:hover .video-description-box { opacity: 1.7; - bottom: 5px; /* Ajuste da posição para cima */ + bottom: 5px; + /* Ajuste da posição para cima */ } .description-text { @@ -126,7 +132,8 @@ z-index: 2; transition: transform 0.3s ease, filter 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; cursor: pointer; - opacity: 0; /* Inicialmente invisível */ + opacity: 0; + /* Inicialmente invisível */ transition: opacity 0.3s ease; } @@ -134,36 +141,50 @@ .save-icon[title]:hover::after { content: attr(title); position: absolute; - top: 4px; /* Ajuste para a parte superior do ícone */ + top: 4px; + /* Ajuste para a parte superior do ícone */ left: 50%; - transform: translateX(-50%); /* Centraliza horizontalmente */ - background-color: rgba(0, 0, 0, 0.863); /* Cor de fundo */ - color: #ffffff; /* Cor do texto */ - padding: 2px 9px; /* Aumentando o padding */ - border-radius: 8px; /* Bordas levemente arredondadas */ - font-size: 12px; /* Tamanho maior da fonte */ + transform: translateX(-50%); + /* Centraliza horizontalmente */ + background-color: rgba(0, 0, 0, 0.863); + /* Cor de fundo */ + color: #ffffff; + /* Cor do texto */ + padding: 2px 9px; + /* Aumentando o padding */ + border-radius: 8px; + /* Bordas levemente arredondadas */ + font-size: 12px; + /* Tamanho maior da fonte */ white-space: nowrap; opacity: 0; - transition: opacity 0.3s ease, transform 0.3s ease; /* Transição suave */ - transform: translateX(-50%) translateY(-10px); /* Levantamento do tooltip */ + transition: opacity 0.3s ease, transform 0.3s ease; + /* Transição suave */ + transform: translateX(-50%) translateY(-10px); + /* Levantamento do tooltip */ } /* Animação de visibilidade e movimento */ .save-icon[title]:hover::after { opacity: 1; - transform: translateX(-50%) translateY(-30px); /* Movimentação vertical */ + transform: translateX(-50%) translateY(-30px); + /* Movimentação vertical */ } /* Criando a ponta do triângulo do tooltip */ .save-icon[title]:hover::before { content: ''; position: absolute; - bottom: 55px; /* Coloca o triângulo abaixo */ + bottom: 55px; + /* Coloca o triângulo abaixo */ left: 50%; transform: translateX(-50%); - border-left: 8px solid transparent; /* Lado esquerdo transparente */ - border-right: 8px solid transparent; /* Lado direito transparente */ - border-top: 8px solid rgba(0, 0, 0, 0.863); /* Cor do triângulo */ + border-left: 8px solid transparent; + /* Lado esquerdo transparente */ + border-right: 8px solid transparent; + /* Lado direito transparente */ + border-top: 8px solid rgba(0, 0, 0, 0.863); + /* Cor do triângulo */ } .star-icon img { @@ -171,8 +192,10 @@ height: 100%; object-fit: contain; filter: brightness(0) invert(1); - margin-left: 9px; /* Move para a direita */ - margin-top: 4px; /* Ajuste o valor conforme necessário */ + margin-left: 9px; + /* Move para a direita */ + margin-top: 4px; + /* Ajuste o valor conforme necessário */ } .star-icon:hover img { @@ -190,7 +213,8 @@ z-index: 2; transition: transform 0.3s ease, filter 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; cursor: pointer; - opacity: 0; /* Inicialmente invisível */ + opacity: 0; + /* Inicialmente invisível */ transition: opacity 0.3s ease; } @@ -210,36 +234,50 @@ .star-icon[title]:hover::after { content: attr(title); position: absolute; - top: 4px; /* Ajuste para a parte superior do ícone */ + top: 4px; + /* Ajuste para a parte superior do ícone */ left: 50%; - transform: translateX(-50%); /* Centraliza horizontalmente */ - background-color: rgba(0, 0, 0, 0.863); /* Cor de fundo mais escura */ - color: #ffffff; /* Texto amarelo */ - padding: 2px 9px; /* Mais espaço dentro do tooltip */ - border-radius: 8px; /* Bordas levemente arredondadas */ - font-size: 12px; /* Tamanho de fonte maior */ + transform: translateX(-50%); + /* Centraliza horizontalmente */ + background-color: rgba(0, 0, 0, 0.863); + /* Cor de fundo mais escura */ + color: #ffffff; + /* Texto amarelo */ + padding: 2px 9px; + /* Mais espaço dentro do tooltip */ + border-radius: 8px; + /* Bordas levemente arredondadas */ + font-size: 12px; + /* Tamanho de fonte maior */ white-space: nowrap; opacity: 0; - transition: opacity 0.3s ease, transform 0.3s ease; /* Suaviza a animação */ - transform: translateX(-50%) translateY(-10px); /* Levanta o tooltip */ + transition: opacity 0.3s ease, transform 0.3s ease; + /* Suaviza a animação */ + transform: translateX(-50%) translateY(-10px); + /* Levanta o tooltip */ } /* Animação de visibilidade e movimento */ .star-icon[title]:hover::after { opacity: 1; - transform: translateX(-50%) translateY(-30px); /* Movimentação vertical */ + transform: translateX(-50%) translateY(-30px); + /* Movimentação vertical */ } /* Criando a ponta do triângulo do tooltip */ .star-icon[title]:hover::before { content: ''; position: absolute; - bottom: 49px; /* Coloca o triângulo abaixo */ + bottom: 49px; + /* Coloca o triângulo abaixo */ left: 50%; transform: translateX(-50%); - border-left: 8px solid transparent; /* Cria o lado esquerdo do triângulo */ - border-right: 8px solid transparent; /* Cria o lado direito do triângulo */ - border-top: 8px solid rgba(0, 0, 0, 0.863); /* Cor do triângulo */ + border-left: 8px solid transparent; + /* Cria o lado esquerdo do triângulo */ + border-right: 8px solid transparent; + /* Cria o lado direito do triângulo */ + border-top: 8px solid rgba(0, 0, 0, 0.863); + /* Cor do triângulo */ } /* Mostrar os ícones de estrela e salvar quando o mouse passar por cima da miniatura */ @@ -290,4 +328,51 @@ display: flex; align-items: center; justify-content: center; +} + +.video-thumbnail-container { + position: relative; + /* Permite que elementos posicionados absolutamente sejam colocados dentro deste contêiner */ +} + +.menu-icon-container { + position: absolute; + /* Posiciona o menu de forma absoluta dentro do vídeo */ + top: 10px; + /* Ajuste para a distância do topo */ + right: 10px; + /* Ajuste para a distância da borda direita */ + z-index: 10; + /* Garante que o ícone do menu fique acima do conteúdo */ + display: none; + /* Esconde o ícone por padrão em dispositivos maiores */ +} + +/* Exibe o menu de 3 pontos apenas em dispositivos móveis */ +@media (max-width: 768px) { + .menu-icon-container { + display: block; + /* Exibe o menu de 3 pontos em dispositivos móveis */ + } + + /* Esconde os botões "favoritar" e "assistir mais tarde" em dispositivos móveis */ + .star-icon, + .save-icon { + display: none; + /* Esconde esses botões em dispositivos móveis */ + } +} + +/* Estilo para o botão do menu */ +.menu-button { + background: transparent; + border: none; + cursor: pointer; +} + +.menu-button img { + width: 20px; + /* Ajuste o tamanho da imagem do menu de 3 pontos */ + height: 20px; + /* Mantenha a altura proporcional */ } \ No newline at end of file diff --git a/src/app/pages/video/video.component.html b/src/app/pages/video/video.component.html index 88d43cac..96739088 100755 --- a/src/app/pages/video/video.component.html +++ b/src/app/pages/video/video.component.html @@ -19,24 +19,50 @@
{{ video.title }}
- - - -
- + + +
+ +
+ +
+ +
+ +
- -
- + +
- \ No newline at end of file + + \ No newline at end of file diff --git a/src/app/pages/video/video.component.ts b/src/app/pages/video/video.component.ts index c6bf9246..20e70326 100755 --- a/src/app/pages/video/video.component.ts +++ b/src/app/pages/video/video.component.ts @@ -15,13 +15,14 @@ import jwt_decode from 'jwt-decode'; export class VideoComponent implements OnInit { unbTvVideos: IVideo[] = []; - isFavorite = true; + isFavorite: boolean; idVideo!: number; userId: string = ''; user: any; favoriteMessage: string | null = null; // Armazena a mensagem eduplayVideoUrl = "https://eduplay.rnp.br/portal/video/embed/"; - isWatchLater = true; + isWatchLater: boolean; + isDesktop: boolean = false; constructor( private videoService: VideoService, @@ -29,10 +30,11 @@ export class VideoComponent implements OnInit { private alertService: AlertService, private authService: AuthService, private userService: UserService - ) {} + ) { } ngOnInit(): void { this.getVideos(); + this.isDesktop = window.innerWidth > 768; // Detecta se é desktop const iframe = document.getElementById('embeddedVideo') as HTMLIFrameElement; if (this.authService.isAuthenticated()) { this.setUserIdFromToken(localStorage.getItem('token') as string); @@ -88,33 +90,33 @@ export class VideoComponent implements OnInit { // Favoritar toggleFavorite(video: IVideo): void { - const videoId = video.id ?? 0; // Se video.id for undefined, usa 0 como valor + const videoId = video.id ?? 0; // Se video.id for undefined, usa 0 como valor - // Altera o estado do vídeo - video.isFavorited = !video.isFavorited; + // Altera o estado do vídeo + video.isFavorited = !video.isFavorited; - if (video.isFavorited) { - this.videoService.addToFavorite(videoId.toString(), this.userId.toString()).subscribe({ - next: () => { - this.alertService.showMessage("success", "Sucesso", "Vídeo adicionado à lista de Favoritos"); - }, - error: (err) => { - console.error('Error adding to favorite', err); - this.alertService.showMessage('error', 'Erro', 'Erro ao adicionar o vídeo para lista de favoritos'); - } - }); - } else { - this.videoService.removeFromFavorite(videoId.toString(), this.userId.toString()).subscribe({ - next: () => { - this.alertService.showMessage("success", "Sucesso", "Vídeo removido da lista de Favoritos"); - }, - error: (err) => { - console.error('Error removing from favorite', err); - this.alertService.showMessage('error', 'Erro', 'Erro ao remover o vídeo da lista de favoritos'); - } - }); + if (video.isFavorited) { + this.videoService.addToFavorite(videoId.toString(), this.userId.toString()).subscribe({ + next: () => { + this.alertService.showMessage("success", "Sucesso", "Vídeo adicionado à lista de Favoritos"); + }, + error: (err) => { + console.error('Error adding to favorite', err); + this.alertService.showMessage('error', 'Erro', 'Erro ao adicionar o vídeo para lista de favoritos'); + } + }); + } else { + this.videoService.removeFromFavorite(videoId.toString(), this.userId.toString()).subscribe({ + next: () => { + this.alertService.showMessage("success", "Sucesso", "Vídeo removido da lista de Favoritos"); + }, + error: (err) => { + console.error('Error removing from favorite', err); + this.alertService.showMessage('error', 'Erro', 'Erro ao remover o vídeo da lista de favoritos'); + } + }); + } } -} checkFavoriteStatus(): void { this.videoService.checkFavorite(this.idVideo.toString(), this.userId.toString()).subscribe({ @@ -179,6 +181,19 @@ export class VideoComponent implements OnInit { alert(message); // Exemplo de alert, mas você pode customizar com mensagens na tela } + + toggleMenu(video: IVideo, event: Event): void { + // Fecha outros menus ao abrir o atual + this.unbTvVideos.forEach(v => { + if (v !== video) { + v.showMenu = false; + } + }); + + // Alterna o estado do menu do vídeo atual + video.showMenu = !video.showMenu; + } + returnToCatalog(): void { this.router.navigate(['/catalog']); } diff --git a/src/shared/model/video.model.ts b/src/shared/model/video.model.ts index 5d59d93e..81607211 100755 --- a/src/shared/model/video.model.ts +++ b/src/shared/model/video.model.ts @@ -17,7 +17,8 @@ export interface IVideo { channels?: IChannel[]; catalog?: any; isFavorited?: boolean; // Adiciona a propriedade isFavorited - isWatchLater?: boolean; + isWatchLater?: boolean; + showMenu?: boolean; } export class Video implements IVideo { @@ -37,6 +38,7 @@ export class Video implements IVideo { public channels?: IChannel[], public catalog?: any, public isFavorited?: boolean, - public isWatchLater?: boolean - ) {} -} + public isWatchLater?: boolean, + public showMenu?: boolean, + ) { } +} \ No newline at end of file From ecc6a4b81927fb510e0a67064fc5e769b5ec1307 Mon Sep 17 00:00:00 2001 From: Luizaxx Date: Sun, 8 Dec 2024 15:55:09 -0300 Subject: [PATCH 10/14] feat: adcionando as funcoes favoritar e assistir mais tarde ao menu drop-down versao mobile --- src/app/pages/video/video.component.css | 148 ++++++++--------------- src/app/pages/video/video.component.html | 36 ++---- src/app/pages/video/video.component.ts | 65 +++++----- 3 files changed, 99 insertions(+), 150 deletions(-) diff --git a/src/app/pages/video/video.component.css b/src/app/pages/video/video.component.css index 7d06196e..dc5a78fd 100755 --- a/src/app/pages/video/video.component.css +++ b/src/app/pages/video/video.component.css @@ -7,8 +7,7 @@ width: 100%; height: 100%; display: block; - overflow: visible; - /* Alterado de hidden para visible para permitir que os tooltips apareçam */ + overflow: visible; /* Alterado de hidden para visible para permitir que os tooltips apareçam */ border-radius: 12px; border: 2px solid rgba(0, 0, 0, 0.1); } @@ -30,19 +29,15 @@ .video-description-box { position: absolute; - bottom: 0px; - /* Posição da caixa de texto */ - left: 5px; - /* Move a caixa de texto para a esquerda */ + bottom: 0px; /* Posição da caixa de texto */ + left: 5px; /* Move a caixa de texto para a esquerda */ width: auto; - max-width: 70%; - /* Limita o tamanho da caixa */ + max-width: 70%; /* Limita o tamanho da caixa */ background: rgba(0, 0, 0, 0.822); color: #fff; font-size: 11px; padding: 3px 10px; - line-height: 1.2; - /* Ajuste a altura da linha */ + line-height: 1.2; /* Ajuste a altura da linha */ opacity: 0; transition: opacity 0.2s ease, bottom 0.2s ease; text-align: left; @@ -53,8 +48,7 @@ .video-thumbnail-container:hover .video-description-box { opacity: 1.7; - bottom: 5px; - /* Ajuste da posição para cima */ + bottom: 5px; /* Ajuste da posição para cima */ } .description-text { @@ -132,8 +126,7 @@ z-index: 2; transition: transform 0.3s ease, filter 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; cursor: pointer; - opacity: 0; - /* Inicialmente invisível */ + opacity: 0; /* Inicialmente invisível */ transition: opacity 0.3s ease; } @@ -141,50 +134,36 @@ .save-icon[title]:hover::after { content: attr(title); position: absolute; - top: 4px; - /* Ajuste para a parte superior do ícone */ + top: 4px; /* Ajuste para a parte superior do ícone */ left: 50%; - transform: translateX(-50%); - /* Centraliza horizontalmente */ - background-color: rgba(0, 0, 0, 0.863); - /* Cor de fundo */ - color: #ffffff; - /* Cor do texto */ - padding: 2px 9px; - /* Aumentando o padding */ - border-radius: 8px; - /* Bordas levemente arredondadas */ - font-size: 12px; - /* Tamanho maior da fonte */ + transform: translateX(-50%); /* Centraliza horizontalmente */ + background-color: rgba(0, 0, 0, 0.863); /* Cor de fundo */ + color: #ffffff; /* Cor do texto */ + padding: 2px 9px; /* Aumentando o padding */ + border-radius: 8px; /* Bordas levemente arredondadas */ + font-size: 12px; /* Tamanho maior da fonte */ white-space: nowrap; opacity: 0; - transition: opacity 0.3s ease, transform 0.3s ease; - /* Transição suave */ - transform: translateX(-50%) translateY(-10px); - /* Levantamento do tooltip */ + transition: opacity 0.3s ease, transform 0.3s ease; /* Transição suave */ + transform: translateX(-50%) translateY(-10px); /* Levantamento do tooltip */ } /* Animação de visibilidade e movimento */ .save-icon[title]:hover::after { opacity: 1; - transform: translateX(-50%) translateY(-30px); - /* Movimentação vertical */ + transform: translateX(-50%) translateY(-30px); /* Movimentação vertical */ } /* Criando a ponta do triângulo do tooltip */ .save-icon[title]:hover::before { content: ''; position: absolute; - bottom: 55px; - /* Coloca o triângulo abaixo */ + bottom: 55px; /* Coloca o triângulo abaixo */ left: 50%; transform: translateX(-50%); - border-left: 8px solid transparent; - /* Lado esquerdo transparente */ - border-right: 8px solid transparent; - /* Lado direito transparente */ - border-top: 8px solid rgba(0, 0, 0, 0.863); - /* Cor do triângulo */ + border-left: 8px solid transparent; /* Lado esquerdo transparente */ + border-right: 8px solid transparent; /* Lado direito transparente */ + border-top: 8px solid rgba(0, 0, 0, 0.863); /* Cor do triângulo */ } .star-icon img { @@ -192,10 +171,8 @@ height: 100%; object-fit: contain; filter: brightness(0) invert(1); - margin-left: 9px; - /* Move para a direita */ - margin-top: 4px; - /* Ajuste o valor conforme necessário */ + margin-left: 9px; /* Move para a direita */ + margin-top: 4px; /* Ajuste o valor conforme necessário */ } .star-icon:hover img { @@ -213,8 +190,7 @@ z-index: 2; transition: transform 0.3s ease, filter 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; cursor: pointer; - opacity: 0; - /* Inicialmente invisível */ + opacity: 0; /* Inicialmente invisível */ transition: opacity 0.3s ease; } @@ -234,50 +210,36 @@ .star-icon[title]:hover::after { content: attr(title); position: absolute; - top: 4px; - /* Ajuste para a parte superior do ícone */ + top: 4px; /* Ajuste para a parte superior do ícone */ left: 50%; - transform: translateX(-50%); - /* Centraliza horizontalmente */ - background-color: rgba(0, 0, 0, 0.863); - /* Cor de fundo mais escura */ - color: #ffffff; - /* Texto amarelo */ - padding: 2px 9px; - /* Mais espaço dentro do tooltip */ - border-radius: 8px; - /* Bordas levemente arredondadas */ - font-size: 12px; - /* Tamanho de fonte maior */ + transform: translateX(-50%); /* Centraliza horizontalmente */ + background-color: rgba(0, 0, 0, 0.863); /* Cor de fundo mais escura */ + color: #ffffff; /* Texto amarelo */ + padding: 2px 9px; /* Mais espaço dentro do tooltip */ + border-radius: 8px; /* Bordas levemente arredondadas */ + font-size: 12px; /* Tamanho de fonte maior */ white-space: nowrap; opacity: 0; - transition: opacity 0.3s ease, transform 0.3s ease; - /* Suaviza a animação */ - transform: translateX(-50%) translateY(-10px); - /* Levanta o tooltip */ + transition: opacity 0.3s ease, transform 0.3s ease; /* Suaviza a animação */ + transform: translateX(-50%) translateY(-10px); /* Levanta o tooltip */ } /* Animação de visibilidade e movimento */ .star-icon[title]:hover::after { opacity: 1; - transform: translateX(-50%) translateY(-30px); - /* Movimentação vertical */ + transform: translateX(-50%) translateY(-30px); /* Movimentação vertical */ } /* Criando a ponta do triângulo do tooltip */ .star-icon[title]:hover::before { content: ''; position: absolute; - bottom: 49px; - /* Coloca o triângulo abaixo */ + bottom: 49px; /* Coloca o triângulo abaixo */ left: 50%; transform: translateX(-50%); - border-left: 8px solid transparent; - /* Cria o lado esquerdo do triângulo */ - border-right: 8px solid transparent; - /* Cria o lado direito do triângulo */ - border-top: 8px solid rgba(0, 0, 0, 0.863); - /* Cor do triângulo */ + border-left: 8px solid transparent; /* Cria o lado esquerdo do triângulo */ + border-right: 8px solid transparent; /* Cria o lado direito do triângulo */ + border-top: 8px solid rgba(0, 0, 0, 0.863); /* Cor do triângulo */ } /* Mostrar os ícones de estrela e salvar quando o mouse passar por cima da miniatura */ @@ -329,37 +291,27 @@ align-items: center; justify-content: center; } - .video-thumbnail-container { - position: relative; - /* Permite que elementos posicionados absolutamente sejam colocados dentro deste contêiner */ + position: relative; /* Permite que elementos posicionados absolutamente sejam colocados dentro deste contêiner */ } .menu-icon-container { - position: absolute; - /* Posiciona o menu de forma absoluta dentro do vídeo */ - top: 10px; - /* Ajuste para a distância do topo */ - right: 10px; - /* Ajuste para a distância da borda direita */ - z-index: 10; - /* Garante que o ícone do menu fique acima do conteúdo */ - display: none; - /* Esconde o ícone por padrão em dispositivos maiores */ + position: absolute; /* Posiciona o menu de forma absoluta dentro do vídeo */ + top: 10px; /* Ajuste para a distância do topo */ + right: 10px; /* Ajuste para a distância da borda direita */ + z-index: 10; /* Garante que o ícone do menu fique acima do conteúdo */ + display: none; /* Esconde o ícone por padrão em dispositivos maiores */ } /* Exibe o menu de 3 pontos apenas em dispositivos móveis */ @media (max-width: 768px) { .menu-icon-container { - display: block; - /* Exibe o menu de 3 pontos em dispositivos móveis */ + display: block; /* Exibe o menu de 3 pontos em dispositivos móveis */ } /* Esconde os botões "favoritar" e "assistir mais tarde" em dispositivos móveis */ - .star-icon, - .save-icon { - display: none; - /* Esconde esses botões em dispositivos móveis */ + .star-icon, .save-icon { + display: none; /* Esconde esses botões em dispositivos móveis */ } } @@ -371,8 +323,6 @@ } .menu-button img { - width: 20px; - /* Ajuste o tamanho da imagem do menu de 3 pontos */ - height: 20px; - /* Mantenha a altura proporcional */ + width: 20px; /* Ajuste o tamanho da imagem do menu de 3 pontos */ + height: 20px; /* Mantenha a altura proporcional */ } \ No newline at end of file diff --git a/src/app/pages/video/video.component.html b/src/app/pages/video/video.component.html index 96739088..bb48f825 100755 --- a/src/app/pages/video/video.component.html +++ b/src/app/pages/video/video.component.html @@ -1,12 +1,9 @@
-
+
Programação indisponível no momento
-
@@ -24,22 +21,16 @@
{{ video.title }}
-
-
@@ -50,19 +41,16 @@
{{ video.title }}
menu de 3 pontos -
- \ No newline at end of file + diff --git a/src/app/pages/video/video.component.ts b/src/app/pages/video/video.component.ts index 20e70326..b5852b80 100755 --- a/src/app/pages/video/video.component.ts +++ b/src/app/pages/video/video.component.ts @@ -30,7 +30,7 @@ export class VideoComponent implements OnInit { private alertService: AlertService, private authService: AuthService, private userService: UserService - ) { } + ) {} ngOnInit(): void { this.getVideos(); @@ -90,33 +90,33 @@ export class VideoComponent implements OnInit { // Favoritar toggleFavorite(video: IVideo): void { - const videoId = video.id ?? 0; // Se video.id for undefined, usa 0 como valor + const videoId = video.id ?? 0; // Se video.id for undefined, usa 0 como valor - // Altera o estado do vídeo - video.isFavorited = !video.isFavorited; + // Altera o estado do vídeo + video.isFavorited = !video.isFavorited; - if (video.isFavorited) { - this.videoService.addToFavorite(videoId.toString(), this.userId.toString()).subscribe({ - next: () => { - this.alertService.showMessage("success", "Sucesso", "Vídeo adicionado à lista de Favoritos"); - }, - error: (err) => { - console.error('Error adding to favorite', err); - this.alertService.showMessage('error', 'Erro', 'Erro ao adicionar o vídeo para lista de favoritos'); - } - }); - } else { - this.videoService.removeFromFavorite(videoId.toString(), this.userId.toString()).subscribe({ - next: () => { - this.alertService.showMessage("success", "Sucesso", "Vídeo removido da lista de Favoritos"); - }, - error: (err) => { - console.error('Error removing from favorite', err); - this.alertService.showMessage('error', 'Erro', 'Erro ao remover o vídeo da lista de favoritos'); - } - }); - } + if (video.isFavorited) { + this.videoService.addToFavorite(videoId.toString(), this.userId.toString()).subscribe({ + next: () => { + this.alertService.showMessage("success", "Sucesso", "Vídeo adicionado à lista de Favoritos"); + }, + error: (err) => { + console.error('Error adding to favorite', err); + this.alertService.showMessage('error', 'Erro', 'Erro ao adicionar o vídeo para lista de favoritos'); + } + }); + } else { + this.videoService.removeFromFavorite(videoId.toString(), this.userId.toString()).subscribe({ + next: () => { + this.alertService.showMessage("success", "Sucesso", "Vídeo removido da lista de Favoritos"); + }, + error: (err) => { + console.error('Error removing from favorite', err); + this.alertService.showMessage('error', 'Erro', 'Erro ao remover o vídeo da lista de favoritos'); + } + }); } +} checkFavoriteStatus(): void { this.videoService.checkFavorite(this.idVideo.toString(), this.userId.toString()).subscribe({ @@ -189,11 +189,22 @@ export class VideoComponent implements OnInit { v.showMenu = false; } }); - + // Alterna o estado do menu do vídeo atual video.showMenu = !video.showMenu; } - + + handleOptionSelection(video: IVideo, option: string): void { + // Fecha o menu assim que a opção é selecionada + video.showMenu = false; + + if (option === 'favorite') { + this.toggleFavorite(video); + } else if (option === 'watch-later') { + this.toggleWatchLater(video); + } + } + returnToCatalog(): void { this.router.navigate(['/catalog']); } From 78ff22144d9882852f41f091ee2313a6bc75b256 Mon Sep 17 00:00:00 2001 From: Christopher Date: Sun, 8 Dec 2024 16:42:45 -0300 Subject: [PATCH 11/14] style: melhorando a estilizacao do menu drop-down (mobile) --- .../background/background.component.html | 2 +- src/app/pages/video/video.component.css | 7 +++++ src/app/pages/video/video.component.html | 12 ++++----- src/app/pages/video/video.component.ts | 27 +++++++++++++++++-- 4 files changed, 39 insertions(+), 9 deletions(-) diff --git a/src/app/components/background/background.component.html b/src/app/components/background/background.component.html index 3d94d8f2..9405cac5 100644 --- a/src/app/components/background/background.component.html +++ b/src/app/components/background/background.component.html @@ -78,7 +78,7 @@
-
- + \ No newline at end of file diff --git a/src/app/pages/video/video.component.ts b/src/app/pages/video/video.component.ts index b5852b80..6a6a1576 100755 --- a/src/app/pages/video/video.component.ts +++ b/src/app/pages/video/video.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, HostListener } from '@angular/core'; import { Router } from '@angular/router'; import { VideoService } from '../../services/video.service'; import { IVideo } from 'src/shared/model/video.model'; @@ -182,6 +182,7 @@ export class VideoComponent implements OnInit { } + // Método para alternar o estado do menu (já existente) toggleMenu(video: IVideo, event: Event): void { // Fecha outros menus ao abrir o atual this.unbTvVideos.forEach(v => { @@ -189,9 +190,31 @@ export class VideoComponent implements OnInit { v.showMenu = false; } }); - + // Alterna o estado do menu do vídeo atual video.showMenu = !video.showMenu; + + // Asserção de tipo + const videoElement = (event.target as HTMLElement).closest('.video-thumbnail-container'); + + if (videoElement) { + videoElement.classList.toggle('video-hovered'); + } + } + + // Método para fechar o menu ao clicar fora + @HostListener('document:click', ['$event']) + closeMenu(event: Event): void { + const target = event.target as HTMLElement; // Asserção de tipo + + // Verifica se o clique ocorreu dentro do menu ou do botão + const clickedInside = target?.closest('.video-thumbnail-container') || target?.closest('.menu-icon-container'); + + if (!clickedInside) { + this.unbTvVideos.forEach(video => { + video.showMenu = false; // Fecha todos os menus + }); + } } handleOptionSelection(video: IVideo, option: string): void { From 3d61c552397bd2c5c7bda042112afefd0d7126fa Mon Sep 17 00:00:00 2001 From: JJOAOMARCOSS Date: Sun, 8 Dec 2024 20:31:59 -0300 Subject: [PATCH 12/14] bug: consertando o problema de verificar videos favoritados e de assistir mais tarde --- src/app/pages/video/video.component.ts | 32 +++++++++++++++++++++----- 1 file changed, 26 insertions(+), 6 deletions(-) diff --git a/src/app/pages/video/video.component.ts b/src/app/pages/video/video.component.ts index 6a6a1576..8310093c 100755 --- a/src/app/pages/video/video.component.ts +++ b/src/app/pages/video/video.component.ts @@ -47,6 +47,7 @@ export class VideoComponent implements OnInit { } } + //criar outra func fora depois do if do ngonint criar a funcao para filtrar getVideos(): void { this.videoService.getVideosCatalog().subscribe({ next: (videos) => { @@ -67,7 +68,8 @@ export class VideoComponent implements OnInit { this.userService.getUser(this.userId).subscribe({ next: (user) => { this.user = user; - this.checkFavoriteStatus(); // Checa o status de favoritos + this.checkFavorites(); // Checa o status de favoritos + this.checkWatchLater(); }, error: (err) => { console.error('Error fetching user details', err); @@ -92,7 +94,7 @@ export class VideoComponent implements OnInit { toggleFavorite(video: IVideo): void { const videoId = video.id ?? 0; // Se video.id for undefined, usa 0 como valor - // Altera o estado do vídeo + // Altera o estado do vídeo video.isFavorited = !video.isFavorited; if (video.isFavorited) { @@ -118,10 +120,19 @@ export class VideoComponent implements OnInit { } } - checkFavoriteStatus(): void { - this.videoService.checkFavorite(this.idVideo.toString(), this.userId.toString()).subscribe({ + checkFavorites(){ + this.unbTvVideos.forEach(video=>{ + if(video.id) + this.checkFavoriteStatus(video.id); + }) + } + + checkFavoriteStatus(videoId: number): void { + this.videoService.checkFavorite(videoId.toString(), this.userId.toString()).subscribe({ next: (response) => { this.isFavorite = response.statusfavorite; // Verifique se a resposta tem a estrutura correta + let index = this.unbTvVideos.findIndex(video=>video.id==videoId); + this.unbTvVideos[index].isFavorited = response.statusfavorite; }, error: (err) => { console.error('Error checking favorite status', err); @@ -164,10 +175,19 @@ export class VideoComponent implements OnInit { } } - checkWatchLaterStatus(): void { - this.videoService.checkWatchLater(this.idVideo.toString(), this.userId.toString()).subscribe({ + checkWatchLater(){ + this.unbTvVideos.forEach(video=>{ + if(video.id) + this.checkWatchLaterStatus(video.id); + }) + } + + checkWatchLaterStatus(videoId: number): void { + this.videoService.checkWatchLater(videoId.toString(), this.userId.toString()).subscribe({ next: (response) => { this.isWatchLater = response.status; // Acessa a propriedade status do objeto response + let index = this.unbTvVideos.findIndex(video=>video.id==videoId); + this.unbTvVideos[index].isWatchLater = response.status; }, error: (err) => { console.error('Error checking watch later status', err); From 9b8c00d8c442695d2f0af613d90dd796003fbad2 Mon Sep 17 00:00:00 2001 From: ErickMVdO Date: Thu, 12 Dec 2024 20:26:03 -0300 Subject: [PATCH 13/14] corrigindo tamanho de budgets para o build --- angular.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/angular.json b/angular.json index 436c0070..da309ae0 100755 --- a/angular.json +++ b/angular.json @@ -44,7 +44,7 @@ { "type": "anyComponentStyle", "maximumWarning": "2kb", - "maximumError": "4kb" + "maximumError": "5kb" } ], "outputHashing": "all" From c4cae9d0f1cf7565fa68db6ff589deeb950931e5 Mon Sep 17 00:00:00 2001 From: ErickMVdO Date: Thu, 12 Dec 2024 20:26:48 -0300 Subject: [PATCH 14/14] corrigindo testes --- src/app/pages/video/video.component.spec.ts | 15 ++++++++++++++- src/app/pages/video/video.component.ts | 14 -------------- 2 files changed, 14 insertions(+), 15 deletions(-) diff --git a/src/app/pages/video/video.component.spec.ts b/src/app/pages/video/video.component.spec.ts index 2bc395a6..c039bf2a 100755 --- a/src/app/pages/video/video.component.spec.ts +++ b/src/app/pages/video/video.component.spec.ts @@ -6,6 +6,7 @@ import { of, throwError } from 'rxjs'; import { VideoComponent } from './video.component'; import { VideoService } from '../../services/video.service'; import { IVideo } from 'src/shared/model/video.model'; +import { MessageService } from 'primeng/api'; const mockData: IVideo[] = [ { @@ -34,6 +35,8 @@ const mockData: IVideo[] = [ name: 'UnBTV', }, ], + isFavorited: false, + isWatchLater: false, }, { id: 190984, @@ -61,6 +64,8 @@ const mockData: IVideo[] = [ name: 'UnBTV', }, ], + isFavorited: false, + isWatchLater: false, }, { id: 190334, @@ -88,6 +93,8 @@ const mockData: IVideo[] = [ name: 'UnBTV', }, ], + isFavorited: false, + isWatchLater: false, }, { id: 190333, @@ -115,6 +122,8 @@ const mockData: IVideo[] = [ name: 'UnBTV', }, ], + isFavorited: false, + isWatchLater: false, }, { id: 190324, @@ -142,6 +151,8 @@ const mockData: IVideo[] = [ name: 'UnBTV', }, ], + isFavorited: false, + isWatchLater: false, }, ]; @@ -161,7 +172,9 @@ describe('VideoComponent', () => { await TestBed.configureTestingModule({ declarations: [VideoComponent], imports: [HttpClientTestingModule], - providers: [{ provide: VideoService, useValue: new VideoServiceMock() }], + providers: [{ provide: VideoService, useValue: new VideoServiceMock() }, + MessageService, + ], }).compileComponents(); fixture = TestBed.createComponent(VideoComponent); diff --git a/src/app/pages/video/video.component.ts b/src/app/pages/video/video.component.ts index 8310093c..9e1a8e32 100755 --- a/src/app/pages/video/video.component.ts +++ b/src/app/pages/video/video.component.ts @@ -41,7 +41,6 @@ export class VideoComponent implements OnInit { this.getUserDetails(); } // Carrega o vídeo específico e ajusta o iframe - this.findVideoById(); if (iframe && this.idVideo) { iframe.src = `${this.eduplayVideoUrl}${this.idVideo}`; } @@ -77,19 +76,6 @@ export class VideoComponent implements OnInit { }); } - findVideoById(): void { - // Aqui você deve definir como pegar o idVideo, talvez com route ou outro método - // Como você já tem o idVideo, só faz a requisição - this.videoService.findVideoById(this.idVideo).subscribe({ - next: (data) => { - // Aqui você pode armazenar o vídeo retornado, como já está no código original - }, - error: (err) => { - console.error('Error fetching video details', err); - }, - }); - } - // Favoritar toggleFavorite(video: IVideo): void { const videoId = video.id ?? 0; // Se video.id for undefined, usa 0 como valor