 Hello, folks. And welcome to the second season of the developer diary. The first one, I built the Chrome Dev Summit site. This time, I'm going to be building a video media app. So expect things like Chromecast support, expect things like adaptive streaming, expect things like service workers and offline media. There's going to be loads. Clearly, there's going to be loads. But what I thought I'd do in this particular entry is just show you around the design. So in the past little while, I've been working on the designs. I'm not a designer. So I just sort of play at design. And now I'm going to show you what I designed. So there we go. That's me. That's what I do, apparently. Right. On my screen there, let's have a look what we've got. We have. Let me show you this, actually. This is quite interesting. I mean, I think it's quite interesting. I guess you do too, because you've got this far into the video. Right. These are the icons. Now, you might be like, why has he got so many icons? The answer is. This top one, this kind of greeny turquoisey one, that's what I'm currently going with as the default icon. Probably the one that gets added to the home screen on the home screen. And then below it, this purple one, let me explain. The problem with the turquoisey green is what if you get some poster frame for a video that's like really orangey, or just a really different color, something that would really clash with that turquoise. So I thought, well, I'd tell you what, well, they will just change the color scheme of the site, the icons and everything else to just match. So I've been working on some code, which I'll show you soon, that does a thing called median cut, which is just a way of slicing and dicing the colors from an image so that you get a representative palette, a representative sample from that image. It's not that complex to understand or even to do, but it seems to work out pretty well. Anyway, so I thought if the album art picture, post frame, I don't know what to call it. It's got loads of different names. But if the picture that represents a video is this purpley one here, which looks to be the Millennium Bridge in London looking over to St Paul's Cathedral. If it's that, then it's a more purpley one. And you can see the icons purpley. Then this flamingo that is not doing the flamenco. But if it was, it would be a flamingo doing a flamenco. This bright orange flamingo. That gives us this kind of orangey look. Bottom one, arguably should be a bit bluer, but the code came up with these kind of grayish colors. So that's what I opted for for now. I might be probably adjust the code as it goes through. Anyway, icons, they are going to adapt to the content of the site. So what does the actual site look like? Well, this is what it looks like on desktop. Let me zoom in for you here. Too far, Paul, too far. Back it up. There we are. Right, at the top, you can see there's the icon. There's basically a featured video with a big play button in the middle that's like, this is the one that I think you should watch. In the top right corner, if I do sign in, not sure if I'm gonna need to or want to or, you know, see how it goes. There isn't a big need to, but it's an opportunity for me to try using the credentials API. So that seems like a good thing to do. Anyway, we'll see how it goes. If you tap on your little avatar picture, you get, you know, a menu there with managing your downloads and your history and stuff like that. Star rating, the name of the episode, sorry, the show and then the episode underneath it. Underneath that, we've got some new releases. There's thumbnails for those, whether or not you've watched a particular one. Star rating, for some reason, I only bothered putting in the duration on the left-hand one. Obviously, I was having a lazy day, because really, it should be on all of them. Oh, well. So below that, we also have a kind of marketingy area because again, if you're gonna build a media app, you kind of want to be like, hey, you should, you know, add to home screeners and be awesome. And then below that, there's just, I haven't even put the thumbnails. I didn't even put thumbnails in. I just dropped in a grid placeholder for his more content's gonna go here and then a footer at the bottom. So fairly, fairly straightforward. Let me see what else is worth showing you. Oh, because you can go offline, there's a version here where you've said, show me only the downloaded ones only and then we gray out any that you can't play. We put this banner at the top. It's like, I'm only showing you the downloaded ones. If you want to see all your videos, switch off that. So that grays out, yep, all the ones that you can't see. Mobile is actually not, let me just open that properly. Mobile is not vastly different really to the desktop. When I design, I tend to design desktop first because it means that I think about everything that needs to go in there and then I think about how to fit that appropriately into a mobile space rather than starting mobile and adding features in because I think that can be quite frustrating for people. They're like, but you can do that on the desktop. Why can't I do that on the phone? So that tends to be how I do the design. I actually build mobile first, but I design desktop first. Whatever. Right, what else can I show you? Oh, the video player, the actual video player. That's where all the fun stuff is probably gonna be hiding, I imagine. This is what it looks like. Then we can zoom that down a little bit. It's a bit big. So we have video playing. There's a close button. There's a skipping back and forwards by 30 seconds. I might see how that feels. It might, 30 seconds might be a bit too much. I don't know. Pause play, big one in the middle, but also a small one. If your thumb's down in the bottom corner, you might wanna just tap that. A time slider scrubbing thing there. So take me further into the video. Volume control. That one may or may not pan out because on a mobile, you tend to, I think, do you tap that button? Would you, or would you just use the phone's volume? I think you probably use the phone's volume, so I'm not sure about that one. Full screen, again, on something like iOS, you probably have full screen by default if you tapped on a video. I'm pretty sure that's what it still does. Whereas other ones might be inline playback. Again, we'll see how that goes. Taking the video, making that available offline is grand. And then a Chromecast button. Gonna be fun. Adding Chromecast support is actually, I think there are two ways to do it, which is interesting. Because I think there's the presentation API and then there's the remote playback API. Wow, we've got fun stuff to come. Anyway, so that's playing videos. So hopefully you can see the kind of thing that I'm trying to build. Think of any video playback service, like video on demand playback service. It's that kind of app, basically. Cool, right. I'm gonna stop it there because I don't wanna take up too much of your time. I think in the next entry, what I wanna do is I wanna talk a little bit more about video formats and just what I've discovered so far about how video playback can be done. It's interesting. It's definitely much more involved than I thought it was gonna be. See you then. Hey folks, if you're upset that this video has finished, don't worry, there's more. They're about here and you can click on them and then they'll start and then there'll be more video and at the end of that you'll probably see me at the end going, if you're disappointed that this video is finished, then there's more and you can do that all day every day or if you decide to not do that all day every day and you want to subscribe, then there's a button kinda here-ish that you should click and then you'll always get notified when we put stuff on the channel. Brilliant.