- ![]()
{ e.preventDefault(); }}
- src={this.getTrackThumbnail(value)}
- style={{ width: 48, height: 48, margin: 8, borderRadius: 4 }} />
+ (!compactVertical ?
+ (
+ ) : (
+
-
- {this.getTrackTitle(value)}
-
-
- {value.metadata?.album ?? "#error"}
+ ![]()
{ e.preventDefault(); }}
+ src={this.getTrackThumbnail(value)}
+ style={{ width: 48, height: 48, margin: 8, borderRadius: 4 }} />
+
-
+
+ {this.getTrackTitle(value)}
+
+
+ {this.getAlbumTitle(value)}
-
+
+
+ ![]()
{ e.preventDefault(); }}
+ src={this.getTrackThumbnail(value)}
+ style={{ width: 24, height: 24, margin: 8, borderRadius: 4 }} />
+
+ )
) : (
+
+ {this.getCompactTrackTitle(value)}
+
+
+
- {this.getIcon(value)}
+ {this.getIcon(value, this.isTracksDirectory() && !compactVertical)}
{displayValue}
)}
diff --git a/vite/src/pipedal/FileUtils.tsx b/vite/src/pipedal/FileUtils.tsx
new file mode 100644
index 0000000..a1bf1c1
--- /dev/null
+++ b/vite/src/pipedal/FileUtils.tsx
@@ -0,0 +1,80 @@
+/*
+ * Copyright (c) 2025 Robin E. R. Davies
+ * All rights reserved.
+
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+
+export function pathExtension(path: string) {
+ let dotPos = path.lastIndexOf('.');
+ if (dotPos === -1) return "";
+
+ let slashPos = path.lastIndexOf('/');
+ if (slashPos !== -1) {
+ if (dotPos <= slashPos + 1) return "";
+ }
+ return path.substring(dotPos); // include the '.'.
+
+}
+export function pathParentDirectory(path: string) {
+ let npos = path.lastIndexOf('/');
+ if (npos === -1) return "";
+ return path.substring(0, npos);
+}
+export function pathConcat(left: string, right: string) {
+ if (left === "") return right;
+ if (right === "") return left;
+ if (left.endsWith('/')) {
+ left = left.substring(0, left.length - 1);
+ }
+ if (right.startsWith("/")) {
+ right = right.substring(1);
+ }
+ return left + "/" + right;
+}
+export function pathFileNameOnly(path: string): string {
+ if (path === "..") return path;
+ let slashPos = path.lastIndexOf('/');
+ if (slashPos < 0) {
+ slashPos = 0;
+ } else {
+ ++slashPos;
+ }
+ let extPos = path.lastIndexOf('.');
+ if (extPos < 0 || extPos < slashPos) {
+ extPos = path.length;
+ }
+
+ return path.substring(slashPos, extPos);
+}
+
+export function pathFileName(path: string): string {
+ if (path === "..") return path;
+ let slashPos = path.lastIndexOf('/');
+ if (slashPos < 0) {
+ slashPos = 0;
+ } else {
+ ++slashPos;
+ }
+ return path.substring(slashPos);
+}
+
+
+
diff --git a/vite/src/pipedal/LoopDialog.tsx b/vite/src/pipedal/LoopDialog.tsx
new file mode 100644
index 0000000..a177ac2
--- /dev/null
+++ b/vite/src/pipedal/LoopDialog.tsx
@@ -0,0 +1,630 @@
+/*
+ * Copyright (c) 2025 Robin E. R. Davies
+ * All rights reserved.
+
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { SyntheticEvent, useEffect } from "react";
+import FormGroup from "@mui/material/FormGroup";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import DialogContent from "@mui/material/DialogContent";
+import TextField, { StandardTextFieldProps } from "@mui/material/TextField";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogEx from "./DialogEx";
+import Toolbar from "@mui/material/Toolbar";
+import IconButton from "@mui/material/IconButton";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import Typography from "@mui/material/Typography";
+import Slider, { SliderProps } from "@mui/material/Slider";
+import Checkbox from "@mui/material/Checkbox";
+import TimebaseSelectorDialog from "./TimebaseselectorDialog";
+import Timebase, { TimebaseUnits } from "./Timebase";
+
+export interface LoopDialogProps {
+ isOpen: boolean;
+ onClose: () => void;
+ onSetLoop: (start: number, loopEnable: boolean, loopStart: number, loopEnd: number) => void;
+ start: number;
+ loopEnable: boolean;
+ loopStart: number;
+ loopEnd: number;
+ duration: number;
+ fullScreen?: boolean;
+ timebase: Timebase;
+ onTimebaseChange: (timebase: Timebase) => void; // Optional callback for timebase changes
+ sampleRate: number;
+
+};
+
+
+interface TimeEditProps extends StandardTextFieldProps {
+ timebase: Timebase;
+ sampleRate: number;
+ value: number;
+ onValueChange?: (e: React.ChangeEvent
+
+ Start
+
+ {
+ let val = Array.isArray(v) ? v[0] : v
+
+ if (props.onSetLoop) {
+ props.onSetLoop(val, props.loopEnable, props.loopStart, props.loopEnd);
+ }
+ }}
+ onPreview={(e, v, thumb) => {
+ let val = Array.isArray(v) ? v[0] : v
+
+ setPreviewStartValue(val);
+ }}
+ onCommitPreviewValue={(e, v, thumb) => {
+ let val = Array.isArray(v) ? v[0] : v
+
+ setPreviewStartValue(null);
+ if (props.onSetLoop) {
+ props.onSetLoop(val, props.loopEnable, props.loopStart, props.loopEnd);
+ }
+ }}
+ valueLabelFormat={(v) => formatTime(props.timebase, props.sampleRate, v)}
+ />
+
+ {
+ let t = props.start;
+ if (t > props.duration) {
+ t = props.duration;
+ if (props.onSetLoop) {
+ props.onSetLoop(t, props.loopEnable, props.loopStart, props.loopEnd);
+ }
+ }
+ }}
+ onValueChange={(e, val) => {
+ if (props.onSetLoop) {
+ props.onSetLoop(val, props.loopEnable, props.loopStart, props.loopEnd);
+ }
+ }
+ }
+ style={{ width: 120, alignSelf: "center", textAlign: "center" }} />
+
+ {
+ props.onSetLoop(props.start, !props.loopEnable, props.loopStart, props.loopEnd);
+ }}
+
+ />} label="Enable loop" />
+
+
+ {
+ if (!Array.isArray(v)) throw new Error("Expected array for loop start and end preview");
+ if (props.onSetLoop) {
+ props.onSetLoop(props.start, props.loopEnable, v[0], v[1]);
+ }
+ }}
+ onPreview={(e, v, thumb) => {
+ if (!Array.isArray(v)) throw new Error("Expected array for loop start and end preview");
+ setPreviewLoopStart(v[0]);
+ setPreviewLoopEnd(v[1]);
+ }}
+ onCommitPreviewValue={(e, v, thumb) => {
+ if (!Array.isArray(v)) throw new Error("Expected array for loop start and end preview");
+ setPreviewLoopStart(null);
+ setPreviewLoopEnd(null);
+ props.onSetLoop(props.start, props.loopEnable, v[0], v[1]);
+ }}
+
+ />
+
+
+
+ {
+ let tStart = props.loopStart;
+ if (tStart > props.duration) {
+ tStart = props.duration;
+ }
+ let tEnd = props.loopEnd;
+ if (tStart > tEnd) {
+ let t = tStart;
+ tStart = tEnd;
+ tEnd = t;
+ if (props.onSetLoop) {
+ props.onSetLoop(props.start, props.loopEnable, tStart, tEnd);
+ }
+
+ }
+ }}
+ onValueChange={(e, val) => {
+ if (props.onSetLoop) {
+ props.onSetLoop(props.start, props.loopEnable, val, props.loopEnd);
+ }
+ }}
+ />
+ {
+ let tStart = props.loopStart;
+ let tEnd = props.loopEnd;;
+ if (tEnd < tStart) {
+ let t = tEnd;
+ tEnd = tStart;
+ tStart = t;
+ if (props.onSetLoop) {
+ props.onSetLoop(props.start, props.loopEnable, tStart, tEnd);
+ }
+ }
+ }}
+ onValueChange={(e, val) => {
+ if (props.onSetLoop) {
+ props.onSetLoop(props.start, props.loopEnable, props.loopStart, val);
+ }
+ }}
+ />
+
+
+
+ Units
+
+
+
+
+
+
+ Tempo (BPM)
+
+ parseFloat(value)}
+ min={10}
+ max={400}
+ step={1}
+ onValueChange={handleTempoChange}
+ value={editingTimebase.tempo}
+ disabled={!enableBeatControls}
+
+ variant="standard"
+ type="number"
+ style={{ width: 120, }}
+ />
+
+ Time Signature
+
+
+
+
+ parseInt(value)}
+ min={1}
+ max={32}
+ step={1}
+ onValueChange={(value) => handleTimeSignatureChange('numerator', value)}
+ value={editingTimebase.timeSignature.numerator}
+ style={{ width: 80 }}
+ variant="standard"
+ type="number"
+ disabled={!enableBeatControls}
+ />
+ /
+
+
+
+
- {
+ setTimebase(newTimebase);
+ // model.setPatchProperty(
+ // props.instanceId,
+ // "timebase",
+ // newTimebase
+ // );
+ }}
+
+ onClose={() => {
+ setShowLoopDialog(false);
+ }}
+ onSetLoop={(start, loopEnable,loopStart, loopEnd) => {
+
+ let loop: LoopParameters = { start: start,
+ loopEnable: loopEnable,
+ loopStart: loopStart,
+ loopEnd: loopEnd };
+
+ let loopSettings = {
+ timebase: timebase,
+ loopParameters: loop
+ };
+ model.setPatchProperty(
+ props.instanceId,
+ "http://two-play.com/plugins/toob-player#loopSettings",
+ loopSettings.toString());
+
+ setStart(start);
+ // model.setPedalboardControl(
+ // props.instanceId,
+ // "start",
+ // start);
+ setLoopEnable(loopEnable);
+ // model.setPedalboardControl(
+ // props.instanceId,
+ // "loopEnable",
+ // loopEnable? 1.0: 0.0);
+ setLoopStart(loopStart);
+ // model.setPedalboardControl(
+ // props.instanceId,
+ // "loopStart",
+ // loopStart);
+ setLoopEnd(loopEnd);
+ // model.setPedalboardControl(
+ // props.instanceId,
+ // "loopEnd",
+ // loopEnd
+ // );
+ }}
+ start={start}
+ loopStart={loopStart}
+ loopEnable={loopEnable}
+ loopEnd={loopEnd}
+ duration={duration}
+ />
+ )}
{showFileDialog && (