Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-07-09 03:04:20 -04:00
Code Issues Packages Projects Releases Wiki Activity

Finishing player's seek-bar and volume button.

Browse Source
This commit is contained in:
Zoe Roux 2019-09-07 12:33:11 +02:00
parent 3ef233a1b6
commit 9527894fad
5 changed files with 102 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Kyoo/ClientApp/src/app/app.component.ts
View File

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

8
Kyoo/ClientApp/src/app/player/player.component.html
View File

@ -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>

10
Kyoo/ClientApp/src/app/player/player.component.scss
View File

@ -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);
}

108
Kyoo/ClientApp/src/app/player/player.component.ts
View File

@ -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);
this.seconds = Math.round(this.player.currentTime % 60);
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) + "%";
if (!this.seeking)
this.updateTime(this.player.currentTime);
};
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)
this.volumeIcon = "volume_off";
else if (this.volume < 25)
this.volumeIcon = "volume_mute";
else if (this.volume < 65)
this.volumeIcon = "volume_down";
if (this.player.muted)
{
this.volumeIcon = "volume_off"
}
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";
}
}

2
Kyoo/ClientApp/src/app/show-details/show-details.component.ts
View File

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