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

package/README.md

@@ -1,6 +1,6 @@
 # Video Privacy
 
-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.
+This is a simple React component that allows to wrap iframes into a viewport-responsive 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.
 
 ## Installation
 
@@ -48,47 +48,47 @@ The component can be customized with props, for example:
 
 ## Allowed Props
 
-- `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
+* `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
 
-- `info`  
-   **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."
+* `info`\
+  **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."
 
-- `buttonText`  
-  **Description:** The text on the acknowledge button  
-  **Type:** String  
+* `buttonText`\
+  **Description:** The text on the acknowledge button\
+  **Type:** String\
   **Default value:** "I understand"
 
-- `cookie`  
-  **Description:** Save user acknowledgement to a session cookie to suppress further privacy notices  
-  **Type:** Boolean  
-  **Default value:** _false_
+* `cookie`\
+  **Description:** Save user acknowledgement to a session cookie to suppress further privacy notices\
+  **Type:** Boolean\
+  **Default value:** *false*
 
-- `cookieName`  
-  **Description:** Set a custom name for acknowledgement cookie (useful for differently scoped consent rules across your website)  
-  **Type:** String  
+* `cookieName`\
+  **Description:** Set a custom name for acknowledgement cookie (useful for differently scoped consent rules across your website)\
+  **Type:** String\
   **Default value:** "video-privacy-acknowledged"
 
-- `cookieExpires`  
-  **Description:** Set a custom expiration period in days for the cookie  
-  **Type:** Number  
-  **Default value:** _empty_ (i. e., cookie expires after session)
-
-- `imageUrl`  
-  **Description:** The URL of a preview image to be shown as backrop in the container  
-  **Type:** String  
-  **Default value:** _empty_
-
-- `customInfoClass`  
-  **Description:** A CSS class definition for styling the info text  
-  **Type:** String  
-  **Default value:** _empty_
-
-- `customButtonClass`  
-  **Description:** A CSS class definition for styling the acknowledge button  
-  **Type:** String  
-  **Default value:** _empty_
+* `cookieExpires`\
+  **Description:** Set a custom expiration period in days for the cookie\
+  **Type:** Number\
+  **Default value:** *empty* (i. e., cookie expires after session)
+
+* `imageUrl`\
+  **Description:** The URL of a preview image to be shown as backrop in the container\
+  **Type:** String\
+  **Default value:** *empty*
+
+* `customInfoClass`\
+  **Description:** A CSS class definition for styling the info text\
+  **Type:** String\
+  **Default value:** *empty*
+
+* `customButtonClass`\
+  **Description:** A CSS class definition for styling the acknowledge button\
+  **Type:** String\
+  **Default value:** *empty*

package/dist/index.js

@@ -1 +1 @@
-import e from"@babel/runtime/helpers/slicedToArray";import i,{useState as n}from"react";import o from"js-cookie";import{jsx as r,jsxs as t}from"react/jsx-runtime";var c="video-privacy-module_vidprivContainer__z9I5r",d="video-privacy-module_vidprivBackdrop__QIkNm",a="video-privacy-module_vidprivContent__9Ctbc",l="video-privacy-module_vidprivInfo__4cZn9",s="video-privacy-module_vidprivButton__OZSiX";function v(v){var p=!1,m=v.cookieName||"video-privacy-acknowledged",u=v.cookieExpires||null;v.cookie&&(p=o.get(m));var f=n(p),_=e(f,2),h=_[0],k=_[1],y=v.info||"Info text",b=v.buttonText||"I agree",g={width:v.width||800},x={backgroundImage:"url(".concat(v.imageUrl||"",")")};return h?r(i.Fragment,{children:v.children}):t("div",{className:c,style:g,children:[r("div",{className:d,style:x}),t("div",{className:a,children:[r("h2",{className:v.customInfoClass||l,children:y}),r("button",{className:v.customButtonClass||s,onClick:function(){return function(e){var i=e.setAcknowledged,n=e.cookie,r=e.cookieName,t=e.cookieExpires;return i(!0),n&&o.set(r,!0,t&&{expires:t}),null}({setAcknowledged:k,cookie:v.cookie,cookieName:m,cookieExpires:u})},children:b})]})]})}!function(e,i){void 0===i&&(i={});var n=i.insertAt;if("undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}(".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");export{v as default};
+import e from"@babel/runtime/helpers/slicedToArray";import{useState as n}from"react";import i from"js-cookie";import{jsx as o,jsxs as r}from"react/jsx-runtime";var t="video-privacy-module_vidprivContainer__z9I5r",d="video-privacy-module_vidprivBackdrop__QIkNm",a="video-privacy-module_vidprivContent__9Ctbc",c="video-privacy-module_vidprivInfo__4cZn9",l="video-privacy-module_vidprivButton__OZSiX";function v(v){var s=!1,p=v.cookieName||"video-privacy-acknowledged",m=v.cookieExpires||null;v.cookie&&(s=i.get(p));var u=n(s),_=e(u,2),f=_[0],h=_[1],y=v.info||"Info text",k=v.buttonText||"I agree",b={maxWidth:v.width||null},g={backgroundImage:"url(".concat(v.imageUrl||"",")")};return f?o("div",{className:t,style:b,children:v.children}):r("div",{className:t,style:b,children:[o("div",{className:d,style:g}),r("div",{className:a,children:[o("p",{className:v.customInfoClass||c,children:y}),o("button",{className:v.customButtonClass||l,onClick:function(){return function(e){var n=e.setAcknowledged,o=e.cookie,r=e.cookieName,t=e.cookieExpires;return n(!0),o&&i.set(r,!0,t&&{expires:t}),null}({setAcknowledged:h,cookie:v.cookie,cookieName:p,cookieExpires:m})},children:k})]})]})}!function(e,n){void 0===n&&(n={});var i=n.insertAt;if("undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===i&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}(".video-privacy-module_vidprivContainer__z9I5r {\n  position: relative;\n  background-color: black;\n  aspect-ratio: 16 / 9;\n  overflow: auto;\n  scrollbar-width: none; /* Firefox */\n  -ms-overflow-style: none; /* Internet Explorer und Edge */\n  ::-webkit-scrollbar {\n    /* Chrome, Safari und andere WebKit-basierte Browser */\n    display: none;\n  }\n}\n\n.video-privacy-module_vidprivContainer__z9I5r > *:not(.video-privacy-module_vidprivBackdrop__QIkNm):not(.video-privacy-module_vidprivContent__9Ctbc) {\n  width: 100%;\n  height: 100%;\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");export{v as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "video-privacy",
-  "version": "1.2.0-beta.1",
+  "version": "1.2.0-beta.3",
   "scripts": {
     "rollup": "node_modules/rollup/dist/rollup.js",
     "dev": "next dev",