#51 - Componente viewer para descrição no video

Co-authored-by: Gabriela Tiago <[email protected]>
Co-authored-by: Diego-Carlito <[email protected]>

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

@@ -1,5 +1,5 @@
 <div class="max-w-full justify-center max-h-full flex">
-  <div class="max-w-full max-h-full flex justify-center flex-col gap-3">
+  <div class="max-w-full max-h-full flex justify-center flex-col gap-8 p-5">
     <video
       class="w-full h-2/3 max-w-6xl"
       [src]="videoMP4.url | safe"
@@ -8,9 +8,13 @@
       controls
     ></video>
     <div class="max-w-full justify-start max-h-full flex">
-      <h4 class="font-custom">
+      <h4 class="font-custom font-custom font-bold" >
         {{ videoTitle }}
       </h4>
     </div>
+    <div class="max-w-full justify-start max-h-full flex">
+      <div [innerHTML]="videoDescription">
+      </div>
+    </div>
   </div>
 </div>

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

@@ -22,6 +22,7 @@ export class VideoViewerComponent implements OnInit {
   videoVersion: IVideoVersion = new VideoVersion();
   videoMP4: IVideoDetails = new VideoDetails();
   videoTitle: string = '';
+  videoDescription: string = '';
 
   constructor(
     private route: ActivatedRoute,
@@ -40,6 +41,14 @@ export class VideoViewerComponent implements OnInit {
           );
 
           this.videoMP4 = !!videoMP4Found ? videoMP4Found : this.videoMP4;
+
+          if (params['idVideo']) {
+            this.videoService.findDescriptionByVideoId(params['idVideo']).subscribe(
+              (descriptionRes: HttpResponse<{description: string}>) => {
+                this.videoDescription = descriptionRes.body?.description || 'Descrição não disponível';
+              }
+            );
+          }
         });
     });