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