Fix part #17,#382: Hi fi topic audio bar

[nikitamarysolomanpvt]

Explanation

Hi fi topic audio bar

High-fi Checklist

• Seekbar and its animation

• AudioBar along with Volume icon in toolbar

Issue Link

#17

Mock Link

https://xd.adobe.com/spec/e2239cf4-9cde-4c08-5296-25316c1f0a14-9412/screen/9ae3d04d-9845-4b75-abf8-8f69e8823fb1/PM-IN-AU-Playing-2-/

GIF

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.

[veena14cs]

In Pixel 3a Xl device gap is too much between play button and seekbar and also between language. Please check in the screenshot.

[veena14cs]

@mschanteltc can we have lighter background for audio bar or seekbar and thumb color lighter then the background. Because seekbar is not clearly visible on audiobar.

[nikitamarysolomanpvt]

In Pixel 3a Xl device gap is too much between play button and seekbar and also between language. Please check in the screenshot.

Done..

[rt4914]

This looks good and discussed with @nikitamarysolomanpvt earlier, the audiobar does have issues, which will be picked up once we get clarifications from Chantel.

[mschanteltc]

I updated the colors of the seekbar so that the played time range is white and remaining time range is #2D4A9D with a "multiply" blend mode, resulting in a #081661 color. The audio thumb is also changed to #FFFFFF with a drop shadow (#000000, opacity: 20%) with x-offset: 0, y-offset: 3, blur: 3.

[nikitamarysolomanpvt]

I updated the colors of the seekbar so that the played time range is white and remaining time range is #2D4A9D with a "multiply" blend mode, resulting in a #081661 color. The audio thumb is also changed to #FFFFFF with a drop shadow (#000000, opacity: 20%) with x-offset: 0, y-offset: 3, blur: 3.

Please see the drop-shadow
opacity:54%

drop-shadow opacity:20%

Please let me know which one you prefer ... If you want me to use the image that you have provided .. i may use that also if this is not looking good...

[mschanteltc]

I updated the colors of the seekbar so that the played time range is white and remaining time range is #2D4A9D with a "multiply" blend mode, resulting in a #081661 color. The audio thumb is also changed to #FFFFFF with a drop shadow (#000000, opacity: 20%) with x-offset: 0, y-offset: 3, blur: 3.

Please see the drop-shadow
opacity:54%

drop-shadow opacity:20%

Please let me know which one you prefer ... If you want me to use the image that you have provided .. i may use that also if this is not looking good...

I think the audio thumb with the 54% opacity is looking great! It's more evident that it appears above the scrub and has a "tappable" appearance.

[nikitamarysolomanpvt]

I updated the colors of the seekbar so that the played time range is white and remaining time range is #2D4A9D with a "multiply" blend mode, resulting in a #081661 color. The audio thumb is also changed to #FFFFFF with a drop shadow (#000000, opacity: 20%) with x-offset: 0, y-offset: 3, blur: 3.

Please see the drop-shadow
opacity:54%

drop-shadow opacity:20%

Please let me know which one you prefer ... If you want me to use the image that you have provided .. i may use that also if this is not looking good...

I think the audio thumb with the 54% opacity is looking great! It's more evident that it appears above the scrub and has a "tappable" appearance.

Ok then iam not using the svg image that i requested you.

[mschanteltc]

I updated the colors of the seekbar so that the played time range is white and remaining time range is #2D4A9D with a "multiply" blend mode, resulting in a #081661 color. The audio thumb is also changed to #FFFFFF with a drop shadow (#000000, opacity: 20%) with x-offset: 0, y-offset: 3, blur: 3.

Please see the drop-shadow
opacity:54%

drop-shadow opacity:20%

Please let me know which one you prefer ... If you want me to use the image that you have provided .. i may use that also if this is not looking good...

I think the audio thumb with the 54% opacity is looking great! It's more evident that it appears above the scrub and has a "tappable" appearance.

Ok then iam not using the svg image that i requested you.

LGTM

[rt4914]

@nikitamarysolomanpvt I tried to play the audio, the audio-bar is visible but it is not playable anymore. It maybe low-fi issue as well, but still needs some investigation.

[veena14cs]

Remove this extra space.

[veena14cs]

LGTM one nit change.

[rt4914]

LGTM

[nikitamarysolomanpvt]

@nikitamarysolomanpvt I tried to play the audio, the audio-bar is visible but it is not playable anymore. It maybe low-fi issue as well, but still needs some investigation.

@rt4914 Which topic you tried. Please be specific when you mention such issues... is this issue there for all topics or in specific topic?

[rt4914]

@nikitamarysolomanpvt I tried to play the audio, the audio-bar is visible but it is not playable anymore. It maybe low-fi issue as well, but still needs some investigation.

@rt4914 Which topic you tried. Please be specific when you mention such issues... is this issue there for all topics or in specific topic?

I checked on all topics and it was not working. But on giving a second look actually it was working on Real device and it was failing on Emulator. That's why I approved it in second pass.

