"use strict";

exports.__esModule = true;
exports.ThePlayer = ThePlayer;
exports.default = void 0;

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

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

var _useLoadingState = require("subfirelib/hooks/useLoadingState");

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

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

var _Queue = _interopRequireDefault(require("@material-ui/icons/Queue"));

var _PlayArrow = _interopRequireDefault(require("@material-ui/icons/PlayArrow"));

var _Shuffle = _interopRequireDefault(require("@material-ui/icons/Shuffle"));

var _Pause = _interopRequireDefault(require("@material-ui/icons/Pause"));

var _SkipPrevious = _interopRequireDefault(require("@material-ui/icons/SkipPrevious"));

var _SkipNext = _interopRequireDefault(require("@material-ui/icons/SkipNext"));

var _Replay = _interopRequireDefault(require("@material-ui/icons/Replay10"));

var _Forward = _interopRequireDefault(require("@material-ui/icons/Forward30"));

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");

var _reactUse = require("react-use");

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

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

const BookmarkButton = p => {
  const {
    onClick,
    bookmarkIcon,
    id,
    bookmarkForId,
    ...rest
  } = p;
  return /*#__PURE__*/_react.default.createElement(_IconButton.default, _extends({}, rest, {
    onClick: evt => onClick(evt, id, bookmarkForId(id))
  }), bookmarkIcon(p.id));
};

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: 'inherit', // 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,
    shuffleSongs
  } = (0, _hooks.useQueue)();
  const classes = useStyles();
  const onPlayPauseClick = state.paused ? controls.play : controls.pause;
  const playPauseContent = state.paused ? /*#__PURE__*/_react.default.createElement(_PlayArrow.default, null) : /*#__PURE__*/_react.default.createElement(_Pause.default, null);
  const {
    isLoggedIn,
    subsonic
  } = (0, _hooks.useSubsonic)();
  const [bookmarkLoading, setBookmarkLoading] = (0, _useLoadingState.useLoadingStateImpl)(); // impl - don't share this with other pages doing their own loading.

  const {
    deleteBookmark,
    createSubfireBookmark,
    bookmarkForId,
    bookmarkIcon,
    savePlayQueue
  } = (0, _hooks.useBookmarks)({
    subsonic,
    isLoggedIn,
    loading: bookmarkLoading,
    setLoading: setBookmarkLoading,
    onePerRule: true
  });
  const [draggingTime, setDraggingTime] = (0, _react.useState)(0);

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

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

  const bookmarkClick = (evt, id, bookmark) => {
    console.log(id, bookmark);

    if (bookmark) {
      deleteBookmark(bookmark);
    } else {
      console.log('context', queue); // need json context here

      createSubfireBookmark(id, Math.trunc(state.time * 1000), queue.queueRule);
    }
  };

  const doSavePlayQueue = () => {
    savePlayQueue(queue || [], currentPlaying == null ? void 0 : currentPlaying.id, Math.trunc(state.time * 1000));
  };

  const components = {
    back10Button: /*#__PURE__*/_react.default.createElement(_IconButton.default, {
      title: "Back 10 seconds",
      className: classes.button,
      onClick: mediaSessionControls.seekbackward
    }, /*#__PURE__*/_react.default.createElement(_Replay.default, null)),
    skip30Button: /*#__PURE__*/_react.default.createElement(_IconButton.default, {
      title: "Skip 30 seconds",
      className: classes.button,
      onClick: mediaSessionControls.seekforward
    }, /*#__PURE__*/_react.default.createElement(_Forward.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 || 0,
      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(_SkipPrevious.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(_SkipNext.default, null)),
    skipAlbumButton: /*#__PURE__*/_react.default.createElement(_IconButton.default, {
      title: "Skip Album",
      className: classes.button,
      onClick: skipAlbum
    }, /*#__PURE__*/_react.default.createElement(_mdiMaterialUi.DebugStepOver, null)),
    bookmarkButton: /*#__PURE__*/_react.default.createElement(BookmarkButton, {
      id: currentPlaying == null ? void 0 : currentPlaying.id,
      bookmarkForId: bookmarkForId,
      bookmarkIcon: bookmarkIcon,
      title: "Bookmark",
      onClick: bookmarkClick
    }),
    shuffleQueueButton: /*#__PURE__*/_react.default.createElement(_IconButton.default, {
      title: "Save Play Queue",
      className: classes.button,
      onClick: shuffleSongs
    }, /*#__PURE__*/_react.default.createElement(_Shuffle.default, null)),
    playQueueButton: /*#__PURE__*/_react.default.createElement(_IconButton.default, {
      title: "Save Play Queue",
      className: classes.button,
      onClick: doSavePlayQueue
    }, /*#__PURE__*/_react.default.createElement(_Queue.default, 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",
      style: {
        color: 'inherit'
      },
      className: classes.button,
      volume: state.volume,
      setVolume: v => controls.volume(v)
    }),
    artwork: (size, ref, handler, className) => /*#__PURE__*/_react.default.createElement("img", {
      className: className,
      crossOrigin: "anonymous",
      onLoad: handler,
      ref: ref,
      src: currentPlaying.artwork,
      style: size ? {
        width: size,
        height: 'auto'
      } : {},
      alt: ""
    }),
    queuePosition: `${queue.idx + 1} / ${queue.queue.length}`,
    state
  };
  (0, _reactUse.useKey)('p', p => {
    const x = document.activeElement.tagName;

    if (x.toUpperCase() === 'INPUT') {// console.log('ignoring');
    } else {
      // console.log('pause/play toggle', state.paused);
      onPlayPauseClick();
    }
  }, {}, [onPlayPauseClick]); // dependent on this method

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

  return render(components, currentPlaying, queue);
}

var _default = ThePlayer;
exports.default = _default;