All files / src/apps/gbs-music-web/components MusicWebChannelsBar.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
115
116
117
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { useMemo } from "react";
import {
  StyledMobileToolbar,
  StyledMobileToolbarButton,
  StyledMobileToolbarDivider,
} from "gbs-music-web/components/ui/style";
import { channels } from "shared/lib/music/constants";
import styled from "styled-components";
import {
  SettingsIcon,
  FXIcon,
  Duty1Icon,
  Duty2Icon,
  Noise4Icon,
  Wave3Icon,
  ChannelSoloIcon,
  ChannelMuteIcon,
} from "ui/icons/Icons";
import { useAppSelector } from "store/hooks";
 
const StyledChannelIcon = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
 
  && svg {
    width: 20px;
    height: 20px;
  }
`;
 
const StyledChannelStatusIcon = styled.div`
  position: absolute;
  top: 2px;
  right: 2px;
  && svg {
    width: 12px;
    height: 12px;
    min-width: 12px;
    min-width: 12px;
    fill: ${(props) => props.theme.colors.highlight};
  }
`;
 
interface MusicWebChannelsBarProps {
  onOpenChannel: (channelId: 0 | 1 | 2 | 3) => void;
  onOpenFX: () => void;
  onOpenSettings: () => void;
}
 
export const MusicWebChannelsBar = ({
  onOpenChannel,
  onOpenFX,
  onOpenSettings,
}: MusicWebChannelsBarProps) => {
  const selectedChannel = useAppSelector(
    (state) => state.tracker.selectedChannel,
  );
  const selectedPatternCellsLength = useAppSelector(
    (state) => state.tracker.selectedPatternCells.length,
  );
 
  const channelStatus = useAppSelector((state) => state.tracker.channelStatus);
 
  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 (
    <StyledMobileToolbar>
      {channels.map((channel) => (
        <StyledMobileToolbarButton
          $isActive={selectedChannel === channel.index}
          onClick={() => {
            onOpenChannel(channel.index);
          }}
        >
          <StyledChannelIcon>
            {channel.index === 0 && <Duty1Icon />}
            {channel.index === 1 && <Duty2Icon />}
            {channel.index === 2 && <Wave3Icon />}
            {channel.index === 3 && <Noise4Icon />}
          </StyledChannelIcon>
          {channel.index === soloChannel && (
            <StyledChannelStatusIcon>
              <ChannelSoloIcon />
            </StyledChannelStatusIcon>
          )}
          {!!(soloChannel === -1 && channelStatus[channel.index]) && (
            <StyledChannelStatusIcon>
              <ChannelMuteIcon />
            </StyledChannelStatusIcon>
          )}
        </StyledMobileToolbarButton>
      ))}
 
      <StyledMobileToolbarDivider />
 
      <StyledMobileToolbarButton
        $isAvailable={selectedPatternCellsLength > 0}
        onClick={selectedPatternCellsLength > 0 ? onOpenFX : undefined}
      >
        <FXIcon />
      </StyledMobileToolbarButton>
 
      <StyledMobileToolbarButton onClick={onOpenSettings}>
        <SettingsIcon />
      </StyledMobileToolbarButton>
    </StyledMobileToolbar>
  );
};