movie details page added, UI changes

.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+    "cSpell.ignoreWords": [
+        "actorname",
+        "lastest",
+        "ngma",
+        "ngmp",
+        "nodata",
+        "noimageposter"
+    ],
+    "git.ignoreLimitWarning": true
+}

src/app/app.module.ts

@@ -7,16 +7,22 @@ import { SidebarModule } from "./sidebar/sidebar.module";
 import { MovieModule } from "./movie/movie.module";
 import { SearchBarModule } from "./search-bar/search-bar.module";
 import { LoaderModule } from "./loader/loader.module";
+import { MovieDetailModule } from "./movie-detail/movie-detail.module";
+import { NoDataModule } from "./no-data/no-data.module";
+import { SharedModule } from './shared/shared.module';
 
 @NgModule({
   declarations: [AppComponent],
   imports: [
     BrowserModule,
     AppRoutingModule,
+    SharedModule,
     SidebarModule,
     MovieModule,
     SearchBarModule,
-    LoaderModule
+    LoaderModule,
+    MovieDetailModule,
+    NoDataModule
   ],
   providers: [],
   bootstrap: [AppComponent],

src/app/movie-detail/movie-detail-routing.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class MovieDetailRoutingModule { }

src/app/movie-detail/movie-detail.component.html

@@ -0,0 +1,54 @@
+<app-loader [loading]="loading"></app-loader>
+
+<div class="ngmp-movie-details-container" *ngIf="movie" [@simpleFadeAnimation]="'in'">
+    <div class="ngmp-movie-cover">
+        <img src="{{movie.Poster}}" alt="movie cover">
+    </div>
+    <div class="ngmp-movie-details">
+        <div class="ngmp-movie-poster">
+            <img src="{{movie.Poster}}" alt="movie poster">
+        </div>
+        <div class="ngmp-movie-contents">
+            <h2>{{movie.Title}}</h2>
+            <div class="ngmp-movie-info">
+                <div class="ngmp-movie-rate">
+                    <span>
+                        <img class="ngmp-star-img" src="assets/icons/star.svg" alt="movie poster">
+                        <strong>{{movie.imdbRating}}</strong>
+                    </span>
+                </div>
+                <div class="ngmp-movie-duration">
+                    <span><img class="ngmp-duration-img" src="assets/icons/duration.svg" alt="movie poster">
+                        <strong>{{movie.Runtime}}</strong>
+                    </span>
+                </div>
+                <div class="ngmp-movie-rating-container">
+                    <strong>Ratings:</strong>
+                    <a *ngFor="let rating of movie.Ratings">
+                        {{rating.Source}}
+                        {{rating.Value}}
+                    </a>
+                </div>
+            </div>
+            <div class="ngmp-movie-info">
+                <div class="ngmp-movie-rating-container">
+                    <a *ngFor="let genre of movie.Genre.split(',')">
+                        {{genre}}
+                    </a>
+                </div>
+            </div>
+
+            <p class="ngmp-movie-plot">
+                <img class="ngmp-plot-img" src="assets/icons/plot.svg" alt="movie poster">
+                {{movie.Plot}}
+            </p>
+            <div class="ngmp-movie-info"> 
+                <a *ngFor="let actor of movie.Actors.split(',')" class="ngma-actor-details">
+                    <div class="icon-container avatar" style="background-image: url('assets/icons/avatar.svg');">
+                    </div>
+                    <h3 class="ngma-actorname"> {{actor}}</h3>
+                </a>
+            </div>
+        </div>
+    </div>
+</div>

src/app/movie-detail/movie-detail.component.scss

@@ -0,0 +1,151 @@
+@import 'variables';
+
+.ngmp-movie-details-container{
+  width: 100%;
+}
+
+.ngmp-movie-cover{
+  position: relative;
+  max-height: 25em;
+  overflow: hidden;
+
+  img{
+    width: 100%;
+  }
+
+  &:after{
+    content: '';
+    position: absolute;
+    top:0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(4,6,13,0) 15%, rgba(237, 103, 30,.4) 100%); /* FF3.6-15 */
+    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(4,6,13,0) 15%,rgba(237, 103, 30,.4) 100%); /* Chrome10-25,Safari5.1-6 */
+    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(4,6,13,0) 15%,rgba(237, 103, 30,.4) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#182b54',GradientType=0 ); /* IE6-9 */
+  }
+}
+
+.ngmp-movie-details {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  padding: 0 2em;
+  transform: translateY(-4em);
+}
+
+.ngmp-movie-contents {
+  padding: 0 1em;
+  color: darken($light, 35);
+
+  h2{
+    color: $primary-title;
+    margin-top: 0;
+    font-size: 44px;
+  }
+
+  .ngmp-movie-info {
+    display: flex;
+    justify-content: flex-start;
+    flex-direction: row;
+    text-transform: capitalize;
+    margin-top: 25px;
+
+    div {
+      margin-right: 1em;
+    }
+
+    strong{
+      color: $primary-title;
+    }
+    .icon-container{
+      background-position: center;
+      background-size: cover;
+      border: 1px solid $green;
+      line-height: 2;
+    }
+    .avatar {
+      flex-shrink: 0;
+      width: 35px;
+      height: 35px;
+      border-radius: 50%;
+      -o-object-fit: cover;
+      object-fit: cover;
+    }
+    .ngma-actor-details {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      align-items: center;
+      min-width: 200px;
+      padding: 5px;
+    }
+  }
+
+  .ngmp-movie-rating-container{
+    a{
+      margin-left: 0.5em;
+      background-color: $secondary-color;
+      color: $grey;
+      padding: 0.4em;
+      border-radius: 5px;
+      text-decoration: none;
+    }
+  }
+
+  .ngmp-movie-plot {
+    max-width: 70%;
+    line-height: 1.8;
+  }
+
+  .ngmp-plot-img{
+    top: 10px;
+    position: relative;
+    height: 25px;
+    width: 25px;
+  }
+
+  .ngmp-star-img {
+    top: 5px;
+    position: relative;
+    height: 25px;
+    width: 25px;
+  }
+
+  .ngmp-duration-img{
+    top: 10px;
+    position: relative;
+    height: 20px;
+  }
+}
+
+@media only screen and (max-width : 48em) {
+  .ngmp-movie-details {
+    flex-direction: column-reverse;
+    transform: translateY(0);
+    padding: 0 0.5em;
+
+    .ngmp-movie-poster{
+      padding: 0 1em;
+    }
+    .ngmp-movie-info {
+      flex-direction: column;
+
+      div {
+        margin-right: 0;
+        margin-bottom: 1em;
+      }
+    }
+    .ngmp-movie-rating-container {
+      span{
+        display: block;
+        margin-bottom: 1em;
+      }
+    }
+    .ngmp-movie-plot {
+      max-width: 100%;
+    }
+  }
+}

