#51 - Adicionando mostrar para descrições longas

Co-authored-by: Gabriela Tiago <[email protected]> Co-authored-by: Diego-Carlito <[email protected]>
fga-eps-mds · Nov 15, 2023 · d7798c5 · d7798c5
1 parent ad94aee
commit d7798c5
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 5 deletions.
diff --git a/src/app/pages/video-viewer/video-viewer.component.html b/src/app/pages/video-viewer/video-viewer.component.html
@@ -8,13 +8,30 @@
       controls
     ></video>
     <div class="max-w-full justify-start max-h-full flex">
-      <h4 class="font-custom font-custom font-bold" >
+      <h4 class="font-custom font-bold" >
         {{ videoTitle }}
       </h4>
     </div>
-    <div class="max-w-full justify-start max-h-full flex">
-      <div [innerHTML]="videoDescription">
+    <div class="max-w-full justify-start max-h-full flex text-[12px] font-custom">
+      <div>
+        <!-- Exibir descrição abreviada com botão 'Mostrar' -->
+        <span *ngIf="!mostrarCompleta && videoDescription.length > limiteCaracteres">
+          <span [innerHTML]="videoDescription | slice:0:limiteCaracteres"></span>...
+          <button class="font-bold" (click)="expandirDescricao()">Mostrar</button>
+        </span>
+
+        <!-- Exibir descrição completa com botão 'Mostrar menos' -->
+        <span *ngIf="mostrarCompleta">
+          <span [innerHTML]="videoDescription"></span>
+          <button class="font-bold" (click)="expandirDescricao()">Mostrar menos</button>
+        </span>
+
+        <!-- Exibir descrição completa se ela for menor ou igual ao limite -->
+        <span *ngIf="videoDescription.length <= limiteCaracteres">
+          <span [innerHTML]="videoDescription"></span>
+        </span>
       </div>
     </div>
-  </div>
+
+    </div>
 </div>
diff --git a/src/app/pages/video-viewer/video-viewer.component.ts b/src/app/pages/video-viewer/video-viewer.component.ts
@@ -23,6 +23,12 @@ export class VideoViewerComponent implements OnInit {
   videoMP4: IVideoDetails = new VideoDetails();
   videoTitle: string = '';
   videoDescription: string = '';
+  limiteCaracteres = 100;
+  mostrarCompleta = false;
+
+  expandirDescricao() {
+    this.mostrarCompleta = !this.mostrarCompleta;
+  }
 
   constructor(
     private route: ActivatedRoute,
@@ -45,7 +51,7 @@ export class VideoViewerComponent implements OnInit {
           if (params['idVideo']) {
             this.videoService.findDescriptionByVideoId(params['idVideo']).subscribe(
               (descriptionRes: HttpResponse<{description: string}>) => {
-                this.videoDescription = descriptionRes.body?.description || 'Descrição não disponível';
+                this.videoDescription = descriptionRes.body?.description || '';
               }
             );
           }