video-privacy 1.0.0 → 1.0.1

package/README.md

@@ -49,7 +49,7 @@ The component can be customized with props:
      **Default value:** 800
 
 -   `info`  
-     **Description:** The info text the be displayed  
+     **Description:** The info text to be displayed  
      **Type:** String  
      **Default value:** "Please indicate that you understand that this video is loaded from an external source."
 

package/dist/index.js

@@ -2,7 +2,36 @@ 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 styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = ".video-privacy-module_vidprivContainer__z9I5r {\n    position: relative;\n    background-color: black;\n    aspect-ratio: 16 / 9;\n}\n\n.video-privacy-module_vidprivBackdrop__QIkNm {\n    background-size: cover;\n    width: 100%;\n    height: 100%;\n    filter: blur(5px);\n    opacity: 0.25;\n}\n\n.video-privacy-module_vidprivContent__9Ctbc {\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.video-privacy-module_vidprivInfo__4cZn9 {\n    font-family: Arial, Helvetica, sans-serif;\n    color: white;\n    text-align: center;\n}\n\n.video-privacy-module_vidprivButton__OZSiX {\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.video-privacy-module_vidprivButton__OZSiX:hover {\n    background-color: white;\n    color: black;\n    transition: all 0.3s;\n}\n";
+var styles = {"vidprivContainer":"video-privacy-module_vidprivContainer__z9I5r","vidprivBackdrop":"video-privacy-module_vidprivBackdrop__QIkNm","vidprivContent":"video-privacy-module_vidprivContent__9Ctbc","vidprivInfo":"video-privacy-module_vidprivInfo__4cZn9","vidprivButton":"video-privacy-module_vidprivButton__OZSiX"};
+styleInject(css_248z);
 
 function VideoPrivacy(props) {
   // State to determine if the user has acknowledged the privacy notice
@@ -17,16 +46,8 @@ function VideoPrivacy(props) {
   var info = props.info || "Info text";
   var buttonText = props.buttonText || "I agree";
 
-  // Style definitions, either from module CSS or from props
+  // Style definitions
 
-  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
   };
@@ -45,18 +66,18 @@ function VideoPrivacy(props) {
   // Otherwise, render the privacy notice container
 
   return /*#__PURE__*/jsxs("div", {
-    className: "vidpriv--container",
+    className: styles.vidprivContainer,
     style: containerStyle,
     children: [/*#__PURE__*/jsx("div", {
-      className: "vidpriv--backdrop",
+      className: styles.vidprivBackdrop,
       style: backdropStyle
     }), /*#__PURE__*/jsxs("div", {
-      className: "vidpriv--content",
+      className: styles.vidprivContent,
       children: [/*#__PURE__*/jsx("h2", {
-        className: customInfoClass,
+        className: styles.vidprivInfo + " " + props.customInfoClass,
         children: info
       }), /*#__PURE__*/jsx("button", {
-        className: customButtonClass,
+        className: styles.vidprivButton + " " + props.customButtonClass,
         onClick: function onClick() {
           return setAcknowledged(true);
         },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "video-privacy",
-    "version": "1.0.0",
+    "version": "1.0.1",
     "scripts": {
         "rollup": "node_modules/rollup/dist/rollup.js",
         "dev": "next dev",
@@ -46,13 +46,11 @@
         "eslint-config-next": "14.2.4",
         "eslint-plugin-storybook": "^0.8.0",
         "rollup": "^4.18.0",
-        "rollup-plugin-import-css": "^3.5.0",
+        "rollup-plugin-postcss": "^4.0.2",
         "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"