blallo
/
fenix
1
0
Fork 0
Code Releases Activity

For #10321: Wire up play and pause buttons in tab tray (#10422)

master
David Walsh 2020-05-20 16:50:58 -05:00 committed by GitHub
parent 477493e197
commit 346b4aa3fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 252 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/src/main/java/org/mozilla/fenix/HomeActivity.kt
View File

@ -80,8 +80,8 @@ import org.mozilla.fenix.utils.RunWhenReadyQueue
import mozilla.components.concept.tabstray.TabsTray
import mozilla.components.browser.tabstray.TabsAdapter
import mozilla.components.browser.tabstray.BrowserTabsTray
import mozilla.components.browser.tabstray.DefaultTabViewHolder
import org.mozilla.fenix.tabtray.TabTrayFragmentDirections
import org.mozilla.fenix.tabtray.TabTrayViewHolder
/**
* The main activity of the application. The application is primarily a single Activity (this one)
@ -222,14 +222,12 @@ open class HomeActivity : LocaleAwareAppCompatActivity() {
}.asView()
TabsTray::class.java.name -> {
val layout = LinearLayoutManager(context)
val adapter = TabsAdapter { parentView, tabsTray ->
DefaultTabViewHolder(
LayoutInflater.from(parentView.context).inflate(
val adapter = TabsAdapter { parentView, _ ->
TabTrayViewHolder(
LayoutInflater.from(this).inflate(
R.layout.tab_tray_item,
parentView,
false),
tabsTray
false)
)
}
val decoration = DividerItemDecoration(

160
app/src/main/java/org/mozilla/fenix/tabtray/TabTrayViewHolder.kt 100644
View File

@ -0,0 +1,160 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
package org.mozilla.fenix.tabtray
import android.view.View
import android.widget.ImageButton
import android.widget.ImageView
import android.widget.TextView
import androidx.appcompat.widget.AppCompatImageButton
import androidx.core.content.ContextCompat
import mozilla.components.browser.state.state.MediaState
import mozilla.components.browser.tabstray.TabViewHolder
import mozilla.components.browser.tabstray.thumbnail.TabThumbnailView
import mozilla.components.concept.tabstray.Tab
import mozilla.components.concept.tabstray.TabsTray
import mozilla.components.feature.media.ext.pauseIfPlaying
import mozilla.components.feature.media.ext.playIfPaused
import mozilla.components.support.base.observer.Observable
import mozilla.components.support.ktx.kotlin.tryGetHostFromUrl
import org.mozilla.fenix.R
import org.mozilla.fenix.components.metrics.Event
import org.mozilla.fenix.ext.components
import org.mozilla.fenix.ext.increaseTapArea
import org.mozilla.fenix.ext.removeAndDisable
import org.mozilla.fenix.ext.removeTouchDelegate
import org.mozilla.fenix.ext.showAndEnable
import org.mozilla.fenix.ext.toTab
import org.mozilla.fenix.theme.ThemeManager
/**
* A RecyclerView ViewHolder implementation for "tab" items.
*/
class TabTrayViewHolder(itemView: View) : TabViewHolder(itemView) {
private val iconView: ImageView? = itemView.findViewById(R.id.mozac_browser_tabstray_icon)
private val titleView: TextView = itemView.findViewById(R.id.mozac_browser_tabstray_title)
private val closeView: AppCompatImageButton = itemView.findViewById(R.id.mozac_browser_tabstray_close)
private val thumbnailView: TabThumbnailView = itemView.findViewById(R.id.mozac_browser_tabstray_thumbnail)
private val urlView: TextView? = itemView.findViewById(R.id.mozac_browser_tabstray_url)
private val playPauseButtonView: ImageButton = itemView.findViewById(R.id.play_pause_button)
override var tab: Tab? = null
/**
* Displays the data of the given session and notifies the given observable about events.
*/
override fun bind(tab: Tab, isSelected: Boolean, observable: Observable<TabsTray.Observer>) {
this.tab = tab
// Basic text
updateTitle(tab)
updateUrl(tab)
updateCloseButtonDescription(tab.title)
// Drawables and theme
updateBackgroundColor(isSelected)
thumbnailView.setImageBitmap(tab.thumbnail)
iconView?.setImageBitmap(tab.icon)
// Media state
playPauseButtonView.increaseTapArea(PLAY_PAUSE_BUTTON_EXTRA_DPS)
val session = itemView.context?.components?.core?.sessionManager?.findSessionById(tab.id)
with(playPauseButtonView) {
invalidate()
when (session?.toTab(itemView.context)?.mediaState) {
MediaState.State.PAUSED -> {
showAndEnable()
contentDescription =
context.getString(R.string.mozac_feature_media_notification_action_play)
setImageDrawable(
androidx.appcompat.content.res.AppCompatResources.getDrawable(
context,
R.drawable.tab_tray_play_with_background
)
)
}
MediaState.State.PLAYING -> {
showAndEnable()
contentDescription =
context.getString(R.string.mozac_feature_media_notification_action_pause)
setImageDrawable(
androidx.appcompat.content.res.AppCompatResources.getDrawable(
context,
R.drawable.tab_tray_pause_with_background
)
)
}
MediaState.State.NONE -> {
removeTouchDelegate()
removeAndDisable()
}
}
}
playPauseButtonView.setOnClickListener {
val mState = session?.toTab(itemView.context)?.mediaState
when (mState) {
MediaState.State.PLAYING -> {
itemView.context.components.analytics.metrics.track(Event.TabMediaPause)
itemView.context.components.core.store.state.media.pauseIfPlaying()
}
MediaState.State.PAUSED -> {
itemView.context.components.analytics.metrics.track(Event.TabMediaPlay)
itemView.context.components.core.store.state.media.playIfPaused()
}
MediaState.State.NONE -> throw AssertionError(
"Play/Pause button clicked without play/pause state."
)
}
}
itemView.setOnClickListener {
observable.notifyObservers { onTabSelected(tab) }
}
closeView.setOnClickListener {
observable.notifyObservers { onTabClosed(tab) }
}
}
private fun updateTitle(tab: Tab) {
val title = if (tab.title.isNotEmpty()) {
tab.title
} else {
tab.url
}
titleView.text = title
}
private fun updateUrl(tab: Tab) {
urlView?.text = tab.url.tryGetHostFromUrl()
}
private fun updateBackgroundColor(isSelected: Boolean) {
val itemBackground = if (isSelected) {
R.attr.tabTrayItemSelectedBackground
} else {
R.attr.tabTrayItemBackground
}
itemView.setBackgroundColor(
ContextCompat.getColor(
itemView.context,
ThemeManager.resolveAttribute(itemBackground, itemView.context)
)
)
}
private fun updateCloseButtonDescription(title: String) {
closeView.contentDescription =
closeView.context.getString(R.string.close_tab_title, title)
}
companion object {
private const val PLAY_PAUSE_BUTTON_EXTRA_DPS = 24
}
}

