2

I'm attempting to incorporate video into a flat feed from GetStreamIO. My current approach is to embed a video element from Expo into the content body of the Activity UI component if the post has a video link. Starting with Youtube links only. I'm running into an issue where I'm not able to select the video url when it's available nested in props.activity.attachments. For some reason I cannot directly access the object in the videos array directly without converting the value to JSON. I referenced this StackOverflow Post for the JSON workaround.

My code to check if attachment has video url and grab it if it does

 const LikeActivity = (props) => {
  if (props.activity.attachments != undefined) {
    console.log(props.activity.attachments)
    console.log(fetchFromObject(props.activity.attachments, "og"))
    var og = fetchFromObject(props.activity.attachments, "og")
    var videos = fetchFromObject(og, "videos")
    console.log(og)
 // Can get the og object but cannot pull video url from it. 

  }
  return (
    <Activity
      {...props}
      Footer={
        <View>

// For Now just putting this here to see the video element render. Need to pass URI from Post to element eventually.               
 <Video
      source={{ uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4' }}
      rate={1.0}
      volume={1.0}
      isMuted={false}
      resizeMode="cover"
      shouldPlay
      isLooping
      style={{ width: 300, height: 300 }}
    />
            <LikeButton {...props} />
            </View>
          }
        />
      );
    };

My App implementation

<StreamApp
      apiKey="XXXX"
      appId="XXXX"
      token="XXXXXX"
  >

<FlatFeed
  feedGroup="timeline"
  userId="user-one"
  Activity={LikeActivity}
/>

</StreamApp>

Fetch From Object method

  function fetchFromObject(obj, prop) {

  if(typeof obj === 'undefined') {
      return false;
  }

  var _index = prop.indexOf('.')
  if(_index > -1) {
      return fetchFromObject(obj[prop.substring(0, _index)], prop.substr(_index + 1));
  }

  return obj[prop];
}

The feed consists of a number of posts and the props.activity.attachments has the following values at runtime. Each post with a link currently has a rich snippet. The attachments value also recognizes videos vs images. I've also included an image of the feed here as a reference.

Object {
  "og": Object {
    "description": "Why choose one when you can wear both? These energizing pairings stand out from the crowd",
    "images": Array [
      Object {
        "image": "https://www.rollingstone.com/wp-content/uploads/2018/08/GettyImages-1020376858.jpg",
      },
    ],
    "title": "'Queen' rapper rescheduling dates to 2019 after deciding to &#8220;reevaluate elements of production on the 'NickiHndrxx Tour'",
    "url": "https://www.rollingstone.com/music/music-news/nicki-minaj-cancels-north-american-tour-with-future-714315/",
  },
}
undefined
Object {
  "og": Object {
    "description": "Why choose one when you can wear both? These energizing pairings stand out from the crowd",
    "images": Array [
      Object {
        "image": "https://images.wsj.net/im-21927/TOP",
      },
    ],
    "title": "How to Pair Neutrals and Bright Colors",
    "url": "https://graphics.wsj.com/glider/marketreport-4a039902-7e0d-4631-ab83-6cc1931c1bc6",
  },
}
undefined
Object {
  "og": Object {
    "description": "Serial entrepreneur Elon Musk wants to fundamentally change the way we live. But his path to success has been characterized by both great accomplishments and flirtations with failure.",
    "images": Array [
      Object {
        "image": "https://static01.nyt.com/images/2018/08/22/us/19xp-musk-vid-2/19xp-musk-vid-2-videoSixteenByNine1050.jpg",
      },
    ],
    "title": "Elon Musk’s Highs and Lows: PayPal, SpaceX, Tesla",
    "url": "https://www.nytimes.com/video/business/100000006060092/elon-musk-tesla-spacex.html",
  },
}
undefined
Object {
  "og": Object {
    "description": "We are in a Simulation - Elon Musk",
    "images": Array [],
    "site_name": "YouTube",
    "title": "We are in a Simulation - Elon Musk",
    "type": "video.other",
    "url": "https://www.youtube.com/watch?v=xBKRuI2zHp0",
    "videos": Array [
      Object {
        "height": "360",
        "secure_url": "https://www.youtube.com/embed/xBKRuI2zHp0",
        "type": "text/html",
        "width": "640",
      },
    ],
  },
}
Array [
  Object {
    "height": "360",
    "secure_url": "https://www.youtube.com/embed/xBKRuI2zHp0",
    "type": "text/html",
    "width": "640",
  },
]
Object {
  "images": Array [
    "https://cdn.vox-cdn.com/thumbor/OBDFDT9j-nHEpGLckE4u5ibX2qU=/1400x1400/filters:format(png)/cdn.vox-cdn.com/uploads/chorus_asset/file/13589869/edu_distance_to_the_moon.png",
    "https://www.jpl.nasa.gov/images/mars/20170622/PIA01466-16.jpg",
    "http://cdn.sci-news.com/images/enlarge4/image_5608_2e-Jupiter.jpg",
    "https://d2r55xnwy6nx47.cloudfront.net/uploads/2018/07/SolarFull_SeanDoran_2880FullwidthLede-2880x1620.jpg",
  ],
}
cleme001
  • 341
  • 5
  • 15
  • hard to say without knowing the value for `props.activity.attachments`. My guess is that somewhere you are not waiting for a promise to resolve. Can you include more context (eg. code before your snippet) and the output from console.log(props.activity and props.activity.attachments?) – Tommaso Barbugli Mar 11 '19 at 13:26
  • @TommasoBarbugli Edited my original answer to include the value of props.activity.attachments. Also attached an image of the feed for reference. The undefined values refer to posts that do not have any attachments on them. – cleme001 Mar 11 '19 at 17:12
  • can you add the context where you code run? – Tommaso Barbugli Mar 12 '19 at 09:07
  • I believe you should use the Content in Activity to use your – Rafael Cavalcante Nov 08 '19 at 19:10

0 Answers0