Mobile support finished.

Kyoo/ClientApp/src/app/app.component.ts

@@ -4,52 +4,46 @@ import { Event, Router, NavigationStart, NavigationEnd, NavigationCancel, Naviga
 import * as $ from "jquery";
 
 @Component({
-  selector: 'app-root',
+	selector: 'app-root',
-  templateUrl: './app.component.html',
+	templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+	styleUrls: ['./app.component.scss']
 })
 export class AppComponent
 {
-  libraries: Library[];
+	libraries: Library[];
-  isLoading: boolean = false;
+	isLoading: boolean = false;
 
-  constructor(http: HttpClient, private router: Router)
+	constructor(http: HttpClient, private router: Router)
-  {
+	{
-    http.get<Library[]>("api/libraries").subscribe(result =>
+		http.get<Library[]>("api/libraries").subscribe(result =>
-    {
+		{
-      this.libraries = result;
+			this.libraries = result;
-    }, error => console.error(error));
+		}, error => console.error(error));
 
-    this.router.events.subscribe((event: Event) =>
+		this.router.events.subscribe((event: Event) =>
-    {
+		{
-      switch (true)
+			switch (true)
-      {
+			{
-        case event instanceof NavigationStart:
+				case event instanceof NavigationStart:
-        {
+					this.isLoading = true;
-          this.isLoading = true;
+					break;
-          break;
-        }
 
-        case event instanceof NavigationEnd:
+				case event instanceof NavigationEnd:
-        case event instanceof NavigationCancel:
+				case event instanceof NavigationCancel:
-        case event instanceof NavigationError:
+				case event instanceof NavigationError:
-        {
+					this.isLoading = false;
-          this.isLoading = false;
+					break;
-          break;
+				default:
-        }
+					this.isLoading = false;
-        default:
+					break;
-        {
+			}
-          this.isLoading = false;
+		});
-          break;
+	}
-        }
-      }
-    });
-  }
 }
 
 interface Library
 {
-  id: number;
+	id: number;
-  slug: string;
+	slug: string;
-  name: string;
+	name: string;
 }

Kyoo/ClientApp/src/app/app.module.ts

@@ -1,6 +1,7 @@
 import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
+import { MatRippleModule } from '@angular/material/core';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
@@ -13,11 +14,11 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { BrowseComponent } from './browse/browse.component';
+import { CollectionComponent } from './collection/collection.component';
 import { EpisodesListComponent } from './episodes-list/episodes-list.component';
 import { NotFoundComponent } from './not-found/not-found.component';
 import { PlayerComponent } from './player/player.component';
 import { ShowDetailsComponent } from './show-details/show-details.component';
-import { CollectionComponent } from './collection/collection.component';
 
 
 @NgModule({
@@ -42,7 +43,8 @@ import { CollectionComponent } from './collection/collection.component';
     MatSelectModule,
     MatMenuModule,
     MatSliderModule,
-    MatTooltipModule
+	  MatTooltipModule,
+	  MatRippleModule
   ],
   providers: [],
   bootstrap: [AppComponent]

Kyoo/ClientApp/src/app/browse/browse.component.html

@@ -22,7 +22,7 @@
 
 <div class="container-fluid justify-content-center">
   <a class="show" *ngFor="let show of this.shows" [href]="getLink(show)" [routerLink]="getLink(show)">
-    <img [style.background-image]="getThumb(show.slug)" />
+    <div matRipple [style.background-image]="getThumb(show.slug)" > </div>
     <p class="title">{{show.title}}</p>
     <p class="date" *ngIf="show.endYear; else elseBlock">{{show.startYear}} - {{show.endYear}}</p>
     <ng-template #elseBlock><p class="date">{{show.startYear}}</p></ng-template>

Kyoo/ClientApp/src/app/browse/browse.component.scss

@@ -53,7 +53,7 @@ button
 
   &:focus, &:hover
   {
-    > img
+    > div
     {
       outline: solid var(--accentColor);
     }
@@ -64,7 +64,7 @@ button
     }
   }
 
-  > img
+  > div
   {
     width: 100%;
     height: 0;

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

@@ -1,7 +1,7 @@
 <div class="root">
   <div class="episodes" id="episodes">
     <a class="episode" *ngFor="let episode of this.episodes" id="el-{{episode.episodeNumber}}" routerLink="/watch/{{this.showSlug}}-s{{episode.seasonNumber}}e{{episode.episodeNumber}}" href="/watch/{{this.showSlug}}-s{{episode.seasonNumber}}e{{episode.episodeNumber}}">
-      <div class="img" [style.background-image]="sanitize(episode.thumb)">
+      <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>
       <h6 *ngIf="episode.seasonNumber != 0; else elseBlock;"  class="title">S{{episode.seasonNumber}}:E{{episode.episodeNumber}} - {{episode.title}}</h6>

Kyoo/ClientApp/src/app/player/player.component.ts

@@ -202,17 +202,26 @@ export class PlayerComponent implements OnInit
     }, 1000);
 
     document.addEventListener("fullscreenchange", () =>
-    {
+	  {
-      if (document.fullscreenElement != null)
+		  if (navigator.userAgent.match(/Mobi/))
-      {
+		  {
-        this.fullscreenIcon = "fullscreen_exit";
+			  if (document.fullscreenElement == null)
-        this.fullscreenTooltip = "Exit fullscreen";
+			    this.router.navigate(["/show/" + this.item.showSlug]);
-      }
+		  }
-      else
+		  else
-      {
+		  {
-        this.fullscreenIcon = "fullscreen";
+			  if (document.fullscreenElement != null)
-        this.fullscreenTooltip = "Fullscreen";
+			  {
-      }
+				  this.fullscreenIcon = "fullscreen_exit";
+				  this.fullscreenTooltip = "Exit fullscreen";
+			  }
+			  else
+			  {
+				  this.fullscreenIcon = "fullscreen";
+				  this.fullscreenTooltip = "Fullscreen";
+			  }
+		  }
+      
     });
 
     $(window).keydown((e) =>

Kyoo/ClientApp/src/app/show-details/show-details.component.html

@@ -81,7 +81,7 @@
 <div class="scroll-row mb-5">
   <div class="people-container" id="peopleScroll">
     <a class="people" *ngFor="let people of this.show.people" routerLink="/people/{{people.slug}}">
-      <img [style.background-image]="getPeopleIcon(people.slug)" />
+      <div matRipple [style.background-image]="getPeopleIcon(people.slug)" > </div>
       <h6 class="name">{{people.name}}</h6>
       <p class="role">{{people.role}}</p>
     </a>

Kyoo/ClientApp/src/app/show-details/show-details.component.scss

@@ -249,7 +249,7 @@ hr
     width: 10%;
   }
 
-  > img
+  > div
   {
     width: 100%;
     height: 0;

Kyoo/ClientApp/src/index.html

@@ -6,6 +6,7 @@
     <base href="/">
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="theme-color" content="#000000" />
     <link rel="icon" type="image/x-icon" href="favicon.ico">
   </head>
   <body>

Kyoo/ClientApp/src/styles.scss

@@ -41,6 +41,10 @@ $theme: mat-dark-theme($primary, $accent);
 // Include the default theme styles.
 @include angular-material-theme($theme);
 
+.mat-ripple-element
+{
+  background-color: rgba(255, 255, 255, .3) !important;
+}
 
 //Material Icons
 @font-face {