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 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/transmux/{{this.item.link}}" type="video/mp4" />
</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");
if (navigator.userAgent.match(/Mobi/))
{
this.fullscreen();
screen.orientation.lock("landscape");
$("#fullscreen").addClass("d-none");
}
if (this.player)
this.init();
});
@ -154,33 +160,36 @@ export class PlayerComponent implements OnInit
}
});
$(document).mousemove((event) =>
{
if (this.seeking)
{
let time: number = this.getTimeFromSeekbar(progressBar, event.pageX);
this.updateTime(time);
}
else
{
document.getElementById("hover").classList.remove("idle");
document.documentElement.style.cursor = "";
if (!navigator.userAgent.match(/Mobi/))
{
$(document).mousemove((event) =>
{
if (this.seeking)
{
let time: number = this.getTimeFromSeekbar(progressBar, event.pageX);
this.updateTime(time);
}
else
{
document.getElementById("hover").classList.remove("idle");
document.documentElement.style.cursor = "";
clearTimeout(this.videoHider);
clearTimeout(this.videoHider);
this.videoHider = setTimeout((ev: MouseEvent) =>
{
if (!this.player.paused && !this.controllerHovered)
{
document.getElementById("hover").classList.add("idle");
document.documentElement.style.cursor = "none";
}
}, 2000);
}
});
this.videoHider = setTimeout((ev: MouseEvent) =>
{
if (!this.player.paused && !this.controllerHovered)
{
document.getElementById("hover").classList.add("idle");
document.documentElement.style.cursor = "none";
}
}, 2000);
}
});
$("#controller").mouseenter(() => { this.controllerHovered = true; });
$("#controller").mouseleave(() => { this.controllerHovered = false; });
$("#controller").mouseenter(() => { this.controllerHovered = true; });
$("#controller").mouseleave(() => { this.controllerHovered = false; });
}
//Initialize the timout at the document initialization.
this.videoHider = setTimeout(() =>
@ -335,7 +344,33 @@ export class PlayerComponent implements OnInit
$(document).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()
{