Fix #161: Exploration player contentcard supports rich-text part -2

app/src/main/java/org/oppia/app/fragment/FragmentComponent.kt

@@ -7,6 +7,7 @@ import org.oppia.app.home.HomeFragment
 import org.oppia.app.player.exploration.ExplorationFragment
 import org.oppia.app.player.state.StateFragment
 import org.oppia.app.player.audio.AudioFragment
+import org.oppia.app.player.content.ContentListFragment
 import org.oppia.app.testing.BindableAdapterTestFragment
 import org.oppia.app.topic.TopicFragment
 import org.oppia.app.topic.conceptcard.ConceptCardFragment
@@ -28,6 +29,7 @@ interface FragmentComponent {
 
   fun inject(audioFragment: AudioFragment)
   fun inject(conceptCardFragment: ConceptCardFragment)
+  fun inject(contentListFragment: ContentListFragment)
   fun inject(explorationFragment: ExplorationFragment)
   fun inject(homeFragment: HomeFragment)
   fun inject(questionPlayerFragment: QuestionPlayerFragment)

app/src/main/java/org/oppia/app/player/content/ContentCardAdapter.kt

@@ -0,0 +1,96 @@
+package org.oppia.app.player.content
+
+import android.content.Context
+import android.text.Spannable
+import android.view.LayoutInflater
+import android.view.ViewGroup
+import androidx.databinding.DataBindingUtil
+import androidx.databinding.ViewDataBinding
+import androidx.databinding.library.baseAdapters.BR
+import androidx.recyclerview.widget.RecyclerView
+import kotlinx.android.synthetic.main.content_card_items.view.*
+import kotlinx.android.synthetic.main.interation_feedback_card_item.view.*
+import org.oppia.app.R
+import org.oppia.app.databinding.ContentCardItemsBinding
+import org.oppia.app.databinding.InterationFeedbackCardItemBinding
+import org.oppia.util.data.HtmlParser
+
+// TODO(#172): Make use of generic data-binding-enabled RecyclerView adapter
+/** Adapter to bind the contents to the [RecyclerView]. It handles rich-text content. */
+class ContentCardAdapter(
+  private val context: Context,
+  private val entity_type: String,
+  private val entity_id: String,
+  val contentList: MutableList<ContentViewModel>
+) : RecyclerView.Adapter<RecyclerView.ViewHolder>() {
+
+  val VIEW_TYPE_CONTENT = 1
+  val VIEW_TYPE_INTERACTION_FEEDBACK = 2
+
+  override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
+    return when (viewType) {
+      VIEW_TYPE_CONTENT -> {
+        val inflater = LayoutInflater.from(parent.getContext())
+        val binding =
+          DataBindingUtil.inflate<ContentCardItemsBinding>(inflater, R.layout.content_card_items, parent, false)
+        ContentViewHolder(binding)
+      }
+      VIEW_TYPE_INTERACTION_FEEDBACK -> {
+        val inflater = LayoutInflater.from(parent.getContext())
+        val binding =
+          DataBindingUtil.inflate<InterationFeedbackCardItemBinding>(
+            inflater,
+            R.layout.interation_feedback_card_item,
+            parent,
+            false
+          )
+        InteractionFeedbackViewHolder(binding)
+      }
+      else -> throw IllegalArgumentException("Invalid view type")
+    }
+  }
+
+  override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
+    when (holder.itemViewType) {
+      VIEW_TYPE_CONTENT -> (holder as ContentViewHolder).bind(contentList!!.get(position).htmlContent.get())
+      VIEW_TYPE_INTERACTION_FEEDBACK -> (holder as InteractionFeedbackViewHolder).bind(contentList!!.get(position).htmlContent.get())
+    }
+  }
+
+  // Determines the appropriate ViewType according to the content_id.
+  override fun getItemViewType(position: Int): Int {
+    return if (!contentList!!.get(position).contentId.get()!!.contains("content") &&
+      !contentList!!.get(position).contentId.get()!!.contains(
+        "Feedback"
+      )
+    ) {
+      VIEW_TYPE_INTERACTION_FEEDBACK
+    } else {
+      VIEW_TYPE_CONTENT
+    }
+  }
+
+  override fun getItemCount(): Int {
+    return contentList!!.size
+  }
+
+  private inner class ContentViewHolder(val binding: ViewDataBinding) : RecyclerView.ViewHolder(binding.root) {
+    internal fun bind(rawString: String?) {
+      binding.setVariable(BR.htmlContent, rawString)
+      binding.executePendingBindings();
+      val html: Spannable = HtmlParser(context, entity_type, entity_id).parseHtml(rawString, binding.root.tv_contents)
+      binding.root.tv_contents.text = html
+    }
+  }
+
+  private inner class InteractionFeedbackViewHolder(val binding: ViewDataBinding) :
+    RecyclerView.ViewHolder(binding.root) {
+    internal fun bind(rawString: String?) {
+      binding.setVariable(BR.htmlContent, rawString)
+      binding.executePendingBindings();
+      val html: Spannable =
+        HtmlParser(context, entity_type, entity_id).parseHtml(rawString, binding.root.tv_interaction_feedback)
+      binding.root.tv_interaction_feedback.text = html
+    }
+  }
+}

