How can I hijack the twitter embedded post play back button in Android

Question

I am working on my side project where I am showing embedded tweet in web-view. Some of the tweet's contain video. On iOS when I click on the blue play back button, it starts the video in full screen video player. Where as on Android it runs it in the tweet's embedded media player.

I am using the custom chrome client to handle the full screen view

class CustomChromeClient(val activity: ComponentActivity) : WebChromeClient() {

    var customView: View? = null

    override fun onHideCustomView() {
        (activity.window.decorView as FrameLayout).removeView(this.customView)
        this.customView = null

    }

    override fun onShowCustomView(paramView: View, paramCustomViewCallback: CustomViewCallback) {
        if (this.customView != null) {
            onHideCustomView()
            return
        }
        this.customView = paramView
        (activity.window.decorView as FrameLayout).addView(this.customView, FrameLayout.LayoutParams(-1, -1))
    }

}

But this full screen only happens when I have to manually tap on full screen mode in the tweet's media player. What I actually want to do is when I play the video, it should start in full screen view.

Answer 1

Maybe you could make a bridge to the JS side with addJavascriptInterface?

Pseudocode Examples

Step 1: Create a JavaScript Interface

class WebAppInterface(private val activity: Activity) {
    @JavascriptInterface
    fun onVideoPlay() {
        // Trigger full-screen mode here
    }
}

// In your activity or fragment where WebView is set up
webView.addJavascriptInterface(WebAppInterface(this), "AndroidInterface")

Step 2: Inject JavaScript into WebView

val jsCode = """
    (function() {
        var videos = document.querySelectorAll('video');
        videos.forEach(function(video) {
            video.addEventListener('play', function() {
                AndroidInterface.onVideoPlay();
            });
        });
    })();
"""

webView.loadUrl("javascript:$jsCode")

Step 3: Modify CustomChromeClient

class CustomChromeClient(val activity: ComponentActivity) : WebChromeClient() {
    // existing code...

    fun triggerFullScreen() {
        // Implement logic to trigger full-screen mode
        // This might involve mimicking what onShowCustomView does
    }
}

Caveats

• Cross-Origin Content: Twitter's embedded content might be protected against cross-origin scripting, making it hard to attach event listeners directly to the video play button.
• Dynamic Content: Twitter's content is dynamically loaded, so your JavaScript needs to account for content that might be loaded after your script runs.
• Dependence on Twitter's Implementation: If Twitter changes the way its embedded content works, your solution might break.