Bug 410715

Summary:	Low resolution art url in plasma-browser-integration and kde-connect
Product:	[Plasma] plasma-browser-integration	Reporter:	RaitaroH <RaitaroHikami>
Component:	general	Assignee:	Kai Uwe Broulik <kde>
Status:	REPORTED ---
Severity:	normal	CC:	nate
Priority:	NOR
Version First Reported In:	unspecified
Target Milestone:	---
Platform:	Neon
OS:	Linux
Latest Commit:		Version Fixed/Implemented In:
Sentry Crash Report:

Description RaitaroH 2019-08-08 07:04:44 UTC

SUMMARY

I think it is pretty amazing that kde connect (1.12.93 android) can display cover art in notifications, and also on the lock screen as cover art. The problem is that the cover art is ok for a notification (and even there I say is a bit too low res), but horrible for a lock screen.

I dug a bit in `/data/data/org.kde.kdeconnect_tp/cache/album_art` directory to see if this is an android issue or not. The image there is exactly the same as the image given by plasma-browser integration. If I look at the metadata
`qdbus org.mpris.MediaPlayer2.plasma-browser-integration /org/mpris/MediaPlayer2 org.mpris.MediaPlayer2.Player.Metadata`
I get `mpris:artUrl: https://i.ytimg.com/vi/-viYoD2cqq8/hqdefault.jpg?sqp=-oaymwEjCNACELwBSFryq4qpAxUIARUAAAAAGAElAADIQj0AgKJDeAE=&rs=AOn4CLDv0KjDxszVqpt_obmwbrpELdWLIw`. This url gives an image that is 334x187.
I then went on the link and used youtube-dl to get a better thumbnail `youtube-dl -j --flat-playlist $1 | jq -r '.thumbnails' | grep -Eo "(http|https)://[a-zA-Z0-9./?=_-]*` and I got `https://i.ytimg.com/vi/UniMooWDPI0/maxresdefault.jpg` which is 1280x720. The improvement is obvious.

I understand that p-b-i uses that cover-art just in the widget for media, but even there the image is just so lowres if you have even a 1080p screen, let alone to be used as cover art by kde connect in the `multimedia control`, or in the android notifications... let alone as cover art for the lockscreen.
Perhaps is either browser-integration at fault here for not sending a higher res to kconn, or perhaps is kcon's fault. I am not so sure.

STEPS TO REPRODUCE
1. Have plasma-browser-integration enabled in browser. waterfox alpha and brave have the same issue.
2. Have an youtube video playing.
3. Check to see the resolution of the cover art url on desktop/android.
4. Have cover art set for lockscreen if you desire. There it is just horrible.

OBSERVED RESULT
The cover-art used by plasma-browser-integration and kdeconnect are too low resolution.

EXPECTED RESULT
Use the full thumbnail image.

SOFTWARE/OS VERSIONS
Operating System: KDE neon 5.16
KDE Plasma Version: 5.16.4
KDE Frameworks Version: 5.60.0
Qt Version: 5.12.3
Kernel Version: 4.15.0-55-generic
OS Type: 64-bit

Comment 1 Kai Uwe Broulik 2019-08-08 07:35:17 UTC

Thanks for your detailed analysis. However, website specific workarounds are outside the scope of this extension. If YouTube decided to provide only low resolution thumanils, that's all we got. Media Sessions API lets a website offer multiple sizes and many websites do.

Open the developer console (Ctrl+Shift+I) and type
navigator.mediaSession.metadata.artwork
and you can see that YouTube only provides a single 320x180 thumbnail.

Comment 2 RaitaroH 2019-08-09 05:56:01 UTC

(In reply to Kai Uwe Broulik from comment #1)
> Thanks for your detailed analysis. However, website specific workarounds are
> outside the scope of this extension. If YouTube decided to provide only low
> resolution thumanils, that's all we got. Media Sessions API lets a website
> offer multiple sizes and many websites do.
> 
> Open the developer console (Ctrl+Shift+I) and type
> navigator.mediaSession.metadata.artwork
> and you can see that YouTube only provides a single 320x180 thumbnail.

The command you priveded gives a link that is pretty much as so:
`https://img.youtube.com/vi/<video-id>/hqdefault.jpg` followed by `?blablablabla`
Except everything after `.jpg` is not needed, it still points to the image.
Then this thing can be easily made into the required image by simply replacing `hqdefault` with `highresdefault`

Ex:
url: https://www.youtube.com/watch?v=xBQvKyAizt8
`navigator.mediaSession.metadata.artwork` --> `https://i.ytimg.com/vi/xBQvKyAizt8/hqdefault.jpg?.....` - I removed everything after ? becase is way too long.
So now this can be easily modified to become `https://i.ytimg.com/vi/xBQvKyAizt8/hqdefault.jpg`. But what we need is this instead --> `https://i.ytimg.com/vi/xBQvKyAizt8/maxresdefault.jpg`
Same res as the image got through youtube-dl.
Can't plasma-browser-integration perform some modification on the link to get the higher res thing? I was able to even write this and get the link with pure javascript and no youtube api thing. I modified a little booklet I have to make this.
```
history.replaceState(window.location=(window.location+'').replace('watch?v=','').replace('www.youtube.com','i.ytimg.com/vi').replace(/\&list=(.+)/i,'').replace(/\&index=(.+)/i,'').concat('/maxresdefault.jpg'));location.reload(false);
```

Comment 3 RaitaroH 2019-08-09 06:42:58 UTC

Considering the above I actually modified my script to get thumbnails. I am aware this sorta formating has to be rewritten in the language plasma-browser-integration is written into.

`echo "$input" | awk -F'\\=' '{print "https://i.ytimg.com/vi/"$2"/maxresdefault.jpg"}'`
If the link is in the `navigator.mediaSession.metadata.artwork` format instead:
`echo "$inputg" | awk -F'/vi/' '{split($2,t,"/"); print "https://i.ytimg.com/vi/"t[1]"/maxresdefault.jpg"}'`
Both give the same maxres image.