mirror of
https://github.com/sussy-code/smov.git
synced 2024-12-20 14:37:43 +01:00
scraping animation and some cleanup
This commit is contained in:
mrjvs
parent
faff7ee7e0
commit
517f8d0254
3 changed files with 186 additions and 150 deletions
169
src/hooks/useProviderScrape.tsx
Normal file
169
src/hooks/useProviderScrape.tsx
Normal file
|
|
@ -0,0 +1,169 @@
|
|||
import { ScrapeMedia } from "@movie-web/providers";
|
||||
import { RefObject, useCallback, useEffect, useRef, useState } from "react";
|
||||
|
||||
import { providers } from "@/utils/providers";
|
||||
|
||||
export interface ScrapingItems {
|
||||
id: string;
|
||||
children: string[];
|
||||
}
|
||||
|
||||
export interface ScrapingSegment {
|
||||
name: string;
|
||||
id: string;
|
||||
status: "failure" | "pending" | "notfound" | "success" | "waiting";
|
||||
reason?: string;
|
||||
percentage: number;
|
||||
}
|
||||
|
||||
export function useScrape() {
|
||||
const [sources, setSources] = useState<Record<string, ScrapingSegment>>({});
|
||||
const [sourceOrder, setSourceOrder] = useState<ScrapingItems[]>([]);
|
||||
const [currentSource, setCurrentSource] = useState<string>();
|
||||
|
||||
const startScraping = useCallback(
|
||||
async (media: ScrapeMedia) => {
|
||||
if (!providers) return null;
|
||||
const output = await providers.runAll({
|
||||
media,
|
||||
events: {
|
||||
init(evt) {
|
||||
setSources(
|
||||
evt.sourceIds
|
||||
.map((v) => {
|
||||
const source = providers.getMetadata(v);
|
||||
if (!source) throw new Error("invalid source id");
|
||||
const out: ScrapingSegment = {
|
||||
name: source.name,
|
||||
id: source.id,
|
||||
status: "waiting",
|
||||
percentage: 0,
|
||||
};
|
||||
return out;
|
||||
})
|
||||
.reduce<Record<string, ScrapingSegment>>((a, v) => {
|
||||
a[v.id] = v;
|
||||
return a;
|
||||
}, {})
|
||||
);
|
||||
setSourceOrder(evt.sourceIds.map((v) => ({ id: v, children: [] })));
|
||||
},
|
||||
start(id) {
|
||||
setSources((s) => {
|
||||
if (s[id]) s[id].status = "pending";
|
||||
return { ...s };
|
||||
});
|
||||
setCurrentSource(id);
|
||||
},
|
||||
update(evt) {
|
||||
setSources((s) => {
|
||||
if (s[evt.id]) {
|
||||
s[evt.id].status = evt.status;
|
||||
s[evt.id].reason = evt.reason;
|
||||
s[evt.id].percentage = evt.percentage;
|
||||
}
|
||||
return { ...s };
|
||||
});
|
||||
},
|
||||
discoverEmbeds(evt) {
|
||||
setSources((s) => {
|
||||
evt.embeds.forEach((v) => {
|
||||
const source = providers.getMetadata(v.embedScraperId);
|
||||
if (!source) throw new Error("invalid source id");
|
||||
const out: ScrapingSegment = {
|
||||
name: source.name,
|
||||
id: v.id,
|
||||
status: "waiting",
|
||||
percentage: 0,
|
||||
};
|
||||
s[v.id] = out;
|
||||
});
|
||||
return { ...s };
|
||||
});
|
||||
setSourceOrder((s) => {
|
||||
const source = s.find((v) => v.id === evt.sourceId);
|
||||
if (!source) throw new Error("invalid source id");
|
||||
source.children = evt.embeds.map((v) => v.id);
|
||||
return [...s];
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
return output;
|
||||
},
|
||||
[setSourceOrder, setSources]
|
||||
);
|
||||
|
||||
return {
|
||||
startScraping,
|
||||
sourceOrder,
|
||||
sources,
|
||||
currentSource,
|
||||
};
|
||||
}
|
||||
|
||||
export function useListCenter(
|
||||
containerRef: RefObject<HTMLDivElement | null>,
|
||||
listRef: RefObject<HTMLDivElement | null>,
|
||||
sourceOrder: ScrapingItems[],
|
||||
currentSource: string | undefined
|
||||
) {
|
||||
const [renderedOnce, setRenderedOnce] = useState(false);
|
||||
|
||||
const updatePosition = useCallback(() => {
|
||||
if (!containerRef.current) return;
|
||||
if (!listRef.current) return;
|
||||
|
||||
const elements = [
|
||||
...listRef.current.querySelectorAll("div[data-source-id]"),
|
||||
] as HTMLDivElement[];
|
||||
|
||||
const currentIndex = elements.findIndex(
|
||||
(e) => e.getAttribute("data-source-id") === currentSource
|
||||
);
|
||||
|
||||
const currentElement = elements[currentIndex];
|
||||
|
||||
if (!currentElement) return;
|
||||
|
||||
const containerWidth = containerRef.current.getBoundingClientRect().width;
|
||||
const listWidth = listRef.current.getBoundingClientRect().width;
|
||||
|
||||
const containerHeight = containerRef.current.getBoundingClientRect().height;
|
||||
|
||||
const listTop = listRef.current.getBoundingClientRect().top;
|
||||
|
||||
const currentTop = currentElement.getBoundingClientRect().top;
|
||||
const currentHeight = currentElement.getBoundingClientRect().height;
|
||||
|
||||
const topDifference = currentTop - listTop;
|
||||
|
||||
const listNewLeft = containerWidth / 2 - listWidth / 2;
|
||||
const listNewTop = containerHeight / 2 - topDifference - currentHeight / 2;
|
||||
|
||||
listRef.current.style.transform = `translateY(${listNewTop}px) translateX(${listNewLeft}px)`;
|
||||
setTimeout(() => {
|
||||
setRenderedOnce(true);
|
||||
}, 150);
|
||||
}, [currentSource, containerRef, listRef, setRenderedOnce]);
|
||||
|
||||
const updatePositionRef = useRef(updatePosition);
|
||||
|
||||
useEffect(() => {
|
||||
updatePosition();
|
||||
updatePositionRef.current = updatePosition;
|
||||
}, [updatePosition, sourceOrder]);
|
||||
|
||||
useEffect(() => {
|
||||
function resize() {
|
||||
updatePositionRef.current();
|
||||
}
|
||||
window.addEventListener("resize", resize);
|
||||
return () => {
|
||||
window.removeEventListener("resize", resize);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return renderedOnce;
|
||||
}
|
||||
|
|
@ -1,12 +1,9 @@
|
|||
import { useEffect, useState } from "react";
|
||||
|
||||
import { MWStreamType } from "@/backend/helpers/streams";
|
||||
import { BrandPill } from "@/components/layout/BrandPill";
|
||||
import { Player } from "@/components/player";
|
||||
import { AutoPlayStart } from "@/components/player/atoms";
|
||||
import { usePlayer } from "@/components/player/hooks/usePlayer";
|
||||
import { useShouldShowControls } from "@/components/player/hooks/useShouldShowControls";
|
||||
import { StatusCircle } from "@/components/player/internals/StatusCircle";
|
||||
import { ScrapingPart } from "@/pages/parts/player/ScrapingPart";
|
||||
import { playerStatus } from "@/stores/player/slices/source";
|
||||
|
||||
|
|
@ -14,19 +11,13 @@ export function PlayerView() {
|
|||
const { status, setScrapeStatus, playMedia } = usePlayer();
|
||||
const desktopControlsVisible = useShouldShowControls();
|
||||
|
||||
const [a, setA] = useState(0);
|
||||
useEffect(() => {
|
||||
const dsf = setInterval(() => setA(Math.floor(Math.random() * 100)), 1000);
|
||||
return () => clearInterval(dsf);
|
||||
}, [setA]);
|
||||
|
||||
return (
|
||||
<Player.Container onLoad={setScrapeStatus}>
|
||||
{status === playerStatus.SCRAPING ? (
|
||||
<ScrapingPart
|
||||
media={{
|
||||
type: "movie",
|
||||
title: "Everything Everywhere All At OnceASFAFS",
|
||||
title: "Everything Everywhere All At Oncess",
|
||||
tmdbId: "545611",
|
||||
releaseYear: 2022,
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { ProviderControls, ScrapeMedia } from "@movie-web/providers";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import classNames from "classnames";
|
||||
import { useEffect, useRef } from "react";
|
||||
import type { AsyncReturnType } from "type-fest";
|
||||
|
||||
import { usePlayer } from "@/components/player/hooks/usePlayer";
|
||||
|
|
@ -7,156 +8,25 @@ import {
|
|||
ScrapeCard,
|
||||
ScrapeItem,
|
||||
} from "@/components/player/internals/ScrapeCard";
|
||||
import { StatusCircle } from "@/components/player/internals/StatusCircle";
|
||||
import { providers } from "@/utils/providers";
|
||||
import { useListCenter, useScrape } from "@/hooks/useProviderScrape";
|
||||
|
||||
export interface ScrapingProps {
|
||||
media: ScrapeMedia;
|
||||
onGetStream?: (stream: AsyncReturnType<ProviderControls["runAll"]>) => void;
|
||||
}
|
||||
|
||||
export interface ScrapingSegment {
|
||||
name: string;
|
||||
id: string;
|
||||
status: "failure" | "pending" | "notfound" | "success" | "waiting";
|
||||
reason?: string;
|
||||
percentage: number;
|
||||
}
|
||||
|
||||
export interface ScrapingItems {
|
||||
id: string;
|
||||
children: string[];
|
||||
}
|
||||
|
||||
function useScrape() {
|
||||
const [sources, setSources] = useState<Record<string, ScrapingSegment>>({});
|
||||
const [sourceOrder, setSourceOrder] = useState<ScrapingItems[]>([]);
|
||||
const [currentSource, setCurrentSource] = useState<string>();
|
||||
|
||||
const startScraping = useCallback(
|
||||
async (media: ScrapeMedia) => {
|
||||
if (!providers) return null;
|
||||
const output = await providers.runAll({
|
||||
media,
|
||||
events: {
|
||||
init(evt) {
|
||||
setSources(
|
||||
evt.sourceIds
|
||||
.map((v) => {
|
||||
const source = providers.getMetadata(v);
|
||||
if (!source) throw new Error("invalid source id");
|
||||
const out: ScrapingSegment = {
|
||||
name: source.name,
|
||||
id: source.id,
|
||||
status: "waiting",
|
||||
percentage: 0,
|
||||
};
|
||||
return out;
|
||||
})
|
||||
.reduce<Record<string, ScrapingSegment>>((a, v) => {
|
||||
a[v.id] = v;
|
||||
return a;
|
||||
}, {})
|
||||
);
|
||||
setSourceOrder(evt.sourceIds.map((v) => ({ id: v, children: [] })));
|
||||
},
|
||||
start(id) {
|
||||
setSources((s) => {
|
||||
if (s[id]) s[id].status = "pending";
|
||||
return { ...s };
|
||||
});
|
||||
setCurrentSource(id);
|
||||
},
|
||||
update(evt) {
|
||||
setSources((s) => {
|
||||
if (s[evt.id]) {
|
||||
s[evt.id].status = evt.status;
|
||||
s[evt.id].reason = evt.reason;
|
||||
s[evt.id].percentage = evt.percentage;
|
||||
}
|
||||
return { ...s };
|
||||
});
|
||||
},
|
||||
discoverEmbeds(evt) {
|
||||
setSources((s) => {
|
||||
evt.embeds.forEach((v) => {
|
||||
const source = providers.getMetadata(v.embedScraperId);
|
||||
if (!source) throw new Error("invalid source id");
|
||||
const out: ScrapingSegment = {
|
||||
name: source.name,
|
||||
id: v.id,
|
||||
status: "waiting",
|
||||
percentage: 0,
|
||||
};
|
||||
s[v.id] = out;
|
||||
});
|
||||
return { ...s };
|
||||
});
|
||||
setSourceOrder((s) => {
|
||||
const source = s.find((v) => v.id === evt.sourceId);
|
||||
if (!source) throw new Error("invalid source id");
|
||||
source.children = evt.embeds.map((v) => v.id);
|
||||
return [...s];
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
return output;
|
||||
},
|
||||
[setSourceOrder, setSources]
|
||||
);
|
||||
|
||||
return {
|
||||
startScraping,
|
||||
sourceOrder,
|
||||
sources,
|
||||
currentSource,
|
||||
};
|
||||
}
|
||||
|
||||
export function ScrapingPart(props: ScrapingProps) {
|
||||
const { playMedia } = usePlayer();
|
||||
const { startScraping, sourceOrder, sources, currentSource } = useScrape();
|
||||
|
||||
const containerRef = useRef<HTMLDivElement | null>(null);
|
||||
const listRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!containerRef.current) return;
|
||||
if (!listRef.current) return;
|
||||
|
||||
const elements = [
|
||||
...listRef.current.querySelectorAll("div[data-source-id]"),
|
||||
] as HTMLDivElement[];
|
||||
|
||||
const currentIndex = elements.findIndex(
|
||||
(e) => e.getAttribute("data-source-id") === currentSource
|
||||
);
|
||||
|
||||
const currentElement = elements[currentIndex];
|
||||
|
||||
if (!currentElement) return;
|
||||
|
||||
const containerWidth = containerRef.current.getBoundingClientRect().width;
|
||||
const listWidth = listRef.current.getBoundingClientRect().width;
|
||||
|
||||
const containerHeight = containerRef.current.getBoundingClientRect().height;
|
||||
const listHeight = listRef.current.getBoundingClientRect().height;
|
||||
|
||||
const listTop = listRef.current.getBoundingClientRect().top;
|
||||
|
||||
const currentTop = currentElement.getBoundingClientRect().top;
|
||||
const currentHeight = currentElement.getBoundingClientRect().height;
|
||||
|
||||
const topDifference = currentTop - listTop;
|
||||
|
||||
const listNewLeft = containerWidth / 2 - listWidth / 2;
|
||||
const listNewTop = containerHeight / 2 - topDifference + currentHeight / 2;
|
||||
|
||||
listRef.current.style.left = `${listNewLeft}px`;
|
||||
listRef.current.style.top = `${listNewTop}px`;
|
||||
}, [sourceOrder, currentSource]);
|
||||
const renderedOnce = useListCenter(
|
||||
containerRef,
|
||||
listRef,
|
||||
sourceOrder,
|
||||
currentSource
|
||||
);
|
||||
|
||||
const started = useRef(false);
|
||||
useEffect(() => {
|
||||
|
|
@ -170,7 +40,13 @@ export function ScrapingPart(props: ScrapingProps) {
|
|||
|
||||
return (
|
||||
<div className="h-full w-full relative" ref={containerRef}>
|
||||
<div className="absolute" ref={listRef}>
|
||||
<div
|
||||
className={classNames({
|
||||
"absolute transition-[transform,opacity] opacity-0": true,
|
||||
"!opacity-100": renderedOnce,
|
||||
})}
|
||||
ref={listRef}
|
||||
>
|
||||
{sourceOrder.map((order) => {
|
||||
const source = sources[order.id];
|
||||
return (
|
||||
|
|
|
|||
Loading…
Reference in a new issue