Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Embed mode improvements #333

Merged
merged 3 commits into from
Dec 29, 2022
Merged

Embed mode improvements #333

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cf21c40
simplify embedded mode
felixroos Dec 29, 2022
a576523
simplify meltingsubmarine tune
felixroos Dec 29, 2022
26b8f93
roll back hh rhythm
felixroos Dec 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 4 additions & 4 deletions test/__snapshots__/tunes.test.mjs.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8127,10 +8127,10 @@ exports[`renders tunes > tune: loungeSponge 1`] = `

exports[`renders tunes > tune: meltingsubmarine 1`] = `
[
"[ (0/1 → 1/1) ⇝ 3/2 | s:bd speed:0.7519542165100574 ]",
"[ (3/4 → 1/1) ⇝ 3/2 | s:sd speed:0.7931522866332671 ]",
"[ 3/8 → 3/4 | s:hh speed:0.7285963821098448 ]",
"[ (3/4 → 1/1) ⇝ 9/8 | s:hh speed:0.77531205091027 ]",
"[ (0/1 → 1/1) ⇝ 3/2 | s:bd:5 speed:0.7519542165100574 ]",
"[ (3/4 → 1/1) ⇝ 3/2 | s:sd:1 speed:0.7931522866332671 ]",
"[ 3/8 → 3/4 | s:hh27 speed:0.7285963821098448 ]",
"[ (3/4 → 1/1) ⇝ 9/8 | s:hh27 speed:0.77531205091027 ]",
"[ (0/1 → 1/1) ⇝ 3/2 | n:33.129885541275144 decay:0.15 sustain:0 s:sawtooth gain:0.4 cutoff:3669.6267869262615 ]",
"[ (0/1 → 1/1) ⇝ 3/2 | n:33.17988554127514 decay:0.15 sustain:0 s:sawtooth gain:0.4 cutoff:3669.6267869262615 ]",
"[ (0/1 → 1/1) ⇝ 3/2 | n:55.129885541275144 s:sawtooth gain:0.16 cutoff:500 attack:1 ]",
Expand Down
14 changes: 14 additions & 0 deletions website/src/pages/embed.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
---
import HeadCommon from '../components/HeadCommon.astro';
import { Repl } from '../repl/Repl.jsx';
---

<html>
<head>
<HeadCommon />
<title>Strudel REPL</title>
</head>
<body>
<Repl client:only="react" embedded />
</body>
</html>
55 changes: 34 additions & 21 deletions website/src/repl/Header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import AcademicCapIcon from '@heroicons/react/20/solid/AcademicCapIcon';
import CommandLineIcon from '@heroicons/react/20/solid/CommandLineIcon';
import ArrowPathIcon from '@heroicons/react/20/solid/ArrowPathIcon';
import LinkIcon from '@heroicons/react/20/solid/LinkIcon';
import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon';
import SparklesIcon from '@heroicons/react/20/solid/SparklesIcon';
Expand All @@ -9,10 +9,9 @@ import React, { useContext } from 'react';
// import { ReplContext } from './Repl';
import './Repl.css';

const isEmbedded = window.location !== window.parent.location;

export function Header({ context }) {
const {
embedded,
started,
pending,
isDirty,
Expand All @@ -25,32 +24,37 @@ export function Header({ context }) {
isZen,
setIsZen,
} = context;
const isEmbedded = embedded || window.location !== window.parent.location;
// useContext(ReplContext)

return (
<header
id="header"
className={cx(
'py-1 flex-none w-full md:flex text-black justify-between z-[100] text-lg select-none sticky top-0',
!isZen && 'bg-header',
'py-1 flex-none w-full text-black justify-between z-[100] text-lg select-none sticky top-0',
!isZen && !isEmbedded && 'bg-header',
isEmbedded ? 'flex' : 'md:flex',
)}
>
<div className="px-4 flex space-x-2 pt-2 md:pt-0 select-none">
<div className="px-4 flex space-x-2 md:pt-0 select-none">
{/* <img
src={logo}
className={cx('Tidal-logo', isEmbedded ? 'w-8 h-8' : 'w-10 h-10', started && 'animate-pulse')} // 'bg-[#ffffff80] rounded-full'
alt="logo"
/> */}
<h1
onClick={() => {
if (isEmbedded) window.open(window.location.href.replace('embed', ''));
}}
className={cx(
isEmbedded ? 'text-l' : 'text-xl',
isEmbedded ? 'text-l cursor-pointer' : 'text-xl',
// 'bg-clip-text bg-gradient-to-r from-primary to-secondary text-transparent font-bold',
'text-white font-bold flex space-x-2 items-center',
)}
>
<div
className={cx('mt-[1px]', started && 'animate-spin', 'cursor-pointer')}
onClick={() => setIsZen((z) => !z)}
onClick={() => !isEmbedded && setIsZen((z) => !z)}
>
🌀
</div>
Expand All @@ -65,59 +69,68 @@ export function Header({ context }) {
<div className="flex max-w-full overflow-auto text-white ">
<button
onClick={handleTogglePlay}
title={started ? 'stop' : 'play'}
className={cx(!isEmbedded ? 'p-2' : 'px-2', 'hover:text-tertiary', !started && 'animate-pulse')}
>
{!pending ? (
<span className={cx('flex items-center space-x-1', isEmbedded ? 'w-16' : 'w-16')}>
{started ? <StopCircleIcon className="w-5 h-5" /> : <PlayCircleIcon className="w-5 h-5" />}
<span>{started ? 'stop' : 'play'}</span>
<span className={cx('flex items-center space-x-1', isEmbedded ? '' : 'w-16')}>
{started ? <StopCircleIcon className="w-6 h-6" /> : <PlayCircleIcon className="w-6 h-6" />}
{!isEmbedded && <span>{started ? 'stop' : 'play'}</span>}
</span>
) : (
<>loading...</>
)}
</button>
<button
onClick={handleUpdate}
title="update"
className={cx(
'flex items-center space-x-1',
!isEmbedded ? 'p-2' : 'px-2',
!isDirty || !activeCode ? 'opacity-50' : 'hover:text-tertiary',
)}
>
<CommandLineIcon className="w-5 h-5" />
<span>update</span>
{/* <CommandLineIcon className="w-6 h-6" /> */}
<ArrowPathIcon className="w-6 h-6" />
{!isEmbedded && <span>update</span>}
</button>
{!isEmbedded && (
<button className="hover:text-tertiary p-2 flex items-center space-x-1" onClick={handleShuffle}>
<SparklesIcon className="w-5 h-5" />
<button
title="shuffle"
className="hover:text-tertiary p-2 flex items-center space-x-1"
onClick={handleShuffle}
>
<SparklesIcon className="w-6 h-6" />
<span> shuffle</span>
</button>
)}
{!isEmbedded && (
<button
title="share"
className={cx(
'cursor-pointer hover:text-tertiary flex items-center space-x-1',
!isEmbedded ? 'p-2' : 'px-2',
)}
onClick={handleShare}
>
<LinkIcon className="w-5 h-5" />
<LinkIcon className="w-6 h-6" />
<span>share{lastShared && lastShared === (activeCode || code) ? 'd!' : ''}</span>
</button>
)}
{!isEmbedded && (
<a
title="learn"
href="./learn/getting-started"
className={cx('hover:text-tertiary flex items-center space-x-1', !isEmbedded ? 'p-2' : 'px-2')}
>
<AcademicCapIcon className="w-5 h-5" />
<AcademicCapIcon className="w-6 h-6" />
<span>learn</span>
</a>
)}
{isEmbedded && (
{/* {isEmbedded && (
<button className={cx('hover:text-tertiary px-2')}>
<a href={window.location.href} target="_blank" rel="noopener noreferrer" title="Open in REPL">
🚀 open
🚀
</a>
</button>
)}
Expand All @@ -130,10 +143,10 @@ export function Header({ context }) {
}}
title="Reset"
>
💔 reset
💔
</a>
</button>
)}
)} */}
</div>
)}
</header>
Expand Down
16 changes: 14 additions & 2 deletions website/src/repl/Repl.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import { Footer } from './Footer';
import { Header } from './Header';
import { prebake } from './prebake.mjs';
import * as tunes from './tunes.mjs';
import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon';

initAudioOnFirstClick();

Expand Down Expand Up @@ -101,7 +102,8 @@ const { code: randomTune, name } = getRandomTune();

export const ReplContext = createContext(null);

export function Repl() {
export function Repl({ embedded = false }) {
const isEmbedded = embedded || window.location !== window.parent.location;
const [view, setView] = useState(); // codemirror view
const [lastShared, setLastShared] = useState();
const [activeFooter, setActiveFooter] = useState('');
Expand Down Expand Up @@ -232,6 +234,7 @@ export function Repl() {
}
};
const context = {
embedded,
started,
pending,
isDirty,
Expand Down Expand Up @@ -269,7 +272,16 @@ export function Repl() {
{error && (
<div className="text-red-500 p-4 bg-lineblack animate-pulse">{error.message || 'Unknown Error :-/'}</div>
)}
<Footer context={context} />
{isEmbedded && !started && (
<button
onClick={() => handleTogglePlay()}
className="text-white text-2xl fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] z-[1000] m-auto p-4 bg-black rounded-md flex items-center space-x-2"
>
<PlayCircleIcon className="w-6 h-6" />
<span>play</span>
</button>
)}
{!isEmbedded && <Footer context={context} />}
</div>
</ReplContext.Provider>
);
Expand Down
8 changes: 2 additions & 6 deletions website/src/repl/tunes.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -518,13 +518,9 @@ export const festivalOfFingers3 = `// licensed with CC BY-NC-SA 4.0 https://crea

export const meltingsubmarine = `// licensed with CC BY-NC-SA 4.0 https://creativecommons.org/licenses/by-nc-sa/4.0/
// by Felix Roos
samples({
bd: ['bd/BT0AADA.wav','bd/BT0AAD0.wav','bd/BT0A0DA.wav','bd/BT0A0D3.wav','bd/BT0A0D0.wav','bd/BT0A0A7.wav'],
sd: ['sd/rytm-01-classic.wav','sd/rytm-00-hard.wav'],
hh: ['hh27/000_hh27closedhh.wav','hh/000_hh3closedhh.wav'],
}, 'github:tidalcycles/Dirt-Samples/master/');
await samples('github:tidalcycles/Dirt-Samples/master/')
stack(
s("bd,[~ <sd!3 sd(3,4,2)>],hh(3,4)") // drums
s("bd:5,[~ <sd:1!3 sd:1(3,4,2)>],hh27(3,4)") // drums
.speed(perlin.range(.7,.9)) // random sample speed variation
//.hush()
,"<a1 b1*2 a1(3,8) e2>" // bassline
Expand Down