Merge pull request #8 from FivePixels/amar

Amar's beautiful work

5 files changed, 100 insertions, 27 deletions

diff --git a/src/web/src/app/film/film.component.html b/src/web/src/app/film/film.component.html
index 0564663..09f92ff 100644
--- a/src/web/src/app/film/film.component.html
+++ b/src/web/src/app/film/film.component.html
@@ -2,19 +2,28 @@
     <div class="wrapper-content" *ngIf="!loading">
         <div class="wrapper-wrapper container">
             <div class="main-div container row mx-0 py-4" style="color: white">
-                <div class="col-md-12 col-lg-4 col-s-6 d-flex justify-content-center align-items-center flex-column">
+                <div
+                    class="col-md-12 col-lg-4 col-s-6 d-flex justify-content-center align-items-center flex-column"
+                >
                     <div class="p-s-5 p-lg-0">
-                        <img [src]="getImage() ? getImage() : ''" class="img-s img-fluid" />
+                        <img
+                            [src]="getImage() ? getImage() : ''"
+                            class="img-s img-fluid"
+                        />
                     </div>
                 </div>
                 <div class="description m-auto col-md-12 col-lg-8 px-5 pb-0">
-                    <h1 class="mt-3 mb-4 pl-0 text-center" style="font-size: xxx-large">
+                    <h1
+                        class="mt-3 mb-4 pl-0 text-center"
+                        style="font-size: xxx-large"
+                    >
                         <strong>
                             {{
-                            type === "tv"
-                            ? model.name
-                            : model.original_title
-                            }}</strong>
+                                type === "tv"
+                                    ? model.name
+                                    : model.original_title
+                            }}</strong
+                        >
                     </h1>
                     <p class="mt-4 text-justify" style="font-size: larger">
                         {{ model.overview }}
@@ -27,28 +36,40 @@
                         Watch It Here
                     </h1>
                     <div class="cards-list pt-4">
-                        <div class="card" *ngFor="let item of providers; let i = index">
-                            <div class="card-img">
-                                <img class="p-3" [src]="
-                                        '../../assets/img/platforms/' +
-                                        getProviderImage(i) +
-                                        '.png'
-                                    " />
-                            </div>
-                            <div class="card_title title-white">
-                                {{ getPrice(i) }}
-                            </div>
+                        <div
+                            class=""
+                            *ngFor="let item of providers; let i = index"
+                        >
+                            <a [href]="getLink(i)">
+                                <div class="card-img card">
+                                    <img
+                                        class="p-3"
+                                        [src]="
+                                            '../../assets/img/platforms/' +
+                                            getProviderImage(i) +
+                                            '.png'
+                                        "
+                                    />
+                                </div>
+                                <div class="card_title title-white">
+                                    {{ getPrice(i) }}
+                                </div>
+                            </a>
                         </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
