Building an Overcast Mac App

I really like podcasts.

I listen to podcasts whenever I’m driving, doing chores, and even sometimes while I’m working. Most of the time I just use my iPhone to listen to podcasts through Overcast, which is my current favorite podcast app. This generally works great, except when I’m working on my Mac – for this I use the Overcast web app. I used to use Pocket Casts specifically because the web app was so awesome, but Overcast’s web app continues to be improved and now supports variable speed playback (I’m one of those guys that plays back about 1.5x) and I absolutely love the iOS app. However I dislike web apps in general, so the other day I pieced together a couple things some people smarter than me have created and cobbled together an Overcast Mac app (including support for universal keyboard shortcuts) which I can “tuck” to a corner of my screen so it’s not in the way yet always accessible.

Here’s what you’ll need:

• Fluid – the basic app is free, but for what I’m going to show you you’ll need a full license ($5)
• Tuck
• Afloat
• Seil (used to be PCKeyboard Hack)
• Karabiner (used to be KeyRemap4MacBook)
• Keyboard Maestro

Part 1: Creating the Overcast Mac App

This part is pretty simple. Fire up Fluid and you’ll see a simple menu:

 

For the URL, use https://overcast.fm and name the new Fluid App Overcast. The website Favicon looks great, but if you want to use different artwork you can select “Other” instead under “Icon:”.

Once you click “Create”, Fluid will create a Mac app inside your “Applications” folder. Double click it and you’ll open your new Overcast Mac app.

Part 2: Setting Up Keyboard Shortcuts

Note: In order to use this, you’ll need the full version of Fluid which supports Userscripts.

This part is accomplished using a neat script I found over at Daniel Breslan’s blog. Here’s the script:

//////////////////////////////
// Daniel Breslan
// @DannyBres
// Enjoy!
//////////////////////////////
// Settings
var forwardSkipDuration = 30; //Time in seconds to skip forward.
var backwardSkipDuration = 30; //Time in seconds to skip backwards.
var speedIncrease = 0.1; //Time in seconds to skip forward.
var speedDecrease = 0.1; //Time in seconds to skip backwards.
var showUnreadNumberOnDock = false; //True to show unread dock icon, false to not.
//////////////////////////////

var episodeBody = $(‘#episode_body’).text();

if (showUnreadNumberOnDock == false){
window.fluid.dockBadge = “”;
} else {
var pathname = window.location.pathname;
if (pathname == “/podcasts” && showUnreadNumberOnDock == true) {
var numberOfUnread = $(‘.episodecell’).length;
window.fluid.dockBadge = numberOfUnread;
}
}

$(‘body’).keydown(function(event) {
if (event.keyCode == 80) {
toggleAudio();
}
if (event.keyCode == 70) {
skipForwards();
}
if (event.keyCode == 66) {
skipBackwards();
}
if (event.keyCode == 190) {
goFaster();
}
if (event.keyCode == 188) {
goSlower();
}
console.log(event.keyCode)
});
function toggleAudio() {
if (!$(‘#audioplayer’).get(0).paused) {
$(‘#audioplayer’).get(0).pause();
} else {
$(‘#audioplayer’).get(0).play();
}
}
function skipForwards() {
$(‘#audioplayer’).get(0).currentTime+=forwardSkipDuration;
}
function skipBackwards() {
$(‘#audioplayer’).get(0).currentTime-=backwardSkipDuration;
}
function goFaster() {
$(‘#audioplayer’).get(0).playbackRate+=speedIncrease;
updatePlaybackDisplay();
}
function goSlower() {
if($(‘#audioplayer’).get(0).playbackRate – speedDecrease > 0) $(‘#audioplayer’).get(0).playbackRate-=speedDecrease;
updatePlaybackDisplay();
}
function updatePlaybackDisplay() {
if ($(‘#audioplayer’).get(0).playbackRate == 1) {
var textForBody = episodeBody;
} else {
var textForBody = ‘Playback speed: ‘ + $(‘#audioplayer’).get(0).playbackRate.toFixed(2) + ” – “+episodeBody;
}
$(‘#episode_body’).text(textForBody);
}

I’ve modified the script slightly to change some of the keyboard shortcuts. This script assigns the following keyboard shortcuts to the Overcast Mac app:

• p – play and pause the current podcast
• f – to skip forward 30 seconds
• b – to skip back 30 seconds
• , (or <) – to slow down
• . (or>) – to speed up

Copy the script above and add it to your Overcast app by going to Window –> Userscripts:

 

1. Click the “+” icon in the lower-left hand corner to create a new Userscript and name it “Overcast”.
2. Under “Patterns”, use *overcast.fm*.
3. Paste the script in the window, quit the Overcast app, then re-open.

Your keyboard shortcuts should now work. If you want, you can remap the keyboard shortcuts by swapping out the Javascript character codes in the script. Here’s a list of other values you can use and which keys they correspond to.

Part 3: Overcast Window Management

So now we’ve got our fully-functioning Overcast Mac app up and running, but I still wasn’t happy with having a large window dedicated to the Overcast app. So I tried resizing it and noticed that if you made it narrow, it actually switched to responsive mobile view, much like the iPhone app:

Awesome! Except it can still get lost pretty easy under other windows. So to fix this, I used Afloat, a free app that allows you to make a window always on top. It’s an older app, but I didn’t encounter any issues on the latest beta build of Yosemite. Once you have Afloat installed, you can just select Window –> Keep Afloat (Control + Command + A).

Now the Overcast Mac app is always on top, but I don’t want to see it all the time either so I used another free application called Tuck to “slide” it out of the way and store it in a hotspot on the bottom of my screen (because I put my dock on the left). Here’s what it looks like:

 

So now I can quickly access Overcast no matter what app I happen to be using.

 Part 4: Universal Keyboard Shortcuts

The last part of this is setting up system-wide keyboard shortcuts so I can pause/play, etc. even when I’m in another app by using Keyboard Maestro. This is especially useful for when I’m working on something and then realize I want a bit more context about what the podcast host is talking about so I can quickly jump back 30 seconds in the episode. To do this, I set up separate Keyboard Maestro macros that look something like this:

 

The steps to this macro are:

1. Activate Overcast (so the keyboard shortcuts will work)
2. Pause for 0.1 seconds (to allow my computer to catch up)
3. Type the desired keyboard shortcut
4. Pause for 0.1 seconds again
5. Switch back to the application I was just in

This way, I don’t lose my place and I don’t have to move my mouse at all. Just recreate this macro for the other keyboard shortcuts you want universally available.

You may have noticed that my hotkey for this macro is almost impossible to hit with your hands, which doesn’t seem very efficient but I’ve remapped my Caps Lock key to simulate a combination of Shift + Control + Option + Command. So instead of pressing Shift + Control + Option + Command + P to play/pause my podcast, I can just hit Caps Lock + P.

You don’t need to do this last step (you can pick a different hotkey), but I find it very helpful. I got the idea from Brett Terpstra, so if you want to set this up go read this post because he explains it much better than I can. One thing to note though is that the names of the applications have changed: PCKeyboardHack is now called Seil and KeyRemap4MacBook is now called Karabiner (both of them are free).