Latest version update

.babelrc

@@ -9,7 +9,9 @@
                         "safari >= 7",
                         "ie 9"
                     ]
-                }
+                },
+                "useBuiltIns": "entry",
+                "corejs": 3
             }
         ]
     ],

build/index.js.LICENSE.txt

@@ -0,0 +1,8 @@
+/**
+ * react-ziggeo - Ziggeo's react component for easy react application deployment
+ * @version v4.6.2
+ * @author Ziggeo Inc
+ * @link https://ziggeo.com
+ * @license Apache-2.0
+ * @version of Ziggeo 2.43.3
+ */

build/index.min.js.LICENSE.txt

@@ -0,0 +1,14 @@
+/*!
+ziggeo-client-sdk - v2.43.3 - 2023-07-28
+Copyright (c) Ziggeo
+Closed Source Software License.
+*/
+
+/**
+ * react-ziggeo - Ziggeo's react component for easy react application deployment
+ * @version v4.6.2
+ * @author Ziggeo Inc
+ * @link https://ziggeo.com
+ * @license Apache-2.0
+ * @version of Ziggeo 2.43.3
+ */

demo/package.json

@@ -3,26 +3,30 @@
   "version": "2.0.1",
   "private": true,
   "devDependencies": {
-    "react-scripts": "^1.1.4"
+    "react-scripts": "5.0.1"
   },
   "dependencies": {
-    "react": "^16.1.1",
-    "react-dom": "^16.1.1",
-    "react-router": "^4.1.2",
-    "react-router-dom": "^4.1.2",
-    "history": "^4.1.2",
-    "react-ziggeo": "",
-    "style-loader": "^0.13.1",
-    "url-loader": "^0.5.9",
-    "css-loader": "^0.26.1",
-    "file-loader": "^0.11.2",
-    "postcss-cli": "^4.1.0",
-    "ziggeo": "^0.0.20"
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-router-dom": "7.14.2",
+    "react-ziggeo": "file:.."
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

demo/src/components/MainContent.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import {Switch, Route} from 'react-router-dom';
+import {Routes, Route} from 'react-router-dom';
 import HomePage from '../pages/HomePage';
 import PlayerPage from '../pages/player/PlayerPage';
 import RecorderPage from '../pages/recorder/RecorderPage';
@@ -11,17 +11,17 @@ class MainContent extends Component {
     render() {
         return (
             <main className="App-intro container">
-                <Switch>
-                    <Route exact path="/" component={HomePage} />
-                    <Route exact path="/player" component={PlayerPage} />
-                    <Route exact path="/recorder" component={RecorderPage} />
-                    <Route exact path="/player-actions" component={PlayerActionsPage} />
-                    <Route exact path="/recorder-actions" component={RecorderActionsPage} />
-                    <Route exact path="/player-list" component={PlayerListPage} />
-                </Switch>
+                <Routes>
+                    <Route path="/" element={<HomePage />} />
+                    <Route path="/player" element={<PlayerPage />} />
+                    <Route path="/recorder" element={<RecorderPage />} />
+                    <Route path="/player-actions" element={<PlayerActionsPage />} />
+                    <Route path="/recorder-actions" element={<RecorderActionsPage />} />
+                    <Route path="/player-list" element={<PlayerListPage />} />
+                </Routes>
             </main>
         );
     }
 }
 
-export default MainContent;
+export default MainContent;

demo/src/constants.js

@@ -1,15 +1,15 @@
 // TEST APPLICATION - 2  Test Application
-export const API_KEY = '';
-export const VIDEO_TOKEN = '';
+export const API_KEY = "";
+export const VIDEO_TOKEN = "";
 
 // APP 2 - Default
-export const API_KEY_2 = '';
-export const VIDEO_TOKEN_2 = '';
-export const VIDEO_TOKEN_2_1 = '';
-export const VIDEO_TOKEN_AUDIO = ''
+export const API_KEY_2 = "";
+export const VIDEO_TOKEN_2 = "";
+export const VIDEO_TOKEN_2_1 = "";
+export const VIDEO_TOKEN_AUDIO = "";
 
 export const videos = [
-    { video: VIDEO_TOKEN_2 },
-    { video: VIDEO_TOKEN_2_1 },
-    { video: VIDEO_TOKEN_AUDIO }
+  { video: VIDEO_TOKEN_2 },
+  { video: VIDEO_TOKEN_2_1 },
+  { video: VIDEO_TOKEN_AUDIO },
 ];

demo/src/index.js

@@ -1,13 +1,12 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { BrowserRouter as Router } from 'react-router-dom';
 import './index.css';
 import App from './App';
-import registerServiceWorker from './registerServiceWorker';
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('root'));
+
+root.render(
     <Router>
         <App />
-    </Router>, document.getElementById('root'));
-
-registerServiceWorker();
+    </Router>);

