From 8f22597f8c23b198dc5baf28596aa22306409724 Mon Sep 17 00:00:00 2001
From: Ryan Louie <rlouie@google.com>
Date: Thu, 18 Nov 2021 06:32:47 +0000
Subject: [PATCH] Add save button for saving to MIDI

---
 src/components/controls.tsx | 12 ++++++++++++
 src/core/save-load.ts       | 16 +++++++++++++++-
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/components/controls.tsx b/src/components/controls.tsx
index 8695c8e..4cc5537 100644
--- a/src/components/controls.tsx
+++ b/src/components/controls.tsx
@@ -30,10 +30,12 @@ import {
   SelectAll,
   Undo,
   Redo,
+  Save,
 } from '@material-ui/icons';
 import { observer } from 'mobx-react';
 
 import { generator, player, layout, editor, EditorTool, undo } from '../core';
+import saveload from '../core/save-load';
 import * as theme from '../core/theme';
 import { Voice } from '../core/note';
 
@@ -83,6 +85,16 @@ export class Controls extends React.Component<{}, State> {
             {showPlay ? <PlayArrow /> : <Stop />}
           </Button>
         </div>
+        <div>
+          <Button
+            disabled={playDisabled}
+            variant="outlined"
+            color="primary"
+            onClick={() => saveload.saveMIDI()}
+          >
+            <Save />
+          </Button>
+        </div>
         <div>
           <Button
             disabled={!undo.canUndo}
diff --git a/src/core/save-load.ts b/src/core/save-load.ts
index 568a5ce..4806be7 100644
--- a/src/core/save-load.ts
+++ b/src/core/save-load.ts
@@ -1,7 +1,9 @@
-import { undo } from '../core';
+import { undo, editor, player } from '../core';
 import { getDateString } from './utils';
 import featureFlags from './feature-flags';
 import logging, { Events } from './logging';
+import { sequenceProtoToMidi } from '@magenta/music';
+import { getMagentaNoteSequence } from './magenta-utils';
 
 export class SaveLoad {
   saveJSON() {
@@ -13,6 +15,18 @@ export class SaveLoad {
     this.downloadBlob(blob, `cococo_state_${getDateString()}_${ffMeta}`);
   }
 
+  saveMIDI() {
+    const inputNotes = [...editor.allNotes];
+    const sequence = getMagentaNoteSequence(
+      inputNotes,
+      player.bpm,
+      editor.totalSixteenths,
+      true
+    );
+    const blob = new Blob([sequenceProtoToMidi(sequence)], { type: 'audio/midi' });
+    this.downloadBlob(blob, `cococo_music_${getDateString()}`);
+  }
+
   loadJSON() {
     const input = document.createElement('input');
     input.type = 'file';