Black Pop-Up When Building Using Cordova in iOS

[vahost]

Describe the bug I reported this at https://forum.quasar-framework.org/topic/6585/keep-phone-from-locking-while-app-playing-stream/14 and am opening this ticket per request of @hawkeye64

When building in dev mode to either simulator or plugged-in iPhone 6s using Cordova, after the build is completed, playing the player results in a black pop-up that covers the page.

I'm building an SPA.

If I click the black box, I can see a few controls for pausing or forwarding/reversing, plus a close box (X). Clicking the X makes the pop-up go away.

To Reproduce Steps to reproduce the behavior:

1. Create Quasar app using player
2. Run: quasar dev -m cordova -T ios
3. Play the player in the app

Expected behavior I expect the player to play without popping up a black box that blocks the rest of the page.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: MacOS
• Browser [e.g. chrome, safari] iPhone Simulator
• Version [e.g. 22] iPhone SE (2nd generation) (13.7)

Smartphone (please complete the following information):

• Device: [e.g. iPhone6] iPhone6s
• OS: [e.g. iOS8.1] iOS 13.6.1
• Browser [e.g. stock browser, safari] N/A
• Version [e.g. 22] N/A

Additional context This same result does not occur with the SPA when run in MacOS using Chrome or Safari or in Windows 10 using Chrome. It doesn’t cause an issue on my test Android device using Chrome. You can also use this SPA web page to test on an iPhone using any browser: https://www.loatoday.net/spa/

[hawkeye64]

@vahost By chance are you setting autoplay to true? After a bit of research, I have found since iOS v12, Apple changed the way they handle video -- a bit. If you have autoplay turned on, then their controls will always show until the video is loaded. At that point, they look at the rest of the settings, like controls=false (which is done internally by QMediaPlayer) and only then will their controls disappear. Sound familiar to your situation? https://stackoverflow.com/questions/53071085/how-to-hide-html5-video-controls-on-ios-12

[vahost]

@hawkeye64
No. Here is my player script:

<template>
  <div>
    <q-media-player
      ref="myPlayer"
      type="audio"
      :source="mp3"
      background-color="green-14"
      color="green-3"
      @playing="play"
      @paused="pause"
      @error="error"
      @stalled="stalled"
      @timeupdate="timeupdate"
    />
  </div>
</template>

<script>
export default {
  props: {
      mp3 : String
    },

  data(){
    return{
    }
  },
  methods: {
    error(MediaError){
      console.log("player error: ", MediaError)
    },
    pause(){
      this.$emit('nowPaused')
      console.log("player pause")
    },
    play(){
      this.$emit('nowPlaying')
      console.log("player play")
    },
    stalled(){
      console.log("player stalled")
    },
    timeupdate(curTime){
      this.$emit('timeupdate', curTime)
    }
  }
}
</script>

[hawkeye64]

@vahost I'll find time to look into this next week. However, I don't have iOS, so I may need some help testing.

[vahost]

@hawkeye64 Thank you.

Sure, I'll be happy to help with the testing.

[hawkeye64]

It might have to do with permissions. Maybe a web component can't tell iOS that "controls=false" any longer and something else needs to be added in the external permissions file.

[vahost]

Like what permission?

In my plist file I already have:

    <key>UIBackgroundModes</key>
    <array>
          <string>audio</string>
        </array>

What other permissions do I need?