30
app/src/main/res/drawable/tab_tray_pause_with_background.xml 100644
View File

@ -0,0 +1,30 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<size
android:width="24dp"
android:height="24dp" />
<!-- Vertical pause lines -->
<solid android:color="@color/tab_tray_item_media_stroke" />
<!-- Outer circle border -->
<stroke android:color="@color/tab_tray_item_media_stroke"
android:width="2dp"/>
</shape>
</item>
<item>
<vector
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<!-- Background color of the circle -->
<path
android:fillColor="?tabTrayItemMediaBackground"
android:pathData="M12,2a10,10 0,1 0,10 10A10,10 0,0 0,12 2zM10.5,16.125a0.375,0.375 0,0 1,-0.375 0.375h-2.25A0.375,0.375 0,0 1,7.5 16.125v-8.25A0.375,0.375 0,0 1,7.875 7.5h2.25A0.375,0.375 0,0 1,10.5 7.875zM16.5,16.125a0.375,0.375 0,0 1,-0.375 0.375h-2.25a0.375,0.375 0,0 1,-0.375 -0.375v-8.25A0.375,0.375 0,0 1,13.875 7.5h2.25A0.375,0.375 0,0 1,16.5 7.875z"/>
</vector>
</item>
</layer-list>

30
app/src/main/res/drawable/tab_tray_play_with_background.xml 100644
View File

