import styles from '../styles/Player.module.scss' import { useState, useEffect } from 'react' import useSettings from 'hooks/useSettings' import useMediaQuery from 'hooks/useMediaQuery' import usePopup from 'hooks/usePopup' import Video from './Video' import Buttons from './Buttons' import { Splash } from 'components' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faList, faTrashAlt, faCaretSquareRight, faInfinity, faAlignJustify, faVideo, faMusic } from '@fortawesome/free-solid-svg-icons' const App = ({ list }) => { const { t } = useSettings() const smallDevice = useMediaQuery('(max-width: 40em)') const [current, setCurrent] = useState(null) const [playlist, setPlaylist] = useState(null) const [showPlaylist, setShowPlaylist] = useState(false) const [details, setDetails] = useState({ show: false }) const [audioOnly, setAudioOnly] = useState(false) const { setPopup } = usePopup() useEffect(() => { if (list) { const { items, enqueue } = list setPlaylist( p => enqueue && p ? p.some(x => items.some(y => x.id === y.id)) ? p : [...p, ...items] : items ) setPopup({ content: t(enqueue ? 'player_item_enqueued' : 'player_item_playing'), time: 1500 }) if (enqueue) { setShowPlaylist(true) } } else { if (typeof window !== 'undefined') { try { setPlaylist(JSON.parse(window.localStorage.getItem('playlist'))) } catch (e) { setPlaylist([]) window.localStorage.setItem('playlist', JSON.stringify([])) } } } }, [list]) useEffect(() => { if (playlist) { if (typeof window !== 'undefined' && playlist && playlist.length > 0) { window.localStorage.setItem('playlist', JSON.stringify(playlist)) setShowPlaylist(true) } if (current === null && list) { setCurrent( list.enqueue ? playlist && playlist.length > 1 ? playlist.length - 1 : 0 : 0 ) } } }, [playlist]) useEffect(() => { smallDevice && showPlaylist && setDetails(d => ({ ...d, show: false })) }, [showPlaylist]) useEffect(() => { smallDevice && details && details.show && setShowPlaylist(false) }, [details && details.show]) const remove = (e, i) => { e.stopPropagation() if (current === i) { setCurrent(null) } setPlaylist(p => p.filter((_, j) => j !== i)) if (current > i) { setCurrent(c => c - 1) } } if (!playlist) { return ( <>
) } return ( <>
{ setShowPlaylist(p => !p) }} className={current ? 'active' : null} >
{ setAudioOnly(v => !v) }}>
{ setDetails(d => ({ ...d, show: !d.show })) }}>
{playlist && current !== null && playlist[current] && setDetails && (
    { playlist && playlist.length > 0 ? ( playlist.map((item, i) => (
  • { setCurrent(i) }} className={current === i ? 'active' : ''} key={item.id} > {(i + 1) + '.'} {item.title} remove(e, i)}>
  • )) ) : (
  • {t('player_playlist_empty')}
  • ) }
{details && (
                {details.title}
              
                {details.description}
              
)}
) } export default App