Merge pull request #16848 from wordpress-mobile/try/re-enable-large-recommended-theme-screenshots

[Site Design Revamp] Re-enable large recommended theme screenshots

Author: antonis

RELEASE-NOTES.txt

@@ -2,6 +2,7 @@
 
 20.5
 -----
+* [*] Use larger thumbnail previews for recommended themes during site creation [https://github.com/wordpress-mobile/WordPress-Android/pull/16848]
 
 
 20.4

WordPress/src/main/java/org/wordpress/android/ui/sitecreation/theme/SiteDesignRecommendedDimensionProvider.kt

@@ -15,4 +15,9 @@ class SiteDesignRecommendedDimensionProvider @Inject constructor(private val con
 
     override val rowHeight: Int
         get() = contextProvider.getContext().resources.getDimensionPixelSize(dimen.hpp_recommended_row_height)
+
+    // For larger images, we must provide a scale of 2.0 to the API due to a limitation in MShots and our endpoint
+    // integration (currently, MShots only supports a scale value of 1 or 2).
+    override val scale: Double
+        get() = if (1f < contextProvider.getContext().resources.displayMetrics.density) 2.0 else 1.0
 }

WordPress/src/main/java/org/wordpress/android/ui/sitecreation/usecases/FetchHomePageLayoutsUseCase.kt

@@ -7,7 +7,7 @@ import org.wordpress.android.fluxc.generated.ThemeActionBuilder
 import org.wordpress.android.fluxc.store.ThemeStore
 import org.wordpress.android.fluxc.store.ThemeStore.FetchStarterDesignsPayload
 import org.wordpress.android.fluxc.store.ThemeStore.OnStarterDesignsFetched
-import org.wordpress.android.ui.sitecreation.theme.SiteDesignPickerDimensionProvider
+import org.wordpress.android.ui.sitecreation.theme.SiteDesignRecommendedDimensionProvider
 import org.wordpress.android.util.config.BetaSiteDesignsFeatureConfig
 import javax.inject.Inject
 import kotlin.coroutines.Continuation
@@ -17,7 +17,7 @@ import kotlin.coroutines.suspendCoroutine
 class FetchHomePageLayoutsUseCase @Inject constructor(
     val dispatcher: Dispatcher,
     @Suppress("unused") val themeStore: ThemeStore,
-    private val thumbDimensionProvider: SiteDesignPickerDimensionProvider,
+    private val thumbDimensionProvider: SiteDesignRecommendedDimensionProvider,
     private val betaSiteDesigns: BetaSiteDesignsFeatureConfig
 ) {
     enum class GROUP(val key: String) {
@@ -31,16 +31,18 @@ class FetchHomePageLayoutsUseCase @Inject constructor(
         if (continuation != null) {
             throw IllegalStateException("Fetch already in progress.")
         }
-        val payload = if (betaSiteDesigns.isEnabled()) FetchStarterDesignsPayload(
-                thumbDimensionProvider.previewWidth.toFloat(),
-                thumbDimensionProvider.previewHeight.toFloat(),
-                thumbDimensionProvider.scale.toFloat(),
-                GROUP.STABLE.key, GROUP.BETA.key
-        ) else FetchStarterDesignsPayload(
-                thumbDimensionProvider.previewWidth.toFloat(),
-                thumbDimensionProvider.previewHeight.toFloat(),
-                thumbDimensionProvider.scale.toFloat()
-        )
+
+        val previewScale = thumbDimensionProvider.scale.toFloat()
+        // Since dimensions are scaled in the WPCOM endpoint for MShots, we divide by the scale factor here to avoid
+        // having the dimensions scaled twice.
+        @Suppress("ForbiddenComment")
+        // TODO: revisit this after the endpoint is modified to scale on the client instead.
+        val previewWidth = thumbDimensionProvider.previewWidth.toFloat() / previewScale
+        val previewHeight = thumbDimensionProvider.previewHeight.toFloat() / previewScale
+        val groups = if (betaSiteDesigns.isEnabled()) arrayOf(GROUP.STABLE.key, GROUP.BETA.key) else emptyArray()
+        @Suppress("SpreadOperator")
+        val payload = FetchStarterDesignsPayload(previewWidth, previewHeight, previewScale, *groups)
+
         return suspendCoroutine { cont ->
             continuation = cont
             dispatcher.dispatch(ThemeActionBuilder.newFetchStarterDesignsAction(payload))

WordPress/src/main/res/values/dimens.xml

@@ -663,9 +663,9 @@
     <dimen name="hpp_layout_card_height">260dp</dimen>
     <dimen name="hpp_layout_card_width">200dp</dimen>
     <dimen name="hpp_layouts_row_height">330dp</dimen>
-    <dimen name="hpp_recommended_card_height">260dp</dimen>
-    <dimen name="hpp_recommended_card_width">200dp</dimen>
-    <dimen name="hpp_recommended_row_height">350dp</dimen>
+    <dimen name="hpp_recommended_card_height">416dp</dimen>
+    <dimen name="hpp_recommended_card_width">320dp</dimen>
+    <dimen name="hpp_recommended_row_height">500dp</dimen>
     <dimen name="hpp_recommended_subtitle_margin">5dp</dimen>
 
     <!-- Site Intent Question -->

WordPress/src/test/java/org/wordpress/android/ui/sitecreation/theme/FetchHomePageLayoutsUseCaseTest.kt

@@ -32,7 +32,7 @@ class FetchHomePageLayoutsUseCaseTest {
 
     @Mock lateinit var dispatcher: Dispatcher
     @Mock lateinit var store: ThemeStore
-    @Mock lateinit var thumbDimensionProvider: SiteDesignPickerDimensionProvider
+    @Mock lateinit var thumbDimensionProvider: SiteDesignRecommendedDimensionProvider
     @Mock lateinit var betaSiteDesigns: BetaSiteDesignsFeatureConfig
 
     private lateinit var useCase: FetchHomePageLayoutsUseCase