Added player components

README.md

@@ -15,6 +15,9 @@ run `npm pack` which will generate a new package in the root folder with the `.t
 Then in your own project you can replace `react-ziggeo` package number with path to the generated pack. 
 For example instead of `react-ziggeo: "4.x.x"` you can use `react-ziggeo: "path_to_the/package/react-ziggeo-version_number.tgz"`
 
+<br/>
+NOTE: ZiggeoAudioRecorder/ZiggeoAudioPlayer could be work only after [upgrading](https://github.com/Ziggeo/react-ziggeo#upgrade-ziggeo-sdk) to the higer or equal `[email protected]`
+
 ## Video Recorder
 
 ```$xslt
@@ -265,6 +268,7 @@ React SDK supports all of the following events and parameters:
 - [Application-wide Embedding Events](https://ziggeo.com/docs/sdks/javascript/browser-interaction/application-embedding-events#javascript-revision=stable)
 
 #### Changelog:
+- v4.5.0 Added new ZiggeoAudioRecorder and ZiggeoAudioPlayer components, could be used only with the lates ziggeo-js-sdk. [Upgrade Instruction](https://github.com/Ziggeo/react-ziggeo#upgrade-ziggeo-sdk)
 - v4.3.3 Downgraded to Ziggeo stable revision`~2.35.22`, nothing very serious changes are made on the latest version.
 - v4.3.1 added `_key` support; Upgraded ziggeo-client SDK to `~2.36.5` fixed bugs.
 - v4.3.0 Upgraded ziggeo-client SDK to `~2.36.3` fixed bugs.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-ziggeo",
-  "version": "4.4.3",
+  "version": "4.5.0",
   "description": "Ziggeo's react component for easy react application deployment",
   "main": "build/index",
   "scripts": {

src/components/ZiggeoAudioPlayer.js

@@ -0,0 +1,129 @@
+import React, { useState, useEffect, useRef } from 'react';
+import withZiggeoApplication from "./withZiggeoApplication";
+import {
+    ziggeoAudioPlayerAttributesPropTypes,
+    ziggeoPlayerEmbeddingEventsPropTypes,
+    ziggeoCommonEmbeddingEventsPropTypes,
+    ziggeoPlayerApplicationOptions,
+    reactCustomOptions
+} from '../constants';
+
+const ZiggeoAudioPlayer = ({ app, ...props }) => {
+
+    let { updateInstance } = props;
+    const [player, setPlayer] = useState(null);
+    const [attributes, setAttributes] = useState(null);
+    const [elementProps, setElementProps] = useState(null);
+    let playerElement = useRef(null);
+
+    useEffect(() => {
+        if (attributes && player && updateInstance) {
+            setAttributes(null);
+        }
+    }, [updateInstance]);
+
+    useEffect(() => {
+        if (!attributes) {
+            setAttributes(ziggeoAttributes());
+            setElementProps(ziggeoElementProps());
+        }
+        if (playerElement && attributes) {
+            setPlayer(new ZiggeoApi.V2.AudioPlayer({
+                element: playerElement.current,
+                attrs: attributes
+            }));
+        }
+    }, [attributes]);
+
+
+    useEffect(() => {
+        if (player) {
+            player.activate();
+
+            Object.entries(ziggeoEvents).forEach(([event, func]) => {
+                player.on(event, func.bind(ZiggeoAudioPlayer, player.get()));
+            });
+
+            props.onRef(player);
+        }
+
+        return () => {
+            if (player) {
+                props.onRef(null);
+                player.destroy();
+            }
+        }
+
+    }, [player]);
+
+    /**
+     * Set all props defined by user
+     * @returns {{}}
+     */
+    const ziggeoAttributes = () => {
+        return Object.keys(props)
+            .filter(k => ziggeoAudioPlayerAttributesPropTypes[k]).reduce((attr, k) => {
+                attr[k.replace(/^_/g, '')] = props[k];
+                return attr;
+            }, {});
+    };
+
+    /**
+     * Include props which are not related to Ziggeo
+     * @returns {{}}
+     */
+    const ziggeoElementProps = () => {
+        return Object.keys(props).filter(k => !ZiggeoAudioPlayer.propTypes[k]).reduce((attr, k) => {
+            attr[k] = props[k];
+            return attr;
+        }, {});
+    };
+
+    /**
+     * Add Related Events
+     * @type {{}}
+     */
+    const ziggeoEvents = Object.keys(Object.assign(ziggeoPlayerEmbeddingEventsPropTypes, ziggeoCommonEmbeddingEventsPropTypes))
+      .reduce((memo, propName) => {
+          const eventName = propName.replace(/([A-Z])/g, '_$1').toLowerCase().slice(3)
+            .replace(/(recorder_|player_)/g, '');
+          memo[eventName] = (...args) => {
+              props[propName](...args)
+          };
+          return memo;
+      }, {});
+
+    // Delegate ziggeo attrs to the player
+    const playerInstance = () => player;
+
+    return (<div ref={playerElement} app={app} {...elementProps}/>);
+};
+
+ZiggeoAudioPlayer.propTypes = {
+    ...ziggeoAudioPlayerAttributesPropTypes,
+    ...ziggeoPlayerEmbeddingEventsPropTypes,
+    ...ziggeoCommonEmbeddingEventsPropTypes,
+    ...ziggeoPlayerApplicationOptions,
+    ...reactCustomOptions
+};
+
+ZiggeoAudioPlayer.defaultProps = {
+    // Presentational parameters
+    'width': 640,
+    'height': 480,
+    'theme': 'default',
+    'themecolor': 'default',
+    'hidebarafter': 5000, // in milliseconds
+    'skipseconds': 5, // in seconds
+
+    // only react related options
+    'preventReRenderOnUpdate': true,
+
+    // Default events to no-op
+    ...Object.keys(Object.assign(ziggeoPlayerEmbeddingEventsPropTypes, ziggeoCommonEmbeddingEventsPropTypes)).reduce((defaults, event) => {
+        defaults[event] = () => {};
+        return defaults;
+    }, {})
+};
+
+export default withZiggeoApplication(ZiggeoAudioPlayer);

src/components/ZiggeoAudioRecorder.js

@@ -0,0 +1,161 @@
+/* globals ZiggeoApi */
+import React, { useState, useEffect, useRef } from 'react';
+import {
+  reactCustomOptions,
+  ziggeoAudioRecorderAttributesPropTypes,
+  ziggeoRecorderEmbeddingEventsPropTypes,
+  ziggeoCommonEmbeddingEventsPropTypes,
+  ziggeoRecorderApplicationOptions,
+  ziggeoPlayerApplicationOptions
+} from '../constants';
+
+import withZiggeoApplication from "./withZiggeoApplication";
+
+const ZiggeoAudioRecorder = ({ app, ...props }) => {
+
+  let { updateInstance } = props;
+  const [recorder, setRecorder] = useState(null);
+  const [attributes, setAttributes] = useState(null);
+  const [elementProps, setElementProps] = useState(null);
+  let recorderElement = useRef(null);
+
+  useEffect(() => {
+    if (attributes && recorder && updateInstance) {
+      setAttributes(null);
+    }
+  }, [updateInstance]);
+
+  useEffect(() => {
+    if (!attributes) {
+      setAttributes(ziggeoAttributes());
+      setElementProps(ziggeoElementProps());
+    }
+    if (recorderElement && attributes) {
+      setRecorder(new ZiggeoApi.V2.AudioRecorder({
+        element: recorderElement.current,
+        attrs: attributes
+      }));
+    }
+  }, [attributes, recorderElement]);
+
+  useEffect(() => {
+    if (recorder) {
+      recorder.activate();
+
+      Object.entries(ziggeoEvents).forEach(([event, func]) => {
+        recorder.on(event, func.bind(ZiggeoAudioRecorder, recorder.get()));
+      });
+
+      props.onRef(recorder);
+    }
+
+    return () => {
+      if (recorder) {
+        props.onRef(null);
+        recorder.destroy();
+      }
+    }
+
+  }, [recorder]);
+
+  /**
+   * Set all props defined by user
+   * @returns {{}}
+   */
+  const ziggeoAttributes = () => {
+    return Object.keys(props).filter(k => Object.assign(
+        ziggeoAudioRecorderAttributesPropTypes, ziggeoPlayerApplicationOptions
+    )[k]).reduce((attr, k) => {
+      attr[k.replace(/^_/g, '')] = props[k];
+      return attr;
+    }, {});
+  };
+
+  /**
+   * Include props which are not related to Ziggeo
+   * @returns {{}}
+   */
+  const ziggeoElementProps = () => {
+    return Object.keys(props).filter(k => !ZiggeoAudioRecorder.propTypes[k]).reduce((attr, k) => {
+      attr[k] = props[k];
+      return attr;
+    }, {});
+  };
+
+  /**
+   * Add Related Events
+   * @type {{}}
+   */
+  const ziggeoEvents = Object.keys(Object.assign(
+      ziggeoRecorderEmbeddingEventsPropTypes, ziggeoCommonEmbeddingEventsPropTypes
+  ))
+    .reduce((memo, propName) => {
+      const eventName = propName.replace(/([A-Z])/g, '_$1').toLowerCase().slice(3)
+        .replace(/(recorder_|player_)/g, '');
+      memo[eventName] = (...args) => {
+        props[propName](...args)
+      };
+      return memo;
+    }, {});
+
+  /**
+   *
+   * @returns AudioPlayer Instance
+   */
+  const recorderInstance = () => recorder;
+
+  return (<div ref={recorderElement} app={app} {...elementProps} />);
+};
+
+ZiggeoAudioRecorder.propTypes = {
+  ...ziggeoAudioRecorderAttributesPropTypes,
+  ...ziggeoRecorderEmbeddingEventsPropTypes,
+  ...ziggeoCommonEmbeddingEventsPropTypes,
+  ...ziggeoRecorderApplicationOptions,
+  ...reactCustomOptions
+};
+
+ZiggeoAudioRecorder.defaultProps = {
+  // Presentational parameters
+  'width': 640,
+  'height': 480,
+  'countdown': 3,
+  'theme': 'default',
+  'themecolor': 'default',
+  'primaryrecord': true,
+
+  // Video management parameters
+  'audiobitrate': 'auto',
+  'microphone-volume': 1,
+
+  // Operational parameters
+  'allowupload': true,
+  'allowrecord':	true,
+  'force-overwrite':	true,
+  'allowcustomupload': true,
+  'recordermode': true,
+
+  // only react related options
+  'preventReRenderOnUpdate': true,
+
+  'display-timer': true,
+  'rtmpmicrophonecodec': 'speex',
+  'transcript-language': 'en-US',
+
+
+  // application settings
+  webrtc_streaming: false,
+  webrtc_streaming_if_necessary: false,
+  webrtc_on_mobile: false,
+  auth: false,
+  debug: false,
+  testing_application: false,
+
+  // Default events to no-op
+  ...Object.keys(Object.assign(ziggeoRecorderEmbeddingEventsPropTypes, ziggeoCommonEmbeddingEventsPropTypes)).reduce((defaults, event) => {
+    defaults[event] = () => {};
+    return defaults;
+  }, {})
+};
+
+export default withZiggeoApplication(ZiggeoAudioRecorder);