demoup-react - npm Package Compare versions

Comparing version 0.2.6 to 0.3.0

distribution/button.js

@@ -15,7 +15,2 @@ "use strict";
   return createClass({
-    defaultProps: {
-      nodeAttrs: [],
-      scope: scope
-    },
-
     componentDidMount: function componentDidMount() {
@@ -22,0 +17,0 @@ var t = this;

distribution/config.js

@@ -8,2 +8,4 @@ "use strict";
       //return "//staging.demoup.com/" + scope + "/playbuttonRenderer.js";
+    } else if (mode === "local") {
+      return "//localhost:8080/" + scope + "/playbuttonRenderer.min.js";
     } else {
@@ -16,2 +18,4 @@ return "//static.demoup.com/" + scope + "/playbuttonRenderer.min.js";
       return "//staging.demoup.com/" + scope + "/playbuttonContainer.js";
+    } else if (process.env.NODE_ENV === "local") {
+      return "//localhost:8080/" + scope + "/playbuttonContainer.min.js";
     } else {
@@ -18,0 +22,0 @@ return "//static.demoup.com/" + scope + "/playbuttonContainer.min.js";

distribution/container.js

@@ -5,84 +5,66 @@ "use strict";
 
-function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }
-
 var React = require("react");
 var config = require("./config");
 var classNames = require("classnames");
-var createClass = require('create-react-class');
+var createClass = require("create-react-class");
 var scriptLoader = require("load-script");
 
 module.exports = function (scope) {
-	return createClass({
-		/*defaultProps : {
-  	nodeAttrs: [],
-  	scope : scope
-  },*/
+  return createClass({
+    getInitialState: function getInitialState() {
+      return {
+        videosAvailable: 0,
+        videos: []
+      };
+    },
 
-		getInitialState: function getInitialState() {
-			return {
-				videosAvailable: 0,
-				videos: []
-			};
-		},
 
+    componentDidMount: function componentDidMount() {
+      var t = this;
 
-		componentDidMount: function componentDidMount() {
-			var t = this;
+      if (window.DemoUpContainerRenderer) {
+        return;
+      } else {
+        scriptLoader(config.containerPath(scope, this.props.mode), function () {
+          if (window.DemoUpInfoFetcher) {
+            window.DemoUpInfoFetcher(t.props, function (videos) {
+              t.setState({ videosAvailable: videos.length });
+              t.setState({ videos: videos });
+            });
+          }
+        });
+      }
+    },
 
-			if (window.DemoUpContainerRenderer) {
-				return;
-			} else {
-				scriptLoader(config.containerPath(scope, this.props.mode), _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-					var t0, t1;
-					return regeneratorRuntime.wrap(function _callee$(_context) {
-						while (1) {
-							switch (_context.prev = _context.next) {
-								case 0:
-									t0 = performance.now();
+    componentWillUnmount: function componentWillUnmount() {
+      document.dispatchEvent(new CustomEvent("demoup.unmounted"));
+    },
 
-									if (window.DemoUpInfoFetcher) {
-										window.DemoUpInfoFetcher(t.props, function (videos) {
-											t.setState({ videosAvailable: videos.length });
-											t.setState({ videos: videos });
-										});
-									}
+    setRef: function setRef(node) {
+      this.$container = node;
+    },
 
-									t1 = performance.now();
+    render: function render() {
+      var _this = this;
 
-								case 3:
-								case "end":
-									return _context.stop();
-							}
-						}
-					}, _callee, this);
-				})));
-			}
-		},
+      var props = this.props;
+      var childrenWithProps = React.Children.map(this.props.children, function (child) {
+        return React.cloneElement(child, {
+          videosAvailable: _this.state.videosAvailable,
+          videos: _this.state.videos,
+          threed: props.threed
+        });
+      });
 
-		componentWillUnmount: function componentWillUnmount() {
-			document.dispatchEvent(new CustomEvent('demoup.unmounted'));
-		},
-
-		setRef: function setRef(node) {
-			this.$container = node;
-		},
-
-		render: function render() {
-			var _this = this;
-
-			var props = this.props;
-			var childrenWithProps = React.Children.map(this.props.children, function (child) {
-				return React.cloneElement(child, { videosAvailable: _this.state.videosAvailable, videos: _this.state.videos, threed: props.threed });
-			});
-
-			return React.createElement(
-				"div",
-				_extends({}, props, {
-					className: classNames("demoup-container", props.className),
-					ref: this.setRef,
-					src: config.stage3Path(scope) }),
-				childrenWithProps
-			);
-		}
-	});
+      return React.createElement(
+        "div",
+        _extends({}, props, {
+          className: classNames("demoup-container", props.className),
+          ref: this.setRef,
+          src: config.stage3Path(scope)
+        }),
+        childrenWithProps
+      );
+    }
+  });
 };

