2020-11-03 02:47:08 +01:00
|
|
|
import {React, Logger, Strings, WebpackModules, DiscordModules} from "modules";
|
2020-11-05 00:04:44 +01:00
|
|
|
import SimpleMarkdown from "../../structs/markdown";
|
2019-06-27 22:18:40 +02:00
|
|
|
import ReloadIcon from "../icons/reload";
|
2019-06-30 07:32:14 +02:00
|
|
|
import EditIcon from "../icons/edit";
|
|
|
|
import DeleteIcon from "../icons/delete";
|
2020-11-03 02:47:08 +01:00
|
|
|
import CogIcon from "../icons/cog";
|
2019-06-30 05:09:48 +02:00
|
|
|
import Switch from "./components/switch";
|
2020-11-03 02:47:08 +01:00
|
|
|
|
|
|
|
import GitHubIcon from "../icons/github";
|
|
|
|
import MoneyIcon from "../icons/dollarsign";
|
|
|
|
import WebIcon from "../icons/globe";
|
|
|
|
import PatreonIcon from "../icons/patreon";
|
|
|
|
import SupportIcon from "../icons/support";
|
2020-11-07 07:03:29 +01:00
|
|
|
import ExtIcon from "../icons/extension";
|
|
|
|
import ThemeIcon from "../icons/theme";
|
2020-11-03 02:47:08 +01:00
|
|
|
import Modals from "../modals";
|
|
|
|
import Toasts from "../toasts";
|
|
|
|
|
|
|
|
const LinkIcons = {
|
|
|
|
website: WebIcon,
|
|
|
|
source: GitHubIcon,
|
|
|
|
invite: SupportIcon,
|
|
|
|
donate: MoneyIcon,
|
|
|
|
patreon: PatreonIcon
|
|
|
|
};
|
2019-06-27 22:18:40 +02:00
|
|
|
|
2019-07-03 16:15:48 +02:00
|
|
|
const Tooltip = WebpackModules.getByDisplayName("Tooltip");
|
2020-11-07 07:03:29 +01:00
|
|
|
const LayerStack = WebpackModules.getByProps("popLayer");
|
|
|
|
const UserStore = WebpackModules.getByProps("getCurrentUser");
|
|
|
|
const ChannelStore = WebpackModules.getByProps("getDMFromUserId");
|
|
|
|
const PrivateChannelActions = WebpackModules.getByProps("openPrivateChannel");
|
|
|
|
const ChannelActions = WebpackModules.getByProps("selectPrivateChannel");
|
2019-07-03 16:15:48 +02:00
|
|
|
|
2019-06-28 01:50:20 +02:00
|
|
|
export default class AddonCard extends React.Component {
|
2019-06-27 22:18:40 +02:00
|
|
|
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.state = {
|
|
|
|
settingsOpen: false
|
|
|
|
};
|
2019-06-28 01:50:20 +02:00
|
|
|
|
2019-06-27 22:18:40 +02:00
|
|
|
this.settingsPanel = "";
|
|
|
|
this.panelRef = React.createRef();
|
|
|
|
|
2019-06-28 01:50:20 +02:00
|
|
|
this.onChange = this.onChange.bind(this);
|
2019-06-27 22:18:40 +02:00
|
|
|
this.reload = this.reload.bind(this);
|
2019-06-28 01:50:20 +02:00
|
|
|
this.showSettings = this.showSettings.bind(this);
|
2020-11-07 07:03:29 +01:00
|
|
|
this.messageAuthor = this.messageAuthor.bind(this);
|
2020-11-03 02:47:08 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
showSettings() {
|
|
|
|
if (!this.props.hasSettings || !this.props.enabled) return;
|
|
|
|
const name = this.getString(this.props.addon.name);
|
|
|
|
try {
|
|
|
|
Modals.showAddonSettingsModal(name, this.props.getSettingsPanel());
|
|
|
|
}
|
|
|
|
catch (err) {
|
|
|
|
Toasts.show(Strings.Addons.settingsError.format({name}), {type: "error"});
|
|
|
|
Logger.stacktrace("Addon Settings", "Unable to get settings panel for " + name + ".", err);
|
|
|
|
}
|
2019-06-27 22:18:40 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
reload() {
|
|
|
|
if (!this.props.reload) return;
|
|
|
|
this.props.addon = this.props.reload(this.props.addon.id);
|
|
|
|
this.forceUpdate();
|
|
|
|
}
|
|
|
|
|
|
|
|
getString(value) {return typeof value == "string" ? value : value.toString();}
|
|
|
|
|
2019-06-28 01:50:20 +02:00
|
|
|
onChange() {
|
|
|
|
this.props.onChange && this.props.onChange(this.props.addon.id);
|
2019-06-30 05:09:48 +02:00
|
|
|
this.props.enabled = !this.props.enabled;
|
2020-07-18 05:53:01 +02:00
|
|
|
this.forceUpdate();
|
2019-06-28 01:50:20 +02:00
|
|
|
}
|
|
|
|
|
2020-11-07 07:03:29 +01:00
|
|
|
messageAuthor() {
|
|
|
|
if (!this.props.addon.authorId) return;
|
|
|
|
if (LayerStack) LayerStack.popLayer();
|
|
|
|
if (!UserStore || !ChannelActions || !ChannelStore || !PrivateChannelActions) return;
|
|
|
|
const selfId = UserStore.getCurrentUser().id;
|
|
|
|
if (selfId == this.props.addon.authorId) return;
|
|
|
|
const privateChannelId = ChannelStore.getDMFromUserId(this.props.addon.authorId);
|
|
|
|
if (privateChannelId) return ChannelActions.selectPrivateChannel(privateChannelId);
|
|
|
|
PrivateChannelActions.openPrivateChannel(selfId, this.props.addon.authorId);
|
|
|
|
}
|
|
|
|
|
2019-06-27 22:18:40 +02:00
|
|
|
buildTitle(name, version, author) {
|
2020-11-07 07:03:29 +01:00
|
|
|
const authorArray = Strings.Addons.byline.split(/({{[A-Za-z]+}})/);
|
|
|
|
const authorComponent = author.link || author.id
|
|
|
|
? <a className="bd-link bd-link-website" href={author.link || null} onClick={this.messageAuthor} target="_blank" rel="noopener noreferrer">{author.name}</a>
|
|
|
|
: <span className="bd-author">{author.name}</span>;
|
|
|
|
|
|
|
|
const authorIndex = authorArray.findIndex(s => s == "{{author}}");
|
|
|
|
if (authorIndex) authorArray[authorIndex] = authorComponent;
|
|
|
|
|
|
|
|
return [
|
|
|
|
React.createElement("div", {className: "bd-name"}, name),
|
|
|
|
React.createElement("div", {className: "bd-meta"},
|
|
|
|
React.createElement("span", {className: "bd-version"}, `v${version}`),
|
|
|
|
...authorArray
|
|
|
|
)
|
|
|
|
];
|
|
|
|
|
2019-06-27 22:18:40 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
buildLink(which) {
|
|
|
|
const url = this.props.addon[which];
|
2020-07-16 07:42:56 +02:00
|
|
|
if (!url) return null;
|
2020-11-03 02:47:08 +01:00
|
|
|
const icon = React.createElement(LinkIcons[which]);
|
|
|
|
const link = <a className="bd-link bd-link-website" href={url} target="_blank" rel="noopener noreferrer">{icon}</a>;
|
2020-02-28 01:00:12 +01:00
|
|
|
if (which == "invite") {
|
2020-07-16 07:42:56 +02:00
|
|
|
link.props.onClick = function(event) {
|
|
|
|
event.preventDefault();
|
|
|
|
event.stopPropagation();
|
|
|
|
let code = url;
|
|
|
|
const tester = /\.gg\/(.*)$/;
|
|
|
|
if (tester.test(code)) code = code.match(tester)[1];
|
|
|
|
DiscordModules.LayerStack.popLayer();
|
|
|
|
DiscordModules.InviteActions.acceptInviteAndTransitionToInviteChannel(code);
|
|
|
|
};
|
2020-02-28 01:00:12 +01:00
|
|
|
}
|
2020-11-03 02:47:08 +01:00
|
|
|
return this.makeButton(Strings.Addons[which], link);
|
|
|
|
}
|
|
|
|
|
|
|
|
get controls() { // {this.props.hasSettings && <button onClick={this.showSettings} className="bd-button bd-button-addon-settings" disabled={!this.props.enabled}>{Strings.Addons.addonSettings}</button>}
|
|
|
|
return <div className="bd-controls">
|
2020-11-03 07:57:13 +01:00
|
|
|
{this.props.hasSettings && this.makeControlButton(Strings.Addons.addonSettings, <CogIcon size={"20px"} />, this.showSettings, {disabled: !this.props.enabled})}
|
|
|
|
{this.props.showReloadIcon && this.makeControlButton(Strings.Addons.reload, <ReloadIcon size={"20px"} />, this.reload)}
|
|
|
|
{this.props.editAddon && this.makeControlButton(Strings.Addons.editAddon, <EditIcon size={"20px"} />, this.props.editAddon)}
|
|
|
|
{this.props.deleteAddon && this.makeControlButton(Strings.Addons.deleteAddon, <DeleteIcon size={"20px"} />, this.props.deleteAddon, {danger: true})}
|
2020-11-03 02:47:08 +01:00
|
|
|
</div>;
|
2019-06-27 22:18:40 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
get footer() {
|
2020-02-28 01:00:12 +01:00
|
|
|
const links = ["website", "source", "invite", "donate", "patreon"];
|
2020-11-03 02:47:08 +01:00
|
|
|
const linkComponents = links.map(this.buildLink.bind(this)).filter(c => c);// linkComponents.map((comp, i) => i < linkComponents.length - 1 ? [comp, " | "] : comp).flat()
|
2019-06-27 22:18:40 +02:00
|
|
|
return <div className="bd-footer">
|
2020-11-03 02:47:08 +01:00
|
|
|
<span className="bd-links">{linkComponents}</span>
|
|
|
|
{this.controls}
|
2019-06-27 22:18:40 +02:00
|
|
|
</div>;
|
|
|
|
}
|
|
|
|
|
2019-07-03 16:15:48 +02:00
|
|
|
makeButton(title, children, action) {
|
2020-07-25 10:22:57 +02:00
|
|
|
return <Tooltip color="black" position="top" text={title}>
|
2019-07-03 16:15:48 +02:00
|
|
|
{(props) => {
|
|
|
|
return <div {...props} className="bd-addon-button" onClick={action}>{children}</div>;
|
|
|
|
}}
|
|
|
|
</Tooltip>;
|
|
|
|
}
|
|
|
|
|
2020-11-03 02:47:08 +01:00
|
|
|
makeControlButton(title, children, action, {danger = false, disabled = false} = {}) {
|
|
|
|
return <Tooltip color="black" position="top" text={title}>
|
|
|
|
{(props) => {
|
|
|
|
return <button {...props} className={"bd-button bd-addon-button" + (danger ? " bd-button-danger" : "") + (disabled ? " bd-button-disabled" : "")} onClick={action}>{children}</button>;
|
|
|
|
}}
|
|
|
|
</Tooltip>;
|
|
|
|
}
|
2019-06-27 22:18:40 +02:00
|
|
|
|
2020-11-03 02:47:08 +01:00
|
|
|
render() {
|
2019-06-28 01:50:20 +02:00
|
|
|
const addon = this.props.addon;
|
2019-06-27 22:18:40 +02:00
|
|
|
const name = this.getString(addon.name);
|
|
|
|
const author = this.getString(addon.author);
|
|
|
|
const description = this.getString(addon.description);
|
|
|
|
const version = this.getString(addon.version);
|
|
|
|
|
2019-06-30 05:09:48 +02:00
|
|
|
return <div id={`${addon.id}-card`} className="bd-addon-card settings-closed">
|
|
|
|
<div className="bd-addon-header">
|
2020-11-07 07:03:29 +01:00
|
|
|
{this.props.type === "plugin" ? <ExtIcon size="18px" className="bd-icon" /> : <ThemeIcon size="18px" className="bd-icon" />}
|
|
|
|
<div className="bd-title">{this.buildTitle(name, version, {name: author, id: this.props.addon.authorId, link: this.props.addon.authorLink})}</div>
|
2020-11-03 02:47:08 +01:00
|
|
|
<Switch checked={this.props.enabled} onChange={this.onChange} />
|
2019-06-27 22:18:40 +02:00
|
|
|
</div>
|
2020-12-12 21:33:32 +01:00
|
|
|
<div className="bd-description-wrap"><div className="bd-description">{SimpleMarkdown.parseToReact(description)}</div></div>
|
2019-06-27 22:18:40 +02:00
|
|
|
{this.footer}
|
2019-06-29 06:47:56 +02:00
|
|
|
</div>;
|
2019-06-27 22:18:40 +02:00
|
|
|
}
|
2019-06-28 01:50:20 +02:00
|
|
|
}
|
2020-07-16 07:42:56 +02:00
|
|
|
|
|
|
|
const originalRender = AddonCard.prototype.render;
|
|
|
|
Object.defineProperty(AddonCard.prototype, "render", {
|
|
|
|
enumerable: false,
|
|
|
|
configurable: false,
|
|
|
|
set: function() {Logger.warn("AddonCard", "Addon policy for plugins #5 https://github.com/rauenzi/BetterDiscordApp/wiki/Addon-Policies#plugins");},
|
|
|
|
get: () => originalRender
|
|
|
|
});
|