[nikitamarysolomanpvt]

@nikitamarysolomanpvt I tried to play the audio, the audio-bar is visible but it is not playable anymore. It maybe low-fi issue as well, but still needs some investigation.

@rt4914 Which topic you tried. Please be specific when you mention such issues... is this issue there for all topics or in specific topic?

I checked on all topics and it was not working. But on giving a second look actually it was working on Real device and it was failing on Emulator. That's why I approved it in second pass.

@rt4914 I checked and it's working perfectly on both devices and emulator... PTAL

[rt4914]

@nikitamarysolomanpvt I tried to play the audio, the audio-bar is visible but it is not playable anymore. It maybe low-fi issue as well, but still needs some investigation.

@rt4914 Which topic you tried. Please be specific when you mention such issues... is this issue there for all topics or in specific topic?

I checked on all topics and it was not working. But on giving a second look actually it was working on Real device and it was failing on Emulator. That's why I approved it in second pass.

@rt4914 I checked and it's working perfectly on both devices and emulator... PTAL

On further investigation it was found that it is failing on Android API 19.

[rt4914]

@nikitamarysolomanpvt I tried to play the audio, the audio-bar is visible but it is not playable anymore. It maybe low-fi issue as well, but still needs some investigation.

@rt4914 Which topic you tried. Please be specific when you mention such issues... is this issue there for all topics or in specific topic?

I checked on all topics and it was not working. But on giving a second look actually it was working on Real device and it was failing on Emulator. That's why I approved it in second pass.

@rt4914 I checked and it's working perfectly on both devices and emulator... PTAL

On further investigation it was found that it is failing on Android API 19.

I have filed this as an issue #475

[mschanteltc]

I updated the colors of the seekbar so that the played time range is white and remaining time range is #2D4A9D with a "multiply" blend mode, resulting in a #081661 color. The audio thumb is also changed to #FFFFFF with a drop shadow (#000000, opacity: 20%) with x-offset: 0, y-offset: 3, blur: 3.

Please see the drop-shadow
opacity:54%

drop-shadow opacity:20%

Please let me know which one you prefer ... If you want me to use the image that you have provided .. i may use that also if this is not looking good...

I think the audio thumb with the 54% opacity is looking great! It's more evident that it appears above the scrub and has a "tappable" appearance.

Ok then iam not using the svg image that i requested you.

LGTM

Accessibility Scanner Results: Oppia - 2019-11-25-11:25:39

Item label
org.oppia.app:id/sbAudioProgress
This item may not have a label readable by screen readers.

Touch target
org.oppia.app:id/tvAudioLanguage

@mschanteltc Could you please suggest ...
This item's width is 46dp. Consider making the width of this touch target 48dp or larger.

Hi Nikita,

I fixed the language selector button to be 48 px in width. LMK what you think.

[nikitamarysolomanpvt]

Thats already done. I set it as 48dp

…

On Wed, 27 Nov 2019 at 12:46 AM, Chantel ***@***.***> wrote: I updated the colors of the seekbar so that the played time range is white and remaining time range is #2D4A9D with a "multiply <https://en.wikipedia.org/wiki/Blend_modes#Multiply>" blend mode, resulting in a #081661 color. The audio thumb is also changed to #FFFFFF with a drop shadow (#000000, opacity: 20%) with x-offset: 0, y-offset: 3, blur: 3. Please see the drop-shadow opacity:54% [image: small] <https://user-images.githubusercontent.com/54615666/69404142-8171f600-0d22-11ea-9cbf-998c97889b0b.png> drop-shadow opacity:20% [image: small-2] <https://user-images.githubusercontent.com/54615666/69403378-71f1ad80-0d20-11ea-9582-1cf1c30eef9b.png> Please let me know which one you prefer ... If you want me to use the image that you have provided .. i may use that also if this is not looking good... I think the audio thumb with the 54% opacity is looking great! It's more evident that it appears above the scrub and has a "tappable" appearance. Ok then iam not using the svg image that i requested you. LGTM Accessibility Scanner Results: Oppia - 2019-11-25-11:25:39 [image: screenshot_Oppia_2019-11-25-11_25_39] <https://user-images.githubusercontent.com/54615666/69516616-2cc7b880-0f78-11ea-8072-232f81d14097.png>Item label org.oppia.app:id/sbAudioProgress This item may not have a label readable by screen readers. Touch target org.oppia.app:id/tvAudioLanguage @mschanteltc <https://github.com/mschanteltc> Could you please suggest ... This item's width is 46dp. Consider making the width of this touch target 48dp or larger. Hi Nikita, I fixed the language selector button to be 48 px in width. LMK what you think. — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#467?email_source=notifications&email_token=ANAV44XUPN6ZF4W5NTKB2UDQVVYZTA5CNFSM4JQA3XIKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEFHEOFY#issuecomment-558778135>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ANAV44RTJUMZ3ZXMVI43E3LQVVYZTANCNFSM4JQA3XIA> .