Skip to content

GitLab

T
tangled
Commit 9b4c78a3 authored by Finnur Thorarinsson's avatar Finnur Thorarinsson Committed by Commit Bot
Browse files
Options

[Android] Video Player: UX tweaks to better adhere to spec. 

These were some of the augmentations that came out of a review
session with the UX designer:

- Make sure the Play button disappears while seeking.
- Enlarge the Play/Pause button.
- Fill in the holes of the Play/Pause buttons and change
  the transparency colors.
- Shrink the background gradient and make it non-linear (make
  it tail off quickly towards the end).
- Set Pause image asset as the default icon (to avoid flashing
  from Play to Pause when playback starts).
- Adjust the margins a bit, especially to increase bottom padding
  to lift controls at bottom up a bit and set the proper space
  between them.
- Increase the font for Time Remaining.
- Make the SeekBar track a little thicker.

TBR: bsazonov@chromium.org
Screenshots: https://crbug.com/895776#c47
Bug: 895776, 656015
Change-Id: Id288dc836df4d7b835fd1e148f1d5e0335aca764
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2183936Reviewed-by: default avatarFinnur Thorarinsson <finnur@chromium.org>
Commit-Queue: Finnur Thorarinsson <finnur@chromium.org>
Cr-Commit-Position: refs/heads/master@{#771354}
parent 1599d1be
Hide whitespace changes
Inline Side-by-side
Showing with 84 additions and 30 deletions
chrome/android/chrome_java_resources.gni
View file @ 9b4c78a3
......@@ -844,6 +844,8 @@ chrome_java_resources = [
"java/res/drawable/password_manager_onboarding_illustration02_dark_mode.xml",
"java/res/drawable/password_manager_onboarding_illustration03.xml",
"java/res/drawable/password_manager_onboarding_illustration03_dark_mode.xml",
"java/res/drawable/photo_picker_seekbar_thumb.xml",
"java/res/drawable/photo_picker_seekbar_track.xml",
"java/res/drawable/popup_bg_bottom_tinted.xml",
"java/res/drawable/qr_code.xml",
"java/res/drawable/rating_bar.xml",
......
chrome/android/java/res/drawable/ic_pause_circle_outline_white_24dp.xml
View file @ 9b4c78a3
......@@ -10,6 +10,10 @@
android:viewportHeight="24">
<path
android:fillColor="@color/white_alpha_70"
android:fillColor="@color/black_alpha_65"
android:pathData="M9 16h2V8H9v8zm3-14C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm1-4h2V8h-2v8z" />
<path
android:fillColor="@color/default_primary_color"
android:pathData="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z" />
</vector>
chrome/android/java/res/drawable/ic_play_circle_filled_white_24dp.xml
View file @ 9b4c78a3
......@@ -13,7 +13,10 @@
android:viewportHeight="24">
<path
android:fillColor="@color/white_alpha_70"
android:fillColor="@color/black_alpha_65"
android:pathData="M 10,16.5 v -9 L 16,12 10,16.5 z" />
<path
android:fillColor="@color/default_primary_color"
android:pathData="M 12,2 C 6.475,2 2,6.475 2,12 2,17.525 6.475,22 12,22 17.525,22 22,17.525
22,12 22,6.475 17.525,2 12,2 z M 9.9999998,16.5 v -9 L 16,12 9.9999998,16.5 z" />
22,12 22,6.475 17.525,2 12,2 z M 10,16.5 v -9 L 16,12 10,16.5 z" />
</vector>
chrome/android/java/res/drawable/photo_picker_seekbar_thumb.xml 0 → 100644
View file @ 9b4c78a3
<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright 2020 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<size
android:height="@dimen/photo_picker_seek_bar_thumb_size"
android:width="@dimen/photo_picker_seek_bar_thumb_size" />
<solid android:color="@color/default_primary_color"/>
</shape>
chrome/android/java/res/drawable/photo_picker_seekbar_track.xml 0 → 100644
View file @ 9b4c78a3
<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright 2020 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->
<!-- A SeekBar track is composed of up to three components:
1) A line for showing playback progress (android:id/progress).
2) A line for showing buffering progress (android:id/secondaryProgress).
3) A background element (@android:id/background), which frames the playback and buffering lines,
thereby indicating how much remains of playback and/or buffering.
The buffering progress line (item 2 above) is omitted here, because it is not needed due to the fact
that the videos are all readily available on disk and don't need to be downloaded. -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
<shape android:shape="line">
<stroke
android:color="@color/modern_grey_500"
android:width="@dimen/photo_picker_seek_bar_thickness" />
</shape>
</item>
<!-- @android:id/secondaryProgress can also be added, but is not necessary here. -->
<item android:id="@android:id/progress">
<clip>
<shape android:shape="line">
<stroke
android:color="@color/default_primary_color"
android:width="@dimen/photo_picker_seek_bar_thickness" />
</shape>
</clip>
</item>
</layer-list>
chrome/android/java/res/drawable/video_player_gradient.xml
View file @ 9b4c78a3
......@@ -8,5 +8,7 @@
android:type="linear"
android:angle="90"
android:startColor="@android:color/black"
android:centerColor="@color/black_alpha_30"
android:centerY="0.72"
android:endColor="@android:color/transparent" />
</shape>
chrome/android/java/res/layout/video_player.xml
View file @ 9b4c78a3
......@@ -24,7 +24,7 @@
<FrameLayout
android:id="@+id/video_controls_gradient"
android:layout_width="match_parent"
android:layout_height="128dp"
android:layout_height="88dp"
android:layout_gravity="bottom|start"
android:background="@drawable/video_player_gradient"/>
......@@ -33,9 +33,7 @@
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingBottom="15dp"
android:paddingStart="2dp"
android:paddingEnd="2dp">
android:paddingBottom="16dp">
<LinearLayout
android:id="@+id/fast_forward_message"
android:layout_width="match_parent"
......@@ -68,36 +66,37 @@
<ImageView
android:id="@+id/video_player_play_button"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_width="84dp"
android:layout_height="84dp"
android:layout_gravity="center"
android:contentDescription="@string/accessibility_play_video"
app:srcCompat="@drawable/ic_play_circle_filled_white_24dp" />
android:contentDescription="@string/accessibility_pause_video"
app:srcCompat="@drawable/ic_pause_circle_outline_white_24dp" />
<TextView
android:id="@+id/remaining_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|start"
android:layout_marginBottom="24dp"
android:layout_marginStart="16dp"
android:clickable="true"
android:paddingBottom="24dp"
style="@style/TextAppearance.TextMedium.Primary.Light" />
style="@style/TextAppearance.TextLarge.Primary.Light" />
<ImageView
android:id="@+id/mute"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_width="26dp"
android:layout_height="26dp"
android:layout_marginBottom="24dp"
android:layout_marginEnd="68dp"
android:layout_gravity="bottom|end"
android:layout_marginEnd="76dp"
android:paddingBottom="24dp"
android:contentDescription="@string/accessibility_mute_video"
app:srcCompat="@drawable/ic_volume_on_white_24dp" />
<ImageView
android:id="@+id/fullscreen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_width="26dp"
android:layout_height="26dp"
android:layout_gravity="bottom|end"
android:layout_marginEnd="32dp"
android:paddingBottom="24dp"
android:layout_marginBottom="24dp"
android:layout_marginEnd="16dp"
android:contentDescription="@string/accessibility_full_screen"
app:srcCompat="@drawable/ic_full_screen_white_24dp" />
<SeekBar
......@@ -106,7 +105,8 @@
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:clickable="true"
style="@style/PhotoPicker.SeekBar" />
android:progressDrawable="@drawable/photo_picker_seekbar_track"
android:thumb="@drawable/photo_picker_seekbar_thumb" />
</FrameLayout>
</FrameLayout>
</merge>
chrome/android/java/res/values/dimens.xml
View file @ 9b4c78a3
......@@ -444,6 +444,8 @@
<dimen name="photo_picker_tile_min_size">100dp</dimen>
<dimen name="photo_picker_tile_gap">4dp</dimen>
<dimen name="photo_picker_grainy_thumbnail_size">12dp</dimen>
<dimen name="photo_picker_seek_bar_thickness">4dp</dimen>
<dimen name="photo_picker_seek_bar_thumb_size">12dp</dimen>
<dimen name="photo_picker_video_duration_offset">16dp</dimen>
<!-- Account chooser dialog dimensions -->
......
chrome/android/java/res/values/styles.xml
View file @ 9b4c78a3
......@@ -667,14 +667,6 @@
<item name="android:windowExitAnimation">@null</item>
</style>
<!-- Photo Picker Dialog -->
<style name="PhotoPicker"></style>
<style name="PhotoPicker.SeekBar" parent="Widget.AppCompat.SeekBar">
<item name="android:progressBackgroundTint">@color/modern_grey_600</item>
<item name="android:progressTint">@color/default_primary_color</item>
<item name="android:thumbTint">@color/default_primary_color</item>
</style>
<!-- Contacts Dialog -->
<style name="SuggestionChipContacts" parent="SuggestionChip">
<item name="iconWidth">16dp</item>
......
chrome/android/java/src/org/chromium/chrome/browser/photo_picker/PickerVideoPlayer.java
View file @ 9b4c78a3
......@@ -319,12 +319,14 @@ public class PickerVideoPlayer
public void onStartTrackingTouch(SeekBar seekBar) {
cancelFadeAwayAnimation();
mFastForwardMessage.setVisibility(View.VISIBLE);
mLargePlayButton.setVisibility(View.GONE);
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
fadeAwayVideoControls();
mFastForwardMessage.setVisibility(View.GONE);
mLargePlayButton.setVisibility(View.VISIBLE);
}
private void showOverlayControls(boolean animateAway) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment