summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/web/src/app/home/home.component.html2
-rw-r--r--src/web/src/app/movie-tv.service.ts6
-rw-r--r--src/web/src/app/search-bar/search-bar.component.ts20
-rw-r--r--src/web/src/app/search-item/search-item.component.css14
-rw-r--r--src/web/src/app/search-item/search-item.component.html50
-rw-r--r--src/web/src/app/search-item/search-item.component.ts2
6 files changed, 48 insertions, 46 deletions
diff --git a/src/web/src/app/home/home.component.html b/src/web/src/app/home/home.component.html
index 6d65871..d32cdaa 100644
--- a/src/web/src/app/home/home.component.html
+++ b/src/web/src/app/home/home.component.html
@@ -1,6 +1,6 @@
<div class="container h-100">
<div class="row h-100">
- <div class="offset-lg-1 offset-md-2 mt-5 col-lg-10 col-md-8 col-sm-12">
+ <div class="offset-lg-1 offset-xs-2 mt-5 col-lg-10 col-xs-8">
<app-search-bar></app-search-bar>
</div>
</div>
diff --git a/src/web/src/app/movie-tv.service.ts b/src/web/src/app/movie-tv.service.ts
index 3e416d4..26a0388 100644
--- a/src/web/src/app/movie-tv.service.ts
+++ b/src/web/src/app/movie-tv.service.ts
@@ -11,10 +11,6 @@ export class MovieTVService {
constructor(private service: HttpClient) {}
search(query: string) {
- return this.service.get(this.baseUrl + query).pipe(
- tap((response) => {
- return response;
- })
- );
+ return this.service.get(this.baseUrl + query);
}
}
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 8884717..29aa47d 100644
--- a/src/web/src/app/search-bar/search-bar.component.ts
+++ b/src/web/src/app/search-bar/search-bar.component.ts
@@ -11,18 +11,15 @@ import { MovieTVService } from '../movie-tv.service';
})
export class SearchBarComponent implements OnInit {
myControl = new FormControl();
- keyword = 'robot';
- isLoading: boolean;
color: ThemePalette = 'accent';
+ isLoading: boolean;
options;
- baseUrl =
- 'https://api.themoviedb.org/3/search/movie?api_key=b745fd575abc6a839db385885fb2aee0&query=';
- hasItems: boolean = true;
- isEmpty: boolean = false;
+ hasItems = true;
+ isEmpty = false;
- constructor(private movieservice: MovieTVService) {}
+ constructor(private tmdbService: MovieTVService) {}
- ngOnInit(): void {
+ ngOnInit() {
this.myControl.valueChanges
.pipe(
debounceTime(1000),
@@ -30,9 +27,9 @@ export class SearchBarComponent implements OnInit {
switchMap((value) => {
if (value) {
this.isEmpty = false;
- return this.movieservice.search(value).pipe(
- map((response: any) =>
- response.results.filter(
+ return this.tmdbService.search(value).pipe(
+ map((values: any) =>
+ values.results.filter(
(x) => x.media_type !== 'person'
)
),
@@ -45,6 +42,7 @@ export class SearchBarComponent implements OnInit {
})
)
.subscribe((results: any) => {
+ console.log(results);
this.hasItems = true;
if (results.length === 0) {
this.hasItems = false;
diff --git a/src/web/src/app/search-item/search-item.component.css b/src/web/src/app/search-item/search-item.component.css
index e69de29..5a92152 100644
--- a/src/web/src/app/search-item/search-item.component.css
+++ b/src/web/src/app/search-item/search-item.component.css
@@ -0,0 +1,14 @@
+.example-option-img {
+ width: 70px;
+}
+
+.year-wrapper {
+ margin-top: 10px;
+}
+
+.year-wrapper-content {
+ background-color: white;
+ color: #3f51b5;
+ padding: 5px;
+ box-sizing: border-box;
+}
diff --git a/src/web/src/app/search-item/search-item.component.html b/src/web/src/app/search-item/search-item.component.html
index 7d43bff..59f7020 100644
--- a/src/web/src/app/search-item/search-item.component.html
+++ b/src/web/src/app/search-item/search-item.component.html
@@ -1,34 +1,26 @@
<div class="row p-0">
- <div class="col-md-2 text-center p-1">
- <img class="example-option-img" [src]="getImage()" width="70px" />
- </div>
- <div class="searchitem-text col-md-8">
- <div class="movie-title font-weight-bold text-uppercase">
- {{ getTitle() }}
+ <div class="col-md-2 col-sm-2 text-center p-1">
+ <img [src]="getImage()" alt="Not Found" class="example-option-img" />
</div>
- <div class="pubYear" style="margin-top: 10px">
- <strong></strong>
-
- <small
- style="
- background-color: white;
- color: #3f51b5;
- padding: 5px;
- box-sizing: border-box;
- "
- >{{ getYear() }} | {{ model.media_type | titlecase }}</small
- >
+ <div class="search-item-text col-sm-8 col-md-8">
+ <div class="movie-title font-weight-bold text-uppercase">
+ {{ getTitle() }}
+ </div>
+ <div class="year-wrapper">
+ <small class="year-wrapper-content">
+ {{ getYear() }} | {{ model.media_type | titlecase }}
+ </small>
+ </div>
</div>
- </div>
- <div class="rating col-md-2 pl-0 pr-1">
- <span class="material-icons mt-3"> star_rate </span>
- <div class="" style="line-height: 0.9rem">
- <strong
- >{{ getRating()
- }}<small class="d-md-none d-lg-inline-block" *ngIf="isRated"
- >/10</small
- ></strong
- >
+ <div class="rating col-sm-2 col-md-2 pl-0 pr-1">
+ <span class="material-icons mt-3">star_rate</span>
+ <div class="rating-content">
+ <strong>
+ {{ getRating() }}
+ <small class="d-sm-none d-lg-inline-block" *ngIf="isRated">
+ /10
+ </small>
+ </strong>
+ </div>
</div>
- </div>
</div>
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 f731601..cf7d7b8 100644
--- a/src/web/src/app/search-item/search-item.component.ts
+++ b/src/web/src/app/search-item/search-item.component.ts
@@ -9,9 +9,11 @@ import { Component, OnInit } from '@angular/core';
export class SearchItemComponent implements OnInit {
@Input() model: any;
isRated: boolean;
+
constructor() {}
ngOnInit(): void {}
+
getImage() {
return 'https://image.tmdb.org/t/p/original' + this.model.poster_path;
}
generated by cgit v1.2.3 (git 2.25.1) at 2026-01-13 10:37:49 +0000