mirror of
https://github.com/Ombi-app/Ombi.git
synced 2025-07-10 23:42:36 -07:00
Merge branch 'develop' of https://github.com/tidusjar/Ombi into develop
This commit is contained in:
commit
94b40c0327
30 changed files with 509 additions and 374 deletions
|
@ -27,4 +27,4 @@ variables:
|
||||||
value: "4.0.$(Build.BuildId)"
|
value: "4.0.$(Build.BuildId)"
|
||||||
|
|
||||||
- name: isMain
|
- name: isMain
|
||||||
value: $[or(contains(variables['Build.SourceBranch'], 'develop'), contains(variables['Build.SourceBranch'], 'main'))]
|
value: $[or(eq(variables['Build.SourceBranch'], 'refs/heads/develop'), eq(variables['Build.SourceBranch'], 'refs/heads/main'))]
|
|
@ -58,7 +58,7 @@ Here are some of the features Ombi has:
|
||||||
|
|
||||||
# Preview
|
# Preview
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
# Installation
|
# Installation
|
||||||
|
|
||||||
|
|
|
@ -59,7 +59,12 @@ namespace Ombi.Core.Engine
|
||||||
{
|
{
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
retVal.Add(await ProcessResult(tvMazeSearch, false));
|
var mappedResult = await ProcessResult(tvMazeSearch, false);
|
||||||
|
if (mappedResult == null)
|
||||||
|
{
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
retVal.Add(mappedResult);
|
||||||
}
|
}
|
||||||
return retVal;
|
return retVal;
|
||||||
}
|
}
|
||||||
|
@ -194,7 +199,7 @@ namespace Ombi.Core.Engine
|
||||||
foreach (var tvMazeSearch in items)
|
foreach (var tvMazeSearch in items)
|
||||||
{
|
{
|
||||||
var result = await ProcessResult(tvMazeSearch, includeImages);
|
var result = await ProcessResult(tvMazeSearch, includeImages);
|
||||||
if(settings.HideAvailableFromDiscover && result.Available)
|
if (result == null || settings.HideAvailableFromDiscover && result.Available)
|
||||||
{
|
{
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
@ -211,15 +216,17 @@ namespace Ombi.Core.Engine
|
||||||
|
|
||||||
private async Task<SearchTvShowViewModel> ProcessResult(SearchTvShowViewModel item, bool includeImages)
|
private async Task<SearchTvShowViewModel> ProcessResult(SearchTvShowViewModel item, bool includeImages)
|
||||||
{
|
{
|
||||||
|
if (item.Id == 0)
|
||||||
|
{
|
||||||
|
return null;
|
||||||
|
}
|
||||||
item.TheTvDbId = item.Id.ToString();
|
item.TheTvDbId = item.Id.ToString();
|
||||||
if (includeImages)
|
if (includeImages)
|
||||||
{
|
{
|
||||||
|
if (item.TheTvDbId.HasValue())
|
||||||
if (item.TheTvDbId.HasValue())
|
{
|
||||||
{
|
item.BackdropPath = await _imageService.GetTvBackground(item.TheTvDbId);
|
||||||
item.BackdropPath = await _imageService.GetTvBackground(item.TheTvDbId);
|
}
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
await RunSearchRules(item);
|
await RunSearchRules(item);
|
||||||
|
|
|
@ -47,7 +47,7 @@ namespace Ombi.Mapping.Profiles
|
||||||
|
|
||||||
|
|
||||||
CreateMap<TraktShow, SearchTvShowViewModel>()
|
CreateMap<TraktShow, SearchTvShowViewModel>()
|
||||||
.ForMember(dest => dest.Id, opts => opts.MapFrom(src => Convert.ToInt32(src.Ids.Tvdb.ToString())))
|
.ForMember(dest => dest.Id, opts => opts.MapFrom(src => src.Ids.Tvdb.HasValue ? Convert.ToInt32(src.Ids.Tvdb.ToString()) : 0))
|
||||||
.ForMember(dest => dest.FirstAired, opts => opts.MapFrom(src => src.FirstAired.HasValue ? src.FirstAired.Value.ToString("yyyy-MM-ddTHH:mm:ss") : string.Empty))
|
.ForMember(dest => dest.FirstAired, opts => opts.MapFrom(src => src.FirstAired.HasValue ? src.FirstAired.Value.ToString("yyyy-MM-ddTHH:mm:ss") : string.Empty))
|
||||||
.ForMember(dest => dest.ImdbId, opts => opts.MapFrom(src => src.Ids.Imdb))
|
.ForMember(dest => dest.ImdbId, opts => opts.MapFrom(src => src.Ids.Imdb))
|
||||||
.ForMember(dest => dest.Network, opts => opts.MapFrom(src => src.Network))
|
.ForMember(dest => dest.Network, opts => opts.MapFrom(src => src.Network))
|
||||||
|
@ -57,9 +57,9 @@ namespace Ombi.Mapping.Profiles
|
||||||
.ForMember(dest => dest.Title, opts => opts.MapFrom(src => src.Title))
|
.ForMember(dest => dest.Title, opts => opts.MapFrom(src => src.Title))
|
||||||
.ForMember(dest => dest.Status, opts => opts.MapFrom(src => TraktEnumHelper.GetDescription(src.Status)))
|
.ForMember(dest => dest.Status, opts => opts.MapFrom(src => TraktEnumHelper.GetDescription(src.Status)))
|
||||||
.ForMember(dest => dest.Trailer,
|
.ForMember(dest => dest.Trailer,
|
||||||
opts => opts.MapFrom(src => src.Trailer.ToString().ToHttpsUrl()))
|
opts => opts.MapFrom(src => src.Trailer != null ? src.Trailer.ToString().ToHttpsUrl() : string.Empty))
|
||||||
.ForMember(dest => dest.Homepage,
|
.ForMember(dest => dest.Homepage,
|
||||||
opts => opts.MapFrom(src => src.Homepage.ToString().ToHttpsUrl()));
|
opts => opts.MapFrom(src => src.Homepage != null ? src.Homepage.ToString().ToHttpsUrl() : string.Empty));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -22,21 +22,21 @@ namespace Ombi.Store.Repository.Requests
|
||||||
{
|
{
|
||||||
return await Db.TvRequests.Where(x => x.TvDbId == tvDbId)
|
return await Db.TvRequests.Where(x => x.TvDbId == tvDbId)
|
||||||
.Include(x => x.ChildRequests)
|
.Include(x => x.ChildRequests)
|
||||||
.ThenInclude(x => x.RequestedUser)
|
.ThenInclude(x => x.RequestedUser)
|
||||||
.Include(x => x.ChildRequests)
|
.Include(x => x.ChildRequests)
|
||||||
.ThenInclude(x => x.SeasonRequests)
|
.ThenInclude(x => x.SeasonRequests)
|
||||||
.ThenInclude(x => x.Episodes)
|
.ThenInclude(x => x.Episodes)
|
||||||
.FirstOrDefaultAsync();
|
.FirstOrDefaultAsync();
|
||||||
}
|
}
|
||||||
|
|
||||||
public TvRequests GetRequest(int tvDbId)
|
public TvRequests GetRequest(int tvDbId)
|
||||||
{
|
{
|
||||||
return Db.TvRequests.Where(x => x.TvDbId == tvDbId)
|
return Db.TvRequests.Where(x => x.TvDbId == tvDbId).AsSplitQuery()
|
||||||
.Include(x => x.ChildRequests)
|
.Include(x => x.ChildRequests)
|
||||||
.ThenInclude(x => x.RequestedUser)
|
.ThenInclude(x => x.RequestedUser)
|
||||||
.Include(x => x.ChildRequests)
|
.Include(x => x.ChildRequests)
|
||||||
.ThenInclude(x => x.SeasonRequests)
|
.ThenInclude(x => x.SeasonRequests)
|
||||||
.ThenInclude(x => x.Episodes)
|
.ThenInclude(x => x.Episodes)
|
||||||
.FirstOrDefault();
|
.FirstOrDefault();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,24 +1,32 @@
|
||||||
<p-skeleton *ngIf="!fullyLoaded" width="100%" height="315px"></p-skeleton>
|
<p-skeleton *ngIf="!fullyLoaded" width="100%" height="315px"></p-skeleton>
|
||||||
|
|
||||||
<div *ngIf="fullyLoaded" class="ombi-card dark-card c" [style.display]="hide ? 'none' : 'block'">
|
<div *ngIf="fullyLoaded" class="ombi-card dark-card c" [style.display]="hide ? 'none' : 'block'">
|
||||||
<div class="ribbon {{getStatusClass()}} ribbon-top-right"><span>
|
<div class="card-top-info">
|
||||||
{{getAvailbilityStatus()}}
|
<div class="top-left">
|
||||||
</span></div>
|
{{RequestType[result.type] | humanize}}
|
||||||
<a>
|
</div>
|
||||||
|
<div class="{{getStatusClass()}} top-right">
|
||||||
|
<span>{{getAvailbilityStatus()}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<img [routerLink]="generateDetailsLink()" id="cardImage" src="{{result.posterPath}}" class="image"
|
<img [routerLink]="generateDetailsLink()" id="cardImage" src="{{result.posterPath}}" class="image"
|
||||||
alt="{{result.title}}">
|
alt="{{result.title}}">
|
||||||
<div class="top-left">{{RequestType[result.type] | humanize}}</div>
|
|
||||||
<div class="middle">
|
<div class="middle">
|
||||||
<div class="title">{{result.title}}</div>
|
<a class="poster-overlay" [routerLink]="generateDetailsLink()">
|
||||||
<div class="small-text ellipsis">{{result.overview}}</div>
|
<div class="summary">
|
||||||
|
<div class="title">{{result.title}}</div>
|
||||||
|
<div class="small-text ellipsis">{{result.overview}}</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
<div class="row" *ngIf="!result.available && !result.approved">
|
<div class="row" *ngIf="!result.available && !result.approved">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<button mat-raised-button class="btn-green full-width" (click)="request($event)">
|
<button mat-raised-button class="btn-green full-width poster-request-btn" (click)="request($event)">
|
||||||
<mat-icon *ngIf="!loading">cloud_download</mat-icon>
|
<mat-icon *ngIf="!loading">cloud_download</mat-icon>
|
||||||
<i *ngIf="loading" class="fa fa-spinner fa-pulse fa-2x fa-fw" aria-hidden="true"></i>
|
<i *ngIf="loading" class="fa fa-spinner fa-pulse fa-2x fa-fw" aria-hidden="true"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
|
@ -3,7 +3,6 @@ $card-background: #2b2b2b;
|
||||||
|
|
||||||
#cardImage {
|
#cardImage {
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
height: 315px;
|
|
||||||
object-fit:cover;
|
object-fit:cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -61,17 +60,14 @@ small {
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 2000px) {
|
.ombi-card{
|
||||||
.ombi-card{
|
height:100%;
|
||||||
height:100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#cardImage {
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
#cardImage {
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@ -80,79 +76,6 @@ small {
|
||||||
max-width: 600px;
|
max-width: 600px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* common */
|
|
||||||
.ribbon {
|
|
||||||
width: 100px;
|
|
||||||
height: 96px;
|
|
||||||
overflow: hidden;
|
|
||||||
position: absolute;
|
|
||||||
text-align:right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ribbon span {
|
|
||||||
position: absolute;
|
|
||||||
display: none;
|
|
||||||
background-color: transparent;
|
|
||||||
color: #fff;
|
|
||||||
text-shadow: 0 1px 1px rgba(0,0,0,.2);
|
|
||||||
text-transform: uppercase;
|
|
||||||
text-align: right;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ribbon.available span{
|
|
||||||
display:block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ribbon.available span:before{
|
|
||||||
content: '';
|
|
||||||
display: inline-block;
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
-moz-border-radius: 7.5px;
|
|
||||||
-webkit-border-radius: 7.5px;
|
|
||||||
border-radius: 7.5px;
|
|
||||||
background-color: #1DE9B6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ribbon.approved span {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ribbon.approved span:before{
|
|
||||||
content: '';
|
|
||||||
display: inline-block;
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
-moz-border-radius: 7.5px;
|
|
||||||
-webkit-border-radius: 7.5px;
|
|
||||||
border-radius: 7.5px;
|
|
||||||
background-color: #ff5722;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ribbon.requested span {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ribbon.requested span:before{
|
|
||||||
content: '';
|
|
||||||
display: inline-block;
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
-moz-border-radius: 7.5px;
|
|
||||||
-webkit-border-radius: 7.5px;
|
|
||||||
border-radius: 7.5px;
|
|
||||||
background-color: #ffd740;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* top right*/
|
|
||||||
.ribbon-top-right {
|
|
||||||
top: 13px;
|
|
||||||
right: 0px;
|
|
||||||
z-index: 999999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ombi-card {
|
.ombi-card {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
|
@ -202,28 +125,91 @@ small {
|
||||||
.title {
|
.title {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
.top-left {
|
|
||||||
font-size: 14px;
|
|
||||||
position: absolute;
|
.full-width {
|
||||||
text-transform: uppercase;
|
|
||||||
top: 0px;
|
|
||||||
width: 100%;
|
|
||||||
background-color: rgba(15,23,31,0.6);
|
|
||||||
padding-left: 1em;
|
|
||||||
padding-top: 1em;
|
|
||||||
padding-bottom: 0.5em;font-size: 14px;
|
|
||||||
position: absolute;
|
|
||||||
text-transform: uppercase;
|
|
||||||
|
|
||||||
}
|
|
||||||
.full-width {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ellipsis {
|
.ellipsis {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
-webkit-line-clamp: 6;
|
-webkit-line-clamp: 6;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card-top-info{
|
||||||
|
position: absolute;
|
||||||
|
text-transform: uppercase;
|
||||||
|
top: 0px;
|
||||||
|
width: 100%;
|
||||||
|
background-color: rgba(15,23,31,0.6);
|
||||||
|
display:flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-top:0.6em;
|
||||||
|
padding-bottom:0.3em;
|
||||||
|
z-index:2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-left {
|
||||||
|
font-size: 14px;
|
||||||
|
padding-left: 0.5em;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* common */
|
||||||
|
.top-right span {
|
||||||
|
display: none;
|
||||||
|
background-color: transparent;
|
||||||
|
color: #fff;
|
||||||
|
text-shadow: 0 1px 1px rgba(0,0,0,.2);
|
||||||
|
text-align: right;
|
||||||
|
font-size: 14px;
|
||||||
|
padding-right: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-right span:before{
|
||||||
|
content: '';
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
-moz-border-radius: 7.5px;
|
||||||
|
-webkit-border-radius: 7.5px;
|
||||||
|
border-radius: 7.5px;
|
||||||
|
margin-right:5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-right.available span{
|
||||||
|
display:block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-right.available span:before{
|
||||||
|
display: inline-block;
|
||||||
|
background-color: #1DE9B6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-right.approved span {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-right.approved span:before{
|
||||||
|
display: inline-block;
|
||||||
|
background-color: #ff5722;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-right.requested span {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-right.requested span:before{
|
||||||
|
display: inline-block;
|
||||||
|
background-color: #ffd740;
|
||||||
|
}
|
||||||
|
|
||||||
|
::ng-deep a.poster-overlay{
|
||||||
|
color:#fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.poster-overlay:hover{
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
|
@ -34,29 +34,94 @@ export class CarouselListComponent implements OnInit {
|
||||||
get mediaTypeStorageKey() {
|
get mediaTypeStorageKey() {
|
||||||
return "DiscoverOptions" + this.discoverType.toString();
|
return "DiscoverOptions" + this.discoverType.toString();
|
||||||
};
|
};
|
||||||
private amountToLoad = 14;
|
private amountToLoad = 17;
|
||||||
private currentlyLoaded = 0;
|
private currentlyLoaded = 0;
|
||||||
|
|
||||||
constructor(private searchService: SearchV2Service,
|
constructor(private searchService: SearchV2Service,
|
||||||
private storageService: StorageService) {
|
private storageService: StorageService) {
|
||||||
this.responsiveOptions = [
|
this.responsiveOptions = [
|
||||||
{
|
{
|
||||||
breakpoint: '2559px',
|
breakpoint: '4000px',
|
||||||
|
numVisible: 17,
|
||||||
|
numScroll: 17
|
||||||
|
},
|
||||||
|
{
|
||||||
|
breakpoint: '3800px',
|
||||||
|
numVisible: 16,
|
||||||
|
numScroll: 16
|
||||||
|
},
|
||||||
|
{
|
||||||
|
breakpoint: '3600px',
|
||||||
|
numVisible: 15,
|
||||||
|
numScroll: 15
|
||||||
|
},
|
||||||
|
{
|
||||||
|
breakpoint: '3400px',
|
||||||
|
numVisible: 14,
|
||||||
|
numScroll: 14
|
||||||
|
},
|
||||||
|
{
|
||||||
|
breakpoint: '3200px',
|
||||||
|
numVisible: 13,
|
||||||
|
numScroll: 13
|
||||||
|
},
|
||||||
|
{
|
||||||
|
breakpoint: '3000px',
|
||||||
|
numVisible: 12,
|
||||||
|
numScroll: 12
|
||||||
|
},
|
||||||
|
{
|
||||||
|
breakpoint: '2800px',
|
||||||
|
numVisible: 11,
|
||||||
|
numScroll: 11
|
||||||
|
},
|
||||||
|
{
|
||||||
|
breakpoint: '2600px',
|
||||||
|
numVisible: 10,
|
||||||
|
numScroll: 10
|
||||||
|
},
|
||||||
|
{
|
||||||
|
breakpoint: '2400px',
|
||||||
|
numVisible: 9,
|
||||||
|
numScroll: 9
|
||||||
|
},
|
||||||
|
{
|
||||||
|
breakpoint: '2200px',
|
||||||
|
numVisible: 8,
|
||||||
|
numScroll: 8
|
||||||
|
},
|
||||||
|
{
|
||||||
|
breakpoint: '2000px',
|
||||||
numVisible: 7,
|
numVisible: 7,
|
||||||
numScroll: 7
|
numScroll: 7
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
breakpoint: '1024px',
|
breakpoint: '1800px',
|
||||||
|
numVisible: 6,
|
||||||
|
numScroll: 6
|
||||||
|
},
|
||||||
|
{
|
||||||
|
breakpoint: '1650px',
|
||||||
|
numVisible: 5,
|
||||||
|
numScroll: 5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
breakpoint: '1500px',
|
||||||
numVisible: 4,
|
numVisible: 4,
|
||||||
numScroll: 4
|
numScroll: 4
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
breakpoint: '1250px',
|
||||||
|
numVisible: 3,
|
||||||
|
numScroll: 3
|
||||||
|
},
|
||||||
{
|
{
|
||||||
breakpoint: '768px',
|
breakpoint: '768px',
|
||||||
numVisible: 2,
|
numVisible: 2,
|
||||||
numScroll: 2
|
numScroll: 2
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
breakpoint: '560px',
|
breakpoint: '480px',
|
||||||
numVisible: 1,
|
numVisible: 1,
|
||||||
numScroll: 1
|
numScroll: 1
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,10 +1,12 @@
|
||||||
<div *ngIf="background" @fadeInOut class="bg" [style.background-image]="background">
|
<div *ngIf="background" @fadeInOut class="bg" [style.background-image]="background">
|
||||||
|
<div class="login-gradient-bar">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="small-middle-container">
|
<div class="small-middle-container">
|
||||||
<div *ngIf="form && customizationSettings && authenticationSettings">
|
<div *ngIf="form && customizationSettings && authenticationSettings">
|
||||||
|
|
||||||
<mat-card class="mat-elevation-z8 top-margin login-card">
|
<mat-card class="mat-elevation-z8 top-margin login-card">
|
||||||
<img mat-card-image *ngIf="!customizationSettings.logo" src="{{baseUrl}}/images/logo.png">
|
<H1 *ngIf="!customizationSettings.logo" class="login_logo">OMBI</H1>
|
||||||
<img mat-card-image *ngIf="customizationSettings.logo" [src]="customizationSettings.logo">
|
<img mat-card-image *ngIf="customizationSettings.logo" [src]="customizationSettings.logo">
|
||||||
<mat-card-content id="login-box" *ngIf="!authenticationSettings.enableOAuth || loginWithOmbi">
|
<mat-card-content id="login-box" *ngIf="!authenticationSettings.enableOAuth || loginWithOmbi">
|
||||||
<form *ngIf="authenticationSettings" class="form-signin" novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
|
<form *ngIf="authenticationSettings" class="form-signin" novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
|
||||||
|
|
|
@ -1,19 +1,8 @@
|
||||||
$primary-colour: #df691a;
|
@import "~styles/variables.scss";
|
||||||
$primary-colour-outline: #ff761b;
|
|
||||||
$bg-colour: #333333;
|
|
||||||
$bg-colour-disabled: #252424;
|
|
||||||
$form-color: #4e5d6c;
|
|
||||||
$form-color-lighter: #637689;
|
|
||||||
$info-colour: #5bc0de;
|
|
||||||
$warning-colour: #f0ad4e;
|
|
||||||
$danger-colour: #d9534f;
|
|
||||||
$success-colour: #5cb85c;
|
|
||||||
$placeholder-colour: #3b3b3b;
|
|
||||||
|
|
||||||
body, html {
|
body, html {
|
||||||
height: 100% !important;
|
height: 100% !important;
|
||||||
background-repeat: no-repeat !important;
|
background-repeat: no-repeat !important;
|
||||||
background-image: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33)) !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
img.center {
|
img.center {
|
||||||
|
@ -22,6 +11,13 @@ img.center {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.login-gradient-bar{
|
||||||
|
background: linear-gradient(-10deg, transparent 20%, rgba(0,0,0,0.6) 20.0%, rgba(0,0,0,0.6) 80.0%, transparent 60%),transparent;
|
||||||
|
height:100%;
|
||||||
|
width:100%;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
div.bg {
|
div.bg {
|
||||||
background-position: center center;
|
background-position: center center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
@ -57,24 +53,6 @@ div.bg {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
/*
|
|
||||||
* Card component
|
|
||||||
*/
|
|
||||||
.card {
|
|
||||||
/*background-image: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33)) !important;*/
|
|
||||||
background-color: $bg-colour;
|
|
||||||
/* just in case there no content*/
|
|
||||||
padding: 20px 25px 30px;
|
|
||||||
margin: 0 auto 25px;
|
|
||||||
margin-top: 50px;
|
|
||||||
/* shadows and rounded borders */
|
|
||||||
-moz-border-radius: 2px;
|
|
||||||
-webkit-border-radius: 2px;
|
|
||||||
border-radius: 2px;
|
|
||||||
/*-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
|
|
||||||
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
|
|
||||||
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);*/
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile-img-custom {
|
.profile-img-custom {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -93,18 +71,6 @@ div.bg {
|
||||||
/*
|
/*
|
||||||
* Form styles
|
* Form styles
|
||||||
*/
|
*/
|
||||||
.profile-name-card {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: bold;
|
|
||||||
text-align: center;
|
|
||||||
margin: 10px 0 0;
|
|
||||||
min-height: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-control {
|
|
||||||
color: black;
|
|
||||||
background-color: white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reauth-email {
|
.reauth-email {
|
||||||
display: block;
|
display: block;
|
||||||
|
@ -178,32 +144,6 @@ div.bg {
|
||||||
color: rgb(12, 97, 33);
|
color: rgb(12, 97, 33);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Placeholders
|
|
||||||
|
|
||||||
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
|
|
||||||
color: $placeholder-colour;
|
|
||||||
}
|
|
||||||
|
|
||||||
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
|
|
||||||
color: $placeholder-colour;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-moz-placeholder { /* Mozilla Firefox 19+ */
|
|
||||||
color: $placeholder-colour;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
:-ms-input-placeholder { /* Internet Explorer 10-11 */
|
|
||||||
color: $placeholder-colour;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-ms-input-placeholder { /* Microsoft Edge */
|
|
||||||
color: $placeholder-colour;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.full-width {
|
.full-width {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
@ -212,23 +152,63 @@ div.bg {
|
||||||
.small-middle-container{
|
.small-middle-container{
|
||||||
margin: auto;
|
margin: auto;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
width:auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media (min-width: 571px) {
|
@media (min-width: 571px) {
|
||||||
.small-middle-container{
|
.small-middle-container{
|
||||||
margin: auto;
|
margin: auto;
|
||||||
width: 25%;
|
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-margin {
|
|
||||||
margin-top:10%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-buttons {
|
.login-buttons {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.login-card {
|
|
||||||
background: #424242;
|
::ng-deep button#sign-in{
|
||||||
|
color: $ombi-active-text;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
::ng-deep .login-card .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{
|
||||||
|
color: $ombi-active;
|
||||||
|
}
|
||||||
|
|
||||||
|
::ng-deep .login-card .mat-form-field.mat-focused .mat-form-field-label{
|
||||||
|
color: $ombi-active;
|
||||||
|
}
|
||||||
|
|
||||||
|
::ng-deep .login-card .mat-input-element{
|
||||||
|
caret-color: $ombi-active;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-middle-container{
|
||||||
|
display:flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height:100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-card.mat-card{
|
||||||
|
background-color: rgba(0,0,0,0.6);
|
||||||
|
padding:60px 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-card H1.login_logo{
|
||||||
|
display:flex;
|
||||||
|
font-family: Montserrat,sans-serif;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color:$ombi-active;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 10em;
|
||||||
|
width:100%;
|
||||||
|
margin-bottom:70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px){
|
||||||
|
.login-card H1.login_logo{
|
||||||
|
font-size:20vw;
|
||||||
|
}
|
||||||
|
}
|
|
@ -94,7 +94,7 @@ export class LoginComponent implements OnDestroy, OnInit {
|
||||||
this.settingsService.getClientId().subscribe(x => this.clientId = x);
|
this.settingsService.getClientId().subscribe(x => this.clientId = x);
|
||||||
this.settingsService.getCustomization().subscribe(x => this.customizationSettings = x);
|
this.settingsService.getCustomization().subscribe(x => this.customizationSettings = x);
|
||||||
this.images.getRandomBackground().subscribe(x => {
|
this.images.getRandomBackground().subscribe(x => {
|
||||||
this.background = this.sanitizer.bypassSecurityTrustStyle("linear-gradient(-10deg, transparent 20%, rgba(0,0,0,0.7) 20.0%, rgba(0,0,0,0.7) 80.0%, transparent 80%),url(" + x.url + ")");
|
this.background = this.sanitizer.bypassSecurityTrustStyle("url(" + x.url + ")");
|
||||||
});
|
});
|
||||||
this.timer = setInterval(() => {
|
this.timer = setInterval(() => {
|
||||||
this.cycleBackground();
|
this.cycleBackground();
|
||||||
|
@ -206,7 +206,7 @@ export class LoginComponent implements OnDestroy, OnInit {
|
||||||
});
|
});
|
||||||
this.images.getRandomBackground().subscribe(x => {
|
this.images.getRandomBackground().subscribe(x => {
|
||||||
this.background = this.sanitizer
|
this.background = this.sanitizer
|
||||||
.bypassSecurityTrustStyle("linear-gradient(-10deg, transparent 20%, rgba(0,0,0,0.7) 20.0%, rgba(0,0,0,0.7) 80.0%, transparent 80%), url(" + x.url + ")");
|
.bypassSecurityTrustStyle("url(" + x.url + ")");
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,7 +5,12 @@
|
||||||
<div *ngIf="movie" class="dark-theme">
|
<div *ngIf="movie" class="dark-theme">
|
||||||
|
|
||||||
<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">
|
||||||
|
|
||||||
|
<social-icons [homepage]="movie.homepage" [theMoviedbId]="movie.id" [hasTrailer]="movie.videos?.results?.length > 0" (openTrailer)="openDialog()" [imdbId]="movie.imdbId" [twitter]="movie.externalIds.twitterId" [facebook]="movie.externalIds.facebookId"
|
||||||
|
[instagram]="movie.externalIds.instagramId" [available]="movie.available" [plexUrl]="movie.plexUrl" [embyUrl]="movie.embyUrl" [jellyfinUrl]="movie.jellyfinUrl"></social-icons>
|
||||||
|
|
||||||
|
</div>
|
||||||
<section id="info-wrapper">
|
<section id="info-wrapper">
|
||||||
<div class="small-middle-container">
|
<div class="small-middle-container">
|
||||||
|
|
||||||
|
@ -14,56 +19,63 @@
|
||||||
<media-poster [posterPath]="'https://image.tmdb.org/t/p/w300/' + movie.posterPath"></media-poster>
|
<media-poster [posterPath]="'https://image.tmdb.org/t/p/w300/' + movie.posterPath"></media-poster>
|
||||||
|
|
||||||
<!--Next to poster-->
|
<!--Next to poster-->
|
||||||
<div class="col-12 col-lg-2 col-xl-3 media-row">
|
<div class="col-12 col-lg-8 col-xl-8 media-row">
|
||||||
|
<span *ngIf="movie.available">
|
||||||
<social-icons [homepage]="movie.homepage" [theMoviedbId]="movie.id" [hasTrailer]="movie.videos?.results?.length > 0" (openTrailer)="openDialog()" [imdbId]="movie.imdbId" [twitter]="movie.externalIds.twitterId" [facebook]="movie.externalIds.facebookId"
|
<a *ngIf="movie.plexUrl" href="{{movie.plexUrl}}" mat-raised-button target="_blank" class="btn-spacing viewon-btn plex">
|
||||||
[instagram]="movie.externalIds.instagramId" [available]="movie.available" [plexUrl]="movie.plexUrl" [embyUrl]="movie.embyUrl" [jellyfinUrl]="movie.jellyfinUrl"></social-icons>
|
{{'Search.ViewOnPlex' | translate}}
|
||||||
|
<i class="fa fa-play-circle fa-2x"></i>
|
||||||
</div>
|
</a>
|
||||||
|
<a *ngIf="movie.embyUrl" href="{{movie.embyUrl}}" mat-raised-button target="_blank" class="btn-spacing viewon-btn emby">
|
||||||
<div class="col-12 col-lg-5 col-xl-5 media-row">
|
{{'Search.ViewOnEmby' | translate}}
|
||||||
|
<i class="fa fa-play-circle fa-2x"></i>
|
||||||
<button mat-raised-button class="btn-green btn-spacing" *ngIf="movie.available"> {{
|
</a>
|
||||||
'Common.Available' | translate }}</button>
|
<a *ngIf="movie.jellyfinUrl" href="{{movie.jellyfinUrl}}" mat-raised-button target="_blank" class="btn-spacing viewon-btn jellyfinUrl">
|
||||||
<span *ngIf="!movie.available">
|
{{'Search.ViewOnJellyfin' | translate}}
|
||||||
<span *ngIf="movie.requested || movie.approved; then requestedBtn else notRequestedBtn"></span>
|
<i class="fa fa-play-circle fa-2x"></i>
|
||||||
|
</a>
|
||||||
<ng-template #requestedBtn>
|
|
||||||
<button mat-raised-button *ngIf="!hasRequest || hasRequest && movieRequest && !movieRequest.denied" class="btn-spacing" color="warn" [disabled]><i class="fa fa-check"></i>
|
|
||||||
{{ 'Common.Requested' | translate }}</button>
|
|
||||||
</ng-template>
|
|
||||||
<ng-template #notRequestedBtn>
|
|
||||||
<button mat-raised-button class="btn-spacing" color="primary" (click)="request()">
|
|
||||||
<i *ngIf="movie.requestProcessing" class="fa fa-circle-o-notch fa-spin fa-fw"></i> <i
|
|
||||||
*ngIf="!movie.requestProcessing && !movie.processed" class="fa fa-plus"></i>
|
|
||||||
<i *ngIf="movie.processed && !movie.requestProcessing" class="fa fa-check"></i> {{
|
|
||||||
'Common.Request' | translate }}</button>
|
|
||||||
</ng-template>
|
|
||||||
</span>
|
</span>
|
||||||
<span *ngIf="isAdmin && hasRequest">
|
<button mat-raised-button class="btn-green btn-spacing" *ngIf="movie.available && !movie.plexUrl && !movie.embyUrl && !movie.jellyfinUrl"> {{
|
||||||
<button *ngIf="!movie.approved" (click)="approve()" mat-raised-button class="btn-spacing" color="accent">
|
'Common.Available' | translate }}</button>
|
||||||
<i class="fa fa-plus"></i> {{ 'Common.Approve' | translate }}
|
<span *ngIf="!movie.available">
|
||||||
</button>
|
<span *ngIf="movie.requested || movie.approved; then requestedBtn else notRequestedBtn"></span>
|
||||||
<button *ngIf="!movie.available" (click)="markAvailable()" mat-raised-button class="btn-spacing"
|
<ng-template #requestedBtn>
|
||||||
color="accent">
|
<button mat-raised-button *ngIf="!hasRequest || hasRequest && movieRequest && !movieRequest.denied" class="btn-spacing" color="warn" [disabled]>
|
||||||
<i class="fa fa-plus"></i> {{ 'Requests.MarkAvailable' | translate }}
|
<i class="fa fa-check"></i>
|
||||||
</button>
|
{{ 'Common.Requested' | translate }}
|
||||||
|
</button>
|
||||||
|
</ng-template>
|
||||||
|
<ng-template #notRequestedBtn>
|
||||||
|
<button mat-raised-button class="btn-spacing" color="primary" (click)="request()">
|
||||||
|
<i *ngIf="movie.requestProcessing" class="fa fa-circle-o-notch fa-spin fa-fw"></i>
|
||||||
|
<i *ngIf="!movie.requestProcessing && !movie.processed" class="fa fa-plus"></i>
|
||||||
|
<i *ngIf="movie.processed && !movie.requestProcessing" class="fa fa-check"></i>
|
||||||
|
{{'Common.Request' | translate }}
|
||||||
|
</button>
|
||||||
|
</ng-template>
|
||||||
|
</span>
|
||||||
|
<span *ngIf="isAdmin && hasRequest">
|
||||||
|
<button *ngIf="!movie.approved" (click)="approve()" mat-raised-button class="btn-spacing" color="accent">
|
||||||
|
<i class="fa fa-plus"></i> {{ 'Common.Approve' | translate }}
|
||||||
|
</button>
|
||||||
|
<button *ngIf="!movie.available" (click)="markAvailable()" mat-raised-button class="btn-spacing"
|
||||||
|
color="accent">
|
||||||
|
<i class="fa fa-plus"></i> {{ 'Requests.MarkAvailable' | translate }}
|
||||||
|
</button>
|
||||||
|
|
||||||
<button *ngIf="movieRequest && !movieRequest.denied && !movie.available" mat-raised-button class="btn-spacing" color="warn"
|
<button *ngIf="movieRequest && !movieRequest.denied && !movie.available" mat-raised-button class="btn-spacing" color="warn" (click)="deny()">
|
||||||
(click)="deny()">
|
<i class="fa fa-times"></i> {{'Requests.Deny' | translate }}
|
||||||
<i class="fa fa-times"></i> {{
|
</button>
|
||||||
'Requests.Deny' | translate }}</button>
|
<button *ngIf="movieRequest && movieRequest.denied" [matTooltip]="movieRequest.deniedReason" mat-raised-button class="btn-spacing" color="warn">
|
||||||
<button *ngIf="movieRequest && movieRequest.denied" [matTooltip]="movieRequest.deniedReason"
|
<i class="fa fa-times"></i> {{'MediaDetails.Denied' | translate }}
|
||||||
mat-raised-button class="btn-spacing" color="warn">
|
</button>
|
||||||
<i class="fa fa-times"></i> {{
|
</span>
|
||||||
'MediaDetails.Denied' | translate }}</button>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<button mat-raised-button class="btn-spacing" color="danger" (click)="issue()">
|
|
||||||
<i class="fa fa-exclamation"></i> {{
|
|
||||||
'Requests.ReportIssue' | translate }}</button>
|
|
||||||
<button *ngIf="movie.belongsToCollection" [routerLink]="'/discover/collection/' + movie.belongsToCollection.id" mat-raised-button class="btn-spacing"><i class="fa fa-list"></i> {{'MediaDetails.ViewCollection' | translate}}</button>
|
|
||||||
|
|
||||||
|
<button mat-raised-button class="btn-spacing" color="danger" (click)="issue()">
|
||||||
|
<i class="fa fa-exclamation"></i> {{'Requests.ReportIssue' | translate }}
|
||||||
|
</button>
|
||||||
|
<button *ngIf="movie.belongsToCollection" [routerLink]="'/discover/collection/' + movie.belongsToCollection.id" mat-raised-button class="btn-spacing">
|
||||||
|
<i class="fa fa-list"></i> {{'MediaDetails.ViewCollection' | translate}}
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Setting/Configuration admin area -->
|
<!-- Setting/Configuration admin area -->
|
||||||
|
@ -136,7 +148,6 @@
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</mat-expansion-panel>
|
</mat-expansion-panel>
|
||||||
|
@ -157,7 +168,6 @@
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</mat-expansion-panel>
|
</mat-expansion-panel>
|
||||||
|
@ -178,29 +188,10 @@
|
||||||
</mat-accordion>
|
</mat-accordion>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="bottom-page-gap">
|
<div class="bottom-page-gap">
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -98,11 +98,11 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
<div *ngIf="movie.genres">
|
<div class="genre-button-container" *ngIf="movie.genres">
|
||||||
<strong>{{'MediaDetails.Genres' | translate }}:</strong>
|
<strong>{{'MediaDetails.Genres' | translate }}:</strong>
|
||||||
<div>
|
<div>
|
||||||
<mat-chip-list>
|
<mat-chip-list>
|
||||||
<mat-chip color="accent" selected *ngFor="let genre of movie.genres">
|
<mat-chip selected *ngFor="let genre of movie.genres">
|
||||||
{{genre.name}}
|
{{genre.name}}
|
||||||
</mat-chip>
|
</mat-chip>
|
||||||
</mat-chip-list>
|
</mat-chip-list>
|
||||||
|
@ -110,10 +110,10 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
<div *ngIf="movie?.keywords?.keywordsValue?.length > 0">
|
<div class="keyword-button-container" *ngIf="movie?.keywords?.keywordsValue?.length > 0">
|
||||||
<strong>{{'MediaDetails.Keywords' | translate }}:</strong>
|
<strong>{{'MediaDetails.Keywords' | translate }}:</strong>
|
||||||
<mat-chip-list>
|
<mat-chip-list>
|
||||||
<mat-chip color="accent" selected *ngFor="let keyword of movie.keywords.keywordsValue">
|
<mat-chip selected *ngFor="let keyword of movie.keywords.keywordsValue">
|
||||||
{{keyword.name}}
|
{{keyword.name}}
|
||||||
</mat-chip>
|
</mat-chip>
|
||||||
</mat-chip-list>
|
</mat-chip-list>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<a *ngIf="homepage" class="media-icons" href="{{homepage}}" target="_blank">
|
<div class="social-icons-container-inner">
|
||||||
|
<a *ngIf="homepage" class="media-icons" href="{{homepage}}" target="_blank">
|
||||||
<i matTooltip="Homepage" class="fa fa-home fa-2x grow-social"></i>
|
<i matTooltip="Homepage" class="fa fa-home fa-2x grow-social"></i>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a *ngIf="theMoviedbId" href="https://www.themoviedb.org/movie/{{theMoviedbId}}" class="media-icons"
|
<a *ngIf="theMoviedbId" href="https://www.themoviedb.org/movie/{{theMoviedbId}}" class="media-icons"
|
||||||
target="_blank">
|
target="_blank">
|
||||||
<i matTooltip="The Movie DB" class="fa fa-film fa-2x grow-social"></i>
|
<i matTooltip="The Movie DB" class="fa fa-film fa-2x grow-social"></i>
|
||||||
|
@ -10,42 +10,18 @@
|
||||||
<i matTooltip="The TV DB" class="fa fa-tv fa-2x grow-social"></i>
|
<i matTooltip="The TV DB" class="fa fa-tv fa-2x grow-social"></i>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a *ngIf="hasTrailer" class="media-icons youtube" (click)="openDialog()"><i
|
<a *ngIf="hasTrailer" class="media-icons youtube" (click)="openDialog()">
|
||||||
matTooltip="Trailer" class="fa fa-youtube-play fa-2x grow-social"></i></a>
|
<i matTooltip="Trailer" class="fa fa-youtube-play fa-2x grow-social"></i>
|
||||||
|
</a>
|
||||||
<a *ngIf="imdbId" class="media-icons imdb" [href]="doNotAppend ? imdbid : 'https://imdb.com/title/' + imdbId"
|
<a *ngIf="imdbId" class="media-icons imdb" [href]="doNotAppend ? imdbid : 'https://imdb.com/title/' + imdbId" target="_blank">
|
||||||
target="_blank">
|
|
||||||
<i matTooltip="Imdb" class="fa fa-imdb fa-2x grow-social"></i>
|
<i matTooltip="Imdb" class="fa fa-imdb fa-2x grow-social"></i>
|
||||||
</a>
|
</a>
|
||||||
<a *ngIf="twitter" class="media-icons"
|
<a *ngIf="twitter" class="media-icons" [href]="doNotAppend ? twitter : 'https://twitter.com/' + twitter" target="_blank">
|
||||||
[href]="doNotAppend ? twitter : 'https://twitter.com/' + twitter" target="_blank">
|
|
||||||
<i matTooltip="Twitter" class="fa fa-twitter fa-2x grow-social"></i>
|
<i matTooltip="Twitter" class="fa fa-twitter fa-2x grow-social"></i>
|
||||||
</a>
|
</a>
|
||||||
<a *ngIf="facebook" class="media-icons"
|
<a *ngIf="facebook" class="media-icons" [href]="doNotAppend ? facebook : 'https://facebook.com/' + facebook" target="_blank">
|
||||||
[href]="doNotAppend ? facebook : 'https://facebook.com/' + facebook" target="_blank">
|
|
||||||
<i matTooltip="Facebook" class="fa fa-facebook fa-2x grow-social"></i>
|
<i matTooltip="Facebook" class="fa fa-facebook fa-2x grow-social"></i>
|
||||||
</a> <a *ngIf="instagram" class="media-icons"
|
</a> <a *ngIf="instagram" class="media-icons" [href]="doNotAppend ? instagram : 'https://instagram.com/' + instagram" target="_blank">
|
||||||
[href]="doNotAppend ? instagram : 'https://instagram.com/' + instagram" target="_blank">
|
|
||||||
<i matTooltip="Instagram" class="fa fa-instagram fa-2x grow-social"></i>
|
<i matTooltip="Instagram" class="fa fa-instagram fa-2x grow-social"></i>
|
||||||
</a>
|
</a>
|
||||||
|
</div>
|
||||||
<span class="left-seperator" *ngIf="available">
|
|
||||||
|
|
||||||
<a *ngIf="plexUrl" href="{{plexUrl}}" mat-raised-button target="_blank" class="btn-spacing viewon-btn plex">
|
|
||||||
{{'Search.ViewOnPlex' | translate}}
|
|
||||||
<i
|
|
||||||
class="fa fa-play-circle fa-2x"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a *ngIf="embyUrl" href="{{embyUrl}}" mat-raised-button target="_blank" class="btn-spacing viewon-btn emby">
|
|
||||||
{{'Search.ViewOnEmby' | translate}}
|
|
||||||
<i
|
|
||||||
class="fa fa-play-circle fa-2x"></i>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a *ngIf="jellyfinUrl" href="{{jellyfinUrl}}" mat-raised-button target="_blank" class="btn-spacing viewon-btn jellyfinUrl">
|
|
||||||
{{'Search.ViewOnJellyfin' | translate}}
|
|
||||||
<i
|
|
||||||
class="fa fa-play-circle fa-2x"></i>
|
|
||||||
</a>
|
|
||||||
</span>
|
|
||||||
|
|
|
@ -1,19 +1,6 @@
|
||||||
|
@import "~styles/variables.scss";
|
||||||
|
|
||||||
.viewon-btn {
|
a.media-icons:hover{
|
||||||
background-color: transparent;
|
color:$ombi-active;
|
||||||
margin-top: 7px;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.viewon-btn.plex {
|
|
||||||
border: 1px solid #ffd740;
|
|
||||||
color: #ffd740;
|
|
||||||
}
|
|
||||||
.viewon-btn.emby {
|
|
||||||
border: 1px solid #52b54a;
|
|
||||||
color: #52b54a;
|
|
||||||
}
|
|
||||||
.viewon-btn.jellyfin {
|
|
||||||
border: 1px solid #00a4dc;
|
|
||||||
color: #00a4dc;
|
|
||||||
}
|
|
|
@ -4,15 +4,15 @@
|
||||||
<div class="shadow-base" [ngClass]="available ? 'available-bottom-border' : ''"></div>
|
<div class="shadow-base" [ngClass]="available ? 'available-bottom-border' : ''"></div>
|
||||||
|
|
||||||
<div class="container summary">
|
<div class="container summary">
|
||||||
<div class="container">
|
<div class="container title-top-banner">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div
|
<div
|
||||||
class="col-xl-11 col-lg-8 offset-xl-1 offset-lg-4 col-md-8 col-sm-7 col-12 offset-md-4 offset-sm-5 mobile-top-text">
|
class="mobile-top-text">
|
||||||
<h1 class="large-text">{{title}} <span *ngIf="releaseDate" class="grey-text align-middle">
|
<h1 class="large-text">{{title}} <span *ngIf="releaseDate" class="grey-text">
|
||||||
({{releaseDate | amLocal | amDateFormat: 'YYYY'}})</span>
|
({{releaseDate | amLocal | amDateFormat: 'YYYY'}})</span>
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<h2 class="tagline grey-text">{{tagline}}</h2>
|
<h2 class="tagline">{{tagline}}</h2>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,3 +1,14 @@
|
||||||
.large-text {
|
.large-text {
|
||||||
font: 500 40px/30px Roboto, "Helvetica Neue", sans-serif;
|
font: 500 40px/30px Roboto, "Helvetica Neue", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width:571px){
|
||||||
|
.title-top-banner{
|
||||||
|
padding-left:330px;
|
||||||
|
margin-left:0px;
|
||||||
|
}}
|
||||||
|
|
||||||
|
@media (max-width:571px){
|
||||||
|
.title-top-banner{
|
||||||
|
text-align:center;
|
||||||
|
}}
|
|
@ -43,7 +43,7 @@
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: 50% 10%;
|
background-position: 50% 10%;
|
||||||
transition: all .5s;
|
transition: all .5s;
|
||||||
height: 450px;
|
height: 300px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
@ -90,17 +90,6 @@
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#summary-wrapper,
|
|
||||||
.summary-wrapper {
|
|
||||||
background-color: #000;
|
|
||||||
background-size: cover;
|
|
||||||
background-position: 50% 10%;
|
|
||||||
transition: all .5s;
|
|
||||||
height: 550px;
|
|
||||||
color: #fff;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grey-text {
|
.grey-text {
|
||||||
color: #999;
|
color: #999;
|
||||||
}
|
}
|
||||||
|
@ -182,8 +171,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.media-icons {
|
.media-icons {
|
||||||
color: white !important;
|
color: #FFF;
|
||||||
padding: 1%;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.media-row {
|
.media-row {
|
||||||
|
@ -232,4 +221,37 @@
|
||||||
border-radius: 1em;
|
border-radius: 1em;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.social-icons-container{
|
||||||
|
position:absolute;
|
||||||
|
top:84px;
|
||||||
|
right:0px;
|
||||||
|
width:100%;
|
||||||
|
background-color:rgba(15,23,31,.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icons-container-inner{
|
||||||
|
text-align:right;
|
||||||
|
display:flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
padding-right:2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewon-btn {
|
||||||
|
background-color: transparent;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewon-btn.plex {
|
||||||
|
border: 1px solid #E5A00D;
|
||||||
|
color: #E5A00D;
|
||||||
|
}
|
||||||
|
.viewon-btn.emby {
|
||||||
|
border: 1px solid #52b54a;
|
||||||
|
color: #52b54a;
|
||||||
|
}
|
||||||
|
.viewon-btn.jellyfin {
|
||||||
|
border: 1px solid #00a4dc;
|
||||||
|
color: #00a4dc;
|
||||||
|
}
|
||||||
|
|
|
@ -118,7 +118,7 @@
|
||||||
align-items:center;
|
align-items:center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size:24px;
|
font-size:36px;
|
||||||
padding:40px 20px;
|
padding:40px 20px;
|
||||||
height:auto;
|
height:auto;
|
||||||
}
|
}
|
||||||
|
@ -131,12 +131,12 @@
|
||||||
.mat-list-item{
|
.mat-list-item{
|
||||||
color:#FFF;
|
color:#FFF;
|
||||||
font-family:Roboto, sans-serif;
|
font-family:Roboto, sans-serif;
|
||||||
font-size: 14px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
padding:10px 20px;
|
padding:10px 20px;
|
||||||
height:auto;
|
height:auto;
|
||||||
width:20rem;
|
width:20rem;
|
||||||
margin-bottom:1rem;
|
margin-bottom:0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.active-list-item{
|
.active-list-item{
|
||||||
|
|
|
@ -28,7 +28,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- </div> -->
|
<!-- </div> -->
|
||||||
<table mat-table [dataSource]="dataSource" class="table" matSort [matSortActive]="defaultSort" matSortDisableClear [matSortDirection]="defaultOrder">
|
<table mat-table [dataSource]="dataSource" class="requests table" matSort [matSortActive]="defaultSort" matSortDisableClear [matSortDirection]="defaultOrder">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -28,7 +28,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- </div> -->
|
<!-- </div> -->
|
||||||
<table mat-table [dataSource]="dataSource" class="table" matSort [matSortActive]="defaultSort" matSortDisableClear [matSortDirection]="defaultOrder">
|
<table mat-table [dataSource]="dataSource" class="requests table" matSort [matSortActive]="defaultSort" matSortDisableClear [matSortDirection]="defaultOrder">
|
||||||
|
|
||||||
|
|
||||||
<ng-container matColumnDef="title">
|
<ng-container matColumnDef="title">
|
||||||
|
|
|
@ -21,10 +21,6 @@
|
||||||
float:right;
|
float:right;
|
||||||
}
|
}
|
||||||
|
|
||||||
::ng-deep .mat-form-field-label{
|
|
||||||
font-size: 1.2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
::ng-deep .mat-form-field-infix {
|
::ng-deep .mat-form-field-infix {
|
||||||
width: 10em;
|
width: 10em;
|
||||||
margin-top:1em;
|
margin-top:1em;
|
||||||
|
@ -62,4 +58,8 @@
|
||||||
.justify-content-md-center {
|
.justify-content-md-center {
|
||||||
justify-content: center !important;
|
justify-content: center !important;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::ng-deep table.requests button{
|
||||||
|
margin:5px;
|
||||||
}
|
}
|
|
@ -28,7 +28,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table mat-table [dataSource]="dataSource" class="table" matSort [matSortActive]="defaultSort" matSortDisableClear [matSortDirection]="defaultOrder">
|
<table mat-table [dataSource]="dataSource" class="requests table" matSort [matSortActive]="defaultSort" matSortDisableClear [matSortDirection]="defaultOrder">
|
||||||
|
|
||||||
|
|
||||||
<ng-container matColumnDef="series">
|
<ng-container matColumnDef="series">
|
||||||
|
|
|
@ -20,7 +20,7 @@
|
||||||
<td>{{RequestType[v.type] | humanize}}</td>
|
<td>{{RequestType[v.type] | humanize}}</td>
|
||||||
<td class="vcenter">{{v.retryCount}}</td>
|
<td class="vcenter">{{v.retryCount}}</td>
|
||||||
<td class="vcenter"> <i [pTooltip]="v.error" class="fa fa-info-circle"></i></td>
|
<td class="vcenter"> <i [pTooltip]="v.error" class="fa fa-info-circle"></i></td>
|
||||||
<td class="vcenter"><button class="btn btn-sm btn-danger-outline" (click)="remove(v)">Remove</button></td>
|
<td class="vcenter"><button type="button" class="mat-focus-indicator mat-flat-button mat-button-base mat-warn" (click)="remove(v)">Remove</button></td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
|
@ -9,5 +9,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
::ng-deep .dark .code-block {
|
::ng-deep .dark .code-block {
|
||||||
color:#FFF !important;
|
color:#FFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
::ng-deep .code-block {
|
||||||
|
color:#FFF;
|
||||||
|
font-family: Menlo, Monaco, "Courier New", Courier, monospace;
|
||||||
}
|
}
|
|
@ -22,10 +22,6 @@
|
||||||
float:right;
|
float:right;
|
||||||
}
|
}
|
||||||
|
|
||||||
::ng-deep .mat-form-field-label{
|
|
||||||
font-size: 1.2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
::ng-deep .mat-form-field-infix {
|
::ng-deep .mat-form-field-infix {
|
||||||
width: 10em;
|
width: 10em;
|
||||||
margin-top:1em;
|
margin-top:1em;
|
||||||
|
|
|
@ -20,4 +20,83 @@
|
||||||
accent: $ombi-dark-app-accent,
|
accent: $ombi-dark-app-accent,
|
||||||
)
|
)
|
||||||
), $ombi-dark-app-accent);
|
), $ombi-dark-app-accent);
|
||||||
|
|
||||||
@include angular-material-theme($theme);
|
@include angular-material-theme($theme);
|
||||||
|
|
||||||
|
.mat-table {
|
||||||
|
background: $ombi-background-accent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-paginator {
|
||||||
|
background: $ombi-background-accent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-flat-button.mat-primary, .mat-raised-button.mat-primary, .mat-fab.mat-primary, .mat-mini-fab.mat-primary{
|
||||||
|
background-color: $ombi-background-accent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-flat-button.mat-accent, .mat-raised-button.mat-accent, .mat-fab.mat-accent, .mat-mini-fab.mat-accent{
|
||||||
|
color: $ombi-active-text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-menu-panel{
|
||||||
|
background: $ombi-background-accent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{
|
||||||
|
color: $ombi-active;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-form-field.mat-focused .mat-form-field-label{
|
||||||
|
color: $ombi-active;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-input-element{
|
||||||
|
caret-color: $ombi-active;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-card {
|
||||||
|
background: $ombi-background-accent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-expansion-panel{
|
||||||
|
background: $ombi-background-accent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-chip.mat-standard-chip.mat-chip-selected.mat-accent{
|
||||||
|
color:$ombi-active-text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary{
|
||||||
|
background-color: $ombi-background-primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-bottom-sheet-container{
|
||||||
|
background: $ombi-background-accent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grow:hover{
|
||||||
|
color: $ombi-active;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-accent.grow:hover{
|
||||||
|
color: $ombi-active-text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-dialog-container{
|
||||||
|
background: $ombi-background-accent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-autocomplete-panel{
|
||||||
|
background: $ombi-background-accent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-form-field.mat-focused .mat-form-field-ripple{
|
||||||
|
background-color: $ombi-active;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (hover: none){
|
||||||
|
.mat-expansion-panel:not(.mat-expanded):not([aria-disabled=true]) .mat-expansion-panel-header:hover{
|
||||||
|
background: $ombi-background-accent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -22,16 +22,36 @@ td.mat-cell {
|
||||||
}
|
}
|
||||||
|
|
||||||
// lighter bg
|
// lighter bg
|
||||||
.mat-expansion-panel,
|
::ng-deep .mat-expansion-panel,
|
||||||
.mat-card,
|
.mat-card,
|
||||||
.mat-dialog-container,
|
.mat-dialog-container,
|
||||||
.mat-menu-content,
|
.mat-menu-content,
|
||||||
.mat-table,
|
.mat-table,
|
||||||
.mat-paginator {
|
.mat-paginator {
|
||||||
background: $ombi-background-accent !important;
|
background: $ombi-background-accent;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Dark bg
|
// Dark bg
|
||||||
.mat-sidenav-container {
|
.mat-sidenav-container {
|
||||||
background: $ombi-background-primary;
|
background: $ombi-background-primary;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//Login Screen CSS
|
||||||
|
|
||||||
|
.login-buttons button{
|
||||||
|
margin:1em;
|
||||||
|
&#sign-in{
|
||||||
|
background-color: $ombi-active;
|
||||||
|
color: $ombi-active-text;
|
||||||
|
}
|
||||||
|
&#sign-plex{
|
||||||
|
background-color: #282A2D;
|
||||||
|
color: #E5A00D;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::ng-deep #main-container .mat-table {
|
||||||
|
background: $ombi-background-accent;
|
||||||
|
}
|
||||||
|
|
||||||
|
// General Buttons CSS
|
||||||
|
|
|
@ -86,7 +86,6 @@ body {
|
||||||
|
|
||||||
.grow:hover {
|
.grow:hover {
|
||||||
transform: scale(1.1);
|
transform: scale(1.1);
|
||||||
color: black;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -43,4 +43,5 @@ $warn-dark: mat-color($ombi-dark-app-warn);
|
||||||
$ombi-active: mat-color($ombi-dark-app-accent);
|
$ombi-active: mat-color($ombi-dark-app-accent);
|
||||||
$ombi-background-accent: mat-color($ombi-dark-app-primary);
|
$ombi-background-accent: mat-color($ombi-dark-app-primary);
|
||||||
$ombi-background-primary: #0f171f;
|
$ombi-background-primary: #0f171f;
|
||||||
$ombi-background-primary-accent: #35465c;
|
$ombi-background-primary-accent: #35465c;
|
||||||
|
$ombi-active-text:#1b242f;
|
Loading…
Add table
Add a link
Reference in a new issue