aboutsummaryrefslogtreecommitdiffstats
path: root/apps/Player/components/App.js
diff options
context:
space:
mode:
Diffstat (limited to 'apps/Player/components/App.js')
-rw-r--r--apps/Player/components/App.js14
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}
/>