diff --git a/components/teks/karaoke-modal.js b/components/teks/karaoke-modal.js
index bfd4fbd..7cbf7bf 100644
--- a/components/teks/karaoke-modal.js
+++ b/components/teks/karaoke-modal.js
@@ -37,11 +37,12 @@ function toEmbedUrl(url) {
}
}
-export default function KaraokeModal({url, titre, artistes}) {
+export default function KaraokeModal({url, desktopUrl, titre, artistes}) {
const [open, setOpen] = useState(false)
const [loaded, setLoaded] = useState(false)
const theme = useTheme()
const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
+ const activeUrl = (!isMobile && desktopUrl) ? desktopUrl : url
useEffect(() => {
if (!open) setLoaded(false)
@@ -59,7 +60,7 @@ export default function KaraokeModal({url, titre, artistes}) {
position: 'fixed',
bottom: {xs: 24, sm: 32},
right: {xs: 24, sm: 32},
- zIndex: 10,
+ zIndex: 1050,
}}
>
@@ -91,8 +92,8 @@ export default function KaraokeModal({url, titre, artistes}) {
borderRadius: 0,
boxShadow: 'none',
} : {
- width: 'calc(88vh * 9 / 16)',
- height: '88vh',
+ width: 'calc(80vh * 16 / 9)',
+ height: '80vh',
maxWidth: 'none',
maxHeight: 'none',
borderRadius: '16px',
@@ -149,7 +150,6 @@ export default function KaraokeModal({url, titre, artistes}) {
{open && (
- {/* Skeleton affiché pendant le chargement */}
{!loaded && (
<>
)}
- {/*
- Le player PeerTube impose un ratio 16:9 en interne.
- On étire l'iframe en 16:9 sur toute la hauteur du conteneur portrait,
- on le centre horizontalement, et overflow:hidden croppe les côtés.
- Le centre visible correspond exactement à la zone vidéo verticale.
- */}
-
+ {isMobile ? (
+ /* Vidéo verticale : scale le player 16:9 à la hauteur du portrait et croppe les côtés */
+
+
+ ) : (
+ /* Vidéo 16:9 desktop : player remplit exactement le dialog paysage */
+ )}
)}
@@ -218,6 +219,7 @@ export default function KaraokeModal({url, titre, artistes}) {
KaraokeModal.propTypes = {
url: PropTypes.string.isRequired,
+ desktopUrl: PropTypes.string,
titre: PropTypes.string,
artistes: PropTypes.array,
}
diff --git a/components/teks/teks-drawer.js b/components/teks/teks-drawer.js
index 40b6cf7..7de0ec7 100644
--- a/components/teks/teks-drawer.js
+++ b/components/teks/teks-drawer.js
@@ -139,7 +139,7 @@ export default function TeksDrawer({paroles}) {
{parole?.karaokeUrl && (
-
+
)}
{success && (