3 files changed, 21 insertions, 6 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}
             />
diff --git a/apps/Player/components/Video.js b/apps/Player/components/Video.js
index e1f4c0b..521bf86 100644
--- a/apps/Player/components/Video.js
+++ b/apps/Player/components/Video.js
@@ -43,7 +43,7 @@ const Video = ({ playlist, current, setCurrent, audioOnly = false, setDetails })
         break
       default:
     }
-  }, [playlist && playlist[current].id])
+  }, [playlist && playlist[current].id, audioOnly])
 
   return (
     data && !loading
diff --git a/apps/Player/styles/_player.scss b/apps/Player/styles/_player.scss
index 0d73b59..abc6582 100644
--- a/apps/Player/styles/_player.scss
+++ b/apps/Player/styles/_player.scss
@@ -1,11 +1,10 @@
 .player {
-  height: 100%;
   width: 100%;
   position: relative;
   background-color: #000;
 
   & > div:nth-of-type(1) {
-    height: calc(100% - 2em);
+    height: 100%;
     width: 100%;
     padding-bottom: .5em;
 
@@ -18,7 +17,9 @@
 
 
   & > div:nth-of-type(2)  {
-    overflow-y: auto;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
   }
 
   & > div:nth-of-type(2),
@@ -32,6 +33,7 @@
 
     @media(max-width: 40em) {
       width: 96%;
+      bottom: 0;
     }
 
     ul {
@@ -50,7 +52,7 @@
 
       & > span:nth-of-type(2) {
         flex-grow: 1;
-        overflow-x: hidden;
+        overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
       }
@@ -118,6 +120,7 @@
 
     & > div:first-of-type {
       overflow-y: auto;
+      overflow-x: hidden;
       padding: 1em;
       height: 100%;
     }