All files / src/components/music/tracker TrackerHeaderCell.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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { useCallback } from "react";
import API from "renderer/lib/api";
import { StyledTrackerHeaderCell } from "./style";
import { Button } from "ui/buttons/Button";
import { ButtonGroup } from "ui/buttons/ButtonGroup";
import trackerActions from "store/features/tracker/trackerActions";
import { useAppDispatch } from "store/hooks";
import l10n from "shared/lib/lang/l10n";
import { ChannelMuteIcon, ChannelSoloIcon } from "ui/icons/Icons";
 
interface TrackerHeaderCellProps {
  channel?: number;
  type: "channel" | "patternIndex" | "order";
  children?: React.ReactNode;
  muted?: boolean;
  solo?: boolean;
}
 
export const TrackerHeaderCell = ({
  type,
  children,
  muted,
  solo,
  channel,
}: TrackerHeaderCellProps) => {
  const dispatch = useAppDispatch();
 
  const onToggleMuteSolo = useCallback(
    (e: React.MouseEvent<HTMLDivElement>) => {
      Iif (channel === undefined) {
        return;
      }
      if (e.button === 0) {
        API.music.sendToMusicWindow({
          action: "set-mute",
          channel: channel,
          muted: !muted,
        });
      } else Iif (e.button === 2) {
        API.music.sendToMusicWindow({
          action: "set-solo",
          channel: channel,
          enabled: true,
        });
      }
    },
    [muted, channel],
  );
 
  const setMute = useCallback(
    (e: React.MouseEvent<HTMLButtonElement>) => {
      Iif (channel === undefined) {
        return;
      }
      e.preventDefault();
      e.stopPropagation();
      API.music.sendToMusicWindow({
        action: "set-mute",
        channel,
        muted: !muted,
      });
    },
    [muted, channel],
  );
 
  const setSolo = useCallback(
    (e: React.MouseEvent<HTMLButtonElement>) => {
      Iif (channel === undefined) {
        return;
      }
      e.preventDefault();
      e.stopPropagation();
      dispatch(trackerActions.setSelectedChannel(channel));
      API.music.sendToMusicWindow({
        action: "set-solo",
        channel,
        enabled: !solo,
      });
    },
    [dispatch, channel, solo],
  );
 
  // onMouseDown={setMute}
 
  return (
    <StyledTrackerHeaderCell
      $type={type}
      $muted={muted}
      $solo={solo}
      onMouseDown={onToggleMuteSolo}
    >
      <span>{children}</span>
      {type === "channel" && (
        <ButtonGroup>
          <Button
            size="small"
            onMouseDown={setSolo}
            title={l10n("FIELD_SOLO_CHANNEL")}
          >
            <ChannelSoloIcon />
          </Button>
          <Button
            size="small"
            onMouseDown={setMute}
            title={l10n("FIELD_MUTE_CHANNEL")}
          >
            <ChannelMuteIcon />
          </Button>
        </ButtonGroup>
      )}
    </StyledTrackerHeaderCell>
  );
};