small styling fixes

1 files changed, 13 insertions, 1 deletions

diff --git a/apps/Player/components/App.js b/apps/Player/components/App.js
index 6633bc8..2ace63c 100644
--- a/apps/Player/components/App.js
+++ b/apps/Player/components/App.js
@@ -2,11 +2,12 @@ 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 } from '@fortawesome/free-solid-svg-icons'
+import { faList, faTrashAlt, faCaretSquareRight, faInfinity, faAlignJustify, faVideo, faMusic } from '@fortawesome/free-solid-svg-icons'
 
 const App = ({ list }) => {
   const { t } = useSettings()
@@ -15,6 +16,8 @@ const App = ({ list }) => {
   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) {
@@ -28,6 +31,11 @@ const App = ({ list }) => {
           : items
       )
 
+      setPopup({
+        content: t(enqueue ? 'player_item_enqueued' : 'player_item_playing'),
+        time: 1500
+      })
+
       if (enqueue) {
         setShowPlaylist(true)
       }
@@ -103,6 +111,9 @@ const App = ({ list }) => {
             <FontAwesomeIcon icon={faList} />
           </div>
           <span />
+          <div onClick={() => { setAudioOnly(v => !v) }}>
+            <FontAwesomeIcon icon={audioOnly ? faMusic : faVideo} />
+          </div>
           <Buttons current={current} setCurrent={setCurrent} playlist={playlist} />
           <div onClick={() => { setDetails(d => ({ ...d, show: !d.show })) }}>
             <FontAwesomeIcon icon={faAlignJustify} />
@@ -115,6 +126,7 @@ const App = ({ list }) => {
             <Video
               playlist={playlist}
               current={current}
+              audioOnly={audioOnly}
               setCurrent={setCurrent}
               setDetails={setDetails}
             />