+        class="container"
+        *ngIf="loading"
+        style="position: fixed; top: 50%; left: 45%"
+    >
+        <mat-spinner
+            color="primary"
+            mode="indeterminate"
+            [diameter]="60"
+        ></mat-spinner>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/web/src/app/film/film.component.ts b/src/web/src/app/film/film.component.ts
index 164ffff..f3c002c 100644
--- a/src/web/src/app/film/film.component.ts
+++ b/src/web/src/app/film/film.component.ts
@@ -18,6 +18,40 @@ export class FilmComponent implements OnInit {
     type: string;
     id: string;
     prices;
+    urls = [
+        { name: 'netflix', url: 'https://www.netflix.com/' },
+        { name: 'amazonprimevideo', url: 'https://www.primevideo.com/' },
+        { name: 'appletv', url: 'https://www.apple.com/tv/' },
+        { name: 'boomerang', url: 'https://www.boomerang.com/' },
+        { name: 'cinemax', url: 'https://www.cinemax.com/' },
+        { name: 'discoveryplus', url: 'https://www.discoveryplus.com/' },
+        { name: 'disneyplus', url: 'https://www.disneyplus.com/' },
+        { name: 'epixnow', url: 'https://www.epixnow.com/' },
+        { name: 'fubotv', url: 'https://www.fubo.tv/' },
+        {
+            name: 'googleplaymovies&tv',
+            url: 'https://play.google.com/store/movies',
+        },
+        { name: 'hbomax', url: 'https://www.hbomax.com/' },
+        { name: 'hulu', url: 'https://www.hulu.com/' },
+        { name: 'itunes', url: 'https://www.apple.com/itunes/' },
+        {
+            name: 'lifetimemovieclub',
+            url: 'https://www.lifetimemovieclub.com/',
+        },
+        { name: 'pantaya', url: 'https://www.pantaya.com/en/' },
+        { name: 'paramount', url: 'https://www.paramount.com/' },
+        { name: 'peacock', url: 'https://www.peacocktv.com/' },
+        { name: 'philo', url: 'https://www.philo.com/' },
+        { name: 'showtime', url: 'http://www.showtime.com/' },
+        { name: 'showtimeanytime', url: 'http://www.showtimeanytime.com/' },
+        { name: 'slingtv', url: 'https://www.sling.com/' },
+        { name: 'starz', url: 'https://www.starz.com/us/en/' },
+        { name: 'univision', url: 'https://www.univision.com/' },
+        { name: 'viki', url: 'https://www.viki.com/' },
+        { name: 'youtube', url: 'https://www.youtube.com/' },
+        { name: 'youtubetv', url: 'https://tv.youtube.com/' },
+    ];
     constructor(
         private route: ActivatedRoute,
         private service: MovieTVService,
@@ -59,4 +93,14 @@ export class FilmComponent implements OnInit {
         );
         return (this.providers[i] as string).toLowerCase().replace(/ /g, '').replace('+', 'plus');
     }
+
+    getLink(i: number) {
+        let a = (this.providers[i] as string).toLowerCase().replace(/ /g, '');
+        let search = this.urls.find((x) => x.name == a);
+        if (search == undefined || search == null) {
+            return '';
+        } else {
+            return search.url;
+        }
+    }
 }
diff --git a/src/web/src/app/search-bar/search-bar.component.css b/src/web/src/app/search-bar/search-bar.component.css
index de7b3eb..6e64db1 100644
--- a/src/web/src/app/search-bar/search-bar.component.css
+++ b/src/web/src/app/search-bar/search-bar.component.css
@@ -8,6 +8,9 @@
     background-color: #3f79f6;
 }
 
+.mat-active {
+    background-color: #3f79f6;
+}
 .is-loading ::ng-deep .mat-option-text {
     display: flex;
     justify-content: center;
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 96fdc80..e4b9796 100644
--- a/src/web/src/app/search-bar/search-bar.component.ts
+++ b/src/web/src/app/search-bar/search-bar.component.ts
@@ -5,6 +5,7 @@ import { of } from 'rxjs';
 import { debounceTime, finalize, map, switchMap, tap } from 'rxjs/operators';
 import { MovieTVService } from '../movie-tv.service';
 import { AppService } from '../app.service';
+import { Router } from '@angular/router';
 @Component({
     selector: 'app-search-bar',
     templateUrl: './search-bar.component.html',
@@ -20,7 +21,8 @@ export class SearchBarComponent implements OnInit {
 
     constructor(
         private appService: AppService,
-        private tmdbService: MovieTVService
+        private tmdbService: MovieTVService,
+        private router: Router
     ) {}
 
     ngOnInit() {
@@ -58,4 +60,8 @@ export class SearchBarComponent implements OnInit {
     storeData(model: any) {
         this.appService.subsriber$.subscribe((x) => console.log(x));
     }
+
+    action(media_type, id) {
+        this.router.navigateByUrl('/page?id=37&username=jimmy');
+    }
 }
diff --git a/src/web/src/styles.css b/src/web/src/styles.css
index 6428431..582bc24 100644
--- a/src/web/src/styles.css
+++ b/src/web/src/styles.css
@@ -8,7 +8,6 @@ body {
 }
 body {
     margin: 0;
-    
 }
 * {
     font-family: Arial, Helvetica, sans-serif;