Bump prettier to 120 columns, update types, platformStyles: fix popou…

…ts not getting framed

.prettierrc

@@ -1,5 +1,5 @@
 {
-  "printWidth": 80,
+  "printWidth": 120,
   "trailingComma": "none",
   "tabWidth": 2,
   "singleQuote": false

package.json

@@ -13,6 +13,6 @@
     "esbuild-copy-static-files": "^0.1.0"
   },
   "dependencies": {
-    "@moonlight-mod/types": "^1.2.0"
+    "@moonlight-mod/types": "^1.3.0"
   }
 }

src/mediaTweaks/index.ts

@@ -6,8 +6,7 @@ export const patches: Patch[] = [
     find: "allowLinks:!!",
     replace: {
       match: /,(\(null!=.\?.:.\)\.embeds\)\),)/,
-      replacement: (_, orig) =>
-        `,moonlight.getConfigOption("mediaTweaks","imageUrls")??true?{}:${orig}`
+      replacement: (_, orig) => `,moonlight.getConfigOption("mediaTweaks","imageUrls")??true?{}:${orig}`
     }
   },
 
@@ -16,8 +15,7 @@ export const patches: Patch[] = [
     find: ".TOGGLE_GIF_PICKER,handler:",
     replace: {
       match: /.{1,2}===.\..\.CREATE_FORUM_POST/,
-      replacement: (orig: string) =>
-        `(moonlight.getConfigOption("mediaTweaks","noGifAutosend")??true?true:${orig})`
+      replacement: (orig: string) => `(moonlight.getConfigOption("mediaTweaks","noGifAutosend")??true?true:${orig})`
     }
   },
 
@@ -55,8 +53,7 @@ export const patches: Patch[] = [
 
       // Add button
       {
-        match:
-          /(?<=isVisualMediaType:.,channelId:.+?}=(.);.+?(\(0,.\.jsx\)).+?\.forceShowHover]:.}\),children:\[)/,
+        match: /(?<=isVisualMediaType:.,channelId:.+?}=(.);.+?(\(0,.\.jsx\)).+?\.forceShowHover]:.}\),children:\[)/,
         replacement: (_, props, createElement) =>
           `${createElement}(require("mediaTweaks_enlargeVideoButton").default,${props}),`
       }
@@ -70,11 +67,7 @@ export const webpackModules: Record<string, ExtensionWebpackModule> = {
   },
 
   enlargeVideoButton: {
-    dependencies: [
-      { id: "react" },
-      { ext: "spacepack", id: "spacepack" },
-      { id: "discord/components/common/index" }
-    ]
+    dependencies: [{ id: "react" }, { ext: "spacepack", id: "spacepack" }, { id: "discord/components/common/index" }]
   }
 };
 

src/mediaTweaks/manifest.json

@@ -5,18 +5,11 @@
   "meta": {
     "name": "Media Tweaks",
     "tagline": "Various tweaks to images and videos. Every feature togglable.",
-    "authors": [
-      "Cynosphere"
-    ],
-    "tags": [
-      "qol",
-      "chat"
-    ],
+    "authors": ["Cynosphere"],
+    "tags": ["qol", "chat"],
     "source": "https://github.com/Cynosphere/moonlight-extensions"
   },
