From 0a72790d6bebde7abce3a27b7b728301cc10395f Mon Sep 17 00:00:00 2001
From: Ab30657 <amar_ronaldo30657@yahoo.com>
Date: Sat, 10 Apr 2021 19:36:05 +0545
Subject: added film display page

---
 src/web/src/app/app-routing.module.ts              |  2 +
 src/web/src/app/app.module.ts                      |  5 ++
 src/web/src/app/app.service.spec.ts                | 16 +++++
 src/web/src/app/app.service.ts                     | 16 +++++
 src/web/src/app/film/film.component.css            | 37 +++++++++++
 src/web/src/app/film/film.component.html           | 43 +++++++++++++
 src/web/src/app/film/film.component.spec.ts        | 25 ++++++++
 src/web/src/app/film/film.component.ts             | 57 +++++++++++++++++
 src/web/src/app/movie-tv.service.ts                | 36 ++++++++++-
 .../src/app/search-bar/search-bar.component.html   | 72 ++++++++++++----------
 src/web/src/app/search-bar/search-bar.component.ts | 11 +++-
 .../src/app/search-item/search-item.component.ts   |  7 ++-
 .../watch-provider-item.component.css              |  0
 .../watch-provider-item.component.html             |  9 +++
 .../watch-provider-item.component.spec.ts          | 25 ++++++++
 .../watch-provider-item.component.ts               | 15 +++++
 src/web/src/styles.css                             | 27 ++++----
 17 files changed, 350 insertions(+), 53 deletions(-)
 create mode 100644 src/web/src/app/app.service.spec.ts
 create mode 100644 src/web/src/app/app.service.ts
 create mode 100644 src/web/src/app/film/film.component.css
 create mode 100644 src/web/src/app/film/film.component.html
 create mode 100644 src/web/src/app/film/film.component.spec.ts
 create mode 100644 src/web/src/app/film/film.component.ts
 create mode 100644 src/web/src/app/watch-provider-item/watch-provider-item.component.css
 create mode 100644 src/web/src/app/watch-provider-item/watch-provider-item.component.html
 create mode 100644 src/web/src/app/watch-provider-item/watch-provider-item.component.spec.ts
 create mode 100644 src/web/src/app/watch-provider-item/watch-provider-item.component.ts

(limited to 'src/web')

