Adding sort functions to the browser.

Adding real tooltips.

Kyoo/ClientApp/package-lock.json

@@ -1275,6 +1275,14 @@
         "@types/jasmine": "*"
       }
     },
+    "@types/jquery": {
+      "version": "3.3.31",
+      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.3.31.tgz",
+      "integrity": "sha512-Lz4BAJihoFw5nRzKvg4nawXPzutkv7wmfQ5121avptaSIXlDNJCUuxZxX/G+9EVidZGuO0UBlk+YjKbwRKJigg==",
+      "requires": {
+        "@types/sizzle": "*"
+      }
+    },
     "@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -1299,6 +1307,11 @@
       "integrity": "sha512-lMC2G0ItF2xv4UCiwbJGbnJlIuUixHrioOhNGHSCsYCJ8l4t9hMCUimCytvFv7qy6AfSzRxhRHoGa+UqaqwyeA==",
       "dev": true
     },
+    "@types/sizzle": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.2.tgz",
+      "integrity": "sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg=="
+    },
     "@types/source-list-map": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",

Kyoo/ClientApp/package.json

@@ -21,6 +21,7 @@
     "@angular/platform-browser": "~8.2.0",
     "@angular/platform-browser-dynamic": "~8.2.0",
     "@angular/router": "~8.2.0",
+    "@types/jquery": "^3.3.31",
     "bootstrap": "^4.3.1",
     "jquery": "^3.4.1",
     "popper.js": "^1.15.0",

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

@@ -16,10 +16,10 @@
 
       <ul class="navbar-nav flex-row ml-auto">
         <li class="nav-item icon">
-          <mat-icon data-toggle="tooltip" data-placement="top" title="Search">search</mat-icon>
+          <mat-icon data-toggle="tooltip" data-placement="bottom" title="Search">search</mat-icon>
         </li>
         <li class="nav-item">
-          <a class="icon" routerLink="/login" routerLinkActive="active" data-toggle="tooltip" data-placement="top" title="Login">
+          <a class="icon" routerLink="/login" routerLinkActive="active" data-toggle="tooltip" data-placement="bottom" title="Login">
             <mat-icon>account_circle</mat-icon>
           </a>
         </li>

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

@@ -42,6 +42,11 @@ export class AppComponent
           }
       }
     });
+
+    $(document).ready(function ()
+    {
+      $('[data-toggle="tooltip"]').tooltip();
+    });
   }
 }
 

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

@@ -1,20 +1,20 @@
-import { BrowserModule } from '@angular/platform-browser';
 import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
-
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { NotFoundComponent } from './not-found/not-found.component';
 import { BrowseComponent } from './browse/browse.component';
-import { ShowDetailsComponent } from './show-details/show-details.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatButtonModule } from '@angular/material/button'; 
-import { MatIconModule } from '@angular/material/icon';
-import { MatSelectModule } from '@angular/material/select';
 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';
 
 
 @NgModule({
@@ -35,7 +35,8 @@ import { PlayerComponent } from './player/player.component';
     MatProgressBarModule,
     MatButtonModule,
     MatIconModule,
-    MatSelectModule
+    MatSelectModule,
+    MatMenuModule
   ],
   providers: [],
   bootstrap: [AppComponent]

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

@@ -1,6 +1,28 @@
+<div class="container justify-content-center">
+  <button mat-icon-button data-toggle="tooltip" data-placement="bottom" title="Filter">
+    <mat-icon>filter_list</mat-icon>
+  </button>
+  <button mat-button data-toggle="tooltip" data-placement="bottom" title="Sort" [matMenuTriggerFor]="sortMenu">
+    <mat-icon>sort</mat-icon> Sort by {{this.sortType}} <i *ngIf="this.sortUp" class="material-icons arrow">arrow_upward</i><i *ngIf="!this.sortUp" class="material-icons arrow">arrow_downward</i>
+  </button>
+</div>
+
+<mat-menu #sortMenu="matMenu">
+  <div *ngFor="let type of this.sortTypes">
+    <button *ngIf="type != this.sortType; else elseBlock;" mat-menu-item (click)="sort(type, true)">
+      Sort by {{type}}
+    </button>
+    <ng-template #elseBlock>
+      <button mat-menu-item (click)="sort(type, !this.sortUp)">
+        Sort by {{type}} <i *ngIf="!this.sortUp" class="material-icons arrow">arrow_upward</i><i *ngIf="this.sortUp" class="material-icons arrow">arrow_downward</i>
+      </button>
+    </ng-template>
+  </div>
+</mat-menu>
+
 <div class="container justify-content-center">
   <a class="show" *ngFor="let show of this.shows" routerLink="/show/{{show.slug}}">
-    <img [style.background-image]="getThumb(show.slug)"/> 
+    <img [style.background-image]="getThumb(show.slug)" />
     <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

@@ -2,6 +2,16 @@
 @import "~bootstrap/scss/variables";
 @import "~bootstrap/scss//mixins/breakpoints";
 
+button
+{
+  outline: none;
+}
+
+.arrow
+{
+  font-size: 12px;
+}
+
 .container
 {
   display: flex;

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

@@ -11,16 +11,46 @@ import { Show } from "../../models/show";
 export class BrowseComponent implements OnInit
 {
   shows: Show[];
+  sortType: string = "title";
+  sortUp: boolean = true;
+
+  sortTypes: string[] = ["title", "release date"];
 
   constructor(private route: ActivatedRoute, private sanitizer: DomSanitizer) { }
 
   ngOnInit()
   {
     this.shows = this.route.snapshot.data.shows;
+
+    $(document).ready(function ()
+    {
+      $('[data-toggle="tooltip"]').tooltip();
+    });
   }
 
   getThumb(slug: string)
   {
     return this.sanitizer.bypassSecurityTrustStyle("url(/thumb/" + slug + ")");
   }
+
+  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);
+    }
+  }
 }

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

@@ -44,6 +44,11 @@ export class ShowDetailsComponent implements OnInit
     this.toolbar.setAttribute("style", `background-color: rgba(0, 0, 0, 0) !important`);
 
     this.getEpisodes();
+
+    $(document).ready(function ()
+    {
+      $('[data-toggle="tooltip"]').tooltip();
+    });
   }
 
   ngOnDestroy()