small styling fixes

6 files changed, 57 insertions, 11 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%;
     }
diff --git a/apps/Youtube/styles/_results.scss b/apps/Youtube/styles/_results.scss
index b7d8e9e..9aba047 100644
--- a/apps/Youtube/styles/_results.scss
+++ b/apps/Youtube/styles/_results.scss
@@ -1,11 +1,10 @@
 .results {
-  height: 100%;
-
   form {
     padding: .5em;
     justify-content: center;
     align-items: center;
     display: flex;
+    height: 4.5em;
 
     input[type=text] {
       background-color: var(--color-window-content);
@@ -27,6 +26,15 @@
     }
   }
 
+  & > div {
+    position: fixed;
+    top: 9.5em;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: auto;
+  }
+
   ul {
     display: block;
 
diff --git a/configs/translations.js b/configs/translations.js
index 30d6432..11a5988 100644
--- a/configs/translations.js
+++ b/configs/translations.js
@@ -76,6 +76,8 @@ const translations = {
     notes_remove_confirm: 'Do you want to remove note?',
     player_playlist_empty: 'Your playlist is empty',
     player_playlist_default: 'Default playlist',
+    player_item_playing: 'Playing in Player',
+    player_item_enqueued: 'Enqueued in Player',
     yt_video: 'Videos',
     yt_video_count: ' videos',
     yt_live: 'Live',
@@ -161,6 +163,8 @@ const translations = {
     notes_remove_confirm: 'Czy na pewno chcesz usunąć notatkę?',
     player_playlist_empty: 'Lista otwarzania jest pusta',
     player_playlist_default: 'Domyślna lista',
+    player_item_playing: 'Odtwarzanie w Odtwarzaczu',
+    player_item_enqueued: 'Dodano do kolejki odtwarzania',
     yt_video: 'Wideo',
     yt_video_count: ' klipów',
     yt_live: 'Na żywo',
@@ -246,6 +250,8 @@ const translations = {
     notes_remove_confirm: '¿Estás seguro de que deseas eliminar la nota?',
     player_playlist_empty: 'La lista está vacía',
     player_playlist_default: 'Lista predeterminada',
+    player_item_playing: 'Jugar con el Jugador',
+    player_item_enqueued: 'Añadido a la cola de reproducción',
     yt_video: 'Video',
     yt_video_count: ' clips',
     yt_live: 'En vivo',
@@ -331,6 +337,8 @@ const translations = {
     notes_remove_confirm: 'Möchten Sie die Notiz wirklich löschen? ',
     player_playlist_empty: 'Playlist ist leer',
     player_playlist_default: 'Standardliste',
+    player_item_playing: 'Spiele auf dem Spieler',
+    player_item_enqueued: 'Zur Play Queue hinzugefügt',
     yt_video: 'Video',
     yt_video_count: ' Clips',
     yt_live: 'Live',
diff --git a/styles/global/_window.scss b/styles/global/_window.scss
index 7b1c07b..d05ff7c 100644
--- a/styles/global/_window.scss
+++ b/styles/global/_window.scss
@@ -21,6 +21,7 @@
     transform: translate(-50%, -50%);
     max-width: 21rem;
     margin: 0 auto;
+    line-height: 1.25;
 
     &:not(.window--popup-with-title) {
       border-top-left-radius: .5em;
@@ -47,6 +48,10 @@
     border-top: 1px solid var(--color-window-border-top);
     border-top-left-radius: .5em;
     border-top-right-radius: .5em;
+
+    @media(max-width: 40em) {
+      display: none;
+    }
   }
 
   &--popup > .window__title {
@@ -90,6 +95,14 @@
     right: 0;
     bottom: 0;
     left: 0;
+
+    & > div:nth-of-type(2) {
+      top: 5em;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      position: fixed;
+    }
   }
 
   &.window__content {
@@ -142,7 +155,7 @@
 
     @media(max-width: 40em) {
       height: 3em;
-      overflow: auto;
+      overflow-x: scroll;
 
       & > div {
         display: flex;
@@ -155,8 +168,10 @@
   }
 
   &__scroll {
-    height: calc(100% - 2em);
-    overflow: auto;
+    height: 100%;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
   }
 
   &__buttons--popup {