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

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

@@ -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);
     }
 

app/src/main/java/org/schabi/newpipe/util/PicassoHelper.java

@@ -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;
         }
     }
 }

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>

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>

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>

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" />
 

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" />
 

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" />
 

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"

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>

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>

assets/buddy_channel_item.svg

@@ -1,73 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-    xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="200" height="200" viewBox="0 0 187.5 187.5"
-    id="svg2" version="1.1" inkscape:version="0.92.0 r" sodipodi:docname="buddy_channel_item.svg"
-    inkscape:export-filename="/home/the-scrabi/Projects/NewPipe/app/src/main/res/drawable-nodpi/buddy_channel_item.png"
-    inkscape:export-xdpi="96" inkscape:export-ydpi="96">
-  <defs
-     id="defs4" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="1.6269531"
-     inkscape:cx="-8.1138818"
-     inkscape:cy="101.30232"
-     inkscape:document-units="px"
-     inkscape:current-layer="layer1"
-     showgrid="false"
-     units="px"
-     inkscape:window-width="1920"
-     inkscape:window-height="1012"
-     inkscape:window-x="0"
-     inkscape:window-y="32"
-     inkscape:window-maximized="1" />
-  <metadata
-     id="metadata7">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="Ebene 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(0,-864.86216)">
-    <rect
-       style="opacity:0.997;fill:#999999;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4.6875;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       id="rect4136"
-       width="187.5"
-       height="187.5"
-       x="0"
-       y="864.86218" />
-    <g
-       id="g4487"
-       transform="matrix(0.5625,0,0,0.5625,37.5,418.22093)">
-      <ellipse
-         ry="75"
-         rx="100"
-         cy="1052.3622"
-         cx="100"
-         id="path4152"
-         style="opacity:0.997;fill:#6c6c6c;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-      <circle
-         r="60"
-         cy="942.36218"
-         cx="100"
-         id="path4154"
-         style="opacity:0.997;fill:#6c6c6c;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-    </g>
-  </g>
-</svg>

assets/dummy_thumbnail.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="200px" height="200px" viewBox="0 0 200 200" id="svg2" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <g id="layer1" transform="matrix(1.03744, 0, 0, 0.835106, 0, -678.408142)">
+    <rect style="opacity: 0.997; fill: rgb(153, 153, 153); fill-opacity: 1; fill-rule: nonzero; stroke: none; stroke-width: 5; stroke-miterlimit: 4; stroke-dasharray: none; stroke-opacity: 1;" id="rect4136" width="192.949" height="240" y="812.362"/>
+    <path style="opacity:0.997;fill:#6c6c6c;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" id="path4164" d="M 120.491 931.134 L 98.133 945.904 L 73.02 962.046 L 72.51 933.742 L 72.295 902.173 L 95.163 915.706 L 120.491 931.134 Z" transform="matrix(1, 0.000081, -0.000052, 1, 0.048923, -0.007806)"/>
+  </g>
+</svg>

assets/dummy_thumbnail_playlist.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="200px" height="200px" viewBox="0 0 200 200" id="svg2" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <g id="layer1" transform="matrix(1.03744, 0, 0, 0.835106, 0, -678.408142)">
+    <rect style="opacity: 0.997; fill: rgb(153, 153, 153); fill-opacity: 1; fill-rule: nonzero; stroke: none; stroke-width: 5; stroke-miterlimit: 4; stroke-dasharray: none; stroke-opacity: 1;" id="rect4136" width="192.949" height="240" y="812.362"/>
+    <path style="opacity:0.997;fill:#6c6c6c;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" id="path4164" d="M 110.852 931.134 L 88.494 945.904 L 63.381 962.046 L 62.871 933.742 L 62.656 902.173 L 85.524 915.706 L 110.852 931.134 Z" transform="matrix(1, 0.000081, -0.000052, 1, 0.048923, -0.007025)"/>
+    <path style="opacity:0.997;fill:#6c6c6c;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" id="path-1" d="M 134.95 931.133 L 112.592 945.903 L 87.479 962.045 L 86.969 933.741 L 86.754 902.172 L 109.622 915.705 L 134.95 931.133 Z" transform="matrix(1, 0.000081, -0.000052, 1, 0.048901, -0.008782)"/>
+  </g>
+</svg>