@ -9,9 +9,11 @@
< div class = "container" >
< div class = "row" >
< div class = "col-lg-10 offset-lg-2 col-md-8 offset-md-4 col-sm-7 offset-sm-5 col-6 offset-6" >
< h1 > {{movie.title}} < span * ngIf = "movie.releaseDate" class = " year align-middle"> ({{movie.releaseDate
< h1 > {{movie.title}} < span * ngIf = "movie.releaseDate" class = " grey-text align-middle"> ({{movie.releaseDate
| date:'yyyy'}})< / span >
< / h1 >
< h5 class = "tagline grey-text" > {{movie.tagline}}< / h5 >
< / div >
< / div >
< / div >
@ -22,7 +24,7 @@
< div class = "container" >
< div class = "row" >
< div class = "col-md-2 col-sm-3 hidden-xs" >
< div class = "sidebar affixable affix-top" style = "width: 173px;" >
< div class = "sidebar sidebar-poster affixable affix-top" style = "width: 173px;" >
< div class = "poster" >
< img class = "real" src = "https://image.tmdb.org/t/p/w300/{{movie.posterPath}}" alt = "Poster"
style="display: block;">
@ -34,7 +36,6 @@
<!-- Next to poster -->
< / div >
< div class = "row" >
@ -57,6 +58,19 @@
< small * ngIf = "movie.voteCount" > < strong > Votes:< / strong > {{movie.voteCount |
thousandShort: 1}}< / small >
< / div >
< div >
< small > < strong > Status:< / strong > {{movie.status}}< / small >
< / div >
< div >
< small > < strong > Runtime:< / strong > {{movie.runtime}} Minutes< / small >
< / div >
< div >
< small * ngIf = "movie.revenue" > < strong > Revenue:< / strong > {{movie.revenue | currency:
'USD'}}< / small >
< / div >
< div >
< small * ngIf = "movie.budget" > < strong > Budget:< / strong > {{movie.budget | currency: 'USD'}}< / small >
< / div >
< / mat-card-content >
< / mat-card >
@ -79,17 +93,101 @@
< / div >
< div class = "row card-spacer" >
< div class = "col-md-2" >
< div > < div >
< a * ngIf = "movie.homepage" class = "btn-spacing" href = "{{movie.homepage}}" target = "_blank"
mat-raised-button color="accent">Home Page< / a > < / div >
< div >
< a * ngIf = "movie.id" href = "https://www.themoviedb.org/movie/{{movie.id}}"
target="_blank" mat-raised-button class="btn-blue btn-spacing">The Movie DB< / a > < / div >
< div >
< a * ngIf = "movie.homepage" class = "btn-spacing" href = "{{movie.homepage}}" target = "_blank" mat-raised-button color = "accent" > Home Page< / a >
< a * ngIf = "movie.theMovieDbId" href = "https://www.themoviedb.org/movie/{{movie.theMovieDbId}}" target = "_blank" mat-raised-button class = "btn-blue btn-spacing" > The Movie DB< / a >
< a * ngIf = "movie.imdbId" href = "https://www.imdb.com/title/tt1727824/{{movie.imdbId}}" target = "_blank" mat-raised-button class = "imdb-color btn-spacing" > IMDb< / a >
< a * ngIf = "movie.imdbId" href = "https://www.imdb.com/title/tt1727824/{{movie.imdbId}}" target = "_blank"
mat-raised-button class="imdb-color btn-spacing">IMDb< / a > < / div >
< div >
< a * ngIf = "movie.videos.results.length > 0" mat-raised-button class = "btn-blue btn-spacing"
(click)="openDialog()">Trailer< / a > < / div >
< / div >
< / div >
< / div >
< div class = "row card-spacer" >
< div class = "col-12" >
< mat-accordion >
< mat-expansion-panel >
< mat-expansion-panel-header >
< mat-panel-title >
Recommendations
< / mat-panel-title >
< / mat-expansion-panel-header >
< div class = "row card-spacer" * ngIf = "movie.recommendations.results.length > 0" >
< div class = "col-md-2" * ngFor = "let r of movie.recommendations.results" >
< div class = "sidebar affixable affix-top preview-poster" >
< div class = "poster" >
< a [ routerLink ] = " ' / details / movie / ' + r . id " >
< img class = "real grow" matTooltip = "{{r.title}}" src = "https://image.tmdb.org/t/p/w300/{{r.poster_path}}"
alt="Poster" style="display: block;">
< / a >
< / div >
< / div >
< / div >
< / div >
< / mat-expansion-panel >
< mat-expansion-panel >
< mat-expansion-panel-header >
< mat-panel-title >
Similar
< / mat-panel-title >
< / mat-expansion-panel-header >
< div class = "row card-spacer" * ngIf = "movie.similar.results.length > 0" >
< div class = "col-md-2" * ngFor = "let r of movie.similar.results" >
< div class = "sidebar affixable affix-top preview-poster" >
< div class = "poster " >
< a [ routerLink ] = " ' / details / movie / ' + r . id " >
< img class = "real grow" matTooltip = "{{r.title}}" src = "https://image.tmdb.org/t/p/w300/{{r.poster_path}}"
alt="Poster" style="display: block;">
< / a >
< / div >
< / div >
< / div >
< / div >
< / mat-expansion-panel >
< mat-expansion-panel >
< mat-expansion-panel-header >
< mat-panel-title >
Videos
< / mat-panel-title >
< / mat-expansion-panel-header >
< div class = "row card-spacer" * ngIf = "movie.videos.results.length > 0" >
< div class = "col-md-6" * ngFor = "let video of movie.videos.results" >
< iframe width = "100%" height = "315px" [ src ] = " ' https: / / www . youtube . com / embed / ' + video . key | safe "
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>< / iframe >
< / div >
< / div >
< / mat-expansion-panel >
< / mat-accordion >
< / div >
< / div >
< / div >
< / section >
<!-- THIS IS THE YOUTUBE VIDEOS
< div * ngFor = "let video of movie.videos.results" >
< iframe width = "560" height = "315" [ src ] = " ' https: / / www . youtube . com / embed / ' + video . key | safe " frameborder = "0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>< / iframe >
< / div > -->