유튜브를 웹뷰로 구성하기 (2)

안드로이드

유튜브를 웹뷰로 구성하기 (2)

bacass 2020. 5. 11. 17:54

유튜브를 웹뷰로 보여주도록 처리를 했는데 사이드 이펙트가 있었습니다.
전체화면 모드로 이동 후 복귀하면 웹뷰에 보여지는 화면 UI가 너무 이상하게 나오는겁니다.
또한 전체화면 모드에서 가로모드로 플레이가 되지 않습니다.

첨부된 소스를 이용하면 전체화면 모드시 가로모드로 전환해서 플레이가 됩니다.
또한 Back key 를 눌러 복귀해도 UI 상에 문제도 발생하지 않습니다.

FullScreenableChromeClient.kt

0.00MB

ProductMidViewHolder.kt

0.01MB

private fun setWebViewYoutube(wvYoutube: WebView, movieId: String) {
    wvYoutube.settings.apply {
        javaScriptEnabled = true
        setAppCacheEnabled(true)
        pluginState = WebSettings.PluginState.ON
    }
    wvYoutube.webChromeClient = object: WebChromeClient() {
        override fun onShowCustomView(view: View?, callback: CustomViewCallback?) {
            super.onShowCustomView(view, callback)
            wvYoutube.visibility = View.GONE
            customViewContainer.visibility = View.VISIBLE
            customViewContainer.addView(view)
        }

        override fun onHideCustomView() {
            super.onHideCustomView()
            wvYoutube.visibility = View.VISIBLE
            customViewContainer.visibility = View.GONE
        }
    }
    wvYoutube.webChromeClient = FullscreenableChromeClient(productActivity)

    var html = getHTML(movieId)
    wvYoutube.loadData(html, "text/html", "UTF-8")
}

fun getHTML(videoId: String): String {
    val html = ("<iframe class=\"youtube-player\" " + "style=\"border: 0; width: 100%; height: 100%;"
            + "padding:0px; margin:0px\" " + "id=\"ytplayer\" type=\"text/html\" "
            + "src=\"http://www.youtube.com/embed/" + videoId
            + "?theme=dark&autohide=2&modestbranding=1&showinfo=0&autoplay=1&rel=0&enablejsapi=1\" frameborder=\"0\" "
            + "allowfullscreen autobuffer " + "controls onclick=\"this.play()\">\n" + "</iframe>\n")
    return html
}

import android.app.Activity
import android.content.Context
import android.content.pm.ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE
import android.content.pm.ActivityInfo.SCREEN_ORIENTATION_PORTRAIT
import android.os.Build
import android.view.MotionEvent
import android.view.View
import android.view.ViewGroup
import android.view.WindowManager
import android.webkit.WebChromeClient
import android.widget.FrameLayout

import androidx.core.content.ContextCompat

class FullscreenableChromeClient(activity: Activity) : WebChromeClient() {
    private var mActivity: Activity? = null

    private var mCustomView: View? = null
    private var mCustomViewCallback: WebChromeClient.CustomViewCallback? = null
    private var mOriginalOrientation: Int = 0
    private var mFullscreenContainer: FrameLayout? = null

    companion object {
        private val COVER_SCREEN_PARAMS = FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)
    }

    init {
        this.mActivity = activity
    }

    override fun onShowCustomView(view: View, callback: WebChromeClient.CustomViewCallback) {

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH) {
            if (mCustomView != null) {
                callback.onCustomViewHidden()
                return
            }

            this.mActivity?.requestedOrientation = SCREEN_ORIENTATION_LANDSCAPE

            mOriginalOrientation = mActivity!!.requestedOrientation
            val decor = mActivity?.window?.decorView as FrameLayout
            mFullscreenContainer = FullscreenHolder(mActivity!!)
            mFullscreenContainer!!.addView(view, COVER_SCREEN_PARAMS)
            decor.addView(mFullscreenContainer, COVER_SCREEN_PARAMS)
            mCustomView = view
            setFullscreen(true)
            mCustomViewCallback = callback
        }

        super.onShowCustomView(view, callback)
    }

    override fun onShowCustomView(view: View, requestedOrientation: Int, callback: WebChromeClient.CustomViewCallback) {
        this.onShowCustomView(view, callback)
    }

    override fun onHideCustomView() {
        if (mCustomView == null) {
            return
        }

        setFullscreen(false)
        val decor = mActivity!!.window.decorView as FrameLayout
        decor.removeView(mFullscreenContainer)
        mFullscreenContainer = null
        mCustomView = null
        mCustomViewCallback!!.onCustomViewHidden()
        mActivity?.requestedOrientation = SCREEN_ORIENTATION_PORTRAIT

    }

    private fun setFullscreen(enabled: Boolean) {

        val win = mActivity!!.window
        val winParams = win.attributes
        val bits = WindowManager.LayoutParams.FLAG_FULLSCREEN
        if (enabled) {
            winParams.flags = winParams.flags or bits
        } else {
            winParams.flags = winParams.flags and bits.inv()
            if (mCustomView != null) {
                mCustomView!!.systemUiVisibility = View.SYSTEM_UI_FLAG_VISIBLE
            }
        }
        win.attributes = winParams
    }

    private class FullscreenHolder(ctx: Context) : FrameLayout(ctx) {
        init {
            setBackgroundColor(ContextCompat.getColor(ctx, android.R.color.black))
        }

        override fun onTouchEvent(evt: MotionEvent): Boolean {
            return true
        }
    }
}