refactor: Better module federation definitions in extensions

refactor: Cleaner ruffle embed

Author: colin969

extensions/core-nga/package.json

@@ -5,7 +5,12 @@
     "version": "1.0.0",
     "main": "./dist/extension.js",
     "contributes": {
-        "mfScope": "nga",
+        "moduleFederation": [
+            {
+                "scope": "nga",
+                "path": "mf-manifest.json"
+            }
+        ],
         "themeFiles": [
             "nga.css"
         ]

extensions/core-ruffle/package.json

@@ -5,7 +5,12 @@
   "version": "1.0.0",
   "main": "./dist/extension.js",
   "contributes": {
-    "mfScope": "ruffle",
+    "moduleFederation": [
+      {
+          "scope": "ruffle",
+          "path": "mf-manifest.json"
+      }
+    ],
     "themeFiles": [
       "ruffle.css"
     ],

extensions/core-ruffle/src/components/LauncherEmbedPage.tsx

@@ -51,10 +51,10 @@ export default function LauncherEmbedPage(props: GameLaunchInfo) {
   };
 
   return <div className='ruffle-page'>
-    <button className='simple-button' onClick={onBack}>Back</button>
     <div className='ruffle-wrapper'>
       <div className='ruffle-title'>{props.game.title}</div>
       <div className='ruffle-container' ref={containerRef}></div>
     </div>
+    <button className='simple-button' onClick={onBack}>Back</button>
   </div>;
 }

extensions/core-ruffle/static/ruffle.css

@@ -1,5 +1,6 @@
 .ruffle-page {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 100%;
@@ -11,14 +12,16 @@
 }
 
 .ruffle-title {
+  font-size: 1.2em;
+  font-weight: bold;
   position: absolute;
   top: -2rem;
   width: 100%;
   text-align: center;
 }
 
 .ruffle-container {
+  display: flex;
   margin: auto;
   box-shadow: 0 0 20px rgba(245, 245, 245, 0.4);
-  border: 4px solid white;
-}
+}

src/back/extensions/ExtensionsScanner.ts

@@ -5,7 +5,7 @@ import * as Coerce from '@shared/utils/Coerce';
 import { IObjectParserProp, ObjectParser } from '@shared/utils/ObjectParser';
 import * as fs from 'fs';
 import * as path from 'path';
-import { Application, ButtonContext, ContextButton, Contributions, CurationTemplate, DevScript, ExtConfiguration, ExtConfigurationProp, ExtensionType, ExtTheme, IExtension, IExtensionManifest, ILogoSet } from '@shared/extensions/interfaces';
+import { Application, ButtonContext, ContextButton, Contributions, CurationTemplate, DevScript, ExtConfiguration, ExtConfigurationProp, ExtensionType, ExtTheme, IExtension, IExtensionManifest, ILogoSet, ModuleContribution } from '@shared/extensions/interfaces';
 
 const { str, num } = Coerce;
 const fsPromises = fs.promises;
@@ -184,7 +184,7 @@ function parseContributions(parser: IObjectParserProp<Contributions>): Contribut
     applications: [],
     configuration: [],
     curationTemplates: [],
-    mfScope: '',
+    moduleFederation: [],
     themeFiles: [],
   };
   parser.prop('logoSets',          true).array(item => contributes.logoSets.push(parseLogoSet(item)));
@@ -194,7 +194,7 @@ function parseContributions(parser: IObjectParserProp<Contributions>): Contribut
   parser.prop('applications',      true).array(item => contributes.applications.push(parseApplication(item)));
   parser.prop('configuration',     true).array(item => contributes.configuration.push(parseConfiguration(item)));
   parser.prop('curationTemplates', true).array(item => contributes.curationTemplates.push(parseCurationTemplate(item)));
-  parser.prop('mfScope', item  => contributes.mfScope = str(item), true);
+  parser.prop('moduleFederation',  true).array(item => contributes.moduleFederation.push(parseModuleContribution(item)));
   parser.prop('themeFiles',        true).arrayRaw(item => contributes.themeFiles.push(str(item)));
   return contributes;
 }
@@ -298,6 +298,18 @@ function parseCurationTemplate(parser: IObjectParserProp<CurationTemplate>): Cur
   return curationTemplate;
 }
 
+function parseModuleContribution(parser: IObjectParserProp<ModuleContribution>): ModuleContribution {
+  const mc: ModuleContribution = {
+    scope: '',
+    path: ''
+  };
+
+  parser.prop('scope', v => mc.scope = str(v));
+  parser.prop('path', v => mc.path = str(v));
+
+  return mc;
+}
+
 function parseCurationMeta(parser: IObjectParserProp<EditCurationMeta>): EditCurationMeta {
   const parsed: EditCurationMeta = {};
 

src/main/Main.ts

@@ -317,10 +317,6 @@ export function main(init: Init): void {
       state.socket.send(BackIn.SET_LOCALE, app.getLocale().toLowerCase());
       state._sentLocaleCode = true;
     }
-    // Reject all permission requests since we don't need any permissions.
-    session.defaultSession.setPermissionRequestHandler(
-      (webContents, permission, callback) => callback(false)
-    );
     // Ignore proxy settings with chromium APIs (makes WebSockets not close when the Redirector changes proxy settings)
     session.defaultSession.setProxy({
       pacScript: '',
@@ -390,6 +386,14 @@ export function main(init: Init): void {
     webContents.on('will-navigate', onNewPage);
     webContents.on('new-window', onNewPage);
 
+    webContents.session.setPermissionRequestHandler((webContents, permission, requestingOrigin, details) => {
+      if (permission === 'fullscreen') {
+        return true;
+      } else {
+        return false;
+      }
+    });
+
     webContents.session.setProxy({
       proxyRules: 'http=localhost:22500;direct://',
       proxyBypassRules: '<local>,*.unstable.life,*.flashpointarchive.org',

src/renderer/components/app.tsx

@@ -1467,9 +1467,14 @@ export class App extends React.Component<AppProps> {
     const playlists = this.orderPlaylistsMemo(this.props.main.playlists);
     const extremeTags = this.props.preferencesData.tagFilters.filter(t => t.extreme).reduce<string[]>((prev, cur) => prev.concat(cur.tags), []);
     const remoteModules = this.props.main.extensions.reduce<RemoteModule[]>((prev, cur) => {
-      if (cur.contributes?.mfScope) {
-        const remoteModule: RemoteModule = { scope: cur.contributes.mfScope, url: `${getFileServerURL()}/extdata/${cur.id}/mf-manifest.json` };
-        return prev.concat([remoteModule]);
+      if (cur.contributes?.moduleFederation) {
+        const remoteModules: RemoteModule[] = cur.contributes.moduleFederation.map(mc => {
+          return {
+            scope: mc.scope,
+            url: `${getFileServerURL()}/extdata/${cur.id}/${mc.path}`
+          };
+        });
+        return prev.concat(remoteModules);
       } else {
         return prev;
       }

src/shared/extensions/interfaces.ts

@@ -78,10 +78,15 @@ export type Contributions = {
   applications: Application[];
   configuration: ExtConfiguration[];
   curationTemplates: CurationTemplate[];
-  mfScope: string;
+  moduleFederation: ModuleContribution[];
   themeFiles: string[];
 }
 
+export type ModuleContribution = {
+  scope: string;
+  path: string;
+}
+
 export interface CurationTemplate {
   name: string;
   logo: string;