Cleaning lists components

Kyoo/ClientApp/src/app/episodes-list/episodes-list.component.html

@@ -1,6 +1,6 @@
 <div class="root">
-  <div class="episodes" id="episodes">
+  <div class="episodes" #scrollView (scroll)="onScroll()">
-    <a class="episode" *ngFor="let episode of this.episodes; let i = index" id="el-{{i}}" routerLink="/watch/{{episode.link}}" href="/watch/{{this.showSlug}}-s{{episode.seasonNumber}}e{{episode.episodeNumber}}">
+    <a class="episode" *ngFor="let episode of this.episodes" #episode routerLink="/watch/{{episode.link}}" href="/watch/{{this.showSlug}}-s{{episode.seasonNumber}}e{{episode.episodeNumber}}">
       <div matRipple class="img" [style.background-image]="sanitize(episode.thumb)">
         <button mat-icon-button class="playBtn"><i class="material-icons playIcon">play_circle_outline</i></button>
       </div>
@@ -16,6 +16,6 @@
       </ng-template>
     </a>
   </div>
-  <button mat-raised-button color="accent" class="scrollBtn d-none" id="el-leftBtn" (click)="scrollLeft()"><mat-icon>arrow_left</mat-icon></button>
+  <button mat-raised-button color="accent" class="scrollBtn leftBtn d-none" #leftBtn (click)="scrollLeft()"><mat-icon>arrow_left</mat-icon></button>
-  <button mat-raised-button color="accent" class="scrollBtn" id="el-rightBtn" (click)="scrollRight()"><mat-icon>arrow_right</mat-icon></button>
+  <button mat-raised-button color="accent" class="scrollBtn rightBtn" #rightBtn (click)="scrollRight()"><mat-icon>arrow_right</mat-icon></button>
 </div>

Kyoo/ClientApp/src/app/episodes-list/episodes-list.component.scss

@@ -164,14 +164,14 @@
   bottom: 60%;
   display: none;
 
-  &#el-leftBtn
+  &.leftBtn
   {
     left: 0;
     padding-left: 10px;
     padding-right: 2px;
   }
 
-  &#el-rightBtn
+  &.rightBtn
   {
     right: 0;
     padding-right: 10px;

Kyoo/ClientApp/src/app/episodes-list/episodes-list.component.ts

@@ -1,59 +1,60 @@
-import { Component, OnInit, Input, SimpleChange } from '@angular/core';
+import { Component, ElementRef, Input, ViewChild } from '@angular/core';
-import { Episode } from "../../models/episode";
+import { MatButton } from "@angular/material/button";
 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']
 })
