Upload/delete tracks

1 files changed, 121 insertions, 0 deletions

diff --git a/extension/interactive-bgm.js b/extension/interactive-bgm.js
index 032dc19..1d29d06 100644
--- a/extension/interactive-bgm.js
+++ b/extension/interactive-bgm.js
@@ -1,3 +1,124 @@
 window.addEventListener('focus', () => {
     browser.runtime.sendMessage({hostname: location.hostname});
 });
+
+let hasShownCreateTrack = false;
+
+browser.runtime.onMessage.addListener(({createTrack}) => {
+    if (createTrack) {
+        if (hasShownCreateTrack) {
+            return;
+        }
+
+        hasShownCreateTrack = true;
+
+        const container = document.createElement('div')
+        document.body.appendChild(container);
+
+        Object.assign(container.style, {
+            all: 'initial',
+            position: 'fixed',
+            left: '0',
+            top: '0',
+            width: '100%',
+            height: '100%',
+            padding: '10px',
+            boxSizing: 'border-box',
+            zIndex: '99999999999',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            lineHeight: '2em',
+            fontFamily: 'Helvetica, Arial, sans-serif',
+            backgroundColor: 'rgba(105, 105, 105, 0.5)'
+        });
+
+        const div = document.createElement('div');
+        container.appendChild(div);
+
+        Object.assign(div.style, {
+            width: '50%',
+            height: '50%',
+            padding: '10px',
+            boxSizing: 'border-box',
+            backgroundColor: '#EEEEEE',
+            border: '2px solid black',
+            borderRadius: '4px',
+            boxShadow: '0 0 8px rgba(0, 0, 0, 0.5)',
+            zIndex: '99999999999',
+            minHeight: '120px',
+            minWidth: '200px'
+        });
+
+        const h1 = document.createElement('div');
+        div.appendChild(h1);
+
+        h1.appendChild(document.createTextNode('Create Track'));
+
+        Object.assign(h1.style, {
+            textAlign: 'center',
+            fontWeight: '800',
+            marginBottom: '8px'
+        });
+
+        const form = document.createElement('form');
+        div.appendChild(form);
+
+        const nameLabel = document.createElement('nameLabel');
+        form.appendChild(nameLabel);
+
+        nameLabel.appendChild(document.createTextNode('Name: '));
+
+        const nameInput = document.createElement('input');
+        nameLabel.appendChild(nameInput);
+
+        nameInput.type = 'text';
+        nameInput.required = true;
+
+        form.appendChild(document.createElement('br'));
+
+        const fileLabel = document.createElement('label');
+        form.appendChild(fileLabel);
+
+        fileLabel.appendChild(document.createTextNode('File: '));
+
+        const fileInput = document.createElement('input');
+        fileLabel.appendChild(fileInput);
+
+        fileInput.type = 'file';
+        fileInput.required = true;
+
+        form.appendChild(document.createElement('br'));
+
+        const submitInput = document.createElement('input');
+        form.appendChild(submitInput);
+
+        submitInput.type = 'submit';
+        submitInput.value = 'Save';
+
+        form.addEventListener('submit', event => {
+            event.preventDefault();
+
+            const trackName = nameInput.value;
+
+            const reader = new FileReader();
+            reader.onload = () => {
+                browser.storage.sync.get('tracks').then(({tracks}) => {
+                    browser.storage.sync.set({tracks: tracks.concat([trackName])});
+                });
+
+                const base64 = reader.result.split(',')[1];
+                const mime = reader.result.split(',')[0].split(';')[0];
+
+                browser.runtime.sendMessage({type: 'uploadTrack', base64, trackName}).then(() => {
+                    document.body.removeChild(container);
+                });
+            };
+
+            reader.readAsDataURL(fileInput.files[0]);
+
+            submitInput.value = 'Saving...';
+            submitInput.disabled = true;
+        });
+    }
+});