pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
remove open in external player option
-109
-109
src/components/player/atoms/settings/Downloads.tsx
-109
src/components/player/atoms/settings/Downloads.tsx
···
1
-
import { Listbox } from "@headlessui/react";
2
1
import { useCallback, useMemo } from "react";
3
2
import { Trans, useTranslation } from "react-i18next";
4
3
import { useCopyToClipboard } from "react-use";
5
4
6
5
import { Button } from "@/components/buttons/Button";
7
-
import { OptionItem } from "@/components/form/Dropdown";
8
6
import { Icon, Icons } from "@/components/Icon";
9
7
import { OverlayPage } from "@/components/overlays/OverlayPage";
10
8
import { Menu } from "@/components/player/internals/ContextMenu";
11
9
import { convertSubtitlesToSrtDataurl } from "@/components/player/utils/captions";
12
-
import { Transition } from "@/components/utils/Transition";
13
10
import { useOverlayRouter } from "@/hooks/useOverlayRouter";
14
11
import { usePlayerStore } from "@/stores/player/store";
15
12
16
-
function PlayerDropdown({
17
-
options,
18
-
onSelectOption,
19
-
}: {
20
-
options: OptionItem[];
21
-
onSelectOption: (option: OptionItem) => void;
22
-
}) {
23
-
const { t } = useTranslation();
24
-
const defaultLabel = t("player.menus.downloads.openIn");
25
-
26
-
return (
27
-
<div className="relative w-full mb-3">
28
-
<Listbox onChange={onSelectOption}>
29
-
{({ open }) => (
30
-
<>
31
-
<Listbox.Button className="relative z-[101] w-full rounded-lg bg-dropdown-background hover:bg-dropdown-hoverBackground py-3 pl-3 pr-10 text-left text-white shadow-md focus:outline-none tabbable cursor-pointer">
32
-
<span className="flex gap-4 items-center truncate">
33
-
{defaultLabel}
34
-
</span>
35
-
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
36
-
<Icon
37
-
icon={Icons.UP_DOWN_ARROW}
38
-
className="transform transition-transform text-xl text-dropdown-secondary rotate-180"
39
-
/>
40
-
</span>
41
-
</Listbox.Button>
42
-
<Transition
43
-
animation="slide-down"
44
-
show={open}
45
-
className="absolute z-[102] bottom-full mb-1 w-full max-h-60 overflow-auto rounded-lg bg-dropdown-background py-1 text-white shadow-lg ring-1 ring-black ring-opacity-5 scrollbar-thin scrollbar-track-background-secondary scrollbar-thumb-type-secondary focus:outline-none"
46
-
>
47
-
<Listbox.Options static className="py-1">
48
-
{options.map((opt) => (
49
-
<Listbox.Option
50
-
className={({ active }) =>
51
-
`cursor-pointer flex gap-4 items-center relative select-none py-2 px-4 mx-1 rounded-lg ${
52
-
active
53
-
? "bg-background-secondaryHover text-type-link"
54
-
: "text-type-secondary"
55
-
}`
56
-
}
57
-
key={opt.id}
58
-
value={opt}
59
-
>
60
-
{opt.leftIcon ? opt.leftIcon : null}
61
-
{opt.name}
62
-
</Listbox.Option>
63
-
))}
64
-
</Listbox.Options>
65
-
</Transition>
66
-
</>
67
-
)}
68
-
</Listbox>
69
-
</div>
70
-
);
71
-
}
72
-
73
13
export function useDownloadLink() {
74
14
const source = usePlayerStore((s) => s.source);
75
15
const currentQuality = usePlayerStore((s) => s.currentQuality);
···
132
72
window.open(dataUrl);
133
73
}, [selectedCaption]);
134
74
135
-
const playerOptions = useMemo(
136
-
() => [
137
-
{ id: "vlc", name: t("player.menus.downloads.vlc") },
138
-
{ id: "iina", name: t("player.menus.downloads.iina") },
139
-
{ id: "outplayer", name: t("player.menus.downloads.outplayer") },
140
-
],
141
-
[t],
142
-
);
143
-
144
-
const openInExternalPlayer = useCallback(
145
-
(option: OptionItem) => {
146
-
if (!downloadUrl) return;
147
-
148
-
let externalUrl = "";
149
-
150
-
switch (option.id) {
151
-
case "vlc":
152
-
externalUrl = `vlc://${downloadUrl}`;
153
-
break;
154
-
case "iina":
155
-
externalUrl = `iina://weblink?url=${encodeURIComponent(downloadUrl)}`;
156
-
break;
157
-
case "outplayer":
158
-
externalUrl = `outplayer://${downloadUrl}`;
159
-
break;
160
-
default:
161
-
break;
162
-
}
163
-
164
-
if (externalUrl) {
165
-
window.open(externalUrl);
166
-
}
167
-
},
168
-
[downloadUrl],
169
-
);
170
-
171
75
if (!downloadUrl) return null;
172
76
173
77
return (
···
182
86
<Menu.Paragraph marginClass="mb-6">
183
87
<StyleTrans k="player.menus.downloads.hlsDisclaimer" />
184
88
</Menu.Paragraph>
185
-
186
-
<PlayerDropdown
187
-
options={playerOptions}
188
-
onSelectOption={openInExternalPlayer}
189
-
/>
190
-
<p className="text-xs pb-4 text-type-danger">
191
-
<Trans i18nKey="player.menus.downloads.hlsOpenInDisclaimer" />
192
-
</p>
193
89
194
90
<Button className="w-full mt-2" theme="purple" href={hlsDownload}>
195
91
{t("player.menus.downloads.button")}
···
245
141
<Menu.Paragraph marginClass="my-6">
246
142
<StyleTrans k="player.menus.downloads.disclaimer" />
247
143
</Menu.Paragraph>
248
-
249
-
<PlayerDropdown
250
-
options={playerOptions}
251
-
onSelectOption={openInExternalPlayer}
252
-
/>
253
144
254
145
<Button className="w-full" href={downloadUrl} theme="purple">
255
146
{t("player.menus.downloads.downloadVideo")}