Thumbnails used in NewPipe are small (list/grid) mode. This PR facilitates full width thumbnails and dubbed as card mode.

This commit is contained in:
Mahendran 2022-11-03 00:26:10 +05:30
parent 7ea16cfc96
commit bf63b3aca2
24 changed files with 601 additions and 69 deletions

View file

@ -0,0 +1,92 @@
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/itemRoot"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/selectableItemBackground"
android:paddingTop="@dimen/margin_small"
android:paddingBottom="@dimen/spacing_micro"
android:clickable="true"
android:focusable="true">
<ImageView
android:id="@+id/itemThumbnailView"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="fitStart"
android:src="@drawable/placeholder_thumbnail_playlist"
app:layout_constraintDimensionRatio="16:9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="RtlHardcoded" />
<View
android:id="@+id/videoCountOverlay"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/playlist_stream_count_background_color"
app:layout_constraintBottom_toBottomOf="@id/itemThumbnailView"
app:layout_constraintEnd_toEndOf="@id/itemThumbnailView"
app:layout_constraintTop_toTopOf="@id/itemThumbnailView"
app:layout_constraintWidth_percent="0.35" />
<org.schabi.newpipe.views.NewPipeTextView
android:id="@+id/itemStreamCountView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="@color/duration_text_color"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="@id/playIcon"
app:layout_constraintEnd_toEndOf="@id/videoCountOverlay"
app:layout_constraintStart_toStartOf="@id/videoCountOverlay"
app:layout_constraintTop_toTopOf="@id/videoCountOverlay"
app:layout_constraintVertical_chainStyle="packed"
tools:text="314159" />
<!-- playIcon includes 8dp start margin to give center aligned look
when placed next to the video count -->
<androidx.appcompat.widget.AppCompatImageView
android:id="@+id/playIcon"
android:layout_width="@dimen/player_main_buttons_min_width"
android:layout_height="@dimen/player_main_buttons_min_width"
android:layout_marginStart="8dp"
android:src="@drawable/ic_playlist_play"
android:tint="@color/duration_text_color"
app:layout_constraintBottom_toBottomOf="@id/videoCountOverlay"
app:layout_constraintEnd_toEndOf="@id/videoCountOverlay"
app:layout_constraintStart_toStartOf="@id/videoCountOverlay"
app:layout_constraintTop_toBottomOf="@id/itemStreamCountView" />
<org.schabi.newpipe.views.NewPipeTextView
android:id="@+id/itemTitleView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/margin_small"
android:layout_marginTop="@dimen/spacing_nano"
android:layout_marginEnd="@dimen/margin_small"
android:ellipsize="end"
android:maxLines="2"
android:textAppearance="?android:textAppearanceListItem"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/itemThumbnailView"
tools:ignore="RtlHardcoded"
tools:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tristique vitae sem vitae blanditLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum" />
<org.schabi.newpipe.views.NewPipeTextView
android:id="@+id/itemUploaderView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:lines="1"
android:textAppearance="?android:textAppearanceSmall"
app:layout_constraintEnd_toEndOf="@id/itemTitleView"
app:layout_constraintStart_toStartOf="@id/itemTitleView"
app:layout_constraintTop_toBottomOf="@id/itemTitleView"
tools:ignore="RtlHardcoded"
tools:text="Uploader" />
</androidx.constraintlayout.widget.ConstraintLayout>

View file

