github/Ombi
1
0
Fork 0
mirror of https://github.com/Ombi-app/Ombi.git synced 2025-08-14 02:26:55 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

WIP on the detail page

Browse source
This commit is contained in:
twanariens 2021-01-24 13:22:20 +01:00
commit 448d1da04d
7 changed files with 94 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,7 +5,12 @@
<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>
<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">
<div class="small-middle-container">
@ -14,19 +19,27 @@
<media-poster [posterPath]="'https://image.tmdb.org/t/p/w300/' + movie.posterPath"></media-poster>
<!--Next to poster-->
<div class="col-12 col-lg-2 col-xl-3 media-row">
<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>
<div class="col-12 col-lg-5 col-xl-5 media-row">
<button mat-raised-button class="btn-green btn-spacing" *ngIf="movie.available"> {{
'Common.Available' | translate }}</button>
<div class="col-12 col-lg-8 col-xl-8 media-row">
<span *ngIf="movie.available">
<a *ngIf="movie.plexUrl" href="{{movie.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="movie.embyUrl" href="{{movie.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="movie.jellyfinUrl" href="{{movie.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>
<button mat-raised-button class="btn-green btn-spacing" *ngIf="movie.available && !movie.plexUrl && !movie.embyUrl && !movie.jellyfinUrl"> {{
'Common.Available' | translate }}</button>
<span *ngIf="!movie.available">
</span>
<span *ngIf="!movie.available">
<span *ngIf="movie.requested || movie.approved; then requestedBtn else notRequestedBtn"></span>
<span *ngIf="movie.requested || movie.approved; then requestedBtn else notRequestedBtn"></span>
</span>
<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>

8
src/Ombi/ClientApp/src/app/media-details/components/movie/panels/movie-information-panel.component.html
View file

@ -98,11 +98,11 @@
</div>
<hr />
<div *ngIf="movie.genres">
<div class="genre-button-container" *ngIf="movie.genres">
<strong>{{'MediaDetails.Genres' | translate }}:</strong>
<div>
<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}}
</mat-chip>
</mat-chip-list>
@ -110,10 +110,10 @@
</div>
<hr />
<div *ngIf="movie?.keywords?.keywordsValue?.length > 0">
<div class="keyword-button-container" *ngIf="movie?.keywords?.keywordsValue?.length > 0">
<strong>{{'MediaDetails.Keywords' | translate }}:</strong>
<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}}
</mat-chip>
</mat-chip-list>

44
src/Ombi/ClientApp/src/app/media-details/components/shared/social-icons/social-icons.component.html
View file

@ -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>
</a>
<a *ngIf="theMoviedbId" href="https://www.themoviedb.org/movie/{{theMoviedbId}}" class="media-icons"
target="_blank">
<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>
</a>
<a *ngIf="hasTrailer" class="media-icons youtube" (click)="openDialog()"><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"
target="_blank">
<a *ngIf="hasTrailer" class="media-icons youtube" (click)="openDialog()">
<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" target="_blank">
<i matTooltip="Imdb" class="fa fa-imdb fa-2x grow-social"></i>
</a>
<a *ngIf="twitter" class="media-icons"
[href]="doNotAppend ? twitter : 'https://twitter.com/' + twitter" target="_blank">
<a *ngIf="twitter" class="media-icons" [href]="doNotAppend ? twitter : 'https://twitter.com/' + twitter" target="_blank">
<i matTooltip="Twitter" class="fa fa-twitter fa-2x grow-social"></i>
</a>
<a *ngIf="facebook" class="media-icons"
[href]="doNotAppend ? facebook : 'https://facebook.com/' + facebook" target="_blank">
<a *ngIf="facebook" class="media-icons" [href]="doNotAppend ? facebook : 'https://facebook.com/' + facebook" target="_blank">
<i matTooltip="Facebook" class="fa fa-facebook fa-2x grow-social"></i>
</a> <a *ngIf="instagram" class="media-icons"
[href]="doNotAppend ? instagram : 'https://instagram.com/' + instagram" target="_blank">
</a> <a *ngIf="instagram" class="media-icons" [href]="doNotAppend ? instagram : 'https://instagram.com/' + instagram" target="_blank">
<i matTooltip="Instagram" class="fa fa-instagram fa-2x grow-social"></i>
</a>
<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>
</div>

19
src/Ombi/ClientApp/src/app/media-details/components/shared/social-icons/social-icons.component.scss
View file

@ -1,19 +1,6 @@
@import "~styles/variables.scss";
.viewon-btn {
background-color: transparent;
margin-top: 7px;
text-decoration: none;
a.media-icons:hover{
color:$ombi-active;
}
.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;
}

8
src/Ombi/ClientApp/src/app/media-details/components/shared/top-banner/top-banner.component.html
View file

@ -4,15 +4,15 @@
<div class="shadow-base" [ngClass]="available ? 'available-bottom-border' : ''"></div>
<div class="container summary">
<div class="container">
<div class="container title-top-banner">
<div class="row">
<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">
<h1 class="large-text">{{title}} <span *ngIf="releaseDate" class="grey-text align-middle">
class="col-xl-11 col-lg-8 col-md-8 col-sm-7 col-12 mobile-top-text">
<h1 class="large-text">{{title}} <span *ngIf="releaseDate" class="grey-text">
({{releaseDate | amLocal | amDateFormat: 'YYYY'}})</span>
</h1>
<h2 class="tagline grey-text">{{tagline}}</h2>
<h2 class="tagline">{{tagline}}</h2>
</div>
</div>
</div>

12
src/Ombi/ClientApp/src/app/media-details/components/shared/top-banner/top-banner.component.scss
View file

@ -1,3 +1,13 @@
.large-text {
font: 500 40px/30px Roboto, "Helvetica Neue", sans-serif;
}
}
@media (min-width:571px){
.title-top-banner{
margin-left:300px;
}}
@media (max-width:571px){
.title-top-banner{
text-align:center;
}}

52
src/Ombi/ClientApp/src/app/media-details/media-details.component.scss
View file

@ -43,7 +43,7 @@
background-size: cover;
background-position: 50% 10%;
transition: all .5s;
height: 450px;
height: 300px;
color: #fff;
position: relative;
}
@ -90,17 +90,6 @@
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 {
color: #999;
}
@ -182,8 +171,8 @@
}
.media-icons {
color: white !important;
padding: 1%;
color: #FFF;
padding: 5px;
}
.media-row {
@ -232,4 +221,37 @@
border-radius: 1em;
margin-right: 10px;
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;
}