The Platform

Speaker 0: Hello, and welcome back to Digging the Rabbit Hole. In this episode, I'm gonna run through the codebase and the Director's project, which powers Directus TV to give you a little bit of an insight in how we use Directus at Directus to deliver Directus TV. Now before we jump into code and the Directus project, I basically wanna take some time to show you what I would call the 3 main pages of Directus TV. Firstly, we have this home page here. In the home page, we have this big global featured item here with a couple of buttons, and we also have these category sliders.

Categories contain shows, and inside of shows, we have this show page. This is the 2nd page. This is an individual show listing. So here in trace talks, we have some information about the show. We have a button to play the latest episode, and then we have a listing of episodes.

You'll also notice there are seasons. So seasons exist in the data model. A good one to demonstrate that is actually around the world here because we have 2 seasons. So here we have season 1, 2023, and we have season 2, 2024. Now the 3rd page, if we step into one of these, is the actual episode page.

So in here, we have a video embed, which we'll talk about in a moment. We have a back to show button, a next episode button, which we'll talk about also, metadata about both the show and the episode, and a list of people, and a list of resources, and they both conditionally are shown or hidden depending on where the data exists there. So that's a little bit of a rundown of these pages. We have a home page. We have a show page.

We have an episode page. Now let's look at the directors data model that powers this, and it's very, very similar to the pages. Firstly, we have shows. Each one of these is a different show, director scene scapes, quick connect, I made this, 100 apps in a 100 hours, and so on. Individual shows have a slug.

This dictates the URL for that show. The title, a little one liner, which is what is actually shown here on the home page so people know what to expect from this show. A description, and then these three graphics. So we have a tile, a logo, and a cover. To show you how they relate here, if I go into a 100 apps in a 100 hours, we have the logo, we have the background here, and then we have the tile, which is, this view here.

That's the tile. So we have the tile, the logo, and the cover. Next, we have seasons. Seasons are almost like a junction collection really. Every show has seasons.

A season is just a show, a number, and a year. And then we have episodes. I've pre filtered this down here just to make sure that we're not getting a huge, huge list of shows, but just a manageable number here. So each individual episode, these are all the episodes of season 1 of Quick Connect, have a published date. This is useful for both displaying in the website, but also for RSS feeds.

The status, because, of course, we upload all of these in bulk, and then we just change the status and the publish date and re rebuild the site on the day of publishing. Season and episode number, the slug for the URL and the title, the Vimeo ID, which again, we'll talk about in just a moment, a tile description, people, and resources. The tile is, if I go into quick connect, is this this here, each individual tile. And having tiles is useful, of course, for generating social tags, social meta tags. So that's a little rundown.

Now before we continue, let's quickly talk about Vimeo. We use Vimeo to host our video for a number of reasons, primarily because they have a really good player that works cross platform and also will adapt to the needs of the viewer. If you have less, you know, less bandwidth, it will drop the quality of the video that you get delivered. And to be frank, I just didn't wanna build that. So it's good to lean on other platforms as appropriate.

Finally, we have categories. These are for the homepage. So these are those sliders of categories. It just has a status, a title, and shows that can be sorted, and these can also be sorted which change the order of the categories and the order of the shows within a category. That's a little bit of a rundown of the director's project.

Let's do a little rundown of the code now, and hopefully, it should all look reasonably, you know, reasonably sensible given the concepts that we've spoken about so far. So here we have the home page. In a home page, we have a hero. That's that top kind of graphic unit with the featured item, And this grabs data from the global's collection in director, so I didn't show that. Here is the global's collection, and there is a featured item there.

So that populates the TV hero. And we also have the TV category, which lists all of the categories. Now this is a custom component here inside of TV. We have custom category, which are the sliders. We have the, the show, which are the individual tiles.

We have the navigation, which goes in the hero. That's a separate item because on the on the actual episode page, it's not nested within the, within the hero, but on the other pages that is nested in the hero. So it's a it's a separate element. That's the hero. Then we have the individual episodes.

This is for the show listing page with the horizontal I'll show you. With these, that is a TV show here. We use that in a few places. And so they kind of cascade. So on the home page here, we have the categories.

The categories render the shows. Then over in an individual show page here, we have the hero unit once again. And then we have all of the oh, I'm I'm in the wrong section here. This is where I wanna be. We have the hero, and then we have, each of the seasons being looped over.

And inside of that, we have each episode. Once again, we're just using directors. So we're grabbing the we're grabbing the show. We're grabbing the latest episode because that's the button here. So it's play latest episodes.

So we wanna know what that is. We grab all the episodes. We grab all the seasons, and we jam those together here to create our data model. And once again, we just have some SEO meta tags here. In the individual episode page, it pins mostly on this iframe, of course, but we do have this additional data.

We have back to show, and we also have what's coming up next. Now this is interesting. So the bottom will either say next season or next episode. It will say next season if it's the last episode in a season, or it will say next episode if there is another episode in this season that we're in now. We also just render all of the kind of static information for that episode.

Looking down at the code here, we grab the episode data here based on whatever is in the URL, and we grab the next item. So the next item will firstly always be of this show. You know, if we're in a 100 apps in a 100 hours, we wanna return an episode of a 100 apps in a 100 hours. And either there will be, an episode in this season, but one episode up, or there won't be because we'll be in the last episode of a season. And in that case, we will want to get one season up and episode number 1.

Right? And so next, we'll either end up with the next episode, the first episode of the next season, or nothing. And we can conditionally show that next button and what it says based on what is returned. That's a pretty cool use of directors' filter syntax there. And then just a little date for matter.

Once again, just some just some SEO meta tags. So that's really Directus TV. Pretty, like, straightforward data model. The only thing I would perhaps do differently on reflection is I wouldn't, hard code people. I wouldn't hard code people here into each episode, but I would make that a relational collection.

But that's fine. We can always enhance that in future. Because I wanna show you stuff that's relevant to everyone, we won't dig into Directus TV live today. But that is a a breakdown of how Directus TV works, both in terms of the mental models and the concepts of shows, seasons, episodes, and categories, how they relate to a data model and how they relate to a code base. So I hope you found this interesting, and we'll see you in the next episode.