commit 33c8d6dd686e8cb1fe48a0434c0f15f667007dfd · notnite.com/moonlight

+43 -4

packages/core-extensions/src/moonbase/index.tsx

···

       45
        
         }

     

       46
        
       };

     

       47
        
       

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       48
        
       export const styles = [

     

       49
       -
         ".moonbase-settings > :first-child { margin-top: 0px; }",

     

       50
       -
         "textarea.moonbase-resizeable  { resize: vertical }",

     

       51
       -
         ".moonbase-updates-notice { background-color: #222034; color: #FFFBA6; line-height: unset; height: 36px; }",

     

       52
       -
         ".moonbase-updates-notice_text-wrapper { display: inline-flex; align-items: center; line-height: 36px; gap: 2px; }"

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       53
        
       ];

···

       45
        
         }

     

       46
        
       };

     

       47
        
       

     

       48
       +
       const bg = "#222034";

     

       49
       +
       const fg = "#FFFBA6";

     

       50
       +
       

     

       51
        
       export const styles = [

     

       52
       +
         `

     

       53
       +
       .moonbase-settings > :first-child {

     

       54
       +
         margin-top: 0px;

     

       55
       +
       }

     

       56
       +
       

     

       57
       +
       textarea.moonbase-resizeable {

     

       58
       +
         resize: vertical

     

       59
       +
       }

     

       60
       +
       

     

       61
       +
       .moonbase-updates-notice {

     

       62
       +
         background-color: ${bg};

     

       63
       +
         color: ${fg};

     

       64
       +
         line-height: unset;

     

       65
       +
         height: 36px;

     

       66
       +
       }

     

       67
       +
       

     

       68
       +
       .moonbase-updates-notice_text-wrapper {

     

       69
       +
         display: inline-flex;

     

       70
       +
         align-items: center;

     

       71
       +
         line-height: 36px;

     

       72
       +
         gap: 2px;

     

       73
       +
       }

     

       74
       +
       

     

       75
       +
       .moonbase-update-section {

     

       76
       +
         background-color: ${bg};

     

       77
       +
         --info-help-foreground: ${fg};

     

       78
       +
         border: none !important;

     

       79
       +
         color: ${fg};

     

       80
       +
       

     

       81
       +
         display: flex;

     

       82
       +
         flex-direction: row;

     

       83
       +
         justify-content: space-between;

     

       84
       +
       }

     

       85
       +
       

     

       86
       +
       .moonbase-update-section > button {

     

       87
       +
         color: ${fg};

     

       88
       +
         background-color: transparent;

     

       89
       +
         border-color: ${fg};

     

       90
       +
       }

     

       91
       +
       `.trim()

     

       92
        
       ];

packages/core-extensions/src/moonbase/webpackModules/stores.ts

···

       370
        
           this.emitChange();

     

       371
        
         }

     

       372
        
       

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       373
        
         getConfigOption<K extends keyof Config>(key: K): Config[K] {

     

       374
        
           return this.config[key];

     

       375
        
         }

···

       370
        
           this.emitChange();

     

       371
        
         }

     

       372
        
       

     

       373
       +
         async updateMoonlight() {

     

       374
       +
           await natives.updateMoonlight();

     

       375
       +
         }

     

       376
       +
       

     

       377
        
         getConfigOption<K extends keyof Config>(key: K): Config[K] {

     

       378
        
           return this.config[key];

     

       379
        
         }

packages/core-extensions/src/moonbase/webpackModules/ui/index.tsx

···

       9
        
       

     

       10
        
       import ExtensionsPage from "./extensions";

     

       11
        
       import ConfigPage from "./config";

     

       0
        
       
     

       12
        
       

     

       13
        
       const { Divider } = spacepack.findByCode(".forumOrHome]:")[0].exports.Z;

     

       14
        
       const TitleBarClasses = spacepack.findByCode("iconWrapper:", "children:")[0]

     
···

       81
        
                 ))}

     

       82
        
               </TabBar>

     

       83
        
             </div>

     

       0
        
       
     

       0
        
       
     

       84
        
       

     

       85
        
             {React.createElement(pages[subsection].element)}

     

       86
        
           </>

···

       9
        
       

     

       10
        
       import ExtensionsPage from "./extensions";

     

       11
        
       import ConfigPage from "./config";

     

       12
       +
       import Update from "./update";

     

       13
        
       

     

       14
        
       const { Divider } = spacepack.findByCode(".forumOrHome]:")[0].exports.Z;

     

       15
        
       const TitleBarClasses = spacepack.findByCode("iconWrapper:", "children:")[0]

     
