124 lines
3.9 kB
1
import { useStateFromStores } from "@moonlight-mod/wp/discord/packages/flux";
2
import { MoonbaseSettingsStore } from "@moonlight-mod/wp/moonbase_stores";
3
import React from "@moonlight-mod/wp/react";
4
import { UpdateState } from "../../types";
5
import HelpMessage from "./HelpMessage";
6
import { MoonlightBranch } from "@moonlight-mod/types";
7
import MarkupUtils from "@moonlight-mod/wp/discord/modules/markup/MarkupUtils";
8
import Flex from "@moonlight-mod/wp/discord/uikit/Flex";
9
import {
10
ThemeDarkIcon,
11
Button,
12
Text,
13
ModalRoot,
14
ModalSize,
15
ModalContent,
16
ModalHeader,
17
Heading,
18
ModalCloseButton,
19
openModal
20
} from "@moonlight-mod/wp/discord/components/common/index";
21
import MarkupClasses from "@moonlight-mod/wp/discord/modules/messages/web/Markup.css";
22
23
const strings: Record<UpdateState, string> = {
24
[UpdateState.Ready]: "A new version of moonlight is available.",
25
[UpdateState.Working]: "Updating moonlight...",
26
[UpdateState.Installed]: "Updated. Restart Discord to apply changes.",
27
[UpdateState.Failed]: "Failed to update moonlight. Please use the installer instead."
28
};
29
30
function MoonlightChangelog({
31
changelog,
32
version,
33
transitionState,
34
onClose
35
}: {
36
changelog: string;
37
version: string;
38
transitionState: number | null;
39
onClose: () => void;
40
}) {
41
return (
42
<ModalRoot transitionState={transitionState} size={ModalSize.DYNAMIC}>
43
<ModalHeader>
44
<Flex.Child grow={1} shrink={1}>
45
<Heading variant="heading-lg/semibold">moonlight</Heading>
46
<Text variant="text-xs/normal">{version}</Text>
47
</Flex.Child>
48
49
<Flex.Child grow={0}>
50
<ModalCloseButton onClick={onClose} />
51
</Flex.Child>
52
</ModalHeader>
53
54
<ModalContent>
55
<Text variant="text-md/normal" className={MarkupClasses.markup} style={{ padding: "1rem" }}>
56
{MarkupUtils.parse(changelog, true, {
57
allowHeading: true,
58
allowList: true,
59
allowLinks: true
60
})}
61
</Text>
62
</ModalContent>
63
</ModalRoot>
64
);
65
}
66
67
export default function Update() {
68
const [newVersion, state] = useStateFromStores([MoonbaseSettingsStore], () => [
69
MoonbaseSettingsStore.newVersion,
70
MoonbaseSettingsStore.updateState
71
]);
72
73
if (newVersion == null) return null;
74
75
return (
76
<HelpMessage text={strings[state]} className="moonbase-update-section" icon={ThemeDarkIcon}>
77
<div className="moonbase-help-message-buttons">
78
{moonlight.branch === MoonlightBranch.STABLE && (
79
<Button
80
look={Button.Looks.OUTLINED}
81
color={Button.Colors.CUSTOM}
82
size={Button.Sizes.TINY}
83
onClick={() => {
84
fetch(`https://raw.githubusercontent.com/moonlight-mod/moonlight/refs/tags/${newVersion}/CHANGELOG.md`)
85
.then((r) => r.text())
86
.then((changelog) =>
87
openModal((modalProps) => {
88
return <MoonlightChangelog {...modalProps} changelog={changelog} version={newVersion} />;
89
})
90
);
91
}}
92
>
93
View changelog
94
</Button>
95
)}
96
97
{state === UpdateState.Installed && (
98
<Button
99
look={Button.Looks.OUTLINED}
100
color={Button.Colors.CUSTOM}
101
size={Button.Sizes.TINY}
102
onClick={() => {
103
MoonbaseSettingsStore.restartDiscord();
104
}}
105
>
106
Restart Discord
107
</Button>
108
)}
109
110
<Button
111
look={Button.Looks.OUTLINED}
112
color={Button.Colors.CUSTOM}
113
size={Button.Sizes.TINY}
114
disabled={state !== UpdateState.Ready}
115
onClick={() => {
116
MoonbaseSettingsStore.updateMoonlight();
117
}}
118
>
119
Update
120
</Button>
121
</div>
122
</HelpMessage>
123
);
124
}
125