video-privacy 1.0.0-beta.1 → 1.0.0-beta.3

package/README.md

@@ -1,36 +1,74 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Video Privacy
 
-## Getting Started
+This is a simple React component that allows to wrap iframes in to a privacy layer that has to be acknowledged before loading external data. It was originally intended for use in [Docusaurus](https://www.docusaurus.io) but should work in any React context.
 
-First, run the development server:
+## Installation
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+In your project, execute
+
+```
+npm install --save video-privacy
+```
+
+Then, import the component where you wish to use it:
+
+```
+import VideoPrivacy from "video-privacy"
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+## Usage
 
-You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
+Simply wrap the embed code in the component, like in this example:
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+```
+<VideoPrivacy>
+    <iframe
+        width="800"
+        height="450"
+        src="https://www.youtube.com/embed/b5c2oawLPU8"
+        title="Ontologien - was ist das eigentlich?"
+        frameborder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        referrerpolicy="strict-origin-when-cross-origin"
+        allowfullscreen
+    ></iframe>
+</VideoPrivacy>
+```
+
+The component can be customized with props:
+
+```
+<VideoPrivacy width={1024} info="Your text goes here" imageUrl="https://your_backdrop.jpg">
+```
 
-## Learn More
+## Allowed Props
 
-To learn more about Next.js, take a look at the following resources:
+-   `width`  
+     **Description:** The width of the privacy container. Should be the same as the width of the iframe to prevent awkward results.  
+     **Type:** Number  
+     **Default value:** 800
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+-   `info`  
+     **Description:** The info text the be displayed  
+     **Type:** String  
+     **Default value:** "Please indicate that you understand that this video is loaded from an external source."
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+-   `buttonText`  
+    **Description:** The text on the acknowledge button  
+    **Type:** String  
+    **Default value:** "I understand"
 
-## Deploy on Vercel
+-   `imageUrl`  
+    **Description:** The URL of a preview image to be shown as backrop in the container  
+    **Type:** String  
+    **Default value:** _empty_
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+-   `customInfoClass`  
+    **Description:** A CSS class definition for styling the info text  
+    **Type:** String  
+    **Default value:** _empty_
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+-   `customButtonClass`  
+    **Description:** A CSS class definition for styling the acknowledge button  
+    **Type:** String  
+    **Default value:** _empty_

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';
+
+var styles = ".container {\n    position: relative;\n    background-color: black;\n    aspect-ratio: 16 / 9;\n}\n\n.backdrop {\n    background-size: cover;\n    width: 100%;\n    height: 100%;\n    filter: blur(5px);\n    opacity: 0.25;\n}\n\n.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.info {\n    font-family: Arial, Helvetica, sans-serif;\n    color: white;\n    text-align: center;\n}\n\n.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.button:hover {\n    background-color: white;\n    color: black;\n    transition: all 0.3s;\n}\n";
+
+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 = styles.info;
+  if (props.customInfoClass) {
+    customInfoClass = props.customInfoClass;
+  }
+  var customButtonClass = styles.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: styles.container,
+    style: containerStyle,
+    children: [/*#__PURE__*/jsx("div", {
+      className: styles.backdrop,
+      style: backdropStyle
+    }), /*#__PURE__*/jsxs("div", {
+      className: styles.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.1",
+    "version": "1.0.0-beta.3",
     "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,10 +46,13 @@
         "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"
     },
     "peerDependencies": {
+        "@docusaurus/core": "^3.4.0",
+        "@docusaurus/preset-classic": "^3.4.0",
         "next": "14.2.4",
         "react": "^18",
         "react-dom": "^18"