Improve image placeholders

- 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
TeamNewPipe · Jul 14, 2022 · cc7a8fb · cc7a8fb
1 parent 70e3c98
commit cc7a8fb
Show file tree

Hide file tree

Showing 19 changed files with 125 additions and 81 deletions.
diff --git a/app/src/main/java/org/schabi/newpipe/fragments/detail/VideoDetailFragment.java b/app/src/main/java/org/schabi/newpipe/fragments/detail/VideoDetailFragment.java
@@ -714,7 +714,7 @@ private View.OnTouchListener getOnControlsTouchListener() {
     }
 
     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 @@ private void updateOverlayData(@Nullable final String overlayTitle,
         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);
     }
 

diff --git a/app/src/main/java/org/schabi/newpipe/util/PicassoHelper.java b/app/src/main/java/org/schabi/newpipe/util/PicassoHelper.java
@@ -104,6 +104,10 @@ public static RequestCreator loadThumbnail(final String url) {
         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 void onPrepareLoad(final Drawable placeHolderDrawable) {
 
 
     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;
         }
     }
 }
diff --git a/app/src/main/res/drawable-nodpi/buddy.png b/app/src/main/res/drawable-nodpi/buddy.png
diff --git a/app/src/main/res/drawable-nodpi/buddy_channel_item.png b/app/src/main/res/drawable-nodpi/buddy_channel_item.png
diff --git a/app/src/main/res/drawable-nodpi/dummy_thumbnail.png b/app/src/main/res/drawable-nodpi/dummy_thumbnail.png
diff --git a/app/src/main/res/drawable-nodpi/dummy_thumbnail_dark.png b/app/src/main/res/drawable-nodpi/dummy_thumbnail_dark.png
diff --git a/app/src/main/res/drawable-nodpi/dummy_thumbnail_playlist.png b/app/src/main/res/drawable-nodpi/dummy_thumbnail_playlist.png
diff --git a/app/src/main/res/drawable/buddy.xml b/app/src/main/res/drawable/buddy.xml
@@ -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>
diff --git a/app/src/main/res/drawable/dummy_thumbnail.xml b/app/src/main/res/drawable/dummy_thumbnail.xml
@@ -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>
diff --git a/app/src/main/res/drawable/dummy_thumbnail_playlist.xml b/app/src/main/res/drawable/dummy_thumbnail_playlist.xml
@@ -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>
diff --git a/app/src/main/res/layout/list_channel_grid_item.xml b/app/src/main/res/layout/list_channel_grid_item.xml
@@ -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" />
 

diff --git a/app/src/main/res/layout/list_channel_mini_item.xml b/app/src/main/res/layout/list_channel_mini_item.xml
@@ -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" />
 

diff --git a/app/src/main/res/layout/list_comments_mini_item.xml b/app/src/main/res/layout/list_comments_mini_item.xml
@@ -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" />
 

diff --git a/app/src/main/res/layout/picker_subscription_item.xml b/app/src/main/res/layout/picker_subscription_item.xml
@@ -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"

diff --git a/app/src/main/res/values-night/colors.xml b/app/src/main/res/values-night/colors.xml
@@ -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>
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
@@ -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>

diff --git a/assets/buddy_channel_item.svg b/assets/buddy_channel_item.svg
diff --git a/assets/dummy_thumbnail.svg b/assets/dummy_thumbnail.svg
diff --git a/assets/dummy_thumbnail_playlist.svg b/assets/dummy_thumbnail_playlist.svg