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

Making the progress bar work on the mobile app.

Browse Source
This commit is contained in:
Zoe Roux 2019-10-28 00:46:06 +01:00
parent a94f22b127
commit ecdd85b82d
3 changed files with 64 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -65,7 +65,7 @@
<ng-template #elseBlock><p>{{this.minutes | number: '2.0-0'}}:{{this.seconds | number: '2.0-0'}} / {{this.maxMinutes | number: '2.0-0'}}:{{this.maxSeconds | number: '2.0-0'}}</p></ng-template>
</div>
<div class="right">
<button *ngIf="this.item.audios.length > 0" mat-icon-button matTooltipPosition="above" matTooltip="Select audio track">
<button id="volume" *ngIf="this.item.audios.length > 0" mat-icon-button matTooltipPosition="above" matTooltip="Select audio track">
<mat-icon>music_note</mat-icon>
</button>
<button *ngIf="this.item.subtitles.length > 0" mat-icon-button [matMenuTriggerFor]="subtitles" matTooltipPosition="above" matTooltip="Select subtitle track">

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

@ -337,4 +337,5 @@
.info-panel
{
min-width: 250px !important;
max-width: 300px !important;
}

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

@ -68,6 +68,7 @@ export class PlayerComponent implements OnInit
this.fullscreen();
screen.orientation.lock("landscape");
$("#fullscreen").addClass("d-none");
$("#volume").addClass("d-none");
}
if (this.player)
this.init();
@ -133,31 +134,6 @@ export class PlayerComponent implements OnInit
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();
}
});
if (!navigator.userAgent.match(/Mobi/))
{
$(document).mousemove((event) =>
@ -185,9 +161,70 @@ export class PlayerComponent implements OnInit
}
});
$(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();
}
});
$("#controller").mouseenter(() => { this.controllerHovered = true; });
$("#controller").mouseleave(() => { this.controllerHovered = false; });
}
else
{
$(progressBar).on("touchstart", (event) =>
{
event.preventDefault();
this.seeking = true;
progressBar.classList.add("seeking");
this.player.pause();
let time: number = this.getTimeFromSeekbar(progressBar, event.changedTouches[0].pageX);
this.updateTime(time);
});
$(document).on("touchend", (event) =>
{
if (this.seeking)
{
event.preventDefault();
this.seeking = false;
progressBar.classList.remove("seeking");
let time: number = this.getTimeFromSeekbar(progressBar, event.changedTouches[0].pageX);
this.player.currentTime = time;
this.player.play();
}
});
$(document).on("touchmove", (event) =>
{
if (this.seeking)
{
let time: number = this.getTimeFromSeekbar(progressBar, event.changedTouches[0].pageX);
this.updateTime(time);
}
});
}
//Initialize the timout at the document initialization.
this.videoHider = setTimeout(() =>