Q:

How to conditionally subscribe inside an observable, wait for response and return the complete result?

I have an Observable from a Promise like so (I am using strict Typescript):
let foo: Subscription = from(channel.getMessages).pipe(flatMap((data: any) => data.items))

// then I subscribe to it like this
foo.subscribe((val: any) => console.log(val))

I need to pipe flatMap in because the channel object has an items array property that holds all the text messages. This would be pretty straightforward, however some messages are of type media and in those cases I have to do another request with the media.getContentUrl (which is also a Promise). So in this case I have to get back the url of the media not the text message body. 
So far I tried doing something like:
let foo = from(channel.getMessages)
            .pipe(
              flatMap(data => data.items), 
              map((item: any) => {
                if (item.type === 'media') {
                  return from(item.media.getContentUrl).subscribe((val: any) => val);
                }
                return item.body;
              })
            );

This returns the item.body correctly but gives an error when the message is type media: TypeError: You provided 'function getContentUrl(): ... where stream was expected
My goal is to have an observable in which I am getting messages but when the message type is media I send another request, wait for it and I get everything back together so for example after  I get back the data my array would look like this:
messages = [
  'foo',
  'bar',
  'http://example.com/img1.jpg',
  'baz',
  'http://example.com/img2.jpg'
]

The main problem I'm facing in Reactive thinking way is: how do you set up an observable that may have to have another observable (or a simple request) inside of it based on some condition?
How would you do this in an elegant reactive manner?

A:

change map to flatMap and do not subscribe inside operators, flatMap will execute inner observable for you
          flatMap(data => data.items), 
          flatMap((item: any) => {
            return (item.type === 'media')? from(item.media.getContentUrl()):
            of(item.body);
          })

there is also an iif operator available 
https://www.learnrxjs.io/operators/conditional/iif.html
but personally i stick with native javascript 