src/app/movie-detail/movie-detail.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MovieDetailComponent } from './movie-detail.component';
+
+describe('MovieDetailComponent', () => {
+  let component: MovieDetailComponent;
+  let fixture: ComponentFixture<MovieDetailComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MovieDetailComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MovieDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/movie-detail/movie-detail.component.ts

@@ -0,0 +1,42 @@
+import { Component, OnInit } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
+
+import { Movie } from "../movie/models/movie.models";
+import { MovieService } from "../movie/services/movie.services";
+import { FadeIn } from "../shared/animation";
+
+@Component({
+  selector: "app-movie-detail",
+  templateUrl: "./movie-detail.component.html",
+  styleUrls: ["./movie-detail.component.scss"],
+  animations: [FadeIn],
+})
+export class MovieDetailComponent implements OnInit {
+  public loading: boolean;
+  public movie: any;
+  public error: string = "";
+
+  constructor(
+    private movieService: MovieService,
+    private activatedRoute: ActivatedRoute
+  ) {
+    this.loading = true;
+  }
+
+  ngOnInit() {
+    let movieId = this.activatedRoute.snapshot.params["id"];
+    this.getMovieDetails(movieId);
+  }
+
+  getMovieDetails(id: string) {
+    console.log(id);
+    this.movieService.getMovieById(id).subscribe(
+      (movie) => {
+        this.movie = movie;
+        console.log("getMovies", movie);
+        this.loading = false;
+      },
+      (error) => (this.loading = false)
+    );
+  }
+}

src/app/movie-detail/movie-detail.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { MovieDetailRoutingModule } from './movie-detail-routing.module';
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    MovieDetailRoutingModule
+  ]
+})
+export class MovieDetailModule { }

src/app/movie/movie-routing.module.ts

@@ -1,14 +1,16 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import { NgModule } from "@angular/core";
+import { Routes, RouterModule } from "@angular/router";
 
-import { MovieComponent } from './movie.component';
+import { MovieComponent } from "./movie.component";
+import { MovieDetailComponent } from "../movie-detail/movie-detail.component";
 
 const routes: Routes = [
-  { path: 'movies', component: MovieComponent }
+  { path: "movies", component: MovieComponent },
+  { path: "movies/:type/:id", component: MovieDetailComponent },
 ];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class MovieRoutingModule { }
+export class MovieRoutingModule {}