Невозможно добавить видео в FlatFeed в React Native [GetStream.io] - PullRequest
Новая
       14

Невозможно добавить видео в FlatFeed в React Native [GetStream.io]

2 голосов
/ 10 марта 2019

Я пытаюсь включить видео в плоский канал из GetStreamIO . Мой текущий подход заключается во вставке видеоэлемента из Expo в тело контента компонента Activity UI, если в публикации есть ссылка на видео. Начиная только с ссылок на Youtube. Я столкнулся с проблемой, из-за которой я не могу выбрать URL-адрес видео, когда он доступен, вложенный в props.activity.attachments. По какой-то причине я не могу напрямую получить доступ к объекту в массиве videos без преобразования значения в JSON. Я ссылался на эту публикацию StackOverflow для обхода JSON.

Мой код, чтобы проверить, есть ли в приложении URL-адрес видео, и захватить его, если он есть 

 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>
          }
        />
      );
    };

Реализация моего приложения 

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

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

</StreamApp>

Метод извлечения из объекта 

  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];
}

Фид состоит из нескольких сообщений, а props.activity.attachments имеет следующие значения во время выполнения. Каждый пост со ссылкой в ​​настоящее время имеет богатый фрагмент. Значение вложения также распознает видео и изображения. Я также включил изображение канала здесь в качестве ссылки. 

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",
  ],
}
...