All files / src/components/music ChannelSelectField.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
118
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { useCallback } from "react";
import trackerActions from "store/features/tracker/trackerActions";
import { Button } from "ui/buttons/Button";
import {
  AudioOffIcon,
  AudioOnIcon,
  EyeClosedIcon,
  EyeOpenIcon,
} from "ui/icons/Icons";
import styled from "styled-components";
import API from "renderer/lib/api";
import { useAppDispatch, useAppSelector } from "store/hooks";
 
interface ChannelSelectFieldProps {
  name: string;
  label: string;
  title: string;
  index: number;
  muted: boolean;
}
 
const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
`;
 
const ChannelButton = styled(Button)`
  flex-grow: 0;
  height: 22px;
  margin: 0 2px;
`;
 
const ActionGroup = styled.div`
  display: flex;
  flex-rirection: row;
 
  & > Button {
    padding: 0;
    flex-grow: 1;
  }
`;
 
export const ChannelSelectField = ({
  name,
  label,
  title,
  index,
  muted,
}: ChannelSelectFieldProps) => {
  const dispatch = useAppDispatch();
 
  const selectedChannel = useAppSelector(
    (state) => state.tracker.selectedChannel
  );
  const visibleChannels = useAppSelector(
    (state) => state.tracker.visibleChannels
  );
 
  const setSelectedChannel = useCallback(
    (channel: number) => () => {
      dispatch(trackerActions.setSelectedChannel(channel));
    },
    [dispatch]
  );
  const toggleVisibleChannel = useCallback(
    (channel: number) => () => {
      const newVisibleChannels = [...visibleChannels];
      const index = visibleChannels.indexOf(channel);
      if (index > -1) {
        newVisibleChannels.splice(index, 1);
      } else {
        newVisibleChannels.push(channel);
      }
      dispatch(trackerActions.setVisibleChannels(newVisibleChannels));
    },
    [dispatch, visibleChannels]
  );
 
  const setMute = useCallback(() => {
    API.music.sendToMusicWindow({
      action: "set-mute",
      channel: index,
      muted: !muted,
    });
  }, [muted, index]);
 
  return (
    <Wrapper>
      <ChannelButton
        name={name}
        title={title}
        variant={selectedChannel === index ? "primary" : "transparent"}
        size="medium"
        active={selectedChannel === index}
        onClick={setSelectedChannel(index)}
      >
        {label}
      </ChannelButton>
      <ActionGroup>
        <Button
          variant="transparent"
          size="small"
          onClick={toggleVisibleChannel(index)}
        >
          {visibleChannels.indexOf(index) > -1 ? (
            <EyeOpenIcon />
          ) : (
            <EyeClosedIcon />
          )}
        </Button>
        <Button variant="transparent" size="small" onClick={setMute}>
          {muted ? <AudioOffIcon /> : <AudioOnIcon />}
        </Button>
      </ActionGroup>
    </Wrapper>
  );
};