pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
banners in video player
+257
-207
-28
src/components/Banner.tsx
-28
src/components/Banner.tsx
···
1
-
import { Icon, Icons } from "@/components/Icon";
2
-
import { useBanner } from "@/hooks/useBanner";
3
-
4
-
export function Banner(props: { children: React.ReactNode; type: "error" }) {
5
-
const [ref] = useBanner<HTMLDivElement>("internet");
6
-
const styles = {
7
-
error: "bg-[#C93957] text-white",
8
-
};
9
-
const icons = {
10
-
error: Icons.CIRCLE_EXCLAMATION,
11
-
};
12
-
13
-
return (
14
-
<div ref={ref}>
15
-
<div
16
-
className={[
17
-
styles[props.type],
18
-
"flex items-center justify-center p-1",
19
-
].join(" ")}
20
-
>
21
-
<div className="flex items-center space-x-3">
22
-
<Icon icon={icons[props.type]} />
23
-
<div>{props.children}</div>
24
-
</div>
25
-
</div>
26
-
</div>
27
-
);
28
-
}
+8
-3
src/components/Transition.tsx
+8
-3
src/components/Transition.tsx
···
2
2
Transition as HeadlessTransition,
3
3
TransitionClasses,
4
4
} from "@headlessui/react";
5
-
import { Fragment, ReactNode } from "react";
5
+
import { CSSProperties, Fragment, ReactNode } from "react";
6
6
7
7
export type TransitionAnimations =
8
8
| "slide-down"
···
19
19
className?: string;
20
20
children?: ReactNode;
21
21
isChild?: boolean;
22
+
style?: CSSProperties;
22
23
}
23
24
24
25
function getClasses(
···
90
91
if (props.isChild) {
91
92
return (
92
93
<HeadlessTransition.Child as={Fragment} {...classes}>
93
-
<div className={props.className}>{props.children}</div>
94
+
<div className={props.className} style={props.style}>
95
+
{props.children}
96
+
</div>
94
97
</HeadlessTransition.Child>
95
98
);
96
99
}
97
100
98
101
return (
99
102
<HeadlessTransition show={props.show} as={Fragment} {...classes}>
100
-
<div className={props.className}>{props.children}</div>
103
+
<div className={props.className} style={props.style}>
104
+
{props.children}
105
+
</div>
101
106
</HeadlessTransition>
102
107
);
103
108
}
+12
src/components/player/base/TopControls.tsx
+12
src/components/player/base/TopControls.tsx
···
1
1
import { useEffect } from "react";
2
2
3
3
import { Transition } from "@/components/Transition";
4
+
import { useBannerSize } from "@/stores/banner";
5
+
import { BannerLocation } from "@/stores/banner/BannerLocation";
4
6
import { usePlayerStore } from "@/stores/player/store";
5
7
6
8
export function TopControls(props: {
7
9
show?: boolean;
8
10
children: React.ReactNode;
9
11
}) {
12
+
const bannerSize = useBannerSize("player");
10
13
const setHoveringAnyControls = usePlayerStore(
11
14
(s) => s.setHoveringAnyControls
12
15
);
···
22
25
<Transition
23
26
animation="fade"
24
27
show={props.show}
28
+
style={{
29
+
top: `${bannerSize}px`,
30
+
}}
25
31
className="pointer-events-none flex justify-end pb-32 bg-gradient-to-b from-black to-transparent [margin-bottom:env(safe-area-inset-bottom)] transition-opacity duration-200 absolute top-0 w-full"
26
32
/>
33
+
<div className="relative z-10">
34
+
<BannerLocation location="player" />
35
+
</div>
27
36
<div
28
37
onMouseOver={() => setHoveringAnyControls(true)}
29
38
onMouseOut={() => setHoveringAnyControls(false)}
30
39
className="pointer-events-auto pl-[calc(2rem+env(safe-area-inset-left))] pr-[calc(2rem+env(safe-area-inset-right))] pt-6 absolute top-0 w-full"
40
+
style={{
41
+
top: `${bannerSize}px`,
42
+
}}
31
43
>
32
44
<Transition
33
45
animation="slide-down"
-61
src/hooks/useBanner.tsx
-61
src/hooks/useBanner.tsx
···
1
-
import {
2
-
Dispatch,
3
-
ReactNode,
4
-
SetStateAction,
5
-
createContext,
6
-
useContext,
7
-
useEffect,
8
-
useMemo,
9
-
useState,
10
-
} from "react";
11
-
import { useMeasure } from "react-use";
12
-
13
-
interface BannerInstance {
14
-
id: string;
15
-
height: number;
16
-
}
17
-
18
-
const BannerContext = createContext<
19
-
[BannerInstance[], Dispatch<SetStateAction<BannerInstance[]>>]
20
-
>(null as any);
21
-
22
-
export function BannerContextProvider(props: { children: ReactNode }) {
23
-
const [state, setState] = useState<BannerInstance[]>([]);
24
-
const memod = useMemo<
25
-
[BannerInstance[], Dispatch<SetStateAction<BannerInstance[]>>]
26
-
>(() => [state, setState], [state]);
27
-
28
-
return (
29
-
<BannerContext.Provider value={memod}>
30
-
{props.children}
31
-
</BannerContext.Provider>
32
-
);
33
-
}
34
-
35
-
export function useBanner<T extends Element>(id: string) {
36
-
const [ref, { height }] = useMeasure<T>();
37
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
38
-
const [_, set] = useContext(BannerContext);
39
-
40
-
useEffect(() => {
41
-
set((v) => [...v, { id, height: 0 }]);
42
-
set((value) => {
43
-
const v = value.find((item) => item.id === id);
44
-
if (v) {
45
-
v.height = height;
46
-
}
47
-
return value;
48
-
});
49
-
return () => {
50
-
set((v) => v.filter((item) => item.id !== id));
51
-
};
52
-
}, [height, id, set]);
53
-
54
-
return [ref];
55
-
}
56
-
57
-
export function useBannerSize() {
58
-
const [val] = useContext(BannerContext);
59
-
60
-
return val.reduce((a, v) => a + v.height, 0);
61
-
}
-12
src/hooks/useGoBack.ts
-12
src/hooks/useGoBack.ts
···
1
-
import { useCallback } from "react";
2
-
import { useHistory } from "react-router-dom";
3
-
4
-
export function useGoBack() {
5
-
const reactHistory = useHistory();
6
-
7
-
const goBack = useCallback(() => {
8
-
if (reactHistory.action !== "POP") reactHistory.goBack();
9
-
else reactHistory.push("/");
10
-
}, [reactHistory]);
11
-
return goBack;
12
-
}
+8
-8
src/hooks/usePing.ts
+8
-8
src/hooks/usePing.ts
···
1
-
import { useEffect, useRef, useState } from "react";
1
+
import { useEffect, useRef } from "react";
2
2
3
-
export function useIsOnline() {
4
-
const [online, setOnline] = useState<boolean | null>(true);
3
+
import { useBannerStore } from "@/stores/banner";
4
+
5
+
export function useOnlineListener() {
6
+
const updateOnline = useBannerStore((s) => s.updateOnline);
5
7
const ref = useRef<boolean>(true);
6
8
7
9
useEffect(() => {
···
21
23
const signal = abort.signal;
22
24
fetch("/ping.txt", { signal })
23
25
.then(() => {
24
-
setOnline(true);
26
+
updateOnline(true);
25
27
ref.current = true;
26
28
})
27
29
.catch((err) => {
28
30
if (err.name === "AbortError") return;
29
-
setOnline(false);
31
+
updateOnline(false);
30
32
ref.current = false;
31
33
});
32
34
}, 5000);
···
35
37
clearInterval(interval);
36
38
if (abort) abort.abort();
37
39
};
38
-
}, []);
39
-
40
-
return online;
40
+
}, [updateOnline]);
41
41
}
-1
src/index.tsx
-1
src/index.tsx
+1
-1
src/pages/HomePage.tsx
+1
-1
src/pages/HomePage.tsx
+1
-1
src/pages/parts/home/HeroPart.tsx
+1
-1
src/pages/parts/home/HeroPart.tsx
···
5
5
import { ThinContainer } from "@/components/layout/ThinContainer";
6
6
import { SearchBarInput } from "@/components/SearchBar";
7
7
import { Title } from "@/components/text/Title";
8
-
import { useBannerSize } from "@/hooks/useBanner";
9
8
import { useSearchQuery } from "@/hooks/useSearchQuery";
9
+
import { useBannerSize } from "@/stores/banner";
10
10
11
11
export interface HeroPartProps {
12
12
setIsSticky: (val: boolean) => void;
+60
-61
src/setup/App.tsx
+60
-61
src/setup/App.tsx
···
10
10
11
11
import { convertLegacyUrl, isLegacyUrl } from "@/backend/metadata/getmeta";
12
12
import { generateQuickSearchMediaUrl } from "@/backend/metadata/tmdb";
13
-
import { BannerContextProvider } from "@/hooks/useBanner";
13
+
import { useOnlineListener } from "@/hooks/usePing";
14
14
import { AboutPage } from "@/pages/About";
15
15
import { DmcaPage } from "@/pages/Dmca";
16
16
import { NotFoundPage } from "@/pages/errors/NotFoundPage";
···
57
57
58
58
function App() {
59
59
useHistoryListener();
60
+
useOnlineListener();
60
61
61
62
return (
62
63
<SettingsProvider>
63
64
<WatchedContextProvider>
64
65
<BookmarkContextProvider>
65
-
<BannerContextProvider>
66
-
<Layout>
67
-
<Switch>
68
-
{/* functional routes */}
69
-
<Route exact path="/s/:query">
70
-
<QuickSearch />
71
-
</Route>
72
-
<Route exact path="/search/:type">
73
-
<Redirect to="/browse" push={false} />
74
-
</Route>
75
-
<Route exact path="/search/:type/:query?">
76
-
{({ match }) => {
77
-
if (match?.params.query)
78
-
return (
79
-
<Redirect
80
-
to={`/browse/${match?.params.query}`}
81
-
push={false}
82
-
/>
83
-
);
84
-
return <Redirect to="/browse" push={false} />;
85
-
}}
86
-
</Route>
66
+
<Layout>
67
+
<Switch>
68
+
{/* functional routes */}
69
+
<Route exact path="/s/:query">
70
+
<QuickSearch />
71
+
</Route>
72
+
<Route exact path="/search/:type">
73
+
<Redirect to="/browse" push={false} />
74
+
</Route>
75
+
<Route exact path="/search/:type/:query?">
76
+
{({ match }) => {
77
+
if (match?.params.query)
78
+
return (
79
+
<Redirect
80
+
to={`/browse/${match?.params.query}`}
81
+
push={false}
82
+
/>
83
+
);
84
+
return <Redirect to="/browse" push={false} />;
85
+
}}
86
+
</Route>
87
87
88
-
{/* pages */}
89
-
<Route
90
-
exact
91
-
path={["/media/:media", "/media/:media/:season/:episode"]}
92
-
>
93
-
<LegacyUrlView>
94
-
<PlayerView />
95
-
</LegacyUrlView>
96
-
</Route>
97
-
<Route
98
-
exact
99
-
path={["/browse/:query?", "/"]}
100
-
component={HomePage}
101
-
/>
102
-
<Route exact path="/faq" component={AboutPage} />
103
-
<Route exact path="/dmca" component={DmcaPage} />
88
+
{/* pages */}
89
+
<Route
90
+
exact
91
+
path={["/media/:media", "/media/:media/:season/:episode"]}
92
+
>
93
+
<LegacyUrlView>
94
+
<PlayerView />
95
+
</LegacyUrlView>
96
+
</Route>
97
+
<Route
98
+
exact
99
+
path={["/browse/:query?", "/"]}
100
+
component={HomePage}
101
+
/>
102
+
<Route exact path="/faq" component={AboutPage} />
103
+
<Route exact path="/dmca" component={DmcaPage} />
104
104
105
-
{/* other */}
106
-
<Route
107
-
exact
108
-
path="/dev"
109
-
component={lazy(() => import("@/pages/DeveloperPage"))}
110
-
/>
105
+
{/* other */}
106
+
<Route
107
+
exact
108
+
path="/dev"
109
+
component={lazy(() => import("@/pages/DeveloperPage"))}
110
+
/>
111
+
<Route
112
+
exact
113
+
path="/dev/video"
114
+
component={lazy(
115
+
() => import("@/pages/developer/VideoTesterView")
116
+
)}
117
+
/>
118
+
{/* developer routes that can abuse workers are disabled in production */}
119
+
{process.env.NODE_ENV === "development" ? (
111
120
<Route
112
121
exact
113
-
path="/dev/video"
114
-
component={lazy(
115
-
() => import("@/pages/developer/VideoTesterView")
116
-
)}
122
+
path="/dev/test"
123
+
component={lazy(() => import("@/pages/developer/TestView"))}
117
124
/>
118
-
{/* developer routes that can abuse workers are disabled in production */}
119
-
{process.env.NODE_ENV === "development" ? (
120
-
<Route
121
-
exact
122
-
path="/dev/test"
123
-
component={lazy(() => import("@/pages/developer/TestView"))}
124
-
/>
125
-
) : null}
126
-
<Route path="*" component={NotFoundPage} />
127
-
</Switch>
128
-
</Layout>
129
-
</BannerContextProvider>
125
+
) : null}
126
+
<Route path="*" component={NotFoundPage} />
127
+
</Switch>
128
+
</Layout>
130
129
</BookmarkContextProvider>
131
130
</WatchedContextProvider>
132
131
</SettingsProvider>
+5
-8
src/setup/Layout.tsx
+5
-8
src/setup/Layout.tsx
···
1
1
import { ReactNode } from "react";
2
-
import { useTranslation } from "react-i18next";
3
2
4
-
import { Banner } from "@/components/Banner";
5
-
import { useBannerSize } from "@/hooks/useBanner";
6
-
import { useIsOnline } from "@/hooks/usePing";
3
+
import { useBannerSize, useBannerStore } from "@/stores/banner";
4
+
import { BannerLocation } from "@/stores/banner/BannerLocation";
7
5
8
6
export function Layout(props: { children: ReactNode }) {
9
-
const { t } = useTranslation();
10
-
const isOnline = useIsOnline();
11
7
const bannerSize = useBannerSize();
8
+
const location = useBannerStore((s) => s.location);
12
9
13
10
return (
14
11
<div>
15
12
<div className="fixed inset-x-0 z-[1000]">
16
-
{!isOnline ? <Banner type="error">{t("errors.offline")}</Banner> : null}
13
+
<BannerLocation />
17
14
</div>
18
15
<div
19
16
style={{
20
-
paddingTop: `${bannerSize}px`,
17
+
paddingTop: location === null ? `${bannerSize}px` : "0px",
21
18
}}
22
19
className="flex min-h-screen flex-col"
23
20
>
-17
src/setup/sentry.tsx
-17
src/setup/sentry.tsx
···
1
-
import { CaptureConsole, HttpClient } from "@sentry/integrations";
2
-
import * as Sentry from "@sentry/react";
3
-
4
-
import { conf } from "@/setup/config";
5
-
import { SENTRY_DSN } from "@/setup/constants";
6
-
7
-
if (process.env.NODE_ENV !== "development")
8
-
Sentry.init({
9
-
dsn: SENTRY_DSN,
10
-
release: `movie-web@${conf().APP_VERSION}`,
11
-
sampleRate: 0.5,
12
-
integrations: [
13
-
new Sentry.BrowserTracing(),
14
-
new CaptureConsole(),
15
-
new HttpClient(),
16
-
],
17
-
});