Picking an Image

[00:00:00]
>> Jafar Husain: Now how do we actually turn this in? Remember the end, it's gonna be a flat stream of image URLs. Right now we have an observable of arrays of images, right? So how are we gonna get closer?
>> Speaker 2: We need to pick one of the images.
>> Jafar Husain: Yeah, we need to pick one of the images.

[00:00:18]
Which one are we gonna pick? Just start with any arrays.
>> Speaker 2: The first one.
>> Jafar Husain: Yeah, why not? All right? I like it. So okay, help me out. What am I gonna do here?
>> Speaker 2: You can map the images that describe. Sorry, just map. After you merge all, do a map.

[00:00:39]
All images.
>> Jafar Husain: Yeah, and now I have an array of images right is that clear to everybody? Cuz it's an observable that on next one single array of all the images associated with that sub. So sorry bare with me.
>> Speaker 2: Sure and then just say images select zero?

[00:00:56]
>> Jafar Husain: Yup, okay. Yup, now instead of images, we're gonna get image, right?
>> Jafar Husain: So we got the first image, cool. I don't know how much closer we are, or how do we decide which of the images we display? In this array of images. Like what controls which image we display?

[00:01:30]
>> Speaker 3: Back and next?
>> Jafar Husain: Back and next, right. We got this whole other two event streams that we gotta pull in, and where do they factor in to all this?
>> Jafar Husain: Any ideas? How are we gonna bring in those?
>> Jafar Husain: What if we could take next and back and turn them into a stream of offsets, right?

[00:01:59]
What if every time you hit next we want to move are over one, right? And every time you go back, we wanna move -1. What if we could create a stream of indexes that the user, has selected? Again, let's try and think about it in smaller bits. Can we do that?

[00:02:19]
What if I wanted to make offsets? How am I gonna do that for next box?
>> Jafar Husain: So every time somebody hit next, I want to admit 1, and every time somebody hits back I want to admit -1.
>> Speaker 2: Could map next to 1, value of 1, static 1.

[00:02:41]
And then back would be. And then you could also map back to static value of -1 and then merge them together.
>> Jafar Husain: Yep, I like it.
>> Jafar Husain: Right, we've got two observables. All right, we are getting closer here I can feel it. So we have offsets, now can I take a bunch of offsets 1, 1, -1, -1 and turn them into indexes?

[00:03:15]
>> Speaker 4: Scan it reduce it to index.
>> Jafar Husain: Right, isn't that what we did last time, we took a bunch of ones and negative ones. Now we scanned over them and that's how we turned them into indexes. So I'm gonna create indices.
>> Jafar Husain: All right, so now we have a stream of indices Items in the array that we wanna be selecting.

[00:03:51]
How are we gonna bring this into our observable here?
>> Jafar Husain: So at this point, I'm not sure we want, so here we did, and this is a good exercise, right? Just like we did the subs, we said, well, what would I do with just one value in the sub?

[00:04:04]
And here we said, what would I do with just one value in the images array? How do we generalize that over a stream?
>> Speaker 2: Almost feel like a zip operation.
>> Jafar Husain: A zip? Okay, that's interesting. Because you're saying for those of you who don't know a zip. You can take two collections and combine them index wise.

[00:04:29]
So if you have two different collections and you go at each corresponding index in one and combine them together. The weird thing is, here we have an observable of offsets, and we have an array of images. We could probably do something with a zip. But, the problem is, that would imply, a zip only moves in one direction, up the images, right?

[00:04:52]
So I'm not sure that zip is the right. Because we need to be able to go back and forward. So I don't think zip is the right operation. By the way, zip is named after zipper, right? Have you ever got a zipper stuck on your jacket and you couldn't get it going any more?

[00:05:04]
That's because a zip needs an item from both sides.
>> Jafar Husain: Okay, so after we've got all these subimages, I'm gonna get rid of this flatten for now. Let's think through this. Instead of just returning the array of subImages, what if we were to return a stream of all the indexes in the subImages?

[00:05:30]
How would we go about doing that?
>> Jafar Husain: Well let's say I do this.
>> Jafar Husain: So now I have the array of images. And I have all the offsets in the array. How do I turn that into a stream of images? So, given an array and a stream of indices.

[00:06:00]
How do I turn it into a stream of images?
>> Jafar Husain: So I'll say that again. Given an array and a stream of indexes into that array. How do I create a stream of items in the array?
>> Jafar Husain: Indices.map{ index. Help me out.
>> Speaker 2: Where does indices come from?

[00:06:27]
>> Jafar Husain: Good question. Right here.
>> Speaker 2: I see.
>> Jafar Husain: We just built it, right? We took all necks and backs. We built off sets. And then we built indexes. By just scanning over them and adding them to zero. And now, we've got ourselves and array of all of the images.

[00:06:41]
That we just retrieved from the sub. And now given an array. And stream of indexes into that array. How do I create a stream of the items in the array. That correspond to the indexes coming out of the stream.
>> Speaker 3: Images > SubImage or index.
>> Jafar Husain: Yeah.
>> Jafar Husain: How many dimensions is this bad boy right here?

[00:07:09]
>> Speaker 3: Two.
>> Jafar Husain: Two. Still two?
>> Jafar Husain: Why do we think it's two? So everybody agree it's two?
>> Speaker 3: Because subs is a observable, and getSubImages.map returns an observable.
>> Jafar Husain: Yeah, if you map over an observable, you get the dimensionality of observable, right? And since before we had two, this is two, this is also two, cuz we're just taking that observable and transforming the data inside.

[00:07:43]
We'll sill have a two dimension observable. All right, so, if I was, I mean now we're getting actually pretty darn close, right? We got like, if you hit next, we should get an image out of there. I think this might even actually do something at this point, if we try it out.

[00:08:00]
>> Speaker 3: So we need subs.merge step to make it a-
>> Jafar Husain: I'm sorry, I forgot about the merge step, right? So merge all, so we take that two-dimensional observable and we flatten it out. Let's try this. All right, I got fingers crossed here, we're gonna get something.