All files / src/components/music/toolbar SongEditorRightToolsPanel.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { useMemo } from "react";
import styled, { css } from "styled-components";
import { ChannelSelectField } from "./ChannelSelectField";
import { StyledButton } from "ui/buttons/style";
 
interface SongEditorRightToolsPanelProps {
  channelStatus: boolean[];
  size?: "small" | "medium";
}
 
interface WrapperProps {
  $size?: "small" | "medium";
}
 
const Wrapper = styled.div<WrapperProps>`
  position: absolute;
  top: 0px;
  right: 4px;
  z-index: 10;
  display: flex;
 
  background: ${(props) => props.theme.colors.background};
  ${(props) =>
    props.$size === "small"
      ? css`
          ${ChannelSelectGroup} {
            gap: 3px;
          }
          ${ChannelSelectGroup} ${StyledButton} {
            min-width: 10px;
          }
        `
      : ""}
  height: 60px;
  align-items: center;
`;
 
const ChannelSelectGroup = styled.div`
  display: flex;
  flex-direction: row;
  gap: 5px;
`;
 
const SongEditorRightToolsPanel = ({
  channelStatus,
  size,
}: SongEditorRightToolsPanelProps) => {
  const soloChannel = useMemo(() => {
    const firstUnmuted = channelStatus.findIndex((x) => !x);
    const lastUnmuted = channelStatus.findLastIndex((x) => !x);
    Iif (firstUnmuted !== -1 && firstUnmuted === lastUnmuted) {
      return firstUnmuted;
    }
    return -1;
  }, [channelStatus]);
 
  return (
    <Wrapper $size={size}>
      <ChannelSelectGroup>
        <ChannelSelectField
          name="channelDuty1"
          label="Duty 1"
          shortLabel="D1"
          title="Duty 1"
          index={0}
          muted={channelStatus[0] && soloChannel === -1}
          solo={soloChannel === 0}
          size={size}
        />
        <ChannelSelectField
          name="channelDuty2"
          label="Duty 2"
          shortLabel="D2"
          title="Duty 2"
          index={1}
          muted={channelStatus[1] && soloChannel === -1}
          solo={soloChannel === 1}
          size={size}
        />
        <ChannelSelectField
          name="channelWave"
          label="Wave"
          shortLabel="W"
          title="Wave"
          index={2}
          muted={channelStatus[2] && soloChannel === -1}
          solo={soloChannel === 2}
          size={size}
        />
        <ChannelSelectField
          name="channelNoise"
          label="Noise"
          shortLabel="N"
          title="Noise"
          index={3}
          muted={channelStatus[3] && soloChannel === -1}
          solo={soloChannel === 3}
          size={size}
        />
      </ChannelSelectGroup>
    </Wrapper>
  );
};
 
export default SongEditorRightToolsPanel;