pimhwang
/
movie-web
mirror of https://github.com/movie-web/movie-web.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

scraping animation and some cleanup

pull/497/head
mrjvs 2 years ago
parent
faff7ee7e0
commit
517f8d0254
3 changed files with 186 additions and 150 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 169
      src/hooks/useProviderScrape.tsx
  2. 11
      src/pages/PlayerView.tsx
  3. 156
      src/pages/parts/player/ScrapingPart.tsx

169
src/hooks/useProviderScrape.tsx
Unescape View File

@ -0,0 +1,169 @@ @@ -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;
}

11
src/pages/PlayerView.tsx
Unescape View File

@ -1,12 +1,9 @@ @@ -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() { @@ -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,
}}

156
src/pages/parts/player/ScrapingPart.tsx
Unescape View File

@ -1,5 +1,6 @@ @@ -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 { @@ -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) { @@ -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 (

Write Preview
Loading…
Cancel
Save