From 7673bf66a0025534adf7474a8bc135446d54d531 Mon Sep 17 00:00:00 2001
From: Andy O'Neill <andy@scratch.mit.edu>
Date: Wed, 2 Nov 2022 14:35:15 -0400
Subject: [PATCH] Show alert if project uses video and cloud variables

---
 src/lib/project-info.js            | 10 ++++++++--
 src/views/preview/l10n.json        |  3 ++-
 src/views/preview/presentation.jsx | 29 +++++++++++++++++++----------
 src/views/preview/preview.scss     | 11 +++++++++--
 src/views/preview/project-view.jsx |  8 ++++++--
 5 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/src/lib/project-info.js b/src/lib/project-info.js
index ac16d29be..30b82e777 100644
--- a/src/lib/project-info.js
+++ b/src/lib/project-info.js
@@ -20,7 +20,8 @@ module.exports = {
             const stage = project.targets[0];
             return Object.values(stage.variables)
                 .some(variable => variable.length === 3); // 3 entries if cloud var
-        }
+        },
+        videoSensing: project => (project.extensions || []).includes('videoSensing')
     },
     2: {
         extensions: () => [], // Showing extension chip not implemented for scratch2 projects
@@ -30,6 +31,11 @@ module.exports = {
             // Block traversing is complicated in scratch2 projects...
             // This check should work even if you have sprites named getUserName, etc.
             JSON.stringify(project).indexOf('["getUserName"]') !== -1,
-        cloudData: project => project.info.hasCloudData
+        cloudData: project => project.info.hasCloudData,
+        videoSensing: project => {
+            const stringifiedProject = JSON.stringify(project);
+            return ['senseVideoMotion', 'setVideoState', 'setVideoTransparency', 'whenSensorGreaterThan']
+                .some(opcode => stringifiedProject.includes(`["${opcode}"`));
+        }
     }
 };
diff --git a/src/views/preview/l10n.json b/src/views/preview/l10n.json
index 31271fbf2..e54594781 100644
--- a/src/views/preview/l10n.json
+++ b/src/views/preview/l10n.json
@@ -47,5 +47,6 @@
     "project.cloudDataLink": "See Data",
     "project.usernameBlockAlert": "This project can detect who is using it, through the \"username\" block. To hide your identity, sign out before using the project.",
     "project.inappropriateUpdate": "Hmm...the bad word detector thinks there is a problem with your text. Please change it and remember to be respectful.",
-    "project.mutedAddToStudio": "You will be able to add to studios again {inDuration}."
+    "project.mutedAddToStudio": "You will be able to add to studios again {inDuration}.",
+    "project.cloudDataAndVideoAlert": "For privacy reasons, cloud variables have been disabled in this project because it contains video sensing blocks."
 }
