Merge branch 'main' into audio_device_selection

website/src/repl/Repl.jsx

@@ -4,7 +4,16 @@ Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/st
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { cleanupDraw, cleanupUi, controls, evalScope, getDrawContext, logger } from '@strudel.cycles/core';
+import {
+  cleanupDraw,
+  cleanupUi,
+  controls,
+  evalScope,
+  getDrawContext,
+  logger,
+  code2hash,
+  hash2code,
+} from '@strudel.cycles/core';
 import { CodeMirror, cx, flash, useHighlighting, useStrudel, useKeydown } from '@strudel.cycles/react';
 import { getAudioContext, initAudioOnFirstClick, resetLoadedSounds, webaudioOutput } from '@strudel.cycles/webaudio';
 import { createClient } from '@supabase/supabase-js';
@@ -17,14 +26,24 @@ import { prebake } from './prebake.mjs';
 import * as tunes from './tunes.mjs';
 import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon';
 import { themes } from './themes.mjs';
-import { settingsMap, useSettings, setLatestCode, updateUserCode, setActivePattern } from '../settings.mjs';
+import {
+  settingsMap,
+  useSettings,
+  setLatestCode,
+  updateUserCode,
+  setActivePattern,
+  getActivePattern,
+  getUserPattern,
+  initUserCode,
+} from '../settings.mjs';
 import Loader from './Loader';
 import { settingPatterns } from '../settings.mjs';
-import { code2hash, hash2code } from './helpers.mjs';
 import { isTauri } from '../tauri.mjs';
 import { useWidgets } from '@strudel.cycles/react/src/hooks/useWidgets.mjs';
 import { writeText } from '@tauri-apps/api/clipboard';
 import { defaultAudioDeviceName, getAudioDevices, setAudioDevice } from './panel/AudioDeviceSelector';
+import { registerSamplesFromDB, userSamplesDBConfig } from './idbutils.mjs';
+
 
 const { latestCode } = settingsMap.get();
 
@@ -132,6 +151,7 @@ export function Repl({ embedded = false }) {
     isLineWrappingEnabled,
     panelPosition,
     isZen,
+    audio_device_selection,
     activePattern,
     audioDeviceName,
   } = useSettings();
@@ -180,6 +200,7 @@ export function Repl({ embedded = false }) {
       let msg;
       if (decoded) {
         setCode(decoded);
+        initUserCode(decoded);
         msg = `I have loaded the code from the URL.`;
       } else if (latestCode) {
         setCode(latestCode);
@@ -188,6 +209,8 @@ export function Repl({ embedded = false }) {
         setCode(randomTune);
         msg = `A random code snippet named "${name}" has been loaded!`;
       }
+      //registers samples that have been saved to the index DB
+      registerSamplesFromDB(userSamplesDBConfig);
       logger(`Welcome to Strudel! ${msg} Press play or hit ctrl+enter to run it!`, 'highlight');
       setPending(false);
     });

website/src/repl/helpers.mjs

@@ -1,25 +0,0 @@
-export function unicodeToBase64(text) {
-  const utf8Bytes = new TextEncoder().encode(text);
-  const base64String = btoa(String.fromCharCode(...utf8Bytes));
-  return base64String;
-}
-
-export function base64ToUnicode(base64String) {
-  const utf8Bytes = new Uint8Array(
-    atob(base64String)
-      .split('')
-      .map((char) => char.charCodeAt(0)),
-  );
-  const decodedText = new TextDecoder().decode(utf8Bytes);
-  return decodedText;
-}
-
-export function code2hash(code) {
-  return encodeURIComponent(unicodeToBase64(code));
-  //return '#' + encodeURIComponent(btoa(code));
-}
-
-export function hash2code(hash) {
-  return base64ToUnicode(decodeURIComponent(hash));
-  //return atob(decodeURIComponent(codeParam || ''));
-}

website/src/repl/idbutils.mjs

