Fix #2132: Chapter List Page Issues (#2232) - Blur and lock thumbnails of inactive cards using realtimeblurview #2293

viktoriias · 2020-12-20T04:55:47Z

Explanation

This PR fixes part of issue #2132. Here I blur and lock thumbnails of inactive cards.

Checklist

The PR title starts with "Fix #bugnum: ", followed by a short, clear summary of the changes. (If this PR fixes part of an issue, prefix the title with "Fix part of #bugnum: ...".)
The PR explanation includes the words "Fixes #bugnum: ..." (or "Fixes part of #bugnum" if the PR only partially fixes an issue).
The PR follows the style guide.
The PR does not contain any unnecessary auto-generated code from Android Studio.
The PR is made from a branch that's not called "develop".
The PR is made from a branch that is up-to-date with "develop".
The PR's branch is based on "develop" and not on any other branch.
The PR is assigned to an appropriate reviewer in both the Assignees and the Reviewers sections.

viktoriias · 2020-12-20T05:24:29Z

Mock
Result:

viktoriias · 2020-12-20T05:29:21Z

@anandwana001 Please review. Not sure how to handle Bazel failure, did I not include something in this PR?

anandwana001

Thanks, @viktoriias
Did the first pass.

anandwana001 · 2020-12-20T15:10:33Z

app/build.gradle

