- { editingSong &&
+ { model &&
}
@@ -42,23 +37,29 @@ export class MusicFieldEditor extends React.Component
{
- this.mostRecentValue = newSong;
+ model.restoreState(value);
+ }
}
protected onAssetNameChanged = (newName: string) => {
- this.setState({
- editingSong: {
- ...this.state.editingSong,
- meta: {
- ...this.state.editingSong.meta,
- displayName: newName
- }
- }
- })
+ const currentValue = this.state.model?.getCurrentValue();
+
+ if (currentValue) {
+ currentValue.meta.displayName = newName;
+ this.state.model!.updateValue(currentValue);
+ }
}
}
\ No newline at end of file
diff --git a/webapp/src/components/PianoRollFieldEditor.tsx b/webapp/src/components/PianoRollFieldEditor.tsx
index e6df37ebedd0..4b01b3a67602 100644
--- a/webapp/src/components/PianoRollFieldEditor.tsx
+++ b/webapp/src/components/PianoRollFieldEditor.tsx
@@ -1,8 +1,8 @@
import * as React from "react";
+import { PianoRoll, PianoRollModel } from "./pianoRoll/PianoRoll";
-import { FieldEditorComponent } from '../blocklyFieldView';
import { AssetEditorCore } from "./ImageFieldEditor";
-import { PianoRollFieldEditor } from "./pianoRoll/FieldEditor";
+import { fromPXTSong, toPXTSong } from "./pianoRoll/types";
interface PianoRollAssetEditorProps {
onDoneClicked: () => void;
@@ -10,41 +10,98 @@ interface PianoRollAssetEditorProps {
fieldEditorParams?: any;
}
-export class PianoRollAssetEditor extends React.Component implements AssetEditorCore {
- protected pianoRollFieldEditorRef: FieldEditorComponent;
+interface PianoRollEditorState {
+ model?: PianoRollModel;
+}
+
+
+export class PianoRollAssetEditor extends React.Component implements AssetEditorCore {
protected openedAsset: pxt.Song;
constructor(props: PianoRollAssetEditorProps) {
super(props);
- this.state = {
- editRef: 0
- }
+ this.state = {};
}
render() {
+ const { fieldEditorParams, onDoneClicked } = this.props;
+ const { model } = this.state;
+
return (
-
+ <>
+ {model &&
+
+ }
+
)
}
getAsset(): pxt.Song {
- return this.pianoRollFieldEditorRef?.getValue();
+ if (this.state.model) {
+ const { song, assetName } = this.state.model.getCurrentValue();
+ const pxtSong = toPXTSong(song);
+
+ const result: pxt.Song = {
+ ...this.openedAsset,
+ song: pxtSong
+ };
+
+ if (this.openedAsset?.meta || assetName) {
+ result.meta = {
+ ...(this.openedAsset?.meta || {}),
+ displayName: assetName
+ }
+ }
+
+ return result;
+ }
+
+ return this.openedAsset;
}
openAsset(value: pxt.Song) {
- if (this.pianoRollFieldEditorRef) {
- this.pianoRollFieldEditorRef.init(value, this.props.onDoneClicked);
+ this.openedAsset = value;
+
+ const song = fromPXTSong(value.song);
+ const newValue = {
+ song,
+ assetName: value.meta?.displayName,
+ selectedTrackIndex: 0
+ };
+
+ if (this.state.model) {
+ this.state.model.updateValue(newValue, { preserveUndo: false });
}
else {
- this.openedAsset = value;
+ this.setState({
+ model: new PianoRollModel(newValue)
+ });
}
}
openGalleryAsset(asset: pxt.Asset): void {
- // TODO
+ const pxtSong = pxt.cloneAsset(asset as pxt.Song);
+ pxt.assets.music.inflateSong(pxtSong.song);
+
+ const song = fromPXTSong(pxtSong.song);
+
+ // remap the track ids to be nice
+ for (let i = 0; i < song.tracks.length; i++) {
+ const track = song.tracks[i];
+ track.id = i + 1;
+ }
+
+ const currentValue = this.state.model!.getCurrentValue();
+ this.state.model!.updateValue({
+ ...currentValue,
+ song,
+ selectedTrackIndex: 0
+ }, { preserveUndo: true, pushUndo: true });
}
getJres(): string {
@@ -64,18 +121,18 @@ export class PianoRollAssetEditor extends React.Component) => {
- this.pianoRollFieldEditorRef = ref;
- if (this.openedAsset) {
- this.pianoRollFieldEditorRef?.init(this.openedAsset, this.props.onDoneClicked);
- this.openedAsset = undefined;
+ if (value) {
+ let model = this.state.model;
+ if (!model) {
+ model = new PianoRollModel();
+ this.setState({ model });
+ }
+
+ model.restoreState(value);
}
}
}
\ No newline at end of file
diff --git a/webapp/src/components/SongGallery.tsx b/webapp/src/components/SongGallery.tsx
new file mode 100644
index 000000000000..e23e9de9fd4e
--- /dev/null
+++ b/webapp/src/components/SongGallery.tsx
@@ -0,0 +1,114 @@
+import { useEffect, useMemo, useState } from "react";
+import { songToDataURI } from "../../../pxtblocks";
+import { Button } from "../../../react-common/components/controls/Button";
+import { FocusTrapRegion } from "../../../react-common/components/controls/FocusTrap";
+import { classList } from "../../../react-common/components/util";
+import { addPlaybackStateListener, removePlaybackStateListener, startPlaybackAsync, stopPlayback } from "./musicEditor/playback";
+
+interface SongGalleryProps {
+ items?: pxt.Asset[];
+ hidden: boolean;
+ onAssetSelected: (item: pxt.Asset) => void;
+ onEscape: () => void;
+}
+
+export const SongGallery = (props: SongGalleryProps) => {
+ const { items, hidden, onAssetSelected, onEscape } = props;
+
+ const [playingSong, setPlayingSong] = useState(null);
+
+ useEffect(() => {
+ const playbackStateListener = (state: "play" | "stop" | "loop") => {
+ if (state === "stop") {
+ setPlayingSong(null);
+ }
+ }
+
+ addPlaybackStateListener(playbackStateListener);
+ return () => {
+ removePlaybackStateListener(playbackStateListener);
+ }
+ }, []);
+
+ const onPlayClick = (song: pxt.assets.music.Song) => {
+ if (playingSong === song) {
+ stopPlayback();
+ setPlayingSong(null);
+ }
+ else {
+ startPlaybackAsync(song, false);
+ setPlayingSong(song);
+ }
+ };
+
+ return (
+
+ {!hidden && items?.map((item, index) =>
+ onAssetSelected(item)}
+ />
+ )}
+
+ );
+}
+
+interface SongGalleryItemProps {
+ asset: pxt.Asset;
+ selected: boolean;
+ isPlaying: boolean;
+ onClick: () => void;
+ onPlayClick: (song: pxt.assets.music.Song) => void;
+}
+
+const SongGalleryItem = (props: SongGalleryItemProps) => {
+ const { asset, selected, isPlaying, onClick, onPlayClick } = props;
+
+ const song = (asset as pxt.Song).song;
+
+ const previewUri = useMemo(() => {
+ return songToDataURI((asset as pxt.Song).song, 100, 32, false);
+ }, [asset.id]);
+
+ const handlePlayClick = () => {
+ onPlayClick(song);
+ };
+
+ const isTemporary = !!asset.meta.temporaryInfo;
+ const displayName = isTemporary ? lf("{id:song}Untitled") : (asset.meta?.displayName || asset.id.split(".").pop() || asset.id);
+
+ return (
+
+