added widevine key selector

components/Settings/Widevine.vue

@@ -1,13 +1,108 @@
 <template>
-  <div>
+    <div class="flex flex-col gap-3 mt-3 font-dm" style="-webkit-app-region: no-drag">
-    
+        <div class="flex flex-col items-center p-3 bg-[#11111189] rounded-xl select-none">
-  </div>
+            <div class="text-sm mb-2">L3 Keys</div>
+            <input
+                @click="getFilePathL3Blob()"
+                v-model="pathL3Blob"
+                type="text"
+                name="text"
+                placeholder="Click to select device_client_id_blob"
+                class="bg-[#5c5b5b] w-full focus:outline-none px-3 py-2 rounded-xl text-sm text-center cursor-pointer"
+                readonly
+            />
+            <input
+                @click="getFilePathL3Key()"
+                v-model="pathL3Key"
+                type="text"
+                name="text"
+                placeholder="Click to select device_private_key"
+                class="bg-[#5c5b5b] w-full focus:outline-none px-3 py-2 rounded-xl text-sm text-center cursor-pointer mt-2"
+                readonly
+            />
+        </div>
+        <div class="flex flex-col items-center p-3 bg-[#11111189] rounded-xl select-none">
+            <div class="text-sm mb-2">L1 Keys</div>
+            <input
+                @click="getFilePathL1Blob()"
+                v-model="pathL1Blob"
+                type="text"
+                name="text"
+                placeholder="Click to select device_client_id_blob"
+                class="bg-[#5c5b5b] w-full focus:outline-none px-3 py-2 rounded-xl text-sm text-center cursor-pointer"
+                readonly
+            />
+            <input
+                @click="getFilePathL1Key()"
+                v-model="pathL1Key"
+                type="text"
+                name="text"
+                placeholder="Click to select device_private_key"
+                class="bg-[#5c5b5b] w-full focus:outline-none px-3 py-2 rounded-xl text-sm text-center cursor-pointer mt-2"
+                readonly
+            />
+        </div>
+    </div>
 </template>
 
 <script lang="ts" setup>
+const pathL3Blob = ref<string>();
+const pathL3Key = ref<string>();
+
+const pathL1Blob = ref<string>();
+const pathL1Key = ref<string>();
+
+const getFilePathL3Blob = () => {
+    if (process.client) {
+        ;(window as any).myAPI.selectFile('l3blob').then((result: string) => {
+            pathL3Blob.value = result
+        })
+    }
+}
+
+const getFilePathL3Key = () => {
+    if (process.client) {
+        ;(window as any).myAPI.selectFile('l3key').then((result: string) => {
+            pathL3Key.value = result
+        })
+    }
+}
+
+const getFilePathL1Blob = () => {
+    if (process.client) {
+        ;(window as any).myAPI.selectFile('l1blob').then((result: string) => {
+            pathL1Blob.value = result
+        })
+    }
+}
+
+const getFilePathL1Key = () => {
+    if (process.client) {
+        ;(window as any).myAPI.selectFile('l1key').then((result: string) => {
+            pathL1Key.value = result
+        })
+    }
+}
+
+onMounted(() => {
+    ;(window as any).myAPI.getFile('l3blob').then((result: any) => {
+        pathL3Blob.value = result
+    })
+
+    ;(window as any).myAPI.getFile('l3key').then((result: any) => {
+        pathL3Key.value = result
+    })
+
+    ;(window as any).myAPI.getFile('l1blob').then((result: any) => {
+        pathL1Blob.value = result
+    })
+
+    ;(window as any).myAPI.getFile('l1key').then((result: any) => {
+        pathL1Key.value = result
+    })
+})
+
 
 </script>
 
-<style>
+<style></style>
-
-</style>

src/electron/background.ts

@@ -133,6 +133,26 @@ ipcMain.handle('dialog:openDirectory', async () => {
     }
 })
 
+ipcMain.handle('dialog:openFile', async (events, type: string) => {
+    if (!type) return
+
+    const window = BrowserWindow.getFocusedWindow()
+
+    if (!window) {
+        return
+    }
+
+    const { canceled, filePaths } = await dialog.showOpenDialog(window, {
+        properties: ['openFile']
+    })
+    if (canceled) {
+        return await settings.get(type)
+    } else {
+        await settings.set(type, filePaths[0])
+        return filePaths[0]
+    }
+})
+
 ipcMain.handle('dialog:defaultDirectory', async () => {
     const savedPath = await settings.get('downloadPath')
 
@@ -147,6 +167,19 @@ ipcMain.handle('dialog:defaultDirectory', async () => {
     return savedPath
 })
 
+ipcMain.handle('dialog:defaultFile', async (events, type: string) => {
+
+    if (!type) return
+
+    const savedPath = await settings.get(type)
+
+    if (!savedPath) {
+        return ''
+    }
+
+    return savedPath
+})
+
 app.on('window-all-closed', () => {
     if (process.platform !== 'darwin') {
         app.quit()

src/electron/preload.ts

@@ -2,7 +2,9 @@ import { contextBridge, ipcRenderer } from 'electron'
 
 contextBridge.exposeInMainWorld('myAPI', {
     selectFolder: () => ipcRenderer.invoke('dialog:openDirectory'),
+    selectFile: (type: string) => ipcRenderer.invoke('dialog:openFile', type),
     getFolder: () => ipcRenderer.invoke('dialog:defaultDirectory'),
+    getFile: (type: string) => ipcRenderer.invoke('dialog:defaultFile', type),
     openWindow: (opt: { title: string; url: string; width: number; height: number; backgroundColor: string }) => ipcRenderer.invoke('window:openNewWindow', opt),
     getUpdateStatus: () => ipcRenderer.invoke('updater:getUpdateStatus'),
     startUpdateDownload: () => ipcRenderer.invoke('updater:download'),