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

Starting to add mobile support to the web app.

Browse Source
This commit is contained in:
Zoe Roux 2019-10-14 23:32:55 +02:00
parent 71efaa0832
commit a07d2c123c
2 changed files with 61 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

@ -1,6 +1,6 @@
<div id="root"> <div id="root">
<div class="player"> <div class="player">
<video id="player" poster="backdrop/{{this.item.showSlug}}" autoplay muted (click)="tooglePlayback()" class="video-js"> <video id="player" poster="backdrop/{{this.item.showSlug}}" autoplay muted (click)="videoClicked()" class="video-js">
<source src="/video/{{this.item.link}}" /> <source src="/video/{{this.item.link}}" />
<source src="/video/transmux/{{this.item.link}}" type="video/mp4" /> <source src="/video/transmux/{{this.item.link}}" type="video/mp4" />
</video> </video>

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

@ -62,6 +62,12 @@ export class PlayerComponent implements OnInit
this.title.setTitle(this.item.showTitle + " S" + this.item.seasonNumber + ":E" + this.item.episodeNumber + " - Kyoo"); this.title.setTitle(this.item.showTitle + " S" + this.item.seasonNumber + ":E" + this.item.episodeNumber + " - Kyoo");
if (navigator.userAgent.match(/Mobi/))
{
this.fullscreen();
screen.orientation.lock("landscape");
$("#fullscreen").addClass("d-none");
}
if (this.player) if (this.player)
this.init(); this.init();
}); });
@ -154,33 +160,36 @@ export class PlayerComponent implements OnInit
} }
}); });
$(document).mousemove((event) => if (!navigator.userAgent.match(/Mobi/))
{ {
if (this.seeking) $(document).mousemove((event) =>
{ {
let time: number = this.getTimeFromSeekbar(progressBar, event.pageX); if (this.seeking)
this.updateTime(time); {
} let time: number = this.getTimeFromSeekbar(progressBar, event.pageX);
else this.updateTime(time);
{ }
document.getElementById("hover").classList.remove("idle"); else
document.documentElement.style.cursor = ""; {
document.getElementById("hover").classList.remove("idle");
document.documentElement.style.cursor = "";
clearTimeout(this.videoHider); clearTimeout(this.videoHider);
this.videoHider = setTimeout((ev: MouseEvent) => this.videoHider = setTimeout((ev: MouseEvent) =>
{ {
if (!this.player.paused && !this.controllerHovered) if (!this.player.paused && !this.controllerHovered)
{ {
document.getElementById("hover").classList.add("idle"); document.getElementById("hover").classList.add("idle");
document.documentElement.style.cursor = "none"; document.documentElement.style.cursor = "none";
} }
}, 2000); }, 2000);
} }
}); });
$("#controller").mouseenter(() => { this.controllerHovered = true; }); $("#controller").mouseenter(() => { this.controllerHovered = true; });
$("#controller").mouseleave(() => { this.controllerHovered = false; }); $("#controller").mouseleave(() => { this.controllerHovered = false; });
}
//Initialize the timout at the document initialization. //Initialize the timout at the document initialization.
this.videoHider = setTimeout(() => this.videoHider = setTimeout(() =>
@ -335,7 +344,33 @@ export class PlayerComponent implements OnInit
$(document).unbind(); $(document).unbind();
$(window).unbind(); $(window).unbind();
} }
videoClicked()
{
if (!navigator.userAgent.match(/Mobi/))
this.tooglePlayback();
else
{
if ($("#hover").hasClass("idle"))
{
$("#hover").removeClass("idle");
clearTimeout(this.videoHider);
this.videoHider = setTimeout((ev: MouseEvent) =>
{
if (!this.player.paused)
{
document.getElementById("hover").classList.add("idle");
}
}, 1000);
}
else
{
$("#hover").addClass("idle");
clearTimeout(this.videoHider);
}
}
}
tooglePlayback() tooglePlayback()
{ {