aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--apps/Player/components/App.js14
-rw-r--r--apps/Player/components/Video.js2
-rw-r--r--apps/Player/styles/_player.scss11
-rw-r--r--apps/Youtube/styles/_results.scss12
-rw-r--r--configs/translations.js8
-rw-r--r--styles/global/_window.scss21
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 {
generated by cgit v1.2.3 (git 2.25.1) at 2025-08-22 17:54:53 +0000