Skip to content

Commit

Permalink
refactor(movies): convert to new template syntax
Browse files Browse the repository at this point in the history
  • Loading branch information
@eneajaho
eneajaho committed Nov 12, 2023
1 parent ed7789d commit c1f9c61
Show file tree
Hide file tree
Showing 3 changed files with 94 additions and 82 deletions.
41 changes: 22 additions & 19 deletions projects/movies/src/app/pages/movie-detail-page/movie-detail-page.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,25 +21,23 @@ <h1 data-uf="header-main">{{ movie.title }}</h1>
<h2 data-uf="header-sub">{{ movie.tagline }}</h2>
</header>
<section class="movie-detail--basic-infos">
<ui-star-rating
[rating]="movie.vote_average"
[showRating]="true"
></ui-star-rating>
<ui-star-rating [rating]="movie.vote_average" [showRating]="true" />
<div class="movie-detail--languages-runtime-release">
<strong>{{ movie.languages_runtime_release }}</strong>
</div>
</section>
<section>
<h3>The Genres</h3>
<div class="movie-detail--genres">
@for (genre of movie.genres; track genre.name) {
<a
class="movie-detail--genres-link"
*ngFor="let genre of movie.genres; trackBy: trackByGenre"
[routerLink]="['/list/genre/', genre.id]"
>
<fast-svg name="genre" style="margin-right: 0.5rem"></fast-svg>
<fast-svg name="genre" style="margin-right: 0.5rem" />
{{ genre.name }}
</a>
}
</div>
</section>
<section>
Expand Down Expand Up @@ -83,7 +81,9 @@ <h3>The Cast</h3>
/>
</picture>
</a>
<div *ngIf="ctx.loading" class="loader"></div>
@if (ctx.loading) {
<div class="loader"></div>
}
</div>
<button
aria-label="Scroll cast right"
Expand All @@ -97,29 +97,29 @@ <h3>The Cast</h3>
</div>
</section>
<section class="movie-detail--ad-section-links">
@if (movie.homepage) {
<a
*ngIf="movie.homepage"
class="btn"
target="_blank"
rel="noopener noreferrer"
[href]="movie.homepage"
>
Website
<fast-svg class="btn__icon" name="website"></fast-svg>
<fast-svg class="btn__icon" name="website" />
</a>
} @if (movie.imdb_id) {
<a
*ngIf="movie.imdb_id"
class="btn"
[target]="movie.target"
rel="noopener noreferrer"
[href]="movie.href"
>
IMDB
<fast-svg class="btn__icon" name="imdb"></fast-svg>
<fast-svg class="btn__icon" name="imdb" />
</a>
} @if (movie.videoUrl) {
<button
type="button"
*ngIf="movie.videoUrl"
class="btn"
(mouseover)="ui.iframe('load')"
(focus)="ui.iframe('load')"
Expand All @@ -128,8 +128,9 @@ <h3>The Cast</h3>
"
>
Trailer
<fast-svg class="btn__icon" name="play"></fast-svg>
<fast-svg class="btn__icon" name="play" />
</button>
}

