pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
collapsable custom source order
+40
-7
+2
src/assets/locales/en.json
+2
src/assets/locales/en.json
···
1354
1354
"sourceOrder": "Reordering sources",
1355
1355
"sourceOrderDescription": "Drag and drop to reorder sources. This will determine the order in which sources are checked for the media you are trying to watch. If a source is greyed out, it means the <bold>extension</bold> is required for that source. <br><br> <strong>(The default order is best for most users)</strong>",
1356
1356
"sourceOrderEnableLabel": "Custom source order",
1357
+
"showLess": "Show less",
1358
+
"showMore": "Show more",
1357
1359
"embedOrder": "Reordering embeds",
1358
1360
"embedOrderDescription": "Drag and drop to reorder embeds. This will determine the order in which embeds are checked for the media you are trying to watch. <br><br> <strong>(The default order is best for most users)</strong>",
1359
1361
"embedOrderEnableLabel": "Custom embed order",
+38
-7
src/pages/parts/settings/PreferencesPart.tsx
+38
-7
src/pages/parts/settings/PreferencesPart.tsx
···
1
1
import classNames from "classnames";
2
-
import { useMemo } from "react";
2
+
import { useMemo, useState } from "react";
3
3
import { Trans, useTranslation } from "react-i18next";
4
4
import { useNavigate } from "react-router-dom";
5
5
···
9
9
import { FlagIcon } from "@/components/FlagIcon";
10
10
import { Dropdown } from "@/components/form/Dropdown";
11
11
import { SortableList } from "@/components/form/SortableList";
12
+
import { Icon, Icons } from "@/components/Icon";
12
13
import { Heading1 } from "@/components/utils/Text";
13
14
import { appLanguageOptions } from "@/setup/i18n";
14
15
import { useOverlayStack } from "@/stores/interface/overlayStack";
···
45
46
}) {
46
47
const { t } = useTranslation();
47
48
const { showModal } = useOverlayStack();
49
+
const [isSourceListExpanded, setIsSourceListExpanded] = useState(false);
48
50
const sorted = sortLangCodes(appLanguageOptions.map((item) => item.code));
49
51
50
52
const allowAutoplay = isAutoplayAllowed();
···
381
383
382
384
{props.enableSourceOrder && (
383
385
<div className="w-full flex flex-col gap-4">
384
-
<SortableList
385
-
items={sourceItems}
386
-
setItems={(items) =>
387
-
props.setSourceOrder(items.map((item) => item.id))
388
-
}
389
-
/>
386
+
<div
387
+
className={classNames(
388
+
"overflow-hidden transition-all duration-300",
389
+
sourceItems.length > 10 && !isSourceListExpanded
390
+
? "max-h-[400px]"
391
+
: "max-h-none",
392
+
)}
393
+
>
394
+
<SortableList
395
+
items={sourceItems}
396
+
setItems={(items) =>
397
+
props.setSourceOrder(items.map((item) => item.id))
398
+
}
399
+
/>
400
+
</div>
401
+
{sourceItems.length > 10 && (
402
+
<Button
403
+
className="max-w-[25rem]"
404
+
theme="secondary"
405
+
onClick={() =>
406
+
setIsSourceListExpanded(!isSourceListExpanded)
407
+
}
408
+
>
409
+
{isSourceListExpanded
410
+
? t("settings.preferences.showLess")
411
+
: t("settings.preferences.showMore")}
412
+
<Icon
413
+
icon={
414
+
isSourceListExpanded
415
+
? Icons.CHEVRON_UP
416
+
: Icons.CHEVRON_DOWN
417
+
}
418
+
/>
419
+
</Button>
420
+
)}
390
421
<Button
391
422
className="max-w-[25rem]"
392
423
theme="secondary"