Show a different context menu option depending on the context

[wheelercj]

Show a different context menu option depending on the context

[wheelercj]

The context menu option for copying unselected image markdown was added for Chromium in #14 and for Firefox in #15.

It works with many image types including png, jpg, svg, webp, gif, and base64-encoded images.

Sometimes, right-clicking an image does not count as doing so, such as when the image is:

• a background image
• a canvas HTML element
• an inline svg HTML element
• within an a HTML element, sometimes (not sure why yet)

If the right-clicked image is only viewable when logged into an account, the markdown image will not render outside that account.

[wheelercj]

The context menu options for all remaining relevant contexts except video and audio were added in #25.

[wheelercj]

The new "Copy markdown of video" context menu option had some success for YouTube videos and GitHub-hosted mp4 files, but not Vimeo videos or Asciinema videos.

Here's the Vimeo video I tried. The copy option probably doesn't show up here because Vimeo buries the <video> HTML element for each video under many other things.

Asciinema "videos" are just text automatically changing over time and do not use the <video> HTML element, so the context menu option for videos cannot appear for them.

YouTube

Right-clicking a YouTube video shows YouTube's context menu at first, but right-clicking again then shows the browser's context menu. Selecting the new copy option for a YouTube video creates an info object like this:

{
	"menuItemId":"video",
	"parentMenuItemId":19,
	"viewType":"tab",
	"mediaType":"video",
	"frameId":0,
	"editable":false,
	"srcUrl":"",
	"pageUrl":"https://www.youtube.com/watch?v=NaytZOiX3fs",
	"modifiers":[],
	"button":0
}

The video title is not there, but the URL can be used in markdown:

![video](https://www.youtube.com/watch?v=NaytZOiX3fs)

This markdown renders well in Obsidian and Discord, but not in GitHub or VS Code.

Here's how it renders here:

GitHub mp4

Right-clicking a GitHub mp4 such as the one on this page immediately shows the new copy option. It's info object is:

{
	"menuItemId":"video",
	"parentMenuItemId":33,
	"viewType":"tab",
	"mediaType":"video",
	"frameId":0,
	"editable":false,
	"srcUrl":"https://private-user-images.githubusercontent.com/39012918/214133712-5fa1146e-99d5-42c6-994c-9dfc1f37209e.mp4?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTY1ODUwMzksIm5iZiI6MTcxNjU4NDczOSwicGF0aCI6Ii8zOTAxMjkxOC8yMTQxMzM3MTItNWZhMTE0NmUtOTlkNS00MmM2LTk5NGMtOWRmYzFmMzcyMDllLm1wND9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA1MjQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNTI0VDIxMDUzOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWYzMjA0MDUwNDIxOWIxZjgzNDcyNGI5OTIzYmZmYmY2Yjk4OGM3NWI3N2JjMGM0OWNlNDczNDk3MzAzNzY3ZWYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.r-kIkYmzU4S5EgNNYGI7K_FIIVu69dDzue5TBg2tJnY",
	"pageUrl":"https://github.com/wheelercj/zq",
	"modifiers":[],
	"button":0
}

This time, srcUrl is not an empty string, and pageUrl is not the URL of the video. Using srcUrl in the markdown doesn't appear to render well anywhere except GitHub, and only there with the [title](url) syntax instead of ![title](url).

Here's how it renders with the exclamation mark here:

Here it is without the exclamation mark:

zq.intro.mp4

This is why Stardown now uses info.srcUrl without an exclamation mark if srcUrl is truthy, and info.pageUrl with an exclamation mark otherwise.

The value of the example srcUrl above appears to contain a JSON web token (JWT). To test whether this JWT is safe to share, I created a few more mp4s, uploaded them to GitHub, and copied the JWTs of the new mp4s. They were all different. Only their headers were the same. This gives me the impression that it's not the JWT that gives access to my account. The URL in the video above still works without the JWT when used in markdown, but leaving it doesn't seem to cause any problems.

[wheelercj]

An audio file URL in markdown doesn't seem to be able to render as an audio player anywhere, but can still be used in an ordinary markdown link in the [title](url) format.

For example, Stardown's new "Copy markdown of audio" context menu option used on the first audio player on this site results in this markdown link:

[audio](https://html.com/wp-content/uploads/flamingos.ogg)

which renders as this link that downloads the audio file when clicked:

audio

That's an .ogg file, and it's different for .mp3 files. The same site's second audio player gives this markdown:

[audio](https://html.com/wp-content/uploads/flamingos.mp3)

which renders as this link that opens a site that plays the audio:

audio

This feature works on audio elements in iframes, such as with the one on <audio>: The Embed Audio element - HTML: HyperText Markup Language | MDN:

[audio](https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3)

audio