All files / src/components/music/piano SongPianoRoll.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { useState, useRef, useEffect, useCallback } from "react";
import { Song } from "shared/lib/uge/types";
import { SplitPaneVerticalDivider } from "ui/splitpane/SplitPaneDivider";
import { SequenceEditor } from "components/music/SequenceEditor";
import { SplitPaneHeader } from "ui/splitpane/SplitPaneHeader";
import { MusicDataReceivePacket } from "shared/lib/music/types";
import { useAppSelector } from "store/hooks";
import { StyledPianoRollWrapper } from "./style";
import { PianoRollCanvas } from "./PianoRollCanvas";
import l10n from "shared/lib/lang/l10n";
import API from "renderer/lib/api";
 
interface SongPianoRollProps {
  sequenceId: number;
  song: Song | null;
  height: number;
}
 
export const SongPianoRoll = ({
  song,
  height,
  sequenceId,
}: SongPianoRollProps) => {
  const playing = useAppSelector((state) => state.tracker.playing);
  const startPlaybackPosition = useAppSelector(
    (state) => state.tracker.startPlaybackPosition,
  );
 
  const [playbackState, setPlaybackState] = useState([0, 0]);
 
  useEffect(() => {
    setPlaybackState(startPlaybackPosition);
  }, [setPlaybackState, startPlaybackPosition]);
 
  useEffect(() => {
    const listener = (_event: unknown, d: MusicDataReceivePacket) => {
      Iif (d.action === "update") {
        setPlaybackState(d.update);
      }
    };
    const unsubscribeMusicData = API.events.music.response.subscribe(listener);
    return () => {
      unsubscribeMusicData();
    };
  }, [setPlaybackState]);
 
  const playingRowRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    Iif (playingRowRef && playingRowRef.current) {
      Iif (playing) {
        playingRowRef.current.scrollIntoView({
          block: "nearest",
          inline: "center",
        });
      }
    }
  }, [playing, playbackState]);
 
  const [patternsPanelOpen, setPatternsPanelOpen] = useState(true);
  const togglePatternsPanel = useCallback(() => {
    setPatternsPanelOpen(!patternsPanelOpen);
  }, [patternsPanelOpen, setPatternsPanelOpen]);
 
  return (
    <StyledPianoRollWrapper style={{ height }}>
      {song && (
        <PianoRollCanvas
          song={song}
          sequenceId={sequenceId}
          playbackOrder={playbackState[0]}
          playbackRow={playbackState[1]}
        />
      )}
      <SplitPaneVerticalDivider />
      <SplitPaneHeader
        onToggle={togglePatternsPanel}
        collapsed={!patternsPanelOpen}
      >
        {l10n("FIELD_ORDER")}
      </SplitPaneHeader>
      {patternsPanelOpen && (
        <SequenceEditor
          direction="horizontal"
          sequence={song?.sequence}
          patterns={song?.patterns.length}
          playingSequence={playbackState[0]}
        />
      )}
    </StyledPianoRollWrapper>
  );
};