add homepage files and display a random backdrop image

src/app/app-routing.module.ts

@@ -23,8 +23,15 @@ import { SearchComponent } from "./pages/search/search.component";
 import { SearchResult } from "./models/search-result";
 import { PlayerComponent } from "./pages/player/player.component";
 import { WatchItem } from "./models/watch-item";
+import { HomepageComponent } from "./pages/homepage/homepage.component";
 
 const routes: Routes = [
+	{path: "", component: HomepageComponent, pathMatch: "full",
+		resolve: {show: ItemResolver.forResource<Show>("shows/akudama-drive?fields=studio,genres,seasons,externalIDs")},
+		// canLoad: [AuthGuard.forPermissions("read")],
+		// canActivate: [AuthGuard.forPermissions("read")],
+		runGuardsAndResolvers: "always"
+	},
 	{path: "browse", component: ItemsGridComponent, pathMatch: "full",
 		resolve: {items: PageResolver.forResource<LibraryItem>("items", ItemsGridComponent.routeMapper)},
 		// canLoad: [AuthGuard.forPermissions("read")],
@@ -90,9 +97,6 @@ const routes: Routes = [
 		// canActivate: [AuthGuard.forPermissions("play")]
 	},
 
-	// TODO implement an home page.
-
-	{path: "", pathMatch: "full", redirectTo: "/browse"},
 	{path: "**", component: NotFoundComponent}
 ];
 

src/app/app.module.ts

@@ -50,6 +50,7 @@ import { StartupService } from "./services/startup.service";
 import { LongPressDirective } from "./misc/long-press.directive";
 import { DatetimeInterceptorService } from "./services/datetime-interceptor.service";
 import { MatDatepickerModule } from "@angular/material/datepicker";
+import { HomepageComponent } from './pages/homepage/homepage.component';
 
 
 @NgModule({
@@ -73,7 +74,8 @@ import { MatDatepickerModule } from "@angular/material/datepicker";
 		BufferToWidthPipe,
 		VolumeToButtonPipe,
 		SupportedButtonPipe,
-		LongPressDirective
+		LongPressDirective,
+		HomepageComponent
 	],
 	imports: [
 		BrowserModule,

src/app/pages/homepage/homepage.component.html

@@ -0,0 +1,2 @@
+<div class="backdrop"> <img id="backdrop" [src]="this.show.backdrop" alt="backdrop" /></div>
+

src/app/pages/homepage/homepage.component.scss

@@ -0,0 +1,47 @@
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins/breakpoints";
+@import "variables";
+
+//.recommendation{
+//	margin: auto;
+//	width: 90%;
+//	border: 2px solid #e23c00;
+//	padding-bottom: 30%;
+//	text-align: center;
+//}
+.backdrop
+{
+	margin-top: -68px;
+	position: relative;
+	z-index: -1;
+
+	> img
+	{
+		display:block;
+		margin-left: auto;
+		margin-right: auto;
+		width: 100%;
+		max-height: 100vh;
+		object-fit: cover;
+		min-height: 50vh;
+
+		@include media-breakpoint-up(md)
+		{
+			min-height: 100vh;
+		}
+	}
+
+	&: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%),
+		   				  linear-gradient(to left,rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.7));
+
+	}
+}

src/app/pages/homepage/homepage.component.ts

@@ -0,0 +1,81 @@
+import { AfterViewInit, Component, OnDestroy, OnInit } from "@angular/core";
+import { Show } from "../../models/resources/show";
+import { DomSanitizer, SafeStyle, Title } from "@angular/platform-browser";
+import { Season } from "../../models/resources/season";
+import { Page } from "../../models/page";
+import { Episode } from "../../models/resources/episode";
+import { People } from "../../models/resources/people";
+import { ActivatedRoute, Router } from "@angular/router";
+import { MatSnackBar } from "@angular/material/snack-bar";
+import { MatDialog } from "@angular/material/dialog";
+import { HttpClient } from "@angular/common/http";
+import { EpisodeService, PeopleService, SeasonService } from "../../services/api.service";
+
+@Component({
+  selector: "app-homepage",
+  templateUrl: "./homepage.component.html",
+  styleUrls: ["./homepage.component.scss"]
+})
+export class HomepageComponent implements AfterViewInit, OnDestroy
+{
+	show: Show;
+	seasons: Season[];
+	season = 1;
+	episodes: Page<Episode>[] = [];
+	people: Page<People>;
+
+	private scrollZone: HTMLElement;
+	private toolbar: HTMLElement;
+	private backdrop: HTMLElement;
+
+	constructor(private route: ActivatedRoute,
+				         private snackBar: MatSnackBar,
+				         private sanitizer: DomSanitizer,
+				         private title: Title,
+				         private router: Router,
+				         private dialog: MatDialog,
+				         private http: HttpClient,
+				         private seasonService: SeasonService,
+				         private episodeService: EpisodeService,
+				         private peopleService: PeopleService)
+	{
+		this.route.queryParams.subscribe(params =>
+		{
+			this.season = params.season ?? 1;
+		});
+
+		this.route.data.subscribe(data =>
+		{
+			this.show = data.show;
+			//
+			// this.peopleService.getFromShow(this.show.slug).subscribe(x => this.people = x);
+
+			// if (this.show.isMovie)
+			// 	return;
+		});
+	}
+
+	// getThumb(item: Show): SafeStyle
+	// {
+	// 	return this.sanitizer.bypassSecurityTrustStyle(`url(${item.poster})`);
+	// }
+
+  ngAfterViewInit(): void
+  {
+	  this.scrollZone = document.getElementById("main");
+	  this.toolbar = document.getElementById("toolbar");
+	  this.backdrop = document.getElementById("backdrop");
+	  this.toolbar.setAttribute("style", `background-color: rgba(0, 0, 0, 0) !important`);
+	  this.scrollZone.style.marginTop = "0";
+	  this.scrollZone.style.maxHeight = "100vh";
+	  // this.scrollZone.addEventListener("scroll", () => this.scroll());
+  }
+
+  ngOnDestroy(): void
+  {
+	  this.title.setTitle("Kyoo");
+	  this.toolbar.setAttribute("style", `background-color: #000000 !important`);
+	  this.scrollZone.style.marginTop = null;
+	  this.scrollZone.style.maxHeight = null;
+  }
+}