add banner

package-lock.json

@@ -82,6 +82,7 @@
         "react-circular-progressbar": "^2.1.0",
         "react-copy-to-clipboard": "^5.1.0",
         "react-dom": "18.2.0",
+        "react-hook-consent": "^3.5.3",
         "react-icons": "^4.12.0",
         "react-photo-sphere-viewer": "^5.0.2-psv5.7.1",
         "react-smooth-scroll-hook": "^1.3.4",
@@ -199,9 +200,9 @@
       }
     },
     "node_modules/@emotion/is-prop-valid": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
-      "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
+      "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
       "dependencies": {
         "@emotion/memoize": "^0.8.1"
       }
@@ -3062,9 +3063,9 @@
       "integrity": "sha512-YIoDCTH3Af6XM5VuwGG/QL/CJqga1Zm3NkU3HZ4ZHK2fRMPYP1VczsTUqtsf43PH/iJNVlPHAo2oWX7BSdB2Hw=="
     },
     "node_modules/@types/stylis": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.0.tgz",
-      "integrity": "sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw=="
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz",
+      "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw=="
     },
     "node_modules/@types/uuid": {
       "version": "9.0.8",
@@ -3829,6 +3830,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -4317,9 +4323,9 @@
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.757",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.757.tgz",
-      "integrity": "sha512-jftDaCknYSSt/+KKeXzH3LX5E2CvRLm75P3Hj+J/dv3CL0qUYcOt13d5FN1NiL5IJbbhzHrb3BomeG2tkSlZmw=="
+      "version": "1.4.758",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.758.tgz",
+      "integrity": "sha512-/o9x6TCdrYZBMdGeTifAP3wlF/gVT+TtWJe3BSmtNh92Mw81U9hrYwW9OAGUh+sEOX/yz5e34sksqRruZbjYrw=="
     },
     "node_modules/elliptic": {
       "version": "6.5.4",
@@ -6233,14 +6239,11 @@
       }
     },
     "node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
+      "version": "10.2.2",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz",
+      "integrity": "sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==",
       "engines": {
-        "node": ">=10"
+        "node": "14 || >=16.14"
       }
     },
     "node_modules/lucide-react": {
@@ -6817,14 +6820,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/path-scurry/node_modules/lru-cache": {
-      "version": "10.2.2",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz",
-      "integrity": "sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==",
-      "engines": {
-        "node": "14 || >=16.14"
-      }
-    },
     "node_modules/path-type": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -7162,6 +7157,19 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-hook-consent": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/react-hook-consent/-/react-hook-consent-3.5.3.tgz",
+      "integrity": "sha512-/HUD/zw2fJbERVHIMYwbfI5WStizTjgVX7qFS8QLaFTdGOSJ7RLa7zMYrnieqW7KqtL5qriUhxySaATfanAvfA==",
+      "dependencies": {
+        "object-hash": "^3.0.0",
+        "react-toggle": "^4.1.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/react-icons": {
       "version": "4.12.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.12.0.tgz",
@@ -7283,6 +7291,19 @@
         }
       }
     },
+    "node_modules/react-toggle": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/react-toggle/-/react-toggle-4.1.3.tgz",
+      "integrity": "sha512-WoPrvbwfQSvoagbrDnXPrlsxwzuhQIrs+V0I162j/s+4XPgY/YDAUmHSeWiroznfI73wj+MBydvW95zX8ABbSg==",
+      "dependencies": {
+        "classnames": "^2.2.5"
+      },
+      "peerDependencies": {
+        "prop-types": ">= 15.3.0 < 19",
+        "react": ">= 15.3.0 < 19",
+        "react-dom": ">= 15.3.0 < 19"
+      }
+    },
     "node_modules/react-tuby": {
       "version": "0.1.24",
       "resolved": "https://registry.npmjs.org/react-tuby/-/react-tuby-0.1.24.tgz",
@@ -7526,12 +7547,9 @@
       "integrity": "sha512-cdwTTnqPu0Hyvf5in5asVdZocVDTNRmR7XEcJuIzMjJeSHybHl7vpB66AzwTaIg6CLSbtjcxc8fqcySfnTkccA=="
     },
     "node_modules/semver": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
-      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
+      "version": "7.6.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.1.tgz",
+      "integrity": "sha512-f/vbBsu+fOiYt+lmwZV0rVwJScl46HppnOA1ZvIuBWKOTlllpyJ3bfVax76/OrhCH38dyxoDIA8K7uB963IYgA==",
       "bin": {
         "semver": "bin/semver.js"
       },
@@ -7904,19 +7922,19 @@
       "integrity": "sha512-NnzSOEKyv4I83qbuKw9ROtJrrT6Z/Xt7I0HiP/e6H6GnpeTDvzwGIGeJ8slai+VwODSHQDooW2CAilJwT9SpRg=="
     },
     "node_modules/styled-components": {
-      "version": "6.1.9",
-      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.9.tgz",
-      "integrity": "sha512-aBOqs0uMsYufFXSE4q6cA6Ty1fwZuMk4BJRHfiGSna59F1otnxiDelwhN4fEwmBtIymmF0ZqXHnpSigr2ps9Cg==",
+      "version": "6.1.10",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.10.tgz",
+      "integrity": "sha512-4K8IKcn7iOt76riGLjvBhRyNPTkUKTvmnwoRFBOtJLswVvzy2VsoE2KOrfl9FJLQUYbITLJY2wfIZ3tjbkA/Zw==",
       "dependencies": {
-        "@emotion/is-prop-valid": "1.2.1",
+        "@emotion/is-prop-valid": "1.2.2",
         "@emotion/unitless": "0.8.1",
-        "@types/stylis": "4.2.0",
+        "@types/stylis": "4.2.5",
         "css-to-react-native": "3.2.0",
-        "csstype": "3.1.2",
-        "postcss": "8.4.31",
+        "csstype": "3.1.3",
+        "postcss": "8.4.38",
         "shallowequal": "1.1.0",
-        "stylis": "4.3.1",
-        "tslib": "2.5.0"
+        "stylis": "4.3.2",
+        "tslib": "2.6.2"
       },
       "engines": {
         "node": ">= 16"
@@ -7930,43 +7948,6 @@
         "react-dom": ">= 16.8.0"
       }
     },
