feat: add desktopUrl

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,
           }}
         >
           <MicIcon />
@@ -91,8 +92,8 @@ export default function KaraokeModal({url, titre, artistes}) {
                 borderRadius: 0,
                 boxShadow: 'none',
               } : {
-                width: 'calc(88vh * 9 / 16)',
+                width: 'calc(80vh * 16 / 9)',
-                height: '88vh',
+                height: '80vh',
                 maxWidth: 'none',
                 maxHeight: 'none',
                 borderRadius: '16px',
@@ -149,7 +150,6 @@ export default function KaraokeModal({url, titre, artistes}) {
 
         {open && (
           <Box sx={{position: 'absolute', inset: 0, overflow: 'hidden'}}>
-            {/* Skeleton affiché pendant le chargement */}
             {!loaded && (
               <>
                 <Skeleton
@@ -178,37 +178,38 @@ export default function KaraokeModal({url, titre, artistes}) {
               </>
             )}
 
-            {/*
+            {isMobile ? (
-              Le player PeerTube impose un ratio 16:9 en interne.
+              /* Vidéo verticale : scale le player 16:9 à la hauteur du portrait et croppe les côtés */
-              On étire l'iframe en 16:9 sur toute la hauteur du conteneur portrait,
+              <Box sx={{
-              on le centre horizontalement, et overflow:hidden croppe les côtés.
+                position: 'absolute',
-              Le centre visible correspond exactement à la zone vidéo verticale.
+                top: 0,
-            */}
+                left: '50%',
-            <Box sx={{
+                transform: 'translateX(-50%)',
-              position: 'absolute',
+                height: '100%',
-              top: 0,
+                aspectRatio: '16 / 9',
-              left: '50%',
+              }}>
-              transform: 'translateX(-50%)',
+                <iframe
-              height: '100%',
+                  src={toEmbedUrl(activeUrl)}
-              aspectRatio: '16 / 9',
+                  onLoad={() => setLoaded(true)}
-            }}>
+                  style={{width: '100%', height: '100%', border: 'none', display: 'block', opacity: loaded ? 1 : 0, transition: 'opacity 0.4s ease'}}
+                  allowFullScreen
+                  allow='autoplay; fullscreen'
+                  sandbox='allow-same-origin allow-scripts allow-popups allow-forms'
+                  title='Karaoké'
+                />
+              </Box>
+            ) : (
+              /* Vidéo 16:9 desktop : player remplit exactement le dialog paysage */
               <iframe
-                src={toEmbedUrl(url)}
+                src={toEmbedUrl(activeUrl)}
                 onLoad={() => setLoaded(true)}
-                style={{
+                style={{width: '100%', height: '100%', border: 'none', display: 'block', opacity: loaded ? 1 : 0, transition: 'opacity 0.4s ease'}}
-                  width: '100%',
-                  height: '100%',
-                  border: 'none',
-                  display: 'block',
-                  opacity: loaded ? 1 : 0,
-                  transition: 'opacity 0.4s ease',
-                }}
                 allowFullScreen
                 allow='autoplay; fullscreen'
                 sandbox='allow-same-origin allow-scripts allow-popups allow-forms'
                 title='Karaoké'
               />
-            </Box>
+            )}
           </Box>
         )}
       </Dialog>
@@ -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,
 }

components/teks/teks-drawer.js

@@ -139,7 +139,7 @@ export default function TeksDrawer({paroles}) {
         </Drawer>
       </Box>
       {parole?.karaokeUrl && (
-        <KaraokeModal url={parole.karaokeUrl} titre={parole.titre} artistes={parole.artistes} />
+        <KaraokeModal url={parole.karaokeUrl} desktopUrl={parole.karaokeDesktopUrl} titre={parole.titre} artistes={parole.artistes} />
       )}
       {success && (
         <Snackbar open={open} autoHideDuration={3000} onClose={handleClose}>