video-privacy 1.0.0-beta.2 → 1.0.0-beta.4

package/dist/index.js

@@ -1,2 +1,69 @@
-import VideoPrivacy from '/src/video-privacy/video-privacy';
-export { default } from '/src/video-privacy/video-privacy';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import React, { useState } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+document.head.innerHTML += "<style>.vidpriv--container {\n    position: relative;\n    background-color: black;\n    aspect-ratio: 16 / 9;\n}\n\n.vidpriv--backdrop {\n    background-size: cover;\n    width: 100%;\n    height: 100%;\n    filter: blur(5px);\n    opacity: 0.25;\n}\n\n.vidpriv--content {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n}\n\n.vidpriv--info {\n    font-family: Arial, Helvetica, sans-serif;\n    color: white;\n    text-align: center;\n}\n\n.vidpriv--button {\n    font-family: Arial, Helvetica, sans-serif;\n    border: solid;\n    border-width: 1px;\n    border-color: white;\n    border-radius: 0;\n    background-color: transparent;\n    padding: 10px 20px;\n    color: white;\n    font-weight: bold;\n    cursor: pointer;\n}\n\n.vidpriv--button:hover {\n    background-color: white;\n    color: black;\n    transition: all 0.3s;\n}\n</style>";
+
+function VideoPrivacy(props) {
+  // State to determine if the user has acknowledged the privacy notice
+
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    acknowledged = _useState2[0],
+    setAcknowledged = _useState2[1];
+
+  // Info and button text, either from props or default values
+
+  var info = props.info || "Info text";
+  var buttonText = props.buttonText || "I agree";
+
+  // Style definitions, either from module CSS or from props
+
+  var customInfoClass = "vidpriv--info";
+  if (props.customInfoClass) {
+    customInfoClass = props.customInfoClass;
+  }
+  var customButtonClass = "vidpriv--button";
+  if (props.customButtonClass) {
+    customButtonClass = props.customButtonClass;
+  }
+  var containerStyle = {
+    width: props.width || 800
+  };
+  var backdropStyle = {
+    backgroundImage: "url(".concat(props.imageUrl || "", ")")
+  };
+
+  // If the user has acknowledged the privacy notice, render the children
+
+  if (acknowledged) {
+    return /*#__PURE__*/jsx(React.Fragment, {
+      children: props.children
+    });
+  }
+
+  // Otherwise, render the privacy notice container
+
+  return /*#__PURE__*/jsxs("div", {
+    className: "vidpriv--container",
+    style: containerStyle,
+    children: [/*#__PURE__*/jsx("div", {
+      className: "vidpriv--backdrop",
+      style: backdropStyle
+    }), /*#__PURE__*/jsxs("div", {
+      className: "vidpriv--content",
+      children: [/*#__PURE__*/jsx("h2", {
+        className: customInfoClass,
+        children: info
+      }), /*#__PURE__*/jsx("button", {
+        className: customButtonClass,
+        onClick: function onClick() {
+          return setAcknowledged(true);
+        },
+        children: buttonText
+      })]
+    })]
+  });
+}
+
+export { VideoPrivacy as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "video-privacy",
-    "version": "1.0.0-beta.2",
+    "version": "1.0.0-beta.4",
     "scripts": {
         "rollup": "node_modules/rollup/dist/rollup.js",
         "dev": "next dev",
@@ -31,8 +31,6 @@
         "@chromatic-com/storybook": "^1.5.0",
         "@rollup/plugin-babel": "^6.0.4",
         "@rollup/plugin-commonjs": "^26.0.1",
-        "@rollup/plugin-json": "^6.1.0",
-        "@rollup/plugin-node-resolve": "^15.2.3",
         "@semantic-release/git": "^10.0.1",
         "@semantic-release/gitlab": "^13.1.0",
         "@semantic-release/npm": "^12.0.1",
@@ -48,6 +46,7 @@
         "eslint-config-next": "14.2.4",
         "eslint-plugin-storybook": "^0.8.0",
         "rollup": "^4.18.0",
+        "rollup-plugin-import-css": "^3.5.0",
         "semantic-release": "^24.0.0",
         "storybook": "^8.1.10"
     },