"use strict";

require("core-js/modules/web.dom-collections.iterator.js");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ThePlayer = ThePlayer;
exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

var _hooks = require("subfirelib/hooks");

var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));

var _Fab = _interopRequireDefault(require("@material-ui/core/Fab"));

var _PlayArrowTwoTone = _interopRequireDefault(require("@material-ui/icons/PlayArrowTwoTone"));

var _PauseTwoTone = _interopRequireDefault(require("@material-ui/icons/PauseTwoTone"));

var _SkipPreviousTwoTone = _interopRequireDefault(require("@material-ui/icons/SkipPreviousTwoTone"));

var _SkipNextTwoTone = _interopRequireDefault(require("@material-ui/icons/SkipNextTwoTone"));

var _Replay10TwoTone = _interopRequireDefault(require("@material-ui/icons/Replay10TwoTone"));

var _Forward30TwoTone = _interopRequireDefault(require("@material-ui/icons/Forward30TwoTone"));

var _mdiMaterialUi = require("mdi-material-ui");

var _Slider = _interopRequireDefault(require("@material-ui/core/Slider"));

var _styles = require("@material-ui/core/styles");

var _VolumeButton = _interopRequireDefault(require("subfirelib/ui/volume/VolumeButton"));

var _TG = require("subfirelib/ui/TG");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

const useStyles = (0, _styles.makeStyles)(theme => ({
  paper: {
    backgroundColor: theme.palette.secondary.main,
    transition: 'background 2s ease-in-out',
    color: theme.palette.secondary.contrastText,
    paddingTop: 5,
    paddingBottom: 5
  },
  paperDark: {
    backgroundColor: theme.palette.secondary.dark,
    transition: 'background 2s ease-in-out',
    color: theme.palette.secondary.contrastText,
    paddingTop: 5,
    paddingBottom: 5
  },
  grid: {
    backgroundColor: theme.palette.secondary.main,
    transition: 'background 2s ease-in-out',
    color: theme.palette.secondary.contrastText,
    paddingTop: 5,
    paddingBottom: 5
  },
  pad: {
    paddingLeft: 5,
    paddingRight: 5
  },
  button: {
    color: 'white',
    // theme.palette.secondary.contrastText,
    minWidth: 36
  },
  sliderwrap: {
    paddingLeft: 5,
    paddingRight: 5
  },
  slider: {
    width: 'calc(100% - 5px)',
    color: theme.palette.primary.main
  }
}));

function ThePlayer(props) {
  const {
    state = {},
    controls = {},
    marks = {},
    toHHMMSS = () => {},
    mediaSessionControls = {},
    currentPlaying = {}
  } = (0, _hooks.useSubsonicPlayer)();
  const {
    queue = {
      queue: [],
      idx: 0
    },
    // current,
    skipAlbum
  } = (0, _hooks.useQueue)();
  const classes = useStyles();
  const onPlayPauseClick = state.paused ? controls.play : controls.pause;
  const playPauseContent = state.paused ? /*#__PURE__*/_react.default.createElement(_PlayArrowTwoTone.default, null) : /*#__PURE__*/_react.default.createElement(_PauseTwoTone.default, null);
  const [draggingTime, setDraggingTime] = (0, _react.useState)(0);

  const sliderSeekTo = (evt, value) => {
    setDraggingTime(value);
  };

  const sliderLockTo = (evt, value) => {
    setDraggingTime(0);
    controls.seek(value);
  };

  const components = {
    back10Button: /*#__PURE__*/_react.default.createElement(_IconButton.default, {
      title: "Back 10 seconds",
      className: classes.button,
      onClick: mediaSessionControls.seekbackward
    }, /*#__PURE__*/_react.default.createElement(_Replay10TwoTone.default, null)),
    skip30Button: /*#__PURE__*/_react.default.createElement(_IconButton.default, {
      title: "Skip 30 seconds",
      className: classes.button,
      onClick: mediaSessionControls.seekforward
    }, /*#__PURE__*/_react.default.createElement(_Forward30TwoTone.default, null)),
    currentTime: toHHMMSS(draggingTime || state.time || 0),
    duration: toHHMMSS(state.duration || 0),
    slider: /*#__PURE__*/_react.default.createElement(_Slider.default, {
      className: classes.slider,
      min: 0,
      max: state.duration || 100,
      value: draggingTime || state.time,
      onChange: sliderSeekTo,
      onChangeCommitted: sliderLockTo,
      marks: marks
    }),
    prevButton: /*#__PURE__*/_react.default.createElement(_IconButton.default, {
      title: "Prev",
      className: classes.button,
      onClick: mediaSessionControls.previoustrack
    }, /*#__PURE__*/_react.default.createElement(_SkipPreviousTwoTone.default, null)),
    playPauseButton: /*#__PURE__*/_react.default.createElement(_Fab.default, {
      title: "Play/Pause",
      color: "primary",
      size: "small",
      onClick: onPlayPauseClick
    }, playPauseContent),
    nextButton: /*#__PURE__*/_react.default.createElement(_IconButton.default, {
      title: "Next",
      className: classes.button,
      onClick: mediaSessionControls.nexttrack
    }, /*#__PURE__*/_react.default.createElement(_SkipNextTwoTone.default, null)),
    skipAlbumButton: /*#__PURE__*/_react.default.createElement(_IconButton.default, {
      title: "Skip Album",
      className: classes.button,
      onClick: skipAlbum
    }, /*#__PURE__*/_react.default.createElement(_mdiMaterialUi.DebugStepOver, null)),
    volumeButtonAbove: /*#__PURE__*/_react.default.createElement(_VolumeButton.default, {
      placement: "above",
      title: "Volume",
      className: classes.button,
      volume: state.volume,
      setVolume: v => controls.volume(v)
    }),
    volumeButtonBelow: /*#__PURE__*/_react.default.createElement(_VolumeButton.default, {
      placement: "below",
      title: "Volume",
      className: classes.button,
      volume: state.volume,
      setVolume: v => controls.volume(v)
    }),
    artwork: (size, ref, handler) => /*#__PURE__*/_react.default.createElement("img", {
      crossOrigin: "anonymous",
      onLoad: handler,
      ref: ref,
      src: currentPlaying.artwork,
      style: {
        width: size,
        height: 'auto'
      },
      alt: ""
    }),
    queuePosition: "".concat(queue.idx + 1, " / ").concat(queue.queue.length),
    state
  };
  const c = components;

  const render = props.render || (() => /*#__PURE__*/_react.default.createElement(_TG.Tb2, null, "no render function"));

  return render(c, currentPlaying, queue);
}

var _default = ThePlayer;
exports.default = _default;