@ -0,0 +1,99 @@
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/itemRoot"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="@dimen/channel_item_grid_padding"
android:paddingBottom="@dimen/channel_item_grid_padding"
android:background="?attr/selectableItemBackground"
android:clickable="true"
android:focusable="true">
<ImageView
android:id="@+id/itemThumbnailView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="2dp"
android:layout_marginEnd="2dp"
android:scaleType="centerCrop"
android:src="@drawable/placeholder_thumbnail_video"
app:layout_constraintBottom_toTopOf="@+id/itemProgressView"
app:layout_constraintDimensionRatio="16:9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<org.schabi.newpipe.views.NewPipeTextView
android:id="@+id/itemDurationView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="@dimen/video_item_search_duration_margin"
android:layout_marginBottom="@dimen/video_item_search_duration_margin"
android:background="@color/duration_background_color"
android:paddingHorizontal="@dimen/video_item_search_duration_horizontal_padding"
android:paddingVertical="@dimen/video_item_search_duration_vertical_padding"
android:textAllCaps="true"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="@color/duration_text_color"
android:textSize="@dimen/video_item_search_duration_text_size"
app:layout_constraintBottom_toBottomOf="@id/itemThumbnailView"
app:layout_constraintRight_toRightOf="@id/itemThumbnailView"
tools:text="1:09:10" />
<org.schabi.newpipe.views.NewPipeTextView
android:id="@+id/itemVideoTitleView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/margin_small"
android:layout_marginEnd="@dimen/margin_small"
android:ellipsize="end"
android:maxLines="2"
android:layout_marginTop="@dimen/margin_small"
android:textAppearance="?textAppearanceListItem"
app:layout_constraintEnd_toEndOf="@id/itemThumbnailView"
app:layout_constraintStart_toStartOf="@id/itemThumbnailView"
app:layout_constraintTop_toBottomOf="@id/itemThumbnailView"
tools:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tristique vitae sem vitae blanditLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum" />
<org.schabi.newpipe.views.NewPipeTextView
android:id="@+id/itemUploaderView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/spacing_micro"
android:layout_marginEnd="@dimen/margin_small"
android:ellipsize="end"
android:lines="1"
android:includeFontPadding="false"
android:textAppearance="?android:textAppearanceSmall"
app:layout_constraintEnd_toStartOf="@id/itemAdditionalDetails"
app:layout_constraintStart_toStartOf="@id/itemVideoTitleView"
app:layout_constraintTop_toBottomOf="@+id/itemVideoTitleView"
tools:text="Uploader" />
<org.schabi.newpipe.views.NewPipeTextView
android:id="@+id/itemAdditionalDetails"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="1"
android:includeFontPadding="false"
android:textAppearance="?android:textAppearanceSmall"
app:layout_constraintBottom_toBottomOf="@id/itemUploaderView"
app:layout_constraintEnd_toEndOf="@+id/itemVideoTitleView"
app:layout_constraintStart_toEndOf="@id/itemUploaderView"
app:layout_constraintTop_toTopOf="@id/itemUploaderView"
tools:text="2 years ago • 10M views" />
<org.schabi.newpipe.views.AnimatedProgressBar
android:id="@+id/itemProgressView"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="0dp"
android:layout_height="4dp"
android:progressDrawable="?progress_horizontal_drawable"
app:layout_constraintBottom_toBottomOf="@id/itemThumbnailView"
app:layout_constraintEnd_toEndOf="@+id/itemThumbnailView"
app:layout_constraintStart_toStartOf="@+id/itemThumbnailView" />
</androidx.constraintlayout.widget.ConstraintLayout>

View file

