Paradise/tgui/packages/tgui-panel/audio/NowPlayingWidget.js

/**
 * @file
 * @copyright 2020 Aleksej Komarov
 * @license MIT
 */

import { useDispatch, useSelector } from 'tgui/backend';
import { Button, Flex, Knob } from 'tgui-core/components';
import { toFixed } from 'tgui-core/math';

import { useSettings } from '../settings';
import { selectAudio } from './selectors';

export const NowPlayingWidget = (props) => {
  const audio = useSelector(selectAudio);
  const dispatch = useDispatch();
  const settings = useSettings();
  const title = audio.meta?.title;
  return (
    <Flex align="center">
      {(audio.playing && (
        <>
          <Flex.Item shrink={0} mx={0.5} color="label">
            Now playing:
          </Flex.Item>
          <Flex.Item
            mx={0.5}
            grow={1}
            style={{
              whiteSpace: 'nowrap',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
            }}
          >
            {title || 'Unknown Track'}
          </Flex.Item>
        </>
      )) || (
        <Flex.Item grow={1} color="label">
          Nothing to play.
        </Flex.Item>
      )}
      {audio.playing && (
        <Flex.Item mx={0.5} fontSize="0.9em">
          <Button
            tooltip="Stop"
            icon="stop"
            onClick={() =>
              dispatch({
                type: 'audio/stopMusic',
              })
            }
          />
        </Flex.Item>
      )}
      <Flex.Item mx={0.5} fontSize="0.9em">
        <Knob
          minValue={0}
          maxValue={1}
          value={settings.adminMusicVolume}
          step={0.0025}
          stepPixelSize={1}
          format={(value) => toFixed(value * 100) + '%'}
          tickWhileDragging
          onChange={(e, value) =>
            settings.update({
              adminMusicVolume: value,
            })
          }
        />
      </Flex.Item>
    </Flex>
  );
};