1 files changed, 70 insertions, 12 deletions

diff --git a/apps/Player/components/App.js b/apps/Player/components/App.js
index f7b0557..6633bc8 100644
--- a/apps/Player/components/App.js
+++ b/apps/Player/components/App.js
@@ -1,15 +1,20 @@
 import styles from '../styles/Player.module.scss'
 import { useState, useEffect } from 'react'
 import useSettings from 'hooks/useSettings'
+import useMediaQuery from 'hooks/useMediaQuery'
 import Video from './Video'
 import Buttons from './Buttons'
 import { Splash } from 'components'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faList, faTrashAlt, faCaretSquareRight, faInfinity, faAlignJustify } 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 })
 
   useEffect(() => {
     if (list) {
@@ -40,16 +45,14 @@ const App = ({ list }) => {
 
   useEffect(() => {
     if (playlist) {
-      const { items, enqueue } = playlist
-
       if (typeof window !== 'undefined' && playlist && playlist.length > 0) {
-        window.localStorage.setItem('playlist', JSON.stringify(enqueue ? [...playlist, ...items] : items))
+        window.localStorage.setItem('playlist', JSON.stringify(playlist))
         setShowPlaylist(true)
       }
 
       if (current === null && list) {
         setCurrent(
-          enqueue
+          list.enqueue
             ? playlist && playlist.length > 1
               ? playlist.length - 1
               : 0
@@ -59,7 +62,35 @@ const App = ({ list }) => {
     }
   }, [playlist])
 
-  if (!playlist) return <Splash />
+  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 (
+      <>
+        <div className='window__submenu' />
+        <div className={styles.player}>
+          <Splash />
+        </div>
+      </>
+    )
+  }
 
   return (
     <>
@@ -69,16 +100,24 @@ const App = ({ list }) => {
             onClick={() => { setShowPlaylist(p => !p) }}
             className={current ? 'active' : null}
           >
-            {t('player_playlist_default')}
+            <FontAwesomeIcon icon={faList} />
           </div>
-          <div onClick={() => {}}>+</div>
+          <span />
           <Buttons current={current} setCurrent={setCurrent} playlist={playlist} />
+          <div onClick={() => { setDetails(d => ({ ...d, show: !d.show })) }}>
+            <FontAwesomeIcon icon={faAlignJustify} />
+          </div>
         </div>
       </div>
       <div className={styles.player}>
         <div>
-          {current !== null && (
-            <Video playlist={playlist} current={current} setCurrent={setCurrent} />
+          {playlist && current !== null && playlist[current] && setDetails && (
+            <Video
+              playlist={playlist}
+              current={current}
+              setCurrent={setCurrent}
+              setDetails={setDetails}
+            />
           )}
         </div>
         <div style={showPlaylist ? {} : { transform: 'translateX(-110%)' }}>
@@ -89,11 +128,19 @@ const App = ({ list }) => {
                     playlist.map((item, i) => (
                       <li
                         onClick={() => { setCurrent(i) }}
-                        className={current === i ? styles.activeItem : ''}
+                        className={current === i ? 'active' : ''}
                         key={item.id}
                       >
+                        <FontAwesomeIcon
+                          icon={item.type.split('_')[1] === 'live'
+                            ? faInfinity
+                            : faCaretSquareRight}
+                        />
                         <span>{(i + 1) + '.'}</span>
-                        {item.title}
+                        <span>{item.title}</span>
+                        <span onClick={e => remove(e, i)}>
+                          <FontAwesomeIcon icon={faTrashAlt} />
+                        </span>
                       </li>
                     ))
                   )
@@ -102,7 +149,18 @@ const App = ({ list }) => {
                   )
             }
           </ul>
-          <div onClick={() => setShowPlaylist(false)}>&lt;</div>
+        </div>
+        <div style={details.show ? {} : { transform: 'translateX(110%)' }}>
+          {details && (
+            <div>
+              <pre>
+                {details.title}
+              </pre>
+              <pre>
+                {details.description}
+              </pre>
+            </div>
+          )}
         </div>
       </div>
     </>