Skip to content

Commit ef992ba

Browse files
raclimraclim
authored
Merge pull request #3522 from davepagurek/p5-sound-toggle
Update p5.sound toggle behaviour
2 parents 2b875c2 + 1478bc1 commit ef992ba

File tree

8 files changed

+214
-185
lines changed

8 files changed

+214
-185
lines changed

‎Dockerfile

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ COPY .babelrc index.js nodemon.json ./
1414
COPY ./webpack ./webpack
1515
COPY client ./client
1616
COPY server ./server
17+
COPY common ./common
1718
COPY translations/locales ./translations/locales
1819
COPY public ./public
1920
CMD ["npm", "start"]

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

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,12 @@ import {
2121
setLinewrap,
2222
setPreferencesTab
2323
} from '../../actions/preferences';
24-
import { p5SoundURL, p5URL, useP5Version } from '../../hooks/useP5Version';
24+
import {
25+
majorVersion,
26+
p5SoundURL,
27+
p5URL,
28+
useP5Version
29+
} from '../../hooks/useP5Version';
2530
import VersionPicker from '../VersionPicker';
2631
import { updateFileContent } from '../../actions/files';
2732
import { CmControllerContext } from '../../pages/IDEView';
@@ -55,7 +60,7 @@ export default function Preferences() {
5560
const timerRef = useRef(null);
5661
const pickerRef = useRef(null);
5762
const onChangeVersion = (version) => {
58-
const shouldShowStars = version.startsWith('2.');
63+
const shouldShowStars = majorVersion(version) === '2';
5964
const box = pickerRef.current?.getBoundingClientRect();
6065
if (shouldShowStars) {
6166
setShowStars({ left: box?.left || 0, top: box?.top || 0 });
@@ -578,17 +583,7 @@ export default function Preferences() {
578583
<input
579584
type="radio"
580585
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-
}
586+
updateHTML(versionInfo.setP5Sound(true));
592587
}}
593588
aria-label={`${t('Preferences.SoundAddon')} ${t(
594589
'Preferences.AddonOn'
@@ -605,12 +600,6 @@ export default function Preferences() {
605600
<input
606601
type="radio"
607602
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-
}
614603
updateHTML(versionInfo.setP5Sound(false));
615604
}}
616605
aria-label={`${t('Preferences.SoundAddon')} ${t(
@@ -628,11 +617,20 @@ export default function Preferences() {
628617
>
629618
{t('Preferences.Off')}
630619
</label>
631-
{versionInfo.lastP5SoundURL && (
632-
<legend className="preference__warning">
633-
{t('Preferences.UndoSoundVersion')}
634-
</legend>
635-
)}
620+
<legend className="preference__warning">
621+
<a
622+
target="_blank"
623+
rel="noreferrer"
624+
href={`https://${
625+
versionInfo.isVersion2 ? 'beta.' : ''
626+
}p5js.org/reference/p5.sound`}
627+
>
628+
{t('Preferences.SoundReference').replace(
629+
'$VERSION',
630+
versionInfo.version
631+
)}
632+
</a>
633+
</legend>
636634
</fieldset>
637635
</div>
638636
<div className="preference">

‎client/modules/IDE/components/VersionPicker.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ import PropTypes from 'prop-types';
55
import styled from 'styled-components';
66

77
import { prop } from '../../../theme';
8-
import { useP5Version, p5Versions } from '../hooks/useP5Version';
8+
import { useP5Version } from '../hooks/useP5Version';
9+
import { p5Versions } from '../../../../common/p5Versions';
910
import MenuItem from '../../../components/Dropdown/MenuItem';
1011
import DropdownMenu from '../../../components/Dropdown/DropdownMenu';
1112
import { updateFileContent } from '../actions/files';

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

Lines changed: 38 additions & 155 deletions
Original file line numberDiff line numberDiff line change
@@ -1,150 +1,17 @@
11
/* eslint-disable func-names */
2-
import React, { useContext, useMemo, useState } from 'react';
2+
import React, { useContext, useMemo } from 'react';
33
import { useSelector } from 'react-redux';
44
import PropTypes from 'prop-types';
5+
import { currentP5Version, p5Versions } from '../../../../common/p5Versions';
56

6-
// Generated from https://www.npmjs.com/package/p5?activeTab=versions
7-
// Run this in the console:
8-
// JSON.stringify([...document.querySelectorAll('._132722c7')].map(n => n.innerText), null, 2)
9-
// TODO: use their API for this to grab these at build time?
10-
export const p5Versions = [
11-
'2.0.3',
12-
'2.0.2',
13-
'2.0.1',
14-
'2.0.0',
15-
'1.11.8',
16-
'1.11.7',
17-
'1.11.6',
18-
'1.11.5',
19-
'1.11.4',
20-
'1.11.3',
21-
'1.11.2',
22-
'1.11.1',
23-
'1.11.0',
24-
'1.10.0',
25-
'1.9.4',
26-
'1.9.3',
27-
'1.9.2',
28-
'1.9.1',
29-
'1.9.0',
30-
'1.8.0',
31-
'1.7.0',
32-
'1.6.0',
33-
'1.5.0',
34-
'1.4.2',
35-
'1.4.1',
36-
'1.4.0',
37-
'1.3.1',
38-
'1.3.0',
39-
'1.2.0',
40-
'1.1.9',
41-
'1.1.8',
42-
'1.1.7',
43-
'1.1.5',
44-
'1.1.4',
45-
'1.1.3',
46-
'1.1.2',
47-
'1.1.1',
48-
'1.1.0',
49-
'1.0.0',
50-
'0.10.2',
51-
'0.10.1',
52-
'0.10.0',
53-
'0.9.0',
54-
'0.8.0',
55-
'0.7.3',
56-
'0.7.2',
57-
'0.7.1',
58-
'0.7.0',
59-
'0.6.1',
60-
'0.6.0',
61-
'0.5.16',
62-
'0.5.15',
63-
'0.5.14',
64-
'0.5.13',
65-
'0.5.12',
66-
'0.5.11',
67-
'0.5.10',
68-
'0.5.9',
69-
'0.5.8',
70-
'0.5.7',
71-
'0.5.6',
72-
'0.5.5',
73-
'0.5.4',
74-
'0.5.3',
75-
'0.5.2',
76-
'0.5.1',
77-
'0.5.0',
78-
'0.4.24',
79-
'0.4.23',
80-
'0.4.22',
81-
'0.4.21',
82-
'0.4.20',
83-
'0.4.19',
84-
'0.4.18',
85-
'0.4.17',
86-
'0.4.16',
87-
'0.4.15',
88-
'0.4.14',
89-
'0.4.13',
90-
'0.4.12',
91-
'0.4.11',
92-
'0.4.10',
93-
'0.4.9',
94-
'0.4.8',
95-
'0.4.7',
96-
'0.4.6',
97-
'0.4.5',
98-
'0.4.4',
99-
'0.4.3',
100-
'0.4.2',
101-
'0.4.1',
102-
'0.4.0',
103-
'0.3.16',
104-
'0.3.15',
105-
'0.3.14',
106-
'0.3.13',
107-
'0.3.12',
108-
'0.3.11',
109-
'0.3.10',
110-
'0.3.9',
111-
'0.3.8',
112-
'0.3.7',
113-
'0.3.6',
114-
'0.3.5',
115-
'0.3.4',
116-
'0.3.3',
117-
'0.3.2',
118-
'0.3.1',
119-
'0.3.0',
120-
'0.2.23',
121-
'0.2.22',
122-
'0.2.21',
123-
'0.2.20',
124-
'0.2.19',
125-
'0.2.18',
126-
'0.2.17',
127-
'0.2.16',
128-
'0.2.15',
129-
'0.2.14',
130-
'0.2.13',
131-
'0.2.12',
132-
'0.2.11',
133-
'0.2.10',
134-
'0.2.9',
135-
'0.2.8',
136-
'0.2.7',
137-
'0.2.6',
138-
'0.2.5',
139-
'0.2.4',
140-
'0.2.3',
141-
'0.2.2',
142-
'0.2.1'
143-
];
7+
export const majorVersion = (version) => version.split('.')[0];
1448

145-
export const currentP5Version = '1.11.5'; // Don't update to 2.x until 2026
146-
147-
export const p5SoundURLOld = `https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/addons/p5.sound.min.js`;
9+
export const p5SoundURLOldTemplate =
10+
'https://cdnjs.cloudflare.com/ajax/libs/p5.js/$VERSION/addons/p5.sound.min.js';
11+
export const p5SoundURLOld = p5SoundURLOldTemplate.replace(
12+
'$VERSION',
13+
currentP5Version
14+
);
14815
export const p5SoundURL =
14916
'https://cdn.jsdelivr.net/npm/[email protected]/dist/p5.sound.min.js';
15017
export const p5PreloadAddonURL =
@@ -168,8 +35,6 @@ export function P5VersionProvider(props) {
16835
const indexSrc = indexFile?.content;
16936
const indexID = indexFile?.id;
17037

171-
const [lastP5SoundURL, setLastP5SoundURL] = useState(undefined);
172-
17338
// { version: string, minified: boolean, replaceVersion: (version: string) => string } | null
17439
const versionInfo = useMemo(() => {
17540
if (!indexSrc) return null;
@@ -207,14 +72,6 @@ export function P5VersionProvider(props) {
20772
// We only know for certain which one we've got if
20873
if (usedP5Versions.length === 1) {
20974
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-
};
21875

21976
const p5SoundNode = [
22077
...dom.documentElement.querySelectorAll('script')
@@ -232,7 +89,9 @@ export function P5VersionProvider(props) {
23289
const newNode = document.createElement('script');
23390
newNode.setAttribute(
23491
'src',
235-
version.startsWith('2') ? p5SoundURL : p5SoundURLOld
92+
majorVersion(version) === '2'
93+
? p5SoundURL
94+
: p5SoundURLOldTemplate.replace('$VERSION', version)
23695
);
23796
scriptNode.parentNode.insertBefore(newNode, scriptNode.nextSibling);
23897
}
@@ -250,6 +109,31 @@ export function P5VersionProvider(props) {
250109
return serializeResult();
251110
};
252111

112+
const replaceVersion = function (newVersion) {
113+
const file = minified ? 'p5.min.js' : 'p5.js';
114+
scriptNode.setAttribute(
115+
'src',
116+
`https://cdn.jsdelivr.net/npm/p5@${newVersion}/lib/${file}`
117+
);
118+
119+
if (p5SoundNode) {
120+
if (majorVersion(version) !== majorVersion(newVersion)) {
121+
// Turn off p5.sound if the user switched from 1.x to 2.x
122+
setP5Sound(false);
123+
} else {
124+
// Replace the existing p5.sound with the one compatible with
125+
// the new version
126+
setP5SoundURL(
127+
majorVersion(version) === '2'
128+
? p5SoundURL
129+
: p5SoundURLOldTemplate.replace('$VERSION', newVersion)
130+
);
131+
}
132+
}
133+
134+
return serializeResult();
135+
};
136+
253137
const p5PreloadAddonNode = [
254138
...dom.documentElement.querySelectorAll('script')
255139
].find((s) => s.getAttribute('src') === p5PreloadAddonURL);
@@ -294,14 +178,13 @@ export function P5VersionProvider(props) {
294178

295179
return {
296180
version,
181+
isVersion2: majorVersion(version) === '2',
297182
minified,
298183
replaceVersion,
299184
p5Sound: !!p5SoundNode,
300185
setP5Sound,
301186
setP5SoundURL,
302187
p5SoundURL: p5SoundNode?.getAttribute('src'),
303-
lastP5SoundURL,
304-
setLastP5SoundURL,
305188
p5PreloadAddon: !!p5PreloadAddonNode,
306189
setP5PreloadAddon,
307190
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

0 commit comments

Comments
 (0)