Player does not work in mobile devices

[Molnfront]

If I emulate a mobile device in Chrome the Soundbutton will not work.

I tried it in a working codesandbox and could repeat the issue both with Soundbutton and video player:

https://codesandbox.io/s/material-ui-player-bug-forked-x2xjvx?file=/package.json:245-256

[alelapi]

Hi @Molnfront , what do you mean by 'will not work'? I tried your sandbox and it's working fine. Even with SoundButton is working https://codesandbox.io/s/material-ui-player-bug-forked-wmp9s8

[Molnfront]

Yeah I checked it again and it's working in the sandbox. But not in my own app. Don't know why, I have no error anywhere. The sound button works in web browser, but not in emulated phone devices.

I use the soundbutton inside a map with swipe cards.

{React.Children.toArray(
          people.map((data) => (
            <><TinderCard
              className="swipe"

              preventSwipe={['up', 'down']}
            >
              <Card sx={{ display: 'flex' }} >
                <Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}  >
                  <CardContent sx={{ flex: '1 0 auto' }} >
                    <Typography component="div" variant="h5" >
                      {data.nickname}
                    </Typography>
                    <Typography variant="subtitle1" color="text.secondary" component="div" >
                      Lyssna!

                    </Typography>
                  </CardContent>

                  <Box sx={{ display: 'flex', alignItems: 'center', pl: 1, pb: 1 }}  >

                    <SoundButton src={data.voiceurl} sx={{ height: 38, width: 38 }} />

                  </Box>
                </Box>
                <CardMedia
                  component="img"
                  sx={{ width: 151 }}
                  image={data.imageurl}
                  alt="Live from space album cover" />
              </Card>
            </TinderCard></>

          )))}

[Molnfront]

Hm, I need to add the className="pressable" to the soundbutton for it to work in a react-tinder-card. Now the problem is to figure out how to do this in mui..

[alelapi]

Ok, so it's not an issue related to this library, as it is specified in the doc of react-tinder-card https://github.com/3DJakob/react-tinder-card#buttons-inside-a-tindercard

[Molnfront]

Yes!