Android

The steps below will integrate ParOne into your Android app.

Preflight

Prior to integrating ParOne, make sure the following as been completed:

Your organization has created a feed.

Integrating ParOne

Step 1

For Android apps, use a WebView and load our <script> and the desired <HTML> tags. Below is an example fragment.

private const val arg_id = "id"
private const val arg_feed = "feed"

class SingleBlockFragment : Fragment() {
  private var contentKey: String = ""
  private var feed: String = "Unknown"

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    arguments?.let {
      contentKey = it.getInt(arg_id)
      feed = it.getString(arg_feed) ?: "Unknown"
    }
  }

  override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    val html = """
      <script src='parone.min.js'></script>
      <parone-video-block content-key='$this.contentKey' feed='$this.feed'/>
    """
    val webView = view.findViewById<WebView>(R.id.webview).apply {
      settings.javaScriptEnabled = true
      settings.domStorageEnabled = true
      webChromeClient = WebChromeClient()
      webViewClient = WebViewClient()
    }
    webView.loadDataWithBaseURL(
      "https://sdk.parone.io", html,
      "text/html; charset=UTF-8",
      "UTF-8", ""
    )
  }

  override fun onCreateView(
    inflater: LayoutInflater, container: ViewGroup?,
    savedInstanceState: Bundle?
  ): View? {
    return inflater.inflate(R.layout.fragment_single_block, container, false)
  }

  companion object {
    @JvmStatic
    fun newInstance(id: Int = 0, feed: String? = null) =
      SingleBlockFragment().apply {
        arguments = Bundle().apply {
            putInt(arg_id, id)
            putString(arg_feed, feed)
        }
      }
  }
}

Additional Settings

Change Orientation

To support changing orientation, add the following to your AndroidManifest.xml in the activity tag:

android:configChanges="orientation|keyboardHidden|screenSize"

Allowing Fullscreen

To support fullscreen, see example code below.

NOTE For capturing fullscreen events, seeWebView Events has more information with adding this feature.

Fragment layout:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/mainview"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <WebView
            android:id="@+id/webview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

        </WebView>
    </FrameLayout>
    <FrameLayout
    android:id="@+id/targetview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:visibility="gone">
    </FrameLayout>
</FrameLayout>

Extend the above Kotlin example like so:

private const val arg_id = "id"
private const val arg_feed = "feed"

class SingleBlockFragment : Fragment() {
  private var contentKey: String = ""
  private var feed: String = "Unknown"
  private var targetView: FrameLayout? = null
  private var contentView: FrameLayout? = null
  private var customView: View? = null

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    arguments?.let {
      contentKey = it.getInt(arg_id)
      feed = it.getString(arg_feed) ?: "Unknown"
    }
  }

  override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    contentView = view.findViewById(R.id.mainview);
    targetView = view.findViewById(R.id.targetview);
    val html = """
        <script src='parone.min.js'></script>
        <parone-video-block content-key='$this.contentKey' feed='$this.feed'/>
    """
    val webView = view.findViewById<WebView>(R.id.webview).apply {
      settings.javaScriptEnabled = true
      settings.domStorageEnabled = true
      webChromeClient = object: WebChromeClient() {
        override fun onShowCustomView(view: View, callback: CustomViewCallback) {
            targetView?.addView(view)
            customView = view
            contentView?.setVisibility(View.GONE)
            targetView?.setVisibility(View.VISIBLE)
            targetView?.bringToFront()
        }

        override fun onHideCustomView() {
          customView?.setVisibility(View.GONE)
          targetView?.removeView(customView)
          customView = null
          targetView?.setVisibility(View.GONE)
          contentView?.setVisibility(View.VISIBLE)
        }
      }
      webViewClient = WebViewClient()
    }
    webView.loadDataWithBaseURL(
      "https://sdk.parone.io", html,
      "text/html; charset=UTF-8",
      "UTF-8", ""
    )
  }

  override fun onCreateView(
    inflater: LayoutInflater, container: ViewGroup?,
    savedInstanceState: Bundle?
  ): View? {
    return inflater.inflate(R.layout.fragment_single_block, container, false)
  }

  companion object {
    @JvmStatic
    fun newInstance(id: Int = 0, feed: String? = null) =
      SingleBlockFragment().apply {
        arguments = Bundle().apply {
            putInt(arg_id, id)
            putString(arg_feed, feed)
        }
      }
  }
}