README

Antourage Widget RN SDK

Functional Description

The Antourage Widget is designed to work as a self-contained ‘widget’ within a host app. It shows live broadcasts and on-demand videos which have been captured by our mobile Broadcaster application. Antourage is mobile first and designed for the creation and viewing of realtime and near realtime micro-content.

Magnetic Button

The entry point for a user is the magnetic button that appears on the host app, usually on the main screen.

When a video is live, the button changes state and shows the title of the broadcast, and the name of the broadcaster. If the user taps the button at this point, they are taken directly to the live broadcast.

When no video is live, the button shows how many on-demand videos the viewer has not yet watched. If they tap the button at this point, they are taken to the main view:

Viewing Live Broadcasts

The video player may be used in portrait or landscape mode. In both modes, the viewer can watch the broadcast, see and contribute to comments, and see and respond to polls.

Viewing On-demand videos

When the user taps on a video, the video begins playing at the beginning, or if this video has already been partially viewed, it will begin playing at the last point the viewer watched. The Antourage Widget keeps track of which videos the user has seen, and updates the number on the magnetic button accordingly.

Each video shows the name of the video, name of the broadcaster, total time, and total view count.

Display Name

In order to contribute to the comments, a user must have an identity in our system, as well as a Display Name that shows in the comments stream. Since not all host apps require a username, we ask users to create a Display Name the first time they try to chat. If the host app does require users to create a username, we can turn off this feature.

Comments

Comments are contributed by viewers of the live broadcast only. When a video is being watched later, these comments may be displayed, but cannot be added to. The broadcaster has the ability to review comments on a video and delete ones that they deem to be unacceptable. Antourage administration also has this ability.

Polls

Polls are created by the broadcaster, and sent out during a live broadcast. They appear on the screen when they are first pushed out to the audience, and viewers can respond or simply close the poll if they do not want to answer. If they answer, they are shown the results right away, and they can see updated results as they come in.

Curation

Content can only be created by those who have been actively selected by our customers to broadcast, and broadcasters can remove their own content from view at any time. Each customer designates a time period for the storage and display of their content — usually between 2 weeks and 6 weeks. After the storage period is over, content is automatically removed. These three elements together — actively selected creators, video removal, and video aging — ensure that the viewers get a consistent experience of interesting and fresh content.

Third Party Technology

To support our functionality, we use a few third-party services and applications.
Firebase: used for push notifications, comments and polls.
Amazon Media Live: used for streaming and hosting our content

Example

To run the example project, clone the repo, go to example folder, run npm install, go to ios directory and run pod install. Return to project folder and run react-native run-ios .

Requirements

iOS 11.3 +

Getting started

$ npm install react-native-ant-viewer

Manual installation

iOS

If you use Cocoapods:

Add pod 'RNAntViewer', path: '../node_modules/react-native-ant-viewer' to your Podfile
$ pod install

If not:

$ pod init

platform :ios, '11.3'
use_frameworks!
target 'your_app_name' do
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'CxxBridge', # Include this for RN >= 0.47
'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43
'RCTText',
'RCTNetwork',
'RCTWebSocket', # needed for debugging
# Add any other subspecs you want to use in your project
]
# Explicitly include Yoga if you are using RN >= 0.42.0
pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

# Third party deps podspec link
pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

pod 'RNAntViewer', path: '../node_modules/react-native-ant-viewer'

end

$ pod install

Troubleshooting

https://stackoverflow.com/questions/50096025/it-gives-errors-when-using-swift-static-library-with-objective-c-project

Plist entries

In order for your app to access camera, you'll need to ad these plist entries :

Privacy - Camera Usage Description (photo/videos)

<key>NSCameraUsageDescription</key>
<string>yourWording</string>

Usage

Auth

It's static method (no need object init), you can use it anywhere you want (login/app start etc).

import {AntManager} from 'react-native-ant-viewer';
AntManager.authWithApiKey("put_your_apiKey_there", "put_user_id_from_your_base_or_null", "put_user_nickname_from_your_base_or_null",
(error) => {
  if (error) {
     console.error(error);
   }
});

Push notifications

We use Firebase for PN in our project. To support PN on your side you should retrieve token for our senderID, send all needed data to us right after successful auth (you can call it in auth success block) and subscribe yourself to our topic.
senderID = 1090288296965

import {AntManager} from 'react-native-ant-viewer';
AntManager.registerNotificationsWithFCMToken("FCMToken_for_antourage_senderID", (error, topic_to_subscribe) => {
  console.log(topic_to_subscribe);
  //Subscribe to this topic
  });

Add UI part

import {AntWidget} from 'react-native-ant-viewer';

export default class App extends Component<Props> {

  render() {
    return (
      <View style={styles.container}>
        <AntWidget
        isLightMode={true}
        bottomMargin={40}
        rightMargin={30}
        onViewerAppear={() => console.log("Appeared")}
        onViewerDisappear={() => console.log("Disappeared")}
        />
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
      </View>
    );
  }
}

Property	Type	Description
isLightMode	Bool	There are two widget appearance modes: light & dark. By default false.
bottomMargin	Number	Bottom margin. Default: 20.
rightMargin	Number	Right margin. Default: 20.
onViewerAppear	Callback	Called when the user opens the widget controller.
onViewerDisappear	Callback	Called when the user dismisses the widget controller.

Author

Mykola Vaniurskyi, mv@leobit.com

License

RNAntViewer is available under the MIT license. See the LICENSE file for more info.

Usage no npm install needed!