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";
7import { UpdateState } from "../../types";
8
9const { ThemeDarkIcon, Text, Button } = Components;
10const Margins = spacepack.require("discord/styles/shared/Margins.css");
11const HelpMessageClasses = spacepack.findByExports("positive", "iconDiv")[0].exports;
12
13const logger = moonlight.getLogger("moonbase/ui/update");
14
15const 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
22export 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={() => window.location.reload()}
55 >
56 Restart Discord
57 </Button>
58 )}
59
60 <Button
61 look={Button.Looks.OUTLINED}
62 color={Button.Colors.CUSTOM}
63 size={Button.Sizes.TINY}
64 disabled={state !== UpdateState.Ready}
65 onClick={() => {
66 setState(UpdateState.Working);
67
68 MoonbaseSettingsStore.updateMoonlight()
69 .then(() => setState(UpdateState.Installed))
70 .catch((e) => {
71 logger.error(e);
72 setState(UpdateState.Failed);
73 });
74 }}
75 >
76 Update
77 </Button>
78 </div>
79 </div>
80 );
81}