pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
update fancy modal and onboarding info
+44
-42
+5
-5
src/assets/locales/en.json
+5
-5
src/assets/locales/en.json
···
670
670
"start": {
671
671
"explainer": "To get the best streams possible, you will need to choose which streaming method you want to use.",
672
672
"moreInfo": {
673
-
"button": "More info",
673
+
"button": "Which setup should I choose?",
674
674
"title": "Understanding a setup",
675
675
"explainer": {
676
676
"intro": "P-Stream doesn't host videos. It relies on third-party websites for content, so you need to choose how it connects to those sites.",
677
677
"options": "Your Options:",
678
-
"extension": "1. Extension",
678
+
"extension": "Extension",
679
679
"extensionDescription": "The extension gives you access to the most sources. It acts as a local proxy and can handle sites that need special cookies or headers to load.",
680
-
"proxy": "2. Proxy",
680
+
"proxy": "Proxy",
681
681
"proxyDescription": "The proxy scrapes media from other websites. It bypasses browser restrictions (like CORS) to allow scraping.",
682
-
"default": "3. Default Setup",
682
+
"default": "Default Setup",
683
683
"defaultDescription": "Uses P-Stream's built-in proxy. It's the easiest option but might be slower due to shared bandwidth.",
684
684
"fedapi": {
685
685
"fedapi": "Additional: Febbox token",
···
692
692
"subtitle": "Recommended Configurations:",
693
693
"desktop": {
694
694
"title": "Desktop:",
695
-
"description": "Extension + Febbox token"
695
+
"description": "Extension (or app) + Febbox token"
696
696
},
697
697
"iOS": {
698
698
"title": "iOS:",
+39
-37
src/components/overlays/Modal.tsx
+39
-37
src/components/overlays/Modal.tsx
···
92
92
<Helmet>
93
93
<html data-no-scroll />
94
94
</Helmet>
95
-
<div className="flex absolute inset-0 items-center justify-center">
96
-
<Flare.Base
97
-
className={classNames(
98
-
"group -m-[0.705em] rounded-3xl bg-background-main transition-colors duration-300 focus:relative focus:z-10",
99
-
"w-full mx-4 p-6 bg-mediaCard-hoverBackground bg-opacity-60 backdrop-filter backdrop-blur-lg shadow-lg",
100
-
props.size === "md" ? "max-w-md" : "max-w-2xl",
101
-
props.size === "xl" ? "max-w-7xl" : "max-w-2xl",
102
-
)}
103
-
>
104
-
<div className="transition-transform duration-300 overflow-y-scroll max-h-[90dvh] scrollbar-none">
105
-
<Flare.Light
106
-
flareSize={300}
107
-
cssColorVar="--colors-mediaCard-hoverAccent"
108
-
backgroundClass="bg-modal-background duration-100"
109
-
className="rounded-3xl bg-background-main group-hover:opacity-100"
110
-
/>
111
-
<Flare.Child className="pointer-events-auto relative mb-2p-[0.4em] transition-transform duration-300">
112
-
<div className="flex justify-between items-center mb-4">
113
-
{props.title && (
114
-
<Heading2 className="!mt-0 !mb-0 pr-6">
115
-
{props.title}
116
-
</Heading2>
117
-
)}
118
-
<button
119
-
type="button"
120
-
className="text-s font-semibold text-type-secondary hover:text-white transition-transform hover:scale-95"
121
-
onClick={handleClose}
122
-
>
123
-
<IconPatch icon={Icons.X} />
124
-
</button>
125
-
</div>
126
-
<div className="text-lg text-type-secondary">
127
-
{props.children}
128
-
</div>
129
-
</Flare.Child>
130
-
</div>
131
-
</Flare.Base>
95
+
<div className="flex absolute inset-0 items-center justify-center p-4 overflow-hidden">
96
+
<div className="overflow-y-auto max-h-[85vh] pointer-events-auto">
97
+
<Flare.Base
98
+
className={classNames(
99
+
"group rounded-3xl bg-background-main transition-colors duration-300 focus:relative focus:z-10",
100
+
"w-full p-6 bg-mediaCard-hoverBackground bg-opacity-60 backdrop-filter backdrop-blur-lg shadow-lg",
101
+
props.size === "md" ? "max-w-md" : "max-w-2xl",
102
+
props.size === "xl" ? "max-w-7xl" : "max-w-2xl",
103
+
)}
104
+
>
105
+
<div className="overflow-y-auto overflow-x-hidden max-h-[85vh]">
106
+
<Flare.Light
107
+
flareSize={300}
108
+
cssColorVar="--colors-mediaCard-hoverAccent"
109
+
backgroundClass="bg-modal-background duration-100"
110
+
className="rounded-3xl bg-background-main group-hover:opacity-100"
111
+
/>
112
+
<Flare.Child className="pointer-events-auto relative">
113
+
<div className="flex justify-between items-center mb-4">
114
+
{props.title && (
115
+
<Heading2 className="!mt-0 !mb-0 pr-6">
116
+
{props.title}
117
+
</Heading2>
118
+
)}
119
+
<button
120
+
type="button"
121
+
className="text-s font-semibold text-type-secondary hover:text-white transition-transform hover:scale-95"
122
+
onClick={handleClose}
123
+
>
124
+
<IconPatch icon={Icons.X} />
125
+
</button>
126
+
</div>
127
+
<div className="text-lg text-type-secondary">
128
+
{props.children}
129
+
</div>
130
+
</Flare.Child>
131
+
</div>
132
+
</Flare.Base>
133
+
</div>
132
134
</div>
133
135
</OverlayPortal>
134
136
);