NTV-208: Scrolling transition of the video player (#1461)

* Create motion scene animation for project page tab layout, and create scrolling transition with collapsable ltoolbar * fix green background and npe * Move toolbar into it's own app bar layout * Tests * Fix green background * Linter * no message * - Collapsible header with paralax effect * Scrolling tests * Fix layout * change button to red * change red button * Update screenshot tests * Remove motion layout, fix button order in toolbar * Reformat xml Co-authored-by: Isabel Martin <[email protected]> Co-authored-by: Hadia <[email protected]>
kickstarter · Nov 19, 2021 · 3a6b573 · 3a6b573
1 parent 8bc849a
commit 3a6b573
Show file tree

Hide file tree

Showing 9 changed files with 225 additions and 93 deletions.
diff --git a/app/build.gradle b/app/build.gradle
@@ -273,6 +273,7 @@ dependencies {
     implementation 'com.apollographql.apollo:apollo-runtime:2.5.10'
     implementation 'com.facebook.android:facebook-android-sdk:12.0.1'
     implementation 'com.google.android.play:core-ktx:1.8.1'
+    implementation 'androidx.constraintlayout:constraintlayout:2.1.1'
     final auto_parcel_version = "0.3.1"
     implementation "com.github.frankiesardo:auto-parcel:$auto_parcel_version"
     kapt "com.github.frankiesardo:auto-parcel-processor:$auto_parcel_version"

diff --git a/...ing.ui.components.MediaHeaderShotTest_playButton_whenVisibilityFalse_isGone.png b/...ing.ui.components.MediaHeaderShotTest_playButton_whenVisibilityFalse_isGone.png
diff --git a/...g.ui.components.MediaHeaderShotTest_playButton_whenVisibilityTrue_isVisible.png b/...g.ui.components.MediaHeaderShotTest_playButton_whenVisibilityTrue_isVisible.png
diff --git a/app/src/main/java/com/kickstarter/ui/activities/ProjectPageActivity.kt b/app/src/main/java/com/kickstarter/ui/activities/ProjectPageActivity.kt
@@ -174,7 +174,7 @@ class ProjectPageActivity :
         this.viewModel.outputs.heartDrawableId()
             .compose(bindToLifecycle())
             .compose(Transformers.observeForUI())
-            .subscribe { binding.projectActivityToolbar.heartIcon.setImageDrawable(ContextCompat.getDrawable(this, it)) }
+            .subscribe { binding.heartIcon.setImageDrawable(ContextCompat.getDrawable(this, it)) }
 
         this.viewModel.outputs.managePledgeMenu()
             .compose(bindToLifecycle())
@@ -327,23 +327,37 @@ class ProjectPageActivity :
         this.viewModel.outputs.projectPhoto()
             .compose(bindToLifecycle())
             .observeOn(AndroidSchedulers.mainThread())
-            .subscribe { binding.mediaHeaderLayout.inputs.setProjectPhoto(it) }
+            .subscribe { binding.mediaHeader.inputs.setProjectPhoto(it) }
 
         viewModel.outputs.playButtonIsVisible()
             .compose(bindToLifecycle())
             .compose(Transformers.observeForUI())
-            .subscribe { binding.mediaHeaderLayout.inputs.setPlayButtonVisibility(it) }
+            .subscribe { binding.mediaHeader.inputs.setPlayButtonVisibility(it) }
 
-        binding.mediaHeaderLayout.outputs.playButtonClicks()
+        binding.mediaHeader.outputs.playButtonClicks()
             .compose(bindToLifecycle())
             .compose(Transformers.observeForUI())
             .subscribe { viewModel.inputs.playVideoButtonClicked() }
 
         viewModel.outputs.backingViewGroupIsVisible()
             .compose(bindToLifecycle())
             .compose(Transformers.observeForUI())
-            .subscribe { binding.backingGroup.visibility = it.toVisibility() }
+            .subscribe {
+                binding.backingGroup.visibility = it.toVisibility()
+            }
 
+        viewModel.outputs.hideVideoPlayer()
+            .compose(bindToLifecycle())
+            .compose(Transformers.observeForUI())
+            .subscribe {
+                if (it) {
+                    binding.projectAppBarLayout.setExpanded(false)
+                }
+            }
+
+        binding.backIcon.setOnClickListener {
+            (this as BaseActivity<*>).back()
+        }
         setClickListeners()
     }
 
@@ -516,13 +530,13 @@ class ProjectPageActivity :
                     setFragmentsState(expand)
                     if (expand) {
                         binding.pledgeContainerLayout.pledgeActionButtonsLayout.visibility = View.GONE
-                        binding.projectActivityToolbar.toolbar.importantForAccessibility = View.IMPORTANT_FOR_ACCESSIBILITY_NO_HIDE_DESCENDANTS
+                        binding.projectActivityToolbar.importantForAccessibility = View.IMPORTANT_FOR_ACCESSIBILITY_NO_HIDE_DESCENDANTS
                         binding.pledgeContainerLayout.pledgeToolbar.requestFocus()
                     } else {
                         binding.pledgeContainerLayout.pledgeContainer.visibility = View.GONE
-                        binding.projectActivityToolbar.toolbar.importantForAccessibility = View.IMPORTANT_FOR_ACCESSIBILITY_YES
+                        binding.projectActivityToolbar.importantForAccessibility = View.IMPORTANT_FOR_ACCESSIBILITY_YES
                         if (animate) {
-                            binding.projectActivityToolbar.toolbar.requestFocus()
+                            binding.projectActivityToolbar.requestFocus()
                         }
                     }
                 }