app/src/main/java/org/oppia/app/player/content/ContentListFragment.kt

@@ -0,0 +1,42 @@
+package org.oppia.app.player.content
+
+import android.content.Context
+import android.os.Bundle
+import android.util.Log
+import androidx.fragment.app.Fragment
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import android.widget.Button
+
+import androidx.recyclerview.widget.LinearLayoutManager
+import androidx.recyclerview.widget.RecyclerView
+import org.oppia.app.R
+import org.oppia.app.fragment.InjectableFragment
+import org.oppia.data.backends.gae.NetworkModule
+import org.oppia.data.backends.gae.model.GaeExplorationContainer
+import org.oppia.data.backends.gae.model.GaeState
+import org.oppia.data.backends.gae.model.GaeSubtitledHtml
+import retrofit2.Call
+import retrofit2.Callback
+import retrofit2.Response
+import java.lang.Exception
+
+import java.util.ArrayList
+import javax.inject.Inject
+
+/** Fragment that displays contents that supports rich-text. */
+class ContentListFragment : InjectableFragment() {
+
+  @Inject
+  lateinit var contentListFragmentPresenter: ContentListFragmentPresenter
+
+  override fun onAttach(context: Context?) {
+    super.onAttach(context)
+    fragmentComponent.inject(this)
+  }
+
+  override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
+    return contentListFragmentPresenter.handleCreateView(inflater, container)
+  }
+}

app/src/main/java/org/oppia/app/player/content/ContentListFragmentPresenter.kt

@@ -0,0 +1,57 @@
+package org.oppia.app.player.content
+
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import androidx.fragment.app.Fragment
+import androidx.recyclerview.widget.LinearLayoutManager
+import org.oppia.app.databinding.ContentListFragmentBinding
+import org.oppia.app.viewmodel.ViewModelProvider
+import org.oppia.data.backends.gae.model.GaeSubtitledHtml
+import org.oppia.domain.exploration.ExplorationProgressController
+import org.oppia.util.logging.Logger
+import javax.inject.Inject
+
+/** Presenter for [ContentListFragment]. */
+class ContentListFragmentPresenter @Inject constructor(
+  private val fragment: Fragment,
+  private val viewModelProvider: ViewModelProvider<ContentViewModel>,
+  private val logger: Logger
+) {
+
+  private val entity_type: String = "exploration"
+
+  lateinit var contentCardAdapter: ContentCardAdapter
+
+  var contentList: MutableList<ContentViewModel> = ArrayList()
+
+  fun handleCreateView(inflater: LayoutInflater, container: ViewGroup?): View? {
+    val binding = ContentListFragmentBinding.inflate(inflater, container, /* attachToRoot= */ false)
+    binding.let {
+      it.viewModel = getContentViewModel()
+      it.contentFragment = fragment as ContentListFragment
+      it.lifecycleOwner = fragment
+    }
+    binding.recyclerview.apply {
+      binding.recyclerview.layoutManager = LinearLayoutManager(context)
+      contentCardAdapter =
+        ContentCardAdapter(context, entity_type, fragment.arguments!!.getString("exploration_id"), contentList);
+      binding.recyclerview.adapter = contentCardAdapter
+    }
+    getContentList()
+
+    return binding.root
+  }
+
+  private fun getContentList() {
+    getContentViewModel().setContentId(fragment.arguments!!.getString("content_id"))
+    getContentViewModel().setHtmlContent(fragment.arguments!!.getString("htmlContent"))
+    logger.d("ContentListFragment", "htmlcontent: ${fragment.arguments!!.getString("htmlContent")}")
+    contentList.add(getContentViewModel())
+    contentCardAdapter!!.notifyDataSetChanged()
+  }
+
+  private fun getContentViewModel(): ContentViewModel {
+    return viewModelProvider.getForFragment(fragment, ContentViewModel::class.java)
+  }
+}

app/src/main/java/org/oppia/app/player/content/ContentViewModel.kt

@@ -0,0 +1,22 @@
+package org.oppia.app.player.content
+
+import androidx.databinding.ObservableField
+import androidx.lifecycle.ViewModel
+import org.oppia.app.fragment.FragmentScope
+import javax.inject.Inject
+
+/** [ViewModel] for content-card state. */
+@FragmentScope
+class ContentViewModel @Inject constructor() : ViewModel() {
+
+  val contentId = ObservableField<String>("content_id")
+  val htmlContent = ObservableField<String>("html")
+
+  fun setContentId(content_id: String) {
+    contentId.set(content_id)
+  }
+
+  fun setHtmlContent(html: String) {
+    htmlContent.set(html)
+  }
+}

app/src/main/java/org/oppia/app/player/state/StateFragmentPresenter.kt

@@ -1,17 +1,20 @@
 package org.oppia.app.player.state
 
+import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
 import androidx.fragment.app.Fragment
 import androidx.lifecycle.LiveData
 import androidx.lifecycle.Observer
 import androidx.lifecycle.Transformations
