Second of the Day 2017 Proof of Concept using YouTube & Fetch API

Posted on Jul 05, 2017

Catching up on SOTD, releasing two previous videos that were half-edited from previous years and didn't touch their websites at all. It's embarrassing getting behind on your own personal project that you're doing for yourself, so I'm going to be better this year. 

Not that anyone really watches these videos or goes to the sites. It's just an excuse to practice more. Design more. Film more. Edit more. Ship more. Try new stuff that doesn't matter if it's a huge failure because there's always tomorrow.. or next year. Also, it doesn't hurt that I enjoy doing it.

This year, I thought it would be cool to try to wrestle with the YouTube player and display the description for the current day that is playing on screen in a box below the video. I have descriptions for other years, but there at the bottom of the page and I promise no one in their right mind reads those things. I still plan on having them on the page as a big wall of text, but maybe the box underneath the video that updates with the video would be cool too? Distracting, for sure - but that's not the point. I think it would be cool to try to make that work. Let me just start by saying...

I have no idea how this is going to actually work

Screaming internally

...but I've got a rough idea. I've been wanting to use craft for Second of the Day for a while. I keep notes of the day descriptions in Evernote and when I copy/pasted 365 pieces of text one year, it was enough to make me want to scrap the project altogether. What I'm thinking right now:

Craft CMS

Ah, good ole Craft to manage the content.

Some plugin?

Some plugin that takes in entries and spits out json.

YouTube & Fetch API

I've never used either one of these before but, I mean, how hard can it be? Using the YouTube API, listen to when the video starts and based on the current time code, use the fetch api to display the corresponding day description from the json from the craft cms entries.

The really unknown

This assumes that the video is done and edited and I know the time code of each clip (because any day could potentially be longer than a second). Assuming I only want to touch the entries in Craft once (when I'm writing the day descriptions) how am I going to get the time code into the json with the description and date info without going into each entry in craft and manually typing it in? I'm just going to try it to see if it works first.

Welp, it's working in a pretty crude way. Used the Second of the Day video from last year and just made a `days.json` file with a start, stop and desctiption for a few days to read from.

A quick google and it looks like it's possible to export certain fields on entries with this plugin, but it looks pretty old. There's probably a better way to do that now.

The proof of concept

At least I know it can be done now. I need to work on some design before I go into any deeper building.