Stories: Reader and post preview improvements

[aforcier]

A few tweaks need to be made to support Stories in the Reader, based on the initial implementation in #14965.

This is also going to affect post previews.

1. The story doesn't play in fullscreen

Full screen isn't really supported in Safari as far as I can tell.

Per @leandroalonso's suggestion, we might be able to do this with a custom VC that contains a WKWebView and show it in fullscreen.

2. Videos play in the native player instead of inline

Update: Resolved in #15029.

The WebView shows the native full-screen controller when playing videos, instead of playing inline (you can see this in https://d.pr/v/1YronD). I made a few attempts to pass the playsinline parameter (the playsinline param is actually already added to all video tags in a Story), but it seems we need to modify the WebView.

@aerych pointed me to https://developer.apple.com/documentation/webkit/wkwebviewconfiguration/1614793-allowsinlinemediaplayback, which we might be able to use, though my Swift fu seems to be too feeble to attempt this.

Alternatively, we can just use the SFSafariViewController as @leandroalonso suggested. UX-wise it's pretty similar to the WebView behavior, and the video correctly plays inline in that case. The only issue is it takes us further away from a solution to #1, since we'd probably need to use a WebView (and fix the inline video issue).

3. Autoplay is broken for videos with sound

Update: Resolved server-side in Automattic/jetpack#16852.

This issue seems universal whether using Safari or a WebView, and seems to be because a user action is required to play audio by default.

You can see the issue in https://d.pr/v/1YronD, the story is in 'play' mode but doesn't actually play the video until you pause and un-pause.

I see three possible fixes here:

1. Just remove the wp-story-play-on-load=true argument from the link before opening
2. On the web end, catch that error and stop autoplay
3. On the web end, catch that error and set the video to muted

It probably makes sense to do the first one as a quick fix if we don't have time for the web fix.

---

For initial release, I think we can ignore 1, use the SFSafariViewController to fix 2, and do whichever of the three suggested fixes for 3 we have time for.

That should do it for the Reader, though more thought is needed for how to address the post preview case. We might have to figure out how to enable inline videos in the WebView, either globally or for stories specifically.

[aerych]

we might be able to do this with a custom VC that contains a WKWebView and show it in fullscreen.

We might also look at hiding the nav and tool bars on the existing controller, just to see which is easier. I'm thinking about if Stories ever get an epilogue with links back to other things. We might want the ability to restore the tool bars for their navigation functionality in that case. (Or maybe I'm over thinking it. 🤷)

which we might be able to use

A quick proof of concept is demonstrated in #15029. This seems like it will do the trick. If we don't want all iPhone videos playing inline we can add some additional checks so its limited to stories.

[stale]

This issue has been marked as stale because:

• It has been inactive for the past year.
• It isn't in a project or a milestone.
• It hasn’t been labeled [Pri] Blocker, [Pri] High, or good first issue.

Please comment with an update if you believe this issue is still valid or if it can be closed. This issue will also be reviewed for validity and priority during regularly scheduled triage sessions.