YouTube Player - pinnable pop-up modal

Share & showcase
1

More of what I call fiddling, but could be useful for some people…

At the end of this write-up, I talked about using Page Preview + Hover Editor and Surfing in conjunction to have YouTube auto-play pop-up on our timestamps.

My problem with that was that there is no way to resize that pop-up and the window was not draggable or pinnable.

There is another method to get a window with YT videos playing: right-click on the url and open the Surfing web view in Hover Editor, which is pinnable, but that is 2 clicks (right-click, then click on context menu option) plus a resize of a window each time (unless you go into the settings of Hover Editor and make all your windows small just for a YT player).

So I went ahead and had a modal made, which had originally worked reliably in Reading Mode only, then with some difficulty, I managed to make it work in Live Preview too.

  • In a newer version of the script, I improved detection of multiple URL’s in one block of text.

Script and setup

Youtube-Hover-Player.zip (8.6 KB)
Save the zip, unzip.

In the CONFIG part of the script, you can set your own width and height of the player or leave those numbers as they are.
(I’ll talk some more about configuration below.)

Setup is similar to how I explained on the bottom of another write-up. You need to install and config the CodeScript Toolkit plugin but not much else. Pretty easy.
If you load your first .ts file with the plugin and you didn’t rename the file you gained from the zip then you add to your main.ts these lines:

import { invoke as ythoverPlayer } from './Youtube-Hover-Player.ts';

export async function invoke(app: App): Promise<void> {
  await ythoverPlayer(app);
}

Usage

Works on PC only.

The CodeScript Toolkit plugin will load the script on startup, then if you hover on a YT link with Alt/Option key down, the vid will play.

  • In a newer version of the script, you config what key you want to hold down: Alt or Ctrl.

I didn’t try on Mac as I don’t own one. But I reckon Option and Cmd buttons will get you the same thing.

You can pin the window to keep it in view and close it with the ‘x’. You can drag the window around pressing on the top of the modal.
Screenshot of modal not pinned yet:

{F9A34F08-91D0-468D-B458-0B68852AB277}
{F9A34F08-91D0-468D-B458-0B68852AB277}1330×381 104 KB

Then after pinning:
{AF53630E-6D6D-4F42-997E-E096791D91F0}
{AF53630E-6D6D-4F42-997E-E096791D91F0}1338×383 113 KB

Now you can add some comments to your AI summary, or take some screenshots, whatever.
What I like about this is the semi-automatic playing via KeyDown+Hover on links and with a quick drag to the side, I have my markdown editor I can write into.

When you have multiple links in paragraph, try KeyDown+Hover coming from the right direction, as you may get pop-ups for the wrong link, but you can configure a bigger number as there is in the script now to fix this:

    // Hover detection delay
    hoverDelay: 300,

If you pin a window and KeyDown+Hover again on a link, the previous window is automatically gone. There is no reason to pile multiple windows on top of each other.

I admit the whole thing feels just a tiny bit clunky but not bad at all; it does the job for me.
I went for Alt+Hover to keep Ctrl+Hover for popups of web pages, but you can change it to ‘Ctrl/Cmd’ by typing ‘ctrl’ in the config of the script:

    modifierKey: 'alt',  // <-- CHANGE THIS TO 'ctrl' IF YOU WANT CTRL/CMD

Currently, as you can see, it is ‘Alt/Option’ in the original script as I wanted Hover Editor+Surfing working for normal websites.

Have fun

150625 Edit: mostly typos here and there.

1 Like