···

       82
        
                 ))}

     

       83
        
               </TabBar>

     

       84
        
             </div>

     

       85
       +
       

     

       86
       +
             <Update />

     

       87
        
       

     

       88
        
             {React.createElement(pages[subsection].element)}

     

       89
        
           </>

+83

packages/core-extensions/src/moonbase/webpackModules/ui/update.tsx

···

       1
       +
       import { useStateFromStores } from "@moonlight-mod/wp/discord/packages/flux";

     

       2
       +
       import { MoonbaseSettingsStore } from "@moonlight-mod/wp/moonbase_stores";

     

       3
       +
       import * as Components from "@moonlight-mod/wp/discord/components/common/index";

     

       4
       +
       import React from "@moonlight-mod/wp/react";

     

       5
       +
       import spacepack from "@moonlight-mod/wp/spacepack_spacepack";

     

       6
       +
       import Flex from "@moonlight-mod/wp/discord/uikit/Flex";

     

       7
       +
       

     

       8
       +
       enum UpdateState {

     

       9
       +
         Ready,

     

       10
       +
         Working,

     

       11
       +
         Installed,

     

       12
       +
         Failed

     

       13
       +
       }

     

       14
       +
       

     

       15
       +
       const { ThemeDarkIcon, Text, Button } = Components;

     

       16
       +
       const Margins = spacepack.require("discord/styles/shared/Margins.css");

     

       17
       +
       const HelpMessageClasses = spacepack.findByExports("positive", "iconDiv")[0]

     

       18
       +
         .exports;

     

       19
       +
       

     

       20
       +
       const logger = moonlight.getLogger("moonbase/ui/update");

     

       21
       +
       

     

       22
       +
       const strings: Record<UpdateState, string> = {

     

       23
       +
         [UpdateState.Ready]: "A new version of moonlight is available",

     

       24
       +
         [UpdateState.Working]: "Updating moonlight...",

     

       25
       +
         [UpdateState.Installed]: "Updated, restart Discord to apply changes",

     

       26
       +
         [UpdateState.Failed]: "Failed to update moonlight, use the installer instead"

     

       27
       +
       };

     

       28
       +
       

     

       29
       +
       export default function Update() {

     

       30
       +
         const [state, setState] = React.useState(UpdateState.Ready);

     

       31
       +
         const { newVersion } = useStateFromStores([MoonbaseSettingsStore], () => ({

     

       32
       +
           newVersion: MoonbaseSettingsStore.newVersion

     

       33
       +
         }));

     

       34
       +
       

     

       35
       +
         if (newVersion == null) return null;

     

       36
       +
       

     

       37
       +
         // reimpl of HelpMessage but with a custom icon

     

       38
       +
         return (

     

       39
       +
           <div

     

       40
       +
             className={`${Margins.marginBottom20} ${HelpMessageClasses.info} ${HelpMessageClasses.container} moonbase-update-section`}

     

       41
       +
           >

     

       42
       +
             <Flex direction={Flex.Direction.HORIZONTAL}>

     

       43
       +
               <div

     

       44
       +
                 className={HelpMessageClasses.iconDiv}

     

       45
       +
                 style={{

     

       46
       +
                   alignItems: "center"

     

       47
       +
                 }}

     

       48
       +
               >

     

       49
       +
                 <ThemeDarkIcon

     

       50
       +
                   size="sm"

     

       51
       +
                   color="currentColor"

     

       52
       +
                   className={HelpMessageClasses.icon}

     

       53
       +
                 />

     

       54
       +
               </div>

     

       55
       +
       

     

       56
       +
               <Text

     

       57
       +
                 variant="text-sm/medium"

     

       58
       +
                 color="currentColor"

     

       59
       +
                 className={HelpMessageClasses.text}

     

       60
       +
               >

     

       61
       +
                 {strings[state]}

     

       62
       +
               </Text>

     

       63
       +
             </Flex>

     

       64
       +
       

     

       65
       +
             <Button

     

       66
       +
               look={Button.Looks.OUTLINED}

     

       67
       +
               color={Button.Colors.CUSTOM}

     

       68
       +
               size={Button.Sizes.TINY}

     

       69
       +
               disabled={state !== UpdateState.Ready}

     

       70
       +
               onClick={() => {

     

       71
       +
                 MoonbaseSettingsStore.updateMoonlight()

     

       72
       +
                   .then(() => setState(UpdateState.Installed))

     

       73
       +
                   .catch((e) => {

     

       74
       +
                     logger.error(e);

     

       75
       +
                     setState(UpdateState.Failed);

     

       76
       +
                   });

     

       77
       +
               }}

     

       78
       +
             >

     

       79
       +
               Update

     

       80
       +
             </Button>

     

       81
       +
           </div>

     

       82
       +
         );

     

       83
       +
       }