demo/src/pages/player/PlayerActionsPage.js

@@ -22,11 +22,6 @@ export default class PlayerActionsPage extends Component {
         }
     }
 
-    componentDidMount () {
-        this.playerInstance = this.child.playerInstance();
-        this.playerProperties = this.playerInstance.get();
-    }
-
     handleChangeApiKey = () => {
         this.setState({
             apiToken: API_KEY,
@@ -53,12 +48,37 @@ export default class PlayerActionsPage extends Component {
         this.setState({ player });
     };
 
+    handlePlayerRef = ref => {
+        if (!ref) {
+            return;
+        }
+
+        this.child = ref;
+
+        if (typeof ref.playerInstance === 'function') {
+            this.playerInstance = ref.playerInstance();
+            this.playerProperties = this.playerInstance && this.playerInstance.get
+                ? this.playerInstance.get()
+                : null;
+        }
+    };
+
     triggerPlay = () => {
-        this.child.play();
+        if (this.child && typeof this.child.play === 'function') {
+            this.child.play();
+        }
     };
 
     triggerPause = () => {
-        this.child.pause();
+        if (this.child && typeof this.child.pause === 'function') {
+            this.child.pause();
+        }
+    };
+
+    triggerSeek = () => {
+        if (this.child && typeof this.child.seek === 'function') {
+            this.child.seek(5);
+        }
     };
 
     render () {
@@ -71,7 +91,7 @@ export default class PlayerActionsPage extends Component {
                     video={this.state.video}
                     height={this.state.player.videoHeight}
                     width={this.state.player.videoWidth}
-                    onRef={ref => (this.child = ref)}
+                    onRef={this.handlePlayerRef}
                 />
 
                 <hr />
@@ -88,7 +108,7 @@ export default class PlayerActionsPage extends Component {
                     <span> -- </span>
                     <button onClick={this.triggerPause} className="btn btn-info">Pause</button>
                     <span> -- </span>
-                    <button onClick={() => { this.child.seek(5) }} className="btn btn-danger">Seek 5 sec</button>
+                    <button onClick={this.triggerSeek} className="btn btn-danger">Seek 5 sec</button>
                 </div>
                 <br/><br/>
             </section>

demo/src/pages/recorder/RecorderActionsPage.js

@@ -18,12 +18,6 @@ export default class RecorderActionsPage extends Component {
         }
     }
 
-    componentDidMount () {
-        this.recorderInstance = this.child.recorderInstance();
-        this.recorderProperties = this.recorderInstance.get();
-        console.log('ins :: ', this.recorderInstance, this.recorderProperties);
-    }
-
     setNewDimensions = () => {
         let recorder = Object.assign({}, this.state.recorder);
         recorder.width = 440;
@@ -34,6 +28,22 @@ export default class RecorderActionsPage extends Component {
     getInstance = () => {
     }
 
+    handleRecorderRef = ref => {
+        if (!ref) {
+            return;
+        }
+
+        this.child = ref;
+
+        if (typeof ref.recorderInstance === 'function') {
+            this.recorderInstance = ref.recorderInstance();
+            this.recorderProperties = this.recorderInstance && this.recorderInstance.get
+                ? this.recorderInstance.get()
+                : null;
+            console.log('ins :: ', this.recorderInstance, this.recorderProperties);
+        }
+    }
+
     render() {
         return (
             <section className="recorder-page">
@@ -44,7 +54,7 @@ export default class RecorderActionsPage extends Component {
                 </p>
                 <ZiggeoRecorder
                     apiKey={this.state.apiKey}
-                    onRef={ref => (this.child = ref)}
+                    onRef={this.handleRecorderRef}
                     height={this.state.recorder.height}
                     width={this.state.recorder.width}
                 />

package.json

@@ -5,17 +5,17 @@
   "main": "build/index",
   "scripts": {
     "start": "concurrently \"npm run dev\"",
-    "dev": "webpack-dev-server --hot --inline",
-    "reinstall": "rm -rf node_modules/ yarn.lock && yarn install",
+    "dev": "webpack serve --hot",
+    "reinstall": "rimraf node_modules yarn.lock && yarn install",
     "build": "npm run build:development && npm run build:production",
-    "build:development": "webpack",
-    "postbuild:development": "cp node_modules/ziggeo-client-sdk/build/*.swf build && cp node_modules/ziggeo-client-sdk/build/*.png build",
-    "build:production": "NODE_ENV=production webpack -p",
+    "build:development": "webpack --mode development",
+    "postbuild:development": "shx cp node_modules/ziggeo-client-sdk/build/*.swf build && shx cp node_modules/ziggeo-client-sdk/build/*.png build",
+    "build:production": "webpack --mode production",
     "build:pack": "npm run build && npm pack",
-    "rebuild-pack": "rm -rf build/ && npm run build",
-    "rebuild-dev-pack": "rm -rf build/ && npm run build:development",
-    "rebuild-npm-dev-pack": "rm -rf build/ && rm react-ziggeo-$npm_package_version.tgz && npm run build && npm pack",
-    "rebuild-demo-pack": "rm -rf build/ && rm react-ziggeo-$npm_package_version.tgz && npm run build && npm pack"
+    "rebuild-pack": "rimraf build && npm run build",
+    "rebuild-dev-pack": "rimraf build && npm run build:development",
+    "rebuild-npm-dev-pack": "rimraf build && node -e \"const fs=require('fs');const v=require('./package.json').version;const f='react-ziggeo-'+v+'.tgz';if (fs.existsSync(f)) fs.rmSync(f);\" && npm run build && npm pack",
+    "rebuild-demo-pack": "rimraf build && node -e \"const fs=require('fs');const v=require('./package.json').version;const f='react-ziggeo-'+v+'.tgz';if (fs.existsSync(f)) fs.rmSync(f);\" && npm run build && npm pack"
   },
   "repository": {
     "type": "git",
@@ -62,17 +62,20 @@
     "@babel/plugin-proposal-throw-expressions": "^7.0.0",
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/plugin-syntax-import-meta": "^7.0.0",
-    "@babel/polyfill": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
-    "babel-loader": "^8.0.0",
-    "css-loader": "^0.26.1",
-    "file-loader": "^0.11.2",
-    "grunt": "^1.0.4",
-    "postcss-cli": "^4.1.0",
-    "style-loader": "^0.13.1",
-    "url-loader": "^0.5.9",
-    "webpack": "^2.0.0",
-    "ziggeo-client-sdk": "2.41.5"
+    "babel-loader": "^10.0.0",
+    "concurrently": "^8.2.2",
+    "core-js": "^3.40.0",
+    "cross-env": "^7.0.3",
+    "css-loader": "^7.1.2",
+    "regenerator-runtime": "^0.14.1",
+    "rimraf": "^5.0.5",
+    "shx": "^0.3.4",
+    "style-loader": "^4.0.0",
+    "webpack": "^5.101.3",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.2",
+    "ziggeo-client-sdk": "2.43.3"
   }
 }

src/constants.js

@@ -187,9 +187,14 @@ export const ziggeoPlayerAttributesPropTypes = {
     'sharevideo':	arrayOf(string),
     'loop': bool,
     'sticky': bool,
+    'sticky-position': string,
+    'sticky-starts-paused': bool,
+    'sticky-threshold': number,
+    'floatingoptions': object,
     'loopall': bool,
     'volume': number,
     'showduration': bool,
+    'showsettingsmenu': bool,
     'uploadlocales': array,
     'allowtexttrackupload': bool,
     'audio-transcription-as-subtitles': bool,
@@ -200,13 +205,15 @@ export const ziggeoPlayerAttributesPropTypes = {
     'popup-height': oneOfType([number, string]),
     'videofitstrategy': string,
     'posterfitstrategy': string,
+    'slim': bool,
 
     // Security parameters
     'server-auth': string,
     'client-auth': string,
     'stretch': bool,
     'hideoninactivity': bool,
     'hidebarafter': number, // in milliseconds
+    'hidecontrolbar': bool,
     'preventinteraction': bool,
     'stretchwidth': bool,
     'stretchheight': bool,
@@ -233,6 +240,7 @@ export const ziggeoPlayerAttributesPropTypes = {
     // Operational parameters
     'allowpip': oneOfType([bool, func]), // Disable Picture-In-Picture by default, Has to be boolean. Need present func also because of Ziggeo internally used as function
     'autoplay': bool,
+    'autoplaywhenvisible': bool,
     'application': string, // oneOfType([object, string]),
     'flashincognitosupport': bool,
     'forceflash': bool,

src/require-babel-polyfill.js

@@ -1,6 +1,11 @@
 export default (() => {
-    if((typeof window !== 'undefined' && !window._babelPolyfill) ||
-        (typeof global !== 'undefined' && !global._babelPolyfill)) {
-        require("@babel/polyfill");
+    const root = (typeof globalThis !== 'undefined') ? globalThis :
+        (typeof window !== 'undefined') ? window :
+            (typeof global !== 'undefined') ? global : null;
+    if (!root || !root.__ZIGGEO_POLYFILL_LOADED__) {
+        require("core-js/es");
+        require("core-js/web");
+        require("regenerator-runtime/runtime");
+        if (root) root.__ZIGGEO_POLYFILL_LOADED__ = true;
     }
 })()