pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
update low performance mode to hide flare and show media card ellipse
+14
-6
+1
-5
src/components/media/MediaCard.tsx
+1
-5
src/components/media/MediaCard.tsx
···
131
131
132
132
const [searchQuery] = useSearchQuery();
133
133
134
-
const enableLowPerformanceMode = usePreferencesStore(
135
-
(state) => state.enableLowPerformanceMode,
136
-
);
137
-
138
134
// Intersection observer for lazy loading
139
135
const { targetRef } = useIntersectionObserver({
140
136
rootMargin: "300px",
···
274
270
<DotList className="text-xs" content={dotListContent} />
275
271
</div>
276
272
277
-
{!closable && !enableLowPerformanceMode && (
273
+
{!closable && (
278
274
<div className="absolute bottom-0 translate-y-1 right-1">
279
275
<button
280
276
className="media-more-button p-2"
+13
-1
src/components/utils/Flare.tsx
+13
-1
src/components/utils/Flare.tsx
···
1
1
import c from "classnames";
2
2
import { ReactNode, useEffect, useRef } from "react";
3
+
4
+
import { usePreferencesStore } from "../../stores/preferences";
3
5
import "./Flare.css";
4
6
5
7
export interface FlareProps {
···
37
39
}
38
40
39
41
function Light(props: FlareProps) {
42
+
const { enableLowPerformanceMode } = usePreferencesStore();
43
+
40
44
const outerRef = useRef<HTMLDivElement>(null);
41
45
const size = props.flareSize ?? SIZE_DEFAULT;
42
46
const cssVar = props.cssColorVar ?? CSS_VAR_DEFAULT;
···
44
48
const spread = props.gradientSpread ?? 70;
45
49
46
50
useEffect(() => {
51
+
// Only add mouse listener if not in low performance mode
52
+
if (enableLowPerformanceMode) return;
53
+
47
54
function mouseMove(e: MouseEvent) {
48
55
if (!outerRef.current) return;
49
56
const rect = outerRef.current.getBoundingClientRect();
···
60
67
document.addEventListener("mousemove", mouseMove);
61
68
62
69
return () => document.removeEventListener("mousemove", mouseMove);
63
-
}, [size]);
70
+
}, [size, enableLowPerformanceMode]);
71
+
72
+
// Disable flare effect when low performance mode is enabled
73
+
if (enableLowPerformanceMode) {
74
+
return null;
75
+
}
64
76
65
77
return (
66
78
<div