A Few Scripts

Sometimes, computers can be useful ^{[citation needed]}. Here are some computer things I’ve done recently.

Downloading YouTube videos

At the beginning of July I deleted my YouTube and Instagram accounts. I felt trapped in a dopamine loop and decided I had had enough.

(The thing that pushed me over? YouTube thumbnails. Once you see how repetitive and click-baity they are it’s hard to unsee.)

Anyway, I’ve had about six weeks worth of staying away. I’m fully done with Instagram - that shit is just a poisonous ad garden growing unhappiness flowers - but YouTube does have channels I enjoy with “content” that I actually learn from. They’re typically photography related. I wanted a way to plug back into that without actually having to go on YouTube.

Enter: yt-dlp. A fork of youtube-dl that’s actually updated and has some additional features.

So, first things first: get a YouTube account. I have an old Gmail trash address that I logged in with and set up some subscriptions. I think it’s probably less than 25. People like Brian Birks, Brae Hunziker, grainydays, James Popsys, Framelines, Sean Tucker. I’ve tried to avoid people who do a lot of gear reviews - the occasional one is fine - in favor of sticking with practical advice, art philosophy, etc. It’s so, so easy to get sucked into thinking new gear will make your photos better. Just stick with photographers doing photography.

Anyway, second, use yt-dlp to download videos. My requirements are basically just “don’t download videos you’ve already downloaded” and “get the highest quality you can”. And no thumbnails, but that’s a given.

Here it is (with inline commentary):

yt-dlp \
  :ytsubs \ # download from my account subscriptions
  --download-archive archive.txt \ # keep track of videos you've downloaded
  --cookies-from-browser firefox \ # log in
  --lazy-playlist \ # start downloading immediately
  --break-on-reject \ # stop downloading if you hit a condition
  --dateafter today-7days \ # condition: ignore if they're more than 7 days old
  --playlist-end \ # condition: five videos

This seems to work? I don’t know if I need the conditions since it tracks downloads, but hey, five videos in a day is probably too much. I run this manually when I think about it and get something to watch over lunch or whatever.

Enbiggenate photos

Here’s a photo. Like all photos on my website, you can now click on the photo to “embiggen” it in your browser.

Leica MP, Voigtlander 50mm f2.8 Color-Skopar

I’ve been meaning to do this for years and I finally got around to it yesterday. I didn’t want to bring in a giant JS gallery library that I’d have to format my HTML around, so I put on my engineer pants and went to work.

First up: we need a way to get an image fullscreen. The entire HTML structure on the site here is basically just:

<html>
  <body>
    <article>
      # images and <p>s and headers and stuff
    </article>
  </body>
</html>

I dropped in a couple of <div>s after the </article>:

<div id="fullpage">
  <div id="fullpage-img"></div>
</div>

Then I added some Very Professional CSS that makes #fullpage hidden, positioned absolutely with 100% width and height, and gave it a very large z-index. #fullpage-img - the container that will show our image - is positioned relative to that with a top and left attribute of 50% and a negative transform of -50% to center it up. Basically this:

#fullpage {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

#fullpage-img {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

And finally, the juice. In all its glory:

const imgs = document.querySelectorAll("img");
const fullPage = document.querySelector("#fullpage-img");
imgs.forEach(img => {
  img.addEventListener("click", function() {
    localStorage.setItem("scroll", window.scrollY);
    var width = (window.innerWidth * 0.9) > img.naturalWidth ? img.naturalWidth + "px" : "90%";
    var height = (window.innerHeight * 0.9) > img.naturalHeight ? img.naturalHeight + "px" : "90%";

    fullPage.style.backgroundImage = "url(" + img.src + ")";
    fullPage.style.width = width;
    fullPage.style.height = height;
    fullPage.parentNode.style.display = "block";
    fullPage.parentNode.scrollIntoView();
    fullPage.parentNode.addEventListener("click", function(e) {
      var position = localStorage.getItem("scroll");
      if ( position !== null ) {
        window.scrollTo(0, position);
      } else {
        img.scrollIntoView();
      }
      fullPage.parentNode.style.display = "none";
    });
  });
});

This attaches a click handler to all images that does this:

When clicked, set the background of #fullpage-img to the image source. If clicked again, hide #fullpage-img.
Use JS to work out how large #fullpage-img should be; we don’t want images to stretch, so set them to 90% of the viewport or the image width/height, whichever is smaller.
Store off the scroll position then recall it when the image is closed. This works around getting weird jumps due to the position absolute of the parent container. I’m not good enough at CSS to do this in CSS.

And that’s pretty much it. I’m sure there’s some browser/device combination in the world where this doesn’t work, but it works for me and my limited testing and I think we can agree that’s what’s important.