Fixing loading indicator

src/app/app.module.ts

@@ -19,7 +19,12 @@ import {CollectionComponent} from './pages/collection/collection.component';
 import { EpisodesListComponent } from './components/episodes-list/episodes-list.component';
 import { NotFoundComponent } from './pages/not-found/not-found.component';
 import { PeopleListComponent } from './components/people-list/people-list.component';
-import { BufferToWidthPipe, FormatTimePipe, PlayerComponent } from "./pages/player/player.component";
+import {
+	BufferToWidthPipe,
+	FormatTimePipe,
+	PlayerComponent,
+	VolumeToButtonPipe
+} from "./pages/player/player.component";
 import { SearchComponent } from './pages/search/search.component';
 import { ShowDetailsComponent } from './pages/show-details/show-details.component';
 import { FormsModule , ReactiveFormsModule} from "@angular/forms";
@@ -61,7 +66,8 @@ import {MatBadgeModule} from "@angular/material/badge";
 		MetadataEditComponent,
 		ShowGridComponent,
 		FormatTimePipe,
-		BufferToWidthPipe
+		BufferToWidthPipe,
+		VolumeToButtonPipe
 	],
 	imports: [
 		BrowserModule,

src/app/pages/player/player.component.html

@@ -7,7 +7,7 @@
 		       poster="backdrop/{{this.item.showSlug}}"
 		       autoplay muted
 		       (click)="this.videoClicked()"
-		       (play)="this.playing = true"
+		       (play)="this.playing = true; this.loading = false"
 		       (pause)="this.playing = false"
 		       (ended)="this.next()"
 		       [volume]="this.volume / 100"
@@ -122,7 +122,7 @@
 						<div id="volume" [ngClass]="{'d-none': this.isMobile}">
 							<button mat-icon-button matTooltipPosition="above" matTooltip="Volume"
 							        (click)="this.muted = !this.muted">
-								<mat-icon>{{this.getVolumeBtn()}}</mat-icon>
+								<mat-icon>{{this.volume | volumeToButton: this.muted}}</mat-icon>
 							</button>
 
 							<mat-slider [value]="this.volume" (input)="this.volume = $event.value"></mat-slider>

src/app/pages/player/player.component.ts

@@ -57,6 +57,25 @@ export class BufferToWidthPipe implements PipeTransform
 	}
 }
 
+@Pipe({
+	name: "volumeToButton",
+	pure: true
+})
+export class VolumeToButtonPipe implements PipeTransform
+{
+	transform(volume: number, muted: boolean): string
+	{
+		if (volume == 0 || muted)
+			return "volume_off";
+		else if (volume < 25)
+			return "volume_mute";
+		else if (volume < 65)
+			return "volume_down";
+		else
+			return "volume_up";
+	}
+}
+
 @Component({
 	selector: "app-player",
 	templateUrl: "./player.component.html",
@@ -358,18 +377,6 @@ export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit
 			document.body.requestFullscreen();
 	}
 
-	getVolumeBtn(): string
-	{
-		if (this.volume == 0 || this.muted)
-			return "volume_off";
-		else if (this.volume < 25)
-			return "volume_mute";
-		else if (this.volume < 65)
-			return "volume_down";
-		else
-			return "volume_up";
-	}
-
 	selectSubtitle(subtitle: Track, changeUrl: boolean = true)
 	{
 		if (changeUrl)