"Picture-in-Picture" YouTube view on macOS using Apple Script

While my shell function for youtube viewing is nice, it requires opening a terminal everytime you want to use it. Let's improve user experience a bit.

We're going to create a script that will open a dialog prompting user for an input. When the user enter link to a youtube video, it will open mpv, streaming the video, just like before.

The script will be easily accessible right from the menubar and we're going to implement all this by using built-in macOS tools.

Writing a script

Open the "Script Editor" application:

Press ⌘ + , to open preferences, check the "Show Script menu in menu bar" option. You may also want to uncheck the "Show Computer scripts" option.

Now let's write some Apple Script! You can find documentation on the language and some examples here and here.

set mpv to "/Users/ch1p/mpv/build/mpv"
set ytdl to "/opt/homebrew/bin/youtube-dl"

set response to ¬
    display dialog ¬
        "Enter link to YouTube video" default answer ¬
        "" buttons {"Cancel", "Open"} ¬
        default button "Open"

set link to text returned of response

-- without this delay, the dialog is not getting closed sometimes
-- no clue why
delay 0.5

if {link starts with "https://youtube.com/" or link starts with "https://www.youtube.com/" or link starts with "https://youtu.be/" or link starts with "https://www.youtu.be/"} then
    do shell script mpv & ¬
        " --ontop --ontop-level=window" & ¬
        " --on-all-workspaces" & ¬
        " --geometry=25%+100%+100%" & ¬
        " --macos-app-activation-policy=accessory" & ¬
        " --ytdl --script-opts=ytdl_hook-ytdl_path=" & ytdl ¬
        & "  ytdl://" & (text returned of response)
else
    display dialog "URL is invalid." buttons {"OK"} default button "OK"
end if

The set mpv to ... and set ytdl to ... lines define variables mpv and ytdl with paths to corresponding binaries, you should replace the values with absolute paths to mpv and youtube-dl on your computer.

When you press the "Compile" button on the toolbar, the Script Editor should highlight your code and also highlight errors (if any).

Now press the Run button. You should see the dialog:

Paste a link to some youtube video and test it. It works!

Now, let's save it as a script bundle. Go to File -> Save..., select Script Bundle as the File Format and ~/Library/Scripts as destination directory.

After saving, the script should be available from the menubar.

Adding icon

It's all cool, but... the dialog looks a bit poor. Let's add an icon! Here's it:

When you've saved your work as a script bundle, the "Show or Hide the Bundle Contents" toggle (at the right of the toolbar) became active. Click it to open the right panel with bundle settings and resources:

See the "Resources" panel? Drag and drop the youtube-256.png file there. Then change the dialog invocation code like this:

    display dialog ¬
        "Enter link to YouTube video" default answer ¬
        "" with icon (path to resource "youtube-256.png") ¬
        buttons {"Cancel", "Open"} ¬
        default button "Open"

Run the script:

Looks better!