@ -0,0 +1,30 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<size
android:width="24dp"
android:height="24dp" />
<!-- Vertical pause lines -->
<solid android:color="@color/tab_tray_item_media_stroke" />
<!-- Outer circle border -->
<stroke android:color="@color/tab_tray_item_media_stroke"
android:width="2dp"/>
</shape>
</item>
<item>
<vector
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<!-- Background color of the circle -->
<path
android:fillColor="?tabTrayItemMediaBackground"
android:pathData="M12,22a10,10 0,1 1,10 -10,10 10,0 0,1 -10,10zM10,16.363l6,-3.5a1,1 0,0 0,0 -1.732l-6,-3.5A1,1 0,0 0,8.5 8.5v7a1,1 0,0 0,1.5 0.863z"/>
</vector>
</item>
</layer-list>

8
app/src/main/res/layout/fragment_tab_tray.xml
View File

@ -34,13 +34,7 @@
app:layout_constraintBottom_toTopOf="@+id/save_to_collection_button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
mozac:tabsTrayItemBackgroundColor="?tabTrayItemBackground"
mozac:tabsTrayItemTextColor="?tabTrayItemText"
mozac:tabsTraySelectedItemBackgroundColor="?tabTrayItemSelectedBackground"
mozac:tabsTraySelectedItemTextColor="?tabTrayItemText"
mozac:tabsTrayItemUrlTextColor="?tabTrayItemUrl"
mozac:tabsTraySelectedItemUrlTextColor="?tabTrayItemUrl"/>
app:layout_constraintTop_toTopOf="parent" />
<include
layout="@layout/save_to_collection_button"

17
app/src/main/res/layout/tab_tray_item.xml
View File

@ -8,6 +8,20 @@
android:layout_width="match_parent"
android:layout_height="88dp">
<ImageButton
android:id="@+id/play_pause_button"
android:layout_width="24dp"
android:layout_height="24dp"
android:background="?attr/selectableItemBackgroundBorderless"
android:contentDescription="@string/mozac_feature_media_notification_action_pause"
android:elevation="10dp"
android:visibility="gone"
android:layout_marginTop="4dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="80dp"
app:layout_constraintStart_toStartOf="@id/mozac_browser_tabstray_card"
app:srcCompat="@drawable/play_with_background" />
<androidx.cardview.widget.CardView
android:id="@+id/mozac_browser_tabstray_card"
android:layout_width="92dp"
@ -44,6 +58,7 @@
android:textSize="16sp"
android:paddingTop="22dp"
android:paddingStart="16dp"
android:textColor="?tabTrayItemText"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintEnd_toStartOf="@id/mozac_browser_tabstray_close"
app:layout_constraintStart_toEndOf="@id/mozac_browser_tabstray_card"
@ -58,6 +73,7 @@
android:lines="1"
android:textSize="14sp"
android:paddingStart="16dp"
android:textColor="?tabTrayItemUrl"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintEnd_toStartOf="@id/mozac_browser_tabstray_close"
app:layout_constraintStart_toEndOf="@id/mozac_browser_tabstray_card"
@ -70,6 +86,7 @@
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:tint="?tabTrayItemText"
android:contentDescription="@string/close_tab"
android:background="?android:attr/selectableItemBackgroundBorderless"
app:srcCompat="@drawable/mozac_ic_close" />

1
app/src/main/res/values-night/colors.xml
View File

@ -52,6 +52,7 @@
<color name="tab_tray_item_selected_background_normal_theme">@color/tab_tray_item_selected_background_dark_theme</color>
<color name="tab_tray_toolbar_background_normal_theme">@color/tab_tray_toolbar_background_dark_theme</color>
<color name="tab_tray_item_divider_normal_theme">@color/tab_tray_item_divider_dark_theme</color>
<color name="tab_tray_item_media_background_normal_theme">@color/tab_tray_item_media_background_dark_theme</color>
<!-- Collection icons-->
<color name="collection_icon_color_violet">@color/collection_icon_color_violet_dark_theme</color>

