diff --git a/frontend/src/app/components/home/browse/browse.component.html b/frontend/src/app/components/home/browse/browse.component.html index 2571675..7116474 100644 --- a/frontend/src/app/components/home/browse/browse.component.html +++ b/frontend/src/app/components/home/browse/browse.component.html @@ -2,7 +2,10 @@ @if (movies.length > 0) { @if (playMovie === "") { - +
diff --git a/frontend/src/app/components/home/browse/browse.component.scss b/frontend/src/app/components/home/browse/browse.component.scss index 9d245f3..6c63c1b 100644 --- a/frontend/src/app/components/home/browse/browse.component.scss +++ b/frontend/src/app/components/home/browse/browse.component.scss @@ -39,7 +39,7 @@ section { justify-content: space-between; align-items: center; padding: 24px 48px; - background: rgba(0, 0, 0, 0.5); + background: rgba($black, 0.5); z-index: 1001; opacity: 0; transition: opacity 300ms ease-in-out; @@ -140,6 +140,12 @@ section { /*------------- RESPONSIVE -------------*/ +@media screen and (max-width: 600px) { + .video-header { + padding: 12px 24px; + } +} + @media screen and (max-width: 550px) { form { flex-direction: column; diff --git a/frontend/src/app/components/home/browse/browse.component.ts b/frontend/src/app/components/home/browse/browse.component.ts index 1d2e446..1a16239 100644 --- a/frontend/src/app/components/home/browse/browse.component.ts +++ b/frontend/src/app/components/home/browse/browse.component.ts @@ -50,6 +50,14 @@ export class BrowseComponent implements OnInit { } } + onMoviesChange(updatedMovies: any[]) { + if (this.checkScreenWidth()) { + this.loadRandomMovie(); + } else { + this.currentMovie = updatedMovies; + } + } + checkScreenWidth() { return (this.isWideScreen = window.innerWidth > 600); } diff --git a/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.html b/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.html index b541775..14c5104 100644 --- a/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.html +++ b/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.html @@ -41,7 +41,7 @@ *ngIf="!screenWidth" [imgPath]="'back'" [imgRadius]="'24px'" - (click)="backToCategory()" + (click)="backToCategory([])" > (); + @Output() moviesChange = new EventEmitter(); environmentBaseUrl: string = environment.baseUrl; movieIsUploaded: { [resolution: string]: boolean } = { @@ -57,11 +58,11 @@ export class HeroBannerComponent { ); } + backToCategory(newMovies: any[]) { + this.moviesChange.emit(newMovies); + } + playMovieId(videoPath: string) { this.playMovie.emit(videoPath); } - - backToCategory() { - window.location.href = '/browse/'; - } } diff --git a/frontend/src/app/shared/components/header/header.component.html b/frontend/src/app/shared/components/header/header.component.html index b479a80..12f5967 100644 --- a/frontend/src/app/shared/components/header/header.component.html +++ b/frontend/src/app/shared/components/header/header.component.html @@ -1,6 +1,6 @@
@if (browse) { -