Add button to revert p5.sound version after a change

Author: davepagurek

client/modules/IDE/components/Editor/index.jsx

@@ -379,7 +379,6 @@ class Editor extends React.Component {
   updateFileContent(id, src) {
     const file = this._docs[id];
     if (file) {
-      console.log(this._docs[id]);
       this._docs[id] = CodeMirror.Doc(src, this._docs[id].modeOption);
       if (id === this.props.file.id) {
         this._cm.swapDoc(this._docs[id]);

client/modules/IDE/components/Preferences/index.jsx

@@ -19,10 +19,11 @@ import {
   setLinewrap,
   setPreferencesTab
 } from '../../actions/preferences';
-import { useP5Version } from '../../hooks/useP5Version';
+import { p5SoundURL, useP5Version } from '../../hooks/useP5Version';
 import VersionPicker from '../VersionPicker';
 import { updateFileContent } from '../../actions/files';
 import { CmControllerContext } from '../../pages/IDEView';
+import Button from '../../../../common/Button';
 
 export default function Preferences() {
   const { t } = useTranslation();
@@ -45,6 +46,7 @@ export default function Preferences() {
 
   const [state, setState] = useState({ fontSize });
   const { versionInfo, indexID } = useP5Version();
+  const [lastP5SoundURL, setLastP5SoundURL] = useState(undefined);
   const cmRef = useContext(CmControllerContext);
 
   function onFontInputChange(event) {
@@ -526,7 +528,15 @@ export default function Preferences() {
                   </label>
                   <input
                     type="radio"
-                    onChange={() => updateHTML(versionInfo.setP5Sound(false))}
+                    onChange={() => {
+                      // If the previous p5.sound.js script tag is not the
+                      // default version that one will get via this toggle,
+                      // record it so we can give the option to put it back
+                      if (versionInfo.p5SoundURL !== p5SoundURL) {
+                        setLastP5SoundURL(versionInfo.p5SoundURL);
+                      }
+                      updateHTML(versionInfo.setP5Sound(false));
+                    }}
                     aria-label={t('Preferences.AutosaveOffARIA')}
                     name="soundaddon"
                     id="soundaddon-off"
@@ -540,6 +550,16 @@ export default function Preferences() {
                   >
                     {t('Preferences.Off')}
                   </label>
+                  {lastP5SoundURL && (
+                    <Button
+                      onClick={() => {
+                        updateHTML(versionInfo.setP5SoundURL(lastP5SoundURL));
+                        setLastP5SoundURL(undefined);
+                      }}
+                    >
+                      {t('Preferences.UndoSoundVersion')}
+                    </Button>
+                  )}
                 </div>
               </div>
               <div className="preference">

client/modules/IDE/hooks/useP5Version.js

@@ -132,8 +132,9 @@ export const p5Versions = [
   '0.2.1'
 ];
 
-export const p5SoundURL =
-  'https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.1/addons/p5.sound.min.js';
+export const currentP5Version = p5Versions[0];
+
+export const p5SoundURL = `https://cdnjs.cloudflare.com/ajax/libs/p5.js/${currentP5Version}/addons/p5.sound.min.js`;
 export const p5PreloadAddonURL = 'https://TODO/preload.js';
 export const p5ShapesAddonURL = 'https://TODO/shapes.js';
 
@@ -196,7 +197,12 @@ export function useP5Version() {
 
       const p5SoundNode = [
         ...dom.documentElement.querySelectorAll('script')
-      ].find((s) => s.getAttribute('src') === p5SoundURL);
+      ].find((s) =>
+        [
+          /^https?:\/\/cdnjs.cloudflare.com\/ajax\/libs\/p5.js\/(.+)\/addons\/p5\.sound\.min\.js$/,
+          /^https?:\/\/cdn.jsdelivr.net\/npm\/p5@(.+)\/lib\/addons\/p5\.sound\.min\.js$/
+        ].some((regex) => regex.exec(s.getAttribute('src') || ''))
+      );
       const setP5Sound = function (enabled) {
         if (!enabled && p5SoundNode) {
           p5SoundNode.parentNode.removeChild(p5SoundNode);
@@ -208,6 +214,17 @@ export function useP5Version() {
         return serializeResult();
       };
 
+      const setP5SoundURL = function (url) {
+        if (p5SoundNode) {
+          p5SoundNode.setAttribute('src', url);
+        } else {
+          const newNode = document.createElement('script');
+          newNode.setAttribute('src', url);
+          scriptNode.parentNode.insertBefore(newNode, scriptNode.nextSibling);
+        }
+        return serializeResult();
+      };
+
       const p5PreloadAddonNode = [
         ...dom.documentElement.querySelectorAll('script')
       ].find((s) => s.getAttribute('src') === p5PreloadAddonURL);
@@ -242,6 +259,8 @@ export function useP5Version() {
         replaceVersion,
         p5Sound: !!p5SoundNode,
         setP5Sound,
+        setP5SoundURL,
+        p5SoundURL: p5SoundNode?.getAttribute('src'),
         p5PreloadAddon: !!p5PreloadAddonNode,
         setP5PreloadAddon,
         p5ShapesAdddon: !!p5ShapesAddonNode,

client/styles/components/_preferences.scss

@@ -174,6 +174,7 @@ input[type="number"]::-webkit-outer-spin-button {
 .preference__options {
   display: flex;
   justify-content: center;
+  align-items: center;
 }
 
 .preference__radio-button:checked + .preference__option {

translations/locales/en-US/translations.json

@@ -219,7 +219,8 @@
     "CustomVersionReset": "If you do want to use the default libraries, you can replace your script tags in index.html to the following:",
     "SoundAddon": "p5.sound.js Addon",
     "PreloadAddon": "p5.js 2.0 Addon - Preload",
-    "ShapesAddon": "p5.js 2.0 Addon - Shapes"
+    "ShapesAddon": "p5.js 2.0 Addon - Shapes",
+    "UndoSoundVersion": "Put back previous p5.sound.js version"
   },
   "KeyboardShortcuts": {
     "Title": " Keyboard Shortcuts",