dynamically updating open graph tags for social media previews

[n-ce]

Relevant Links

• OGP - https://ogp.me/
• Implementation - https://stackoverflow.com/questions/19778620/provide-an-image-for-whatsapp-link-sharing

Update Strategy

• Reference relevant og tags in lib/DOM.
• Updating them in setMetadata() =>

  ytify/Scripts/lib/functions.js

  Lines 84 to 111 in 3418c4f

  	const setMetadata = (thumbnail, id, streamName, authorName, authorUrl) => {
  	img.dataset.src ?
  	img.dataset.src = thumbnail :
  	img.src = thumbnail;
  	title.href = `https://youtube.com/watch?v=${id}`;
  	title.textContent = streamName;
  	author.href = `https://youtube.com${authorUrl}`;
  	author.textContent = authorName;
  	document.title = streamName + ' - ytify';
  	if ('mediaSession' in navigator)
  	navigator.mediaSession.metadata = new MediaMetadata({
  	title: streamName,
  	artist: authorName,
  	artwork: [
  	{ src: thumbnail, sizes: '96x96' },
  	{ src: thumbnail, sizes: '128x128' },
  	{ src: thumbnail, sizes: '192x192' },
  	{ src: thumbnail, sizes: '256x256' },
  	{ src: thumbnail, sizes: '384x384' },
  	{ src: thumbnail, sizes: '512x512' },
  	]
  	});
  	}

[n-ce]

Turns out It was silly of me to do this. I totally didn't realize that social media previews only read the html and dont run any scripts.
So if we really want to implement, we will have to convert the site to a server rendered page instead which is out of the scope of this project.
On the bright side I did get to know & fix the default og-image issue as well as find a way to dom reference meta name tag without using getElementById on this endeavour.

[n-ce]

Re-opening this, as it is solvable via edge functions.
Has been already implemented by #187