51 descricao (#16)

* #51 - Service para descrição Co-authored-by: Gabriela Tiago <[email protected]> Co-authored-by: Diego-Carlito <[email protected]> * #51 - Componente viewer para descrição no video Co-authored-by: Gabriela Tiago <[email protected]> Co-authored-by: Diego-Carlito <[email protected]> * #51 - Adicionando mostrar para descrições longas Co-authored-by: Gabriela Tiago <[email protected]> Co-authored-by: Diego-Carlito <[email protected]> * #51 - Arrumando visualização da descrição * Adiciona serviço para realizar requição de um vídeo pelo id * Adiciona método para buscar informações do vídeo obtidas na requisição * Adiciona teste para método de buscar video pelo id * Adiciona teste para método de expandir descrição * remoção do título pelo parâmetro * altera link de exibição do vídeo * Remove métodos que não são mais utilizados * Separa a url do vídeo proveniente da propriedade embed * Alterações de responsividade * Adiciona teste para o método de extração de url * corrige ativar conta tela de login * Merge 'fix-tests' into 51-descricao * padroniza variaveis e metodo * apaga safe pipe * altera safehtml * Altera chamada da api para passar nos testes * Remove import sem uso --------- Co-authored-by: Gabriela Tiago <[email protected]> Co-authored-by: Diego-Carlito <[email protected]> Co-authored-by: Vitória Aquere Matos <[email protected]> Co-authored-by: Marcos Castilhos <[email protected]> Co-authored-by: João Victor <[email protected]>
fga-eps-mds · Nov 20, 2023 · 5ae1f1e · 5ae1f1e
1 parent eae8c17
commit 5ae1f1e
Show file tree

Hide file tree

Showing 13 changed files with 361 additions and 293 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -19,7 +19,6 @@ import { LoginComponent } from './pages/login/login.component';
 import { RegisterComponent } from './pages/register/register.component';
 import { VideoComponent } from './pages/video/video.component';
 import { VideoViewerComponent } from './pages/video-viewer/video-viewer.component';
-import { SafePipe } from './pipes/safe.pipe';
 import { BackgroundComponent } from './components/background/background.component';
 import { LoginSocialComponent } from './pages/login-social/login-social.component';
 import { ActiveAccountComponent } from './pages/active-account/active-account.component';
@@ -66,7 +65,6 @@ import { ProgressSpinnerModule } from 'primeng/progressspinner';
     LoginSocialComponent,
     VideoComponent,
     VideoViewerComponent,
-    SafePipe,
     BackgroundComponent,
     ActiveAccountComponent,
     ProfileComponent,

diff --git a/src/app/components/background/background.component.html b/src/app/components/background/background.component.html
@@ -32,7 +32,7 @@
       </div>
     </nav>
   </div>
-  <div class="flex-grow m-3">
+  <div class="flex-grow">
     <ng-content></ng-content>
   </div>
   <div class="flex flex-row items-center justify-center pb-10 mt-20">

diff --git a/src/app/pages/profile/profile.component.spec.ts b/src/app/pages/profile/profile.component.spec.ts
@@ -138,4 +138,4 @@ describe('ProfileComponent', () => {
   });
 
 
-});
+});
diff --git a/src/app/pages/video-viewer/video-viewer.component.css b/src/app/pages/video-viewer/video-viewer.component.css
@@ -0,0 +1,7 @@
+.clamped-description {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
+  }
+
diff --git a/src/app/pages/video-viewer/video-viewer.component.html b/src/app/pages/video-viewer/video-viewer.component.html
@@ -1,19 +1,43 @@
-<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">
-    <video
-      class="w-full h-2/3 max-w-6xl"
-      [src]="videoMP4.url | safe"
-      title="trusted video url"
+<div class="justify-center flex flex-col">
+  <div class="relative w-full max-h-96 overflow-hidden aspect-video">
+    <iframe
+      id="embeddedVideo"
+      title="{{ video.title }}"
       allowfullscreen
-      controls
-    ></video>
+      class="top-0 left-0 bottom-0 right-0 w-full h-full absolute"
+    ></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">
-      <h4 class="font-custom">
-        {{ videoTitle }}
+      <h4 class="font-custom font-bold">
+        {{ video.title }}
       </h4>
     </div>
+    <div class="max-w-full max-h-full flex text-[12px] font-custom">
+      <div>
+        <span
+          *ngIf="!showDescription && videoDescription.length > characterLimit"
+          class="clamped-description"
+          [innerHTML]="videoDescription"
+        ></span>
+        <button
+          *ngIf="!showDescription && videoDescription.length > characterLimit"
+          class="font-bold"
+          (click)="expandDescription()"
+        >
+          Mostrar
+        </button>
+
+        <span *ngIf="showDescription" [innerHTML]="videoDescription"></span>
+        <div *ngIf="showDescription">
+          <button class="font-bold" (click)="expandDescription()">
+            Mostrar menos
+          </button>
+        </div>
+      </div>
+    </div>
     <div>
-      <app-video-comment/>
+      <app-video-comment />
     </div>
   </div>
 </div>
diff --git a/src/app/pages/video-viewer/video-viewer.component.spec.ts b/src/app/pages/video-viewer/video-viewer.component.spec.ts
@@ -1,37 +1,71 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { RouterTestingModule } from "@angular/router/testing";
+import { RouterTestingModule } from '@angular/router/testing';
 import { VideoViewerComponent } from './video-viewer.component';
-import { SafePipe } from 'src/app/pipes/safe.pipe';
 import { VideoCommentComponent } from 'src/app/components/video-comment/video-comment.component';
 import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { VideoService } from 'src/app/services/video.service';
 import { ActivatedRoute } from '@angular/router';
