65 lines
1.3 KiB
JavaScript
65 lines
1.3 KiB
JavaScript
import React, { Fragment, useState, createContext } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
|
|
import Player from './player/Player';
|
|
import SimplePlayer from './player/SimplePlayer';
|
|
import GlobalFooterPlayer from './player/GlobalFooterPlayer';
|
|
import TrackLyricsModal from './player/components/TrackLyricsModal';
|
|
|
|
export const AppContext = createContext();
|
|
|
|
const App = ({ type, ...props }) => {
|
|
const [modal, setModalState] = useState({
|
|
open: false,
|
|
track: null,
|
|
});
|
|
|
|
const toggleLyricsModal = (open, track) =>
|
|
setModalState(prevState => ({
|
|
...prevState,
|
|
track,
|
|
open,
|
|
}));
|
|
|
|
const { track, open } = modal;
|
|
|
|
const PlayerActual = (() => {
|
|
if (type === 'simple') {
|
|
return SimplePlayer;
|
|
}
|
|
|
|
if (type === 'global-footer') {
|
|
return GlobalFooterPlayer;
|
|
}
|
|
|
|
return Player;
|
|
})();
|
|
|
|
return (
|
|
<Fragment>
|
|
<AppContext.Provider
|
|
value={{
|
|
toggleLyricsModal,
|
|
}}
|
|
>
|
|
<PlayerActual {...props} />
|
|
</AppContext.Provider>
|
|
|
|
{track && track.lyrics && (
|
|
<TrackLyricsModal
|
|
isOpen={open}
|
|
closeModal={() => toggleLyricsModal(false)}
|
|
>
|
|
{track && track.lyrics}
|
|
</TrackLyricsModal>
|
|
)}
|
|
</Fragment>
|
|
);
|
|
};
|
|
|
|
App.propTypes = {
|
|
type: PropTypes.string,
|
|
};
|
|
|
|
export default App;
|