Media Details & Trailers

import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { MediaItem } from '../../models/movie.model';
import { ToastrService } from 'ngx-toastr';
import { FavoritesService } from '../../services/favorites/favorites.service';
import { AuthService } from 'src/app/core/services/auth.service';
import { Router } from '@angular/router';
import { MediaItemDialogData } from '../../models/movieDialogData.model';
import { SafeResourceUrl } from '@angular/platform-browser';
import { DialogService } from '../../services/dialog/dialog.service';
import { EMPTY, switchMap, take } from 'rxjs';

@Component({
  selector: 'app-movie-dialog',
  templateUrl: './movie-dialog.component.html',
  styleUrls: ['./movie-dialog.component.scss']
})
export class MediaItemDialogComponent {
  showPlayer = false;
  videoUrl!: SafeResourceUrl;
  imdbLogoPath  = '/assets/images/imdb.png';
  
  constructor(
    @Inject(MAT_DIALOG_DATA) public data: MediaItemDialogData,
    private toastrService: ToastrService,
    private favoritesService: FavoritesService,
    private authService: AuthService,
    private router: Router,
    private dialogRef: MatDialogRef<MediaItemDialogComponent>,
    private dialogService: DialogService
  ) { }

  // ... methods below
}

addToFavorites(mediaItem: MediaItem) {
  this.authService.isLoggedInObservable().pipe(
    take(1),
    switchMap(loggedIn => {
      if (!loggedIn) {
        this.toastrService.error('You must be logged in to add movies to your list', 'Error');
        this.dialogRef.close();
        this.router.navigate(['/auth/login']);
        return EMPTY; 
      }
      return this.favoritesService.addToFavorites(mediaItem);
    })
  ).subscribe({
    next: () => this.toastrService.success(mediaItem.title, 'Added to favorites'),
    error: (error) => this.toastrService.warning(error.message)
  });
}

onImageError(event: Event) {
  const target = event.target as HTMLImageElement;
  target.src = 'assets/images/no_poster.jpg';
}

playTrailer(): void {
  if (!this.data.response.youtubeURLTrailer) return;

  this.dialogService.openTrailerDialog(
    this.data.response.youtubeURLTrailer,
  );
}

import { Component, Inject, OnInit } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
import { TrailerDialogData } from '../../models/trailerDialogData.model';

@Component({
  selector: 'app-trailer-dialog',
  templateUrl: './trailer-dialog.component.html',
  styleUrls: ['./trailer-dialog.component.scss']
})
export class TrailerDialogComponent implements OnInit {
  safeVideoUrl!: SafeResourceUrl;

  constructor(
    @Inject(MAT_DIALOG_DATA) public data: TrailerDialogData,
    private dialogRef: MatDialogRef<TrailerDialogComponent>,
    private sanitizer: DomSanitizer
  ) {}

  ngOnInit(): void {
    const videoId = this.extractYouTubeId(this.data.videoUrl);
    const embedUrl = `https://www.youtube.com/embed/${videoId}?autoplay=1&controls=1&rel=0`;
    this.safeVideoUrl = this.sanitizer.bypassSecurityTrustResourceUrl(embedUrl);
  }

  private extractYouTubeId(url: string): string {
    const regExp = /(?:youtu\.be\/|youtube\.com\/(?:watch\?v=|embed\/))([\w-]{11})/;
    const match = url.match(regExp);
    return match && match[1] ? match[1] : '';
  }

  close(): void {
    this.dialogRef.close();
  }
}

imdbLogoPath = '/assets/images/imdb.png';

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MediaItemDialogComponent } from './movie-dialog.component';
import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
import { ToastrModule } from 'ngx-toastr';
import { HttpClientModule } from '@angular/common/http';
import { MatIconModule } from '@angular/material/icon';

describe('MediaItemDialogComponent', () => {
  let component: MediaItemDialogComponent;
  let fixture: ComponentFixture<MediaItemDialogComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [MediaItemDialogComponent],
      imports: [
        MatDialogModule, 
        ToastrModule.forRoot(),
        HttpClientModule,
        MatIconModule
      ],
      providers: [
        { provide: MatDialogRef, useValue: {} },
        { 
          provide: MAT_DIALOG_DATA, 
          useValue: {
            response: {
              Title: 'Test Movie',
              Year: '2020',
              Poster: 'N/A',
              Director: 'Test Director',
              Actors: 'Actor 1, Actor 2',
              Plot: 'A test plot',
              Genre: 'Drama',
              Language: 'English',
              Country: 'USA',
              Runtime: '120 min',
              imdbRating: '8.5',
              imdbVotes: '10,000'
            },
            fromFavoritesSection: false,
            movie: {}
          }
        } 
      ]
    });
    fixture = TestBed.createComponent(MediaItemDialogComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});