83 lines
2.9 kB
1
import { useStateFromStores } from "@moonlight-mod/wp/discord/packages/flux";
2
import { MoonbaseSettingsStore } from "@moonlight-mod/wp/moonbase_stores";
3
import * as Components from "@moonlight-mod/wp/discord/components/common/index";
4
import React from "@moonlight-mod/wp/react";
5
import spacepack from "@moonlight-mod/wp/spacepack_spacepack";
6
import Flex from "@moonlight-mod/wp/discord/uikit/Flex";
7
import { UpdateState } from "../../types";
8
9
const { ThemeDarkIcon, Text, Button } = Components;
10
const Margins = spacepack.require("discord/styles/shared/Margins.css");
11
const HelpMessageClasses = spacepack.findByExports("positive", "iconDiv")[0].exports;
12
13
const logger = moonlight.getLogger("moonbase/ui/update");
14
15
const strings: Record<UpdateState, string> = {
16
[UpdateState.Ready]: "A new version of moonlight is available.",
17
[UpdateState.Working]: "Updating moonlight...",
18
[UpdateState.Installed]: "Updated. Restart Discord to apply changes.",
19
[UpdateState.Failed]: "Failed to update moonlight. Please use the installer instead."
20
};
21
22
export default function Update() {
23
const [state, setState] = React.useState(UpdateState.Ready);
24
const newVersion = useStateFromStores([MoonbaseSettingsStore], () => MoonbaseSettingsStore.newVersion);
25
26
if (newVersion == null) return null;
27
28
// reimpl of HelpMessage but with a custom icon
29
return (
30
<div
31
className={`${Margins.marginBottom20} ${HelpMessageClasses.info} ${HelpMessageClasses.container} moonbase-update-section`}
32
>
33
<Flex direction={Flex.Direction.HORIZONTAL}>
34
<div
35
className={HelpMessageClasses.iconDiv}
36
style={{
37
alignItems: "center"
38
}}
39
>
40
<ThemeDarkIcon size="sm" color="currentColor" className={HelpMessageClasses.icon} />
41
</div>
42
43
<Text variant="text-sm/medium" color="currentColor" className={HelpMessageClasses.text}>
44
{strings[state]}
45
</Text>
46
</Flex>
47
48
<div className="moonbase-update-section-buttons">
49
{state === UpdateState.Installed && (
50
<Button
51
look={Button.Looks.OUTLINED}
52
color={Button.Colors.CUSTOM}
53
size={Button.Sizes.TINY}
54
onClick={() => {
55
MoonbaseSettingsStore.restartDiscord();
56
}}
57
>
58
Restart Discord
59
</Button>
60
)}
61
62
<Button
63
look={Button.Looks.OUTLINED}
64
color={Button.Colors.CUSTOM}
65
size={Button.Sizes.TINY}
66
disabled={state !== UpdateState.Ready}
67
onClick={() => {
68
setState(UpdateState.Working);
69
70
MoonbaseSettingsStore.updateMoonlight()
71
.then(() => setState(UpdateState.Installed))
72
.catch((e) => {
73
logger.error(e);
74
setState(UpdateState.Failed);
75
});
76
}}
77
>
78
Update
79
</Button>
80
</div>
81
</div>
82
);
83
}
84