-    "node_modules/styled-components/node_modules/csstype": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
-      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
-    },
-    "node_modules/styled-components/node_modules/postcss": {
-      "version": "8.4.31",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
-      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/postcss"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "dependencies": {
-        "nanoid": "^3.3.6",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      }
-    },
-    "node_modules/styled-components/node_modules/tslib": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
-      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
-    },
     "node_modules/styled-jsx": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
@@ -7990,9 +7971,9 @@
       }
     },
     "node_modules/stylis": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.1.tgz",
-      "integrity": "sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ=="
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz",
+      "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg=="
     },
     "node_modules/sucrase": {
       "version": "3.35.0",
@@ -8827,11 +8808,6 @@
         "node": ">=0.10.32"
       }
     },
-    "node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
-    },
     "node_modules/yaml": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.2.tgz",

package.json

@@ -84,6 +84,7 @@
     "react-circular-progressbar": "^2.1.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "18.2.0",
+    "react-hook-consent": "^3.5.3",
     "react-icons": "^4.12.0",
     "react-photo-sphere-viewer": "^5.0.2-psv5.7.1",
     "react-smooth-scroll-hook": "^1.3.4",

src/app/layout.tsx

@@ -1,12 +1,11 @@
 import type { Metadata } from 'next'
+import Head from 'next/head'
 import Script from "next/script"
 import { Roboto } from 'next/font/google'
+import './globals.css'
 
 import { cn } from '@/lib/utils/cn'
 
-import './globals.css'
-import Head from 'next/head'
-
 const roboto = Roboto({
   weight: ['100', '300', '400', '500', '700', '900'],
   style: ['normal', 'italic'],
@@ -37,39 +36,14 @@ export default function RootLayout({
           type="image/<generated>"
           sizes="<generated>"
         />
-        <Script>{`(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-})(window,document,'script','dataLayer','GTM-5ZGS5FDG');`}</Script>
       </Head>
       <body className={cn(
         `h-full w-full overflow-auto`,
         `dark text-neutral-100 bg-neutral-950`,
         roboto.className
         )}>
-        <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5ZGS5FDG"
-height="0" width="0" style={{ display: "none", visibility: "hidden" }}></iframe></noscript>
         {children}
       </body>
-
-        {/*
-        TODO: use a new tracker
-
-        import Script from "next/script"
-
-        This is the kind of project on which we want custom analytics!
-        <Script src="https://www.googletagmanager.com/gtag/js?id=GTM-NJ2ZZFBX" />
-        <Script id="google-analytics">
-          {`
-            window.dataLayer = window.dataLayer || [];
-            function gtag(){dataLayer.push(arguments);}
-            gtag('js', new Date());
-    
-            gtag('config', 'GTM-NJ2ZZFBX');
-          `}
-        </Script>
-        */}
     </html>
   )
 }

src/app/main.tsx

@@ -2,6 +2,8 @@
 
 import { useEffect } from "react"
 import { usePathname, useRouter } from "next/navigation"
+import { ConsentBanner, ConsentProvider } from 'react-hook-consent'
+import 'react-hook-consent/dist/styles/style.css'
 
 import { ChannelInfo, MediaInfo } from "@/types/general"
 import { getCollectionKey } from "@/lib/business/getCollectionKey"
@@ -193,6 +195,30 @@ export function Main({
 
   const view = useStore(s => s.view)
   return (
+    <ConsentProvider
+        options={{
+          services: [
+            {
+              id: 'gtm',
+              name: 'Google Tag Manager (for Google analytics)',
+              scripts: [
+                  { id: 'inline-code', code: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+                  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+                  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+                  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+                  })(window,document,'script','dataLayer','GTM-5ZGS5FDG');` },
+              ],
+              // cookies: [ { pattern: 'cookie-name' }, { pattern: /regex/ }
+             //  ],
+              // localStorage: ['local-storage-key'],
+              // sessionStorage: ['session-storage-key'],
+              mandatory: true,
+            },
+          ],
+          // customHash: 'my-custom-hash', // optional, e.g. when changing the options based on language
+          theme: 'dark',
+        }}
+      >
     <TubeLayout>
       {view === "home" && <HomeView />}
       {view === "public_media_embed" && <PublicMediaEmbedView />}
@@ -211,5 +237,15 @@ export function Main({
       {view === "user_account" && <UserAccountView />}
       {view === "not_found" && <NotFoundView />}
     </TubeLayout>
+    <ConsentBanner
+      settings={{ hidden: false, label: 'More', modal: { title: 'AiTube Analytics' } }}
+      decline={{ hidden: false, label: 'No' }}
+      approve={{ label: 'Yes' }}
+        >
+          <>
+            Do you allow AiTube to use cookies and external services? This is used to improve the user experience, by analyzing which features and content are liked the most.
+          </>
+        </ConsentBanner>
+        </ConsentProvider>
   )
 }