SoundCloud, can't show without consent

haslo · Oct 8, 2024 · 86f3bee · 86f3bee
1 parent 48c5ba5
commit 86f3bee
Showing 1 changed file with 29 additions and 3 deletions.
diff --git a/src/pages/music/SoundCloudIFrame.jsx b/src/pages/music/SoundCloudIFrame.jsx
@@ -1,4 +1,5 @@
-import {Container} from "@mui/material";
+import {Container, Typography, Button, Grid, Card, CardContent} from "@mui/material";
+import * as React from "react";
 
 export function SoundCloudIFrame({newestContentId}) {
   if (newestContentId !== null && newestContentId !== undefined) {
@@ -11,8 +12,33 @@ export function SoundCloudIFrame({newestContentId}) {
 
     return (
       <Container fixed style={{marginTop: '50px'}}>
-        <div dangerouslySetInnerHTML={{__html: iframeHtml}}/>
+        <div className="cookieconsent-optin-marketing">
+          <div dangerouslySetInnerHTML={{__html: iframeHtml}}/>
+        </div>
+        <div className="cookieconsent-optout-marketing">
+          <Grid item xs={12} sm={12} md={12} lg={12}>
+            <Card sx={{paddingX: 1, marginTop: '10px', marginBottom: '25px'}}>
+              <CardContent>
+                <Typography variant='h4' sx={{textAlign: 'center', marginBottom: '20px'}}>
+                  Newest track goes here..
+                </Typography>                <Typography variant="body1" gutterBottom>
+                  To listen to the music, please accept marketing cookies. This allows the website to embed the SoundCloud player.
+                </Typography>
+                <Button
+                  variant="contained"
+                  color="primary"
+                  fullWidth
+                  sx={{marginTop: '20px'}}
+                  onClick={() => window.Cookiebot.renew()}
+                >
+                  Update Cookie Preferences
+                </Button>
+              </CardContent>
+            </Card>
+          </Grid>
+        </div>
       </Container>
-    );
+    )
+      ;
   }
 }