125 lines
4.6 kB
1
import * as Components from "@moonlight-mod/wp/discord/components/common/index";
2
import Flex from "@moonlight-mod/wp/discord/uikit/Flex";
3
import React from "@moonlight-mod/wp/react";
4
import MarkupUtils from "@moonlight-mod/wp/discord/modules/markup/MarkupUtils";
5
import IntegrationCard from "@moonlight-mod/wp/discord/modules/guild_settings/IntegrationCard.css";
6
import spacepack from "@moonlight-mod/wp/spacepack_spacepack";
7
8
const { Card, Text, useThemeContext, Button, AngleBracketsIcon, BookCheckIcon, ClydeIcon } = Components;
9
10
const wordmark = "https://raw.githubusercontent.com/moonlight-mod/moonlight/refs/heads/main/img/wordmark.png";
11
const wordmarkLight =
12
"https://raw.githubusercontent.com/moonlight-mod/moonlight/refs/heads/main/img/wordmark-light.png";
13
14
function parse(str: string) {
15
return MarkupUtils.parse(str, true, {
16
allowHeading: true,
17
allowLinks: true,
18
allowList: true
19
});
20
}
21
22
function Dev({ name, picture, link }: { name: string; picture: string; link: string }) {
23
return (
24
<Card editable={true} className={IntegrationCard.card}>
25
<div className={IntegrationCard.cardHeader + " moonbase-dev"}>
26
<Flex direction={Flex.Direction.HORIZONTAL} align={Flex.Align.CENTER}>
27
<img src={picture} alt={name} className="moonbase-dev-avatar" />
28
29
<Flex direction={Flex.Direction.VERTICAL} align={Flex.Align.CENTER}>
30
<a href={link} rel="noreferrer noopener" target="_blank" tabIndex={-1}>
31
<Text variant="text-md/semibold">{name}</Text>
32
</a>
33
</Flex>
34
</Flex>
35
</div>
36
</Card>
37
);
38
}
39
40
function IconButton({
41
text,
42
link,
43
icon,
44
openInClient
45
}: {
46
text: string;
47
link: string;
48
icon: React.FC<any>;
49
openInClient?: boolean;
50
}) {
51
return (
52
<Button
53
onClick={() => {
54
if (openInClient) {
55
try {
56
const openLink = spacepack.findFunctionByStrings(
57
spacepack.findByCode(".trackAnnouncementMessageLinkClicked({messageId:")[0].exports,
58
".trackAnnouncementMessageLinkClicked({messageId:"
59
) as ({ href }: { href: string }) => void;
60
openLink({ href: link });
61
} catch {
62
window.open(link);
63
}
64
} else {
65
// Will open externally in the user's browser
66
window.open(link);
67
}
68
}}
69
>
70
<Flex direction={Flex.Direction.HORIZONTAL} align={Flex.Align.CENTER} className="moonbase-gap">
71
{React.createElement(icon, {
72
size: "sm",
73
color: "currentColor"
74
})}
75
{text}
76
</Flex>
77
</Button>
78
);
79
}
80
81
export default function AboutPage() {
82
const darkTheme = useThemeContext()?.theme === "dark";
83
84
return (
85
<div>
86
<Flex direction={Flex.Direction.VERTICAL} align={Flex.Align.CENTER}>
87
<img src={darkTheme ? wordmarkLight : wordmark} alt="moonlight wordmark" className="moonbase-wordmark" />
88
<Text variant="heading-lg/medium">created by:</Text>
89
<div className="moonbase-devs">
90
<Dev name="Cynosphere" picture="https://github.com/Cynosphere.png" link="https://github.com/Cynosphere" />
91
<Dev name="NotNite" picture="https://github.com/NotNite.png" link="https://github.com/NotNite" />
92
<Dev name="adryd" picture="https://github.com/adryd325.png" link="https://github.com/adryd325" />
93
<Dev
94
name="redstonekasi"
95
picture="https://github.com/redstonekasi.png"
96
link="https://github.com/redstonekasi"
97
/>
98
</div>
99
100
<Flex direction={Flex.Direction.HORIZONTAL} align={Flex.Align.CENTER} className="moonbase-gap">
101
<IconButton text="View source" icon={AngleBracketsIcon} link="https://github.com/moonlight-mod/moonlight" />
102
<IconButton text="Open the docs" icon={BookCheckIcon} link="https://moonlight-mod.github.io/" />
103
<IconButton
104
text="Join the server"
105
icon={ClydeIcon}
106
link="https://discord.gg/FdZBTFCP6F"
107
openInClient={true}
108
/>
109
</Flex>
110
</Flex>
111
112
<Flex direction={Flex.Direction.VERTICAL} align={Flex.Align.START} className="moonbase-about-text">
113
<Text variant="text-sm/normal">
114
{parse(`moonlight \`${window.moonlight.version}\` on \`${window.moonlight.branch}\``)}
115
</Text>
116
117
<Text variant="text-sm/normal">
118
{parse(
119
"moonlight is licensed under the [GNU Lesser General Public License](https://www.gnu.org/licenses/lgpl-3.0.html) (`LGPL-3.0-or-later`)."
120
)}
121
</Text>
122
</Flex>
123
</div>
124
);
125
}
126