Finishing player's seek-bar and volume button.

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

@@ -49,7 +49,7 @@ export class AppComponent
 
   ngAfterViewInit()
   {
-    $('[data-toggle="tooltip"]').tooltip();
+    $('[data-toggle="tooltip"]').tooltip({ trigger: "hover" });
   }
 }
 

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

@@ -14,14 +14,14 @@
     </div>
 
     <div class="controller container-fluid">
-      <div class="img">
+      <div class="img d-none d-sm-block">
         <img src="thumb/{{this.item.showSlug}}" />
       </div>
       <div class="content">
         <h3>S{{this.item.seasonNumber}}:E{{this.item.episodeNumber}} - {{this.item.title}}</h3>
 
-        <div class="seek-bar">
+        <div id="progress-bar">
-          <div id="progress-bar">
+          <div class="seek-bar">
             <div id="buffered"></div>
             <div id="progress"></div>
           </div>
@@ -50,7 +50,7 @@
               </div>
             </button>
             <div id="volume">
-              <button mat-icon-button data-toggle="tooltip" data-placement="top" title="Volume">
+              <button mat-icon-button data-toggle="tooltip" data-placement="top" title="Volume" (click)="toogleMute()">
                 <mat-icon>{{this.volumeIcon}}</mat-icon>
               </button>
 

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

@@ -107,7 +107,7 @@
   }
 }
 
-.seek-bar
+#progress-bar
 {
   width: 100%;
   height: auto;
@@ -115,7 +115,7 @@
   padding-bottom: 1rem;
   position: relative;
 
-  #progress-bar
+  .seek-bar
   {
     width: 100%;
     height: 4px;
@@ -166,9 +166,11 @@
     }
   }
 
-  &:hover
+  &:hover, &.seeking
   {
-    #progress-bar
+    cursor: pointer;
+
+    .seek-bar
     {
       transform: scaleY(1);
     }

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

@@ -16,6 +16,7 @@ export class PlayerComponent implements OnInit
   item: WatchItem;
 
   volume: number = 100;
+  seeking: boolean = false;
 
   hours: number;
   minutes: number;
@@ -77,17 +78,13 @@ export class PlayerComponent implements OnInit
     this.player.onpause = () =>
     {
       this.playIcon = "play_arrow"
-      $("#play").attr("data-original-title", "Play").tooltip("show");
+      $("#play").attr("data-original-title", "Play");
     }
 
     this.player.ontimeupdate = () =>
     {
-      this.hours = Math.round(this.player.currentTime / 60 % 60);
+      if (!this.seeking)
-      this.seconds = Math.round(this.player.currentTime % 60);
+        this.updateTime(this.player.currentTime);
-      this.minutes = Math.round(this.player.currentTime / 60);
-
-      this.thumb.style.transform = "translateX(" + (this.player.currentTime / this.item.duration * 100) + "%)";
-      this.progress.style.width = (this.player.currentTime / this.item.duration * 100) + "%";
     };
 
     this.player.onprogress = () =>
@@ -96,6 +93,48 @@ export class PlayerComponent implements OnInit
         this.buffered.style.width = (this.player.buffered.end(this.player.buffered.length - 1) / this.item.duration * 100) + "%";
     };
 
+    let progressBar: HTMLElement = document.getElementById("progress-bar") as HTMLElement;
+    $(progressBar).click((event) =>
+    {
+      event.preventDefault();
+      let time: number = this.getTimeFromSeekbar(progressBar, event.pageX);
+      this.player.currentTime = time;
+      this.updateTime(time);
+    });
+
+    $(progressBar).mousedown((event) =>
+    {
+      event.preventDefault();
+      this.seeking = true;
+      progressBar.classList.add("seeking");
+      this.player.pause();
+
+      let time: number = this.getTimeFromSeekbar(progressBar, event.pageX);
+      this.updateTime(time);
+    });
+
+    $(document).mouseup((event) =>
+    {
+      if (this.seeking)
+      {
+        event.preventDefault();
+        this.seeking = false;
+        progressBar.classList.remove("seeking");
+
+        let time: number = this.getTimeFromSeekbar(progressBar, event.pageX);
+        this.player.currentTime = time;
+        this.player.play();
+      }
+    });
+
+    $(document).mousemove((event) =>
+    {
+      if (this.seeking)
+      {
+        let time: number = this.getTimeFromSeekbar(progressBar, event.pageX);
+        this.updateTime(time);
+      }
+    });
 
     document.addEventListener("fullscreenchange", () =>
     {
@@ -111,7 +150,22 @@ export class PlayerComponent implements OnInit
       }
     });
 
-    $('[data-toggle="tooltip"]').tooltip();
+    $('[data-toggle="tooltip"]').tooltip({ trigger: "hover" });
+  }
+
+  getTimeFromSeekbar(progressBar: HTMLElement, pageX: number)
+  {
+    return Math.max(0, Math.min((pageX - progressBar.offsetLeft) / progressBar.clientWidth, 1)) * this.item.duration;
+  }
+
+  updateTime(time: number)
+  {
+    this.hours = Math.round(time / 60 % 60);
+    this.seconds = Math.round(time % 60);
+    this.minutes = Math.round(time / 60);
+
+    this.thumb.style.transform = "translateX(" + (time / this.item.duration * 100) + "%)";
+    this.progress.style.width = (time / this.item.duration * 100) + "%";
   }
 
   ngOnDestroy()
@@ -133,10 +187,20 @@ export class PlayerComponent implements OnInit
       this.player.pause();
   }
 
+  toogleMute()
+  {
+    if (this.player.muted)
+      this.player.muted = false;
+    else
+      this.player.muted = true;
+
+    this.updateVolumeBtn()
+  }
+
   initPlayBtn()
   {
     this.playIcon = "pause";
-    $("#play").attr("data-original-title", "Pause").tooltip("show");
+    $("#play").attr("data-original-title", "Pause");
   }
 
   fullscreen()
@@ -149,22 +213,30 @@ export class PlayerComponent implements OnInit
 
   changeVolume(event: MatSliderChange)
   {
+    this.player.muted = false;
     this.player.volume = event.value / 100;
     this.volume = event.value;
 
-    this.changeVolumeBtn();
+    this.updateVolumeBtn();
   }
 
-  changeVolumeBtn()
+  updateVolumeBtn()
   {
-    if (this.volume == 0)
+    if (this.player.muted)
-      this.volumeIcon = "volume_off";
+    {
-    else if (this.volume < 25)
+      this.volumeIcon = "volume_off"
-      this.volumeIcon = "volume_mute";
+    }
-    else if (this.volume < 65)
-      this.volumeIcon = "volume_down";
     else
-      this.volumeIcon = "volume_up";
+    {
+      if (this.volume == 0)
+        this.volumeIcon = "volume_off";
+      else if (this.volume < 25)
+        this.volumeIcon = "volume_mute";
+      else if (this.volume < 65)
+        this.volumeIcon = "volume_down";
+      else
+        this.volumeIcon = "volume_up";
+    }
   }
 
 

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

@@ -48,7 +48,7 @@ export class ShowDetailsComponent implements OnInit
 
   ngAfterViewInit()
   {
-    $('[data-toggle="tooltip"]').tooltip();
+    $('[data-toggle="tooltip"]').tooltip({ trigger: "hover" });
   }
 
   ngOnDestroy()