diff options
Diffstat (limited to 'extension/interactive-bgm.js')
-rw-r--r-- | extension/interactive-bgm.js | 121 |
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; + }); + } +}); |