github/Ombi
1
0
Fork 0
mirror of https://github.com/Ombi-app/Ombi.git synced 2025-08-19 12:59:39 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #4585 from sephrat/fix-subscribe

Browse source 
Fix subscribe button for movies
This commit is contained in:
Jamie 2022-04-13 20:49:54 +01:00 • committed by GitHub
commit 9c9814576c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 142 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/Ombi.Core/Engine/MovieRequestEngine.cs
View file

@ -251,7 +251,7 @@ namespace Ombi.Core.Engine
var requests = await (OrderMovies(allRequests, orderFilter.OrderType)).Skip(position).Take(count) var requests = await (OrderMovies(allRequests, orderFilter.OrderType)).Skip(position).Take(count)
.ToListAsync(); .ToListAsync();
await CheckForSubscription(shouldHide, requests); await CheckForSubscription(shouldHide.UserId, requests);
return new RequestsViewModel<MovieRequests> return new RequestsViewModel<MovieRequests>
{ {
Collection = requests, Collection = requests,
@ -295,7 +295,7 @@ namespace Ombi.Core.Engine
var total = requests.Count(); var total = requests.Count();
requests = requests.Skip(position).Take(count).ToList(); requests = requests.Skip(position).Take(count).ToList();
await CheckForSubscription(shouldHide, requests); await CheckForSubscription(shouldHide.UserId, requests);
return new RequestsViewModel<MovieRequests> return new RequestsViewModel<MovieRequests>
{ {
Collection = requests, Collection = requests,
@ -380,7 +380,7 @@ namespace Ombi.Core.Engine
// TODO fix this so we execute this on the server // TODO fix this so we execute this on the server
requests = requests.Skip(position).Take(count).ToList(); requests = requests.Skip(position).Take(count).ToList();
await CheckForSubscription(shouldHide, requests); await CheckForSubscription(shouldHide.UserId, requests);
return new RequestsViewModel<MovieRequests> return new RequestsViewModel<MovieRequests>
{ {
Collection = requests, Collection = requests,
@ -423,7 +423,7 @@ namespace Ombi.Core.Engine
var total = requests.Count(); var total = requests.Count();
requests = requests.Skip(position).Take(count).ToList(); requests = requests.Skip(position).Take(count).ToList();
await CheckForSubscription(shouldHide, requests); await CheckForSubscription(shouldHide.UserId, requests);
return new RequestsViewModel<MovieRequests> return new RequestsViewModel<MovieRequests>
{ {
Collection = requests, Collection = requests,
@ -505,7 +505,7 @@ namespace Ombi.Core.Engine
allRequests = await MovieRepository.GetWithUser().ToListAsync(); allRequests = await MovieRepository.GetWithUser().ToListAsync();
} }
await CheckForSubscription(shouldHide, allRequests); await CheckForSubscription(shouldHide.UserId, allRequests);
return allRequests; return allRequests;
} }
@ -513,21 +513,21 @@ namespace Ombi.Core.Engine
public async Task<MovieRequests> GetRequest(int requestId) public async Task<MovieRequests> GetRequest(int requestId)
{ {
var request = await MovieRepository.GetWithUser().Where(x => x.Id == requestId).FirstOrDefaultAsync(); var request = await MovieRepository.GetWithUser().Where(x => x.Id == requestId).FirstOrDefaultAsync();
await CheckForSubscription(new HideResult(), new List<MovieRequests> { request }); await CheckForSubscription((await GetUser()).Id, new List<MovieRequests> { request });
return request; return request;
} }
private async Task CheckForSubscription(HideResult shouldHide, List<MovieRequests> movieRequests) private async Task CheckForSubscription(string UserId, List<MovieRequests> movieRequests)
{ {
var requestIds = movieRequests.Select(x => x.Id); var requestIds = movieRequests.Select(x => x.Id);
var sub = await _subscriptionRepository.GetAll().Where(s => var sub = await _subscriptionRepository.GetAll().Where(s =>
s.UserId == shouldHide.UserId && requestIds.Contains(s.RequestId) && s.RequestType == RequestType.Movie) s.UserId == UserId && requestIds.Contains(s.RequestId) && s.RequestType == RequestType.Movie)
.ToListAsync(); .ToListAsync();
foreach (var x in movieRequests) foreach (var x in movieRequests)
{ {
x.PosterPath = PosterPathHelper.FixPosterPath(x.PosterPath); x.PosterPath = PosterPathHelper.FixPosterPath(x.PosterPath);
if (shouldHide.UserId == x.RequestedUserId) if (UserId == x.RequestedUserId)
{ {
x.ShowSubscribe = false; x.ShowSubscribe = false;
} }
@ -559,7 +559,7 @@ namespace Ombi.Core.Engine
} }
var results = allRequests.Where(x => x.Title.Contains(search, CompareOptions.IgnoreCase)).ToList(); var results = allRequests.Where(x => x.Title.Contains(search, CompareOptions.IgnoreCase)).ToList();
await CheckForSubscription(shouldHide, results); await CheckForSubscription(shouldHide.UserId, results);
return results; return results;
} }

4
src/Ombi.Core/Models/Search/SearchViewModel.cs
View file

@ -1,4 +1,5 @@
using System.ComponentModel.DataAnnotations.Schema; using System;
using System.ComponentModel.DataAnnotations.Schema;
using Ombi.Store.Entities; using Ombi.Store.Entities;
namespace Ombi.Core.Models.Search namespace Ombi.Core.Models.Search
@ -32,6 +33,7 @@ namespace Ombi.Core.Models.Search
public string TheMovieDbId { get; set; } public string TheMovieDbId { get; set; }
[NotMapped] [NotMapped]
[Obsolete("Use request service instead")]
public bool Subscribed { get; set; } public bool Subscribed { get; set; }
[NotMapped] [NotMapped]
public bool ShowSubscribe { get; set; } public bool ShowSubscribe { get; set; }

231
src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html
View file

@ -4,30 +4,18 @@
<div *ngIf="movie" class="main-content-container"> <div *ngIf="movie" class="main-content-container">
<top-banner [background]="movie.background" [available]="movie.available" [title]="movie.title" [releaseDate]="movie.releaseDate" [tagline]="movie.tagline"></top-banner> <top-banner [background]="movie.background" [available]="movie.available" [title]="movie.title"
[releaseDate]="movie.releaseDate" [tagline]="movie.tagline"></top-banner>
<div class="social-icons-container"> <div class="social-icons-container">
<social-icons <social-icons [homepage]="movie.homepage" [theMoviedbId]="movie.id"
[homepage]="movie.homepage" [hasTrailer]="movie.videos?.results?.length > 0" [imdbId]="movie.imdbId"
[theMoviedbId]="movie.id" [twitter]="movie.externalIds.twitterId" [facebook]="movie.externalIds.facebookId"
[hasTrailer]="movie.videos?.results?.length > 0" [instagram]="movie.externalIds.instagramId" [available]="movie.available" [plexUrl]="movie.plexUrl"
[imdbId]="movie.imdbId" [embyUrl]="movie.embyUrl" [jellyfinUrl]="movie.jellyfinUrl" [isAdmin]="isAdmin"
[twitter]="movie.externalIds.twitterId" [canShowAdvanced]="showAdvanced && movieRequest" [type]="requestType" [has4KRequest]="movie.has4KRequest"
[facebook]="movie.externalIds.facebookId" (openTrailer)="openDialog()" (onAdvancedOptions)="openAdvancedOptions()"
[instagram]="movie.externalIds.instagramId" (onReProcessRequest)="reProcessRequest(false)" (onReProcess4KRequest)="reProcessRequest(true)">
[available]="movie.available"
[plexUrl]="movie.plexUrl"
[embyUrl]="movie.embyUrl"
[jellyfinUrl]="movie.jellyfinUrl"
[isAdmin]="isAdmin"
[canShowAdvanced]="showAdvanced && movieRequest"
[type]="requestType"
[has4KRequest]="movie.has4KRequest"
(openTrailer)="openDialog()"
(onAdvancedOptions)="openAdvancedOptions()"
(onReProcessRequest)="reProcessRequest(false)"
(onReProcess4KRequest)="reProcessRequest(true)"
>
</social-icons> </social-icons>
</div> </div>
@ -43,118 +31,147 @@
<div class="details-button-container"> <div class="details-button-container">
<div class="col-12 media-row"> <div class="col-12 media-row">
<span *ngIf="movie.available || movie.available4K"> <span *ngIf="movie.available || movie.available4K">
<a id="viewOnPlexButton" *ngIf="movie.plexUrl" href="{{movie.plexUrl}}" mat-raised-button target="_blank" class="btn-spacing viewon-btn plex"> <a id="viewOnPlexButton" *ngIf="movie.plexUrl" href="{{movie.plexUrl}}" mat-raised-button
target="_blank" class="btn-spacing viewon-btn plex">
{{'Search.ViewOnPlex' | translate}} {{'Search.ViewOnPlex' | translate}}
<i class="far fa-play-circle fa-2x"></i> <i class="far fa-play-circle fa-2x"></i>
</a> </a>
<a id="viewOnEmbyButton" *ngIf="movie.embyUrl" href="{{movie.embyUrl}}" mat-raised-button target="_blank" class="btn-spacing viewon-btn emby"> <a id="viewOnEmbyButton" *ngIf="movie.embyUrl" href="{{movie.embyUrl}}" mat-raised-button
target="_blank" class="btn-spacing viewon-btn emby">
{{'Search.ViewOnEmby' | translate}} {{'Search.ViewOnEmby' | translate}}
<i class="far fa-play-circle fa-2x"></i> <i class="far fa-play-circle fa-2x"></i>
</a> </a>
<a id="viewOnJellyfinButton" *ngIf="movie.jellyfinUrl" href="{{movie.jellyfinUrl}}" mat-raised-button target="_blank" class="btn-spacing viewon-btn jellyfin"> <a id="viewOnJellyfinButton" *ngIf="movie.jellyfinUrl" href="{{movie.jellyfinUrl}}"
mat-raised-button target="_blank" class="btn-spacing viewon-btn jellyfin">
{{'Search.ViewOnJellyfin' | translate}} {{'Search.ViewOnJellyfin' | translate}}
<i class="far fa-play-circle fa-2x"></i> <i class="far fa-play-circle fa-2x"></i>
</a> </a>
</span> </span>
<!-- Regular Movie Status --> <!-- Regular Movie Status -->
<button mat-raised-button class="btn-green btn-spacing" id="availableBtn" *ngIf="movie.available && !movie.plexUrl && !movie.embyUrl && !movie.jellyfinUrl"> {{ <button mat-raised-button class="btn-green btn-spacing" id="availableBtn"
'Common.Available' | translate }}</button> *ngIf="movie.available && !movie.plexUrl && !movie.embyUrl && !movie.jellyfinUrl"> {{
<span *ngIf="!movie.available"> 'Common.Available' | translate }}</button>
<span *ngIf="movie.requested || movie.approved; then requestedBtn else notRequestedBtn"></span> <span *ngIf="!movie.available">
<ng-template #requestedBtn> <span
<button id="requestedBtn" mat-raised-button *ngIf="!hasRequest || hasRequest && movieRequest && !movieRequest.denied" class="btn-spacing" color="warn" [disabled]> *ngIf="movie.requested || movie.approved; then requestedBtn else notRequestedBtn"></span>
<i class="fas fa-check"></i> <ng-template #requestedBtn>
{{ 'Common.Requested' | translate }} <button id="requestedBtn" mat-raised-button
</button> *ngIf="!hasRequest || hasRequest && movieRequest && !movieRequest.denied"
</ng-template> class="btn-spacing" color="warn" [disabled]>
<ng-template #notRequestedBtn> <i class="fas fa-check"></i>
<button *ngIf="!movie.requested" id="requestBtn" mat-raised-button class="btn-spacing" color="primary" (click)="request(false)"> {{ 'Common.Requested' | translate }}
<i *ngIf="movie.requestProcessing" class="fas fa-circle-notch fa-spin fa-fw"></i> </button>
<i *ngIf="!movie.requestProcessing && !movie.processed" class="fas fa-plus"></i> </ng-template>
<i *ngIf="movie.processed && !movie.requestProcessing" class="fas fa-check"></i> <ng-template #notRequestedBtn>
{{'Common.Request' | translate }} <button *ngIf="!movie.requested" id="requestBtn" mat-raised-button class="btn-spacing"
</button> color="primary" (click)="request(false)">
</ng-template> <i *ngIf="movie.requestProcessing" class="fas fa-circle-notch fa-spin fa-fw"></i>
<i *ngIf="!movie.requestProcessing && !movie.processed" class="fas fa-plus"></i>
<i *ngIf="movie.processed && !movie.requestProcessing" class="fas fa-check"></i>
{{'Common.Request' | translate }}
</button>
</ng-template>
</span> </span>
<!-- 4k Status --> <!-- 4k Status -->
<span *ngIf="is4KEnabled"> <span *ngIf="is4KEnabled">
<span *permission="roleName4k"> <span *permission="roleName4k">
<button mat-raised-button class="btn-green btn-spacing" id="availableBtn4k" *ngIf="movie.available4K"> {{ <button mat-raised-button class="btn-green btn-spacing" id="availableBtn4k"
*ngIf="movie.available4K"> {{
'Common.Available4K' | translate }} 'Common.Available4K' | translate }}
</button> </button>
<span *ngIf="!movie.available4K"> <span *ngIf="!movie.available4K">
<span *ngIf="movie.has4KRequest || movie.approved4K; then requestedBtn4K else notRequestedBtn4K"></span> <span
*ngIf="movie.has4KRequest || movie.approved4K; then requestedBtn4K else notRequestedBtn4K"></span>
<ng-template #requestedBtn4K> <ng-template #requestedBtn4K>
<button id="requestedBtn4K" mat-raised-button *ngIf="movieRequest && !movieRequest.denied4K" class="btn-spacing" color="warn" [disabled]> <button id="requestedBtn4K" mat-raised-button
*ngIf="movieRequest && !movieRequest.denied4K" class="btn-spacing"
color="warn" [disabled]>
<i class="fas fa-check"></i> <i class="fas fa-check"></i>
{{ 'Common.Requested4K' | translate }} {{ 'Common.Requested4K' | translate }}
</button> </button>
</ng-template> </ng-template>
<ng-template #notRequestedBtn4K> <ng-template #notRequestedBtn4K>
<button *ngIf="!movie.has4KRequest" id="requestBtn4k" mat-raised-button class="btn-spacing" color="primary" (click)="request(true)"> <button *ngIf="!movie.has4KRequest" id="requestBtn4k" mat-raised-button
<i *ngIf="movie.requestProcessing" class="fas fa-circle-notch fa-spin fa-fw"></i> class="btn-spacing" color="primary" (click)="request(true)">
<i *ngIf="!movie.requestProcessing && !movie.processed" class="fas fa-plus"></i> <i *ngIf="movie.requestProcessing"
<i *ngIf="movie.processed && !movie.requestProcessing" class="fas fa-check"></i> class="fas fa-circle-notch fa-spin fa-fw"></i>
<i *ngIf="!movie.requestProcessing && !movie.processed"
class="fas fa-plus"></i>
<i *ngIf="movie.processed && !movie.requestProcessing"
class="fas fa-check"></i>
{{'Common.Request4K' | translate }} {{'Common.Request4K' | translate }}
</button> </button>
</ng-template> </ng-template>
<span *ngIf="!isAdmin && movie.showSubscribe" >
<button *ngIf="!movie.subscribed" (click)="notify()" id="notifyBtn" mat-raised-button class="btn-spacing" > <i class="fas fa-bell"></i>
{{ 'Requests.Notify' | translate }}</button>
<button *ngIf="movie.subscribed" (click)="unNotify()" id="unnotifyBtn" mat-raised-button class="btn-spacing" > <i class="fas fa-bell-slash"></i>
{{ 'Requests.RemoveNotification' | translate }}</button>
</span>
</span> </span>
</span> </span>
</span> </span>
<span *ngIf="movieRequest?.showSubscribe">
<button *ngIf="!movieRequest?.subscribed" (click)="notify()" id="notifyBtn"
mat-raised-button class="btn-spacing"> <i class="fas fa-bell"></i>
{{ 'Requests.Notify' | translate }}</button>
<button *ngIf="movieRequest?.subscribed" (click)="unNotify()" id="unnotifyBtn"
mat-raised-button class="btn-spacing"> <i class="fas fa-bell-slash"></i>
{{ 'Requests.RemoveNotification' | translate }}</button>
</span>
<span *ngIf="isAdmin && hasRequest"> <span *ngIf="isAdmin && hasRequest">
<button id="approveBtn" *ngIf="!movie.approved && movie.requested" (click)="approve(false)" mat-raised-button class="btn-spacing" color="accent"> <button id="approveBtn" *ngIf="!movie.approved && movie.requested" (click)="approve(false)"
<i class="fas fa-plus"></i> {{ 'Common.Approve' | translate }} mat-raised-button class="btn-spacing" color="accent">
</button> <i class="fas fa-plus"></i> {{ 'Common.Approve' | translate }}
<button id="markAvailableBtn" *ngIf="!movie.available && movie.requested" (click)="markAvailable(false)" mat-raised-button class="btn-spacing" </button>
color="accent"> <button id="markAvailableBtn" *ngIf="!movie.available && movie.requested"
<i class="fas fa-plus"></i> {{ 'Requests.MarkAvailable' | translate }} (click)="markAvailable(false)" mat-raised-button class="btn-spacing" color="accent">
</button> <i class="fas fa-plus"></i> {{ 'Requests.MarkAvailable' | translate }}
<button id="markUnavailableBtn" *ngIf="movie.available && movie.requested" (click)="markUnavailable(false)" mat-raised-button class="btn-spacing" </button>
color="accent"> <button id="markUnavailableBtn" *ngIf="movie.available && movie.requested"
<i class="fas fa-minus"></i> {{ 'Requests.MarkUnavailable' | translate }} (click)="markUnavailable(false)" mat-raised-button class="btn-spacing" color="accent">
</button> <i class="fas fa-minus"></i> {{ 'Requests.MarkUnavailable' | translate }}
</button>
<!-- 4k --> <!-- 4k -->
<span *ngIf="is4KEnabled"> <span *ngIf="is4KEnabled">
<span *permission="roleName4k"> <span *permission="roleName4k">
<button id="approve4kBtn" *ngIf="!movie.approved4K && movie.has4KRequest" (click)="approve(true)" mat-raised-button class="btn-spacing" color="accent"> <button id="approve4kBtn" *ngIf="!movie.approved4K && movie.has4KRequest"
<i class="fas fa-plus"></i> {{ 'Common.Approve4K' | translate }} (click)="approve(true)" mat-raised-button class="btn-spacing" color="accent">
</button> <i class="fas fa-plus"></i> {{ 'Common.Approve4K' | translate }}
<button id="markAvailable4kBtn" *ngIf="!movie.available4K && movie.has4KRequest" (click)="markAvailable(true)" mat-raised-button class="btn-spacing" </button>
color="accent"> <button id="markAvailable4kBtn" *ngIf="!movie.available4K && movie.has4KRequest"
<i class="fas fa-plus"></i> {{ 'Requests.MarkAvailable4K' | translate }} (click)="markAvailable(true)" mat-raised-button class="btn-spacing"
</button> color="accent">
<button id="markUnavailable4kBtn" *ngIf="movie.available4K" (click)="markUnavailable(true)" mat-raised-button class="btn-spacing" <i class="fas fa-plus"></i> {{ 'Requests.MarkAvailable4K' | translate }}
color="accent"> </button>
<i class="fas fa-minus"></i> {{ 'Requests.MarkUnavailable4K' | translate }} <button id="markUnavailable4kBtn" *ngIf="movie.available4K"
</button> (click)="markUnavailable(true)" mat-raised-button class="btn-spacing"
</span> color="accent">
<i class="fas fa-minus"></i> {{ 'Requests.MarkUnavailable4K' | translate }}
</button>
</span> </span>
<button id="denyBtn" *ngIf="!movieRequest.denied && movie.requested" mat-raised-button class="btn-spacing" color="warn" (click)="deny(false)">
<i class="fas fa-times"></i> {{'Requests.Deny' | translate }}
</button>
<button id="deniedButton" *ngIf="movieRequest && movieRequest.denied" [matTooltip]="movieRequest.deniedReason" mat-raised-button class="btn-spacing" color="warn">
<i class="fas fa-times"></i> {{'MediaDetails.Denied' | translate }}
</button>
</span> </span>
<button id="reportIssueBtn" mat-raised-button class="btn-spacing" color="danger" (click)="issue()" *ngIf="issuesEnabled"> <button id="denyBtn" *ngIf="!movieRequest.denied && movie.requested" mat-raised-button
<i class="fas fa-exclamation"></i> {{'Requests.ReportIssue' | translate }} class="btn-spacing" color="warn" (click)="deny(false)">
<i class="fas fa-times"></i> {{'Requests.Deny' | translate }}
</button> </button>
<button id="viewCollectionBtn" *ngIf="movie.belongsToCollection" [routerLink]="'/discover/collection/' + movie.belongsToCollection.id" mat-raised-button class="btn-spacing">
<i class="fas fa-list"></i> {{'MediaDetails.ViewCollection' | translate}} <button id="deniedButton" *ngIf="movieRequest && movieRequest.denied"
[matTooltip]="movieRequest.deniedReason" mat-raised-button class="btn-spacing"
color="warn">
<i class="fas fa-times"></i> {{'MediaDetails.Denied' | translate }}
</button> </button>
</span>
<button id="reportIssueBtn" mat-raised-button class="btn-spacing" color="danger"
(click)="issue()" *ngIf="issuesEnabled">
<i class="fas fa-exclamation"></i> {{'Requests.ReportIssue' | translate }}
</button>
<button id="viewCollectionBtn" *ngIf="movie.belongsToCollection"
[routerLink]="'/discover/collection/' + movie.belongsToCollection.id" mat-raised-button
class="btn-spacing">
<i class="fas fa-list"></i> {{'MediaDetails.ViewCollection' | translate}}
</button>
</div> </div>
</div> </div>
</div> </div>
@ -163,7 +180,8 @@
<div class="col-12 col-md-2"> <div class="col-12 col-md-2">
<mat-card class="mat-elevation-z8"> <mat-card class="mat-elevation-z8">
<mat-card-content> <mat-card-content>
<movie-information-panel [movie]="movie" [request]="movieRequest" [advancedOptions]="showAdvanced"></movie-information-panel> <movie-information-panel [movie]="movie" [request]="movieRequest"
[advancedOptions]="showAdvanced"></movie-information-panel>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
@ -199,9 +217,14 @@
<mat-card class="mat-elevation-z8"> <mat-card class="mat-elevation-z8">
<mat-card-header>{{'MediaDetails.Trailers' | translate}}</mat-card-header> <mat-card-header>{{'MediaDetails.Trailers' | translate}}</mat-card-header>
<mat-card-content> <mat-card-content>
<p-carousel class="no-indicator" [numVisible]="2" [numScroll]="10" [page]="0" [value]="movie.videos?.results"> <p-carousel class="no-indicator" [numVisible]="2" [numScroll]="10" [page]="0"
[value]="movie.videos?.results">
<ng-template let-result pTemplate="item"> <ng-template let-result pTemplate="item">
<iframe width="98%" height="315px" [src]="'https://www.youtube.com/embed/' + result.key | safe" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <iframe width="98%" height="315px"
[src]="'https://www.youtube.com/embed/' + result.key | safe"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</ng-template> </ng-template>
</p-carousel> </p-carousel>
</mat-card-content> </mat-card-content>
@ -229,7 +252,9 @@
<div class="sidebar affixable affix-top preview-poster"> <div class="sidebar affixable affix-top preview-poster">
<div class="poster"> <div class="poster">
<a [routerLink]="'/details/movie/'+r.id"> <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;"> <img class="real grow" matTooltip="{{r.title}}"
src="https://image.tmdb.org/t/p/w300/{{r.poster_path}}"
alt="Poster" style="display: block;">
</a> </a>
</div> </div>
</div> </div>
@ -249,7 +274,9 @@
<div class="sidebar affixable affix-top preview-poster"> <div class="sidebar affixable affix-top preview-poster">
<div class="poster "> <div class="poster ">
<a [routerLink]="'/details/movie/'+r.id"> <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;"> <img class="real grow" matTooltip="{{r.title}}"
src="https://image.tmdb.org/t/p/w300/{{r.poster_path}}"
alt="Poster" style="display: block;">
</a> </a>
</div> </div>
</div> </div>