-export class EpisodesListComponent implements OnInit
+export class EpisodesListComponent
 {
 	@Input() displayShowTitle: boolean = false;
   @Input() episodes: Episode[];
-  private root: HTMLElement;
+	@ViewChild("scrollView", { static: true }) private scrollView: ElementRef;
+	@ViewChild("leftBtn", { static: false }) private leftBtn: MatButton;
+	@ViewChild("rightBtn", { static: false }) private rightBtn: MatButton;
+	@ViewChild("episode", { static: false }) private episode: ElementRef;
 
 	constructor(private sanitizer: DomSanitizer) { }
 
-  ngOnInit()
+	scrollLeft()
 	{
-    this.root = document.getElementById("episodes");
+		let scroll: number = this.roundScroll(this.scrollView.nativeElement.offsetWidth * 0.80);
+		this.scrollView.nativeElement.scrollBy({ top: 0, left: -scroll, behavior: "smooth" });
+	}
+
+	scrollRight()
+	{
+		let scroll: number = this.roundScroll(this.scrollView.nativeElement.offsetWidth * 0.80);
+		this.scrollView.nativeElement.scrollBy({ top: 0, left: scroll, behavior: "smooth" });
+	}
+
+	roundScroll(offset: number): number
+	{
+		let episodeSize: number = this.episode.nativeElement.scrollWidth;
+
+		offset = Math.round(offset / episodeSize) * episodeSize;
+		if (offset == 0)
+			offset = episodeSize;
+		return offset;
+	}
+
+	onScroll()
+	{
+		if (this.scrollView.nativeElement.scrollLeft <= 0)
+			this.leftBtn._elementRef.nativeElement.classList.add("d-none");
+		else
+			this.leftBtn._elementRef.nativeElement.classList.remove("d-none");
+		if (this.scrollView.nativeElement.scrollLeft >= this.scrollView.nativeElement.scrollWidth - this.scrollView.nativeElement.clientWidth)
+			this.rightBtn._elementRef.nativeElement.classList.add("d-none");
+		else
+			this.rightBtn._elementRef.nativeElement.classList.remove("d-none");
 	}
 
   sanitize(url: string)
   {
     return this.sanitizer.bypassSecurityTrustStyle("url(" + url + ")");
   }
-
-  scrollLeft()
-  {
-    let scroll: number = this.roundScroll(this.root.offsetWidth * 0.80);
-    this.root.scrollBy({ top: 0, left: -scroll, behavior: "smooth" });
-
-    document.getElementById("el-rightBtn").classList.remove("d-none");
-
-    if (this.root.scrollLeft - scroll <= 0)
-      document.getElementById("el-leftBtn").classList.add("d-none");
-  }
-
-  scrollRight()
-  {
-    let scroll: number = this.roundScroll(this.root.offsetWidth * 0.80);
-    this.root.scrollBy({ top: 0, left: scroll, behavior: "smooth" });
-    document.getElementById("el-leftBtn").classList.remove("d-none");
-
-    if (this.root.scrollLeft + scroll >= this.root.scrollWidth - this.root.clientWidth)
-      document.getElementById("el-rightBtn").classList.add("d-none");
-  }
-
-  roundScroll(offset: number): number
-  {
-    let episodeSize: number = document.getElementById("el-1").scrollWidth;
-    offset = Math.round(offset / episodeSize) * episodeSize;
-
-    if (offset == 0)
-      offset = episodeSize;
-
-    return offset;
-  }
 }

Kyoo/ClientApp/src/app/people-list/people-list.component.html

@@ -1,11 +1,11 @@
 <div class="scroll-row mb-5">
-  <div class="people-container" id="peopleScroll">
+  <div class="people-container" #scrollView (scroll)="onScroll()">
     <a class="people" *ngFor="let people of this.people" routerLink="/people/{{people.slug}}" href="/people/{{people.slug}}">
       <div matRipple [style.background-image]="getPeopleIcon(people.slug)"> </div>
       <h6 class="name">{{people.name}}</h6>
       <p class="role">{{people.role}}</p>
     </a>
   </div>
-  <button mat-raised-button color="accent" class="scrollBtn d-none" id="pl-leftBtn" (click)="scrollLeft()"><mat-icon>arrow_left</mat-icon></button>
+  <button mat-raised-button color="accent" class="scrollBtn leftBtn d-none" #leftBtn (click)="scrollLeft()"><mat-icon>arrow_left</mat-icon></button>
-  <button mat-raised-button color="accent" class="scrollBtn" id="pl-rightBtn" (click)="scrollRight()"><mat-icon>arrow_right</mat-icon></button>
+  <button mat-raised-button color="accent" class="scrollBtn rightBtn" #rightBtn (click)="scrollRight()"><mat-icon>arrow_right</mat-icon></button>
 </div>

Kyoo/ClientApp/src/app/people-list/people-list.component.scss

@@ -123,33 +123,17 @@
   bottom: 40%;
   display: none;
 
-  &#pl-leftBtn
+  &.leftBtn
   {
     left: 0;
     padding-left: 10px;
     padding-right: 2px;
   }
 
-  &#pl-rightBtn
+  &.rightBtn
   {
     right: 0;
     padding-right: 10px;
     padding-left: 2px;
   }
 }
-
-#leftBtn
-{
-  position: absolute;
-  left: 0;
-  top: 33%;
-  outline: none;
-}
-
-#rightBtn
-{
-  position: absolute;
-  right: 0;
-  top: 33%;
-  outline: none;
-}

Kyoo/ClientApp/src/app/people-list/people-list.component.ts

@@ -1,4 +1,5 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, ElementRef, Input, ViewChild } from '@angular/core';
+import { MatButton } from "@angular/material/button";
 import { DomSanitizer } from "@angular/platform-browser";
 import { People } from "../../models/people";
 
@@ -7,38 +8,37 @@ import { People } from "../../models/people";
 	templateUrl: './people-list.component.html',
 	styleUrls: ['./people-list.component.scss']
 })