1
app/src/main/res/values/attrs.xml
View File

@ -57,6 +57,7 @@
<attr name="tabTrayItemSelectedBackground" format="reference" />
<attr name="tabTrayToolbarBackground" format="reference" />
<attr name="tabTrayItemDivider" format="reference" />
<attr name="tabTrayItemMediaBackground" format="reference" />
<declare-styleable name="TrackingProtectionCategory">
<attr name="categoryItemTitle" format="reference" />

5
app/src/main/res/values/colors.xml
View File

@ -66,6 +66,8 @@
<color name="tab_tray_item_selected_background_light_theme">@color/violet_70_12a</color>
<color name="tab_tray_toolbar_background_light_theme">@color/light_grey_10</color>
<color name="tab_tray_item_divider_light_theme">@color/light_grey_30</color>
<color name="tab_tray_item_media_stroke">#ffffff</color>
<color name="tab_tray_item_media_background_light_theme">#312A65</color>
<!-- Dark theme color palette -->
<color name="primary_text_dark_theme">#FBFBFE</color>
@ -115,6 +117,7 @@
<color name="tab_tray_item_selected_background_dark_theme">@color/violet_50_32a</color>
<color name="tab_tray_toolbar_background_dark_theme">@color/dark_grey_50</color>
<color name="tab_tray_item_divider_dark_theme">@color/dark_grey_10</color>
<color name="tab_tray_item_media_background_dark_theme">#9059FF</color>
<!-- Private theme color palette -->
<color name="primary_text_private_theme">#FBFBFE</color>
@ -163,6 +166,7 @@
<color name="tab_tray_item_selected_background_private_theme">@color/violet_50_32a</color>
<color name="tab_tray_toolbar_background_private_theme">@color/ink_50</color>
<color name="tab_tray_item_divider_private_theme">@color/dark_grey_10</color>
<color name="tab_tray_item_media_background_private_theme">#9059FF</color>
<!-- Normal theme colors for light mode -->
<color name="primary_text_normal_theme">@color/primary_text_light_theme</color>
@ -210,6 +214,7 @@
<color name="tab_tray_item_selected_background_normal_theme">@color/tab_tray_item_selected_background_light_theme</color>
<color name="tab_tray_toolbar_background_normal_theme">@color/tab_tray_toolbar_background_light_theme</color>
<color name="tab_tray_item_divider_normal_theme">@color/tab_tray_item_divider_light_theme</color>
<color name="tab_tray_item_media_background_normal_theme">@color/tab_tray_item_media_background_light_theme</color>
<!-- Bookmark buttons -->
<color name="bookmark_favicon_background">#DFDFE3</color>

2
app/src/main/res/values/styles.xml
View File

@ -79,6 +79,7 @@
<item name="tabTrayItemSelectedBackground">@color/tab_tray_item_selected_background_normal_theme</item>
<item name="tabTrayToolbarBackground">@color/tab_tray_toolbar_background_normal_theme</item>
<item name="tabTrayItemDivider">@color/tab_tray_item_divider_normal_theme</item>
<item name="tabTrayItemMediaBackground">@color/tab_tray_item_media_background_normal_theme</item>
<!-- Drawables -->
<item name="fenixLogo">@drawable/ic_logo_wordmark_normal</item>
@ -203,6 +204,7 @@
<item name="tabTrayItemSelectedBackground">@color/tab_tray_item_selected_background_private_theme</item>
<item name="tabTrayToolbarBackground">@color/tab_tray_toolbar_background_private_theme</item>
<item name="tabTrayItemDivider">@color/tab_tray_item_divider_private_theme</item>
<item name="tabTrayItemMediaBackground">@color/tab_tray_item_media_background_private_theme</item>
<!-- Drawables -->
<item name="fenixLogo">@drawable/ic_logo_wordmark_private</item>