aboutsummaryrefslogtreecommitdiffstats
path: root/apps/Player/components
diff options
context:
space:
mode:
Diffstat (limited to 'apps/Player/components')
-rw-r--r--apps/Player/components/App.js82
-rw-r--r--apps/Player/components/Buttons.js1
-rw-r--r--apps/Player/components/Video.js63
3 files changed, 122 insertions, 24 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>
</>
diff --git a/apps/Player/components/Buttons.js b/apps/Player/components/Buttons.js
index 14452a0..efc8555 100644
--- a/apps/Player/components/Buttons.js
+++ b/apps/Player/components/Buttons.js
@@ -3,7 +3,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
const Buttons = ({ current, setCurrent, playlist }) => (
<>
- <span />
<div
className={current !== null && current > 0 ? '' : 'iconOff'}
onClick={() => { current !== null && current > 0 && setCurrent(c => c - 1) }}
diff --git a/apps/Player/components/Video.js b/apps/Player/components/Video.js
index 7152967..7028f1f 100644
--- a/apps/Player/components/Video.js
+++ b/apps/Player/components/Video.js
@@ -1,25 +1,66 @@
-import { useRef } from 'react'
+import { useState, useEffect, useRef } from 'react'
import Splash from 'components/Splash'
+import fetchJson from 'helpers/fetchJson'
-const Video = ({ playlist, current, setCurrent }) => {
- if (!playlist) return null
-
+const Video = ({ playlist, current, setCurrent, audioOnly = false, setDetails }) => {
+ const [data, setData] = useState(null)
+ const [loading, setLoading] = useState(null)
const videoEl = useRef()
- const sources = playlist[current]?.sources
const handleEnd = () => {
setCurrent(current === playlist.length - 1 ? null : current + 1)
}
+ useEffect(() => {
+ setLoading(true)
+ if (current === null) {
+ setData(null)
+ setDetails(d => ({ ...d, show: false }))
+ }
+
+ switch (playlist[current].type.split('_')[0]) {
+ case 'yt':
+ fetchJson('/api/youtube/video', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ id: playlist[current].id })
+ })
+ .then(v => {
+ setData({
+ id: v.videoDetails.videoId,
+ formats: v.formats
+ .filter(v => !v.isHLS && v.hasAudio && (audioOnly ? !v.hasVideo : v.hasVideo))
+ .sort((a, b) => audioOnly ? a.audioBitrate < b.audioBitrate : a.bitrate < b.bitrate)
+ })
+ setDetails(d => ({
+ ...d,
+ title: v.videoDetails.title,
+ description: v.videoDetails.description
+ }))
+ })
+ .catch(() => console.log('error fetching video'))
+ .finally(() => setLoading(false))
+ break
+ default:
+ }
+ }, [playlist && playlist[current].id])
+
return (
- sources
+ data && !loading
? (
- <video onEnded={handleEnd} ref={videoEl} key={playlist[current]?.id} controls autoPlay>
+ <video
+ onEnded={handleEnd}
+ ref={videoEl}
+ key={data.id}
+ controls
+ autoPlay
+ style={audioOnly ? { backgroundImage: 'url(' + playlist[current].thumbnail + ')' } : {}}
+ >
{
- sources.map(s => (
- <source src={s.url} type={s.mimeType} key={s.url} />
- ))
- }
+ data.formats.map(s => (
+ <source src={s.url} type={s.mimeType} key={s.url} />
+ ))
+ }
Your browser does not support the video tag.
</video>
)
generated by cgit v1.2.3 (git 2.25.1) at 2025-08-22 23:14:26 +0000