"use strict";

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

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

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

var _reactRouterDom = require("react-router-dom");

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

var _classnames = _interopRequireDefault(require("classnames"));

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

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

var _Eject = _interopRequireDefault(require("@material-ui/icons/Eject"));

var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));

var _AppBar = _interopRequireDefault(require("@material-ui/core/AppBar"));

var _Toolbar = _interopRequireDefault(require("@material-ui/core/Toolbar"));

var _FormatListBulleted = _interopRequireDefault(require("@material-ui/icons/FormatListBulleted"));

var _SwipeableDrawer = _interopRequireDefault(require("@material-ui/core/SwipeableDrawer"));

var _CurrentSongList = _interopRequireDefault(require("subfirelib/browsers/songs/CurrentSongList"));

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

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; }

/* eslint react/prop-types: 0 */
const useStyles = (0, _styles.makeStyles)(theme => ({
  portratPlayer: {
    display: 'flex',
    position: 'fixed',
    top: 72,
    height: 'calc(100% - 56px)',
    flexDirection: 'column'
  },
  appbar: {},
  flex: {
    flex: 1,
    color: 'inherit'
  },
  grid: {
    flex: '0 1 auto'
  },
  title: {
    color: 'inherit'
  },
  list: {
    position: 'relative',
    overflow: 'auto'
  },
  closeButton: {
    backgroundColor: '#000000'
  },
  songListItem: {
    maxWidth: 352
  },
  selectedSongListItem: {
    maxWidth: 352,
    fontStyle: 'italic',
    marginLeft: 10
  },
  secondaryActionButtonsCentered: {
    width: '100%',
    display: 'flex',
    justifyContent: 'space-evenly',
    background: theme.palette.secondary.main,
    color: theme.palette.secondary.contrastText
  },
  actionButtons: {
    position: 'absolute',
    width: '80%',
    left: '10%',
    bottom: theme.spacing(5),
    display: 'flex',
    justifyContent: 'space-evenly',
    flex: '0 0 auto'
  },
  actionButtonsLeft: {
    position: 'absolute',
    width: '80%',
    left: '3%',
    bottom: theme.spacing(5),
    display: 'flex',
    justifyContent: 'start',
    flex: '0 0 auto'
  },
  left: {
    display: 'block'
  },
  right: {
    display: 'block',
    textAlign: 'right'
  },
  songList: {
    width: '85vw',
    maxWidth: '85vw'
  }
}));