Here is the full plist file:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>CFBundleDevelopmentRegion</key>
    <string>en_US</string>
    <key>CFBundleDisplayName</key>
    <string>LOA Today</string>
    <key>CFBundleExecutable</key>
    <string>$(EXECUTABLE_NAME)</string>
    <key>CFBundleIdentifier</key>
    <string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
    <key>CFBundleInfoDictionaryVersion</key>
    <string>6.0</string>
    <key>CFBundleName</key>
    <string>$(PRODUCT_NAME)</string>
    <key>CFBundlePackageType</key>
    <string>APPL</string>
    <key>CFBundleShortVersionString</key>
    <string>1.1.29</string>
    <key>CFBundleSignature</key>
    <string>????</string>
    <key>CFBundleVersion</key>
    <string>1.1.29</string>
    <key>LSRequiresIPhoneOS</key>
    <true/>
    <key>NSMainNibFile</key>
    <string/>
    <key>NSMainNibFile~ipad</key>
    <string/>
    <key>UIBackgroundModes</key>
    <array>
                <string>audio</string>
        </array>
    <key>UIRequiresFullScreen</key>
    <true/>
    <key>UISupportedInterfaceOrientations</key>
    <array>
        <string>UIInterfaceOrientationPortrait</string>
        <string>UIInterfaceOrientationLandscapeLeft</string>
        <string>UIInterfaceOrientationLandscapeRight</string>
    </array>
    <key>UISupportedInterfaceOrientations~ipad</key>
    <array>
        <string>UIInterfaceOrientationPortrait</string>
        <string>UIInterfaceOrientationLandscapeLeft</string>
        <string>UIInterfaceOrientationPortraitUpsideDown</string>
        <string>UIInterfaceOrientationLandscapeRight</string>
    </array>
    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>
</dict>
</plist>

[hawkeye64]

I don't know as I am not a mobile developer. But, since this was working previously on iOS (verified), then I can only assume now, there is possibly a new permission that allows media controls to be turned off. :man_shrugging:

[vahost]

@hawkeye64 > there is possibly a new permission that allows media controls to be turned off. 🤷‍♂️

That doesn't really make sense to me. If the media controls weren't allowed because of some missing permission, then they wouldn't work at all.

In this case, the media controls work. They just produce an unexpected side-effect. But the side-effect doesn't prevent the controls from working. It just visually gets in the way of seeing them. Even the controls in the black box work, once you realize they are there.

[hawkeye64]

@vahost I am not sure you understand what I am saying. On the <video> tag, you can have attribute controls=none, which tells the HTML5 media player that it should not show controls and there controls will be replaced by third party. In this case, iOS is showing a black box, where their control can normally be seen. They are not adhering to the no controls. My understanding, is this bug was introduced in iOS v12 and Apple has not fixed it yet.

[vahost]

@hawkeye64 You're right, I have no idea what you're saying. Where do I have controls=none? To the best of my knowledge, I don't have that set anywhere.

[hawkeye64]

@vahost It's done internally by QMediaPlayer. And, I made a mistake. The attribute controls will show the controls. The abscence of it means not to show controls.

Do me a favor. Add this css to your global css and see if its effects work for you:

video::-webkit-media-controls {
  display: none;
}

/* Could Use thise as well for Individual Controls */
video::-webkit-media-controls-play-button {}

video::-webkit-media-controls-volume-slider {}

video::-webkit-media-controls-mute-button {}

video::-webkit-media-controls-timeline {}

video::-webkit-media-controls-current-time-display {}

[hawkeye64]

Probably just the first one is sufficient.

[vahost]

I just wanted to let you know that I saw your notes, and I plan to implement them. Right now, I'm dealing with a compile error that is preventing me from testing your solution adequately. But I will get back to you as soon as I can.

[hawkeye64]

@vahost No problem. I was testing iOS using Browserstck yesterday. From the QMediaplayer examples, they all go into fullscreen mode and iOS now takes over the UI. I am assuming this started with iOS v12 based on some research. How to overcome this, I am not sure at this point.

[vahost]

I couldn't resolve the cordova issue, so I tried capacitor instead. Capacitor goes properly into dev mode with my iPhone. I also added your code to my CSS. However, I'm still getting the black pop-up screen. So the problem still exists.

[hawkeye64]

@vahost Yes, it's an iOS issue. You can always trust Apple to be against the grain in one way or another. From the research I did, it's their bug to fix. However, they have a lousy track record for fixing iOS bugs in a timely manner.

[vahost]

Strange that it doesn't happen with the vue-plyr. I wonder why?

[hawkeye64]

@vahost If it is indeed an issue with QMediaPlayer, I would hope you'd dig in a bit and try to find the issue since I do not have any apple devices to figure this out. I am relying on the community in this regard.