From 738c022f22f81d49afccb62a856cb6d141d42645 Mon Sep 17 00:00:00 2001 From: Cristopher Coronado Date: Sat, 2 Mar 2024 11:31:11 -0500 Subject: [PATCH] Migrate to the new contol flow (@if and @for) --- src/app/app.component.html | 24 +- .../home/components/home.component.html | 40 ++-- .../collection/collection.component.html | 20 +- .../components/details/movie.component.html | 199 ++++++++------- .../people/components/people.component.html | 66 ++--- .../people/models/popular-person.model.ts | 2 +- .../people/services/people.service.ts | 2 +- .../person/components/person.component.html | 225 +++++++++-------- .../features/tv/components/tv.component.html | 226 ++++++++++-------- .../generic-details.component.html | 28 +-- .../media-list/media-list.component.html | 62 ++--- .../media-poster/media-poster.component.html | 23 +- 12 files changed, 513 insertions(+), 404 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index 7c8fdaf..95a9c4d 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -2,15 +2,15 @@
  Movies Db + class="navbar-toggler" + type="button" + aria-controls="navbarContent" + [attr.aria-expanded]="!collapsed" + aria-label="Toggle navigation" + (click)="collapsed = !collapsed" + > + +
- + \ No newline at end of file diff --git a/src/app/features/home/components/home.component.html b/src/app/features/home/components/home.component.html index 4849f86..266b6dd 100644 --- a/src/app/features/home/components/home.component.html +++ b/src/app/features/home/components/home.component.html @@ -6,9 +6,11 @@

{{ 'Trending' | translate }}

-
- -
+ @for (media of trendingMediaToday; track media) { +
+ +
+ }
@@ -18,9 +20,11 @@

{{ 'Trending' | translate }}

-
- -
+ @for (media of trendingMediaThisWeek; track media) { +
+ +
+ }
@@ -38,9 +42,11 @@

{{ 'What\'s Popular' | translate }}

-
- -
+ @for (media of popularStreaming; track media) { +
+ +
+ }
@@ -50,9 +56,11 @@

{{ 'What\'s Popular' | translate }}

-
- -
+ @for (media of popularOnTV; track media) { +
+ +
+ }
@@ -62,9 +70,11 @@

{{ 'What\'s Popular' | translate }}

-
- -
+ @for (media of popularInTheaters; track media) { +
+ +
+ }
diff --git a/src/app/features/movie/components/collection/collection.component.html b/src/app/features/movie/components/collection/collection.component.html index 1aa996c..db28475 100644 --- a/src/app/features/movie/components/collection/collection.component.html +++ b/src/app/features/movie/components/collection/collection.component.html @@ -2,11 +2,13 @@

{{collection.name}}

-
- 0) { +
+ -
-
+
+
+ }
{{ 'Overview' | translate }}

{{collection.overview}}

@@ -18,11 +20,13 @@
{{ 'Overview' | translate }}

{{ 'Movies' | translate }}

-
-
- + @for (movie of collection.movies; track movie) { +
+
+ +
-
+ }
\ No newline at end of file diff --git a/src/app/features/movie/components/details/movie.component.html b/src/app/features/movie/components/details/movie.component.html index 829547d..07817f6 100644 --- a/src/app/features/movie/components/details/movie.component.html +++ b/src/app/features/movie/components/details/movie.component.html @@ -1,63 +1,81 @@ -

{{movie.title}} ({{movie.releaseDate | date:'yyyy'}})

+

{{movie.title}} @if (movie.releaseDate) { + ({{movie.releaseDate | date:'yyyy'}}) + }

- {{movie.certification}} {{movie.releaseDate | - date:'MM/dd/yyyy'}} ({{movie.originCountry}}) - {{movie.runtime | time}} + @if (movie.certification) { + {{movie.certification}} + } {{movie.releaseDate | + date:'MM/dd/yyyy'}} @if (movie.originCountry) { + ({{movie.originCountry}}) + } + @if (movie.runtime) { + {{movie.runtime | time}} + }