function PortraitPlayer(props) {
  const [slideLeft, setSlideLeft] = (0, _react.useState)(false);
  const [playlistOpen, setPlaylistOpen] = (0, _react.useState)(false); // eslint-disable-line

  const windowSize = (0, _reactUse.useWindowSize)();
  const imageRef = (0, _react.useRef)();
  const {
    setImageTag
  } = (0, _hooks.useImageColorTheme)();
  const currentImageTag = imageRef.current;
  const {
    components: c,
    currentPlaying: cp,
    queue: q
  } = props;
  const history = (0, _reactRouterDom.useHistory)();
  const classes = useStyles();

  const goBack = () => history.goBack();

  const handleDrawer = () => setPlaylistOpen(true);

  const handleClose = () => setPlaylistOpen(false);

  const toggleSlideLeft = () => setSlideLeft(slideLeft => !slideLeft);
  /*           <CastSubsonic {...subProps}>
              <ChromecastButton {...subProps} />
            </CastSubsonic>
            <RemoteReceiverToggleButton {...subProps} />
  */


  const coverSize = windowSize.width - 32;

  const imageLoadHandler = evt => {
    if (setImageTag) {
      setImageTag({
        tag: currentImageTag
      });
    }
  };

  const portraitLayout = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TG.B, {
    alignItems: "center",
    justifyContent: "center",
    style: {
      width: '100vw'
    }
  }, /*#__PURE__*/_react.default.createElement(_Paper.default, {
    elevation: 4,
    square: true,
    style: {
      width: coverSize + 2,
      height: coverSize + 1,
      backgroundColor: 'transparent'
    },
    onClick: toggleSlideLeft
  }, c.artwork(coverSize, imageRef, imageLoadHandler))), /*#__PURE__*/_react.default.createElement(_TG.Gc, {
    className: classes.grid
  }, /*#__PURE__*/_react.default.createElement(_TG.Gi, {
    xs: 1
  }), /*#__PURE__*/_react.default.createElement(_TG.Gi, {
    xs: 10,
    style: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center'
    }
  }), /*#__PURE__*/_react.default.createElement(_TG.Gi, {
    xs: 1
  }), /*#__PURE__*/_react.default.createElement(_TG.Gi, {
    xs: 1
  }), /*#__PURE__*/_react.default.createElement(_TG.Gi, {
    xs: 10
  }, c.slider), /*#__PURE__*/_react.default.createElement(_TG.Gi, {
    xs: 1
  }), /*#__PURE__*/_react.default.createElement(_TG.Gi, {
    xs: 1
  }), /*#__PURE__*/_react.default.createElement(_TG.Gi, {
    xs: 5
  }, /*#__PURE__*/_react.default.createElement(_TG.Tc, {
    className: (0, _classnames.default)(classes.left, classes.caption)
  }, c.currentTime)), /*#__PURE__*/_react.default.createElement(_TG.Gi, {
    xs: 5
  }, /*#__PURE__*/_react.default.createElement(_TG.Tc, {
    className: (0, _classnames.default)(classes.right, classes.caption)
  }, c.duration)), /*#__PURE__*/_react.default.createElement(_TG.Gi, {
    xs: 1
  }), /*#__PURE__*/_react.default.createElement(_TG.Gi, {
    xs: 1
  }), /*#__PURE__*/_react.default.createElement(_TG.Gi, {
    xs: 7
  }, /*#__PURE__*/_react.default.createElement(_TG.Tb1, null, cp.title)), /*#__PURE__*/_react.default.createElement(_TG.Gi, {
    xs: 3
  }), /*#__PURE__*/_react.default.createElement(_TG.Gi, {
    xs: 1
  }), /*#__PURE__*/_react.default.createElement(_TG.Gi, {
    xs: 1
  }), /*#__PURE__*/_react.default.createElement(_TG.Gi, {
    xs: 7
  }, /*#__PURE__*/_react.default.createElement(_TG.Tb2, null, cp.artist)), /*#__PURE__*/_react.default.createElement(_TG.Gi, {
    xs: 3
  }, /*#__PURE__*/_react.default.createElement(_TG.Tc, {
    className: (0, _classnames.default)(classes.right, classes.caption)
  }, "(", q.idx + 1, "/ ", q.queue.length, ")")), /*#__PURE__*/_react.default.createElement(_TG.Gi, {
    xs: 1
  }), /*#__PURE__*/_react.default.createElement(_TG.Gi, {
    xs: 1
  }), /*#__PURE__*/_react.default.createElement(_TG.Gi, {
    xs: 7
  }, /*#__PURE__*/_react.default.createElement(_TG.Tb2, null, cp.album)), /*#__PURE__*/_react.default.createElement(_TG.Gi, {
    xs: 3
  }, /*#__PURE__*/_react.default.createElement(_TG.Tc, {
    className: (0, _classnames.default)(classes.right, classes.caption)
  }, "(", cp.year, ")")), /*#__PURE__*/_react.default.createElement(_TG.Gi, {
    xs: 1
  })));

  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_AppBar.default, {
    className: classes.appbar
  }, /*#__PURE__*/_react.default.createElement(_Toolbar.default, null, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
    className: classes.menuButton,
    color: "inherit",
    onClick: goBack
  }, /*#__PURE__*/_react.default.createElement(_Eject.default, null)), /*#__PURE__*/_react.default.createElement(_TG.Th6, {
    className: classes.flex
  }, /*#__PURE__*/_react.default.createElement("span", {
    id: "title-span",
    className: classes.title
  }, q.queueName || 'SubFire Mobile 3')), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
    className: classes.menuButton,
    color: "inherit",
    onClick: handleDrawer
  }, /*#__PURE__*/_react.default.createElement(_FormatListBulleted.default, null)))), /*#__PURE__*/_react.default.createElement("div", {
    className: classes.portratPlayer
  }, portraitLayout, /*#__PURE__*/_react.default.createElement("div", {
    className: slideLeft ? classes.actionButtonsLeft : classes.actionButtons
  }, c.volumeButtonAbove, c.prevButton, c.back10Button, c.playPauseButton, c.skip30Button, c.nextButton)), /*#__PURE__*/_react.default.createElement(_SwipeableDrawer.default, {
    open: Boolean(playlistOpen),
    onClose: handleClose,
    onOpen: handleDrawer,
    anchor: "right"
  }, /*#__PURE__*/_react.default.createElement(_CurrentSongList.default, {
    className: classes.songList,
    onSongClick: handleClose
  })));
}

var _default = PortraitPlayer;
exports.default = _default;