diff --git a/src/web/src/app/app-routing.module.ts b/src/web/src/app/app-routing.module.ts
index 7e7a8e1..1862469 100644
--- a/src/web/src/app/app-routing.module.ts
+++ b/src/web/src/app/app-routing.module.ts
@@ -1,10 +1,12 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { HomeComponent } from './home/home.component';
+import { FilmComponent } from './film/film.component';
 
 const routes: Routes = [
     { path: '', component: HomeComponent },
     { path: 'home', component: HomeComponent },
+    { path: ':type/:id', component: FilmComponent },
 ];
 
 @NgModule({
diff --git a/src/web/src/app/app.module.ts b/src/web/src/app/app.module.ts
index 36c927e..553bd95 100644
--- a/src/web/src/app/app.module.ts
+++ b/src/web/src/app/app.module.ts
@@ -14,12 +14,17 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { SearchItemComponent } from './search-item/search-item.component';
 import { HttpClientModule } from '@angular/common/http';
 import { MatInputModule } from '@angular/material/input';
+import { FilmComponent } from './film/film.component';
+import { WatchProviderItemComponent } from './watch-provider-item/watch-provider-item.component';
+
 @NgModule({
     declarations: [
         AppComponent,
         HomeComponent,
         SearchBarComponent,
         SearchItemComponent,
+        FilmComponent,
+        WatchProviderItemComponent,
     ],
     imports: [
         BrowserModule,
diff --git a/src/web/src/app/app.service.spec.ts b/src/web/src/app/app.service.spec.ts
new file mode 100644
index 0000000..3a3b746
--- /dev/null
+++ b/src/web/src/app/app.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AppService } from './app.service';
+
+describe('AppService', () => {
+  let service: AppService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AppService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/web/src/app/app.service.ts b/src/web/src/app/app.service.ts
new file mode 100644
index 0000000..7d82a25
--- /dev/null
+++ b/src/web/src/app/app.service.ts
@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class AppService {
+    observer = new Subject();
+
+    public subsriber$ = this.observer.asObservable();
+
+    emitData(data) {
+        this.observer.next(data);
+    }
+    constructor() {}
+}
diff --git a/src/web/src/app/film/film.component.css b/src/web/src/app/film/film.component.css
new file mode 100644
index 0000000..9b69d7c
--- /dev/null
+++ b/src/web/src/app/film/film.component.css
@@ -0,0 +1,37 @@
+.main-div-wrapper {
+    overflow: auto;
+    height: auto;
+    width: 100%;
+}
+.img-s {
+    width: 100%;
+    overflow-y: scroll;
+    z-index: 0;
+    position: relative;
+}
+.wrapper-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    z-index: 100;
+    top: 0;
+    position: fixed;
+    left: 0;
+    height: 100%;
+    padding: 5% 0px;
+}
+
+.main-div {
+    position: relative;
+}
+
+.description {
+    position: relative;
+}
+
+.wrapper-wrapper {
+    background-color: rgba(0, 0, 0, 0.8);
+    height: 100%;
+    font-size: 20px;
+}
diff --git a/src/web/src/app/film/film.component.html b/src/web/src/app/film/film.component.html
new file mode 100644
index 0000000..300494b
--- /dev/null
+++ b/src/web/src/app/film/film.component.html
@@ -0,0 +1,43 @@
+<div class="w-100 main-div-wrapper">
+    <img [src]="getImage() ? getImage() : ''" class="img-s" />
+
+    <div class="wrapper-content" *ngIf="!loading">
+        <div class="wrapper-wrapper container">
+            <div class="main-div container row" style="color: white">
+                <div class="description m-auto p-5">
+                    <h1 class="mt-3 mb-4 col-md-8 pl-0">
+                        <strong> {{ model.original_title }}</strong>
+                    </h1>
+                    <p class="mt-5">
+                        {{ model.overview }}
+                    </p>
+                </div>
+            </div>
+            <div class="h-auto container row">
+                <div class="main-div container p-5">
+                    <h1 class="" style="color: white">Watch it here</h1>
+                    <div class="cards-list pt-4">
+                        <div class="card">
+                            <div class="card-img">
+                                <img
+                                    class="p-3"
+                                    src="https://iconape.com/wp-content/png_logo_vector/google-play-movies-tv.png"
+                                />
+                            </div>
+                            <div class="card_title"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="wrapper-content" *ngIf="loading">
+        <div class="wrapper-wrapper container">
+            <div
+                class="container main-div d-flex justify-content-center align-items-center h-100"
+            >
+                <mat-spinner color="primary" mode="indeterminate"></mat-spinner>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/src/web/src/app/film/film.component.spec.ts b/src/web/src/app/film/film.component.spec.ts
new file mode 100644
index 0000000..07a76eb
--- /dev/null
+++ b/src/web/src/app/film/film.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FilmComponent } from './film.component';
+
+describe('FilmComponent', () => {
+  let component: FilmComponent;
+  let fixture: ComponentFixture<FilmComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FilmComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FilmComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/web/src/app/film/film.component.ts b/src/web/src/app/film/film.component.ts
new file mode 100644
index 0000000..2e25f41
--- /dev/null
+++ b/src/web/src/app/film/film.component.ts
@@ -0,0 +1,57 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { filter, map } from 'rxjs/operators';
+import { MovieTVService } from '../movie-tv.service';
+import { AppService } from '../app.service';
+
+@Component({
+    selector: 'app-film',
+    templateUrl: './film.component.html',
+    styleUrls: ['./film.component.css'],
+})
+export class FilmComponent implements OnInit {
+    providers = ['Netflix'];
+    model: any;
+    loading: boolean = true;
+    img: string;
+    type: string;
+    id: string;
+    constructor(
+        private route: ActivatedRoute,
+        private service: MovieTVService,
+        private appService: AppService
+    ) {}
+    ngOnInit(): void {
+        this.route.paramMap.subscribe((x) => {
+            this.type = x.get('type');
+            this.id = x.get('id');
+            //Start Scraping and loading the spinner
+            this.loading = false;
+
+            //this.data.getUsers().subscribe((data) => {
+            // this.users = data;
+            //});
+            ///
+        });
+        this.service.searchById(this.type, +this.id).subscribe((x: any) => {
+            this.model = x;
+            console.log(this.model);
+        });
+        console.log(this.model);
+        //
+        //Get Providers List
+        /*this.service
+            .getProviderList(this.model.media_type, this.model.id)
+            .pipe(
+                map((x: any) => {
+                    x.results.US.flatrate;
+                })
+            )
+            .subscribe((x) => (this.model.watch_providers = x));
+        console.log(this.model.watch_providers);*/
+    }
+
+    getImage() {
+        return 'https://image.tmdb.org/t/p/original' + this.model.poster_path;
+    }
+}
diff --git a/src/web/src/app/movie-tv.service.ts b/src/web/src/app/movie-tv.service.ts
index 26a0388..b46166f 100644
--- a/src/web/src/app/movie-tv.service.ts
+++ b/src/web/src/app/movie-tv.service.ts
@@ -6,11 +6,43 @@ import { tap } from 'rxjs/operators';
     providedIn: 'root',
 })
 export class MovieTVService {
-    baseUrl =
+    baseUrlSearch =
         'https://api.themoviedb.org/3/search/multi?api_key=1a0f418d8ae6d146e630345151a2cbfd&query=';
     constructor(private service: HttpClient) {}
 
     search(query: string) {
-        return this.service.get(this.baseUrl + query);
+        return this.service.get(this.baseUrlSearch + query);
+    }
+
+    searchById(type: string, id: number) {
+        if (type === 'tv') {
+            return this.service.get(
+                'https://api.themoviedb.org/3/tv/' +
+                    id +
+                    '?api_key=1a0f418d8ae6d146e630345151a2cbfd'
+            );
+        } else {
+            return this.service.get(
+                'https://api.themoviedb.org/3/movie/' +
+                    id +
+                    '?api_key=1a0f418d8ae6d146e630345151a2cbfd'
+            );
+        }
+    }
+
+    getProviderList(type: string, id: number) {
+        if (type === 'tv') {
+            return this.service.get(
+                'https://api.themoviedb.org/3/tv/' +
+                    id +
+                    '/watch/providers?api_key=1a0f418d8ae6d146e630345151a2cbfd'
+            );
+        } else {
+            return this.service.get(
+                'https://api.themoviedb.org/3/movie/' +
+                    id +
+                    '/watch/providers?api_key=1a0f418d8ae6d146e630345151a2cbfd'
+            );
+        }
     }
 }
diff --git a/src/web/src/app/search-bar/search-bar.component.html b/src/web/src/app/search-bar/search-bar.component.html
index 731ac97..08a58e0 100644
--- a/src/web/src/app/search-bar/search-bar.component.html
+++ b/src/web/src/app/search-bar/search-bar.component.html
@@ -1,35 +1,41 @@
 <form class="example-form">
-  <mat-form-field
-    style="width: 100%"
-    class="example-full-width"
-    appearance="outline"
-  >
-    <mat-label>Discover</mat-label>
-    <input
-      type="text"
-      placeholder="Movies / TV Shows"
-      aria-label="Number"
-      matInput
-      [formControl]="myControl"
-      [matAutocomplete]="auto"
-    />
-    <mat-icon matSuffix>search</mat-icon>
-    <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
-      <mat-option class="is-loading" *ngIf="isLoading && hasItems && !isEmpty">
-        <mat-spinner [color]="color" diameter="50"></mat-spinner>
-      </mat-option>
-      <mat-option *ngIf="!hasItems && !isEmpty"> No Movies found </mat-option>
-      <ng-container *ngIf="!isLoading && hasItems">
-        <mat-option
-          *ngFor="let option of options"
-          [value]="option.original_title"
-        >
-          <app-search-item
-            [model]="option"
-            routerLink="/film"
-          ></app-search-item>
-        </mat-option>
-      </ng-container>
-    </mat-autocomplete>
-  </mat-form-field>
+    <mat-form-field
+        style="width: 100%"
+        class="example-full-width"
+        appearance="outline"
+    >
+        <mat-label>Discover</mat-label>
+        <input
+            type="text"
+            placeholder="Movies / TV Shows"
+            aria-label="Number"
+            matInput
+            [formControl]="myControl"
+            [matAutocomplete]="auto"
+        />
+        <mat-icon matSuffix>search</mat-icon>
+        <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
+            <mat-option
+                class="is-loading"
+                *ngIf="isLoading && hasItems && !isEmpty"
+            >
+                <mat-spinner [color]="color" diameter="50"></mat-spinner>
+            </mat-option>
+            <mat-option *ngIf="!hasItems && !isEmpty">
+                No Movies found
+            </mat-option>
+            <ng-container *ngIf="!isLoading && hasItems">
+                <mat-option
+                    *ngFor="let option of options"
+                    [value]="option.original_title"
+                >
+                    <app-search-item
+                        (click)="storeData(option)"
+                        [model]="option"
+                        [routerLink]="['', option.media_type, option.id]"
+                    ></app-search-item>
+                </mat-option>
+            </ng-container>
+        </mat-autocomplete>
+    </mat-form-field>
 </form>
diff --git a/src/web/src/app/search-bar/search-bar.component.ts b/src/web/src/app/search-bar/search-bar.component.ts
index 29aa47d..96fdc80 100644
--- a/src/web/src/app/search-bar/search-bar.component.ts
+++ b/src/web/src/app/search-bar/search-bar.component.ts
@@ -4,6 +4,7 @@ import { ThemePalette } from '@angular/material/core';
 import { of } from 'rxjs';
 import { debounceTime, finalize, map, switchMap, tap } from 'rxjs/operators';
 import { MovieTVService } from '../movie-tv.service';
+import { AppService } from '../app.service';
 @Component({
     selector: 'app-search-bar',
     templateUrl: './search-bar.component.html',
@@ -17,7 +18,10 @@ export class SearchBarComponent implements OnInit {
     hasItems = true;
     isEmpty = false;
 
-    constructor(private tmdbService: MovieTVService) {}
+    constructor(
+        private appService: AppService,
+        private tmdbService: MovieTVService
+    ) {}
 
     ngOnInit() {
         this.myControl.valueChanges
@@ -42,7 +46,6 @@ export class SearchBarComponent implements OnInit {
                 })
             )
             .subscribe((results: any) => {
-                console.log(results);
                 this.hasItems = true;
                 if (results.length === 0) {
                     this.hasItems = false;
@@ -51,4 +54,8 @@ export class SearchBarComponent implements OnInit {
                 this.options = results.splice(0, 5);
             });
     }
+
+    storeData(model: any) {
+        this.appService.subsriber$.subscribe((x) => console.log(x));
+    }
 }
diff --git a/src/web/src/app/search-item/search-item.component.ts b/src/web/src/app/search-item/search-item.component.ts
index cf7d7b8..5780f85 100644
--- a/src/web/src/app/search-item/search-item.component.ts
+++ b/src/web/src/app/search-item/search-item.component.ts
@@ -1,5 +1,6 @@
 import { Input } from '@angular/core';
 import { Component, OnInit } from '@angular/core';
+import { AppService } from '../app.service';
 
 @Component({
     selector: 'app-search-item',
@@ -10,7 +11,7 @@ export class SearchItemComponent implements OnInit {
     @Input() model: any;
     isRated: boolean;
 
-    constructor() {}
+    constructor(private service: AppService) {}
 
     ngOnInit(): void {}
 
@@ -47,4 +48,8 @@ export class SearchItemComponent implements OnInit {
         this.isRated = true;
         return this.model.vote_average;
     }
+
+    storeData() {
+        this.service.emitData(this.model);
+    }
 }
diff --git a/src/web/src/app/watch-provider-item/watch-provider-item.component.css b/src/web/src/app/watch-provider-item/watch-provider-item.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/web/src/app/watch-provider-item/watch-provider-item.component.html b/src/web/src/app/watch-provider-item/watch-provider-item.component.html
new file mode 100644
index 0000000..3a75143
--- /dev/null
+++ b/src/web/src/app/watch-provider-item/watch-provider-item.component.html
@@ -0,0 +1,9 @@
+<div class="card">
+    <div class="card-img">
+        <img
+            class="img-fluid"
+            src="https://assets.stickpng.com/images/580b57fcd9996e24bc43c529.png "
+        />
+    </div>
+    <div class="card_title title-white"></div>
+</div>
diff --git a/src/web/src/app/watch-provider-item/watch-provider-item.component.spec.ts b/src/web/src/app/watch-provider-item/watch-provider-item.component.spec.ts
new file mode 100644
index 0000000..633af38
--- /dev/null
+++ b/src/web/src/app/watch-provider-item/watch-provider-item.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WatchProviderItemComponent } from './watch-provider-item.component';
+
+describe('WatchProviderItemComponent', () => {
+  let component: WatchProviderItemComponent;
+  let fixture: ComponentFixture<WatchProviderItemComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ WatchProviderItemComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WatchProviderItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/web/src/app/watch-provider-item/watch-provider-item.component.ts b/src/web/src/app/watch-provider-item/watch-provider-item.component.ts
new file mode 100644
index 0000000..890afa3
--- /dev/null
+++ b/src/web/src/app/watch-provider-item/watch-provider-item.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-watch-provider-item',
+  templateUrl: './watch-provider-item.component.html',
+  styleUrls: ['./watch-provider-item.component.css']
+})
+export class WatchProviderItemComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/web/src/styles.css b/src/web/src/styles.css
index ad89fd2..46e8be8 100644
--- a/src/web/src/styles.css
+++ b/src/web/src/styles.css
@@ -3,6 +3,7 @@
 html,
 body {
     height: 100%;
+    min-width: 512px;
 }
 body {
     margin: 0;
@@ -74,34 +75,31 @@ body {
 }
 
 .cards-list {
-    z-index: 0;
-    width: 100%;
     display: flex;
     justify-content: space-around;
+    width: 100%;
     flex-wrap: wrap;
 }
 
 .card {
-    margin: 30px auto;
-    width: 200px;
-    height: 200px;
-    border-radius: 40px;
-    box-shadow: 5px 5px 30px 7px rgba(0, 0, 0, 0.25),
-        -5px -5px 30px 7px rgba(0, 0, 0, 0.22);
     cursor: pointer;
-    transition: 0.4s;
+    width: 120px;
+    border-radius: 30px;
+    height: 120px;
+    box-shadow: 3px 3px 15px 5px rgba(0, 0, 0, 0.3);
+    transition: 0.3s;
 }
 
-.card .card_image {
+.card .card-img {
     width: inherit;
     height: inherit;
-    border-radius: 40px;
+    border-radius: 30px;
 }
 
-.card .card_image img {
+.card .card-img img {
     width: inherit;
     height: inherit;
-    border-radius: 40px;
+    border-radius: 30px;
     object-fit: contain;
 }
 
@@ -117,8 +115,7 @@ body {
 
 .card:hover {
     transform: scale(0.9, 0.9);
-    box-shadow: 5px 5px 30px 15px rgba(0, 0, 0, 0.25),
-        -5px -5px 30px 15px rgba(0, 0, 0, 0.22);
+    box-shadow: 3px 3px 30px 5px rgba(255, 255, 255, 0.3);
 }
 
 .title-white {
-- 
cgit v1.2.3