+import org.oppia.app.R
 import org.oppia.app.databinding.StateFragmentBinding
 import org.oppia.app.fragment.FragmentScope
 import org.oppia.app.model.CellularDataPreference
 import org.oppia.app.model.EphemeralState
 import org.oppia.app.player.audio.CellularDataDialogFragment
+import org.oppia.app.player.content.ContentListFragment
 import org.oppia.app.viewmodel.ViewModelProvider
 import org.oppia.domain.audio.CellularDialogController
 import org.oppia.domain.exploration.ExplorationProgressController
@@ -33,6 +36,7 @@ class StateFragmentPresenter @Inject constructor(
 
   private var showCellularDataDialog = true
   private var useCellularData = false
+  private val dummyExploration_id: String = "umPkwp0L1M0-"
 
   fun handleCreateView(inflater: LayoutInflater, container: ViewGroup?): View? {
     cellularDialogController.getCellularDataPreference()
@@ -95,9 +99,29 @@ class StateFragmentPresenter @Inject constructor(
   private fun subscribeToCurrentState() {
     ephemeralStateLiveData.observe(fragment, Observer<EphemeralState> { result ->
       logger.d("StateFragment", "getCurrentState: ${result.state.name}")
+      if (getContentListFragment() == null) {
+        val contentListFragment = ContentListFragment()
+        val args = Bundle()
+        args.putString("exploration_id", dummyExploration_id)
+        if (result.state.content.contentId.equals("")) {
+          args.putString("content_id", "content")
+        } else {
+          args.putString("content_id", result.state.content.contentId)
+        }
+        args.putString("htmlContent", result.state.content.html)
+        contentListFragment.arguments = args
+        fragment.childFragmentManager.beginTransaction().add(
+          R.id.content_list_fragment_placeholder,
+          contentListFragment
+        ).commitNow()
+      }
     })
   }
 
+  private fun getContentListFragment(): ContentListFragment? {
+    return fragment.childFragmentManager.findFragmentById(R.id.content_list_fragment_placeholder) as ContentListFragment?
+  }
+
   private val ephemeralStateLiveData: LiveData<EphemeralState> by lazy {
     getEphemeralState()
   }

app/src/main/res/layout/content_card_items.xml

@@ -0,0 +1,22 @@
+<layout xmlns:android="http://schemas.android.com/apk/res/android">
+  <data>
+    <variable
+      name="htmlContent"
+      type="String"/>
+  </data>
+  <RelativeLayout
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:layout_margin="4dp"
+    android:background="@drawable/bg_blue_card"
+    android:orientation="vertical">
+    <TextView
+      android:id="@+id/tv_contents"
+      android:layout_width="match_parent"
+      android:layout_height="wrap_content"
+      android:layout_margin="4dp"
+      android:gravity="left"
+      android:padding="8dp"
+      android:text="@{htmlContent}"/>
+  </RelativeLayout>
+</layout>

app/src/main/res/layout/content_list_fragment.xml

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layout xmlns:android="http://schemas.android.com/apk/res/android"
+        xmlns:app="http://schemas.android.com/apk/res-auto"
+        xmlns:tools="http://schemas.android.com/tools">
+  <data>
+    <variable
+      name="contentFragment"
+      type="org.oppia.app.player.content.ContentListFragment"/>
+    <variable
+      name="viewModel"
+      type="org.oppia.app.player.content.ContentViewModel"/>
+  </data>
+  <androidx.constraintlayout.widget.ConstraintLayout
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    tools:context=".player.content.ContentListFragment">
+    <androidx.recyclerview.widget.RecyclerView
+      android:id="@+id/recyclerview"
+      android:layout_width="match_parent"
+      android:layout_height="wrap_content"
+      android:layout_alignParentTop="true"
+      android:layout_marginStart="8dp"
+      android:layout_marginTop="4dp"
+      android:layout_marginEnd="8dp"
+      android:divider="@android:color/transparent"
+      android:dividerHeight="8dp"
+      app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
+      app:layout_constraintEnd_toEndOf="parent"
+      app:layout_constraintStart_toStartOf="parent"
+      app:layout_constraintTop_toTopOf="parent"/>
+  </androidx.constraintlayout.widget.ConstraintLayout>
+</layout>

app/src/main/res/layout/interation_feedback_card_item.xml

@@ -0,0 +1,25 @@
+<layout xmlns:android="http://schemas.android.com/apk/res/android">
+  <data>
+    <variable
+      name="htmlContent"
+      type="String"/>
+  </data>
+  <RelativeLayout
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:layout_marginLeft="24dp"
+    android:layout_marginTop="4dp"
+    android:layout_marginRight="4dp"
+    android:layout_marginBottom="4dp"
+    android:orientation="vertical">
+    <TextView
+      android:id="@+id/tv_interaction_feedback"
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:layout_alignParentRight="true"
+      android:background="@drawable/bg_white_card"
+      android:gravity="right|center"
+      android:padding="8dp"
+      android:text="@{htmlContent}"/>
+  </RelativeLayout>
+</layout>