- - {{ genre.name }} - + @for (genre of movie.genres; track genre) { + + {{ genre.name }} + + }

- + @if(movie.voteAverage > 0) { + [titleFontSize]="20" [unitsFontSize]="15" [radius]="27" [outerStrokeWidth]="5">
- + } - {{ 'Play Trailer' | translate }} + }
-

{{movie.tagline}}

+ @if (movie.tagline) { +

{{movie.tagline}}

+ }
{{ 'Overview' | translate }}

{{movie.overview}}

-
-
- {{person.name}} - {{person.job | translate}} + @if (movie.people.length) { +
+ @for (person of movie.people; track person) { +
+ {{person.name}} + {{person.job | translate}} +
+ }
-
+ }
- + @if (movie.topBilledCast.length) {

{{ 'Top Billed Cast' | translate }}

-
- - - - + @for (cast of movie.topBilledCast; track cast) { +
+ + @if(cast.profilePath) { + + } + @else {
- + } -
{{cast.name}} @@ -65,70 +83,85 @@

{{ 'Top Billed Cast' | translate }}

{{cast.character}}
-
-
- - - -
-
-

{{ 'Part of the' | translate }} {{movie.collection.name}}

- {{ 'VIEW THE COLLECTION' | translate }} + }
- - +
+ } + + @if(movie.collection) {
- -
-

{{ 'Recommendations' | translate }}

-
- - - - - +
+

{{ 'Part of the' | translate }} {{movie.collection.name}}

+ {{ 'VIEW THE COLLECTION' | translate }} +
+ } + +
+ +
+

{{ 'Recommendations' | translate }}

+
+ @if(movie.recommendations.length){ + @for (r of movie.recommendations; track r) { + + @if(r.posterPath) { + + } + @else {
+ position: relative; top: 65px;">
- + } - - - -

- -
-
+ } + } + @else { +

+ }
+
+
-
-
{{ 'Status' | translate }} {{movie.status | translate}}
-
- {{ 'Production Company' | translate }} -
- -
- - {{ 'EmptyProductionCompany' | translate }} -
-
{{ 'Original Language' | translate }} {{movie.originalLanguage}}
-
{{ 'Budget' | translate }} {{movie.budget ? (movie.budget | currency) : '-'}}
-
{{ 'Revenue' | translate }} {{movie.revenue ? (movie.revenue | currency) : '-'}}
- -
- {{ 'Keywords' | translate }} -
- {{keyword}} +
+ @if (movie.status) { +
{{ 'Status' | translate }} {{movie.status | translate}}
+ } +
+ {{ 'Production Company' | translate }} + @if(movie.productionCompany) { +
+
- - {{ 'EmptyKeyworks' | translate }} -
-
+ } + @else { + {{ 'EmptyProductionCompany' | translate }} + }
- + @if (movie.originalLanguage) { +
{{ 'Original Language' | translate }} {{movie.originalLanguage}}
+ } +
{{ 'Budget' | translate }} {{movie.budget ? (movie.budget | currency) : '-'}}
+
{{ 'Revenue' | translate }} {{movie.revenue ? (movie.revenue | currency) : '-'}}
+ +
+ {{ 'Keywords' | translate }} + @if(movie.keywords.length) { +
+ @for (keyword of movie.keywords; track keyword) { + {{keyword}} + } +
+ } + @else { + {{ 'EmptyKeyworks' | translate }} + } +
+
+
+ \ No newline at end of file diff --git a/src/app/features/people/components/people.component.html b/src/app/features/people/components/people.component.html index 53674c1..d2c8636 100644 --- a/src/app/features/people/components/people.component.html +++ b/src/app/features/people/components/people.component.html @@ -1,38 +1,44 @@
-