@@ -631,11 +645,11 @@ class ProjectPageActivity :
             this.viewModel.inputs.reloadProjectContainerClicked()
         }
 
-        binding.projectActivityToolbar.heartIcon.setOnClickListener {
+        binding.heartIcon.setOnClickListener {
             this.viewModel.inputs.heartButtonClicked()
         }
 
-        binding.projectActivityToolbar.shareIcon.setOnClickListener {
+        binding.shareIcon.setOnClickListener {
             this.viewModel.inputs.shareButtonClicked()
         }
     }

diff --git a/app/src/main/java/com/kickstarter/viewmodels/projectpage/ProjectPageViewModel.kt b/app/src/main/java/com/kickstarter/viewmodels/projectpage/ProjectPageViewModel.kt
@@ -244,6 +244,8 @@ interface ProjectPageViewModel {
         fun backingViewGroupIsVisible(): Observable<Boolean>
 
         fun updateEnvCommitmentsTabVisibility(): Observable<Boolean>
+
+        fun hideVideoPlayer(): Observable<Boolean>
     }
 
     class ViewModel(@NonNull val environment: Environment) :
@@ -316,6 +318,7 @@ interface ProjectPageViewModel {
         private val startThanksActivity = PublishSubject.create<Pair<CheckoutData, PledgeData>>()
         private val startVideoActivity = PublishSubject.create<Project>()
         private val updateFragments = BehaviorSubject.create<ProjectData>()
+        private val hideVideoPlayer = BehaviorSubject.create<Boolean>()
         private val tabSelected = PublishSubject.create<Int>()
         private val projectPhoto = PublishSubject.create<String>()
         private val playButtonIsVisible = PublishSubject.create<Boolean>()
@@ -642,6 +645,11 @@ interface ProjectPageViewModel {
                     this.projectData.onNext(it.first)
                 }
 
+            tabSelected
+                .map { it != 0 }
+                .compose(bindToLifecycle())
+                .subscribe { this.hideVideoPlayer.onNext(it) }
+
             val backedProject = currentProject
                 .filter { it.isBacking }
 
@@ -1102,6 +1110,9 @@ interface ProjectPageViewModel {
         override fun updateEnvCommitmentsTabVisibility(): Observable<Boolean> = this
             .updateEnvCommitmentsTabVisibility
 
+        @NonNull
+        override fun hideVideoPlayer(): Observable<Boolean> = this.hideVideoPlayer
+
         @NonNull
         override fun updateFragments(): Observable<ProjectData> = this.updateFragments
 

diff --git a/app/src/main/res/drawable/ic_toolbar_button_background.xml b/app/src/main/res/drawable/ic_toolbar_button_background.xml
@@ -0,0 +1,11 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="35dp"
+    android:height="35dp"
+    android:viewportWidth="35"
+    android:viewportHeight="35">
+  <path
+      android:pathData="M17.5,0L17.5,0A17.5,17.5 0,0 1,35 17.5L35,17.5A17.5,17.5 0,0 1,17.5 35L17.5,35A17.5,17.5 0,0 1,0 17.5L0,17.5A17.5,17.5 0,0 1,17.5 0z"
+      android:strokeAlpha="0.9"
+      android:fillColor="#ffffff"
+      android:fillAlpha="0.9"/>
+</vector>