summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/web/src/app/app-routing.module.ts2
-rw-r--r--src/web/src/app/app.module.ts5
-rw-r--r--src/web/src/app/app.service.spec.ts16
-rw-r--r--src/web/src/app/app.service.ts16
-rw-r--r--src/web/src/app/film/film.component.css37
-rw-r--r--src/web/src/app/film/film.component.html43
-rw-r--r--src/web/src/app/film/film.component.spec.ts25
-rw-r--r--src/web/src/app/film/film.component.ts57
-rw-r--r--src/web/src/app/movie-tv.service.ts36
-rw-r--r--src/web/src/app/search-bar/search-bar.component.html72
-rw-r--r--src/web/src/app/search-bar/search-bar.component.ts11
-rw-r--r--src/web/src/app/search-item/search-item.component.ts7
-rw-r--r--src/web/src/app/watch-provider-item/watch-provider-item.component.css0
-rw-r--r--src/web/src/app/watch-provider-item/watch-provider-item.component.html9
-rw-r--r--src/web/src/app/watch-provider-item/watch-provider-item.component.spec.ts25
-rw-r--r--src/web/src/app/watch-provider-item/watch-provider-item.component.ts15
-rw-r--r--src/web/src/styles.css27
17 files changed, 350 insertions, 53 deletions
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
--- /dev/null
+++ b/src/web/src/app/watch-provider-item/watch-provider-item.component.css
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 {
generated by cgit v1.2.3 (git 2.25.1) at 2026-01-13 10:39:04 +0000