Merge pull request #7 from fga-eps-mds/8-favoritarVideo

 US08 - Eu, como usuário, quero favoritar um vídeo diretamente da página de visualização, para acessá-lo facilmente depois. + US13 - Eu, como usuário, quero marcar vídeos para assistir mais tarde

package.json

@@ -56,6 +56,7 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.0.0",
+    "karma-junit-reporter": "^2.0.1",
     "postcss": "^8.4.31",
     "postcss-nesting": "^12.0.2",
     "tailwindcss": "^3.3.3",

src/app/pages/video-viewer/video-viewer.component.css

@@ -1,7 +1,78 @@
 .clamped-description {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-    overflow: hidden;
-  }
-
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}
+
+.watch-later-button {
+  background-color: #0087c8;
+  color: #fff;
+  border: none;
+  padding: 0.15em 0.9em;
+  border-radius: 5em;
+  cursor: pointer;
+  font-size: 1.2em;
+  display: flex;
+  align-items: center;
+  gap: 0.3em;
+}
+
+.watch-later-button.watch-later-active {
+  background-color: #f00; /* Cor para quando o vídeo estiver na lista de assistir mais tarde */
+}
+
+.watch-later-button:hover {
+  background-color: #00000094; /* Fundo ao passar o mouse */
+  color: white; /* Cor das letras ao passar o mouse */
+}
+
+.watch-later-button:active {
+  background-color: red; /* Fundo ao clicar */
+  color: white; /* Cor das letras ao clicar */
+}
+
+.title-button-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.favorite-button {
+  color: white;
+  background-color: #0087c8;
+  padding: 0.15em 0.9em;
+  border: none;
+  cursor: pointer;
+  border-radius: 5em;
+  font-size: 1.2em;
+  display: flex; /* Utiliza flexbox para alinhar o conteúdo */
+  align-items: center; /* Alinha verticalmente o conteúdo */
+  gap: 0.3em;
+}
+
+.favorite-button.favorited {
+  background-color: red; /* Fundo quando favorito */
+  color: white; /* Cor das letras quando favorito */
+}
+
+.favorite-icon {
+  display: flex;
+  width: 1em; /* Define a largura do ícone */
+  height: 1em; /* Define a altura do ícone */
+  fill: #ffffff; /* Define a cor do ícone */
+}
+
+.favorite-button:hover {
+  background-color: #0085c894; /* Fundo ao passar o mouse */
+  color: white; /* Cor das letras ao passar o mouse */
+}
+
+.favorite-button:active {
+  background-color: red; /* Fundo ao clicar */
+  color: white; /* Cor das letras ao clicar */
+}
+
+button.favorited span {
+  color: rgb(255, 255, 255);
+}

src/app/pages/video-viewer/video-viewer.component.html

@@ -11,10 +11,20 @@
     ></iframe>
   </div>
   <div class="flex justify-center flex-col gap-6 p-3 m-3">
-    <div class="max-w-full justify-start max-h-full flex">
+    <div class="title-button-container max-w-full flex justify-between items-center">
       <h4 class="font-custom font-bold text-gray-800">
         {{ video.title }}
       </h4>
+      <div class="flex gap-2" *ngIf="userId!==''">
+        <button class="favorite-button" (click)="toggleFavorite()" [class.favorited]="isFavorite">
+          <img alt="coracao" src="../../../assets/coracao.svg" class="favorite-icon"/> 
+          <span *ngIf="isFavorite"> Favoritado</span>
+          <span *ngIf="!isFavorite"> Favoritar </span>
+        </button> 
+        <button class="watch-later-button" (click)="toggleWatchLater()" [ngClass]="{'watch-later-active': isWatchLater}">
+          {{ isWatchLater ? 'Remover da lista': 'Assistir Mais Tarde'}}
+        </button>
+      </div>
     </div>
     <div
       class="max-w-full max-h-full flex text-[12px] font-custom text-gray-800"