fix emujs player

.gitignore

@@ -40,6 +40,7 @@ mariadb
 
 # used to mock the library/config/mounts/etc while testing
 frontend/assets/romm
+frontend/assets/emulatorjs/cores
 romm_mock
 
 # virtualenv

backend/endpoints/firmware.py

@@ -131,8 +131,6 @@ def head_firmware_content(request: Request, id: int, file_name: str):
         path=firmware_path,
         filename=file_name,
         headers={
-            "Content-Disposition": f'attachment; filename="{firmware.name}.zip"',
-            "Content-Type": "application/zip",
             "Content-Length": str(firmware.file_size_bytes),
         },
     )

backend/endpoints/sockets/scan.py

@@ -121,7 +121,7 @@ async def scan_platforms(
             try:
                 fs_firmware = fs_firmware_handler.get_firmware(platform)
             except FirmwareNotFoundException:
-                continue
+                fs_firmware = []
 
             if len(fs_firmware) == 0:
                 log.warning(

backend/handler/auth_handler/__init__.py

@@ -23,11 +23,13 @@ DEFAULT_SCOPES_MAP: Final = {
     "platforms.read": "View platforms",
     "assets.read": "View assets",
     "assets.write": "Modify assets",
+    "firmware.read": "View firmware",
 }
 
 WRITE_SCOPES_MAP: Final = {
     "roms.write": "Modify ROMs",
     "platforms.write": "Modify platforms",
+    "firmware.write": "Modify firmware",
 }
 
 FULL_SCOPES_MAP: Final = {

backend/main.py

@@ -20,6 +20,7 @@ from endpoints import (
     user,
     screenshots,
     feeds,
+    firmware,
 )
 import endpoints.sockets.scan  # noqa
 from fastapi import FastAPI
@@ -89,6 +90,7 @@ app.include_router(config.router)
 app.include_router(stats.router)
 app.include_router(raw.router)
 app.include_router(screenshots.router)
+app.include_router(firmware.router)
 
 add_pagination(app)
 app.mount("/ws", socket_handler.socket_app)

frontend/src/components/Details/Emulation.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import { isNull } from "lodash";
-import type { SaveSchema, StateSchema } from "@/__generated__";
+import type { FirmwareSchema, SaveSchema, StateSchema } from "@/__generated__";
 import rom from "@/services/api/rom";
 import type { Rom } from "@/stores/roms";
 import { formatBytes } from "@/utils";
 import Player from "@/views/Play/Player.vue";
 import { ref } from "vue";
+import type { Platform } from "@/stores/platforms";
 
-const props = defineProps<{ rom: Rom }>();
+const props = defineProps<{ rom: Rom; platform: Platform }>();
+const biosRef = ref<FirmwareSchema | null>(null);
 const saveRef = ref<SaveSchema | null>(null);
 const stateRef = ref<StateSchema | null>(null);
 const gameRunning = ref(false);
@@ -33,16 +35,21 @@ function onFullScreenChange() {
 <template>
   <v-row v-if="rom && !gameRunning" no-gutters class="align-center">
     <v-col cols="5" class="text-truncate mx-1">
-      <!-- <v-select
+      <v-select
         density="compact"
         class="my-2"
         hide-details
         variant="outlined"
         clearable
-        disabled
         label="BIOS"
-        :items="['gba-bios.zip']"
-      /> -->
+        v-model="biosRef"
+        :items="
+          props.platform.firmware?.map((f) => ({
+            title: f.file_name,
+            value: f,
+          })) ?? []
+        "
+      />
       <v-select
         density="compact"
         class="my-2"
@@ -130,7 +137,7 @@ function onFullScreenChange() {
 
   <v-row no-gutters>
     <v-col v-if="gameRunning" cols="12" rounded id="game-wrapper">
-      <player :rom="props.rom" :state="stateRef" :save="saveRef" />
+      <player :rom="props.rom" :state="stateRef" :save="saveRef" :bios="biosRef" />
     </v-col>
   </v-row>
 </template>

frontend/src/services/api/firmware.ts

@@ -0,0 +1,20 @@
+import type { FirmwareSchema } from "@/__generated__";
+import api from "@/services/api/index";
+
+export const firmwareApi = api;
+
+async function getFirmware({
+    platformId = null,
+}: {
+    platformId?: number | null;
+}): Promise<{ data: FirmwareSchema[] }> {
+    return firmwareApi.get(`/firmware`, {
+        params: {
+            platform_id: platformId,
+        },
+    });
+}
+
+export default {
+    getFirmware,
+}

frontend/src/stores/auth.ts

@@ -12,6 +12,8 @@ const FULL_SCOPES_LIST = [
   "users.read",
   "users.write",
   "tasks.run",
+  "firmware.read",
+  "firmware.write",
 ] as const;
 
 export default defineStore("auth", {

frontend/src/utils/index.ts

@@ -278,9 +278,9 @@ export function languageToEmoji(language: string) {
 }
 
 export const platformSlugEJSCoreMap = {
-  // "3do": "opera", Disabled until BIOS file support is added
-  // amiga: "puae", Disabled until BIOS file support is added
-  // arcade: "mame2003_plus", Disabled until BIOS file support is added
+  "3do": "opera",
+  amiga: "puae",
+  arcade: "mame2003_plus",
   atari2600: "stella2014",
   "atari-2600-plus": "stella2014",
   atari5200: "a5200",
@@ -312,9 +312,9 @@ export const platformSlugEJSCoreMap = {
   "game-boy-micro": "mgba",
   gbc: "gambatte",
   "pc-fx": "mednafen_pcfx",
-  // ps: "pcsx_rearmed", Disabled until BIOS file support is added
-  // psp: "ppsspp", Disabled until BIOS file support is added
-  // segacd: "genesis_plus_gx", Disabled until BIOS file support is added
+  ps: "pcsx_rearmed",
+  psp: "ppsspp",
+  segacd: "genesis_plus_gx",
   // sega32: "picodrive", // Broken: https://github.com/EmulatorJS/EmulatorJS/issues/579
   gamegear: "genesis_plus_gx",
   sms: "genesis_plus_gx",

frontend/src/views/Details/Base.vue

@@ -249,7 +249,7 @@ watch(
             </v-window>
             <v-window v-if="showEmulation" v-model="tab" class="py-2">
               <v-window-item value="emulation">
-                <emulation :rom="rom" />
+                <emulation :rom="rom" :platform="platform" />
               </v-window-item>
             </v-window>
           </v-col>

frontend/src/views/Play/Base.vue

@@ -1,15 +1,19 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 import { isNull } from "lodash";
-import type { SaveSchema, StateSchema } from "@/__generated__";
+import type { FirmwareSchema, SaveSchema, StateSchema } from "@/__generated__";
 import { formatBytes } from "@/utils";
 import romApi from "@/services/api/rom";
+import firmwareApi from "@/services/api/firmware";
 import { useRoute } from "vue-router";
 import Player from "@/views/Play/Player.vue";
 import type { Rom } from "@/stores/roms";
 
 const route = useRoute();
 const rom = ref<Rom | null>(null);
+const firmwareOptions = ref<FirmwareSchema[]>([]);
+
+const biosRef = ref<FirmwareSchema | null>(null);
 const saveRef = ref<SaveSchema | null>(null);
 const stateRef = ref<StateSchema | null>(null);
 const gameRunning = ref(false);
@@ -21,15 +25,16 @@ const script = document.createElement("script");
 script.src = "/assets/emulatorjs/loader.js";
 script.async = true;
 
-onMounted(() => {
-  romApi
-    .getRom({ romId: parseInt(route.params.rom as string) })
-    .then((response) => {
-      rom.value = response.data;
-    })
-    .catch((error) => {
-      console.log(error);
-    });
+onMounted(async () => {
+  const romResponse = await romApi.getRom({
+    romId: parseInt(route.params.rom as string),
+  });
+  rom.value = romResponse.data;
+
+  const firmwareResponse = await firmwareApi.getFirmware({
+    platformId: romResponse.data.platform_id,
+  });
+  firmwareOptions.value = firmwareResponse.data;
 });
 
 function onPlay() {
@@ -51,15 +56,20 @@ function onFullScreenChange() {
         width="250"
         src="/assets/emulatorjs/powered_by_emulatorjs.png"
       />
-      <!-- <v-select
+      <v-select
         class="my-1"
         hide-details
         variant="outlined"
         clearable
-        disabled
         label="BIOS"
-        :items="['gba-bios.zip']"
-      /> -->
+        v-model="biosRef"
+        :items="
+          firmwareOptions.map((f) => ({
+            title: f.file_name,
+            value: f,
+          })) ?? []
+        "
+      />
       <v-select
         class="my-1"
         hide-details
@@ -122,7 +132,7 @@ function onFullScreenChange() {
     </v-col>
 
     <v-col class="bg-primary" rounded id="game-wrapper">
-      <player :rom="rom" :state="stateRef" :save="saveRef" />
+      <player :rom="rom" :state="stateRef" :save="saveRef" :bios="biosRef" />
     </v-col>
   </v-row>
 </template>

frontend/src/views/Play/Player.vue

@@ -4,7 +4,7 @@ import stateApi from "@/services/api/state";
 import saveApi, { saveApi as api } from "@/services/api/save";
 import screenshotApi from "@/services/api/screenshot";
 import { platformSlugEJSCoreMap } from "@/utils";
-import type { SaveSchema, StateSchema } from "@/__generated__";
+import type { FirmwareSchema, SaveSchema, StateSchema } from "@/__generated__";
 import type { Rom } from "@/stores/roms";
 import type { ValueOf } from "@/types";
 
@@ -12,6 +12,7 @@ const props = defineProps<{
   rom: Rom;
   save: SaveSchema | null;
   state: StateSchema | null;
+  bios: FirmwareSchema | null;
 }>();
 const saveRef = ref<SaveSchema | null>(props.save);
 const stateRef = ref<StateSchema | null>(props.state);
@@ -27,6 +28,7 @@ type EJSCore = ValueOf<typeof platformSlugEJSCoreMap>;
 declare global {
   interface Window {
     EJS_core: EJSCore;
+    EJS_biosUrl: string;
     EJS_player: string;
     EJS_pathtodata: string;
     EJS_color: string;
@@ -57,6 +59,9 @@ window.EJS_core =
   ];
 window.EJS_gameID = props.rom.id;
 window.EJS_gameUrl = `/api/roms/${props.rom.id}/content/${props.rom.file_name}`;
+window.EJS_biosUrl = props.bios
+  ? `/api/firmware/${props.bios.id}/content/${props.bios.file_name}`
+  : "";
 window.EJS_player = "#game";
 window.EJS_pathtodata = "/assets/emulatorjs/";
 window.EJS_color = "#A453FF";