Merge pull request #40 from fga-eps-mds/us12-compartilhar-video

Adiciona compartilhamento nos vídeos

src/app/pages/login-social/login-social.component.css

@@ -18,49 +18,59 @@
 }
 
 .google-button {
-  text-align: center;
-  background-color: white;
-  color: #969696;
-  padding: 10px 20px;
-  border-color: #3c3c3b;
-  width: 260px;
-  height: 30px;
-  top: 210px;
-  left: 50px;
-  margin: 5px;
-  border: 0.15px solid #3c3c3b;
-  border-radius: 9px;
-  line-height: 10px;
-  font-weight: 400;
-  font-size: 13px;
-  background-image: url("../../../assets/google.png");
-  background-size: 7% auto;
-  background-repeat: no-repeat;
-  background-position: 220px 6px;
-  margin-bottom: 10.5px;
+    text-align: center;
+    background-color: white;
+    color: #969696;
+    padding: 10px 20px;
+    border-color: black;
+    width: 260px;
+    height: 30px;
+    top: 210px;
+    left: 50px;
+    margin: 5px;
+    border: 0.15px solid #3C3C3B;
+    border-radius: 9px;
+    line-height: 10px;
+    font-weight: 400;
+    font-size: 13px;
+    background-image: url('../../../assets/google.png');
+    background-size: 7% auto;
+    background-repeat: no-repeat;
+    background-position: 220px 6px;
+    margin-bottom: 10.5px;
+
+}
+
+
+.google-button span{
+    position: relative;
+    margin-left: -70px;
 }
 
 .facebook-button {
-  text-align: center;
-  color: #3c3c3b;
-  padding: 10px 20px;
-  border-color: #3c3c3b;
-  width: 260px;
-  height: 40px;
-  top: 210px;
-  left: 25px;
-  cursor: pointer;
-  margin: 5px;
-  border: 1px solid #dadce0;
-  border-radius: 5px;
-  line-height: 10px;
-  background-image: url("../../../assets/facebook-icon-white-png.png");
-  background-size: 8% auto;
-  background-repeat: no-repeat;
-  background-position: 12px 9px;
-  margin-bottom: 10.5px;
-  margin-top: 19.5px;
-  background-color: #1877f2;
+    text-align: center;
+    background-color: white;
+    color:  #969696;
+    padding: 10px 20px;
+    border-color: black;
+    width: 260px;
+    height: 30px;
+    top: 210px;
+    left: 50px;
+    cursor: pointer;
+    margin: 5px;
+    border: 0.15px solid #3C3C3B;
+    border-radius: 9px;
+    line-height: 10px;
+    font-weight: 400;
+    font-size: 13px;
+    background-image: url('../../../assets/facebook.png');
+    background-size: 8% auto;
+    background-repeat: no-repeat;
+    background-position: 220px 4px;
+    margin-bottom: 10.5px;
+    margin-top: 10.5px;
+
 }
 
 .facebook-button span {
@@ -71,27 +81,25 @@
   color: white;
 }
 