@@ -109,6 +109,7 @@ dependencies {
      'androidx.work:work-runtime-ktx:2.4.0',
      'com.chaos.view:pinview:1.4.3',
      'com.github.bumptech.glide:glide:4.11.0',
+      'com.github.mmin18:realtimeblurview:1.2.1',


We need to check a few things before using the new library:

is it working correctly with Bazel?

Is there any license issue?

Do we have any other core android approach where we can make it work without any library?

anandwana001 · 2020-12-20T15:11:47Z

app/build.gradle

@@ -109,6 +109,7 @@ dependencies {
      'androidx.work:work-runtime-ktx:2.4.0',
      'com.chaos.view:pinview:1.4.3',
      'com.github.bumptech.glide:glide:4.11.0',
+      'com.github.mmin18:realtimeblurview:1.2.1',


As for Bazel, we also need to add a dependency to app module-level BUILD.bazel file.
https://github.com/oppia/oppia-android/blob/develop/app/BUILD.bazel

anandwana001 · 2020-12-20T15:13:28Z

app/src/main/res/drawable/ic_baseline_lock_24.xml

+  android:width="80dp"
+  android:height="80dp"
+  android:autoMirrored="true"
+  android:tint="#FFFFFFFF"


Is this a core android icon?
We can use dimens.xml , color.xml res file for values.

I got it in vector assets. Other ic_ vector images don't use dimens.xml , color.xml. Is that a convention?

anandwana001 · 2020-12-20T15:17:16Z

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

@@ -53,6 +53,38 @@
          app:layout_constraintTop_toTopOf="parent"
          app:lessonThumbnail="@{viewModel.chapterThumbnail}" />

+        <com.github.mmin18.widget.RealtimeBlurView


How about if we use Render script?

reference - https://futurestud.io/tutorials/glide-custom-transformation

@rt4914 Any thoughts on this?

I looked into the RealtimeBlurView Library it uses RenderScript so it would be better rather using the library

@anandwana001 I personally prefer non-third-party-library solution. I think we should create a separate PR using this script and see results and based on that finalise things.

BenHenning · 2020-12-22T06:53:28Z

To clarify on one point, @mschanteltc should we always be using the same colored overlay/lock for all chapter thumbnails? If so, what color + opacity should we be using for that overlay? Also, which material lock icon should we be using for the lock?

viktoriias · 2020-12-22T07:10:10Z

To clarify on one point, @mschanteltc should we always be using the same colored overlay/lock for all chapter thumbnails? If so, what color + opacity should we be using for that overlay? Also, which material lock icon should we be using for the lock?

Original requirements are here: #2132 (comment)
I didn't do "thumbnail's background", but I think I can extract it using chapterThumbnail.backgroundColorRgb. It would look like this:

BenHenning · 2020-12-22T07:56:05Z

Thanks for clarifying @viktoriias! @mschanteltc does the image linked above look correct per the spec?

mschanteltc · 2020-12-22T20:46:05Z

Thanks for clarifying @viktoriias! @mschanteltc does the image linked above look correct per the spec?

Thank you @viktoriias. Chapter Thumbnail backgrounds aren't supposed to be white, but I believe your example just used a sample image with a white background. Once the images are actually assigned to one of our preselected background colors, the blur would be set to the image's background color and work as intended.

Luffy18346 · 2021-01-05T19:49:45Z

Hi @viktoriias, are you still working on this?
If your work is done and review is required then please remove yourself from the assignee and assign appropriate person.

Also, please write appropriate PR description. For reference, you can take a look at the instructions mentioned in point 4. https://github.com/oppia/oppia-android/wiki#instructions-for-making-a-code-change

viktoriias · 2021-01-05T20:17:13Z

Hi @viktoriias, are you still working on this?
If your work is done and review is required then please remove yourself from the assignee and assign appropriate person.

Also, please write appropriate PR description. For reference, you can take a look at the instructions mentioned in point 4. https://github.com/oppia/oppia-android/wiki#instructions-for-making-a-code-change

@Luffy18346 I will update or un-assign myself by the end of the week.

Luffy18346 · 2021-01-06T14:18:14Z

Hi @viktoriias, are you still working on this?
If your work is done and review is required then please remove yourself from the assignee and assign appropriate person.
Also, please write appropriate PR description. For reference, you can take a look at the instructions mentioned in point 4. https://github.com/oppia/oppia-android/wiki#instructions-for-making-a-code-change

@Luffy18346 I will update or un-assign myself by the end of the week.

Ok but please update PR Explanation before un-assigning yourself.

viktoriias added 2 commits December 19, 2020 20:44

Blur and lock thumbnails of inactive cards.

9cf0ccc

Blur and lock thumbnails of inactive cards.

4e3dd16

viktoriias requested a review from BenHenning as a code owner December 20, 2020 04:55

Arrange dependencies alphabetically.

1cf3ee5

anandwana001 suggested changes Dec 20, 2020

View reviewed changes

anandwana001 assigned viktoriias Dec 20, 2020

viktoriias added 3 commits December 20, 2020 10:49

Add bazel dependency.

b789878

Add bazel dependency.

8df414c

Add bazel dependency.

7d04b05

Blur the thumbnail with the exact color of the its background.

8a97bc3

rt4914 mentioned this pull request Jan 6, 2021

All chapters in stories should show different backgrounds #2397

Closed

viktoriias changed the title ~~Fix #2132: Chapter List Page Issues (#2232) - Blur and lock thumbnails of inactive cards~~ Fix #2132: Chapter List Page Issues (#2232) - Blur and lock thumbnails of inactive cards using realtimeblurview Jan 6, 2021

viktoriias closed this Jan 7, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix #2132: Chapter List Page Issues (#2232) - Blur and lock thumbnails of inactive cards using realtimeblurview #2293

Fix #2132: Chapter List Page Issues (#2232) - Blur and lock thumbnails of inactive cards using realtimeblurview #2293

viktoriias commented Dec 20, 2020 •

edited

Loading

viktoriias commented Dec 20, 2020 •

edited

Loading

viktoriias commented Dec 20, 2020

anandwana001 left a comment

anandwana001 Dec 20, 2020

anandwana001 Dec 20, 2020

anandwana001 Dec 20, 2020

viktoriias Dec 20, 2020

anandwana001 Dec 20, 2020

FareesHussain Dec 21, 2020

rt4914 Dec 21, 2020

BenHenning commented Dec 22, 2020

viktoriias commented Dec 22, 2020

BenHenning commented Dec 22, 2020

mschanteltc commented Dec 22, 2020

Luffy18346 commented Jan 5, 2021

viktoriias commented Jan 5, 2021

Luffy18346 commented Jan 6, 2021

Fix #2132: Chapter List Page Issues (#2232) - Blur and lock thumbnails of inactive cards using realtimeblurview #2293

Fix #2132: Chapter List Page Issues (#2232) - Blur and lock thumbnails of inactive cards using realtimeblurview #2293

Conversation

viktoriias commented Dec 20, 2020 • edited Loading

Explanation

Checklist

viktoriias commented Dec 20, 2020 • edited Loading

viktoriias commented Dec 20, 2020

anandwana001 left a comment

Choose a reason for hiding this comment

anandwana001 Dec 20, 2020

Choose a reason for hiding this comment

anandwana001 Dec 20, 2020

Choose a reason for hiding this comment

anandwana001 Dec 20, 2020

Choose a reason for hiding this comment

viktoriias Dec 20, 2020

Choose a reason for hiding this comment

anandwana001 Dec 20, 2020

Choose a reason for hiding this comment

FareesHussain Dec 21, 2020

Choose a reason for hiding this comment

rt4914 Dec 21, 2020

Choose a reason for hiding this comment

BenHenning commented Dec 22, 2020

viktoriias commented Dec 22, 2020

BenHenning commented Dec 22, 2020

mschanteltc commented Dec 22, 2020

Luffy18346 commented Jan 5, 2021

viktoriias commented Jan 5, 2021

Luffy18346 commented Jan 6, 2021

viktoriias commented Dec 20, 2020 •

edited

Loading

viktoriias commented Dec 20, 2020 •

edited

Loading