mirror of https://github.com/Ombi-app/Ombi
Merge pull request #2090 from tidusjar/feature/recently-added
Recently Added Newsletter (Part 1)pull/2095/head
commit
84639528d1
@ -0,0 +1,29 @@
|
||||
export interface IRecentlyAddedMovies {
|
||||
id: number;
|
||||
title: string;
|
||||
overview: string;
|
||||
imdbId: string;
|
||||
theMovieDbId: string;
|
||||
releaseYear: string;
|
||||
addedAt: Date;
|
||||
quality: string;
|
||||
|
||||
// For UI only
|
||||
posterPath: string;
|
||||
}
|
||||
|
||||
export interface IRecentlyAddedTvShows extends IRecentlyAddedMovies {
|
||||
seasonNumber: number;
|
||||
episodeNumber: number;
|
||||
tvDbId: number;
|
||||
}
|
||||
|
||||
export interface IRecentlyAddedRangeModel {
|
||||
from: Date;
|
||||
to: Date;
|
||||
}
|
||||
|
||||
export enum RecentlyAddedType {
|
||||
Plex,
|
||||
Emby,
|
||||
}
|
@ -0,0 +1,51 @@
|
||||
<h1>Recently Added</h1>
|
||||
<input type="checkbox" [(ngModel)]="groupTv" (click)="change()" />
|
||||
<hr />
|
||||
<p-calendar [(ngModel)]="range" showButtonBar="true" selectionMode="range" (onClose)="close()"></p-calendar>
|
||||
<hr />
|
||||
<style>
|
||||
.img-conatiner {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Bottom left text */
|
||||
.bottom-left {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<ngu-carousel [inputs]="carouselTile">
|
||||
<ngu-tile NguCarouselItem *ngFor="let movie of movies">
|
||||
<div class="img-container">
|
||||
<img class="img-responsive poster" src="{{movie.posterPath}}" style="width: 300px" alt="poster">
|
||||
<div class="bottom-left"> {{movie.title}}</div>
|
||||
</div>
|
||||
|
||||
|
||||
</ngu-tile>
|
||||
|
||||
<button NguCarouselPrev class='leftRs'><i class="fa fa-arrow-left"></i></button>
|
||||
<button NguCarouselNext class='rightRs'><i class="fa fa-arrow-right"></i></button>
|
||||
</ngu-carousel>
|
||||
|
||||
|
||||
|
||||
<hr/>
|
||||
|
||||
<ngu-carousel [inputs]="carouselTile">
|
||||
<ngu-tile NguCarouselItem *ngFor="let t of tv">
|
||||
<img class="img-responsive poster" src="{{t.posterPath}}" style="width: 300px" alt="poster">
|
||||
<b>{{t.title}}</b>
|
||||
<br>
|
||||
<b>Season: {{t.seasonNumber}}</b>
|
||||
<br>
|
||||
<b>Episode: {{t.episodeNumber}}</b>
|
||||
</ngu-tile>
|
||||
|
||||
<button NguCarouselPrev class='leftRs'><i class="fa fa-arrow-left"></i></button>
|
||||
<button NguCarouselNext class='rightRs'><i class="fa fa-arrow-right"></i></button>
|
||||
</ngu-carousel>
|
@ -0,0 +1,127 @@
|
||||
import { Component, OnInit } from "@angular/core";
|
||||
import { NguCarousel } from "@ngu/carousel";
|
||||
|
||||
import { ImageService, RecentlyAddedService } from "../services";
|
||||
import { IRecentlyAddedMovies, IRecentlyAddedTvShows } from "./../interfaces";
|
||||
|
||||
@Component({
|
||||
templateUrl: "recentlyAdded.component.html",
|
||||
styles: [`
|
||||
.leftRs {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, .3);
|
||||
border-radius: 100%;
|
||||
left: 0;
|
||||
background: #df691a;
|
||||
}
|
||||
|
||||
.rightRs {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, .3);
|
||||
border-radius: 100%;
|
||||
right: 0;
|
||||
background: #df691a;
|
||||
}
|
||||
`],
|
||||
})
|
||||
|
||||
export class RecentlyAddedComponent implements OnInit {
|
||||
public movies: IRecentlyAddedMovies[];
|
||||
public tv: IRecentlyAddedTvShows[];
|
||||
public range: Date[];
|
||||
|
||||
public groupTv: boolean = false;
|
||||
|
||||
// https://github.com/sheikalthaf/ngu-carousel
|
||||
public carouselTile: NguCarousel;
|
||||
|
||||
constructor(private recentlyAddedService: RecentlyAddedService,
|
||||
private imageService: ImageService) {}
|
||||
|
||||
public ngOnInit() {
|
||||
this.getMovies();
|
||||
this.getShows();
|
||||
|
||||
this.carouselTile = {
|
||||
grid: {xs: 2, sm: 3, md: 3, lg: 5, all: 0},
|
||||
slide: 2,
|
||||
speed: 400,
|
||||
animation: "lazy",
|
||||
point: {
|
||||
visible: true,
|
||||
},
|
||||
load: 2,
|
||||
touch: true,
|
||||
easing: "ease",
|
||||
};
|
||||
}
|
||||
|
||||
public close() {
|
||||
if(this.range.length < 2) {
|
||||
return;
|
||||
}
|
||||
if(!this.range[1]) {
|
||||
// If we do not have a second date then just set it to now
|
||||
this.range[1] = new Date();
|
||||
}
|
||||
this.getMovies();
|
||||
}
|
||||
|
||||
public change() {
|
||||
this.getShows();
|
||||
}
|
||||
|
||||
private getShows() {
|
||||
if(this.groupTv) {
|
||||
this.recentlyAddedService.getRecentlyAddedTvGrouped().subscribe(x => {
|
||||
this.tv = x;
|
||||
|
||||
this.tv.forEach((t) => {
|
||||
this.imageService.getTvPoster(t.tvDbId).subscribe(p => {
|
||||
t.posterPath = p;
|
||||
});
|
||||
});
|
||||
});
|
||||
} else {
|
||||
this.recentlyAddedService.getRecentlyAddedTv().subscribe(x => {
|
||||
this.tv = x;
|
||||
|
||||
this.tv.forEach((t) => {
|
||||
this.imageService.getTvPoster(t.tvDbId).subscribe(p => {
|
||||
t.posterPath = p;
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
private getMovies() {
|
||||
this.recentlyAddedService.getRecentlyAddedMovies().subscribe(x => {
|
||||
this.movies = x;
|
||||
|
||||
this.movies.forEach((movie) => {
|
||||
if(movie.theMovieDbId) {
|
||||
this.imageService.getMoviePoster(movie.theMovieDbId).subscribe(p => {
|
||||
movie.posterPath = p;
|
||||
});
|
||||
} else if(movie.imdbId) {
|
||||
this.imageService.getMoviePoster(movie.imdbId).subscribe(p => {
|
||||
movie.posterPath = p;
|
||||
});
|
||||
} else {
|
||||
movie.posterPath = "";
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue