Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-07-08 10:44:20 -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> <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>
<div class="right"> <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> <mat-icon>music_note</mat-icon>
</button> </button>
<button *ngIf="this.item.subtitles.length > 0" mat-icon-button [matMenuTriggerFor]="subtitles" matTooltipPosition="above" matTooltip="Select subtitle track"> <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 .info-panel
{ {
min-width: 250px !important; 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(); this.fullscreen();
screen.orientation.lock("landscape"); screen.orientation.lock("landscape");
$("#fullscreen").addClass("d-none"); $("#fullscreen").addClass("d-none");
$("#volume").addClass("d-none");
} }
if (this.player) if (this.player)
this.init(); this.init();
@ -133,31 +134,6 @@ export class PlayerComponent implements OnInit
this.updateTime(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();
}
});
if (!navigator.userAgent.match(/Mobi/)) if (!navigator.userAgent.match(/Mobi/))
{ {
$(document).mousemove((event) => $(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").mouseenter(() => { this.controllerHovered = true; });
$("#controller").mouseleave(() => { this.controllerHovered = false; }); $("#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. //Initialize the timout at the document initialization.
this.videoHider = setTimeout(() => this.videoHider = setTimeout(() =>