From d7798c53faf8e13848b0bf60c2c7c73821373913 Mon Sep 17 00:00:00 2001
From: Ricardo Loureiro <ricardoloureiro75@gmail.com>
Date: Wed, 15 Nov 2023 16:49:19 -0300
Subject: [PATCH] =?UTF-8?q?#51=20-=20Adicionando=20mostrar=20para=20descri?=
 =?UTF-8?q?=C3=A7=C3=B5es=20longas?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Gabriela Tiago <gabrielatiagodearaujo@outlook.com>
Co-authored-by: Diego-Carlito <diego.carlito01@gmail.com>
---
 .../video-viewer/video-viewer.component.html  | 25 ++++++++++++++++---
 .../video-viewer/video-viewer.component.ts    |  8 +++++-
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/app/pages/video-viewer/video-viewer.component.html b/src/app/pages/video-viewer/video-viewer.component.html
index fc65c614..92508d66 100644
--- 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
index 89d2d97d..84fe03be 100644
--- 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 || '';
               }
             );
           }