distribution/player.js

@@ -12,6 +12,2 @@ "use strict";
   return createClass({
-    defaultProps: {
-      scope: scope
-    },
-
     componentDidMount: function componentDidMount() {
@@ -18,0 +14,0 @@ var t = this;

package.json

 {
   "name": "demoup-react",
-  "version": "0.2.6",
+  "version": "0.3.0",
   "description": "React components for integrating the demoup video player solution in react based websites",
@@ -18,9 +18,9 @@ "main": "distribution/index.js",
   "dependencies": {
-    "classnames": "",
-    "create-react-class": "",
-    "customevent": "^1.0.0",
-    "global": "",
-    "load-script": "",
+    "classnames": "^2.3.2",
+    "create-react-class": "^15.7.0",
+    "customevent": "^1.0.1",
+    "global": "^4.4.0",
+    "load-script": "^2.0.0",
     "object-assign": "^4.1.1",
-    "react": "^16.12.0"
+    "react": "^18.2.0"
   },
@@ -32,8 +32,8 @@ "devDependencies": {
     "babel-preset-react": "^6.24.1",
-    "eslint": "^4.12.1",
-    "eslint-config-prettier": "^2.9.0",
-    "eslint-plugin-prettier": "^2.3.1",
-    "eslint-plugin-react": "^7.5.1",
-    "prettier": "^1.8.2"
+    "eslint": "^8.36.0",
+    "eslint-config-prettier": "^8.7.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.32.2",
+    "prettier": "^2.8.5"
   }
-}
+}

README.md

@@ -21,3 +21,3 @@ # demoup-react #
 
-### button ####
+### Button ####
 
@@ -39,4 +39,42 @@ <DemoUpButton
 
+### Container ###
+
+Additionally to the known button component, there is also a button container element available. It was developed in order to give your components the possibilty to know how many videos there are. The child component in this case "MyChildComponent" will receive a property "videosAvailable" which contains the number of available videos, together with "videos".
+
+      <DemoUpContainer mode="production" threed="enabled" url="https://www.myshop.com/pdp">
+        <MyChildComponent />
+      </DemoUpContainer>
+
+You component "MyChildComponent" might then look like this, in order to render the video buttons
+
+    render(){
+        /* Through the properties you will get two main information: 
+        /* videosAvailable: The number of videos which were found and selected based on the langugae configuration
+        /* videos: A list of unique video ids you can use them to iterate over the array and create play buttons. 
+        /* Each playbutton can be assign to an individual video. Moreover you can specify where to playback the video, 
+        /* as already know of the former React component version. */
+        let buttonsToShow = <></>;
+        if(this.props.videos){
+
+            buttonsToShow = this.props.videos.map( aVideo =>{
+                return <DemoUpButton mid={aVideo} key={aVideo} playerAttrs={{ title: "Watch video" }} triggerCallback={cb => this.playVideo(cb)}></DemoUpButton>;
+            });
+        }
+
+        return <div>This is an example for a thumbnail container, which has currently <b> {this.props.videosAvailable} </b> videos to show.
+            <div id="demoup-thumbnail-list">
+                {buttonsToShow}
+            </div>
+            
+            <h2>Here the video will be displayed.</h2>
+            <div id="demoup-playback-div"></div>
+        </div>;
+    }
+
+### 3D Support ###
+By default 3D is disabled, to enable it you have to set the property threed="enabled" either in the button or container component.
+
 ## Changelog ##
 
+* 0.3.0 Upgrade to React 18
 * 0.2.6 Made the mode configurable
@@ -43,0 +81,0 @@ * 0.2.5 Changed default mode to staging

src/button.js

 "use strict";
 
-var React = require("react");
-var config = require("./config");
-var classNames = require("classnames");
-var createClass = require("create-react-class");
-var scriptLoader = require("load-script");
+const React = require("react");
+const config = require("./config");
+const classNames = require("classnames");
+const createClass = require("create-react-class");
+const scriptLoader = require("load-script");
 
-var window = require("global/window");
+const window = require("global/window");
 
-module.exports = function(scope) {
+module.exports = function (scope) {
   return createClass({
-    defaultProps: {
-      nodeAttrs: [],
-      scope: scope
-    },
-
-    componentDidMount: function() {
-      var t = this;
-      var props = Object.assign({}, t.props);
+    componentDidMount: function () {
+      const t = this;
+      const props = Object.assign({}, t.props);
       if (window.DemoUpPlaybuttonRenderer) {
         window.DemoUpPlaybuttonRenderer(t.$container, props);
       } else {
-        scriptLoader(config.stage2Path(scope, this.props.mode), function() {
-          t.forceUpdate(function() {
+        scriptLoader(config.stage2Path(scope, this.props.mode), function () {
+          t.forceUpdate(function () {
             window.DemoUpPlaybuttonRenderer &&
@@ -33,9 +28,9 @@ window.DemoUpPlaybuttonRenderer(t.$container, props);
 
-    componentWillUnmount: function() {
-      var CrossCustomEvent = require("customevent");
+    componentWillUnmount: function () {
+      let CrossCustomEvent = require("customevent");
       document.dispatchEvent(
         new CrossCustomEvent("demoup.unmounted", {
           detail: {
-            node: this.$container
-          }
+            node: this.$container,
+          },
         })
@@ -45,8 +40,8 @@ );
 
-    setRef: function(node) {
+    setRef: function (node) {
       this.$container = node;
     },
 
-    render: function() {
-      var props = this.props;
+    render: function () {
+      const props = this.props;
       return (
@@ -63,4 +58,4 @@ <div
       );
-    }
+    },
   });
 };

src/config.js

@@ -10,5 +10,8 @@ module.exports = {
       //return "//staging.demoup.com/" + scope + "/playbuttonRenderer.js";
+    } else if (mode === "local") {
+      return "//localhost:8080/" + scope + "/playbuttonRenderer.min.js";
     } else {
       return "//static.demoup.com/" + scope + "/playbuttonRenderer.min.js";
     }
+
   },
@@ -22,2 +25,4 @@ containerPath: function(scope, mode) {
       return "//staging.demoup.com/" + scope + "/playbuttonContainer.js";
+    } else if (process.env.NODE_ENV === "local") {
+      return "//localhost:8080/" + scope + "/playbuttonContainer.min.js";
     } else {
@@ -24,0 +29,0 @@ return "//static.demoup.com/" + scope + "/playbuttonContainer.min.js";

src/container.js

 "use strict";
 
-var React 			= require("react");
-var config 			= require("./config");
-var classNames 		= require("classnames");
-var createClass 	= require('create-react-class');
-var scriptLoader 	= require("load-script");
+const React = require("react");
+const config = require("./config");
+const classNames = require("classnames");
+const createClass = require("create-react-class");
+const scriptLoader = require("load-script");
 
+module.exports = function (scope) {
+  return createClass({
+    getInitialState() {
+      return {
+        videosAvailable: 0,
+        videos: [],
+      };
+    },
 
-module.exports = function(scope) {
-	return createClass({
-		/*defaultProps : {
-			nodeAttrs: [],
-			scope : scope
-		},*/
+    componentDidMount: function () {
+      const t = this;
 
-		getInitialState () {
-			return {
-				videosAvailable: 0,
-				videos:[]
-			};
-		  },
+      if (window.DemoUpContainerRenderer) {
+        return;
+      } else {
+        scriptLoader(config.containerPath(scope, this.props.mode), function () {
+          if (window.DemoUpInfoFetcher) {
+            window.DemoUpInfoFetcher(t.props, (videos) => {
+              t.setState({ videosAvailable: videos.length });
+              t.setState({ videos: videos });
+            });
+          }
+        });
+      }
+    },
 
-		componentDidMount : function() {
-			var t = this;
+    componentWillUnmount: function () {
+      document.dispatchEvent(new CustomEvent("demoup.unmounted"));
+    },
 
-			if (window.DemoUpContainerRenderer) {
-				return;
-			}
-			else {
-				scriptLoader(config.containerPath(scope, this.props.mode), async function() {
-					var t0 = performance.now();
-					if(window.DemoUpInfoFetcher){
-						window.DemoUpInfoFetcher(t.props, videos =>{
-							t.setState({videosAvailable: videos.length});
-							t.setState({videos: videos});
-						});
-					}
+    setRef: function (node) {
+      this.$container = node;
+    },
 
-					var t1 = performance.now();
-				});
-			}
+    render: function () {
+      const props = this.props;
+      const childrenWithProps = React.Children.map(
+        this.props.children,
+        (child) =>
+          React.cloneElement(child, {
+            videosAvailable: this.state.videosAvailable,
+            videos: this.state.videos,
+            threed: props.threed,
+          })
+      );
 
-		},
-
-		componentWillUnmount : function() {
-			document.dispatchEvent(new CustomEvent('demoup.unmounted'));
-		},
-
-		setRef : function(node) {
-			this.$container = node;
-		},
-
-		render : function() {
-			var props = this.props;
-			const childrenWithProps = React.Children.map(this.props.children, child =>
-				React.cloneElement(child, { videosAvailable: this.state.videosAvailable, videos: this.state.videos, threed: props.threed })
-			);
-		  
-			return <div
-			{...props}
-			className={classNames("demoup-container", props.className)}
-			ref={this.setRef}
-			src={config.stage3Path(scope)}>{childrenWithProps}
-			</div>;
-		}
-	});
+      return (
+        <div
+          {...props}
+          className={classNames("demoup-container", props.className)}
+          ref={this.setRef}
+          src={config.stage3Path(scope)}
+        >
+          {childrenWithProps}
+        </div>
+      );
+    },
+  });
 };

src/player.js

@@ -9,9 +9,5 @@ "use strict";
 
-module.exports = function(scope) {
+module.exports = function (scope) {
   return createClass({
-    defaultProps: {
-      scope: scope
-    },
-
-    componentDidMount: function() {
+    componentDidMount: function () {
       var t = this;
@@ -21,3 +17,3 @@ if (window.DemoUpPlayerRenderer) {
       } else {
-        scriptLoader(config.playerRenderer(scope), function() {
+        scriptLoader(config.playerRenderer(scope), function () {
           window.DemoUpPlayerRenderer &&
@@ -29,3 +25,3 @@ window.DemoUpPlayerRenderer(t.$container, t.props);
 
-    componentWillUnmount: function() {
+    componentWillUnmount: function () {
       var CrossCustomEvent = require("customevent");
@@ -35,7 +31,7 @@ document.dispatchEvent(new CrossCustomEvent("demoup.unmounted"));
 
-    setRef: function(node) {
+    setRef: function (node) {
       this.$container = node;
     },
 
-    render: function() {
+    render: function () {
       return (
@@ -47,4 +43,4 @@ <div
       );
-    }
+    },
   });
 };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Wildcard dependency

Quality

Package has a dependency with a floating version range. This can cause issues if the dependency publishes a new major version.

Found 4 instances in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Improved metrics

Number of medium quality alerts

0

decreased by-100%

Number of lines in readme file

85

increased by80.85%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

20222

decreased by-14.14%

Number of package files

17

decreased by-5.56%

Lines of code

409

decreased by-3.99%

Dependency changes

• + Addedreact@18.3.1(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact@16.14.0(transitive)

• - Removedreact-is@16.13.1(transitive)

• Updatedclassnames@^2.3.2

• Updatedcreate-react-class@^15.7.0

• Updatedcustomevent@^1.0.1

• Updatedglobal@^4.4.0

• Updatedload-script@^2.0.0

• Updatedreact@^18.2.0