<dialog class="video" #trailerDialog id="trailer-dialog">
<button
Expand Down Expand Up @@ -163,13 +164,14 @@ <h3>The Cast</h3>
class="btn primary-button"
(click)="back()"
>
<fast-svg class="btn__icon" name="back" size="1em"></fast-svg
>&nbsp;Back
<fast-svg class="btn__icon" name="back" size="1em" />&nbsp;Back
</button>
</section>
</div>
</ui-detail-grid>
<div class="loader" *ngIf="!movie"></div>
@if (!movie) {
<div class="loader"></div>
}
</ng-container>
</article>
<article class="recommendations">
Expand All @@ -184,8 +186,9 @@ <h2>Movies</h2>
(paginate)="paginateRecommendations()"
[movies]="ctx.results"
[withImgPriority]="0"
>
</ui-movie-list>
<div *ngIf="ctx.loading" class="loader"></div>
/>
@if (ctx.loading) {
<div class="loader"></div>
}
</ng-container>
</article>
104 changes: 53 additions & 51 deletions projects/movies/src/app/pages/person-detail-page/person-detail-page.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,50 @@
<article *rxLet="personCtx$; let personCtx">
<ng-container *ngIf="personCtx?.value as person; else loading">
<ui-detail-grid>
<div detailGridMedia>
<img
class="aspectRatio-2-3 fit-cover"
[ngSrc]="person.imgSrc"
[ngSrcset]="person.imgSrcset"
[sizes]="person.imgSizes"
[width]="person.imgWidth"
[height]="person.imgHeight"
priority="high"
alt="poster movie"
[title]="person?.name"
data-uf="hero-img"
/>
</div>
<div detailGridDescription>
<header>
<h1>{{ person.name }}</h1>
<h2>{{ person.birthday }}</h2>
</header>
<section>
<h3>The Biography</h3>
<p>{{ person.biography || 'There is no synopsis available...' }}</p>
</section>
<section class="movie-detail--ad-section-links">
<a
*ngIf="person.imdb_id"
class="btn"
target="_blank"
rel="noopener noreferrer"
[href]="'https://www.imdb.com/person/' + person.imdb_id"
>
IMDB
<fast-svg class="btn__icon" name="imdb"></fast-svg>
</a>
<button aria-label="Back" class="btn primary-button" (click)="back()">
<fast-svg name="back" size="1em"></fast-svg>&nbsp; Back
</button>
</section>
</div>
</ui-detail-grid>
</ng-container>
<ng-template #loading>
<div class="loader"></div>
</ng-template>
@if (personCtx?.value; as person) {
<ui-detail-grid>
<div detailGridMedia>
<img
class="aspectRatio-2-3 fit-cover"
[ngSrc]="person.imgSrc"
[ngSrcset]="person.imgSrcset"
[sizes]="person.imgSizes"
[width]="person.imgWidth"
[height]="person.imgHeight"
priority="high"
alt="poster movie"
[title]="person?.name"
data-uf="hero-img"
/>
</div>
<div detailGridDescription>
<header>
<h1>{{ person.name }}</h1>
<h2>{{ person.birthday }}</h2>
</header>
<section>
<h3>The Biography</h3>
<p>{{ person.biography || 'There is no synopsis available...' }}</p>
</section>
<section class="movie-detail--ad-section-links">
@if (person.imdb_id) {
<a
class="btn"
target="_blank"
rel="noopener noreferrer"
[href]="'https://www.imdb.com/person/' + person.imdb_id"
>
IMDB
<fast-svg class="btn__icon" name="imdb" />
</a>
}
<button aria-label="Back" class="btn primary-button" (click)="back()">
<fast-svg name="back" size="1em" />&nbsp; Back
</button>
</section>
</div>
</ui-detail-grid>
} @else {
<div class="loader"></div>
}
</article>
<article>
<header *rxLet="personCtx$; let p">
Expand All @@ -62,15 +62,16 @@ <h2>Movies</h2>
(click)="toggleSorting(true)"
/>
<ul class="options" [hidden]="!sorting.showSorting">
@for (option of sortOptions; track option) {
<li
[ngClass]="{ selected: option.name === sorting.activeSorting }"
[class.selected]="option.name === sorting.activeSorting"
class="option"
*ngFor="let option of sortOptions"
>
<button class="functionality-only-button" (click)="sortBy(option)">
{{ option.name }}
</button>
</li>
}
</ul>
<button
class="select-wrapper-overlay"
Expand All @@ -83,8 +84,9 @@ <h2>Movies</h2>
<ng-container
*rxLet="infiniteScrollRecommendations$; let ctx; strategy: 'immediate'"
>
<ui-movie-list (paginate)="paginate()" [movies]="ctx.results">
</ui-movie-list>
<div *ngIf="ctx.loading" class="loader"></div>
<ui-movie-list (paginate)="paginate()" [movies]="ctx.results" />
@if (ctx.loading) {
<div class="loader"></div>
}
</ng-container>
</article>
31 changes: 19 additions & 12 deletions projects/movies/src/app/ui/pattern/star-rating/star-rating.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,38 @@
import {ChangeDetectionStrategy, Component, Input, TrackByFunction, ViewEncapsulation,} from '@angular/core';
import {trackByIndex} from '../../../shared/cdk/track-by';
import {NgClass, NgFor, NgIf} from '@angular/common';
import {
ChangeDetectionStrategy,
Component,
Input,
TrackByFunction,
ViewEncapsulation,
} from '@angular/core';
import { trackByIndex } from '../../../shared/cdk/track-by';
import { NgClass } from '@angular/common';

const range = 10;
const numStars = 5;
const starsArray: number[] = new Array(numStars).fill(1);

@Component({
standalone: true,
imports: [NgFor, NgIf, NgClass],
imports: [NgClass],
selector: 'ui-star-rating',
template: `
<span class="tooltip">
{{ tooltipText }}
</span>
<div class="stars">
@for (fill of stars; track $index) {
<span
*ngFor="let fill of stars; trackBy: trackByIndex"
class="star"
[ngClass]="{
'star-half': fill === 0,
'star-empty': fill === -1
}"
>★</span
[ngClass]="{ 'star-half': fill === 0, 'star-empty': fill === -1 }"
>
★
</span>
}
</div>
<div class="rating-value" *ngIf="showRating">{{ rating }}</div>
@if (showRating) {
<div class="rating-value">{{ rating }}</div>
}
`,
styleUrls: [
'star-rating.component.scss',
Expand All @@ -43,7 +50,7 @@ export class StarRatingComponent {
trackByIndex: TrackByFunction<number> = trackByIndex();

private _rating = 5;
@Input({required: true})
@Input({ required: true })
set rating(rating: number) {
this._rating = rating || 0;

Expand Down

0 comments on commit c1f9c61

Please sign in to comment.