restored

website/src/repl/Repl.jsx

@@ -34,7 +34,7 @@ import Loader from './Loader';
 import { Panel } from './panel/Panel';
 import { useStore } from '@nanostores/react';
 import { prebake } from './prebake.mjs';
-import { getRandomTune, initCode, loadModules, shareCode, ReplContext } from './util.mjs';
+import { getRandomTune, initCode, loadModules, shareCode, ReplContext, isUdels } from './util.mjs';
 import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon';
 import './Repl.css';
 import { setInterval, clearInterval } from 'worker-timers';
@@ -221,6 +221,7 @@ export function Repl({ embedded = false }) {
     handleEvaluate,
   };
 
+  const showPanel = !isEmbedded || isUdels();
   return (
     <ReplContext.Provider value={context}>
       <div className={cx('h-full flex flex-col relative')}>
@@ -246,12 +247,12 @@ export function Repl({ embedded = false }) {
               }
             }}
           ></section>
-          {panelPosition === 'right' && !isEmbedded && <Panel context={context} />}
+          {panelPosition === 'right' && showPanel && <Panel context={context} />}
         </div>
         {error && (
           <div className="text-red-500 p-4 bg-lineHighlight animate-pulse">{error.message || 'Unknown Error :-/'}</div>
         )}
-        {panelPosition === 'bottom' && !isEmbedded && <Panel context={context} />}
+        {panelPosition === 'bottom' && showPanel && <Panel context={context} />}
       </div>
     </ReplContext.Provider>
   );

website/src/repl/panel/PatternsTab.jsx

@@ -9,7 +9,7 @@ import {
 import { useMemo } from 'react';
 import { getMetadata } from '../../metadata_parser';
 import { useExamplePatterns } from '../useExamplePatterns';
-import { parseJSON } from '../util.mjs';
+import { parseJSON, isUdels } from '../util.mjs';
 import { ButtonGroup } from './Forms.jsx';
 import { settingsMap, useSettings } from '../../settings.mjs';
 
@@ -99,7 +99,7 @@ export function PatternsTab({ context }) {
   };
   const viewingPatternID = viewingPatternData?.id;
 
-  const autoResetPatternOnChange = !window.parent?.location.pathname.includes('oodles');
+  const autoResetPatternOnChange = !isUdels();
 
   return (
     <div className="px-4 w-full dark:text-white text-stone-900 space-y-2 pb-4 flex flex-col overflow-hidden max-h-full">

website/src/repl/panel/SettingsTab.jsx

@@ -1,12 +1,13 @@
 import { defaultSettings, settingsMap, useSettings } from '../../settings.mjs';
 import { themes } from '@strudel/codemirror';
+import { isUdels } from '../util.mjs';
 import { ButtonGroup } from './Forms.jsx';
 import { AudioDeviceSelector } from './AudioDeviceSelector.jsx';
 
-function Checkbox({ label, value, onChange }) {
+function Checkbox({ label, value, onChange, disabled = false }) {
   return (
     <label>
-      <input type="checkbox" checked={value} onChange={onChange} />
+      <input disabled={disabled} type="checkbox" checked={value} onChange={onChange} />
       {' ' + label}
     </label>
   );
@@ -96,7 +97,7 @@ export function SettingsTab({ started }) {
     panelPosition,
     audioDeviceName,
   } = useSettings();
-
+  const shouldAlwaysSync = isUdels();
   return (
     <div className="text-foreground p-4 space-y-4">
       {AudioContext.prototype.setSinkId != null && (
@@ -197,6 +198,7 @@ export function SettingsTab({ started }) {
               window.location.reload();
             }
           }}
+          disabled={shouldAlwaysSync}
           value={isSyncEnabled}
         />
       </FormItem>

website/src/repl/util.mjs

@@ -132,6 +132,10 @@ export async function shareCode(codeToShare) {
 
 export const ReplContext = createContext(null);
 
+export const isUdels = () => {
+  return window.parent?.location.pathname.includes('udels');
+};
+
 export const getAudioDevices = async () => {
   await navigator.mediaDevices.getUserMedia({ audio: true });
   let mediaDevices = await navigator.mediaDevices.enumerateDevices();