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 React from "@moonlight-mod/wp/react";
4import { UpdateState } from "../../types";
5import HelpMessage from "./HelpMessage";
6import { MoonlightBranch } from "@moonlight-mod/types";
7import MarkupUtils from "@moonlight-mod/wp/discord/modules/markup/MarkupUtils";
8import Flex from "@moonlight-mod/wp/discord/uikit/Flex";
9import {
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";
21import MarkupClasses from "@moonlight-mod/wp/discord/modules/messages/web/Markup.css";
22
23const 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
30function 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
67export 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}