-export class PeopleListComponent implements OnInit
+export class PeopleListComponent
 {
 	@Input() people: People[];
-	private peopleScroll: HTMLElement;
+	@ViewChild("scrollView", { static: true }) private scrollView: ElementRef;
+	@ViewChild("leftBtn", { static: false }) private leftBtn: MatButton;
+	@ViewChild("rightBtn", { static: false }) private rightBtn: MatButton;
 
 	constructor(private sanitizer: DomSanitizer) { }
 
-	ngOnInit()
-	{
-		this.peopleScroll = document.getElementById("peopleScroll");
-	}
-
 	scrollLeft()
 	{
-		let scroll: number = this.peopleScroll.offsetWidth * 0.80;
+		let scroll: number = this.scrollView.nativeElement.offsetWidth * 0.80;
-		this.peopleScroll.scrollBy({ top: 0, left: -scroll, behavior: "smooth" });
+		this.scrollView.nativeElement.scrollBy({ top: 0, left: -scroll, behavior: "smooth" });
-
-		document.getElementById("pl-rightBtn").classList.remove("d-none");
-
-		if (this.peopleScroll.scrollLeft - scroll <= 0)
-			document.getElementById("pl-leftBtn").classList.add("d-none");
 	}
 
 	scrollRight()
 	{
-		let scroll: number = this.peopleScroll.offsetWidth * 0.80;
+		let scroll: number = this.scrollView.nativeElement.offsetWidth * 0.80;
-		this.peopleScroll.scrollBy({ top: 0, left: scroll, behavior: "smooth" });
+		this.scrollView.nativeElement.scrollBy({ top: 0, left: scroll, behavior: "smooth" });
-		console.log(document.getElementById("pl-leftBtn"));
+	}
-		document.getElementById("pl-leftBtn").classList.remove("d-none");
 
-		if (this.peopleScroll.scrollLeft + scroll >= this.peopleScroll.scrollWidth - this.peopleScroll.clientWidth)
+	onScroll()
-			document.getElementById("pl-rightBtn").classList.add("d-none");
+	{
+		if (this.scrollView.nativeElement.scrollLeft <= 0)
+			this.leftBtn._elementRef.nativeElement.classList.add("d-none");
+		else
+			this.leftBtn._elementRef.nativeElement.classList.remove("d-none");
+		if (this.scrollView.nativeElement.scrollLeft >= this.scrollView.nativeElement.scrollWidth - this.scrollView.nativeElement.clientWidth)
+			this.rightBtn._elementRef.nativeElement.classList.add("d-none");
+		else
+			this.rightBtn._elementRef.nativeElement.classList.remove("d-none");
 	}
 
 	getPeopleIcon(slug: string)

Kyoo/ClientApp/src/app/shows-list/shows-list.component.html

@@ -1,5 +1,5 @@
 <div class="scroll-row mb-5">
-  <div class="shows-container">
+  <div class="shows-container" #scrollView (scroll)="onScroll()">
     <a class="show" *ngFor="let show of this.shows" routerLink="/show/{{show.slug}}" href="/show/{{show.slug}}">
       <div matRipple [style.background-image]="getThumb(show.slug)"> </div>
       <p class="title">{{show.title}}</p>
@@ -7,6 +7,6 @@
       <ng-template #elseBlock><p class="date">{{show.startYear}}</p></ng-template>
     </a>
   </div>
-  <button mat-raised-button color="accent" class="scrollBtn d-none" (click)="scrollLeft()"><mat-icon>arrow_left</mat-icon></button>
+  <button mat-raised-button color="accent" class="scrollBtn leftBtn d-none" #leftBtn (click)="scrollLeft()"><mat-icon>arrow_left</mat-icon></button>
-  <button mat-raised-button color="accent" class="scrollBtn" (click)="scrollRight()"><mat-icon>arrow_right</mat-icon></button>
+  <button mat-raised-button color="accent" class="scrollBtn rightBtn" #rightBtn (click)="scrollRight()"><mat-icon>arrow_right</mat-icon></button>
 </div>

Kyoo/ClientApp/src/app/shows-list/shows-list.component.scss

@@ -109,77 +109,6 @@
   }
 }
 