@ -0,0 +1,96 @@
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/itemRoot"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/margin_normal"
android:layout_marginBottom="@dimen/margin_small"
android:background="?attr/selectableItemBackground"
android:clickable="true"
android:focusable="true">
<ImageView
android:id="@+id/itemThumbnailView"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
android:src="@drawable/placeholder_thumbnail_video"
app:layout_constraintDimensionRatio="16:9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="RtlHardcoded" />
<org.schabi.newpipe.views.NewPipeTextView
android:id="@+id/itemDurationView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="@dimen/spacing_nano"
android:layout_marginBottom="@dimen/spacing_nano"
android:background="@color/duration_background_color"
android:paddingLeft="@dimen/video_item_search_duration_horizontal_padding"
android:paddingTop="@dimen/video_item_search_duration_vertical_padding"
android:paddingRight="@dimen/video_item_search_duration_horizontal_padding"
android:paddingBottom="@dimen/video_item_search_duration_vertical_padding"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="@color/duration_text_color"
android:textSize="@dimen/video_item_search_duration_text_size"
app:layout_constraintBottom_toBottomOf="@id/itemThumbnailView"
app:layout_constraintEnd_toEndOf="@id/itemThumbnailView"
tools:ignore="RtlHardcoded"
tools:text="1:09:10" />
<ImageView
android:id="@+id/itemHandle"
android:layout_width="48dp"
android:layout_height="36dp"
android:contentDescription="@string/detail_drag_description"
android:paddingLeft="@dimen/video_item_search_image_right_margin"
android:scaleType="center"
android:src="@drawable/ic_drag_handle"
app:layout_constraintEnd_toEndOf="@id/itemThumbnailView"
app:layout_constraintTop_toBottomOf="@id/itemThumbnailView"
tools:ignore="RtlHardcoded,RtlSymmetry" />
<org.schabi.newpipe.views.NewPipeTextView
android:id="@+id/itemVideoTitleView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_below="@id/itemThumbnailView"
android:layout_marginStart="@dimen/margin_small"
android:layout_marginTop="@dimen/spacing_nano"
android:layout_marginEnd="@dimen/spacing_micro"
android:ellipsize="end"
android:maxLines="2"
android:textAppearance="?android:textAppearanceListItem"
app:layout_constraintEnd_toStartOf="@id/itemHandle"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/itemThumbnailView"
tools:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tristique..." />
<org.schabi.newpipe.views.NewPipeTextView
android:id="@+id/itemAdditionalDetails"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_below="@+id/itemVideoTitleView"
android:layout_marginTop="@dimen/spacing_nano"
android:lines="1"
android:textAppearance="?android:attr/textAppearanceSmall"
app:layout_constraintEnd_toEndOf="@id/itemVideoTitleView"
app:layout_constraintStart_toStartOf="@id/itemVideoTitleView"
app:layout_constraintTop_toBottomOf="@id/itemVideoTitleView"
tools:text="Uploader" />
<org.schabi.newpipe.views.AnimatedProgressBar
android:id="@+id/itemProgressView"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="wrap_content"
android:layout_height="4dp"
android:progressDrawable="?progress_horizontal_drawable"
app:layout_constraintBottom_toBottomOf="@id/itemThumbnailView"
app:layout_constraintEnd_toEndOf="@id/itemThumbnailView"
app:layout_constraintStart_toStartOf="@id/itemThumbnailView" />
</androidx.constraintlayout.widget.ConstraintLayout>

View file

@ -3,4 +3,7 @@
(such as screen margins) for screens with more than 820dp of available width. This
would include 7" and 10" devices in landscape (~960dp and ~1280dp respectively). -->
<dimen name="activity_horizontal_margin">64dp</dimen>
<dimen name="video_item_grid_thumbnail_image_width">280dp</dimen>
<dimen name="video_item_grid_thumbnail_image_height">160dp</dimen>
</resources>

View file

@ -1,5 +1,13 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Common dimensions -->
<dimen name="margin_normal">16dp</dimen>
<dimen name="margin_small">8dp</dimen>
<dimen name="margin_large">32dp</dimen>
<dimen name="spacing_normal">8dp</dimen>
<dimen name="spacing_micro">4dp</dimen>
<dimen name="spacing_nano">2dp</dimen>
<!-- Menu Drawer Dimensions -->
<dimen name="drawer_header_content_min_height">120dp</dimen>
<dimen name="drawer_header_padding_top">16dp</dimen>

View file

@ -1263,16 +1263,19 @@
<string name="list_view_mode_auto_key">auto</string>
<string name="list_view_mode_list_key">list</string>
<string name="list_view_mode_grid_key">grid</string>
<string name="list_view_mode_card_key">card</string>
<string-array name="list_view_mode_values">
<item>@string/list_view_mode_auto_key</item>
<item>@string/list_view_mode_list_key</item>
<item>@string/list_view_mode_grid_key</item>
<item>@string/list_view_mode_card_key</item>
</string-array>
<string-array name="list_view_mode_description">
<item>@string/auto</item>
<item>@string/list</item>
<item>@string/grid</item>
<item>@string/card</item>
</string-array>
<string name="tablet_mode_key">tablet_mode</string>

View file

@ -550,6 +550,7 @@
<string name="list_view_mode">List view mode</string>
<string name="list">List</string>
<string name="grid">Grid</string>
<string name="card">Card</string>
<string name="auto">Auto</string>
<!-- Seekbar Preview Thumbnail-->
<string name="seekbar_preview_thumbnail_title">Seekbar thumbnail preview</string>