github
/
NewPipe
mirror of https://github.com/TeamNewPipe/NewPipe
1
Fork 0
Code Releases Activity

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
This commit is contained in:
krlvm 2022-06-21 20:22:39 +03:00 committed by Stypox
parent 70e3c9805a
commit cc7a8fb1a6
No known key found for this signature in database
GPG Key ID: 4BDF1B40A49FDD23
19 changed files with 125 additions and 81 deletions
Show Stats 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.0 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

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>

73
assets/buddy_channel_item.svg
View File

@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 2.6 KiB

7
assets/dummy_thumbnail.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 868 B

8
assets/dummy_thumbnail_playlist.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB