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 278d472d4..78f3772e9 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 @@ 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); } 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 aabc459d0..223e8ac9c 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 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; } } } 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)b~j1!&(iVkGA*yRLsUHxctK)V zbrwUKLgK~AqOlZmKgKJ|YYQQFIo?ozuk3;}eY~-(u?X@o$J-OLt0fRsC3shIYX#(- zNuCL1%5yBL~_YZH(P`V$pD zqy|Nz=7uyeXe13Uq?I5_ww#bl3bN7*A4KIKEK_Wd1xQxb3@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(0a6bI$P>d_(L(AznCe$_5LNcT*v+jXfvEir znCq2FKcw!%K>b=XJ&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%`|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<2Je9uCyzi!yp4gH%GgXh|nsmIJ$}Rs%;$ZVd<&qPs zt>P~&b376sblSD>L>`vk$|pWayFmy*8bpJ zDRAea_X(MUx-~5p%@2A$3j{SdK2%I$V>9Mg0=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?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`oJ0;^v zbkO&@i;A40S_@}sggCW&t!Uwz8UW%7X@xkchOB7uS`olGH2}z62;_nkpmA}jU-kOz z?QT77ynJ~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`YerO&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{GzzjHa))zrV$y6Uoi3%n%#7VP>pe=l=;*57T*`9qKWzO`aqa+~mqO>CQ2 z)THPwm^~vpdBvu@-i2HhD|K63m`>kT3RDwn0E0NDPwL>%ybA~*haoIVPItuU|?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{YhX3vTXZ8bmyq+$OArj%q2?+^5_!$^k V7#Ru_Qn`T=44$rjF6*2UngBC(9*6({ literal 105 zcmeAS@N?(olHy`uVBq!ia0vp^?m(=;2qYLEakt!I&(;+6**`aRLM5QNh-iK2A&*Qo$V9E1zaSW-r_2yzD4^RoyhCjTU&MyAT<3;rZUGZhj37hA-&Z3Ve?Q;Lp*yG@)pezZZRsB|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 zIX!PnLS(|NYz7z!bj^~ zZ=+f1Q{rrYJ0Hu6Q=7bT>b}GJ{6=YkH`g|%JekfenO*pyt7mzUT|+Nz(U+W(+CO@x_M8ooTwdrYDaq@nHhE&a9MCF8Dyo_L9U1(RTviPS^Ur$ZX;p6|W zncGadSpV0}?OJ}ynuom&F)JPwd-F;Dy`G0IbQBJ(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!MjLuFbP0l+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 000000000..b7d23c4b1 --- /dev/null +++ b/app/src/main/res/drawable/buddy.xml @@ -0,0 +1,31 @@ + + + + + + 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 000000000..5114fda32 --- /dev/null +++ b/app/src/main/res/drawable/dummy_thumbnail.xml @@ -0,0 +1,22 @@ + + + + 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 000000000..683b814c9 --- /dev/null +++ b/app/src/main/res/drawable/dummy_thumbnail_playlist.xml @@ -0,0 +1,30 @@ + + + + + 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 d9084bbe9..9f92c35a7 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 b66e07a12..e03f7c2fa 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 6bd363311..ba984e0ff 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 c858ccc4e..f6e5f3587 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" /> @color/white @color/white + + #6C6C6C + #999999 diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml index 281fd9ce7..bbcc5d4bb 100644 --- a/app/src/main/res/values/colors.xml +++ b/app/src/main/res/values/colors.xml @@ -6,6 +6,9 @@ #CD201F + #F6F6F6 + #6E6E6E + #EEEEEE #EEEEEE diff --git a/assets/buddy_channel_item.svg b/assets/buddy_channel_item.svg deleted file mode 100644 index 4dec41f9d..000000000 --- a/assets/buddy_channel_item.svg +++ /dev/null @@ -1,73 +0,0 @@ - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - diff --git a/assets/dummy_thumbnail.svg b/assets/dummy_thumbnail.svg new file mode 100644 index 000000000..bdea80b55 --- /dev/null +++ b/assets/dummy_thumbnail.svg @@ -0,0 +1,7 @@ + + + + + + + \ 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 000000000..bd4b190aa --- /dev/null +++ b/assets/dummy_thumbnail_playlist.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file