diff --git a/src/views/preview/presentation.jsx b/src/views/preview/presentation.jsx
index f900fde88..2e56d2b0e 100644
--- a/src/views/preview/presentation.jsx
+++ b/src/views/preview/presentation.jsx
@@ -125,6 +125,7 @@ const PreviewPresentation = ({
     originalInfo,
     parentInfo,
     showCloudDataAlert,
+    showCloudDataAndVideoAlert,
     showUsernameBlockAlert,
     projectHost,
     projectId,
@@ -335,16 +336,23 @@ const PreviewPresentation = ({
                                     {fullscreen: isFullScreen}
                                 )}
                             >
-                                {showCloudDataAlert && (
-                                    <FlexRow className="project-info-alert">
-                                        <FormattedMessage id="project.cloudDataAlert" />
-                                    </FlexRow>
-                                )}
-                                {showUsernameBlockAlert && (
-                                    <FlexRow className="project-info-alert">
-                                        <FormattedMessage id="project.usernameBlockAlert" />
-                                    </FlexRow>
-                                )}
+                                <div className="project-info-alerts">
+                                    {showCloudDataAlert && (
+                                        <FlexRow className="project-info-alert">
+                                            <FormattedMessage id="project.cloudDataAlert" />
+                                        </FlexRow>
+                                    )}
+                                    {showCloudDataAndVideoAlert && (
+                                        <FlexRow className="project-info-alert">
+                                            <FormattedMessage id="project.cloudDataAndVideoAlert" />
+                                        </FlexRow>
+                                    )}
+                                    {showUsernameBlockAlert && (
+                                        <FlexRow className="project-info-alert">
+                                            <FormattedMessage id="project.usernameBlockAlert" />
+                                        </FlexRow>
+                                    )}
+                                </div>
                                 <IntlGUI
                                     isPlayerOnly
                                     assetHost={assetHost}
@@ -785,6 +793,7 @@ PreviewPresentation.propTypes = {
     reportOpen: PropTypes.bool,
     showAdminPanel: PropTypes.bool,
     showCloudDataAlert: PropTypes.bool,
+    showCloudDataAndVideoAlert: PropTypes.bool,
     showEmailConfirmationModal: PropTypes.bool,
     showEmailConfirmationBanner: PropTypes.bool,
     showModInfo: PropTypes.bool,
diff --git a/src/views/preview/preview.scss b/src/views/preview/preview.scss
index f9160c144..424f73e9f 100644
--- a/src/views/preview/preview.scss
+++ b/src/views/preview/preview.scss
@@ -367,10 +367,17 @@ $stage-width: 480px;
         z-index: 1;
 
         $alert-bg: rgba(255, 255, 255, .85);
-        .project-info-alert {
+
+        .project-info-alerts {
             position: absolute;
             z-index: 8; // Below navbar
-            margin: 60px 15px;
+            margin: 60px 15px 0;
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
+        }
+            
+        .project-info-alert {
             border-radius: .25rem;
             background: $alert-bg;
             padding: .75rem;
diff --git a/src/views/preview/project-view.jsx b/src/views/preview/project-view.jsx
index 6d094340e..00c0cdd18 100644
--- a/src/views/preview/project-view.jsx
+++ b/src/views/preview/project-view.jsx
@@ -379,9 +379,10 @@ class Preview extends React.Component {
                     }
 
                     if (showAlerts) {
-                        // Check for username block only if user is logged in
+                        // Check for username and video blocks only if user is logged in
                         if (this.props.isLoggedIn) {
                             newState.showUsernameBlockAlert = helpers.usernameBlock(projectData[0]);
+                            newState.showCloudDataAndVideoAlert = hasCloudData && helpers.videoSensing(projectData[0]);
                         } else { // Check for cloud vars only if user is logged out
                             newState.showCloudDataAlert = hasCloudData;
                         }
@@ -492,6 +493,7 @@ class Preview extends React.Component {
         this.setState({
             showUsernameBlockAlert: false,
             showCloudDataAlert: false,
+            showCloudDataAndVideoAlert: false,
             greenFlagRecorded: true
         });
     }
@@ -607,7 +609,8 @@ class Preview extends React.Component {
     handleSeeInside () {
         this.setState({ // Remove any project alerts so they don't show up later
             showUsernameBlockAlert: false,
-            showCloudDataAlert: false
+            showCloudDataAlert: false,
+            showCloudDataAndVideoAlert: false
         });
         this.props.setPlayer(false);
         if (this.state.justRemixed || this.state.justShared) {
@@ -794,6 +797,7 @@ class Preview extends React.Component {
                             reportOpen={this.state.reportOpen}
                             showAdminPanel={this.props.isAdmin}
                             showCloudDataAlert={this.state.showCloudDataAlert}
+                            showCloudDataAndVideoAlert={this.state.showCloudDataAndVideoAlert}
                             showModInfo={this.props.isAdmin}
                             showEmailConfirmationModal={this.state.showEmailConfirmationModal}
                             showEmailConfirmationBanner={this.props.showEmailConfirmationBanner}