+import { of } from 'rxjs';
+
+class VideoServiceMock {
+  constructor() { }
+  findVideoById() {
+    return of({});
+  }
+}
 
 describe('VideoViewerComponent', () => {
   let component: VideoViewerComponent;
   let fixture: ComponentFixture<VideoViewerComponent>;
+  let videoService: VideoService;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [VideoViewerComponent, SafePipe, VideoCommentComponent],
-      imports: [HttpClientTestingModule, RouterTestingModule, ReactiveFormsModule],
+      declarations: [VideoViewerComponent, VideoCommentComponent],
+      imports: [
+        HttpClientTestingModule,
+        RouterTestingModule,
+        ReactiveFormsModule,
+      ],
       providers: [
-        { provide: ActivatedRoute, useValue: { snapshot: { params: { 'id': 1 }, queryParams: { 'title': "titulo" } } } },
-        { provide: VideoService },
+        {
+          provide: ActivatedRoute,
+          useValue: { snapshot: { params: { id: 190329 } } },
+        },
+        { provide: VideoService, useValue: new VideoServiceMock() },
         FormBuilder,
-      ]
-
-    })
-      .compileComponents();
+      ],
+    }).compileComponents();
 
     fixture = TestBed.createComponent(VideoViewerComponent);
     component = fixture.componentInstance;
     localStorage.setItem('token', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwiZW1haWwiOiJqb2FvMTV2aWN0b3IwOEBnbWFpbC5jb20iLCJleHAiOjE2OTkzMTI5MzV9.1B9qBJt8rErwBKyD5JCdsPozsw86oQ38tdfDuMM2HFI');
     fixture.detectChanges();
+    videoService = TestBed.inject(VideoService);
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-});
+
+  it('should toggle showDescription when expandDescription is called', () => {
+
+    expect(component.showDescription).toBe(false);
+
+    component.expandDescription();
+
+    expect(component.showDescription).toBe(true);
+
+    component.expandDescription();
+
+    expect(component.showDescription).toBe(false);
+  });
+
+  it('should call findVideoById and return video', () => {
+    const mySpy = spyOn(videoService, 'findVideoById').and.callThrough();
+    component.findVideoById();
+    expect(mySpy).toHaveBeenCalled();
+  });
+
+}); 
diff --git a/src/app/pages/video-viewer/video-viewer.component.ts b/src/app/pages/video-viewer/video-viewer.component.ts
@@ -1,51 +1,46 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { HttpResponse } from '@angular/common/http';
-import {
-  IVideoVersion,
-} from 'src/shared/model/video-version.model';
-import {
-  IVideoDetails,
-  VideoDetails,
-} from 'src/shared/model/video-details.model';
 import { VideoService } from '../../services/video.service';
-
+import { IVideo, Video } from 'src/shared/model/video.model';
 
 @Component({
   selector: 'app-video-viewer',
   templateUrl: './video-viewer.component.html',
   styleUrls: ['./video-viewer.component.css'],
 })
-
 export class VideoViewerComponent implements OnInit {
-  videoVersion!: IVideoVersion;
-  videoMP4: IVideoDetails = new VideoDetails();
-  videoTitle: string = '';
+  videoDescription: string = '';
+  characterLimit = 100;
+  showDescription = false;
+  video: IVideo = new Video();
   idVideo!: number;
+  eduplayVideoUrl = "https://eduplay.rnp.br/portal/video/embed/";
+
+  expandDescription() {
+    this.showDescription = !this.showDescription;
+  }
 
   constructor(
     private route: ActivatedRoute,
     private videoService: VideoService,
   ) { }
 
   ngOnInit(): void {
+    const iframe = document.getElementById('embeddedVideo') as HTMLIFrameElement;
     this.idVideo = this.route.snapshot.params['idVideo'];
-    this.findVideo();
-    this.videoTitle = this.route.snapshot.queryParams['title'];
-
+    this.findVideoById();
+    iframe.src = this.eduplayVideoUrl + this.idVideo;
   }
 
-  findVideo = () => {
-    this.videoService.findVideoVersionByVideoId(this.idVideo)
-      .subscribe({
-        next: (data: HttpResponse<IVideoVersion>) => {
-          this.videoVersion = data.body ? data.body : this.videoVersion;
-          const videoMP4Found = this.videoVersion.videoVersionList?.find(
-            (video) => video.fileFormat === 'MP4'
-          );
-
-          this.videoMP4 = !!videoMP4Found ? videoMP4Found : this.videoMP4;
-        }
-      });
-  }
+  findVideoById = () => {
+    this.videoService.findVideoById(this.idVideo).subscribe({
+      next: (data: HttpResponse<IVideo>) => {
+        this.video = data.body ? data.body : this.video;
+        this.videoDescription = this.video.description
+          ? this.video.description
+          : '';
+      },
+    });
+  };
 }
diff --git a/src/app/pages/video/video.component.html b/src/app/pages/video/video.component.html
@@ -4,8 +4,8 @@
       <div
         *ngFor="let image of video.images"
         [routerLink]="['/video', video.id]"
-        [queryParams]="{ title: video.title }"
-      >
+        class="cursor-pointer"
+        >
         <img
           src="{{ image.href }}"
           alt="{{ video.title }}"

diff --git a/src/app/pipes/safe.pipe.spec.ts b/src/app/pipes/safe.pipe.spec.ts
diff --git a/src/app/pipes/safe.pipe.ts b/src/app/pipes/safe.pipe.ts
Original file line number	Diff line number	Diff line change
Expand Up		@@ -138,4 +138,4 @@ describe('ProfileComponent', () => {
		});


		});
		});