@@ -0,0 +1,148 @@
+import { registerSound, onTriggerSample } from '@strudel.cycles/webaudio';
+import { isAudioFile } from './files.mjs';
+import { logger } from '@strudel.cycles/core';
+
+//utilites for writing and reading to the indexdb
+
+export const userSamplesDBConfig = {
+  dbName: 'samples',
+  table: 'usersamples',
+  columns: ['blob', 'title'],
+  version: 1,
+};
+
+// deletes all of the databases, useful for debugging
+const clearIDB = () => {
+  window.indexedDB
+    .databases()
+    .then((r) => {
+      for (var i = 0; i < r.length; i++) window.indexedDB.deleteDatabase(r[i].name);
+    })
+    .then(() => {
+      alert('All data cleared.');
+    });
+};
+
+// queries the DB, and registers the sounds so they can be played
+export const registerSamplesFromDB = (config, onComplete = () => {}) => {
+  openDB(config, (objectStore) => {
+    let query = objectStore.getAll();
+    query.onsuccess = (event) => {
+      const soundFiles = event.target.result;
+      if (!soundFiles?.length) {
+        return;
+      }
+      const sounds = new Map();
+      [...soundFiles]
+        .sort((a, b) => a.title.localeCompare(b.title, undefined, { numeric: true, sensitivity: 'base' }))
+        .forEach((soundFile) => {
+          const title = soundFile.title;
+          if (!isAudioFile(title)) {
+            return;
+          }
+          const splitRelativePath = soundFile.id?.split('/');
+          const parentDirectory = splitRelativePath[splitRelativePath.length - 2];
+          const soundPath = soundFile.blob;
+          const soundPaths = sounds.get(parentDirectory) ?? new Set();
+          soundPaths.add(soundPath);
+          sounds.set(parentDirectory, soundPaths);
+        });
+
+      sounds.forEach((soundPaths, key) => {
+        const value = Array.from(soundPaths);
+        registerSound(key, (t, hapValue, onended) => onTriggerSample(t, hapValue, onended, value), {
+          type: 'sample',
+          samples: value,
+          baseUrl: undefined,
+          prebake: false,
+          tag: undefined,
+        });
+      });
+      logger('imported sounds registered!', 'success');
+      onComplete();
+    };
+  });
+};
+// creates a blob from a buffer that can be read
+async function bufferToDataUrl(buf) {
+  return new Promise((resolve) => {
+    var blob = new Blob([buf], { type: 'application/octet-binary' });
+    var reader = new FileReader();
+    reader.onload = function (event) {
+      resolve(event.target.result);
+    };
+    reader.readAsDataURL(blob);
+  });
+}
+//open db and initialize it if necessary
+const openDB = (config, onOpened) => {
+  const { dbName, version, table, columns } = config;
+  if (!('indexedDB' in window)) {
+    console.log('IndexedDB is not supported.');
+    return;
+  }
+  const dbOpen = indexedDB.open(dbName, version);
+
+  dbOpen.onupgradeneeded = (_event) => {
+    const db = dbOpen.result;
+    const objectStore = db.createObjectStore(table, { keyPath: 'id', autoIncrement: false });
+    columns.forEach((c) => {
+      objectStore.createIndex(c, c, { unique: false });
+    });
+  };
+  dbOpen.onerror = (err) => {
+    logger('Something went wrong while trying to open the the client DB', 'error');
+    console.error(`indexedDB error: ${err.errorCode}`);
+  };
+
+  dbOpen.onsuccess = () => {
+    const db = dbOpen.result;
+
+    const // lock store for writing
+      writeTransaction = db.transaction([table], 'readwrite'),
+      // get object store
+      objectStore = writeTransaction.objectStore(table);
+    onOpened(objectStore, db);
+  };
+};
+
+const processFilesForIDB = async (files) => {
+  return await Promise.all(
+    Array.from(files)
+      .map(async (s) => {
+        const title = s.name;
+        if (!isAudioFile(title)) {
+          return;
+        }
+        //create obscured url to file system that can be fetched
+        const sUrl = URL.createObjectURL(s);
+        //fetch the sound and turn it into a buffer array
+        const buf = await fetch(sUrl).then((res) => res.arrayBuffer());
+        //create a url blob containing all of the buffer data
+        const base64 = await bufferToDataUrl(buf);
+        return {
+          title,
+          blob: base64,
+          id: s.webkitRelativePath,
+        };
+      })
+      .filter(Boolean),
+  ).catch((error) => {
+    logger('Something went wrong while processing uploaded files', 'error');
+    console.error(error);
+  });
+};
+
+export const uploadSamplesToDB = async (config, files) => {
+  await processFilesForIDB(files).then((files) => {
+    const onOpened = (objectStore, _db) => {
+      files.forEach((file) => {
+        if (file == null) {
+          return;
+        }
+        objectStore.put(file);
+      });
+    };
+    openDB(config, onOpened);
+  });
+};

