Sulkta-OSS/straw
3
0
Fork 0
Code Issues 1 Pull requests 2 Projects Releases Packages Wiki Activity Actions

Improve image placeholders

Browse source 
- Show placeholders until the image is loaded because timeout can be very long and missing profile pictures and video thumbnails make app inconvenient to use

- Adapt profile picture and video thumbnail placeholders to light theme

- Replace profile picture and video thumbnail placeholders with vector graphics
This commit is contained in:
krlvm 2022-06-21 20:22:39 +03:00 • committed by Stypox
parent 067239b4f7
commit 175459cd4f
19 changed files with 125 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

4
app/src/main/java/org/schabi/newpipe/fragments/detail/VideoDetailFragment.java
View file

@ -714,7 +714,7 @@ public final class VideoDetailFragment
}
private void initThumbnailViews(@NonNull final StreamInfo info) {
PicassoHelper.loadThumbnail(info.getThumbnailUrl()).tag(PICASSO_VIDEO_DETAILS_TAG)
PicassoHelper.loadDetailsThumbnail(info.getThumbnailUrl()).tag(PICASSO_VIDEO_DETAILS_TAG)
.into(binding.detailThumbnailImageView, new Callback() {
@Override
public void onSuccess() {
@ -2361,7 +2361,7 @@ public final class VideoDetailFragment
binding.overlayTitleTextView.setText(isEmpty(overlayTitle) ? "" : overlayTitle);
binding.overlayChannelTextView.setText(isEmpty(uploader) ? "" : uploader);
binding.overlayThumbnail.setImageResource(R.drawable.dummy_thumbnail_dark);
PicassoHelper.loadThumbnail(thumbnailUrl).tag(PICASSO_VIDEO_DETAILS_TAG)
PicassoHelper.loadDetailsThumbnail(thumbnailUrl).tag(PICASSO_VIDEO_DETAILS_TAG)
.into(binding.overlayThumbnail);
}

17
app/src/main/java/org/schabi/newpipe/util/PicassoHelper.java
View file

@ -104,6 +104,10 @@ public final class PicassoHelper {
return loadImageDefault(url, R.drawable.dummy_thumbnail);
}
public static RequestCreator loadDetailsThumbnail(final String url) {
return loadImageDefault(url, R.drawable.dummy_thumbnail, false);
}
public static RequestCreator loadBanner(final String url) {
return loadImageDefault(url, R.drawable.channel_banner);
}
@ -189,15 +193,24 @@ public final class PicassoHelper {
private static RequestCreator loadImageDefault(final String url, final int placeholderResId) {
return loadImageDefault(url, placeholderResId, true);
}
private static RequestCreator loadImageDefault(final String url, final int placeholderResId,
final boolean showPlaceholderWhileLoading) {
if (!shouldLoadImages || isBlank(url)) {
return picassoInstance
.load((String) null)
.placeholder(placeholderResId) // show placeholder when no image should load
.error(placeholderResId);
} else {
return picassoInstance
final RequestCreator requestCreator = picassoInstance
.load(url)
.error(placeholderResId); // don't show placeholder while loading, only on error
.error(placeholderResId);
if (showPlaceholderWhileLoading) {
requestCreator.placeholder(placeholderResId);
}
return requestCreator;
}
}
}

BIN
app/src/main/res/drawable-nodpi/buddy.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.1 KiB

BIN
app/src/main/res/drawable-nodpi/buddy_channel_item.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1 KiB

BIN
app/src/main/res/drawable-nodpi/dummy_thumbnail.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 956 B

BIN
app/src/main/res/drawable-nodpi/dummy_thumbnail_dark.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 105 B

After

Width:  |  Height:  |  Size: 134 B

Before After
Before After

BIN
app/src/main/res/drawable-nodpi/dummy_thumbnail_playlist.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.2 KiB

31
app/src/main/res/drawable/buddy.xml Normal file
View file

@ -0,0 +1,31 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="200dp"
android:height="200dp"
android:viewportWidth="200"
android:viewportHeight="200">
<path
android:pathData="M0,0h200v200h-200z"
android:strokeAlpha="0.997"
android:strokeWidth="5"
android:fillColor="@color/placeholder_foreground"
android:strokeColor="#00000000"
android:fillType="nonZero"
android:fillAlpha="0.997"/>
<path
android:pathData="M0,200a100,75 0,1 0,200 0a100,75 0,1 0,-200 0z"
android:strokeAlpha="0.997"
android:strokeWidth="5"
android:fillColor="@color/placeholder_background"
android:strokeColor="#00000000"
android:fillType="nonZero"
android:fillAlpha="0.997"/>
<path
android:pathData="M100,90m-60,0a60,60 0,1 1,120 0a60,60 0,1 1,-120 0"
android:strokeAlpha="0.997"
android:strokeWidth="5"
android:fillColor="@color/placeholder_background"
android:strokeColor="#00000000"
android:fillType="nonZero"
android:fillAlpha="0.997"/>
</vector>

22
app/src/main/res/drawable/dummy_thumbnail.xml Normal file
View file

@ -0,0 +1,22 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="200dp"
android:height="200dp"
android:viewportWidth="200"
android:viewportHeight="200">
<path
android:pathData="M0,0l200.173,0l0,200.425l-200.173,0z"
android:strokeAlpha="0.997"
android:strokeWidth="4.6539564"
android:fillColor="@color/placeholder_background"
android:strokeColor="#00000000"
android:fillType="nonZero"
android:fillAlpha="0.997"/>
<path
android:pathData="M125.003,99.189L101.807,111.522L75.753,125.001L75.225,101.364L75.004,75L98.727,86.303L125.003,99.189Z"
android:strokeAlpha="0.997"
android:strokeWidth="5"
android:fillColor="@color/placeholder_foreground"
android:strokeColor="#00000000"
android:fillType="nonZero"
android:fillAlpha="0.997"/>
</vector>

30
app/src/main/res/drawable/dummy_thumbnail_playlist.xml Normal file
View file

@ -0,0 +1,30 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="200dp"
android:height="200dp"
android:viewportWidth="200"
android:viewportHeight="200">
<path
android:pathData="M0,0l200.173,0l0,200.425l-200.173,0z"
android:strokeAlpha="0.997"
android:strokeWidth="4.6539564"
android:fillColor="@color/placeholder_background"
android:strokeColor="#00000000"
android:fillType="nonZero"
android:fillAlpha="1"/>
<path
android:pathData="M115.003,99.189L91.807,111.522L65.753,125.001L65.225,101.364L65.004,75L88.727,86.303L115.003,99.189Z"
android:strokeAlpha="1"
android:strokeWidth="5"
android:fillColor="@color/placeholder_foreground"
android:strokeColor="#00000000"
android:fillType="nonZero"
android:fillAlpha="1"/>
<path
android:pathData="M140.003,99.188L116.807,111.521L90.753,125L90.225,101.363L90.004,75L113.728,86.303L140.003,99.188Z"
android:strokeAlpha="1"
android:strokeWidth="5"
android:fillColor="@color/placeholder_foreground"
android:strokeColor="#00000000"
android:fillType="nonZero"
android:fillAlpha="1"/>
</vector>

2
app/src/main/res/layout/list_channel_grid_item.xml
View file

@ -18,7 +18,7 @@
android:layout_centerHorizontal="true"
android:layout_margin="2dp"
android:contentDescription="@string/detail_uploader_thumbnail_view_description"
android:src="@drawable/buddy_channel_item"
android:src="@drawable/buddy"
app:shapeAppearance="@style/CircularImageView"
tools:ignore="RtlHardcoded" />

2
app/src/main/res/layout/list_channel_mini_item.xml
View file

@ -17,7 +17,7 @@
android:layout_centerVertical="true"
android:layout_marginStart="3dp"
android:layout_marginRight="15dp"
android:src="@drawable/buddy_channel_item"
android:src="@drawable/buddy"
app:shapeAppearance="@style/CircularImageView"
tools:ignore="RtlHardcoded" />

2
app/src/main/res/layout/list_comments_mini_item.xml
View file

@ -17,7 +17,7 @@
android:layout_centerVertical="true"
android:layout_marginStart="3dp"
android:layout_marginRight="15dp"
android:src="@drawable/buddy_channel_item"
android:src="@drawable/buddy"
app:shapeAppearance="@style/CircularImageView"
tools:ignore="RtlHardcoded" />

2
app/src/main/res/layout/picker_subscription_item.xml
View file

@ -22,7 +22,7 @@
android:layout_width="48dp"
android:layout_height="48dp"
app:shapeAppearance="@style/CircularImageView"
tools:src="@drawable/buddy_channel_item" />
tools:src="@drawable/buddy" />
<org.schabi.newpipe.views.NewPipeTextView
android:id="@+id/title_view"

3
app/src/main/res/values-night/colors.xml
View file

@ -2,4 +2,7 @@
<resources>
<color name="contrastColor">@color/white</color>
<color name="defaultIconTint">@color/white</color>
<color name="placeholder_background">#6C6C6C</color>
<color name="placeholder_foreground">#999999</color>
</resources>

3
app/src/main/res/values/colors.xml
View file

@ -6,6 +6,9 @@
<color name="ic_launcher_background">#CD201F</color>
<color name="placeholder_background">#F6F6F6</color>
<color name="placeholder_foreground">#6E6E6E</color>
<!-- Light Theme -->
<color name="light_background_color">#EEEEEE</color>
<color name="light_dialog_background_color">#EEEEEE</color>