-
-/*.people
-{
-  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(md)
-  {
-    width: 20%;
-  }
-
-  @include media-breakpoint-up(lg)
-  {
-    width: 15%;
-  }
-
-  @include media-breakpoint-up(xl)
-  {
-    width: 10%;
-  }
-
-  > 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;
-
-    &.role
-    {
-      font-size: 0.8em;
-    }
-  }
-
-  &:hover
-  {
-    cursor: pointer;
-
-    > img
-    {
-      outline: solid var(--accentColor);
-    }
-
-    .name
-    {
-      text-decoration: underline;
-    }
-  }
-}*/
-
 .scroll-row
 {
   position: relative;
@@ -203,33 +132,17 @@
   bottom: 40%;
   display: none;
 
-  &#pl-leftBtn
+  &.leftBtn
   {
     left: 0;
     padding-left: 10px;
     padding-right: 2px;
   }
 
-  &#pl-rightBtn
+  &.rightBtn
   {
     right: 0;
     padding-right: 10px;
     padding-left: 2px;
   }
 }
-
-#leftBtn
-{
-  position: absolute;
-  left: 0;
-  top: 33%;
-  outline: none;
-}
-
-#rightBtn
-{
-  position: absolute;
-  right: 0;
-  top: 33%;
-  outline: none;
-}

Kyoo/ClientApp/src/app/shows-list/shows-list.component.ts

@@ -1,4 +1,5 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, ElementRef, Input, ViewChild } from '@angular/core';
+import { MatButton } from "@angular/material/button";
 import { DomSanitizer } from "@angular/platform-browser";
 import { Show } from "../../models/show";
 
@@ -7,37 +8,37 @@ import { Show } from "../../models/show";
 	templateUrl: './shows-list.component.html',
 	styleUrls: ['./shows-list.component.scss']
 })
-export class ShowsListComponent implements OnInit
+export class ShowsListComponent
 {
 	@Input() shows: Show[];
-	private showsScroll: HTMLElement;
+	@ViewChild("scrollView", { static: true }) private scrollView: ElementRef;
+	@ViewChild("leftBtn", { static: false }) private leftBtn: MatButton;
+	@ViewChild("rightBtn", { static: false }) private rightBtn: MatButton;
 
 	constructor(private sanitizer: DomSanitizer) { }
 
-	ngOnInit()
-	{
-		this.showsScroll = document.getElementById("showsScroll");
-	}
-
 	scrollLeft()
 	{
-		let scroll: number = this.showsScroll.offsetWidth * 0.80;
+		let scroll: number = this.scrollView.nativeElement.offsetWidth * 0.80;
-		this.showsScroll.scrollBy({ top: 0, left: -scroll, behavior: "smooth" });
+		this.scrollView.nativeElement.scrollBy({ top: 0, left: -scroll, behavior: "smooth" });
-
-		document.getElementById("pl-rightBtn").classList.remove("d-none");
-
-		if (this.showsScroll.scrollLeft - scroll <= 0)
-			document.getElementById("pl-leftBtn").classList.add("d-none");
 	}
 
 	scrollRight()
 	{
-		let scroll: number = this.showsScroll.offsetWidth * 0.80;
+		let scroll: number = this.scrollView.nativeElement.offsetWidth * 0.80;
-		this.showsScroll.scrollBy({ top: 0, left: scroll, behavior: "smooth" });
+		this.scrollView.nativeElement.scrollBy({ top: 0, left: scroll, behavior: "smooth" });
-		document.getElementById("pl-leftBtn").classList.remove("d-none");
+	}
 
-		if (this.showsScroll.scrollLeft + scroll >= this.showsScroll.scrollWidth - this.showsScroll.clientWidth)
+	onScroll()
-			document.getElementById("pl-rightBtn").classList.add("d-none");
+	{
+		if (this.scrollView.nativeElement.scrollLeft <= 0)
+			this.leftBtn._elementRef.nativeElement.classList.add("d-none");
+		else
+			this.leftBtn._elementRef.nativeElement.classList.remove("d-none");
+		if (this.scrollView.nativeElement.scrollLeft >= this.scrollView.nativeElement.scrollWidth - this.scrollView.nativeElement.clientWidth)
+			this.rightBtn._elementRef.nativeElement.classList.add("d-none");
+		else
+			this.rightBtn._elementRef.nativeElement.classList.remove("d-none");
 	}
 
 	getThumb(slug: string)