website/src/repl/panel/Forms.jsx

@@ -9,7 +9,7 @@ export function ButtonGroup({ value, onChange, items }) {
           key={key}
           onClick={() => onChange(key)}
           className={cx(
-            'px-2 border-b h-8',
+            'px-2 border-b h-8 whitespace-nowrap',
             // i === 0 && 'rounded-l-md',
             // i === arr.length - 1 && 'rounded-r-md',
             // value === key ? 'bg-background' : 'bg-lineHighlight',

website/src/repl/panel/ImportSoundsButton.jsx

@@ -0,0 +1,43 @@
+import React, { useCallback, useState } from 'react';
+import { registerSamplesFromDB, uploadSamplesToDB, userSamplesDBConfig } from '../idbutils.mjs';
+
+//choose a directory to locally import samples
+export default function ImportSoundsButton({ onComplete }) {
+  let fileUploadRef = React.createRef();
+  const [isUploading, setIsUploading] = useState(false);
+  const onChange = useCallback(async () => {
+    if (!fileUploadRef.current.files?.length) {
+      return;
+    }
+    setIsUploading(true);
+    await uploadSamplesToDB(userSamplesDBConfig, fileUploadRef.current.files).then(() => {
+      registerSamplesFromDB(userSamplesDBConfig, () => {
+        onComplete();
+        setIsUploading(false);
+      });
+    });
+  });
+
+  return (
+    <label
+      style={{ alignItems: 'center' }}
+      className="flex bg-background ml-2 pl-2 pr-2 max-w-[300px] rounded-md hover:opacity-50 whitespace-nowrap cursor-pointer"
+    >
+      <input
+        disabled={isUploading}
+        ref={fileUploadRef}
+        id="audio_file"
+        style={{ display: 'none' }}
+        type="file"
+        directory=""
+        webkitdirectory=""
+        multiple
+        accept="audio/*"
+        onChange={() => {
+          onChange();
+        }}
+      />
+      {isUploading ? 'importing...' : 'import sounds'}
+    </label>
+  );
+}

website/src/repl/panel/PatternsTab.jsx

@@ -1,27 +1,27 @@
+import { DocumentDuplicateIcon, PencilSquareIcon, TrashIcon } from '@heroicons/react/20/solid';
 import { useMemo } from 'react';
-import * as tunes from '../tunes.mjs';
 import {
-  useSettings,
   clearUserPatterns,
-  newUserPattern,
-  setActivePattern,
   deleteActivePattern,
   duplicateActivePattern,
+  exportPatterns,
   getUserPattern,
-  getUserPatterns,
+  importPatterns,
+  newUserPattern,
   renameActivePattern,
-  addUserPattern,
-  setUserPatterns,
+  setActivePattern,
+  useActivePattern,
+  useSettings,
 } from '../../settings.mjs';
-import { logger } from '@strudel.cycles/core';
-import { DocumentDuplicateIcon, PencilSquareIcon, TrashIcon } from '@heroicons/react/20/solid';
+import * as tunes from '../tunes.mjs';
 
 function classNames(...classes) {
   return classes.filter(Boolean).join(' ');
 }
 
 export function PatternsTab({ context }) {
-  const { userPatterns, activePattern } = useSettings();
+  const { userPatterns } = useSettings();
+  const activePattern = useActivePattern();
   const isExample = useMemo(() => activePattern && !!tunes[activePattern], [activePattern]);
   return (
     <div className="px-4 w-full dark:text-white text-stone-900 space-y-4 pb-4">
@@ -85,38 +85,11 @@ export function PatternsTab({ context }) {
               type="file"
               multiple
               accept="text/plain,application/json"
-              onChange={async (e) => {
-                const files = Array.from(e.target.files);
-                await Promise.all(
-                  files.map(async (file, i) => {
-                    const content = await file.text();
-                    if (file.type === 'application/json') {
-                      const userPatterns = getUserPatterns() || {};
-                      setUserPatterns({ ...userPatterns, ...JSON.parse(content) });
-                    } else if (file.type === 'text/plain') {
-                      const name = file.name.replace(/\.[^/.]+$/, '');
-                      addUserPattern(name, { code: content });
-                    }
-                  }),
-                );
-                logger(`import done!`);
-              }}
+              onChange={(e) => importPatterns(e.target.files)}
             />
             import
           </label>
-          <button
-            className="hover:opacity-50"
-            onClick={() => {
-              const blob = new Blob([JSON.stringify(userPatterns)], { type: 'application/json' });
-              const downloadLink = document.createElement('a');
-              downloadLink.href = window.URL.createObjectURL(blob);
-              const date = new Date().toISOString().split('T')[0];
-              downloadLink.download = `strudel_patterns_${date}.json`;
-              document.body.appendChild(downloadLink);
-              downloadLink.click();
-              document.body.removeChild(downloadLink);
-            }}
-          >
+          <button className="hover:opacity-50" onClick={() => exportPatterns()}>
             export
           </button>
         </div>

website/src/repl/panel/SoundsTab.jsx

@@ -5,6 +5,7 @@ import { getAudioContext, soundMap, connectToDestination } from '@strudel.cycles
 import React, { useMemo, useRef } from 'react';
 import { settingsMap, useSettings } from '../../settings.mjs';
 import { ButtonGroup } from './Forms.jsx';
+import ImportSoundsButton from './ImportSoundsButton.jsx';
 
 const getSamples = (samples) =>
   Array.isArray(samples) ? samples.length : typeof samples === 'object' ? Object.values(samples).length : 1;
@@ -43,7 +44,7 @@ export function SoundsTab() {
   });
   return (
     <div id="sounds-tab" className="px-4 flex flex-col w-full h-full dark:text-white text-stone-900">
-      <div className="pb-2 flex-none">
+      <div className="pb-2 flex shrink-0 overflow-auto">
         <ButtonGroup
           value={soundsFilter}
           onChange={(value) => settingsMap.setKey('soundsFilter', value)}
@@ -54,6 +55,7 @@ export function SoundsTab() {
             user: 'User',
           }}
         ></ButtonGroup>
+        <ImportSoundsButton onComplete={() => settingsMap.setKey('soundsFilter', 'user')} />
       </div>
       <div className="min-h-0 max-h-full grow overflow-auto font-mono text-sm break-normal">
         {soundEntries.map(([name, { data, onTrigger }]) => (

website/src/repl/prebake.mjs

@@ -114,6 +114,9 @@ export async function prebake() {
         ],
       },
       'github:tidalcycles/Dirt-Samples/master/',
+      {
+        prebake: true,
+      },
     ),
   ]);
   // await samples('github:tidalcycles/Dirt-Samples/master');

website/src/repl/vanilla/vanilla.css

@@ -0,0 +1,34 @@
+body,
+input {
+  font-family: monospace;
+  background-color: black;
+  color: white;
+}
+
+input,
+select {
+  background-color: black !important;
+}
+
+html,
+body,
+#code,
+.cm-editor,
+.cm-scroller {
+  padding: 0;
+  margin: 0;
+  height: 100%;
+}
+
+.settings {
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 1000;
+  display: flex-col;
+  padding: 10px;
+}
+
+.settings > form > * + * {
+  margin-top: 10px;
+}

website/src/repl/vanilla/vanilla.mjs

@@ -0,0 +1,202 @@
+import { logger, getDrawContext, silence, controls, evalScope, hash2code, code2hash } from '@strudel.cycles/core';
+import { StrudelMirror, initTheme, activateTheme } from '@strudel/codemirror';
+import { transpiler } from '@strudel.cycles/transpiler';
+import {
+  getAudioContext,
+  webaudioOutput,
+  registerSynthSounds,
+  registerZZFXSounds,
+  samples,
+} from '@strudel.cycles/webaudio';
+import './vanilla.css';
+
+let editor;
+const initialSettings = {
+  keybindings: 'codemirror',
+  isLineNumbersDisplayed: true,
+  isActiveLineHighlighted: true,
+  isAutoCompletionEnabled: false,
+  isPatternHighlightingEnabled: true,
+  isFlashEnabled: true,
+  isTooltipEnabled: false,
+  isLineWrappingEnabled: false,
+  theme: 'teletext',
+  fontFamily: 'monospace',
+  fontSize: 18,
+};
+initTheme(initialSettings.theme);
+
+async function run() {
+  const container = document.getElementById('code');
+  if (!container) {
+    console.warn('could not init: no container found');
+    return;
+  }
+
+  const drawContext = getDrawContext();
+  const drawTime = [-2, 2];
+  editor = new StrudelMirror({
+    defaultOutput: webaudioOutput,
+    getTime: () => getAudioContext().currentTime,
+    transpiler,
+    root: container,
+    initialCode: '// LOADING',
+    pattern: silence,
+    settings: initialSettings,
+    drawTime,
+    onDraw: (haps, time, frame, painters) => {
+      painters.length && drawContext.clearRect(0, 0, drawContext.canvas.width * 2, drawContext.canvas.height * 2);
+      painters?.forEach((painter) => {
+        // ctx time haps drawTime paintOptions
+        painter(drawContext, time, haps, drawTime, { clear: false });
+      });
+    },
+    prebake: async () => {
+      // populate scope / lazy load modules
+      const modulesLoading = evalScope(
+        import('@strudel.cycles/core'),
+        import('@strudel.cycles/tonal'),
+        import('@strudel.cycles/mini'),
+        // import('@strudel.cycles/xen'),
+        import('@strudel.cycles/webaudio'),
+        import('@strudel/codemirror'),
+        /* import('@strudel/hydra'), */
+        // import('@strudel.cycles/serial'),
+        /* import('@strudel.cycles/soundfonts'), */
+        // import('@strudel.cycles/csound'),
+        /* import('@strudel.cycles/midi'), */
+        // import('@strudel.cycles/osc'),
+        controls, // sadly, this cannot be exported from core directly (yet)
+      );
+      // load samples
+      const ds = 'https://raw.githubusercontent.com/felixroos/dough-samples/main/';
+      await Promise.all([
+        modulesLoading,
+        registerSynthSounds(),
+        registerZZFXSounds(),
+        samples(`${ds}/tidal-drum-machines.json`),
+        samples(`${ds}/piano.json`),
+        samples(`${ds}/Dirt-Samples.json`),
+        samples(`${ds}/EmuSP12.json`),
+        samples(`${ds}/vcsl.json`),
+      ]);
+    },
+    afterEval: ({ code }) => {
+      window.location.hash = '#' + code2hash(code);
+    },
+  });
+
+  // init settings
+  editor.updateSettings(initialSettings);
+
+  logger(`Welcome to Strudel! Click into the editor and then hit ctrl+enter to run the code!`, 'highlight');
+  const codeParam = window.location.href.split('#')[1] || '';
+
+  const initialCode = codeParam
+    ? hash2code(codeParam)
+    : `// @date 23-11-30
+// "teigrührgerät" @by froos
+
+stack(
+  stack(
+    s("bd(<3!3 5>,6)/2").bank('RolandTR707')
+    ,
+    s("~ sd:<0 1>").bank('RolandTR707').room("<0 .5>")
+    .lastOf(8, x=>x.segment("12").end(.2).gain(isaw))
+    ,
+    s("[tb ~ tb]").bank('RolandTR707')
+    .clip(0).release(.08).room(.2)
+  ).off(-1/6, x=>x.speed(.7).gain(.2).degrade())
+  ,
+  stack(
+    note("<g1(<3 4>,6) ~!2 [f1?]*2>")
+    .s("sawtooth").lpf(perlin.range(400,1000))
+    .lpa(.1).lpenv(-3).room(.2)
+    .lpq(8).noise(.2)
+    .add(note("0,.1"))
+    ,
+    chord("<~ Gm9 ~!2>")
+    .dict('ireal').voicing()
+    .s("sawtooth").vib("2:.1")
+    .lpf(1000).lpa(.1).lpenv(-4)
+    .room(.5)
+    ,
+    n(run(3)).chord("<Gm9 Gm11>/8")
+    .dict('ireal-ext')
+    .off(1/2, add(n(4)))
+    .voicing()
+    .clip(.1).release(.05)
+    .s("sine").jux(rev)
+    .sometimesBy(sine.slow(16), add(note(12)))
+    .room(.75)
+    .lpf(sine.range(200,2000).slow(16))
+    .gain(saw.slow(4).div(2))
+  ).add(note(perlin.range(0,.5)))
+)`;
+
+  editor.setCode(initialCode); // simpler alternative to above init
+
+  // settingsMap.listen((settings, key) => editor.changeSetting(key, settings[key]));
+  onEvent('strudel-toggle-play', () => editor.toggle());
+}
+
+run();
+
+function onEvent(key, callback) {
+  const listener = (e) => {
+    if (e.data === key) {
+      callback();
+    }
+  };
+  window.addEventListener('message', listener);
+  return () => window.removeEventListener('message', listener);
+}
+
+// settings form
+function getInput(form, name) {
+  return form.querySelector(`input[name=${name}]`) || form.querySelector(`select[name=${name}]`);
+}
+function getFormValues(form, initial) {
+  const entries = Object.entries(initial).map(([key, initialValue]) => {
+    const input = getInput(form, key);
+    if (!input) {
+      return [key, initialValue]; // fallback
+    }
+    if (input.type === 'checkbox') {
+      return [key, input.checked];
+    }
+    if (input.type === 'number') {
+      return [key, Number(input.value)];
+    }
+    if (input.tagName === 'SELECT') {
+      return [key, input.value];
+    }
+    return [key, input.value];
+  });
+  return Object.fromEntries(entries);
+}
+function setFormValues(form, values) {
+  Object.entries(values).forEach(([key, value]) => {
+    const input = getInput(form, key);
+    if (!input) {
+      return;
+    }
+    if (input.type === 'checkbox') {
+      input.checked = !!value;
+    } else if (input.type === 'number') {
+      input.value = value;
+    } else if (input.tagName) {
+      input.value = value;
+    }
+  });
+}
+
+const form = document.querySelector('form[name=settings]');
+setFormValues(form, initialSettings);
+form.addEventListener('change', () => {
+  const values = getFormValues(form, initialSettings);
+  // console.log('values', values);
+  editor.updateSettings(values);
+  // TODO: only activateTheme when it changes
+  activateTheme(values.theme);
+});