| b69ab31 | | | 1 | /** |
| b69ab31 | | | 2 | * Copyright (c) Meta Platforms, Inc. and affiliates. |
| b69ab31 | | | 3 | * |
| b69ab31 | | | 4 | * This source code is licensed under the MIT license found in the |
| b69ab31 | | | 5 | * LICENSE file in the root directory of this source tree. |
| b69ab31 | | | 6 | */ |
| b69ab31 | | | 7 | |
| b69ab31 | | | 8 | import type {Platform} from '../platform'; |
| b69ab31 | | | 9 | |
| b69ab31 | | | 10 | import {makeBrowserLikePlatformImpl} from './browserPlatformImpl'; |
| b69ab31 | | | 11 | |
| b69ab31 | | | 12 | // important: this file should not try to import other code from 'isl', |
| b69ab31 | | | 13 | // since it will end up getting duplicated when bundling. |
| b69ab31 | | | 14 | |
| b69ab31 | | | 15 | /** |
| b69ab31 | | | 16 | * This platform is used when spawned as a standalone webview from `sl web`. |
| b69ab31 | | | 17 | * We pass messages to the rust side via `external.invoke`, |
| b69ab31 | | | 18 | * with JSON serialized requests. Rust will respond back with JSON serialized responses. |
| b69ab31 | | | 19 | * This lets us handle features like alerts, file dialogs, and opening external links |
| b69ab31 | | | 20 | * which are not implemented in the webview itself. |
| b69ab31 | | | 21 | */ |
| b69ab31 | | | 22 | export const webviewPlatform: Platform = { |
| b69ab31 | | | 23 | // just act like the browser platform by default, since the app use case is similar |
| b69ab31 | | | 24 | ...makeBrowserLikePlatformImpl('webview'), |
| b69ab31 | | | 25 | |
| b69ab31 | | | 26 | openExternalLink(url: string) { |
| b69ab31 | | | 27 | invoke({cmd: 'openExternal', url}); |
| b69ab31 | | | 28 | }, |
| b69ab31 | | | 29 | confirm(message: string, details?: string): Promise<boolean> { |
| b69ab31 | | | 30 | return request({cmd: 'confirm', message, details}).then(({ok}) => ok); |
| b69ab31 | | | 31 | }, |
| b69ab31 | | | 32 | async chooseFile(title: string, multi: boolean): Promise<Array<File>> { |
| b69ab31 | | | 33 | const response = await request({cmd: 'chooseFile', title, path: '', multi, mediaOnly: true}); |
| b69ab31 | | | 34 | const {files} = response; |
| b69ab31 | | | 35 | if (!files) { |
| b69ab31 | | | 36 | return []; |
| b69ab31 | | | 37 | } |
| b69ab31 | | | 38 | const result = files.map(value => b64toFile(value.base64Content, value.name)); |
| b69ab31 | | | 39 | return result; |
| b69ab31 | | | 40 | }, |
| b69ab31 | | | 41 | }; |
| b69ab31 | | | 42 | |
| b69ab31 | | | 43 | function b64toFile(b64Data: string, filename: string, sliceSize = 512): File { |
| b69ab31 | | | 44 | const byteCharacters = atob(b64Data); |
| b69ab31 | | | 45 | const byteArrays = []; |
| b69ab31 | | | 46 | |
| b69ab31 | | | 47 | for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) { |
| b69ab31 | | | 48 | const slice = byteCharacters.slice(offset, offset + sliceSize); |
| b69ab31 | | | 49 | |
| b69ab31 | | | 50 | const byteNumbers = new Array(slice.length); |
| b69ab31 | | | 51 | for (let i = 0; i < slice.length; i++) { |
| b69ab31 | | | 52 | byteNumbers[i] = slice.charCodeAt(i); |
| b69ab31 | | | 53 | } |
| b69ab31 | | | 54 | |
| b69ab31 | | | 55 | const byteArray = new Uint8Array(byteNumbers); |
| b69ab31 | | | 56 | byteArrays.push(byteArray); |
| b69ab31 | | | 57 | } |
| b69ab31 | | | 58 | |
| b69ab31 | | | 59 | const blobParts = [new Blob(byteArrays)]; |
| b69ab31 | | | 60 | const file = new File(blobParts, filename); |
| b69ab31 | | | 61 | return file; |
| b69ab31 | | | 62 | } |
| b69ab31 | | | 63 | |
| b69ab31 | | | 64 | window.islPlatform = webviewPlatform; |
| b69ab31 | | | 65 | |
| b69ab31 | | | 66 | /** |
| b69ab31 | | | 67 | * Typed commands to communicate from the frontend with the Rust app hosting the webview. |
| b69ab31 | | | 68 | * This should match the rust types used in webview-app. |
| b69ab31 | | | 69 | */ |
| b69ab31 | | | 70 | type ExternalWebviewCommandsInvoke = |
| b69ab31 | | | 71 | | {cmd: 'openExternal'; url: string} |
| b69ab31 | | | 72 | | {cmd: 'confirm'; message: string; details?: string} |
| b69ab31 | | | 73 | | {cmd: 'chooseFile'; title: string; path: string; multi: boolean; mediaOnly: boolean}; |
| b69ab31 | | | 74 | type ExternalWebviewCommandsResponse = ( |
| b69ab31 | | | 75 | | {cmd: 'confirm'; ok: boolean} |
| b69ab31 | | | 76 | | { |
| b69ab31 | | | 77 | cmd: 'chooseFile'; |
| b69ab31 | | | 78 | files: Array<{ |
| b69ab31 | | | 79 | name: string; |
| b69ab31 | | | 80 | base64Content: string; |
| b69ab31 | | | 81 | }>; |
| b69ab31 | | | 82 | } |
| b69ab31 | | | 83 | ) & {id: number}; |
| b69ab31 | | | 84 | |
| b69ab31 | | | 85 | declare global { |
| b69ab31 | | | 86 | interface Window { |
| b69ab31 | | | 87 | islWebviewHandleResponse: (response: ExternalWebviewCommandsResponse) => void; |
| b69ab31 | | | 88 | } |
| b69ab31 | | | 89 | } |
| b69ab31 | | | 90 | |
| b69ab31 | | | 91 | let nextId = 0; |
| b69ab31 | | | 92 | const callbacks: Array<(response: ExternalWebviewCommandsResponse) => void> = []; |
| b69ab31 | | | 93 | window.islWebviewHandleResponse = (response: ExternalWebviewCommandsResponse) => { |
| b69ab31 | | | 94 | const cb = callbacks[response.id]; |
| b69ab31 | | | 95 | if (cb) { |
| b69ab31 | | | 96 | cb(response); |
| b69ab31 | | | 97 | delete callbacks[response.id]; |
| b69ab31 | | | 98 | } |
| b69ab31 | | | 99 | }; |
| b69ab31 | | | 100 | |
| b69ab31 | | | 101 | declare const external: { |
| b69ab31 | | | 102 | invoke(arg: string): Promise<void>; |
| b69ab31 | | | 103 | }; |
| b69ab31 | | | 104 | |
| b69ab31 | | | 105 | function invoke(json: ExternalWebviewCommandsInvoke) { |
| b69ab31 | | | 106 | external.invoke(JSON.stringify({...json, id: nextId++})); |
| b69ab31 | | | 107 | } |
| b69ab31 | | | 108 | |
| b69ab31 | | | 109 | function request<K extends ExternalWebviewCommandsInvoke['cmd']>( |
| b69ab31 | | | 110 | json: ExternalWebviewCommandsInvoke & {cmd: K}, |
| b69ab31 | | | 111 | ): Promise<ExternalWebviewCommandsResponse & {cmd: K}> { |
| b69ab31 | | | 112 | const id = nextId++; |
| b69ab31 | | | 113 | let resolve: (value: ExternalWebviewCommandsResponse & {cmd: K}) => void; |
| b69ab31 | | | 114 | const callback = (response: ExternalWebviewCommandsResponse) => { |
| b69ab31 | | | 115 | resolve(response as ExternalWebviewCommandsResponse & {cmd: K}); |
| b69ab31 | | | 116 | }; |
| b69ab31 | | | 117 | const promise = new Promise<ExternalWebviewCommandsResponse & {cmd: K}>(res => { |
| b69ab31 | | | 118 | resolve = res; |
| b69ab31 | | | 119 | }); |
| b69ab31 | | | 120 | external.invoke(JSON.stringify({...json, id})); |
| b69ab31 | | | 121 | callbacks[id] = callback; |
| b69ab31 | | | 122 | |
| b69ab31 | | | 123 | return promise; |
| b69ab31 | | | 124 | } |