Expose components and showChangelogModal

renderer/src/data/changelog.js

@@ -1,7 +1,7 @@
 // fixed, improved, added, progress
 export default {
     video: "https://www.youtube.com/embed/evyvq9eQTqA?si=opmzjGjUArT4VLrj&vq=hd720p&hd=1&rel=0&showinfo=0&mute=1&loop=1&autohide=1",
-    description: "A hotfix to get things going again. Plugins and Themes will take time to update.",
+    blurb: "A hotfix to get things going again. Plugins and Themes will take time to update.",
     changes: [
         {
             title: "Bugs Squashed",

renderer/src/modules/api/index.js

@@ -16,6 +16,17 @@ import * as Legacy from "./legacy";
 import ContextMenu from "./contextmenu";
 import fetch from "./fetch";
 
+import ColorInput from "@ui/settings/components/color";
+import DropdownInput from "@ui/settings/components/dropdown";
+import SettingItem from "@ui/settings/components/item";
+import KeybindInput from "@ui/settings/components/keybind";
+import NumberInput from "@ui/settings/components/number";
+import RadioInput from "@ui/settings/components/radio";
+import SearchInput from "@ui/settings/components/search";
+import SliderInput from "@ui/settings/components/slider";
+import SwitchInput from "@ui/settings/components/switch";
+import TextInput from "@ui/settings/components/textbox";
+
 const bounded = new Map();
 const PluginAPI = new AddonAPI(PluginManager);
 const ThemeAPI = new AddonAPI(ThemeManager);
@@ -57,7 +68,17 @@ export default class BdApi {
     get ReactUtils() {return ReactUtils;}
     get ContextMenu() {return ContextMenuAPI;}
     Components = {
-        get Tooltip() {return DiscordModules.Tooltip;}
+        get Tooltip() {return DiscordModules.Tooltip;},
+        get ColorInput() {return ColorInput;},
+        get DropdownInput() {return DropdownInput;},
+        get SettingItem() {return SettingItem;},
+        get KeybindInput() {return KeybindInput;},
+        get NumberInput() {return NumberInput;},
+        get RadioInput() {return RadioInput;},
+        get SearchInput() {return SearchInput;},
+        get SliderInput() {return SliderInput;},
+        get SwitchInput() {return SwitchInput;},
+        get TextInput() {return TextInput;},
     };
     Net = {fetch}; 
 }

renderer/src/modules/api/ui.js

@@ -57,6 +57,34 @@ const UI = {
         return Modals.showConfirmationModal(title, content, options);
     },
 
+    /**
+     * Shows a changelog modal in a similar style to Discord's. Customizable with images, videos, colored sections and supports markdown.
+     * 
+     * The changes option is a array of objects that have this typing:
+     * ```ts
+     * interface Changes {
+     *     title: string;
+     *     type: "fixed" | "added" | "progress" | "changed";
+     *     items: Array<string>;
+     *     blurb?: string;
+     * }
+     * ```
+     * 
+     * @param {object} options Information to display in the modal
+     * @param {string} options.title Title to show in the modal header
+     * @param {string} options.subtitle Title to show below the main header
+     * @param {string} [options.blurb] Text to show in the body of the modal before the list of changes
+     * @param {string} [options.banner] URL to an image to display as the banner of the modal
+     * @param {string} [options.video] Youtube link or url of a video file to use as the banner
+     * @param {string} [options.poster] URL to use for the video freeze-frame poster
+     * @param {string|ReactElement|Array<string|ReactElement>} [options.footer] What to show in the modal footer
+     * @param {Array<object>} [options.changes] List of changes to show (see description for details)
+     * @returns {string} The key used for this modal.
+     */
+    showChangelogModal(options) {
+        return Modals.showChangelogModal(options);
+    },
+
     /**
      * This shows a toast similar to android towards the bottom of the screen.
      *

renderer/src/modules/core.js

@@ -86,7 +86,13 @@ export default new class Core {
 
         const previousVersion = DataStore.getBDData("version");
         if (Config.version !== previousVersion) {
-            Modals.showChangelogModal(Changelog);
+            Modals.showChangelogModal(Object.assign({
+                banner: "https://i.imgur.com/wuh5yMK.png",
+                blurb: "",
+                changes: [],
+                title: "BetterDiscord",
+                subtitle: `v${Config.version}`
+            }, Changelog));
             DataStore.setBDData("version", Config.version);
         }
     }

renderer/src/ui/modals.js

@@ -1,5 +1,3 @@
-import Config from "@data/config";
-
 import FormattableString from "@structs/string";
 
 import Logger from "@common/logger";
@@ -221,8 +219,6 @@ export default class Modals {
     }
 
     static showChangelogModal(options = {}) {
-        options = Object.assign({image: "https://i.imgur.com/wuh5yMK.png", description: "", changes: [], title: "BetterDiscord", subtitle: `v${Config.version}`}, options);
-
         const key = this.openModal(props => {
             return React.createElement(ErrorBoundary, null, React.createElement(ChangelogModal, Object.assign(options, props)));
         });

renderer/src/ui/modals/changelog.jsx

@@ -57,7 +57,7 @@ function Video({src, poster}) {
 }
 
 
-export default function ChangelogModal({transitionState, footer, title, subtitle, onClose, video, poster, image, description, changes}) {
+export default function ChangelogModal({transitionState, footer, title, subtitle, onClose, video, poster, banner, blurb, changes}) {
 
     const ChangelogHeader = useMemo(() => <Header justify={Flex.Justify.BETWEEN}>
         <Flex direction={Flex.Direction.VERTICAL}>
@@ -78,19 +78,19 @@ export default function ChangelogModal({transitionState, footer, title, subtitle
     </Footer>, [footer]);
 
     const changelogItems = useMemo(() => {
-        const items = [video ? <Video src={video} poster={poster} /> : <img src={image} className="bd-changelog-poster" />];
-        if (description) items.push(<p>{SimpleMarkdownExt.parseToReact(description)}</p>);
+        const items = [video ? <Video src={video} poster={poster} /> : <img src={banner} className="bd-changelog-poster" />];
+        if (blurb) items.push(<p>{SimpleMarkdownExt.parseToReact(blurb)}</p>);
         for (let c = 0; c < changes.length; c++) {
             const entry = changes[c];
             const type = "bd-changelog-" + entry.type;
             const margin = c == 0 ? " bd-changelog-first" : "";
             items.push(<h1 className={`bd-changelog-title ${type}${margin}`}>{entry.title}</h1>);
-            if (entry.description) items.push(<p>{SimpleMarkdownExt.parseToReact(entry.description)}</p>);
+            if (entry.blurb) items.push(<p>{SimpleMarkdownExt.parseToReact(entry.blurb)}</p>);
             const list = <ul>{entry.items.map(i => <li>{SimpleMarkdownExt.parseToReact(i)}</li>)}</ul>;
             items.push(list);
         }
         return items;
-    }, [description, video, image, poster, changes]);
+    }, [blurb, video, banner, poster, changes]);
 
     return <Root className="bd-changelog-modal" transitionState={transitionState} size={Root.Sizes.MEDIUM} style={Root.Styles.STANDARD}>
         {ChangelogHeader}