{{ 'PopularPeople' | translate }}

+

{{ 'PopularPeople' | translate }}

-
- -
+
+ @if (maxResults) { + + } +
-
-
-
- - @if(person.profilePath){ - - } - @else{ -
-
-
- } - - -
- - {{person.name}} - - {{ person.knownFor }} -
+
+ @for (person of popularPeople; track person) { +
+
+ + @if(person.profilePath){ + + } + @else{ +
+
+
+ } + +
+ + {{person.name}} + + {{ person.knownFor }}
+
+ } +
-
- -
+
+ @if (maxResults) { + + } +
\ No newline at end of file diff --git a/src/app/features/people/models/popular-person.model.ts b/src/app/features/people/models/popular-person.model.ts index fc3e35f..cef740d 100644 --- a/src/app/features/people/models/popular-person.model.ts +++ b/src/app/features/people/models/popular-person.model.ts @@ -1,7 +1,7 @@ export interface PopularPerson { id: number; name: string; - gender: number; + gender: string; profilePath: string; knownFor: string[]; } diff --git a/src/app/features/people/services/people.service.ts b/src/app/features/people/services/people.service.ts index a94ce0c..b8a3af2 100644 --- a/src/app/features/people/services/people.service.ts +++ b/src/app/features/people/services/people.service.ts @@ -15,7 +15,7 @@ export class PeopleService extends TMDbService { return { id: person.id, name: person.name, - gender: person.gender, + gender: person.gender === 1 ? 'Female' : 'Male', profilePath: person.profile_path, knownFor: person.known_for.map((media: any) => media.title || media.name) }; diff --git a/src/app/features/person/components/person.component.html b/src/app/features/person/components/person.component.html index 7b9c544..cbfa818 100644 --- a/src/app/features/person/components/person.component.html +++ b/src/app/features/person/components/person.component.html @@ -1,112 +1,131 @@ -
+@if (person) { +
- - - -
-
-
- - -
{{ 'Personal Info' | translate }}
- -
-
- {{ 'Known For' | translate }} - {{ person.knownForDepartment | translate }} -
-
- {{ 'Known Credits' | translate }} - {{person.knownCredits}} -
-
- {{ 'Gender' | translate }} - {{ person.gender | translate }} -
-
- {{ 'Birthday' | translate }} - {{person.birthday | date}} ({{person.age}} years old) - - -
-
- {{ 'Day of Death' | translate }} - {{person.deathday | date}} ({{person.age}} years old) -
-
- {{ 'Place of Birth' | translate }} - {{person.placeOfBirth || '-'}} -
+ @if(person.profilePath) { + + } + @else { +
+
+
+
+ } +
{{ 'Personal Info' | translate }}
+
+
+ {{ 'Known For' | translate }} + {{ person.knownForDepartment | translate }} +
+
+ {{ 'Known Credits' | translate }} + {{person.knownCredits}} +
+
+ {{ 'Gender' | translate }} + {{ person.gender | translate }} +
+
+ {{ 'Birthday' | translate }} + @if (person.birthday) { + {{person.birthday | date}} @if(!person.deathday) {({{person.age}} years old)} + } + @if (!person.birthday) { + - + } +
+ @if (person.deathday) { +
+ {{ 'Day of Death' | translate }} + {{person.deathday | date}} ({{person.age}} years old) +
+ } +
+ {{ 'Place of Birth' | translate }} + {{person.placeOfBirth || '-'}}
+
-

{{person.name}}

-
{{ 'Biography' | translate }}
- - -

{{person.biography | slice:0:1000}}...

- {{ 'ShowMore' | translate}} - - -

{{person.biography}}

- - - - -

- - -
{{ 'Known For' | translate }}
-
-
-
- - - - -
- - {{media.title}} - -
-
+

{{person.name}}

+
{{ 'Biography' | translate }}
+ @if(person.biography) { + @if(person.biography.length > 1000 && !showFullBiography) { +

{{person.biography | slice:0:1000}}...

+ {{ 'ShowMore' | translate}} + } + @else { +

{{person.biography}}

+ } + } + @else { +

+ } +
{{ 'Known For' | translate }}
+
+
+ @for (media of person.knownFor; track media) { +
+ + + +
+ + {{media.title}} + +
+ }
- -
-

{{ 'Acting' | translate }}

-
-
-

- -

-
-
- -
    -
  • - {{ media.title }} ({{media.releaseDate | date:'MMMM'}}) - - - {{ 'as' | translate }} {{ media.character }} - - - -
    - ({{job.episodeCount}} {{ job.episodeCount > 1 ? ('episodes' | translate) : ('episode' | translate) }}) - {{ 'as' | translate }} - {{ job.job }} -
    -     -     -
    • -
- -
-
-
+
+
+

{{ 'Acting' | translate }}

+
+ @for (credit of person.creditsList; track credit) { +
+

+ +

+
+
+ +
    + @for (media of credit.credits; track media) { +
  • + {{ media.title }} ({{media.releaseDate | date:'MMMM'}}) + + @if(media.mediaType === 'movie') { + @if (media.character) { + {{ 'as' | translate }} {{ media.character }} + } + } + @else { + @for (job of media.jobs; track job) { +
    + @if (job.episodeCount) { + ({{job.episodeCount}} {{ job.episodeCount > 1 ? ('episodes' | translate) : ('episode' | translate) }}) + } + @if (job.job) { + {{ 'as' | translate }} + } + @if (job.job) { + {{ job.job }} + } +
    + } + } +     +
    • + } +
+ +
+
+ }
+
-
\ No newline at end of file +
+} \ No newline at end of file diff --git a/src/app/features/tv/components/tv.component.html b/src/app/features/tv/components/tv.component.html index 549ac4a..60c297a 100644 --- a/src/app/features/tv/components/tv.component.html +++ b/src/app/features/tv/components/tv.component.html @@ -1,117 +1,145 @@ - -

{{tv.title}} ({{tv.firstAirDate | date:'yyyy'}})

-
- {{tv.certification}} {{tv.firstAirDate | - date:'MM/dd/yyyy'}} -
+ +

{{tv.title}} @if (tv.firstAirDate) { + ({{tv.firstAirDate | date:'yyyy'}}) + }

+
+ @if (tv.certification) { + {{tv.certification}} + } {{tv.firstAirDate | + date:'MM/dd/yyyy'}} +
-

- - {{ genre.name }} - -

+

+ @for (genre of tv.genres; track genre) { + + {{ genre.name }} + + } +

-
- - -
- +
+ @if(tv.voteAverage > 0) { + +
+ } - {{ 'Play Trailer' | translate }} -
+ @if (tv.trailerKey) { + {{ 'Play Trailer' | translate }} + } +
-

{{tv.tagline}}

-
{{ 'Overview' | translate }}
-

{{tv.overview}}

+ @if (tv.tagline) { +

{{tv.tagline}}

+ } +
{{ 'Overview' | translate }}
+

{{tv.overview}}

-
-
- {{person.name}} - {{ person.job | translate }} + @if (tv.people.length) { +
+ @for (person of tv.people; track person) { +
+ {{person.name}} + {{ person.job | translate }}
+ }
+ } -
-
- -
-

{{ 'Series Cast' | translate }}

-
-
-
- - - - -
-
-
-
- - - -
- - {{cast.name}} - - {{cast.character}} - {{cast.episodeCount}} {{ cast.episodeCount > 1 ? ('episodes' | translate) : ('episode' | translate) }} -
-
+
+
+ @if (tv.topBilledCast.length) { +
+

{{ 'Series Cast' | translate }}

+
+
+ @for (cast of tv.topBilledCast; track cast) { +
+ + @if(cast.profilePath) { + + } + @else { +
+
-
- - -
- -
-

{{ 'Recommendations' | translate }}

-
- - - - - - - -

- -
+
+ } + +
+ + {{cast.name}} + + {{cast.character}} + {{cast.episodeCount}} {{ cast.episodeCount > 1 ? ('episodes' | translate) : ('episode' | translate) }} +
+ }
+
+ } -
-
{{ 'Status' | translate }} {{tv.status}}
-
- {{ 'Network' | translate }} -
- -
- - {{ 'EmptyProductionCompany' | translate }} -
-
{{ 'Type' | translate }} {{tv.type}}
-
{{ 'Original Language' | translate }} {{tv.originalLanguage}}
-
- {{ 'Keywords' | translate }} -
- {{keyword}} -
+
- {{ 'EmptyKeyworks' | translate }} -
-
+
+

{{ 'Recommendations' | translate }}

+
+ @if(tv.recommendations.length) { + @for (r of tv.recommendations; track r) { + + + + } + } + @else { +

+ } +
- +
+ +
+ @if (tv.status) { +
{{ 'Status' | translate }} {{tv.status}}
+ } +
+ {{ 'Network' | translate }} + @if(tv.network) { +
+ +
+ } + @else { + {{ 'EmptyProductionCompany' | translate }} + } +
+ @if (tv.type) { +
{{ 'Type' | translate }} {{tv.type}}
+ } + @if (tv.originalLanguage) { +
{{ 'Original Language' | translate }} {{tv.originalLanguage}}
+ } +
+ {{ 'Keywords' | translate }} + @if(tv.keywords.length) { +
+ @for (keyword of tv.keywords; track keyword) { + {{keyword}} + } +
+ } + @else { + {{ 'EmptyKeyworks' | translate }} + } +
+
+
+ \ No newline at end of file diff --git a/src/app/shared/components/generic-details/generic-details.component.html b/src/app/shared/components/generic-details/generic-details.component.html index f1ed8c0..cb67018 100644 --- a/src/app/shared/components/generic-details/generic-details.component.html +++ b/src/app/shared/components/generic-details/generic-details.component.html @@ -1,25 +1,25 @@ -
-
-
-
- - - +@if (data) { +
+
+
+
+ @if(data.posterPath) { + + } + @else {
- + }
-
+ [ngTemplateOutletContext]="{ data: data, contrastColor: contrastColor }">
- -
\ No newline at end of file + [ngTemplateOutletContext]="{ data: data, posterImgDominantColor: posterImgDominantColor }"> +
+} \ No newline at end of file diff --git a/src/app/shared/components/media-list/media-list.component.html b/src/app/shared/components/media-list/media-list.component.html index f77e8b0..a313ca1 100644 --- a/src/app/shared/components/media-list/media-list.component.html +++ b/src/app/shared/components/media-list/media-list.component.html @@ -1,36 +1,40 @@
-
- - -
- -
- -
- -
- -
- -
+
+ + +
+ +
+ +
+ @if (maxResults) { + + } +
+ +
+ @if(mediaList.length) { + @for (movie of mediaList; track movie) { +
- - - - - - + } + } + @else { + + } +
-
- -
-
\ No newline at end of file +
+ @if (maxResults) { + + } +
+
\ No newline at end of file diff --git a/src/app/shared/components/media-poster/media-poster.component.html b/src/app/shared/components/media-poster/media-poster.component.html index b25148e..7a226de 100644 --- a/src/app/shared/components/media-poster/media-poster.component.html +++ b/src/app/shared/components/media-poster/media-poster.component.html @@ -2,16 +2,17 @@ - + -
- - - - +
+ @if(media.voteAverage > 0) { + + } + @else { + + }
@@ -20,7 +21,9 @@
{{media.title}} -

{{media[dateKey] | date}}

+ @if (media[dateKey] ) { +

{{media[dateKey] | date}}

+ }