Skip to content

Commit 51642d5

Browse files
davepagurekdavepagurek
committed
Update p5.sound toggle behaviour
1 parent 85dc7ad commit 51642d5

File tree

4 files changed

+57
-39
lines changed

4 files changed

+57
-39
lines changed

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

Lines changed: 15 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -578,17 +578,7 @@ export default function Preferences() {
578578
<input
579579
type="radio"
580580
onChange={() => {
581-
if (versionInfo.lastP5SoundURL) {
582-
// If the sketch previously used a nonstandard p5.sound
583-
// URL, restore that URL
584-
updateHTML(
585-
versionInfo.setP5SoundURL(versionInfo.lastP5SoundURL)
586-
);
587-
versionInfo.setLastP5SoundURL(undefined);
588-
} else {
589-
// Otherwise, turn on the default p5.sound URL
590-
updateHTML(versionInfo.setP5Sound(true));
591-
}
581+
updateHTML(versionInfo.setP5Sound(true));
592582
}}
593583
aria-label={`${t('Preferences.SoundAddon')} ${t(
594584
'Preferences.AddonOn'
@@ -605,12 +595,6 @@ export default function Preferences() {
605595
<input
606596
type="radio"
607597
onChange={() => {
608-
// If the previous p5.sound.js script tag is not the
609-
// default version that one will get via this toggle,
610-
// record it so we can give the option to put it back
611-
if (versionInfo.p5SoundURL !== p5SoundURL) {
612-
versionInfo.setLastP5SoundURL(versionInfo.p5SoundURL);
613-
}
614598
updateHTML(versionInfo.setP5Sound(false));
615599
}}
616600
aria-label={`${t('Preferences.SoundAddon')} ${t(
@@ -628,11 +612,20 @@ export default function Preferences() {
628612
>
629613
{t('Preferences.Off')}
630614
</label>
631-
{versionInfo.lastP5SoundURL && (
632-
<legend className="preference__warning">
633-
{t('Preferences.UndoSoundVersion')}
634-
</legend>
635-
)}
615+
<legend className="preference__warning">
616+
<a
617+
target="_blank"
618+
rel="noreferrer"
619+
href={`https://${
620+
versionInfo.isVersion2 ? 'beta.' : ''
621+
}p5js.org/reference/p5.sound`}
622+
>
623+
{t('Preferences.SoundReference').replace(
624+
'$VERSION',
625+
versionInfo.version
626+
)}
627+
</a>
628+
</legend>
636629
</fieldset>
637630
</div>
638631
<div className="preference">

‎client/modules/IDE/hooks/useP5Version.jsx

Lines changed: 35 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,12 @@ export const p5Versions = [
144144

145145
export const currentP5Version = '1.11.5'; // Don't update to 2.x until 2026
146146

147-
export const p5SoundURLOld = `https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/addons/p5.sound.min.js`;
147+
export const p5SoundURLOldTemplate =
148+
'https://cdnjs.cloudflare.com/ajax/libs/p5.js/$VERSION/addons/p5.sound.min.js';
149+
export const p5SoundURLOld = p5SoundURLOldTemplate.replace(
150+
'$VERSION',
151+
'1.11.3'
152+
);
148153
export const p5SoundURL =
149154
'https://cdn.jsdelivr.net/npm/[email protected]/dist/p5.sound.min.js';
150155
export const p5PreloadAddonURL =
@@ -168,8 +173,6 @@ export function P5VersionProvider(props) {
168173
const indexSrc = indexFile?.content;
169174
const indexID = indexFile?.id;
170175

171-
const [lastP5SoundURL, setLastP5SoundURL] = useState(undefined);
172-
173176
// { version: string, minified: boolean, replaceVersion: (version: string) => string } | null
174177
const versionInfo = useMemo(() => {
175178
if (!indexSrc) return null;
@@ -207,14 +210,6 @@ export function P5VersionProvider(props) {
207210
// We only know for certain which one we've got if
208211
if (usedP5Versions.length === 1) {
209212
const { version, minified, scriptNode } = usedP5Versions[0];
210-
const replaceVersion = function (newVersion) {
211-
const file = minified ? 'p5.min.js' : 'p5.js';
212-
scriptNode.setAttribute(
213-
'src',
214-
`https://cdn.jsdelivr.net/npm/p5@${newVersion}/lib/${file}`
215-
);
216-
return serializeResult();
217-
};
218213

219214
const p5SoundNode = [
220215
...dom.documentElement.querySelectorAll('script')
@@ -232,7 +227,9 @@ export function P5VersionProvider(props) {
232227
const newNode = document.createElement('script');
233228
newNode.setAttribute(
234229
'src',
235-
version.startsWith('2') ? p5SoundURL : p5SoundURLOld
230+
version.startsWith('2')
231+
? p5SoundURL
232+
: p5SoundURLOldTemplate.replace('$VERSION', version)
236233
);
237234
scriptNode.parentNode.insertBefore(newNode, scriptNode.nextSibling);
238235
}
@@ -250,6 +247,31 @@ export function P5VersionProvider(props) {
250247
return serializeResult();
251248
};
252249

250+
const replaceVersion = function (newVersion) {
251+
const file = minified ? 'p5.min.js' : 'p5.js';
252+
scriptNode.setAttribute(
253+
'src',
254+
`https://cdn.jsdelivr.net/npm/p5@${newVersion}/lib/${file}`
255+
);
256+
257+
if (p5SoundNode) {
258+
if (version.startsWith('2.') !== newVersion.startsWith('2.')) {
259+
// Turn off p5.sound if the user switched from 1.x to 2.x
260+
setP5Sound(false);
261+
} else {
262+
// Replace the existing p5.sound with the one compatible with
263+
// the new version
264+
setP5SoundURL(
265+
version.startsWith('2.')
266+
? p5SoundURL
267+
: p5SoundURLOldTemplate.replace('$VERSION', newVersion)
268+
);
269+
}
270+
}
271+
272+
return serializeResult();
273+
};
274+
253275
const p5PreloadAddonNode = [
254276
...dom.documentElement.querySelectorAll('script')
255277
].find((s) => s.getAttribute('src') === p5PreloadAddonURL);
@@ -294,14 +316,13 @@ export function P5VersionProvider(props) {
294316

295317
return {
296318
version,
319+
isVersion2: version.startsWith('2.'),
297320
minified,
298321
replaceVersion,
299322
p5Sound: !!p5SoundNode,
300323
setP5Sound,
301324
setP5SoundURL,
302325
p5SoundURL: p5SoundNode?.getAttribute('src'),
303-
lastP5SoundURL,
304-
setLastP5SoundURL,
305326
p5PreloadAddon: !!p5PreloadAddonNode,
306327
setP5PreloadAddon,
307328
p5ShapesAddon: !!p5ShapesAddonNode,

‎client/styles/components/_preferences.scss

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -150,8 +150,12 @@
150150
.preference__warning {
151151
@include themify() {
152152
display: contents;
153-
font-weight: bold;
154-
color: getThemifyVariable("preferences-warning-color");
153+
& a {
154+
color: getThemifyVariable('button-background-hover-color');
155+
}
156+
& a:hover {
157+
text-decoration: underline;
158+
}
155159
}
156160
}
157161

‎translations/locales/en-US/translations.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -228,7 +228,7 @@
228228
"DataAddon": "p5.js 1.x Compatibility Add-on Library — Data Structures",
229229
"AddonOnARIA": "on",
230230
"AddonOffARIA": "off",
231-
"UndoSoundVersion": "Want to use p5.sound.js again? Turning it back on will restore the version you were using before.",
231+
"SoundReference": "View the reference for p5.sound compatible with p5.js $VERSION",
232232
"CopyToClipboardSuccess": "Copied to clipboard!",
233233
"CopyToClipboardFailure": "We weren't able to copy the text, try selecting it and copying it manually."
234234
},

0 commit comments

Comments
 (0)