video-privacy 1.1.1 → 1.2.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +44 -44
  2. package/dist/index.js +1 -119
  3. package/package.json +56 -60
package/README.md CHANGED
@@ -48,47 +48,47 @@ The component can be customized with props, for example:
48
48
 
49
49
  ## Allowed Props
50
50
 
51
- - `width`
52
- **Description:** The width of the privacy container. Should be the same as the width of the iframe to prevent awkward results.
53
- **Type:** Number
54
- **Default value:** 800
55
-
56
- - `info`
57
- **Description:** The info text to be displayed
58
- **Type:** String
59
- **Default value:** "Please indicate that you understand that this video is loaded from an external source."
60
-
61
- - `buttonText`
62
- **Description:** The text on the acknowledge button
63
- **Type:** String
64
- **Default value:** "I understand"
65
-
66
- - `cookie`
67
- **Description:** Save user acknowledgement to a session cookie to suppress further privacy notices
68
- **Type:** Boolean
69
- **Default value:** _false_
70
-
71
- - `cookieName`
72
- **Description:** Set a custom name for acknowledgement cookie (useful for differently scoped consent rules across your website)
73
- **Type:** String
74
- **Default value:** "video-privacy-acknowledged"
75
-
76
- - `cookieExpires`
77
- **Description:** Set a custom expiration period in days for the cookie
78
- **Type:** Number
79
- **Default value:** _empty_ (i. e., cookie expires after session)
80
-
81
- - `imageUrl`
82
- **Description:** The URL of a preview image to be shown as backrop in the container
83
- **Type:** String
84
- **Default value:** _empty_
85
-
86
- - `customInfoClass`
87
- **Description:** A CSS class definition for styling the info text
88
- **Type:** String
89
- **Default value:** _empty_
90
-
91
- - `customButtonClass`
92
- **Description:** A CSS class definition for styling the acknowledge button
93
- **Type:** String
94
- **Default value:** _empty_
51
+ - `width`
52
+ **Description:** The width of the privacy container. Should be the same as the width of the iframe to prevent awkward results.
53
+ **Type:** Number
54
+ **Default value:** 800
55
+
56
+ - `info`
57
+ **Description:** The info text to be displayed
58
+ **Type:** String
59
+ **Default value:** "Please indicate that you understand that this video is loaded from an external source."
60
+
61
+ - `buttonText`
62
+ **Description:** The text on the acknowledge button
63
+ **Type:** String
64
+ **Default value:** "I understand"
65
+
66
+ - `cookie`
67
+ **Description:** Save user acknowledgement to a session cookie to suppress further privacy notices
68
+ **Type:** Boolean
69
+ **Default value:** _false_
70
+
71
+ - `cookieName`
72
+ **Description:** Set a custom name for acknowledgement cookie (useful for differently scoped consent rules across your website)
73
+ **Type:** String
74
+ **Default value:** "video-privacy-acknowledged"
75
+
76
+ - `cookieExpires`
77
+ **Description:** Set a custom expiration period in days for the cookie
78
+ **Type:** Number
79
+ **Default value:** _empty_ (i. e., cookie expires after session)
80
+
81
+ - `imageUrl`
82
+ **Description:** The URL of a preview image to be shown as backrop in the container
83
+ **Type:** String
84
+ **Default value:** _empty_
85
+
86
+ - `customInfoClass`
87
+ **Description:** A CSS class definition for styling the info text
88
+ **Type:** String
89
+ **Default value:** _empty_
90
+
91
+ - `customButtonClass`
92
+ **Description:** A CSS class definition for styling the acknowledge button
93
+ **Type:** String
94
+ **Default value:** _empty_
package/dist/index.js CHANGED
@@ -1,119 +1 @@
1
- import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
2
- import React, { useState } from 'react';
3
- import Cookies from 'js-cookie';
4
- import { jsx, jsxs } from 'react/jsx-runtime';
5
-
6
- function HandleAcknowledge(_ref) {
7
- var setAcknowledged = _ref.setAcknowledged,
8
- cookie = _ref.cookie,
9
- cookieName = _ref.cookieName,
10
- cookieExpires = _ref.cookieExpires;
11
- setAcknowledged(true);
12
- if (cookie) {
13
- Cookies.set(cookieName, true, cookieExpires && {
14
- expires: cookieExpires
15
- });
16
- }
17
- return null;
18
- }
19
-
20
- function styleInject(css, ref) {
21
- if ( ref === void 0 ) ref = {};
22
- var insertAt = ref.insertAt;
23
-
24
- if (typeof document === 'undefined') { return; }
25
-
26
- var head = document.head || document.getElementsByTagName('head')[0];
27
- var style = document.createElement('style');
28
- style.type = 'text/css';
29
-
30
- if (insertAt === 'top') {
31
- if (head.firstChild) {
32
- head.insertBefore(style, head.firstChild);
33
- } else {
34
- head.appendChild(style);
35
- }
36
- } else {
37
- head.appendChild(style);
38
- }
39
-
40
- if (style.styleSheet) {
41
- style.styleSheet.cssText = css;
42
- } else {
43
- style.appendChild(document.createTextNode(css));
44
- }
45
- }
46
-
47
- 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";
48
- 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"};
49
- styleInject(css_248z);
50
-
51
- function VideoPrivacy(props) {
52
- // Cookie option active?
53
-
54
- var initialState = false;
55
- var cookieName = props.cookieName || "video-privacy-acknowledged";
56
- var cookieExpires = props.cookieExpires || null;
57
- if (props.cookie) {
58
- initialState = Cookies.get(cookieName);
59
- }
60
-
61
- // State to determine if the user has acknowledged the privacy notice
62
-
63
- var _useState = useState(initialState),
64
- _useState2 = _slicedToArray(_useState, 2),
65
- acknowledged = _useState2[0],
66
- setAcknowledged = _useState2[1];
67
-
68
- // Info and button text, either from props or default values
69
-
70
- var info = props.info || "Info text";
71
- var buttonText = props.buttonText || "I agree";
72
-
73
- // Style definitions
74
-
75
- var containerStyle = {
76
- width: props.width || 800
77
- };
78
- var backdropStyle = {
79
- backgroundImage: "url(".concat(props.imageUrl || "", ")")
80
- };
81
-
82
- // If the user has acknowledged the privacy notice, render the children
83
-
84
- if (acknowledged) {
85
- return /*#__PURE__*/jsx(React.Fragment, {
86
- children: props.children
87
- });
88
- }
89
-
90
- // Otherwise, render the privacy notice container
91
-
92
- return /*#__PURE__*/jsxs("div", {
93
- className: styles.vidprivContainer,
94
- style: containerStyle,
95
- children: [/*#__PURE__*/jsx("div", {
96
- className: styles.vidprivBackdrop,
97
- style: backdropStyle
98
- }), /*#__PURE__*/jsxs("div", {
99
- className: styles.vidprivContent,
100
- children: [/*#__PURE__*/jsx("h2", {
101
- className: props.customInfoClass || styles.vidprivInfo,
102
- children: info
103
- }), /*#__PURE__*/jsx("button", {
104
- className: props.customButtonClass || styles.vidprivButton,
105
- onClick: function onClick() {
106
- return HandleAcknowledge({
107
- setAcknowledged: setAcknowledged,
108
- cookie: props.cookie,
109
- cookieName: cookieName,
110
- cookieExpires: cookieExpires
111
- });
112
- },
113
- children: buttonText
114
- })]
115
- })]
116
- });
117
- }
118
-
119
- export { VideoPrivacy as default };
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};
package/package.json CHANGED
@@ -1,62 +1,58 @@
1
1
  {
2
- "name": "video-privacy",
3
- "version": "1.1.1",
4
- "scripts": {
5
- "rollup": "node_modules/rollup/dist/rollup.js",
6
- "dev": "next dev",
7
- "build": "rollup -c",
8
- "start": "next start",
9
- "lint": "next lint",
10
- "storybook": "storybook dev -p 6006",
11
- "build-storybook": "storybook build",
12
- "semantic-release": "semantic-release"
13
- },
14
- "main": "dist/index.js",
15
- "publishConfig": {
16
- "access": "public"
17
- },
18
- "files": [
19
- "dist"
20
- ],
21
- "repository": {
22
- "type": "git",
23
- "url": "https://gitlab.rlp.net/liermann/video-privacy.git"
24
- },
25
- "keywords": [
26
- "Docusaurus"
27
- ],
28
- "author": "Johannes Liermann",
29
- "license": "CC-BY-SA-4.0",
30
- "devDependencies": {
31
- "@chromatic-com/storybook": "^2.0.2",
32
- "@rollup/plugin-babel": "^6.0.4",
33
- "@rollup/plugin-commonjs": "^26.0.1",
34
- "@semantic-release/git": "^10.0.1",
35
- "@semantic-release/gitlab": "^13.2.1",
36
- "@semantic-release/npm": "^12.0.1",
37
- "@storybook/addon-essentials": "^8.3.1",
38
- "@storybook/addon-interactions": "^8.3.1",
39
- "@storybook/addon-links": "^8.3.1",
40
- "@storybook/addon-onboarding": "^8.3.1",
41
- "@storybook/blocks": "^8.3.1",
42
- "@storybook/nextjs": "^8.3.1",
43
- "@storybook/react": "^8.3.1",
44
- "@storybook/test": "^8.3.1",
45
- "eslint": "^8",
46
- "eslint-config-next": "14.2.12",
47
- "eslint-plugin-storybook": "^0.8.0",
48
- "next": "^14.2.13",
49
- "rollup": "^4.21.3",
50
- "rollup-plugin-postcss": "^4.0.2",
51
- "semantic-release": "^24.1.1",
52
- "storybook": "^8.3.1"
53
- },
54
- "peerDependencies": {
55
- "next": "^14.2",
56
- "react": "^18",
57
- "react-dom": "^18"
58
- },
59
- "dependencies": {
60
- "js-cookie": "^3.0.5"
61
- }
2
+ "name": "video-privacy",
3
+ "version": "1.2.0-beta.1",
4
+ "scripts": {
5
+ "rollup": "node_modules/rollup/dist/rollup.js",
6
+ "dev": "next dev",
7
+ "build": "rollup -c",
8
+ "start": "next start",
9
+ "lint": "next lint",
10
+ "storybook": "storybook dev -p 6006",
11
+ "build-storybook": "storybook build",
12
+ "semantic-release": "semantic-release"
13
+ },
14
+ "main": "dist/index.js",
15
+ "publishConfig": {
16
+ "access": "public"
17
+ },
18
+ "files": [
19
+ "dist"
20
+ ],
21
+ "repository": {
22
+ "type": "git",
23
+ "url": "https://gitlab.rlp.net/liermann/video-privacy.git"
24
+ },
25
+ "keywords": [
26
+ "Docusaurus"
27
+ ],
28
+ "author": "Johannes Liermann",
29
+ "license": "CC-BY-SA-4.0",
30
+ "devDependencies": {
31
+ "@chromatic-com/storybook": "^4.1.3",
32
+ "@rollup/plugin-babel": "^6.1.0",
33
+ "@rollup/plugin-commonjs": "^29.0.0",
34
+ "@rollup/plugin-terser": "^0.4.4",
35
+ "@semantic-release/git": "^10.0.1",
36
+ "@semantic-release/gitlab": "^13.2.9",
37
+ "@semantic-release/npm": "^13.1.3",
38
+ "@storybook/addon-links": "^10.1.11",
39
+ "@storybook/addon-onboarding": "^10.1.11",
40
+ "@storybook/nextjs": "^10.1.11",
41
+ "@storybook/react": "^10.1.11",
42
+ "eslint": "^9",
43
+ "eslint-config-next": "16.1.1",
44
+ "eslint-plugin-storybook": "^10.1.11",
45
+ "next": "^16.1",
46
+ "rollup": "^4.55.1",
47
+ "rollup-plugin-postcss": "^4.0.2",
48
+ "semantic-release": "^25.0.2",
49
+ "storybook": "^10.1.11"
50
+ },
51
+ "peerDependencies": {
52
+ "react": "^19 || ^18",
53
+ "react-dom": "^19 || ^18"
54
+ },
55
+ "dependencies": {
56
+ "js-cookie": "^3.0.5"
57
+ }
62
58
  }