-  "dependencies": [
-    "spacepack"
-  ],
+  "dependencies": ["spacepack"],
   "settings": {
     "imageUrls": {
       "displayName": "Image URLs",

src/mediaTweaks/webpackModules/enlargeVideoButton.tsx

@@ -2,8 +2,7 @@ import React from "@moonlight-mod/wp/react";
 import spacepack from "@moonlight-mod/wp/spacepack_spacepack";
 import * as Components from "@moonlight-mod/wp/discord/components/common/index";
 
-const { Clickable, Tooltip, MaximizeIcon, openModal, ModalRoot, ModalSize } =
-  Components;
+const { Clickable, Tooltip, MaximizeIcon, openModal, ModalRoot, ModalSize } = Components;
 
 const HoverButtonClasses = spacepack.findByExports("hoverButton")[0].exports;
 
@@ -21,10 +20,7 @@ const MediaModalClasses = spacepack.findByExports("modal", "image")[0].exports;
 
 const noop = () => null;
 
-export default function EnlargeVideoButton({
-  mimeType,
-  item
-}: HoverButtonsProps) {
+export default function EnlargeVideoButton({ mimeType, item }: HoverButtonsProps) {
   return mimeType?.[0] !== "video" ? null : (
     <Tooltip text="Enlarge Video">
       {(tooltipProps: any) => (
@@ -50,23 +46,14 @@ export default function EnlargeVideoButton({
                 );
 
                 return (
-                  <ModalRoot
-                    {...modalProps}
-                    className={MediaModalClasses.modal}
-                    size={ModalSize.DYNAMIC}
-                  >
+                  <ModalRoot {...modalProps} className={MediaModalClasses.modal} size={ModalSize.DYNAMIC}>
                     {MediaModal}
                   </ModalRoot>
                 );
               });
           }}
         >
-          <MaximizeIcon
-            size="custom"
-            color="currentColor"
-            width={20}
-            height={20}
-          />
+          <MaximizeIcon size="custom" color="currentColor" width={20} height={20} />
         </Clickable>
       )}
     </Tooltip>

src/noRpc/index.ts

@@ -19,8 +19,7 @@ export const patches: Patch[] = [
     find: '"RunningGameStore"',
     replace: [
       {
-        match:
-          /.\.[a-zA-Z]+\.dispatch(\({type:"RUNNING_GAMES_CHANGE",games:.,added:.,removed:.}\))/,
+        match: /.\.[a-zA-Z]+\.dispatch(\({type:"RUNNING_GAMES_CHANGE",games:.,added:.,removed:.}\))/,
         // this isn't just a removal because haha removing breaks quietLoggers
         // and i dont feel like fixing (nor should i even have to fix, if you
         // pretend that im just a standard extension dev in this scenario)

src/noRpc/manifest.json

@@ -5,12 +5,8 @@
   "meta": {
     "name": "No RPC",
     "tagline": "Disable RPC and game detection",
-    "authors": [
-      "Cynosphere"
-    ],
-    "tags": [
-      "development"
-    ],
+    "authors": ["Cynosphere"],
+    "tags": ["development"],
     "source": "https://github.com/Cynosphere/moonlight-extensions"
   },
   "settings": {

src/platformStyles/host.ts

@@ -1,21 +1,15 @@
 import { BrowserWindowConstructorOptions } from "electron";
 import { PlatformStyle } from "./types";
 
-moonlightHost.events.on(
-  "window-options",
-  (options: BrowserWindowConstructorOptions) => {
-    const style =
-      moonlightHost.getConfigOption<PlatformStyle>("platformStyles", "style") ??
-      "default";
-    const useFrame = style === "linux";
+moonlightHost.events.on("window-options", (options: BrowserWindowConstructorOptions) => {
+  const style = moonlightHost.getConfigOption<PlatformStyle>("platformStyles", "style") ?? "default";
+  const useFrame = style === "linux";
 
-    const isPopout =
-      options.center && options.width === 300 && options.height === 350;
+  const isPopout = options.center && options.width === 300 && options.height === 350;
 
-    if (!isPopout) {
-      if (style !== "default") {
-        options.frame = useFrame;
-      }
+  if (!isPopout) {
+    if (style !== "default") {
+      options.frame = useFrame;
     }
   }
-);
+});

src/platformStyles/index.ts

@@ -21,8 +21,7 @@ export const patches: Patch[] = [
   {
     find: ".ensureIsInPosition=",
     replace: {
-      match:
-        /(.{1,2})=.{1,2}!==(.{1,2})\.PlatformTypes\.WEB&&this\.inPopout\?22:0;/,
+      match: /(.{1,2})=.{1,2}!==(.{1,2})\.PlatformTypes\.WEB&&this\.inPopout\?22:0;/,
       replacement: (_, pipOffset, platformUtil) =>
         `${pipOffset}=require("platformStyles_helper").platformBorders(${platformUtil})!==${platformUtil}.PlatformTypes.WEB&&this.inPopout?22:0;`
     }
@@ -32,9 +31,7 @@ export const patches: Patch[] = [
 export const webpackModules: Record<string, ExtensionWebpackModule> = {
   helper: {
     run: function (module, exports, require) {
-      const style =
-        moonlight.getConfigOption<PlatformStyle>("platformStyles", "style") ??
-        "default";
+      const style = moonlight.getConfigOption<PlatformStyle>("platformStyles", "style") ?? "default";
 
       function platformBorders(platformUtils: PlatformUtils) {
         switch (style) {
@@ -70,5 +67,10 @@ export const webpackModules: Record<string, ExtensionWebpackModule> = {
         platformClass
       };
     }
+  },
+
+  popoutFix: {
+    dependencies: [{ id: "discord/Dispatcher" }],
+    entrypoint: true
   }
 };

src/platformStyles/manifest.json

@@ -1,6 +1,7 @@
 {
   "$schema": "https://moonlight-mod.github.io/manifest.schema.json",
   "id": "platformStyles",
+  "version": "1.0.1",
   "meta": {
     "name": "Platform Styles",
     "tagline": "Change the window border apperance to another operating system's style.",

src/platformStyles/webpackModules/popoutFix.ts

@@ -0,0 +1,12 @@
+import Dispatcher from "@moonlight-mod/wp/discord/Dispatcher";
+import { PlatformStyle } from "../types";
+
+Dispatcher.addInterceptor((data) => {
+  if (data.type == "POPOUT_WINDOW_OPEN") {
+    const style = moonlight.getConfigOption<PlatformStyle>("platformStyles", "style") ?? "default";
+
+    if (style === "linux") data.features.frame = true;
+  }
+
+  return false;
+});