add uploader url feature

mickmister · mickmister · commit 6585edbd18cc · 2025-10-28T22:49:57.000-04:00
diff --git a/src/components/ConfigModal.tsx b/src/components/ConfigModal.tsx
@@ -8,6 +8,9 @@ type ConfigModalProps = {
     draftInactivityTimeLimit: number;
     onDraftInactivityTimeLimitChange: (newLimit: number) => void;
     submitInactivityTimeLimitChange: () => void;
+    draftUploaderUrl: string;
+    onDraftUploaderUrlChange: (newUrl: string) => void;
+    submitUploaderUrlChange: () => void;
 };
 
 export function asModal<P extends { isOpen: boolean; onClose: () => void }>(
@@ -44,7 +47,10 @@ function ConfigModalBase({
     recordingConfig,
     draftInactivityTimeLimit,
     onDraftInactivityTimeLimitChange,
-    submitInactivityTimeLimitChange
+    submitInactivityTimeLimitChange,
+    draftUploaderUrl,
+    onDraftUploaderUrlChange,
+    submitUploaderUrlChange
 }: ConfigModalProps) {
     return (
         <div>
@@ -69,6 +75,23 @@ function ConfigModalBase({
                         Recording will automatically stop after this many seconds of inactivity
                     </p>
                 </div>
+
+                <div className="form-group">
+                    <label className="form-label" htmlFor="uploader-url">
+                        Uploader URL
+                    </label>
+                    <input
+                        id="uploader-url"
+                        type='text'
+                        className='form-input'
+                        value={draftUploaderUrl}
+                        onChange={(e) => onDraftUploaderUrlChange(e.target.value)}
+                        placeholder="https://example.com/upload"
+                    />
+                    <p className="text-muted" style={{fontSize: '0.875rem', marginTop: '0.5rem'}}>
+                        URL endpoint for uploading recorded files (leave empty to disable uploads)
+                    </p>
+                </div>
             </div>
             <div className="modal-footer">
                 <button
@@ -83,6 +106,7 @@ function ConfigModalBase({
                     className='btn-primary'
                     onClick={() => {
                         submitInactivityTimeLimitChange();
+                        submitUploaderUrlChange();
                         onClose();
                     }}
                 >
diff --git a/src/jamscribe_module.tsx b/src/jamscribe_module.tsx
@@ -8,19 +8,15 @@ import 'springboard/modules/files/files_module';
 
 import type {FileSaver, RecordingConfig} from './services/recorder';
 
+// @platform "node"
+import {uploadFile} from './services/upload_service';
+// @platform end
+
 let fileSaver: FileSaver | undefined;
 
 // @platform "node"
 import fs from 'node:fs';
-fileSaver = {
-    writeFile: async (fileName, buffer) => {
-        if (!fs.existsSync('./midi_files')) {
-            fs.mkdirSync('midi_files')
-        }
-
-        await fs.promises.writeFile(fileName, buffer);
-    },
-};
+// fileSaver will be set inside the module after recordingConfig is available
 // @platform end
 
 import {MidiRecorderImpl} from './services/recorder';
@@ -35,25 +31,51 @@ type DraftedFile = {
 
 const initialRecordingConfig: RecordingConfig = {
     inactivityTimeLimitSeconds: 60,
+    uploaderUrl: '',
 };
 
 springboard.registerModule('JamScribe', {}, async (moduleAPI) => {
-    // @platform "node"
-    await moduleAPI.getModule('io').ensureListening();
-    // @platform end
+    if (moduleAPI.deps.core.isMaestro()) {
+        await moduleAPI.getModule('io').ensureListening();
+    }
 
     const recordingConfig = await moduleAPI.statesAPI.createPersistentState('recordingConfig', initialRecordingConfig);
     const draftRecordingConfig = await moduleAPI.statesAPI.createSharedState('draftRecordingConfig', recordingConfig.getState());
 
+    // @platform "node"
+    fileSaver = {
+        writeFile: async (fileName, buffer) => {
+            if (!fs.existsSync('./midi_files')) {
+                fs.mkdirSync('midi_files')
+            }
+
+            await fs.promises.writeFile(fileName, buffer);
+
+            try {
+                await uploadFile(fileName, 'audio/midi', buffer, recordingConfig.getState().uploaderUrl);
+            } catch (error) {
+                console.error('Upload failed, but file saved locally:', error);
+            }
+        },
+    };
+    // @platform end
+
     const logMessages = await moduleAPI.statesAPI.createSharedState<LogMessage[]>('logMessages', []);
     const draftedFiles = await moduleAPI.statesAPI.createSharedState<DraftedFile[]>('draftedFiles', []);
 
-    const changeDraftInactivityTimeLimit = moduleAPI.createAction('changeDraftInactivityTimeLimit', {}, async ({limit}: {limit: number}) => {
-        draftRecordingConfig.setState(c => ({...c, inactivityTimeLimitSeconds: limit}));
-    });
-
-    const submitInactivityTimeLimit = moduleAPI.createAction('submitInactivityTimeLimit', {}, async () => {
-        recordingConfig.setState(c => ({...c, inactivityTimeLimitSeconds: draftRecordingConfig.getState().inactivityTimeLimitSeconds}));
+    const actions = moduleAPI.createActions({
+        changeDraftInactivityTimeLimit: async ({limit}: {limit: number}) => {
+            draftRecordingConfig.setState(c => ({...c, inactivityTimeLimitSeconds: limit}));
+        },
+        submitInactivityTimeLimit: async () => {
+            recordingConfig.setState(c => ({...c, inactivityTimeLimitSeconds: draftRecordingConfig.getState().inactivityTimeLimitSeconds}));
+        },
+        changeDraftUploaderUrl: async ({url}: {url: string}) => {
+            draftRecordingConfig.setState(c => ({...c, uploaderUrl: url}));
+        },
+        submitUploaderUrl: async () => {
+            recordingConfig.setState(c => ({...c, uploaderUrl: draftRecordingConfig.getState().uploaderUrl}));
+        },
     });
 
     moduleAPI.registerRoute('/', {}, () => (
@@ -63,8 +85,12 @@ springboard.registerModule('JamScribe', {}, async (moduleAPI) => {
             recordingConfig={recordingConfig.useState()}
 
             draftInactivityTimeLimit={draftRecordingConfig.useState().inactivityTimeLimitSeconds}
-            onDraftInactivityTimeLimitChange={(limit: number) => changeDraftInactivityTimeLimit({limit})}
-            submitInactivityTimeLimitChange={() => submitInactivityTimeLimit({})}
+            onDraftInactivityTimeLimitChange={(limit: number) => actions.changeDraftInactivityTimeLimit({limit})}
+            submitInactivityTimeLimitChange={() => actions.submitInactivityTimeLimit()}
+
+            draftUploaderUrl={draftRecordingConfig.useState().uploaderUrl}
+            onDraftUploaderUrlChange={(url: string) => actions.changeDraftUploaderUrl({url})}
+            submitUploaderUrlChange={() => actions.submitUploaderUrl()}
         />
     ));
 
@@ -76,7 +102,7 @@ springboard.registerModule('JamScribe', {}, async (moduleAPI) => {
     // default implementation of file saver
     if (!fileSaver) {
         fileSaver = {
-            writeFile: (fileName, buffer) => {
+            writeFile: async (fileName, buffer) => {
                 const filesModule = moduleAPI.deps.module.moduleRegistry.getModule('Files');
                 const file = new File([
                     new Blob([buffer.toString()])
@@ -120,6 +146,10 @@ type MainProps = {
     draftInactivityTimeLimit: number;
     onDraftInactivityTimeLimitChange: (newLimit: number) => void;
     submitInactivityTimeLimitChange: () => void;
+
+    draftUploaderUrl: string;
+    onDraftUploaderUrlChange: (newUrl: string) => void;
+    submitUploaderUrlChange: () => void;
 }
 
 const Main = ({
@@ -128,7 +158,10 @@ const Main = ({
     recordingConfig,
     draftInactivityTimeLimit,
     onDraftInactivityTimeLimitChange,
-    submitInactivityTimeLimitChange
+    submitInactivityTimeLimitChange,
+    draftUploaderUrl,
+    onDraftUploaderUrlChange,
+    submitUploaderUrlChange
 }: MainProps) => {
     const [isConfigModalOpen, setIsConfigModalOpen] = useState(false);
 
@@ -152,6 +185,9 @@ const Main = ({
                 draftInactivityTimeLimit={draftInactivityTimeLimit}
                 onDraftInactivityTimeLimitChange={onDraftInactivityTimeLimitChange}
                 submitInactivityTimeLimitChange={submitInactivityTimeLimitChange}
+                draftUploaderUrl={draftUploaderUrl}
+                onDraftUploaderUrlChange={onDraftUploaderUrlChange}
+                submitUploaderUrlChange={submitUploaderUrlChange}
             />
 
             <div className="main-grid">
@@ -192,7 +228,7 @@ const Main = ({
                     </div>
                     <ul className="log-list">
                         {logs.length > 0 ? (
-                            [...logs].reverse().map((logEntry, i) => {
+                            [...logs].reverse().map((logEntry) => {
                                 const formatTime = (date: Date | string | number) => {
                                     const dateObj = new Date(date);
                                     const now = new Date();
@@ -218,7 +254,7 @@ const Main = ({
                                     <li key={logEntry.id} className='log-item fade-in'>
                                         <span className="log-timestamp">{formatTime(logEntry.timestamp)}</span>
                                         <span className="log-message">{logEntry.message}</span>
-                                </li>
+                                    </li>
                                 );
                             })
                         ) : (
diff --git a/src/services/recorder.ts b/src/services/recorder.ts
@@ -28,6 +28,7 @@ export type FileSaver = {
 
 export type RecordingConfig = {
     inactivityTimeLimitSeconds: number;
+    uploaderUrl: string;
 }
 
 export class MidiRecorderImpl {
diff --git a/src/services/upload_service.ts b/src/services/upload_service.ts
@@ -0,0 +1,149 @@
+// @platform "node"
+import * as crypto from 'node:crypto';
+// @platform end
+
+const PART_SIZE = 5 * 1024 * 1024;
+
+function computeSha1(buffer: Buffer): string {
+    const hash = crypto.createHash('sha1');
+    hash.update(buffer);
+    return hash.digest('hex');
+}
+
+type UploadInfo = {
+    project_name: string;
+    workspace_name: string;
+    endpoints: {
+        initiate_upload: string;
+        part_url: string;
+        complete_upload: string;
+        abort_upload: string;
+    };
+};
+
+type InitiateData = {
+    upload_id: string;
+    file_path: string;
+    upload_record_id: string;
+    part_url_endpoint: string;
+    complete_url: string;
+    abort_url: string;
+};
+
+export const uploadFile = async (fileName: string, contentType: string, buffer: Buffer, uploaderUrl: string): Promise<void> => {
+    try {
+        if (!uploaderUrl) {
+            console.log('No uploader URL configured, skipping upload');
+            return;
+        }
+
+        const infoResponse = await fetch(uploaderUrl);
+
+        if (!infoResponse.ok) {
+            const errorText = await infoResponse.text();
+            throw new Error(`Failed to get upload info: ${infoResponse.status} ${infoResponse.statusText}\n${errorText}`);
+        }
+
+        const uploadInfo = await infoResponse.json() as UploadInfo;
+
+        const fileSize = buffer.length;
+        const partCount = Math.ceil(fileSize / PART_SIZE);
+        const fileHash = computeSha1(buffer);
+
+        const initiateResponse = await fetch(uploadInfo.endpoints.initiate_upload, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                file_name: fileName,
+                content_type: contentType,
+                part_count: partCount,
+            }),
+        });
+
+        if (!initiateResponse.ok) {
+            const errorText = await initiateResponse.text();
+            throw new Error(`Failed to initiate upload: ${initiateResponse.status} ${initiateResponse.statusText}\n${errorText}`);
+        }
+
+        const initiateData = await initiateResponse.json() as InitiateData;
+
+        const uploadedParts: Array<{ETag: string; PartNumber: number}> = [];
+
+        for (let partNumber = 1; partNumber <= partCount; partNumber++) {
+            const start = (partNumber - 1) * PART_SIZE;
+            const end = Math.min(start + PART_SIZE, fileSize);
+            const partBuffer = buffer.slice(start, end);
+
+            const partUrlResponse = await fetch(uploadInfo.endpoints.part_url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    upload_id: initiateData.upload_id,
+                    file_path: initiateData.file_path,
+                    part_number: partNumber,
+                    content_type: contentType,
+                }),
+            });
+
+            if (!partUrlResponse.ok) {
+                const errorText = await partUrlResponse.text();
+                throw new Error(`Failed to get part URL: ${partUrlResponse.status} ${partUrlResponse.statusText}\n${errorText}`);
+            }
+
+            const partUrlData = await partUrlResponse.json() as {
+                part_number: number;
+                upload_url: string;
+            };
+
+            const uploadPartResponse = await fetch(partUrlData.upload_url, {
+                method: 'PUT',
+                body: partBuffer,
+                headers: {
+                    'Content-Type': contentType,
+                },
+            });
+
+            if (!uploadPartResponse.ok) {
+                const errorText = await uploadPartResponse.text();
+                throw new Error(`Failed to upload part ${partNumber}: ${uploadPartResponse.status} ${uploadPartResponse.statusText}\n${errorText}`);
+            }
+
+            const etag = uploadPartResponse.headers.get('ETag');
+            if (!etag) {
+                throw new Error(`No ETag returned for part ${partNumber}`);
+            }
+
+            uploadedParts.push({
+                ETag: etag.replace(/"/g, ''),
+                PartNumber: partNumber,
+            });
+        }
+
+        const completeResponse = await fetch(uploadInfo.endpoints.complete_upload, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                upload_id: initiateData.upload_id,
+                file_path: initiateData.file_path,
+                upload_record_id: initiateData.upload_record_id,
+                parts: uploadedParts,
+                file_size: fileSize,
+                file_hash: fileHash,
+            }),
+        });
+
+        if (!completeResponse.ok) {
+            const errorText = await completeResponse.text();
+            throw new Error(`Failed to complete upload: ${completeResponse.status} ${completeResponse.statusText}\n${errorText}`);
+        }
+    } catch (error) {
+        console.error('Error during multipart upload:', error);
+        throw error;
+    }
+};

Original file line number	Diff line number	Diff line change
`@@ -28,6 +28,7 @@ export type FileSaver = {`
`28`	`28`
`29`	`29`	`export type RecordingConfig = {`
`30`	`30`	`inactivityTimeLimitSeconds: number;`
	`31`	`+ uploaderUrl: string;`
`31`	`32`	`}`
`32`	`33`
`33`	`34`	`export class MidiRecorderImpl {`