All files / src/components/music SongGridHeaderCell.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { useCallback } from "react";
import API from "renderer/lib/api";
import styled, { css } from "styled-components";
import { Button } from "ui/buttons/Button";
import { AudioOffIcon, AudioOnIcon } from "ui/icons/Icons";
 
interface SongGridHeaderCellProps {
  channel?: number;
  size?: "normal" | "small";
  children?: React.ReactNode;
  muted?: boolean;
}
 
interface WrapperProps {
  $size?: "normal" | "small";
}
const Wrapper = styled.span<WrapperProps>`
  display: inline-block;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  color: ${(props) => props.theme.colors.tracker.text};
  background: ${(props) => props.theme.colors.tracker.background};
  border-width: 0 1px 0 0;
  border-color: ${(props) => props.theme.colors.tracker.border};
  border-style: solid;
  margin: 0;
  padding: 4px 4px 4px 2px;
  height: 20px;
  ${(props) =>
    props.$size === "small"
      ? css`
          width: 40px;
        `
      : css`
          width: 126px;
        `}
`;
 
export const SongGridHeaderCell = ({
  size,
  children,
  channel,
  muted,
}: SongGridHeaderCellProps) => {
  const setMute = useCallback(() => {
    Iif (channel === undefined) {
      return;
    }
    API.music.sendToMusicWindow({
      action: "set-mute",
      channel: channel,
      muted: !muted,
    });
  }, [muted, channel]);
 
  return (
    <Wrapper $size={size}>
      {channel !== undefined ? (
        <Button variant="transparent" size="small" onClick={setMute}>
          {muted ? <AudioOffIcon /> : <AudioOnIcon />}
        </Button>
      ) : (
        ""
      )}
      <span style={{ paddingLeft: 10 }} onClick={setMute}>
        {children}
      </span>
    </Wrapper>
  );
};