Unsupported events on iOS

[jessypouliot98]

In the following code I developped Android first, everything works fine, but on iOS some events are unsupported. Pretty sure I can bypass them to make the progression UI still work, but since there is no mentions of this not being supported on iOS this is either an unknown bug or a undocumented limitation

Sample code

record = async () => {
    Ziggeo.setAppToken(ZIGGEO_APP_TOKEN);
    Ziggeo.setCameraSwitchEnabled(true);
    Ziggeo.setCoverSelectorEnabled(true);
    Ziggeo.setCamera(Ziggeo.REAR_CAMERA);

    const recorderEmitter = Ziggeo.recorderEmitter();

    this.watchEmitter(recorderEmitter);

    this.setState({ currentState: CommunicationVideo.STATE.RECORDING }, this.onStatusUpdated);

    try {
        const token = await Ziggeo.record();

        this.setState({ token }, this.onTokenUpdated);
    } catch (_) {
        await this.delete();
    }
}

watchEmitter = emitter => {
    emitter.addListener('UploadProgress', this.onUploadProgress);

    emitter.addListener('Uploaded', this.onUploaded);

    emitter.addListener('Processing', this.onProcessing);

    emitter.addListener('Processed', this.onProcessed);
};

Error in Xcode console

2021-07-22 11:12:28.661988-0400 ActivixCRM.Dev[808:132222] [native] `Uploaded` is not a supported event type for RCTZiggeoRecorder. Supported events are: `UploadProgress`, `RecordingStopped`
2021-07-22 11:12:28.675858-0400 ActivixCRM.Dev[808:132222] [native] `Processing` is not a supported event type for RCTZiggeoRecorder. Supported events are: `UploadProgress`, `RecordingStopped`
2021-07-22 11:12:28.682069-0400 ActivixCRM.Dev[808:132222] [native] `Processed` is not a supported event type for RCTZiggeoRecorder. Supported events are: `UploadProgress`, `RecordingStopped`

[katolykdev]

@jessypouliot98 ReactNative SDK does not support 'Uploaded' listener.

Please use below listener code. watchEmitter() { const emitter = Ziggeo.recorderEmitter(); emitter.addListener('UploadProgress', this.onUploadProgress); emitter.addListener('Verified', this.onVerified); emitter.addListener('Processing', this.onProcessing); emitter.addListener('Processed', this.onProcessed); }; onUploadProgress(progress) { console.log('UploadProgress :' + progress.fileName + ' uploaded ' + progress.bytesSent + ' from ' + progress.totalBytes + ' total bytes') } onVerified(data) { console.log('Verified:' + data.token); } onProcessing(data) { console.log('Processing:' + data.token); } onProcessed(data) { console.log('Processed:' + data.token); }

[katolykdev]

@jessypouliot98 Please let me know if it works for you.

[jessypouliot98]

@katolykdev We have found another way to get the necessary information out of the events and promises we get to make our detailed progress bar work on iOS

Though. I see a flaw in your response

emitter.addListener('Processing', this.onProcessing); emitter.addListener('Processed', this.onProcessed);

2021-07-22 11:12:28.675858-0400 ActivixCRM.Dev[808:132222] [native] `Processing` is not a supported event type for RCTZiggeoRecorder. Supported events are: `UploadProgress`, `RecordingStopped`
2021-07-22 11:12:28.682069-0400 ActivixCRM.Dev[808:132222] [native] `Processed` is not a supported event type for RCTZiggeoRecorder. Supported events are: `UploadProgress`, `RecordingStopped`

These did not work on iOS, but did on Android.

[katolykdev]

@jessypouliot98 Can you provide me the JS file that you are using Ziggeo and package.json files?

[jessypouliot98]

@katolykdev I am now on react-native-ziggeo-library@1.5.2 with iOS testing these events since my workaround didn't work on iOS or does not work anymore

    setEventListeners = () => {
        const emitter = Ziggeo.recorderEmitter();

        emitter.addListener('UploadProgress', () => console.log('upload progress'));
        emitter.addListener('Verified', () => console.log('verified'));
        emitter.addListener('Processing', () => console.log('processing'));
        emitter.addListener('Processed', () => console.log('processing'));
    };

    record = async () => {
        Ziggeo.setAppToken(ZIGGEO_APP_TOKEN);
        Ziggeo.setCameraSwitchEnabled(true);
        Ziggeo.setCoverSelectorEnabled(true);
        Ziggeo.setCamera(Ziggeo.REAR_CAMERA);

        this.setEventListeners();

        this.setState({ currentState: VideoCommunication.STATUS.RECORDING }, this.onStatusUpdated);

        try {
            const token = await Ziggeo.record();

            // await this.onProcessed({ token });
        } catch (_) {
            await this.delete();
        }
    }

    upload = async () => {
        Ziggeo.setAppToken(ZIGGEO_APP_TOKEN);

        this.setEventListeners();

        this.setState({ currentState: VideoCommunication.STATUS.SELECTING_FILE }, this.onStatusUpdated);

        try {
            const token = await Ziggeo.uploadFromFileSelector();

            // await this.onProcessed({ token });
        } catch (_) {
            await this.delete();
        }
    }

This is ALL the logging after recording a video and uploading a video.

 LOG  upload progress
 LOG  upload progress
 LOG  upload progress
 LOG  upload progress
 LOG  upload progress
 LOG  upload progress
 LOG  upload progress
 LOG  upload progress
 LOG  upload progress
 LOG  upload progress
 LOG  upload progress
 LOG  upload progress
 LOG  upload progress
 LOG  upload progress
 LOG  upload progress
 LOG  upload progress
 LOG  upload progress

I think something is missing..

[jessypouliot98]

@katolykdev any updates on this ? This has some breaking impacts for us on 1.5.x so we cannot use it.

[jessypouliot98]

Never mind, I made something to replace the feature..

const updateZiggeoVideo = async (token, payload = {}) => {
    const ZIGGEO_HOST = 'https://embed.ziggeo.com';
    const AUTH_PARAM = 'i07af2jp98rvoctt26y5egy3d6ccf85b490b884587015bf38e1d200b';

    const getAuthToken = async () => {
        const response = await axios.get(`${ZIGGEO_HOST}/v1/applications/${ZIGGEO_APP_TOKEN}/session`, {
            params: {
                noauth: false,
                _wrapstatus: true,
                _nocache: new Date().getTime(),
            },
        });

        const authToken = response?.data?.responseText?.token;

        if (!authToken) {
            throw new Error('Could not authenticate with Ziggeo. No token returned');
        }

        return authToken;
    };

    const authToken = await getAuthToken();

    const response = await axios.post(`${ZIGGEO_HOST}/v1/applications/${ZIGGEO_APP_TOKEN}/videos/${token}`, payload, {
        params: {
            [AUTH_PARAM]: authToken,
        },
    });

    return response;
};

[katolykdev]

Hello, @jessypouliot98 Please check on current version 1.6.26.