Youtube Thumnail as Cover and Some Additional Feature

[BloodyBuster]

I've done some experimentation and managed to get some of "new features" working that I think would be a good addition to this extension.

Using Youtube thumbnail as cover for rich presence

as you can see from the above screenshot the "playing icon" is replaced by the video author image/channel icon, I think this also would be a great addition

More Settings
To accompanied the additional features that I mentioned above, adding a these type of new settings would be very helpful too

[XFG16]

That looks great! I originally thought the thumbnail picture wouldn't feel right because of its rectangular dimensions and never bothered to give it a try, but it seems to look fine.

If you want to show a snippet of the code and have me update YTDP, then I would be more than welcome to do so.

It's getting late on my end, so I'll catch up with everything tomorrow.

[BloodyBuster]

Ah apologies for the late respond I've been somewhat busy in the weekend and just happened to remember about this again.

As per your request I will provide you with the necessary code snipped of those new "feature".

Youtube Thumnail

In background.js - generatePresenceData()

	if (currentMessage.applicationType == "youtube") {
		if(settings.useYoutubeThumbnail && currentMessage.videoUrl) {
			var thumbnailURL = "https://img.youtube.com/vi/"+getVideoId(currentMessage.videoUrl)+"/0.jpg"
			console.log("Thumbnail:", thumbnailURL);
			assetsData.large_image = thumbnailURL
		}
	}

This one is self explanatory as I only use your GetVideoId() to retrieve the video id and concatenate it with the default youtube link to get the thumbnail JPG image. For more information about the thumbnail link you can reference to the link below

https://stackoverflow.com/questions/18681788/how-to-get-a-youtube-thumbnail-from-a-youtube-iframe

Channel Icon as "playing icon"

In content.js

This block is located inside the handleYouTubeData() function

       if (documentData.applicationType == "youtube") { 
		let authorImg = document.querySelector("#owner #avatar #img");
		if (authorImg && "src" in authorImg && authorImg.src.startsWith("https://yt3.ggpht.com/")) {
                        documentData.authorImgUrl = authorImg.src;
                }
                else {
			documentData.thumbnailUrl = undefined;
                }
      }
	  

This code work exactly the same as the code that you use you pull the youtube music album cover image.

In background.js - generatePresenceData()

        if (settings.enableYTMusicPlayingIcon && currentMessage.applicationType == "youtubeMusic") {
               assetsData.small_image = "playing-icon-6"; //playing-icon-6
               assetsData.small_text = "Playing" 
        }
	if (settings.enableYoutubePlayingIcon && currentMessage.applicationType == "youtube") {
		if(settings.useAuthorImageAsPlayingIcon) {
			console.log("Author Image:", currentMessage.authorImgUrl);
			assetsData.small_image = currentMessage.authorImgUrl; 
			assetsData.small_text = currentMessage.author;
		} else {
			assetsData.small_image = "playing-icon-6"; 
			assetsData.small_text = "Playing" 
		}
    }

This is pretty simple also, as you can see I have separated the enable playing button into 2 option (for youtube and youtube music) . currentMessage.authorImgUrl this is the only variable that I added to the Presence Data structure.

Overall this is just a simple change, I can also provide you with the popup.html and popup.js file to make your job easier if you so desire. Hopefully you can understand my lackluster explanation since I am not to familiar with these. CHEERS !

[XFG16]

Got it! I'll be fine without the other files.

I'll try and implement these features as soon as I have time. Thanks for inspiring this contribution!

[BloodyBuster]

No problem, I have been using this for quite sometimes and was somewhat intrigue by it, and I was just thinking it's about time to contribute at least something toward this project.

If you don't mind, I would also add another suggestion and some Feeback

Retrieving YouTube Music Thumbnail

I think it's possible to implement thumbnail for the YouTube music, as you know not all the music in YouTube Music have an album cover. I think it would also be a good idea to provide an option for the user to able to use the YouTube Music thumbnail for those Music that doesn't have an album cover.

The way this work should still be similar to the method that is being used to pull the thumbnail for a YouTube video but instead of calling it using this URL : https://img.youtube.com/vi/[video-id]/sddefault.jpg, YouTube Music would only accept it form this URL : https://i.ytimg.com/vi/[video-id/sddefault.jpg.

The process of parsing the ID for YouTube Music should still remain the same as how you parse a YouTube video ID, you try using the getVideoId() function as I think regex on it should also work for YouTube Music URL.

Feedback

Regarding the Detailed Installation Instruction

"Make sure that the "allowed_origins" key in the JSON file involved in native messaging contains the extension's ID."

Wouldn't it be better if you mentioned where you can find the main.json file by mentioning the directory of it or you can just mention that this could find in the installation directory of the Host application. This is just from my personal as I though you need to compile it into the installer together in order to get it working.

Regarding the Troubleshooting / Known Issues

"If the presence gets stuck at some video at 00:00 left. This is simply a problem with the client socket API in the way that Discord handles presence update requests"

This one can easily fix by simply restarting discord but do take note to avoid using the CTRL+R as that only "refreshes" it, what you want is to completely restart the whole discord client. CTRL + R will only fix this problem temporarily, It will only work for the first video you play then it will get stuck again at 00:00 left and it will start throwing RICH_PRESENCE_TIMEOUT again,

Question

Quick question, what is the reason for omitting idle and pause state on the rich presence, this have been stuck at the back of my mind for quite a while actually. Is this because how the RPC handle request limitation?

[XFG16]

A few things-

1. The reason why I avoided thumbnails in general previously was because the thumbnails' dimensions did not have a 1:1 ratio, meaning that it might look weird trying to fit in the presence image. However, I'll still add it as a feature in the future for those who are okay with empty space.

2. Yep, I definitely agree that I could make the details a bit more clear for installation instructions. I'll make sure to update that in the future.

3. I intended this presence to work like the Spotify presence, which disappears when nothing is playing. In fact, I know a lot of others including me who prefer it this way because having an idle presence on my profile constantly is something that I wouldn't enjoy. Displaying pauses, searches, or ad breaks seems a little overboard and it blocks out other rich presences even if YouTube isn't actually being watched. This "feature" doesn't have anything to do with request limitation.

[BloodyBuster]

Ah thank you clearing things up for me, definitely better then speculating in my head and best of luck in this project. CHEERS!

[XFG16]

Sorry for the delay! I didn't have much time to work on this project until now.

One thing I discovered with the author image is that it doesn't update when YouTube isn't the active tab (i.e. either you are surfing another tab or using another application other than Chrome). This can cause it to display the wrong channel image or no channel image at all.

Therefore, I'll probably be scrapping this idea due to its inconsistency unless a better way for grabbing the channel image can be found.

However, the thumbnail icon idea works just fine. It'll probably get released soon!

[BloodyBuster]

Ah thank you for your hard work!

I was experiencing the same issue with the author image previously before I send you the suggestion, but somehow it just manage to fix it self. The only difference is that I am using the "Web Application" version for Youtube and Youtube Music, and never really tried it on the browser page

In the "Web Application" version it seems to be working fine, perhaps it's because how the browser treat the "Web Applicaiton" as an active browser page? well I am not sure my self.

During my testing with the actual browser tab, I discovered that every time it loads a new video where Youtube isn't in the active tab, it wouldn't display the Rich Presence on Discord. The console shows that it went into an "IDLE" state, despite the other video is already playing in the background.

I will definitely try to find a better method for retrieve the author image from a youtube video, I will update you in I found anything of interest .

Overall I really appreciate your work, and I am looking forward for the next release!