-.email-button {
-  text-align: center;
-  background-color: white;
-  color: #969696;
-  padding: 10px 20px;
-  border-color: #3c3c3b;
-  width: 260px;
-  height: 40px;
-  top: 210px;
-  left: 50px;
-  margin: 5px;
-  border: 1px solid #dadce0;
-  border-radius: 5px;
-  line-height: 10px;
-  font-weight: 400;
-  margin-top: 10px;
-  margin-bottom: 18.5px;
-  background-image: url("../../../assets/email-svgrepo-com.svg");
-  background-size: 8% auto;
-  background-repeat: no-repeat;
-  background-position: 12px 9px;
+.email-button{
+    text-align: center;
+    background-color: white;
+    color: #969696;
+    padding: 10px 20px;
+    border-color: black;
+    width: 260px;
+    height: 30px;
+    top: 210px;
+    left: 50px;
+    margin: 5px;
+    border: 0.15px solid #3C3C3B;
+    border-radius: 9px;
+    line-height: 10px;
+    font-weight: 400;
+    font-size: 13px;
+    margin-top: 10.5px;
+    margin-bottom: 18.5px;
+
 }
 
 .email-button span {

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

@@ -1,4 +1,7 @@
 <div class="justify-center flex flex-col">
+  <div class="flex justify-end p-2">
+    <img src="../../../assets/share.png" alt="Share" (click)="shareVideo()">
+  </div>
   <div class="relative w-full max-h-96 overflow-hidden aspect-video">
     <iframe
       id="embeddedVideo"

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

@@ -1,4 +1,9 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {
+  ComponentFixture,
+  TestBed,
+  fakeAsync,
+  tick,
+} from '@angular/core/testing';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { VideoViewerComponent } from './video-viewer.component';
@@ -7,6 +12,7 @@ import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { VideoService } from 'src/app/services/video.service';
 import { ActivatedRoute } from '@angular/router';
 import { of } from 'rxjs';
+import { HttpResponse } from '@angular/common/http';
 
 class VideoServiceMock {
   constructor() { }
@@ -31,7 +37,7 @@ describe('VideoViewerComponent', () => {
       providers: [
         {
           provide: ActivatedRoute,
-          useValue: { snapshot: { params: { id: 190329 } } },
+          useValue: { snapshot: { params: { idVideo: 190329 } } },
         },
         { provide: VideoService, useValue: new VideoServiceMock() },
         FormBuilder,
@@ -40,32 +46,145 @@ describe('VideoViewerComponent', () => {
 
     fixture = TestBed.createComponent(VideoViewerComponent);
     component = fixture.componentInstance;
-    localStorage.setItem('token', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwiZW1haWwiOiJqb2FvMTV2aWN0b3IwOEBnbWFpbC5jb20iLCJleHAiOjE2OTkzMTI5MzV9.1B9qBJt8rErwBKyD5JCdsPozsw86oQ38tdfDuMM2HFI');
+    localStorage.setItem(
+      'token',
+      'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwiZW1haWwiOiJqb2FvMTV2aWN0b3IwOEBnbWFpbC5jb20iLCJleHAiOjE2OTkzMTI5MzV9.1B9qBJt8rErwBKyD5JCdsPozsw86oQ38tdfDuMM2HFI'
+    );
     fixture.detectChanges();
     videoService = TestBed.inject(VideoService);
+    navigator.share = () => {
+      {
+        return new Promise((resolve, reject) => {
+          resolve();
+        });
+      }
+    };
+
+    navigator.canShare = () => {
+      {
+        return true;
+      }
+    }
+
+
+  });
+
+  class VideoServiceMock {
+    findVideoById(id: number) {
+      const mockVideo = {
+        id: id,
+        title: 'Mock Video Title',
+        description: 'Mock Video Description',
+      };
+      return of(new HttpResponse({ body: mockVideo }));
+    }
+  }
+
+  it('should call findVideoById and set video description', () => {
+    const expectedVideo = {
+      id: 190329,
+      title: 'Mock Video Title',
+      description: 'Mock Video Description',
+    };
+    const mySpy = spyOn(videoService, 'findVideoById').and.returnValue(
+      of(new HttpResponse({ body: expectedVideo }))
+    );
+    component.findVideoById();
+    fixture.detectChanges();
+    expect(mySpy).toHaveBeenCalledWith(190329);
+    expect(component.video).toEqual(expectedVideo);
+    expect(component.videoDescription).toEqual(expectedVideo.description);
   });
 
   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();
+  it('should call findVideoById and set video description', () => {
+    const expectedVideo = {
+      id: 190329,
+      title: 'Mock Video Title',
+      description: 'Mock Video Description',
+    };
+    spyOn(videoService, 'findVideoById').and.returnValue(
+      of(new HttpResponse({ body: expectedVideo }))
+    );
     component.findVideoById();
-    expect(mySpy).toHaveBeenCalled();
+    fixture.detectChanges();
+    expect(component.video).toEqual(expectedVideo);
+    expect(component.videoDescription).toEqual(expectedVideo.description);
   });
 
+  it('should return the correct video URL', () => {
+    component.eduplayVideoUrl = 'https://eduplay.rnp.br/portal/video/';
+    component.idVideo = 190329;
+
+    const expectedUrl = 'https://eduplay.rnp.br/portal/video/190329';
+    const returnedUrl = component.getVideoUrl();
+
+    expect(returnedUrl).toEqual(expectedUrl);
+  });
+
+  it('should share video with native share API on mobile', fakeAsync(() => {
+    const shareData = {
+      title: component.video.title,
+      text: component.video.title,
+      url: window.location.href,
+    };
+    spyOn(window.navigator, 'canShare').and.returnValue(true);
+    spyOn(navigator, 'share').and.returnValue(
+      new Promise((resolve, reject) => {
+        resolve();
+      })
+    );
+    component.shareVideo();
+    tick();
+    expect(navigator.share).toHaveBeenCalledWith(shareData);
+  }));
+
+
+  it('should handle unsupported share options gracefully', fakeAsync(() => {
+    spyOn(navigator, 'canShare').and.returnValue(true);
+    spyOn(navigator, 'share').and.returnValue(Promise.reject());
+    spyOn((window as any).navigator.clipboard, 'writeText').and.returnValue(Promise.resolve());
+    const consoleWarnSpy = spyOn(console, 'error');
+
+    component.shareVideo();
+    tick();
+    expect(consoleWarnSpy).toHaveBeenCalledWith('Erro ao compartilhar:', undefined);
+  }));
+
+  it('should copy video URL to clipboard if native share is not supported', fakeAsync(() => {
+
+    spyOn(navigator, 'canShare').and.returnValue(false);
+    // spyOnProperty(navigator, 'clipboard').and.resolveTo();
+    spyOn(navigator.clipboard, 'writeText').and.returnValue(Promise.resolve());
+    const consoleWarnSpy = spyOn(console, 'error');
+
+    component.shareVideo();
+    tick();
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(window.location.href);
+    expect(consoleWarnSpy).not.toHaveBeenCalled();
+  }));
+
+  it('should handle clipboard errors gracefully', fakeAsync(() => {
+    spyOn(navigator, 'canShare').and.returnValue(false);
+    spyOn(navigator.clipboard, 'writeText').and.returnValue(Promise.reject());
+    const consoleWarnSpy = spyOn(console, 'error');
+
+    component.shareVideo();
+    tick();
+    expect(consoleWarnSpy).toHaveBeenCalledWith('Erro ao copiar URL:', undefined);
+  }));
+
+
+
 }); 

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

@@ -43,4 +43,34 @@ export class VideoViewerComponent implements OnInit {
       },
     });
   };
+
+  getVideoUrl(): string {
+    return `${this.eduplayVideoUrl}${this.idVideo}`;
+  }
+
+  shareVideo() {
+    const shareData = {
+      title: this.video.title,
+      text: this.video.title,
+      url: window.location.href,
+    };
+
+    if (navigator.canShare()) {
+      navigator.share(shareData)
+        .then(() => console.log('Compartilhado com sucesso'))
+        .catch((error) => console.error('Erro ao compartilhar:', error));
+    } else if (navigator.clipboard) {
+      navigator.clipboard.writeText(shareData.url)
+        .then(() => console.log('URL copiada com sucesso'))
+        .catch((error) => console.error('Erro ao copiar URL:', error));
+
+      const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+      if (isMobile) {
+        const whatsappUrl = `whatsapp://send?text=${encodeURIComponent(shareData.title + ' ' + shareData.url)}`;
+        window.location.href = whatsappUrl;
+      }
+    } else {
+      console.warn('A API de compartilhamento não é suportada neste navegador.');
+    }
+  }
 }