diff --git a/src/app/app.component.html b/src/app/app.component.html index 77d2b613..59db43c4 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,35 +1,35 @@
- +
diff --git a/src/app/app.component.scss b/src/app/app.component.scss index cb7eedb3..8de6972c 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -4,83 +4,83 @@ .navbar { - justify-content: left; + justify-content: left; } .nav-item { - outline: none; + outline: none; - > a - { - outline: none; - color: inherit; - } + > a + { + outline: none; + color: inherit; + } } .nav-link { - padding: 12px; - color: rgba(255, 255, 255, 0.7) !important; + padding: 12px; + color: rgba(255, 255, 255, 0.7) !important; - &:host-context(.hoverEnabled) &:hover - { - color: white !important; - } + &:host-context(.hoverEnabled) &:hover + { + color: white !important; + } - &.active - { - color: var(--accentColor) !important; - } + &.active + { + color: var(--accentColor) !important; + } } .navbar-brand:hover { - color: var(--accentColor); + color: var(--accentColor); } .searchbar { - border-radius: 30px; + border-radius: 30px; - > input - { - background: none !important; - color: white; - outline: none; - border: none; - border-bottom: 1px solid #cfcfcf; - width: 0; - padding: 0; - transition: width 0.4s ease-in-out; + > input + { + background: none !important; + color: white; + outline: none; + border: none; + border-bottom: 1px solid #cfcfcf; + width: 0; + padding: 0; + transition: width 0.4s ease-in-out; - &:focus, &.searching - { - width: 12rem; + &:focus, &.searching + { + width: 12rem; - @include media-breakpoint-up(sm) - { - width: 20rem; - } - } - } + @include media-breakpoint-up(sm) + { + width: 20rem; + } + } + } } input::-webkit-search-cancel-button { - display: none; + display: none; } .icon { - padding: 8px; - display: inline-block; - opacity: 0.7; + padding: 8px; + display: inline-block; + opacity: 0.7; - &:host-context(.hoverEnabled) &:hover - { - cursor: pointer; - opacity: 1; - } + &:host-context(.hoverEnabled) &:hover + { + cursor: pointer; + opacity: 1; + } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 6294413e..5194839e 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -26,35 +26,35 @@ import { ShowsListComponent } from './shows-list/shows-list.component'; @NgModule({ - declarations: [ - AppComponent, - NotFoundComponent, - BrowseComponent, - ShowDetailsComponent, - EpisodesListComponent, - PlayerComponent, - CollectionComponent, - SearchComponent, - PeopleListComponent, - ShowsListComponent - ], - imports: [ - BrowserModule, - HttpClientModule, - AppRoutingModule, - BrowserAnimationsModule, - MatSnackBarModule, - MatProgressBarModule, - MatButtonModule, - MatIconModule, - MatSelectModule, - MatMenuModule, - MatSliderModule, - MatTooltipModule, + declarations: [ + AppComponent, + NotFoundComponent, + BrowseComponent, + ShowDetailsComponent, + EpisodesListComponent, + PlayerComponent, + CollectionComponent, + SearchComponent, + PeopleListComponent, + ShowsListComponent + ], + imports: [ + BrowserModule, + HttpClientModule, + AppRoutingModule, + BrowserAnimationsModule, + MatSnackBarModule, + MatProgressBarModule, + MatButtonModule, + MatIconModule, + MatSelectModule, + MatMenuModule, + MatSliderModule, + MatTooltipModule, MatRippleModule, MatCardModule ], - providers: [], - bootstrap: [AppComponent] + providers: [], + bootstrap: [AppComponent] }) export class AppModule { } diff --git a/src/app/browse/browse.component.html b/src/app/browse/browse.component.html index 891f5109..8bc09dfb 100644 --- a/src/app/browse/browse.component.html +++ b/src/app/browse/browse.component.html @@ -1,30 +1,30 @@
- - + +
-
- - - - -
+
+ + + + +
- -
-

{{show.title}}

-

{{show.startYear}} - {{show.endYear}}

-

{{show.startYear}}

 - + +
+

{{show.title}}

+

{{show.startYear}} - {{show.endYear}}

+

{{show.startYear}}

 +
diff --git a/src/app/browse/browse.component.scss b/src/app/browse/browse.component.scss index b96bf569..be2c607c 100644 --- a/src/app/browse/browse.component.scss +++ b/src/app/browse/browse.component.scss @@ -4,93 +4,93 @@ button { - outline: none; + outline: none; } .arrow { - font-size: 12px; + font-size: 12px; } .container-fluid { - display: flex; - flex-wrap: wrap; + display: flex; + flex-wrap: wrap; } .show { - width: 33%; - min-width: 120px; - max-width: 200px; - list-style: none; - padding: .5em; - text-decoration: none; - color: inherit; - outline: none; + width: 33%; + min-width: 120px; + max-width: 200px; + list-style: none; + padding: .5em; + text-decoration: none; + color: inherit; + outline: none; - @include media-breakpoint-up(sm) - { - width: 25%; - } + @include media-breakpoint-up(sm) + { + width: 25%; + } - @include media-breakpoint-up(md) - { - width: 20%; - padding: 1em; - } + @include media-breakpoint-up(md) + { + width: 20%; + padding: 1em; + } - @include media-breakpoint-up(lg) - { - width: 18%; - } + @include media-breakpoint-up(lg) + { + width: 18%; + } - @include media-breakpoint-up(xl) - { - width: 15%; - } + @include media-breakpoint-up(xl) + { + width: 15%; + } - &:focus, &:hover - { - > div - { - outline: solid var(--accentColor); - } + &:focus, &:hover + { + > div + { + outline: solid var(--accentColor); + } - > .title - { - text-decoration: underline; - } - } + > .title + { + text-decoration: underline; + } + } - > div - { - width: 100%; - height: 0; - padding-top: 147.0588%; - background-size: cover; - background-color: #333333; - } + > div + { + width: 100%; + height: 0; + padding-top: 147.0588%; + background-size: cover; + background-color: #333333; + } - > p - { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - text-align: center; - margin-bottom: 0px; - opacity: 1; + > p + { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + text-align: center; + margin-bottom: 0px; + opacity: 1; - &.date - { - opacity: 0.8; - font-size: 0.8em; - } - } + &.date + { + opacity: 0.8; + font-size: 0.8em; + } + } - &:host-context(.hoverEnabled) &:hover - { - cursor: pointer; - } + &:host-context(.hoverEnabled) &:hover + { + cursor: pointer; + } } diff --git a/src/app/browse/browse.component.ts b/src/app/browse/browse.component.ts index 4e9ed453..cb54d1ca 100644 --- a/src/app/browse/browse.component.ts +++ b/src/app/browse/browse.component.ts @@ -4,17 +4,17 @@ import { DomSanitizer } from '@angular/platform-browser'; import { Show } from "../../models/show"; @Component({ - selector: 'app-browse', - templateUrl: './browse.component.html', - styleUrls: ['./browse.component.scss'] + selector: 'app-browse', + templateUrl: './browse.component.html', + styleUrls: ['./browse.component.scss'] }) export class BrowseComponent { - @Input() shows: Show[]; - sortType: string = "title"; - sortUp: boolean = true; + @Input() shows: Show[]; + sortType: string = "title"; + sortUp: boolean = true; - sortTypes: string[] = ["title", "release date"]; + sortTypes: string[] = ["title", "release date"]; constructor(private route: ActivatedRoute, private sanitizer: DomSanitizer) { @@ -24,37 +24,37 @@ export class BrowseComponent }); } - getThumb(slug: string) - { - return this.sanitizer.bypassSecurityTrustStyle("url(/poster/" + slug + ")"); - } + getThumb(slug: string) + { + return this.sanitizer.bypassSecurityTrustStyle("url(/poster/" + slug + ")"); + } - getLink(show: Show) - { - if (show.isCollection) - return "/collection/" + show.slug; - else - return "/show/" + show.slug; - } + getLink(show: Show) + { + if (show.isCollection) + return "/collection/" + show.slug; + else + return "/show/" + show.slug; + } - sort(type: string, order: boolean) - { - this.sortType = type; - this.sortUp = order; + sort(type: string, order: boolean) + { + this.sortType = type; + this.sortUp = order; - if (type == this.sortTypes[0]) - { - if (order) - this.shows.sort((a, b) => { if (a.title < b.title) return -1; else if (a.title > b.title) return 1; return 0; }); - else - this.shows.sort((a, b) => { if (a.title < b.title) return 1; else if (a.title > b.title) return -1; return 0; }); - } - else if (type == this.sortTypes[1]) - { - if (order) - this.shows.sort((a, b) => a.startYear - b.startYear); - else - this.shows.sort((a, b) => b.startYear - a.startYear); - } - } + if (type == this.sortTypes[0]) + { + if (order) + this.shows.sort((a, b) => { if (a.title < b.title) return -1; else if (a.title > b.title) return 1; return 0; }); + else + this.shows.sort((a, b) => { if (a.title < b.title) return 1; else if (a.title > b.title) return -1; return 0; }); + } + else if (type == this.sortTypes[1]) + { + if (order) + this.shows.sort((a, b) => a.startYear - b.startYear); + else + this.shows.sort((a, b) => b.startYear - a.startYear); + } + } } diff --git a/src/app/collection/collection.component.html b/src/app/collection/collection.component.html index 273e73eb..bb00001a 100644 --- a/src/app/collection/collection.component.html +++ b/src/app/collection/collection.component.html @@ -1,14 +1,14 @@
-
-
-
-
-
-

{{collection.name}}

-
{{collection.startYear}} - {{collection.endYear}}
-
{{collection.startYear}}
 -
- -
-
+
+
+
+
+
+

{{collection.name}}

+
{{collection.startYear}} - {{collection.endYear}}
+
{{collection.startYear}}
 +
+ +
+
diff --git a/src/app/collection/collection.component.scss b/src/app/collection/collection.component.scss index cb8d3085..2193650b 100644 --- a/src/app/collection/collection.component.scss +++ b/src/app/collection/collection.component.scss @@ -1,23 +1,23 @@ .collection-info { - width: 60%; + width: 60%; - > div - { - width: 100%; - height: 0; - padding-top: 147.0588%; - background-size: cover; - background-color: #333333; - margin: 10px; - } + > div + { + width: 100%; + height: 0; + padding-top: 147.0588%; + background-size: cover; + background-color: #333333; + margin: 10px; + } } hr { - margin: 10px 0 10px 0; - border-top: 1px solid rgba(255, 255, 255, .60); - border-left: 0; - width: inherit; - height: 2px; + margin: 10px 0 10px 0; + border-top: 1px solid rgba(255, 255, 255, .60); + border-left: 0; + width: inherit; + height: 2px; } diff --git a/src/app/collection/collection.component.ts b/src/app/collection/collection.component.ts index 1b462d9e..80356d5e 100644 --- a/src/app/collection/collection.component.ts +++ b/src/app/collection/collection.component.ts @@ -4,13 +4,13 @@ import { ActivatedRoute } from "@angular/router"; import { DomSanitizer } from "@angular/platform-browser"; @Component({ - selector: 'app-collection', - templateUrl: './collection.component.html', - styleUrls: ['./collection.component.scss'] + selector: 'app-collection', + templateUrl: './collection.component.html', + styleUrls: ['./collection.component.scss'] }) export class CollectionComponent { - collection: Collection; + collection: Collection; constructor(private route: ActivatedRoute, private sanitizer: DomSanitizer) { diff --git a/src/app/episodes-list/episodes-list.component.html b/src/app/episodes-list/episodes-list.component.html index 2d764c0b..7ceeeecf 100644 --- a/src/app/episodes-list/episodes-list.component.html +++ b/src/app/episodes-list/episodes-list.component.html @@ -1,21 +1,21 @@
-
- -
- -
- -
{{episode.showTitle}} - S{{episode.seasonNumber}}:E{{episode.episodeNumber}}
-
{{episode.showTitle}}
 -

{{episode.title}}

- - -
S{{episode.seasonNumber}}:E{{episode.episodeNumber}} - {{episode.title}}
-
{{episode.title}}
 -

{{episode.overview}}

- - -
- - +
+ +
+ +
+ +
{{episode.showTitle}} - S{{episode.seasonNumber}}:E{{episode.episodeNumber}}
+
{{episode.showTitle}}
 +

{{episode.title}}

+ + +
S{{episode.seasonNumber}}:E{{episode.episodeNumber}} - {{episode.title}}
+
{{episode.title}}
 +

{{episode.overview}}

+ + +
+ +
diff --git a/src/app/episodes-list/episodes-list.component.scss b/src/app/episodes-list/episodes-list.component.scss index 8839556f..fa783ea9 100644 --- a/src/app/episodes-list/episodes-list.component.scss +++ b/src/app/episodes-list/episodes-list.component.scss @@ -4,179 +4,179 @@ .root { - position: relative; + position: relative; - &:host-context(.hoverEnabled) &:hover - { - .scrollBtn - { - display: block; - } - } + &:host-context(.hoverEnabled) &:hover + { + .scrollBtn + { + display: block; + } + } } .episodes { - display: flex; - padding-left: 15px; - padding-right: 15px; - overflow-x: auto; - min-width: 100%; - flex-shrink: 0; - flex-direction: row; - scrollbar-width: thin; - scrollbar-color: #999 transparent; + display: flex; + padding-left: 15px; + padding-right: 15px; + overflow-x: auto; + min-width: 100%; + flex-shrink: 0; + flex-direction: row; + scrollbar-width: thin; + scrollbar-color: #999 transparent; - &::-webkit-scrollbar - { - height: 4px; - background: transparent; - } + &::-webkit-scrollbar + { + height: 4px; + background: transparent; + } - &::-webkit-scrollbar-thumb - { - background-color: #999; - border-radius: 90px; + &::-webkit-scrollbar-thumb + { + background-color: #999; + border-radius: 90px; - &:host-context(.hoverEnabled) &:hover - { - background-color: rgb(134, 127, 127); - } - } + &:host-context(.hoverEnabled) &:hover + { + background-color: rgb(134, 127, 127); + } + } } .episode { - visibility: visible; - display: inline-block; - padding: .25rem; - flex-shrink: 0; - width: 55%; - cursor: pointer; - color: inherit; - text-decoration: inherit; + visibility: visible; + display: inline-block; + padding: .25rem; + flex-shrink: 0; + width: 55%; + cursor: pointer; + color: inherit; + text-decoration: inherit; - @include media-breakpoint-up(sm) - { - width: 40%; - } + @include media-breakpoint-up(sm) + { + width: 40%; + } - @include media-breakpoint-up(md) - { - width: 33%; - } + @include media-breakpoint-up(md) + { + width: 33%; + } - @include media-breakpoint-up(lg) - { - width: 28%; - } + @include media-breakpoint-up(lg) + { + width: 28%; + } - @include media-breakpoint-up(xl) - { - width: 18%; - } + @include media-breakpoint-up(xl) + { + width: 18%; + } - .img - { - width: 100%; - height: 0; - padding-top: 56.25%; - background-color: #333333; - background-size: contain; - position: relative; + .img + { + width: 100%; + height: 0; + padding-top: 56.25%; + background-color: #333333; + background-size: contain; + position: relative; - > button - { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - margin: auto; - width: 64px; - height: 64px; - outline: none; - display: none; - } - } + > button + { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + width: 64px; + height: 64px; + outline: none; + display: none; + } + } - .title - { - padding-top: .2rem; - font-weight: 600; - margin-bottom: 0; - display: -webkit-box; - -webkit-line-clamp: 1; - -webkit-box-orient: vertical; - overflow: hidden; - } + .title + { + padding-top: .2rem; + font-weight: 600; + margin-bottom: 0; + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + overflow: hidden; + } - .overview - { - font-weight: 300; - display: -webkit-box; - -webkit-line-clamp: 4; - -webkit-box-orient: vertical; - overflow: hidden; - } + .overview + { + font-weight: 300; + display: -webkit-box; + -webkit-line-clamp: 4; + -webkit-box-orient: vertical; + overflow: hidden; + } - .subtitle - { - font-weight: 300; - display: -webkit-box; - -webkit-line-clamp: 1; - -webkit-box-orient: vertical; - overflow: hidden; - } + .subtitle + { + font-weight: 300; + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + overflow: hidden; + } - &:host-context(.hoverEnabled) &:hover - { - .img - { - outline: solid var(--accentColor); + &:host-context(.hoverEnabled) &:hover + { + .img + { + outline: solid var(--accentColor); - .playBtn - { - display: block; - } - } + .playBtn + { + display: block; + } + } - .title - { - text-decoration: underline; - } - } + .title + { + text-decoration: underline; + } + } } .playIcon { - font-size: 64px; - width: 64px; - height: 64px; - line-height: 64px; + font-size: 64px; + width: 64px; + height: 64px; + line-height: 64px; } .scrollBtn { - padding: 0; - outline: none; - min-width: 0; - position: absolute; - top: 20%; - bottom: 60%; - display: none; + padding: 0; + outline: none; + min-width: 0; + position: absolute; + top: 20%; + bottom: 60%; + display: none; - &.leftBtn - { - left: 0; - padding-left: 10px; - padding-right: 2px; - } + &.leftBtn + { + left: 0; + padding-left: 10px; + padding-right: 2px; + } - &.rightBtn - { - right: 0; - padding-right: 10px; - padding-left: 2px; - } + &.rightBtn + { + right: 0; + padding-right: 10px; + padding-left: 2px; + } } diff --git a/src/app/episodes-list/episodes-list.component.ts b/src/app/episodes-list/episodes-list.component.ts index 865f241e..ea6dc531 100644 --- a/src/app/episodes-list/episodes-list.component.ts +++ b/src/app/episodes-list/episodes-list.component.ts @@ -4,14 +4,14 @@ import { DomSanitizer } from "@angular/platform-browser"; import { Episode } from "../../models/episode"; @Component({ - selector: 'app-episodes-list', - templateUrl: './episodes-list.component.html', - styleUrls: ['./episodes-list.component.scss'] + selector: 'app-episodes-list', + templateUrl: './episodes-list.component.html', + styleUrls: ['./episodes-list.component.scss'] }) export class EpisodesListComponent { @Input() displayShowTitle: boolean = false; - @Input() episodes: Episode[]; + @Input() episodes: Episode[]; @ViewChild("scrollView", { static: true }) private scrollView: ElementRef; @ViewChild("leftBtn", { static: false }) private leftBtn: MatButton; @ViewChild("rightBtn", { static: false }) private rightBtn: MatButton; @@ -53,8 +53,8 @@ export class EpisodesListComponent this.rightBtn._elementRef.nativeElement.classList.remove("d-none"); } - sanitize(url: string) - { - return this.sanitizer.bypassSecurityTrustStyle("url(" + url + ")"); - } + sanitize(url: string) + { + return this.sanitizer.bypassSecurityTrustStyle("url(" + url + ")"); + } } diff --git a/src/app/not-found/not-found.component.html b/src/app/not-found/not-found.component.html index 28767b07..6e2b71ed 100644 --- a/src/app/not-found/not-found.component.html +++ b/src/app/not-found/not-found.component.html @@ -4,6 +4,6 @@

-

404 Error

-

The page you requested was not found.

+

404 Error

+

The page you requested was not found.

diff --git a/src/app/not-found/not-found.component.ts b/src/app/not-found/not-found.component.ts index 8a117dc2..27ad5715 100644 --- a/src/app/not-found/not-found.component.ts +++ b/src/app/not-found/not-found.component.ts @@ -1,15 +1,15 @@ import { Component, OnInit } from '@angular/core'; @Component({ - selector: 'app-not-found', - templateUrl: './not-found.component.html', - styleUrls: ['./not-found.component.scss'] + selector: 'app-not-found', + templateUrl: './not-found.component.html', + styleUrls: ['./not-found.component.scss'] }) export class NotFoundComponent implements OnInit { - constructor() { } + constructor() { } - ngOnInit() { - } + ngOnInit() { + } } diff --git a/src/app/people-list/people-list.component.html b/src/app/people-list/people-list.component.html index 1c14cefb..3183cd49 100644 --- a/src/app/people-list/people-list.component.html +++ b/src/app/people-list/people-list.component.html @@ -1,11 +1,11 @@
-
- -
-
{{people.name}}
-

{{people.role}}

- -
- - +
+ +
+
{{people.name}}
+

{{people.role}}

+ +
+ +
diff --git a/src/app/people-list/people-list.component.scss b/src/app/people-list/people-list.component.scss index 67c249cd..9ac919d8 100644 --- a/src/app/people-list/people-list.component.scss +++ b/src/app/people-list/people-list.component.scss @@ -4,138 +4,138 @@ .people-container { - display: flex; - padding-left: 15px; - padding-right: 15px; - overflow-x: auto; - min-width: 100%; - flex-shrink: 0; - flex-direction: row; - scrollbar-width: thin; - scrollbar-color: #999 transparent; + display: flex; + padding-left: 15px; + padding-right: 15px; + overflow-x: auto; + min-width: 100%; + flex-shrink: 0; + flex-direction: row; + scrollbar-width: thin; + scrollbar-color: #999 transparent; - &::-webkit-scrollbar - { - height: 4px; - background: transparent; - } + &::-webkit-scrollbar + { + height: 4px; + background: transparent; + } - &::-webkit-scrollbar-thumb - { - background-color: #999; - border-radius: 90px; + &::-webkit-scrollbar-thumb + { + background-color: #999; + border-radius: 90px; - &:host-context(.hoverEnabled) &:hover - { - background-color: rgb(134, 127, 127); - } - } + &:host-context(.hoverEnabled) &:hover + { + background-color: rgb(134, 127, 127); + } + } } .people { - visibility: visible; - margin: .25rem; - text-decoration: none; - color: inherit; - outline: none; - flex-shrink: 0; - flex-grow: 0; - width: 33%; + visibility: visible; + margin: .25rem; + text-decoration: none; + color: inherit; + outline: none; + flex-shrink: 0; + flex-grow: 0; + width: 33%; - @include media-breakpoint-up(sm) - { - width: 22%; - } + @include media-breakpoint-up(sm) + { + width: 22%; + } - @include media-breakpoint-up(md) - { - width: 20%; - } + @include media-breakpoint-up(md) + { + width: 20%; + } - @include media-breakpoint-up(lg) - { - width: 15%; - } + @include media-breakpoint-up(lg) + { + width: 15%; + } - @include media-breakpoint-up(xl) - { - width: 10%; - } + @include media-breakpoint-up(xl) + { + width: 10%; + } - > div - { - width: 100%; - height: 0; - padding-top: 147.0588%; - background-size: cover; - background-color: #333333; - } + > div + { + width: 100%; + height: 0; + padding-top: 147.0588%; + background-size: cover; + background-color: #333333; + } - > p, h6 - { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - text-align: center; - margin-bottom: 0px; + > p, h6 + { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + text-align: center; + margin-bottom: 0px; - &.role - { - font-size: 0.8em; - } - } + &.role + { + font-size: 0.8em; + } + } - &:host-context(.hoverEnabled) &:hover - { - cursor: pointer; + &:host-context(.hoverEnabled) &:hover + { + cursor: pointer; - > img - { - outline: solid var(--accentColor); - } + > img + { + outline: solid var(--accentColor); + } - .name - { - text-decoration: underline; - } - } + .name + { + text-decoration: underline; + } + } } .scroll-row { - position: relative; + position: relative; - &:host-context(.hoverEnabled) &:hover - { - .scrollBtn - { - display: block; - } - } + &:host-context(.hoverEnabled) &:hover + { + .scrollBtn + { + display: block; + } + } } .scrollBtn { - padding: 0; - outline: none; - min-width: 0; - position: absolute; - top: 30%; - bottom: 40%; - display: none; + padding: 0; + outline: none; + min-width: 0; + position: absolute; + top: 30%; + bottom: 40%; + display: none; - &.leftBtn - { - left: 0; - padding-left: 10px; - padding-right: 2px; - } + &.leftBtn + { + left: 0; + padding-left: 10px; + padding-right: 2px; + } - &.rightBtn - { - right: 0; - padding-right: 10px; - padding-left: 2px; - } + &.rightBtn + { + right: 0; + padding-right: 10px; + padding-left: 2px; + } } diff --git a/src/app/player/player.component.html b/src/app/player/player.component.html index 359ea288..ab4207c0 100644 --- a/src/app/player/player.component.html +++ b/src/app/player/player.component.html @@ -1,154 +1,154 @@
-
- -
+
+ +
-
- -
+
+ +
- - -

Stats

-
- - - - Play method: {{this.playMethod}} -
-
- Video Container: {{this.item.container}} {{getSupportedFeature("container")}} -
- Video Codec: {{this.item.video.codec}} {{getSupportedFeature("video")}} -
- Audio Codec: {{this.item.audios[0].codec}} {{getSupportedFeature("audio")}} -
- Subtitle Codec: {{this.selectedSubtitle ? this.selectedSubtitle.codec : "none"}} {{getSupportedFeature("subtitle")}} -
- - + + +

Stats

+
+ + + + Play method: {{this.playMethod}} +
+
+ Video Container: {{this.item.container}} {{getSupportedFeature("container")}} +
+ Video Codec: {{this.item.video.codec}} {{getSupportedFeature("video")}} +
+ Audio Codec: {{this.item.audios[0].codec}} {{getSupportedFeature("audio")}} +
+ Subtitle Codec: {{this.selectedSubtitle ? this.selectedSubtitle.codec : "none"}} {{getSupportedFeature("subtitle")}} +
+ + -
-
- - arrow_back - -
{{this.item.showTitle}}
-
+
+
+ + arrow_back + +
{{this.item.showTitle}}
+
-
-
- -
-
-

S{{this.item.seasonNumber}}:E{{this.item.episodeNumber}} - {{this.item.title}}

+
+
+ +
+
+

S{{this.item.seasonNumber}}:E{{this.item.episodeNumber}} - {{this.item.title}}

-
-
-
-
-
-
-
+
+
+
+
+
+
+
-
-
- - skip_previous - - - - skip_next +
+
+ + skip_previous + + + + skip_next - - -
- + + +
+ - -
-

{{this.hours | number: '2.0-0'}}:{{this.minutes | number: '2.0-0'}}:{{this.seconds | number: '2.0-0'}} / {{this.maxHours | number: '2.0-0'}}:{{this.maxMinutes | number: '2.0-0'}}:{{this.maxSeconds | number: '2.0-0'}}

-

{{this.minutes | number: '2.0-0'}}:{{this.seconds | number: '2.0-0'}} / {{this.maxMinutes | number: '2.0-0'}}:{{this.maxSeconds | number: '2.0-0'}}

 -
-
- - - - - -
-
-
+ +
+

{{this.hours | number: '2.0-0'}}:{{this.minutes | number: '2.0-0'}}:{{this.seconds | number: '2.0-0'}} / {{this.maxHours | number: '2.0-0'}}:{{this.maxMinutes | number: '2.0-0'}}:{{this.maxSeconds | number: '2.0-0'}}

+

{{this.minutes | number: '2.0-0'}}:{{this.seconds | number: '2.0-0'}} / {{this.maxMinutes | number: '2.0-0'}}:{{this.maxSeconds | number: '2.0-0'}}

 +
+
+ + + + + +
+
+
- - - + + + -
- +
+ - - - -
- - + + + +
+ + - - - - - - + + + + + + - - - - - - - -
-
+ + + + + + + +
+
diff --git a/src/app/player/player.component.scss b/src/app/player/player.component.scss index 0bbb0e12..9b313e7b 100644 --- a/src/app/player/player.component.scss +++ b/src/app/player/player.component.scss @@ -3,339 +3,339 @@ .player { - position: fixed; - top: 0; - bottom: 0; - left: 0; - right: 0; - background: #000; + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: #000; - > video - { - width: 100%; - height: 100%; - object-fit: contain; - } + > video + { + width: 100%; + height: 100%; + object-fit: contain; + } } #hover { - transition: opacity .2s linear; - opacity: 1; - visibility: visible; + transition: opacity .2s linear; + opacity: 1; + visibility: visible; - &.idle - { - transition: opacity .6s linear, visibility 0s .6s; - opacity: 0; - visibility: hidden; - } + &.idle + { + transition: opacity .6s linear, visibility 0s .6s; + opacity: 0; + visibility: hidden; + } } .back { - position: fixed; - top: 0; - left: 0; - right: 0; - background: rgba(0, 0, 0, 0.6); - padding: .33%; - display: flex; + position: fixed; + top: 0; + left: 0; + right: 0; + background: rgba(0, 0, 0, 0.6); + padding: .33%; + display: flex; - > a - { - outline: none; - color: inherit; - text-decoration: none; - } + > a + { + outline: none; + color: inherit; + text-decoration: none; + } - > h5 - { - margin: 0; - margin-left: .5rem; - align-self: center; - } + > h5 + { + margin: 0; + margin-left: .5rem; + align-self: center; + } } .controller { - position: fixed; - bottom: 0; - left: 0; - right: 0; - background: rgba(0, 0, 0, 0.6); - display: flex; - padding: 1%; + position: fixed; + bottom: 0; + left: 0; + right: 0; + background: rgba(0, 0, 0, 0.6); + display: flex; + padding: 1%; - .img - { - width: 15%; - position: relative; - height: auto; + .img + { + width: 15%; + position: relative; + height: auto; - > img - { - width: 100%; - height: auto; - bottom: 0; - position: absolute; - } - } + > img + { + width: 100%; + height: auto; + bottom: 0; + position: absolute; + } + } - .content - { - width: 100%; - margin-left: 1rem; - display: flex; - flex-direction: column; + .content + { + width: 100%; + margin-left: 1rem; + display: flex; + flex-direction: column; - .buttons - { - display: flex; - flex-direction: row; - justify-content: space-between; + .buttons + { + display: flex; + flex-direction: row; + justify-content: space-between; - > div - { - &.left - { - align-self: start; - display: flex; + > div + { + &.left + { + align-self: start; + display: flex; - > p - { - margin: 0; - margin-left: 1rem; - align-self: center; - } - } + > p + { + margin: 0; + margin-left: 1rem; + align-self: center; + } + } - &.right - { - align-self: end; - } + &.right + { + align-self: end; + } - > button - { - margin-left: .3rem; - margin-right: .3rem; - outline: none; - } + > button + { + margin-left: .3rem; + margin-right: .3rem; + outline: none; + } - > a - { - margin-left: .3rem; - margin-right: .3rem; - outline: none; - color: inherit; - text-decoration: inherit; - } - } - } - } + > a + { + margin-left: .3rem; + margin-right: .3rem; + outline: none; + color: inherit; + text-decoration: inherit; + } + } + } + } } #progress-bar { - width: 100%; - height: auto; - padding-top: 1rem; - padding-bottom: 1rem; - position: relative; + width: 100%; + height: auto; + padding-top: 1rem; + padding-bottom: 1rem; + position: relative; - .seek-bar - { - width: 100%; - height: 4px; - position: relative; - background-color: rgba(255, 255, 255, .2); - transform: scaleY(.6); + .seek-bar + { + width: 100%; + height: 4px; + position: relative; + background-color: rgba(255, 255, 255, .2); + transform: scaleY(.6); - #progress - { - width: 0; - height: 100%; - background-color: var(--accentColor); - position: absolute; - top: 0; - left: 0; - bottom: 0; - } + #progress + { + width: 0; + height: 100%; + background-color: var(--accentColor); + position: absolute; + top: 0; + left: 0; + bottom: 0; + } - #buffered - { - width: 0; - height: 100%; - background-color: rgba(255, 255, 255, .5); - position: absolute; - top: 0; - left: 0; - bottom: 0; - } - } + #buffered + { + width: 0; + height: 100%; + background-color: rgba(255, 255, 255, .5); + position: absolute; + top: 0; + left: 0; + bottom: 0; + } + } - #thumb - { - width: 100%; - height: 12px; - position: absolute; - left: -6px; - top: 0; - bottom: 0; - margin: auto; - opacity: 0; + #thumb + { + width: 100%; + height: 12px; + position: absolute; + left: -6px; + top: 0; + bottom: 0; + margin: auto; + opacity: 0; - > div - { - width: 12px; - height: 12px; - border-radius: 6px; - background-color: var(--accentColor); - } - } + > div + { + width: 12px; + height: 12px; + border-radius: 6px; + background-color: var(--accentColor); + } + } - .hoverEnabled &:hover, &.seeking - { - cursor: pointer; + .hoverEnabled &:hover, &.seeking + { + cursor: pointer; - .seek-bar - { - transform: scaleY(1); - } + .seek-bar + { + transform: scaleY(1); + } - #thumb - { - opacity: 1; - } - } + #thumb + { + opacity: 1; + } + } } #nextBtn { - position: relative; + position: relative; - .hoverEnabled &:hover - { - #next - { - display: flex; - } - } + .hoverEnabled &:hover + { + #next + { + display: flex; + } + } - #next - { - position: absolute; - left: 0; - bottom: 100%; - display: none; - background-color: #212121; - white-space: normal; - line-height: normal; - cursor: default; - height: 150px; + #next + { + position: absolute; + left: 0; + bottom: 100%; + display: none; + background-color: #212121; + white-space: normal; + line-height: normal; + cursor: default; + height: 150px; - #main - { - width: auto; - height: 100%; - flex-shrink: 0; - flex-grow: 0; + #main + { + width: auto; + height: 100%; + flex-shrink: 0; + flex-grow: 0; - > img - { - width: auto; - height: 100%; - } - } + > img + { + width: auto; + height: 100%; + } + } - #overview - { - padding: 1%; - width: 50%; - min-width: 300px; - flex-shrink: 0; - display: flex; - flex-direction: column; + #overview + { + padding: 1%; + width: 50%; + min-width: 300px; + flex-shrink: 0; + display: flex; + flex-direction: column; - > p - { - text-align: justify; - font-weight: 300; - overflow: hidden; - margin: 0; - } - } - } + > p + { + text-align: justify; + font-weight: 300; + overflow: hidden; + margin: 0; + } + } + } } #volume { - display: flex; + display: flex; - > button - { - outline: none; - } + > button + { + outline: none; + } - .hoverEnabled &:hover, &:focus-within - { - > mat-slider - { - width: 100px; - } - } + .hoverEnabled &:hover, &:focus-within + { + > mat-slider + { + width: 100px; + } + } - > mat-slider - { - width: 0px; - min-width: 0px; - padding: 0; - height: 40px; - overflow: hidden; - transition: width .2s cubic-bezier(0.4,0, 1, 1); + > mat-slider + { + width: 0px; + min-width: 0px; + padding: 0; + height: 40px; + overflow: hidden; + transition: width .2s cubic-bezier(0.4,0, 1, 1); - > div - { - top: 19px; - left: 10px; - right: 10px; - } - } + > div + { + top: 19px; + left: 10px; + right: 10px; + } + } } .mat-menu-item { - outline: none !important; + outline: none !important; } .selected { - background: #595959 !important; - color: var(--accentColor); - font-weight: 900; + background: #595959 !important; + color: var(--accentColor); + font-weight: 900; } #loadIndicator { - position: fixed; - left: 0; - right: 0; - top: 0; - bottom: 0; - pointer-events: none; - background: rgba(0, 0, 0, 0.3); - display: flex; - justify-content: center; + position: fixed; + left: 0; + right: 0; + top: 0; + bottom: 0; + pointer-events: none; + background: rgba(0, 0, 0, 0.3); + display: flex; + justify-content: center; } .volume { - min-width: 0px !important; + min-width: 0px !important; } .info-panel { - min-width: 250px !important; - max-width: 300px !important; + min-width: 250px !important; + max-width: 300px !important; } diff --git a/src/app/player/player.component.ts b/src/app/player/player.component.ts index 2b484812..b277bb64 100644 --- a/src/app/player/player.component.ts +++ b/src/app/player/player.component.ts @@ -371,7 +371,7 @@ export class PlayerComponent implements OnInit let queryMethod: string = this.route.snapshot.queryParams["method"]; if (queryMethod) this.playMethod = method[queryMethod]; - else + else this.playMethod = getPlaybackMethod(this.player, this.item); this.selectPlayMethod(this.playMethod); @@ -428,7 +428,7 @@ export class PlayerComponent implements OnInit next() { if (this.item.nextEpisode != null) - this.router.navigate(["/watch/" + this.item.nextEpisode.link], { queryParamsHandling: "merge", replaceUrl: true }); + this.router.navigate(["/watch/" + this.item.nextEpisode.link], { queryParamsHandling: "merge", replaceUrl: true }); } previous() diff --git a/src/app/player/vtt-subtitles.scss b/src/app/player/vtt-subtitles.scss index a0f0d882..6ab6ddc5 100644 --- a/src/app/player/vtt-subtitles.scss +++ b/src/app/player/vtt-subtitles.scss @@ -1,5 +1,5 @@ ::cue { - background-color: transparent; - text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; + background-color: transparent; + text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; } diff --git a/src/app/search/search.component.html b/src/app/search/search.component.html index b65f2c78..cf75bcff 100644 --- a/src/app/search/search.component.html +++ b/src/app/search/search.component.html @@ -1,12 +1,12 @@
-

Shows

+

Shows

-

Episodes

+

Episodes

-

People

+

People

diff --git a/src/app/search/search.component.ts b/src/app/search/search.component.ts index ce129c7e..a92a7c56 100644 --- a/src/app/search/search.component.ts +++ b/src/app/search/search.component.ts @@ -4,9 +4,9 @@ import { SearchResut } from "../../models/search-result"; import { Title } from "@angular/platform-browser"; @Component({ - selector: 'app-search', - templateUrl: './search.component.html', - styleUrls: ['./search.component.scss'] + selector: 'app-search', + templateUrl: './search.component.html', + styleUrls: ['./search.component.scss'] }) export class SearchComponent implements OnInit, OnDestroy { diff --git a/src/app/services/collection-resolver.service.ts b/src/app/services/collection-resolver.service.ts index c2feb097..ec43e0c7 100644 --- a/src/app/services/collection-resolver.service.ts +++ b/src/app/services/collection-resolver.service.ts @@ -7,27 +7,27 @@ import { catchError } from 'rxjs/operators' import { Collection } from "../../models/collection"; @Injectable({ - providedIn: 'root' + providedIn: 'root' }) export class CollectionResolverService implements Resolve { - constructor(private http: HttpClient, private snackBar: MatSnackBar) { } + constructor(private http: HttpClient, private snackBar: MatSnackBar) { } - resolve(route: ActivatedRouteSnapshot): Collection | Observable | Promise - { - let collection: string = route.paramMap.get("collection-slug"); - return this.http.get("api/collection/" + collection).pipe(catchError((error: HttpErrorResponse) => - { - console.log(error.status + " - " + error.message); - if (error.status == 404) - { - this.snackBar.open("Collection \"" + collection + "\" not found.", null, { horizontalPosition: "left", panelClass: ['snackError'], duration: 2500 }); - } - else - { - this.snackBar.open("An unknow error occured.", null, { horizontalPosition: "left", panelClass: ['snackError'], duration: 2500 }); - } - return EMPTY; - })); - } + resolve(route: ActivatedRouteSnapshot): Collection | Observable | Promise + { + let collection: string = route.paramMap.get("collection-slug"); + return this.http.get("api/collection/" + collection).pipe(catchError((error: HttpErrorResponse) => + { + console.log(error.status + " - " + error.message); + if (error.status == 404) + { + this.snackBar.open("Collection \"" + collection + "\" not found.", null, { horizontalPosition: "left", panelClass: ['snackError'], duration: 2500 }); + } + else + { + this.snackBar.open("An unknow error occured.", null, { horizontalPosition: "left", panelClass: ['snackError'], duration: 2500 }); + } + return EMPTY; + })); + } } diff --git a/src/app/services/library-resolver.service.ts b/src/app/services/library-resolver.service.ts index b5efd549..5c6d4502 100644 --- a/src/app/services/library-resolver.service.ts +++ b/src/app/services/library-resolver.service.ts @@ -10,36 +10,36 @@ import { Show } from "../../models/show"; @Injectable() export class LibraryResolverService implements Resolve { - constructor(private http: HttpClient, private snackBar: MatSnackBar) { } + constructor(private http: HttpClient, private snackBar: MatSnackBar) { } - resolve(route: ActivatedRouteSnapshot): Show[] | Observable | Promise - { - let slug: string = route.paramMap.get("library-slug"); + resolve(route: ActivatedRouteSnapshot): Show[] | Observable | Promise + { + let slug: string = route.paramMap.get("library-slug"); - if (slug == null) - { - return this.http.get("api/shows").pipe(catchError((error: HttpErrorResponse) => - { - console.log(error.status + " - " + error.message); - this.snackBar.open("An unknow error occured.", null, { horizontalPosition: "left", panelClass: ['snackError'], duration: 2500 }); - return EMPTY; - })); - } - else - { - return this.http.get("api/libraries/" + slug).pipe(catchError((error: HttpErrorResponse) => - { - console.log(error.status + " - " + error.message); - if (error.status == 404) - { - this.snackBar.open("Library \"" + slug + "\" not found.", null, { horizontalPosition: "left", panelClass: ['snackError'], duration: 2500 }); - } - else - { - this.snackBar.open("An unknow error occured.", null, { horizontalPosition: "left", panelClass: ['snackError'], duration: 2500 }); - } - return EMPTY; - })); - } - } + if (slug == null) + { + return this.http.get("api/shows").pipe(catchError((error: HttpErrorResponse) => + { + console.log(error.status + " - " + error.message); + this.snackBar.open("An unknow error occured.", null, { horizontalPosition: "left", panelClass: ['snackError'], duration: 2500 }); + return EMPTY; + })); + } + else + { + return this.http.get("api/libraries/" + slug).pipe(catchError((error: HttpErrorResponse) => + { + console.log(error.status + " - " + error.message); + if (error.status == 404) + { + this.snackBar.open("Library \"" + slug + "\" not found.", null, { horizontalPosition: "left", panelClass: ['snackError'], duration: 2500 }); + } + else + { + this.snackBar.open("An unknow error occured.", null, { horizontalPosition: "left", panelClass: ['snackError'], duration: 2500 }); + } + return EMPTY; + })); + } + } } diff --git a/src/app/services/people-resolver.service.ts b/src/app/services/people-resolver.service.ts index 053ce283..b751f9f2 100644 --- a/src/app/services/people-resolver.service.ts +++ b/src/app/services/people-resolver.service.ts @@ -8,7 +8,7 @@ import { Collection } from "../../models/collection"; import { People } from "../../models/people"; @Injectable({ - providedIn: 'root' + providedIn: 'root' }) export class PeopleResolverService implements Resolve { diff --git a/src/app/services/search-resolver.service.ts b/src/app/services/search-resolver.service.ts index 6c89018a..ca579a0a 100644 --- a/src/app/services/search-resolver.service.ts +++ b/src/app/services/search-resolver.service.ts @@ -7,20 +7,20 @@ import { catchError } from 'rxjs/operators'; import { SearchResut } from "../../models/search-result"; @Injectable({ - providedIn: 'root' + providedIn: 'root' }) export class SearchResolverService implements Resolve { - constructor(private http: HttpClient, private snackBar: MatSnackBar) { } + constructor(private http: HttpClient, private snackBar: MatSnackBar) { } resolve(route: ActivatedRouteSnapshot): SearchResut | Observable | Promise - { - let query: string = route.paramMap.get("query"); + { + let query: string = route.paramMap.get("query"); return this.http.get("api/search/" + query).pipe(catchError((error: HttpErrorResponse) => - { - console.log(error.status + " - " + error.message); - this.snackBar.open("An unknow error occured.", null, { horizontalPosition: "left", panelClass: ['snackError'], duration: 2500 }); - return EMPTY; - })); - } + { + console.log(error.status + " - " + error.message); + this.snackBar.open("An unknow error occured.", null, { horizontalPosition: "left", panelClass: ['snackError'], duration: 2500 }); + return EMPTY; + })); + } } diff --git a/src/app/services/show-resolver.service.ts b/src/app/services/show-resolver.service.ts index f2c8db38..57414125 100644 --- a/src/app/services/show-resolver.service.ts +++ b/src/app/services/show-resolver.service.ts @@ -9,23 +9,19 @@ import { Show } from "../../models/show"; @Injectable() export class ShowResolverService implements Resolve { - constructor(private http: HttpClient, private snackBar: MatSnackBar) { } + constructor(private http: HttpClient, private snackBar: MatSnackBar) { } - resolve(route: ActivatedRouteSnapshot): Show | Observable | Promise - { - let slug: string = route.paramMap.get("show-slug"); - return this.http.get("api/shows/" + slug).pipe(catchError((error: HttpErrorResponse) => - { - console.log(error.status + " - " + error.message); - if (error.status == 404) - { - this.snackBar.open("Show \"" + slug + "\" not found.", null, { horizontalPosition: "left", panelClass: ['snackError'], duration: 2500 }); - } - else - { - this.snackBar.open("An unknow error occured.", null, { horizontalPosition: "left", panelClass: ['snackError'], duration: 2500 }); - } - return EMPTY; - })); - } + resolve(route: ActivatedRouteSnapshot): Show | Observable | Promise + { + let slug: string = route.paramMap.get("show-slug"); + return this.http.get("api/shows/" + slug).pipe(catchError((error: HttpErrorResponse) => + { + console.log(error.status + " - " + error.message); + if (error.status == 404) + this.snackBar.open("Show \"" + slug + "\" not found.", null, { horizontalPosition: "left", panelClass: ['snackError'], duration: 2500 }); + else + this.snackBar.open("An unknow error occured.", null, { horizontalPosition: "left", panelClass: ['snackError'], duration: 2500 }); + return EMPTY; + })); + } } diff --git a/src/app/services/stream-resolver.service.ts b/src/app/services/stream-resolver.service.ts index b6d1a31f..236e0493 100644 --- a/src/app/services/stream-resolver.service.ts +++ b/src/app/services/stream-resolver.service.ts @@ -10,23 +10,23 @@ import { WatchItem } from "../../models/watch-item"; @Injectable() export class StreamResolverService implements Resolve { - constructor(private http: HttpClient, private snackBar: MatSnackBar) { } + constructor(private http: HttpClient, private snackBar: MatSnackBar) { } resolve(route: ActivatedRouteSnapshot): WatchItem | Observable | Promise - { - let item: string = route.paramMap.get("item"); + { + let item: string = route.paramMap.get("item"); return this.http.get("api/watch/" + item).pipe(catchError((error: HttpErrorResponse) => - { - console.log(error.status + " - " + error.message); - if (error.status == 404) - { - this.snackBar.open("Episode \"" + item + "\" not found.", null, { horizontalPosition: "left", panelClass: ['snackError'], duration: 2500 }); - } - else - { - this.snackBar.open("An unknow error occured.", null, { horizontalPosition: "left", panelClass: ['snackError'], duration: 2500 }); - } - return EMPTY; - })); - } + { + console.log(error.status + " - " + error.message); + if (error.status == 404) + { + this.snackBar.open("Episode \"" + item + "\" not found.", null, { horizontalPosition: "left", panelClass: ['snackError'], duration: 2500 }); + } + else + { + this.snackBar.open("An unknow error occured.", null, { horizontalPosition: "left", panelClass: ['snackError'], duration: 2500 }); + } + return EMPTY; + })); + } } diff --git a/src/app/show-details/show-details.component.html b/src/app/show-details/show-details.component.html index 44a75ef0..57247bd8 100644 --- a/src/app/show-details/show-details.component.html +++ b/src/app/show-details/show-details.component.html @@ -1,79 +1,79 @@
- +
-
- -
-
-

{{this.show.title}}

-

{{show.startYear}} - {{show.endYear}}

-

{{show.startYear}}

 -
-
- - - - - -
-
-
- +
+ +
+
+

{{this.show.title}}

+

{{show.startYear}} - {{show.endYear}}

+

{{show.startYear}}

 +
+
+ + + + + +
+
+
+ - -
-
+ +
+
-
-
-

Studio: {{this.show.studio?.name}}

-
-

Genres: {{genre.name}}{{isLast ? "" : ", "}}

-
-
-
+
+
+

Studio: {{this.show.studio?.name}}

+
+

Genres: {{genre.name}}{{isLast ? "" : ", "}}

+
+
+
-
-
-

{{this.show.overview}}

-
-
-
-

Genres

- -
-
+
+
+

{{this.show.overview}}

+
+
+
+

Genres

+ +
+
- - Season - - {{season.title}} - - + + Season + + {{season.title}} + +
-

Staff

+

Staff

diff --git a/src/app/show-details/show-details.component.scss b/src/app/show-details/show-details.component.scss index abbaa2f6..86abec79 100644 --- a/src/app/show-details/show-details.component.scss +++ b/src/app/show-details/show-details.component.scss @@ -4,149 +4,149 @@ a { - color: #ffffff; + color: #ffffff; } .backdrop { - margin-top: -68px; - position: relative; - z-index: -1; + margin-top: -68px; + position: relative; + z-index: -1; - > img - { - width: 100%; - max-height: 75vh; - object-fit: cover; - min-height: 20vh; + > img + { + width: 100%; + max-height: 75vh; + object-fit: cover; + min-height: 20vh; - @include media-breakpoint-up(md) - { - min-height: 60vh; - } - } + @include media-breakpoint-up(md) + { + min-height: 60vh; + } + } - &:after - { - content: ""; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.6) 100%); - } + &:after + { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.6) 100%); + } } .header { - @include media-breakpoint-up(sm) - { - margin-top: -12rem; - } + @include media-breakpoint-up(sm) + { + margin-top: -12rem; + } - @include media-breakpoint-up(md) - { - margin-top: -13rem; - } + @include media-breakpoint-up(md) + { + margin-top: -13rem; + } - @include media-breakpoint-up(lg) - { - margin-top: -19rem; - } + @include media-breakpoint-up(lg) + { + margin-top: -19rem; + } - @include media-breakpoint-up(xl) - { - margin-top: -23rem; - } + @include media-breakpoint-up(xl) + { + margin-top: -23rem; + } } .poster { - width: 33%; - background-color: #333333; + width: 33%; + background-color: #333333; - @include media-breakpoint-up(md) - { - width: 25%; - } + @include media-breakpoint-up(md) + { + width: 25%; + } } .main { - align-self: center; - padding-left: 2.5em; + align-self: center; + padding-left: 2.5em; - .info - { - margin-top: -3.25rem; + .info + { + margin-top: -3.25rem; - @include media-breakpoint-up(sm) - { - margin-top: 0; - } + @include media-breakpoint-up(sm) + { + margin-top: 0; + } - .title - { - font-weight: 900 !important; - } + .title + { + font-weight: 900 !important; + } - .date - { - font-weight: 300 !important; - } - } + .date + { + font-weight: 300 !important; + } + } - .buttons - { - > button - { - outline: none; - margin: .3em; - } - } + .buttons + { + > button + { + outline: none; + margin: .3em; + } + } } .secondary { - position: relative; + position: relative; - > img - { - max-width: 100%; - } + > img + { + max-width: 100%; + } - > div - { - position: absolute; - bottom: 0; - } + > div + { + position: absolute; + bottom: 0; + } - > div > p - { - opacity: .87; - } + > div > p + { + opacity: .87; + } } .overview { - opacity: .87; + opacity: .87; - @include media-breakpoint-up(sm) - { - padding-top: 2.25rem; - } + @include media-breakpoint-up(sm) + { + padding-top: 2.25rem; + } } hr { - margin: 0 10px 0 10px; - border-right: 1px solid rgba(255, 255, 255, .60); - border-top: 0; - height: inherit; + margin: 0 10px 0 10px; + border-right: 1px solid rgba(255, 255, 255, .60); + border-top: 0; + height: inherit; } .genre { - opacity: .8; + opacity: .8; } diff --git a/src/app/show-details/show-details.component.ts b/src/app/show-details/show-details.component.ts index 5ffc8e33..ad1fac6a 100644 --- a/src/app/show-details/show-details.component.ts +++ b/src/app/show-details/show-details.component.ts @@ -7,76 +7,76 @@ import { Episode } from "../../models/episode"; import { Show } from "../../models/show"; @Component({ - selector: 'app-show-details', - templateUrl: './show-details.component.html', - styleUrls: ['./show-details.component.scss'] + selector: 'app-show-details', + templateUrl: './show-details.component.html', + styleUrls: ['./show-details.component.scss'] }) export class ShowDetailsComponent implements OnInit { - show: Show; - episodes: Episode[] = null; - season: number; + show: Show; + episodes: Episode[] = null; + season: number; - private toolbar: HTMLElement; - private backdrop: HTMLElement; + private toolbar: HTMLElement; + private backdrop: HTMLElement; - constructor(private route: ActivatedRoute, private http: HttpClient, private snackBar: MatSnackBar, private title: Title) - { - this.route.queryParams.subscribe(params => - { - this.season = params["season"]; - }); + constructor(private route: ActivatedRoute, private http: HttpClient, private snackBar: MatSnackBar, private title: Title) + { + this.route.queryParams.subscribe(params => + { + this.season = params["season"]; + }); - this.route.data.subscribe(data => - { - this.show = data.show; - this.title.setTitle(this.show.title + " - Kyoo"); + this.route.data.subscribe(data => + { + this.show = data.show; + this.title.setTitle(this.show.title + " - Kyoo"); - if (this.season == null || this.show.seasons.find(x => x.seasonNumber == this.season) == null) - this.season = 1; + if (this.season == null || this.show.seasons.find(x => x.seasonNumber == this.season) == null) + this.season = 1; - this.getEpisodes(); - }); - } + this.getEpisodes(); + }); + } - ngOnInit() - { - this.toolbar = document.getElementById("toolbar"); - this.backdrop = document.getElementById("backdrop"); - window.addEventListener("scroll", this.scroll, true); - this.toolbar.setAttribute("style", `background-color: rgba(0, 0, 0, 0) !important`); - } + ngOnInit() + { + this.toolbar = document.getElementById("toolbar"); + this.backdrop = document.getElementById("backdrop"); + window.addEventListener("scroll", this.scroll, true); + this.toolbar.setAttribute("style", `background-color: rgba(0, 0, 0, 0) !important`); + } - ngOnDestroy() - { - window.removeEventListener("scroll", this.scroll, true); - this.title.setTitle("Kyoo"); - this.toolbar.setAttribute("style", `background-color: #000000 !important`); - } + ngOnDestroy() + { + window.removeEventListener("scroll", this.scroll, true); + this.title.setTitle("Kyoo"); + this.toolbar.setAttribute("style", `background-color: #000000 !important`); + } - scroll = () => - { - let opacity: number = 2 * window.scrollY / this.backdrop.clientHeight; - this.toolbar.setAttribute("style", `background-color: rgba(0, 0, 0, ${opacity}) !important`); - } + scroll = () => + { + let opacity: number = 2 * window.scrollY / this.backdrop.clientHeight; + this.toolbar.setAttribute("style", `background-color: rgba(0, 0, 0, ${opacity}) !important`); + } - getEpisodes() - { - if (this.show == null) - return; + getEpisodes() + { + if (this.show == null) + return; - if (this.show.seasons.find(x => x.seasonNumber == this.season).episodes != null) - this.episodes = this.show.seasons.find(x => x.seasonNumber == this.season).episodes; + if (this.show.seasons.find(x => x.seasonNumber == this.season).episodes != null) + this.episodes = this.show.seasons.find(x => x.seasonNumber == this.season).episodes; - this.http.get("api/episodes/" + this.show.slug + "/season/" + this.season).subscribe((episodes: Episode[]) => - { - this.show.seasons.find(x => x.seasonNumber == this.season).episodes = episodes; - this.episodes = episodes; - }, error => - { - console.log(error.status + " - " + error.message); - this.snackBar.open("An unknow error occured while getting episodes.", null, { horizontalPosition: "left", panelClass: ['snackError'], duration: 2500 }); - }); - } + this.http.get("api/episodes/" + this.show.slug + "/season/" + this.season).subscribe((episodes: Episode[]) => + { + this.show.seasons.find(x => x.seasonNumber == this.season).episodes = episodes; + this.episodes = episodes; + }, error => + { + console.log(error.status + " - " + error.message); + this.snackBar.open("An unknow error occured while getting episodes.", null, { horizontalPosition: "left", panelClass: ['snackError'], duration: 2500 }); + }); + } } diff --git a/src/app/shows-list/shows-list.component.html b/src/app/shows-list/shows-list.component.html index 82643e6b..5a50a1fe 100644 --- a/src/app/shows-list/shows-list.component.html +++ b/src/app/shows-list/shows-list.component.html @@ -1,12 +1,12 @@
-
- -
-

{{show.title}}

-

{{show.startYear}} - {{show.endYear}}

-

{{show.startYear}}

 - -
- - +
+ +
+

{{show.title}}

+

{{show.startYear}} - {{show.endYear}}

+

{{show.startYear}}

 + +
+ +
diff --git a/src/app/shows-list/shows-list.component.scss b/src/app/shows-list/shows-list.component.scss index 5bac639e..6464d0b1 100644 --- a/src/app/shows-list/shows-list.component.scss +++ b/src/app/shows-list/shows-list.component.scss @@ -4,145 +4,145 @@ .shows-container { - display: flex; - padding-left: 15px; - padding-right: 15px; - overflow-x: auto; - min-width: 100%; - flex-shrink: 0; - flex-direction: row; + display: flex; + padding-left: 15px; + padding-right: 15px; + overflow-x: auto; + min-width: 100%; + flex-shrink: 0; + flex-direction: row; - &::-webkit-scrollbar - { - height: 4px; - background: transparent; - } + &::-webkit-scrollbar + { + height: 4px; + background: transparent; + } - &::-webkit-scrollbar-thumb - { - background-color: #999; - border-radius: 90px; + &::-webkit-scrollbar-thumb + { + background-color: #999; + border-radius: 90px; - &:host-context(.hoverEnabled) &:hover - { - background-color: rgb(134, 127, 127); - } - } + &:host-context(.hoverEnabled) &:hover + { + background-color: rgb(134, 127, 127); + } + } } .show { - width: 33%; - min-width: 120px; - max-width: 200px; - list-style: none; - padding: .5em; - text-decoration: none; - color: inherit; - outline: none; - flex-shrink: 0; - flex-grow: 0; + width: 33%; + min-width: 120px; + max-width: 200px; + list-style: none; + padding: .5em; + text-decoration: none; + color: inherit; + outline: none; + flex-shrink: 0; + flex-grow: 0; - @include media-breakpoint-up(sm) - { - width: 25%; - } + @include media-breakpoint-up(sm) + { + width: 25%; + } - @include media-breakpoint-up(md) - { - width: 20%; - padding: 1em; - } + @include media-breakpoint-up(md) + { + width: 20%; + padding: 1em; + } - @include media-breakpoint-up(lg) - { - width: 18%; - } + @include media-breakpoint-up(lg) + { + width: 18%; + } - @include media-breakpoint-up(xl) - { - width: 15%; - } + @include media-breakpoint-up(xl) + { + width: 15%; + } - &:focus, &:hover - { - > div - { - outline: solid var(--accentColor); - } + &:focus, &:hover + { + > div + { + outline: solid var(--accentColor); + } - > .title - { - text-decoration: underline; - } - } + > .title + { + text-decoration: underline; + } + } - > div - { - width: 100%; - height: 0; - padding-top: 147.0588%; - background-size: cover; - background-color: #333333; - } + > div + { + width: 100%; + height: 0; + padding-top: 147.0588%; + background-size: cover; + background-color: #333333; + } - > p - { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - text-align: center; - margin-bottom: 0px; - opacity: 1; + > p + { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + text-align: center; + margin-bottom: 0px; + opacity: 1; - &.date - { - opacity: 0.8; - font-size: 0.8em; - } - } + &.date + { + opacity: 0.8; + font-size: 0.8em; + } + } - &:host-context(.hoverEnabled) &:hover - { - cursor: pointer; - } + &:host-context(.hoverEnabled) &:hover + { + cursor: pointer; + } } .scroll-row { - position: relative; + position: relative; - &:host-context(.hoverEnabled) &:hover - { - .scrollBtn - { - display: block; - } - } + &:host-context(.hoverEnabled) &:hover + { + .scrollBtn + { + display: block; + } + } } .scrollBtn { - padding: 0; - outline: none; - min-width: 0; - position: absolute; - top: 30%; - bottom: 40%; - display: none; + padding: 0; + outline: none; + min-width: 0; + position: absolute; + top: 30%; + bottom: 40%; + display: none; - &.leftBtn - { - left: 0; - padding-left: 10px; - padding-right: 2px; - } + &.leftBtn + { + left: 0; + padding-left: 10px; + padding-right: 2px; + } - &.rightBtn - { - right: 0; - padding-right: 10px; - padding-left: 2px; - } + &.rightBtn + { + right: 0; + padding-right: 10px; + padding-left: 2px; + } } diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts index 3612073b..8b7239dc 100644 --- a/src/environments/environment.prod.ts +++ b/src/environments/environment.prod.ts @@ -1,3 +1,3 @@ export const environment = { - production: true + production: true }; diff --git a/src/environments/environment.ts b/src/environments/environment.ts index 7b4f817a..a3e5f52b 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -3,7 +3,7 @@ // The list of file replacements can be found in `angular.json`. export const environment = { - production: false + production: false }; /* @@ -13,4 +13,4 @@ export const environment = { * This import should be commented out in production mode because it will have a negative impact * on performance if an error is thrown. */ -// import 'zone.js/dist/zone-error'; // Included with Angular CLI. +// import 'zone.js/dist/zone-error'; // Included with Angular CLI. diff --git a/src/index.html b/src/index.html index b0196e0c..704d26fd 100644 --- a/src/index.html +++ b/src/index.html @@ -1,15 +1,15 @@ - - - Kyoo - + + + Kyoo + - - - - - - - + + + + + + + diff --git a/src/libraries/subtitles.js b/src/libraries/subtitles.js index e7d48f5d..65341637 100644 --- a/src/libraries/subtitles.js +++ b/src/libraries/subtitles.js @@ -72,8 +72,8 @@ let SubtitleManager = (function() { } var det_C0_C1 = (C[0] * C[3]) - (C[2] * C[1]); - var det_C0_X = (C[0] * X[1]) - (C[2] * X[0]); - var det_X_C1 = (X[0] * C[3]) - (X[1] * C[1]); + var det_C0_X = (C[0] * X[1]) - (C[2] * X[0]); + var det_X_C1 = (X[0] * C[3]) - (X[1] * C[1]); var alpha_l = det_C0_C1 === 0 ? 0 : det_X_C1 / det_C0_C1; var alpha_r = det_C0_C1 === 0 ? 0 : det_C0_X / det_C0_C1; var segLength = norm(subtract(points[0], points[len-1])); @@ -209,8 +209,8 @@ let SubtitleManager = (function() { } else if (curr.start_time < prev.end_time) { let [prev_start_time,prev_start_value,prev_prev_accel] = points[points.length-2]; let last = points[points.length-1]; - last[0] = curr.start_time; - last[1] = prev_start_value + (prev.end_value - prev_start_value) * Math.pow((curr.start_time - prev_start_time) / (prev.end_time - prev_start_time), last[2]); + last[0] = curr.start_time; + last[1] = prev_start_value + (prev.end_value - prev_start_value) * Math.pow((curr.start_time - prev_start_time) / (prev.end_time - prev_start_time), last[2]); } points.push([curr.end_time,curr.end_value,curr.accel]); @@ -251,8 +251,8 @@ let SubtitleManager = (function() { let combineAdjacentBlocks = text => text.replace(reAdjacentBlocks,"$1$2").replace(reAdjacentBlocks,"$1$2"); // Map to convert SSAv4 alignment values to ASSv4+ values. - // 1, 2, 3, 5, 6, 7, 9, 10, 11 - let SSA_ALIGNMENT_MAP = [0, 1, 2, 3, 0, 7, 8, 9, 0, 4, 5, 6]; + // 1, 2, 3, 5, 6, 7, 9, 10, 11 + let SSA_ALIGNMENT_MAP = [0, 1, 2, 3, 0, 7, 8, 9, 0, 4, 5, 6]; // Alias for creating SVG elements. let createSVGElement = document.createElementNS.bind(document,"http://www.w3.org/2000/svg"); @@ -803,10 +803,10 @@ let SubtitleManager = (function() { return computedPaths[pathID]; path = path.toLowerCase(); - path = path.replace(/b/g,"C"); // cubic bézier curve to point 3 using point 1 and 2 as the control points - path = path.replace(/l/g,"L"); // line-to , + path = path.replace(/b/g,"C"); // cubic bézier curve to point 3 using point 1 and 2 as the control points + path = path.replace(/l/g,"L"); // line-to , path = path.replace(/m/g,"Z M"); // move-to , (closing the shape first) - path = path.replace(/n/g,"M"); // move-to , (without closing the shape) + path = path.replace(/n/g,"M"); // move-to , (without closing the shape) // extend b-spline to , // The "p" command is only supposed to be used after an "s" command, @@ -829,7 +829,7 @@ let SubtitleManager = (function() { // done by copying the starting location and the first two points // to the end of the spline. // before: x0 y0 s x1 y1 x2 y2 ... c - // after: x0 y0 s x1 y1 x2 y2 ... x0 y0 x1 y1 x2 y2 + // after: x0 y0 s x1 y1 x2 y2 ... x0 y0 x1 y1 x2 y2 changes = true; while (changes) { changes = false; @@ -842,10 +842,10 @@ let SubtitleManager = (function() { // 3rd degree uniform b-spline // SVG doesn't have this, so we have convert them to a series of // Bézier curves. - // x0 y0 s x1 y1 x2 y2 x3 y3 x4 y4 x5 y5 - // |-----------------------| Bézier 1 - // |---------------------| Bézier 2 - // |---------------------| Bézier 3 + // x0 y0 s x1 y1 x2 y2 x3 y3 x4 y4 x5 y5 + // |-----------------------| Bézier 1 + // |---------------------| Bézier 2 + // |---------------------| Bézier 3 // Since the start point for a Bézier is different from a spline, // we also need to add a move before the first Bézier and after the // last Bézier. However, the bounding box of b-splines is different @@ -1099,8 +1099,8 @@ let SubtitleManager = (function() { let newPieces = []; for (let piece of pieces) { // convert text - // from "{overide1}some text here{overridde2}more text ..." - // to [["override1",["some"," ","text"," ","here"]], ["override2",["more"," ","text"]], ...] + // from "{overide1}some text here{overridde2}more text ..." + // to [["override1",["some"," ","text"," ","here"]], ["override2",["more"," ","text"]], ...] // taking care not to split on non-breaking spaces or paths let data = piece.text.split("{").slice(1).map(a => a.split("}")).map(b => [b[0], isPath(b[0]) ? [b[1]] : b[1].split(/([^\S\xA0]+)/g)]); @@ -1230,19 +1230,19 @@ let SubtitleManager = (function() { if (slice.width) slices.push(slice); // Bubble pieces down through the slices while keeping the constraints: - // don't make a line shorter than the one after it - // don't include whitespace at the start or end + // don't make a line shorter than the one after it + // don't include whitespace at the start or end let bubbled, last_slice = slices.length - 1; do { bubbled = false; for (let i = last_slice; i > 0; --i) { let curr = slices[i], prev = slices[i-1]; - /* prev curr - |----------| |--| Before - XXXXXXXX XX XXXX - |------| |------| After - prev curr + /* prev curr + |----------| |--| Before + XXXXXXXX XX XXXX + |------| |------| After + prev curr */ while (true) { // Find the next non-whitespace piece @@ -1376,19 +1376,19 @@ let SubtitleManager = (function() { if (slice.width) slices.unshift(slice); // Bubble pieces up through the slices while keeping the constraints: - // don't make a line shorter than the one before it - // don't include whitespace at the start or end + // don't make a line shorter than the one before it + // don't include whitespace at the start or end let bubbled, last_slice = slices.length - 1; do { bubbled = false; for (let i = 0; i < last_slice; ++i) { let curr = slices[i], next = slices[i+1]; - /* curr next - |--| |----------| Before - XXXX XX XXXXXXXX - |------| |------| After - curr next + /* curr next + |--| |----------| Before + XXXX XX XXXXXXXX + |------| |------| After + curr next */ while (true) { // Find the next non-whitespace piece @@ -2196,8 +2196,8 @@ let SubtitleManager = (function() { this.group = null; this.Margin = {"L" : (data.MarginL && parseInt(data.MarginL,10)) || renderer.styles[data.Style].MarginL, - "R" : (data.MarginR && parseInt(data.MarginR,10)) || renderer.styles[data.Style].MarginR, - "V" : (data.MarginV && parseInt(data.MarginV,10)) || renderer.styles[data.Style].MarginV}; + "R" : (data.MarginR && parseInt(data.MarginR,10)) || renderer.styles[data.Style].MarginR, + "V" : (data.MarginV && parseInt(data.MarginV,10)) || renderer.styles[data.Style].MarginV}; this.time = {"start" : timeConvert(data.Start), "end" : timeConvert(data.End)}; this.time.milliseconds = (this.time.end - this.time.start) * 1000; @@ -2982,8 +2982,8 @@ let SubtitleManager = (function() { // Create the font-face CSS. css += "@font-face {\n"; - css += " font-family: \"" + fontname + "\";\n"; - css += " src: url(data:font/" + submime + ";charset=utf-8;base64," + btoa(fontdata) + ");\n"; + css += " font-family: \"" + fontname + "\";\n"; + css += " src: url(data:font/" + submime + ";charset=utf-8;base64," + btoa(fontdata) + ");\n"; css += "}\n\n"; } diff --git a/src/main.ts b/src/main.ts index c8d4c2ad..fb3a0fcb 100644 --- a/src/main.ts +++ b/src/main.ts @@ -6,8 +6,8 @@ import { environment } from './environments/environment'; import "hammerjs" if (environment.production) { - enableProdMode(); + enableProdMode(); } platformBrowserDynamic().bootstrapModule(AppModule) - .catch(err => console.error(err)); + .catch(err => console.error(err)); diff --git a/src/models/collection.ts b/src/models/collection.ts index ddf65d43..bb533373 100644 --- a/src/models/collection.ts +++ b/src/models/collection.ts @@ -2,11 +2,11 @@ import { Show } from "./show"; export interface Collection { - slug: string; - name: string; - poster: string; - overview: string; - startYear: number, + slug: string; + name: string; + poster: string; + overview: string; + startYear: number, endYear: number, - shows: Show[]; + shows: Show[]; } diff --git a/src/models/episode.ts b/src/models/episode.ts index ecc0c1f3..1f835cd7 100644 --- a/src/models/episode.ts +++ b/src/models/episode.ts @@ -1,13 +1,13 @@ export interface Episode { - seasonNumber: number; - episodeNumber: number; - title: string; - thumb: string; - link: string; - overview: string; - releaseDate; - runtime: number; + seasonNumber: number; + episodeNumber: number; + title: string; + thumb: string; + link: string; + overview: string; + releaseDate; + runtime: number; externalIDs: string; showTitle: string; } diff --git a/src/models/genre.ts b/src/models/genre.ts index 51fd90fb..8d4de25c 100644 --- a/src/models/genre.ts +++ b/src/models/genre.ts @@ -1,5 +1,5 @@ export interface Genre { - slug: string; - name: string; + slug: string; + name: string; } diff --git a/src/models/people.ts b/src/models/people.ts index 58339f7c..9fbc828a 100644 --- a/src/models/people.ts +++ b/src/models/people.ts @@ -1,9 +1,9 @@ export interface People { - slug: string; - name: string; - role: string; - type: string; + slug: string; + name: string; + role: string; + type: string; - externalIDs: string; + externalIDs: string; } diff --git a/src/models/season.ts b/src/models/season.ts index 899790b4..17939d3c 100644 --- a/src/models/season.ts +++ b/src/models/season.ts @@ -2,8 +2,8 @@ import { Episode } from "./episode"; export interface Season { - seasonNumber: number; - title: string; - overview: string; - episodes: Episode[]; + seasonNumber: number; + title: string; + overview: string; + episodes: Episode[]; } diff --git a/src/models/show.ts b/src/models/show.ts index 4f22ffd2..3f8eeb4b 100644 --- a/src/models/show.ts +++ b/src/models/show.ts @@ -5,20 +5,20 @@ import { Studio } from "./studio"; export interface Show { - slug: string; - title: string; - Aliases: string[]; - overview: string; - genres: Genre[]; - status: string; - studio: Studio; - people: People[]; - seasons: Season[]; - trailerUrl: string; - isCollection: boolean; + slug: string; + title: string; + Aliases: string[]; + overview: string; + genres: Genre[]; + status: string; + studio: Studio; + people: People[]; + seasons: Season[]; + trailerUrl: string; + isCollection: boolean; - startYear: number; - endYear : number; + startYear: number; + endYear : number; - externalIDs: string; + externalIDs: string; } diff --git a/src/models/studio.ts b/src/models/studio.ts index 6c0d63ee..f939f1df 100644 --- a/src/models/studio.ts +++ b/src/models/studio.ts @@ -1,5 +1,5 @@ export interface Studio { - slug: string; - name: string; + slug: string; + name: string; } diff --git a/src/models/watch-item.ts b/src/models/watch-item.ts index 93361c49..e0954ae5 100644 --- a/src/models/watch-item.ts +++ b/src/models/watch-item.ts @@ -2,31 +2,31 @@ import { Episode } from "./episode"; export interface WatchItem { - showTitle: string; - showSlug: string; - seasonNumber: number; - episodeNumber: number; - title: string; - link: string; - duration: number; - releaseDate; + showTitle: string; + showSlug: string; + seasonNumber: number; + episodeNumber: number; + title: string; + link: string; + duration: number; + releaseDate; - previousEpisode: string; - nextEpisode: Episode; + previousEpisode: string; + nextEpisode: Episode; container: string; video: Track; - audios: Track[]; - subtitles: Track[]; + audios: Track[]; + subtitles: Track[]; } export interface Track { - displayName: string; - title: string; - language: string; - isDefault: boolean; - isForced: boolean; - codec: string; - link: string; + displayName: string; + title: string; + language: string; + isDefault: boolean; + isForced: boolean; + codec: string; + link: string; } diff --git a/src/polyfills.ts b/src/polyfills.ts index aa665d6b..6e72908b 100644 --- a/src/polyfills.ts +++ b/src/polyfills.ts @@ -3,9 +3,9 @@ * You can add your own extra polyfills to this file. * * This file is divided into 2 sections: - * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. - * 2. Application imports. Files imported after ZoneJS that should be loaded before your main - * file. + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. * * The current setup is for so-called "evergreen" browsers; the last versions of browsers that * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), @@ -19,14 +19,14 @@ */ /** IE10 and IE11 requires the following for NgClass support on SVG elements */ -// import 'classlist.js'; // Run `npm install --save classlist.js`. +// import 'classlist.js'; // Run `npm install --save classlist.js`. /** * Web Animations `@angular/platform-browser/animations` * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). */ -// import 'web-animations-js'; // Run `npm install --save web-animations-js`. +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. /** * By default, zone.js will patch all possible macroTask and DomEvents @@ -45,17 +45,17 @@ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames * - * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js - * with the following flag, it will bypass `zone.js` patch for IE/Edge + * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js + * with the following flag, it will bypass `zone.js` patch for IE/Edge * - * (window as any).__Zone_enable_cross_context_check = true; + * (window as any).__Zone_enable_cross_context_check = true; * */ /*************************************************************************************************** * Zone JS is required by default for Angular itself. */ -import 'zone.js/dist/zone'; // Included with Angular CLI. +import 'zone.js/dist/zone'; // Included with Angular CLI. /*************************************************************************************************** diff --git a/src/styles.scss b/src/styles.scss index f0189096..a626d996 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -6,10 +6,10 @@ @import "~bootstrap/scss/variables"; $theme-colors: ( - "primary": #0a1128, - "secondary": #000000, - "accentColor": #e23c00, - "textPrimary": #ffffff + "primary": #0a1128, + "secondary": #000000, + "accentColor": #e23c00, + "textPrimary": #ffffff ); $body-bg: theme-color("primary"); @@ -18,12 +18,12 @@ $font-family-base: "Roboto", Arial, sans-serif; p { - opacity: .6; + opacity: .6; } h6 { - opacity: .87; + opacity: .87; } @import "~bootstrap/scss/bootstrap"; @@ -43,63 +43,63 @@ $theme: mat-dark-theme($primary, $accent); .mat-ripple-element { - background-color: rgba(255, 255, 255, .3) !important; + background-color: rgba(255, 255, 255, .3) !important; } .mat-card-header-text { - margin: 0 5px !important; + margin: 0 5px !important; } //Material Icons @font-face { - font-family: 'Material Icons'; - font-style: normal; - font-weight: 400; - src: url(/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */ - src: local('Material Icons'), - local('MaterialIcons-Regular'), - url(/iconfont/MaterialIcons-Regular.woff2) format('woff2'), - url(/iconfont/MaterialIcons-Regular.woff) format('woff'), - url(/iconfont/MaterialIcons-Regular.ttf) format('truetype'); + font-family: 'Material Icons'; + font-style: normal; + font-weight: 400; + src: url(/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */ + src: local('Material Icons'), + local('MaterialIcons-Regular'), + url(/iconfont/MaterialIcons-Regular.woff2) format('woff2'), + url(/iconfont/MaterialIcons-Regular.woff) format('woff'), + url(/iconfont/MaterialIcons-Regular.ttf) format('truetype'); } .material-icons { - font-family: 'Material Icons'; - font-weight: normal; - font-style: normal; - font-size: 24px; /* Preferred icon size */ - display: inline-block; - line-height: 1; - text-transform: none; - letter-spacing: normal; - word-wrap: normal; - white-space: nowrap; - direction: ltr; - /* Support for all WebKit browsers. */ - -webkit-font-smoothing: antialiased; - /* Support for Safari and Chrome. */ - text-rendering: optimizeLegibility; - /* Support for Firefox. */ - -moz-osx-font-smoothing: grayscale; - /* Support for IE. */ - font-feature-settings: 'liga'; + font-family: 'Material Icons'; + font-weight: normal; + font-style: normal; + font-size: 24px; /* Preferred icon size */ + display: inline-block; + line-height: 1; + text-transform: none; + letter-spacing: normal; + word-wrap: normal; + white-space: nowrap; + direction: ltr; + /* Support for all WebKit browsers. */ + -webkit-font-smoothing: antialiased; + /* Support for Safari and Chrome. */ + text-rendering: optimizeLegibility; + /* Support for Firefox. */ + -moz-osx-font-smoothing: grayscale; + /* Support for IE. */ + font-feature-settings: 'liga'; } mat-icon { - vertical-align: middle; + vertical-align: middle; } .snackError { - background-color: theme-color("accentColor"); - color: theme-color("textPrimary"); + background-color: theme-color("accentColor"); + color: theme-color("textPrimary"); } .scroll-row { - padding-left: 0; - padding-right: 0; + padding-left: 0; + padding-right: 0; } diff --git a/src/test.ts b/src/test.ts index 16317897..ec1961f2 100644 --- a/src/test.ts +++ b/src/test.ts @@ -3,16 +3,16 @@ import 'zone.js/dist/zone-testing'; import { getTestBed } from '@angular/core/testing'; import { - BrowserDynamicTestingModule, - platformBrowserDynamicTesting + BrowserDynamicTestingModule, + platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; declare const require: any; // First, initialize the Angular testing environment. getTestBed().initTestEnvironment( - BrowserDynamicTestingModule, - platformBrowserDynamicTesting() + BrowserDynamicTestingModule, + platformBrowserDynamicTesting() ); // Then we find all the tests. const context = require.context('./', true, /\.spec\.ts$/); diff --git a/src/videoSupport/playbackMethodDetector.js b/src/videoSupport/playbackMethodDetector.js index bff42085..4bbc0d39 100644 --- a/src/videoSupport/playbackMethodDetector.js +++ b/src/videoSupport/playbackMethodDetector.js @@ -3,157 +3,157 @@ Object.defineProperty(exports, "__esModule", { value: true }); var detect_browser_1 = require("detect-browser"); var method; (function (method) { - method["direct"] = "Direct Play"; - method["transmux"] = "Transmux"; - method["transcode"] = "Transcode"; + method["direct"] = "Direct Play"; + method["transmux"] = "Transmux"; + method["transcode"] = "Transcode"; })(method = exports.method || (exports.method = {})); ; var SupportList = /** @class */ (function () { - function SupportList() { - } - return SupportList; + function SupportList() { + } + return SupportList; }()); exports.SupportList = SupportList; function getPlaybackMethod(player, item) { - var supportList = getWhatIsSupported(player, item); - if (supportList.container) { - if (supportList.videoCodec && supportList.audioCodec) - return method.direct; - return method.transcode; - } - if (supportList.videoCodec && supportList.audioCodec) - return method.transmux; - return method.transcode; + var supportList = getWhatIsSupported(player, item); + if (supportList.container) { + if (supportList.videoCodec && supportList.audioCodec) + return method.direct; + return method.transcode; + } + if (supportList.videoCodec && supportList.audioCodec) + return method.transmux; + return method.transcode; } exports.getPlaybackMethod = getPlaybackMethod; function getWhatIsSupported(player, item) { - var supportList = new SupportList(); - var browser = detect_browser_1.detect(); - if (!browser) { - supportList.container = false; - supportList.videoCodec = false; - supportList.audioCodec = false; - } - else { - supportList.container = containerIsSupported(player, item.container, browser.name) && item.audios.length <= 1; - supportList.videoCodec = videoCodecIsSupported(player, item.video.codec, browser.name); - supportList.audioCodec = audioCodecIsSupported(player, item.audios.map(function (value) { return value.codec; }), browser.name); - } - return (supportList); + var supportList = new SupportList(); + var browser = detect_browser_1.detect(); + if (!browser) { + supportList.container = false; + supportList.videoCodec = false; + supportList.audioCodec = false; + } + else { + supportList.container = containerIsSupported(player, item.container, browser.name) && item.audios.length <= 1; + supportList.videoCodec = videoCodecIsSupported(player, item.video.codec, browser.name); + supportList.audioCodec = audioCodecIsSupported(player, item.audios.map(function (value) { return value.codec; }), browser.name); + } + return (supportList); } exports.getWhatIsSupported = getWhatIsSupported; function containerIsSupported(player, container, browser) { - var supported = false; - switch (container) { - case "asf": - supported = browser == "tizen" || browser == "orsay" || browser == "edge"; - //videoAudioCodecs = []; - break; - case "avi": - supported = browser == "tizen" || browser == "orsay" || browser == "edge"; - break; - case "mpg": - case "mpeg": - supported = browser == "tizen" || browser == "orsay" || browser == "edge"; - break; - case "flv": - supported = browser == "tizen" || browser == "orsay"; - break; - case "3gp": - case "mts": - case "trp": - case "vob": - case "vro": - supported = browser == "tizen" || browser == "orsay"; - break; - case "mov": - supported = browser == "tizen" || browser == "orsay" || browser == "edge" || browser == "chrome"; - break; - case "m2ts": - supported = browser == "tizen" || browser == "orsay" || browser == "edge"; - break; - case "wmv": - supported = browser == "tizen" || browser == "orsay" || browser == "edge"; - //videoAudioCodecs = []; - break; - case "ts": - supported = browser == "tizen" || browser == "orsay" || browser == "edge"; - break; - case "mp4": - case "m4v": - supported = true; - break; - case "mkv": - supported = browser == "tizen" || browser == "orsay" || browser == "chrome" || browser == "edge"; - if (supported) - break; - if (player.canPlayType("video/x-matroska") || player.canPlayType("video/mkv")) - supported = true; - break; - default: - break; - } - return supported; + var supported = false; + switch (container) { + case "asf": + supported = browser == "tizen" || browser == "orsay" || browser == "edge"; + //videoAudioCodecs = []; + break; + case "avi": + supported = browser == "tizen" || browser == "orsay" || browser == "edge"; + break; + case "mpg": + case "mpeg": + supported = browser == "tizen" || browser == "orsay" || browser == "edge"; + break; + case "flv": + supported = browser == "tizen" || browser == "orsay"; + break; + case "3gp": + case "mts": + case "trp": + case "vob": + case "vro": + supported = browser == "tizen" || browser == "orsay"; + break; + case "mov": + supported = browser == "tizen" || browser == "orsay" || browser == "edge" || browser == "chrome"; + break; + case "m2ts": + supported = browser == "tizen" || browser == "orsay" || browser == "edge"; + break; + case "wmv": + supported = browser == "tizen" || browser == "orsay" || browser == "edge"; + //videoAudioCodecs = []; + break; + case "ts": + supported = browser == "tizen" || browser == "orsay" || browser == "edge"; + break; + case "mp4": + case "m4v": + supported = true; + break; + case "mkv": + supported = browser == "tizen" || browser == "orsay" || browser == "chrome" || browser == "edge"; + if (supported) + break; + if (player.canPlayType("video/x-matroska") || player.canPlayType("video/mkv")) + supported = true; + break; + default: + break; + } + return supported; } //SHOULD CHECK FOR DEPTH (8bits ok but 10bits unsuported for almost every browsers) function videoCodecIsSupported(player, codec, browser) { - switch (codec) { - case "h264": - return !!player.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'); //The !! is used to parse the string as a bool - case "h265": - case "hevc": - if (browser == "tizen" || browser == "orsay" || browser == "xboxOne" || browser == "ios") - return true; - //SHOULD SUPPORT CHROMECAST ULTRA - // if (browser.chromecast) - // { - // var isChromecastUltra = userAgent.indexOf('aarch64') !== -1; - // if (isChromecastUltra) - // { - // return true; - // } - // } - return !!player.canPlayType('video/hevc; codecs="hevc, aac"'); - case "mpeg2video": - return browser == "orsay" || browser == "tizen" || browser == "edge"; - case "vc1": - return browser == "orsay" || browser == "tizen" || browser == "edge"; - case "msmpeg4v2": - return browser == "orsay" || browser == "tizen"; - case "vp8": - return !!player.canPlayType('video/webm; codecs="vp8'); - case "vp9": - return !!player.canPlayType('video/webm; codecs="vp9"'); - case "vorbis": - return browser == "orsay" || browser == "tizen" || !!player.canPlayType('video/webm; codecs="vp8'); - default: - return false; - } + switch (codec) { + case "h264": + return !!player.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'); //The !! is used to parse the string as a bool + case "h265": + case "hevc": + if (browser == "tizen" || browser == "orsay" || browser == "xboxOne" || browser == "ios") + return true; + //SHOULD SUPPORT CHROMECAST ULTRA + // if (browser.chromecast) + // { + // var isChromecastUltra = userAgent.indexOf('aarch64') !== -1; + // if (isChromecastUltra) + // { + // return true; + // } + // } + return !!player.canPlayType('video/hevc; codecs="hevc, aac"'); + case "mpeg2video": + return browser == "orsay" || browser == "tizen" || browser == "edge"; + case "vc1": + return browser == "orsay" || browser == "tizen" || browser == "edge"; + case "msmpeg4v2": + return browser == "orsay" || browser == "tizen"; + case "vp8": + return !!player.canPlayType('video/webm; codecs="vp8'); + case "vp9": + return !!player.canPlayType('video/webm; codecs="vp9"'); + case "vorbis": + return browser == "orsay" || browser == "tizen" || !!player.canPlayType('video/webm; codecs="vp8'); + default: + return false; + } } //SHOULD CHECK FOR NUMBER OF AUDIO CHANNEL (2 ok but 5 not in some browsers) function audioCodecIsSupported(player, codecs, browser) { - for (var _i = 0, codecs_1 = codecs; _i < codecs_1.length; _i++) { - var codec = codecs_1[_i]; - switch (codec) { - case "mp3": - return !!player.canPlayType('video/mp4; codecs="avc1.640029, mp4a.69"') || - !!player.canPlayType('video/mp4; codecs="avc1.640029, mp4a.6B"'); - case "aac": - return !!player.canPlayType('video/mp4; codecs="avc1.640029, mp4a.40.2"'); - case "mp2": - return browser == "orsay" || browser == "tizen" || browser == "edge"; - case "pcm_s16le": - case "pcm_s24le": - return browser == "orsay" || browser == "tizen" || browser == "edge"; - case "aac_latm": - return browser == "orsay" || browser == "tizen"; - case "opus": - return !!player.canPlayType('audio/ogg; codecs="opus"'); - case "flac": - return browser == "orsay" || browser == "tizen" || browser == "edge"; - default: - return false; - } - } + for (var _i = 0, codecs_1 = codecs; _i < codecs_1.length; _i++) { + var codec = codecs_1[_i]; + switch (codec) { + case "mp3": + return !!player.canPlayType('video/mp4; codecs="avc1.640029, mp4a.69"') || + !!player.canPlayType('video/mp4; codecs="avc1.640029, mp4a.6B"'); + case "aac": + return !!player.canPlayType('video/mp4; codecs="avc1.640029, mp4a.40.2"'); + case "mp2": + return browser == "orsay" || browser == "tizen" || browser == "edge"; + case "pcm_s16le": + case "pcm_s24le": + return browser == "orsay" || browser == "tizen" || browser == "edge"; + case "aac_latm": + return browser == "orsay" || browser == "tizen"; + case "opus": + return !!player.canPlayType('audio/ogg; codecs="opus"'); + case "flac": + return browser == "orsay" || browser == "tizen" || browser == "edge"; + default: + return false; + } + } } //# sourceMappingURL=playbackMethodDetector.js.map \ No newline at end of file diff --git a/src/videoSupport/playbackMethodDetector.ts b/src/videoSupport/playbackMethodDetector.ts index 53f82a15..cca418ca 100644 --- a/src/videoSupport/playbackMethodDetector.ts +++ b/src/videoSupport/playbackMethodDetector.ts @@ -121,16 +121,16 @@ function videoCodecIsSupported(player: HTMLVideoElement, codec: string, browser: case "hevc": if (browser == "tizen" || browser == "orsay" || browser == "xboxOne" || browser == "ios") return true; - //SHOULD SUPPORT CHROMECAST ULTRA - // if (browser.chromecast) - // { + //SHOULD SUPPORT CHROMECAST ULTRA + // if (browser.chromecast) + // { - // var isChromecastUltra = userAgent.indexOf('aarch64') !== -1; - // if (isChromecastUltra) - // { - // return true; - // } - // } + // var isChromecastUltra = userAgent.indexOf('aarch64') !== -1; + // if (isChromecastUltra) + // { + // return true; + // } + // } return !!player.canPlayType('video/hevc; codecs="hevc, aac"'); case "mpeg2video": return browser == "orsay" || browser == "tizen" || browser == "edge"; @@ -145,7 +145,7 @@ function videoCodecIsSupported(player: HTMLVideoElement, codec: string, browser: case "vorbis": return browser == "orsay" || browser == "tizen" || !!player.canPlayType('video/webm; codecs="vp8'); default: - return false; + return false; } } @@ -175,5 +175,5 @@ function audioCodecIsSupported(player: HTMLVideoElement, codecs: string[], brows default: return false; } - } + } }