From cc7a8fb1a611299bab6b574b75b602b38a23b2d9 Mon Sep 17 00:00:00 2001
From: krlvm <51774833+krlvm@users.noreply.github.com>
Date: Tue, 21 Jun 2022 20:22:39 +0300
Subject: [PATCH] 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
---
 .../fragments/detail/VideoDetailFragment.java |   4 +-
 .../schabi/newpipe/util/PicassoHelper.java    |  17 +++-
 app/src/main/res/drawable-nodpi/buddy.png     | Bin 1168 -> 0 bytes
 .../res/drawable-nodpi/buddy_channel_item.png | Bin 1051 -> 0 bytes
 .../res/drawable-nodpi/dummy_thumbnail.png    | Bin 956 -> 0 bytes
 .../drawable-nodpi/dummy_thumbnail_dark.png   | Bin 105 -> 134 bytes
 .../dummy_thumbnail_playlist.png              | Bin 1225 -> 0 bytes
 app/src/main/res/drawable/buddy.xml           |  31 ++++++++
 app/src/main/res/drawable/dummy_thumbnail.xml |  22 ++++++
 .../res/drawable/dummy_thumbnail_playlist.xml |  30 +++++++
 .../res/layout/list_channel_grid_item.xml     |   2 +-
 .../res/layout/list_channel_mini_item.xml     |   2 +-
 .../res/layout/list_comments_mini_item.xml    |   2 +-
 .../res/layout/picker_subscription_item.xml   |   2 +-
 app/src/main/res/values-night/colors.xml      |   3 +
 app/src/main/res/values/colors.xml            |   3 +
 assets/buddy_channel_item.svg                 |  73 ------------------
 assets/dummy_thumbnail.svg                    |   7 ++
 assets/dummy_thumbnail_playlist.svg           |   8 ++
 19 files changed, 125 insertions(+), 81 deletions(-)
 delete mode 100644 app/src/main/res/drawable-nodpi/buddy.png
 delete mode 100644 app/src/main/res/drawable-nodpi/buddy_channel_item.png
 delete mode 100644 app/src/main/res/drawable-nodpi/dummy_thumbnail.png
 delete mode 100644 app/src/main/res/drawable-nodpi/dummy_thumbnail_playlist.png
 create mode 100644 app/src/main/res/drawable/buddy.xml
 create mode 100644 app/src/main/res/drawable/dummy_thumbnail.xml
 create mode 100644 app/src/main/res/drawable/dummy_thumbnail_playlist.xml
 delete mode 100644 assets/buddy_channel_item.svg
 create mode 100644 assets/dummy_thumbnail.svg
 create mode 100644 assets/dummy_thumbnail_playlist.svg

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
index 278d472d4c6..78f3772e904 100644
--- 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
index aabc459d015..223e8ac9caa 100644
--- 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
deleted file mode 100644
index 8713ee02bfa8cd492bf79ed4730ca4060ceeb631..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1168
zcmV;B1aJF^P)<h;3K|Lk000e1NJLTq0077U0077c00000h%@m*00001b3#c}2<8e~
znE(I)32;bRa{vGh*8l(w*8xH(n|J^K1T{%SK~#9!?c4`?t1u8nVHSLaz%jVvZh}pM
zaS6(5U+*PVGb*3X4*nDuX@=<0lL90_0wh2JBtQZrKmsH{0))Q+36KB@kN`1WfCNZ@
z1W14ch-&wn=^#sG48$_c2GjMv?c9Q>b~j1!&(iVk<Ot+iP7*v>GA*yRLsUHxctK)V
zbrwUKLgK~AqOlZmKgKJ|YYQQFIo?ozuk3;}eY~-(u?X@o$J-OLt0fRsC3shIYX#(-
z<J}D|<{`C&hUCFCWCcBmxiSg4WYAWAF$ZZ=Xe@0_L5>NuCL1%5yBL~_YZH(P`V$pD
zqy|Nz=7uyeXe13Uq?I5_ww#bl3bN7*A4KIKEK_Wd1xQ<PL23cg#DNELkswZ<Ss*#c
z8z=@y35IUzArA={l2>xb3@jDYkVb%~h8CjwU@E7D)L^S7h2&r>r-a;rv3o+u0E`Xk
zAPrb+$RGt+E2toy1Zz?eLH1y7PXrl(xiJmoD!`n$l0ZtZSCT*`U~fzTQ3=?K6#?V~
z12qJY9SpP~fJ|VZ2?3-B1NHPn6pYkqhqN%#Njs#1k@nglYZz&x9WsTHrrIF`7-^^-
z(ua{U?T{2kO0`2Ij3l)~1dJ5>0ucdX86@`ppFO<%W-wA;J7j3tN0jiPaRVc*wL|tW
z(m^}q2qU%LA3lWRpvN%`H1XxgbV~qfVW4BUR<P^6ed5d2+ikcEeX_A9*VFvx*oQE}
zVb@U2+?O$@BMF56`|jwG4ss91?!$1VUE{KMq!5+4KfuiV!qs>(<UjXi?cyOU!dNwq
zJy0BwO9JBLC9LmRwNSa_+ttlMSg!n7I__OK*TBySh)Pbpi}}YGB*hK)qY~}}2;zTK
z!f7EvkX)QNAzd{DS=si13DOoZNQ;Y>0a6bI$P>d_(L(AznCe$_5LNcT*v+jXfvEir
znCq2FKcw!%K>b=X<UE3*h9`}XZY5wWG4FIi>J&yxYb}t60>+zM-w&x0SWt3!Cq&I*
zNwe-fkfsM~>K)$>DFtk5^F~NFgJn&-w?NJrtSh^`9@3_;u;ln!NFBq<;`()vQozzg
z`5MShz}m$2<&X`mZuwHk3YNEi8DtCV+q?vFD`0)1d>(Ru3yJzU$T5Z!#m&=@OA1Fy
zFHb?b49=9RCm;nJYW{yn1*fY12RX-Zs`&IDNDjx!)juH{IM?Q1kXFFCMEf^H4d7q{
z^%vw8PPYFO(j{=RwEF|Hgrlu~hg@SgT73NtGKaG*euZ2GoK0MRfvn(g>z|NL!r^51
z1G0nDl|LYTI9>J~a)jfx-ym~1-r_4nC2+jtE94%|*L;C2;C#z3kRF_`_Zf1A2VFiv
zDtJ)!2~xm==AR%p@Sy%<q~JqBMMrqiDcZw}s%Ql-T15rCsE9`JqEVE=i?S$%7xkh9
iUX(;JyeN*~Ngn~4Opa(%WOX<I0000<MNUMnLSTYK3juZj

diff --git a/app/src/main/res/drawable-nodpi/buddy_channel_item.png b/app/src/main/res/drawable-nodpi/buddy_channel_item.png
deleted file mode 100644
index 64d4cb1a00ccbfe0b0745b3822da3268d6ad935d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1051
zcmeAS@N?(olHy`uVBq!ia0vp^CqS43NHBC5e{=#;oCO|{#S9F5M?jcysy3fAP>`|M
z$uorG8CUd71_tH>o-U3d6}R4;Zxmo);9%JJhx3$K|NgTH#ezx%!PgEjI8j$!K5O|Z
zzLvy2;(yc}-&{ENO`)%0bIaX(=gaM!R6~nC-9PwPV)Ci;kG~avnkTi?=a=2jTl4N{
zx83>Fc`SZLVO{lFf$g#n=dZlDu5RW8EBOcZD);-Ra}@48_}^gXWceW8kKC7nDm?av
z{7}t$snUMO=#NqLMCqU`n}bt=oWDu=2UgEil(xxLHhi++!=AZ&CIl^H4fW#QnYATp
z-6p3wuHM%=xgr;BUAkm~*Fw`!POgnF5?&l>dGbPKx=@gGNm7=gqISuY(;O>>OQu)|
zDq5Fp6BaabN>AogG;e*E$K+Hb5W&qcv*ExL`y-M927R_qIE2){P2ly&x#?`@_^8`9
zg-Iy*n*g`aG+Pzc&MCG>8e9&^Epl)=I^oA9p|5Gv|9_O;FYs6>^>zA1iRm9dwuc(C
zHD=zanXpxM$-BblK7*9o({(RbU6}0qM(zE{jZVSpOW18czUVz*{WmegW?q`K#E&;8
zIozMM@LrYpw@^xI>NEM`BpI9A=8v3S9eR{`I96BZiOuzlqdMoBoK|%@RYxi+A9<^5
zwW<2Je9<Wfh1D~h^NLxeCTk~m{0>uCyzi!yp4gH%GgXh|nsmIJ$}Rs%;$ZVd<&qPs
zt>P~&b376sblSD>L>`vk$|pWayF<HD`9*?;B4?y_!@?GuCk+gI|D5&M7+-9DKjFB5
zBaeKY^BsxCp1*B5f@iL!pSY_aQT$!P$l1ZTUXis)Yj0}=%haD-ngS6oHJ>my*8bpJ
zDRAea_X(MUx-~5p%@2A$3j{SdK2%I$V>9Mg<doof;hdLHsLpTM;OZ#%iC4`2iDL4G
z857zgHf(sJ$Qi+N!r3Gu<CDOL0K+GtaZw-7<{eb(j_)`$P2+xTq>0=K=XbS{$IP4O
z{n?Q9EWx0EHvgt=%|hblFXA#zo8%>#r^fe*&f;-Q{rKYTc1xbzcb$J8XBILuTkltv
z5oR&^XcH35FX-~?gUqFvqkWdPs{=l)e{oXdf!djZXKw!r)ap6^?$Eit+B>((C@Ahr
z%8CD%wr7ifRPy0|&a>oA>)UI$``IM7zB>BV)^x8?{0f`8h6Y=%9gnIuywI@r*jZu|
znvoyGwTrDTQesQewD3gn&#@o>{EqW2>-&>r*LXZ_(Z|zYQa)$A*kiinPNr$lkNR(`
zm;6sR%zC#cI!)?-n#K9myA;1)`|)ty({I&=+su4<5++@__3=@4bX@G?<MO{>s;5ox
STg?c}*bJVoelF{r5}E*aKG6LD

diff --git a/app/src/main/res/drawable-nodpi/dummy_thumbnail.png b/app/src/main/res/drawable-nodpi/dummy_thumbnail.png
deleted file mode 100644
index 86f454186e1f39cf9ca3ac28dd95502fdbce4655..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 956
zcmeAS@N?(olHy`uVBq!ia0y~yU|a=cf8YQT3?*&#{6LDa*vT`5;~7`<OdyA|z$3C4
zsQ5YvGdgL^u3%tbPV{tf45_&F_Acur9dm&;NBJFX9}SK5&RxlsO-tMETyL>oJ0;^v
zbkO&@i;A40S_@}sggCW&t!Uwz8UW%7X@xkchOB7uS`olGH2}z62;_nkpmA}jU-kOz
z?Q<NVS3fQ?b_)IaU>T77ynJ~dP~_Fwoytz3TYq1XT)67y-s}+O@=*J%Z%?i;Mux_3
zttx%jux8czTeWX`0zzf=t(8Met1B)GE?gC5W4~Bx?de}%la}pR;k0Z=9mDFTWjn$`
zFNj=Ub!z6LsL;URn2^Ojg@LhG){9#l-MR`adqqS%^n}QD{)96?Wl{-U-LH!OR=otO
zRE(Y`e_)B`y3nto-Qsg60IAvE!BqKrE0CQfuM(X^i>I|_E!nISGXK@})Aa@JqL$g8
zm}h)>kQeHDc2>Ysn;nZ+MeTdl5Wos#o!Z^fmi4Rp@(R0a^3&@*dbEBXlnuRl__lyn
z$kvL&a|?hT{wv|os`Ye&#8rO&ch7mWLgHnG*aK9*E?oBd!%lXN&;yEws~T?4U2%!8
zGZ1W|y^5RZ-?x4t?_ckKX>j0(Z0M6x$B_N^avJup4{*IV!SU;B-T3be3%P7WzHRvT
zT2`;>NC4{}%cpy^(mWcq62G*+x*om%eZ6_e{Gz<D1+y0HzHXbfV%dKM^;PFJ%d-Px
zeF{FRDy+`>zjHa))zrV$y6Uoi3%n%#7VP>pe=l=;*57T*`9qKWzO`aqa+~mqO>CQ2
z)THPwm^~vpdBvu@-i2Hh<y=>D|K63m`>kT3RDwn0E0NDPwL>%ybA~*haoIV<P=2w)
z)S|7Dp~v%rR(x9SvEtkODqu+E1g%IjEWZ%AwC0W6Rh#U|PNEw;7e@X0r}h;X{|jf`
z-3<)(tv&Yr?pv#_axR?3yB#R28b8Bz>PItuU|?H)Z&(<0e9y%;t!Ks7D}w%g6j_y9
zd%x&~zu$seOMqsVMa~vk_4YR(N9eKgi2-l3#XkMwT{Y!;egH2oIOXC?*T@N(n0)X>
Ym3dv9k!XF~Gf=klboFyt=akR{0K-zPssI20

diff --git a/app/src/main/res/drawable-nodpi/dummy_thumbnail_dark.png b/app/src/main/res/drawable-nodpi/dummy_thumbnail_dark.png
index 02f698918fff753ac9d5bfe6091ac8349435243b..0e73416edeb6371b992c6c150b42d46a1c22f156 100644
GIT binary patch
literal 134
zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx1|;Q0k92}K#X;^)4C~IxyaaMs(j9#r85lP9
zbN@+X1@buyJR*yMny-N{<AnUmIY2?CByV>YhX3vTXZ8bmyq+$OArj%q2?+^5_!$^k
V7#Ru_Qn`T=44$rjF6*2UngBC(9*6({

literal 105
zcmeAS@N?(olHy`uVBq!ia0vp^?m(=;2qYL<GH=-eDb50q$YP-Ubr5EB(wJQV6l6;B
vc6VX;-`;;_Kaj`k>Eakt!I&(;+6**`aRLM5QNh<qKnVs<S3j3^P6<r_LHie5

diff --git a/app/src/main/res/drawable-nodpi/dummy_thumbnail_playlist.png b/app/src/main/res/drawable-nodpi/dummy_thumbnail_playlist.png
deleted file mode 100644
index 9ba84fdb458b9fb7657366203e681dc96c27c4b1..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1225
zcmeAS@N?(olHy`uVBq!ia0y~yU_1uI3>-iK2A&<AF+hs3*vT`5;~7`<OdyA|z$3Dl
zfr0M;2s36~>*Qo$V9E1zaSW-r_2yzD4^RoyhCjTU&MyAT<<Gw$P+96?hg)xki?WpI
zBEjB_D;;hoiy(p~SwO*yD}aJ7i-CfIy&#n^Npu~LZ&-J$9&c3O`d4uJOwVDTYyaN5
z>3;rZUGZhj37hA-&Z3Ve?Q;Lp*yG@)pezZZRs<hw&WLt8_Hk{7wbL=jjhdg|)@@W=
zoO*0Z+xnl9ht(F#3aV|*E4|HUv@B`y?X(Go5_?~5lTGn?yIW@W_pAHV7bhM|P)^~Q
z-Q!lnKUpo`>B|P*hnYQrnlAje`Hk3S|LIAbp7KR{)xjUW9eGv}CnXjKosifj&vP{)
z{F(dzylTf|5>uUyZFrlof^F{pzEkUxCV%AMNDSI2zNq~zhh%cdvoxM%iL(y|@LKVM
zj8;tU@ls6AYRP4AHcj8~jpa7OykiS~Yq<EwHXrmlwkGiA)Est+RR`aEn0$9)j`)cg
zKwZbKRH{7wt=Qt(TdY`hqwa$V+vmgIUrc(-A{qSM6X+IMo~sKiK-RHKHoMN8YnXHR
z;Hd!KU+00=$pWp4ad$gu*1S+k<aN-Nw+hJyHCJ<tqSAccZd0hPGjn&FD=X=*w)o(>
zIX!PnLS(|NY<jJFwT-SRBx_AmmHgYD^|ropg5ipTcV$!79Bh;|`c?DK!>z7z!bj^~
zZ=+f1Q{rrYJ0Hu6Q=7bT>b}GJ{6=YkH`g|%JekfenO*pyt7mzUT|<x6=Se;8r%wQ7
zyG-&=L^SuTjF`NUO>+Nz(U+W(+CO@x_M8ooTwdrYDaq@nHhE&a9MCF8D<dwEXplR8
z|Cn85^hwi5QnycK^2Gi5CuTT4mzck9(!}$YCsqW>yo_L9U1(RTviPS^Ur$ZX;p6|W
zncGadSpV0}?OJ}ynuom&F)JPwd-F;Dy`G<v0u-J6Ra$cQn)@ea`2T;}%$QOVw}0Zs
z_;#RRHBj)ywz}jMo9dJo{|Bo662E_9;elVhJ<E60DJQRfy|YgFaX{1x&2I;a{<<A=
z)x1?VVPm1@?UWjGH_iTciv?_RoKIL-cWjeS(fPK^_t^K8Ip5oyHdrU#c0BfRc80Xm
zvEICJ2FcdYGf(Ote_v<z_Kz`FV%z#fz<BE}U3vSegWE%`mn+{My__QASLSbP@1pwH
z=T@%2t@*>0IbQBJ(j>R>r@XP{JfC-?%^>7C`(3r<)-(T2l)gh!>>E3+i$JRmUbd(d
z&UHSqL)-N>gOT2n`cUKPZ@Ls7e+b?3S0Q<$p6hKEBfb6QnRhuZ9yV*~X%@c-B)fw^
zl8=Knyfu5660>x{f0bKp6AJ4Da_vvtun-5DwxZ_gUcb8=?kYU4`lJSw`}nit+wpHN
v9Drp2gTsXVUlpc1f%7!MjLuF<Sul}d^8QT@?|1{gf$Z^g^>bP0l+XkK#Ah!m

diff --git a/app/src/main/res/drawable/buddy.xml b/app/src/main/res/drawable/buddy.xml
new file mode 100644
index 00000000000..b7d23c4b108
--- /dev/null
+++ 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
new file mode 100644
index 00000000000..5114fda3283
--- /dev/null
+++ 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
new file mode 100644
index 00000000000..683b814c9a6
--- /dev/null
+++ 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
index d9084bbe97d..9f92c35a70e 100644
--- 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
index b66e07a12c5..e03f7c2fa83 100644
--- 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
index 6bd36331101..ba984e0ff94 100644
--- 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
index c858ccc4e1a..f6e5f358799 100644
--- 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
index 99026e70b5f..a0a0e891b3f 100644
--- 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
index 281fd9ce7dc..bbcc5d4bb78 100644
--- 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
deleted file mode 100644
index 4dec41f9d4a..00000000000
--- a/assets/buddy_channel_item.svg
+++ /dev/null
@@ -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>
diff --git a/assets/dummy_thumbnail.svg b/assets/dummy_thumbnail.svg
new file mode 100644
index 00000000000..bdea80b55ba
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/assets/dummy_thumbnail_playlist.svg b/assets/dummy_thumbnail_playlist.svg
new file mode 100644
index 00000000000..bd4b190aae8
--- /dev/null
+++ b/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>
\ No newline at end of file