Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-12-25 20:31:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add safe area to next episode button, clean up debugging stuff, disable thumbnails on Safari, fix lightbar on landscape

Browse Source 
Co-authored-by: mrjvs <mistrjvs@gmail.com>
This commit is contained in:
Jip Fr 2023-12-13 21:13:57 +01:00
parent 903185f5a3
commit b5cb432241
3 changed files with 6 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/player/atoms/NextEpisodeButton.tsx
View File

@ -88,7 +88,7 @@ export function NextEpisodeButton(props: {
<Transition <Transition
animation={animation} animation={animation}
show={show} show={show}
className="absolute right-12 bottom-0" className="absolute right-[calc(3rem+env(safe-area-inset-right))] bottom-0"
> >
<div <div
className={classNames([ className={classNames([

17
src/components/player/internals/ThumbnailScraper.tsx
View File

@ -5,6 +5,7 @@ import { playerStatus } from "@/stores/player/slices/source";
import { ThumbnailImage } from "@/stores/player/slices/thumbnails"; import { ThumbnailImage } from "@/stores/player/slices/thumbnails";
import { usePlayerStore } from "@/stores/player/store"; import { usePlayerStore } from "@/stores/player/store";
import { LoadableSource, selectQuality } from "@/stores/player/utils/qualities"; import { LoadableSource, selectQuality } from "@/stores/player/utils/qualities";
import { isSafari } from "@/utils/detectFeatures";
function makeQueue(layers: number): number[] { function makeQueue(layers: number): number[] {
const output = [0, 1]; const output = [0, 1];
@ -39,11 +40,9 @@ class ThumnbnailWorker {
} }
start(source: LoadableSource) { start(source: LoadableSource) {
if (isSafari) return false;
const el = document.createElement("video"); const el = document.createElement("video");
el.setAttribute("muted", "true"); el.setAttribute("muted", "true");
// ! Remove before merging
el.setAttribute("controls", "true");
el.setAttribute("playsinline", "true");
const canvas = document.createElement("canvas"); const canvas = document.createElement("canvas");
this.hls = new Hls(); this.hls = new Hls();
if (source.type === "mp4") { if (source.type === "mp4") {
@ -69,8 +68,6 @@ class ThumnbnailWorker {
private async initVideo() { private async initVideo() {
if (!this.videoEl || !this.canvasEl) return; if (!this.videoEl || !this.canvasEl) return;
// ! Remove before merging
document.body.appendChild(this.videoEl);
await new Promise((resolve, reject) => { await new Promise((resolve, reject) => {
this.videoEl?.addEventListener("loadedmetadata", resolve); this.videoEl?.addEventListener("loadedmetadata", resolve);
this.videoEl?.addEventListener("error", reject); this.videoEl?.addEventListener("error", reject);
@ -103,15 +100,6 @@ class ThumnbnailWorker {
); );
const imgUrl = this.canvasEl.toDataURL(); const imgUrl = this.canvasEl.toDataURL();
// ! Remove before merging
const img = new Image();
img.src = imgUrl;
img.style.border = "1px solid yellow";
document.body.appendChild(img);
const p = document.createElement("p");
p.innerText = `${at}`;
document.body.appendChild(p);
if (this.interrupted) return; if (this.interrupted) return;
if (imgUrl === "data:," || !imgUrl) return; // failed image rendering if (imgUrl === "data:," || !imgUrl) return; // failed image rendering
@ -163,6 +151,7 @@ export function ThumbnailScraper() {
workerRef.current = ins; workerRef.current = ins;
ins.start(inputStream.stream); ins.start(inputStream.stream);
}, [source, addImage, resetImages, status]); }, [source, addImage, resetImages, status]);
const startRef = useRef(start); const startRef = useRef(start);
useEffect(() => { useEffect(() => {
startRef.current = start; startRef.current = start;

4
src/components/utils/Lightbar.tsx
View File

@ -161,8 +161,8 @@ function ParticlesCanvas() {
export function Lightbar(props: { className?: string }) { export function Lightbar(props: { className?: string }) {
return ( return (
<div className="absolute inset-0 w-full h-screen overflow-hidden pointer-events-none -mt-64"> <div className="absolute inset-0 w-full h-[300vh] overflow-hidden pointer-events-none -mt-64">
<div className="max-w-screen w-full h-screen relative pt-64"> <div className="max-w-screen w-full h-[300vh] relative pt-64">
<div className={props.className}> <div className={props.className}>
<div className="lightbar"> <div className="lightbar">
<ParticlesCanvas /> <ParticlesCanvas />