scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-03-26 12:50:44 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Show alert if project uses video and cloud variables

Browse source
This commit is contained in:
Andy O'Neill 2022-11-02 14:35:15 -04:00
parent 9e47b93a25
commit 7673bf66a0
5 changed files with 44 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/lib/project-info.js
View file

@ -20,7 +20,8 @@ module.exports = {
const stage = project.targets[0]; const stage = project.targets[0];
return Object.values(stage.variables) return Object.values(stage.variables)
.some(variable => variable.length === 3); // 3 entries if cloud var .some(variable => variable.length === 3); // 3 entries if cloud var
} },
videoSensing: project => (project.extensions || []).includes('videoSensing')
}, },
2: { 2: {
extensions: () => [], // Showing extension chip not implemented for scratch2 projects extensions: () => [], // Showing extension chip not implemented for scratch2 projects
@ -30,6 +31,11 @@ module.exports = {
// Block traversing is complicated in scratch2 projects... // Block traversing is complicated in scratch2 projects...
// This check should work even if you have sprites named getUserName, etc. // This check should work even if you have sprites named getUserName, etc.
JSON.stringify(project).indexOf('["getUserName"]') !== -1, 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}"`));
}
} }
}; };

3
src/views/preview/l10n.json
View file

@ -47,5 +47,6 @@
"project.cloudDataLink": "See Data", "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.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.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."
} }

29
src/views/preview/presentation.jsx
View file

@ -125,6 +125,7 @@ const PreviewPresentation = ({
originalInfo, originalInfo,
parentInfo, parentInfo,
showCloudDataAlert, showCloudDataAlert,
showCloudDataAndVideoAlert,
showUsernameBlockAlert, showUsernameBlockAlert,
projectHost, projectHost,
projectId, projectId,
@ -335,16 +336,23 @@ const PreviewPresentation = ({
{fullscreen: isFullScreen} {fullscreen: isFullScreen}
)} )}
> >
{showCloudDataAlert && ( <div className="project-info-alerts">
<FlexRow className="project-info-alert"> {showCloudDataAlert && (
<FormattedMessage id="project.cloudDataAlert" /> <FlexRow className="project-info-alert">
</FlexRow> <FormattedMessage id="project.cloudDataAlert" />
)} </FlexRow>
{showUsernameBlockAlert && ( )}
<FlexRow className="project-info-alert"> {showCloudDataAndVideoAlert && (
<FormattedMessage id="project.usernameBlockAlert" /> <FlexRow className="project-info-alert">
</FlexRow> <FormattedMessage id="project.cloudDataAndVideoAlert" />
)} </FlexRow>
)}
{showUsernameBlockAlert && (
<FlexRow className="project-info-alert">
<FormattedMessage id="project.usernameBlockAlert" />
</FlexRow>
)}
</div>
<IntlGUI <IntlGUI
isPlayerOnly isPlayerOnly
assetHost={assetHost} assetHost={assetHost}
@ -785,6 +793,7 @@ PreviewPresentation.propTypes = {
reportOpen: PropTypes.bool, reportOpen: PropTypes.bool,
showAdminPanel: PropTypes.bool, showAdminPanel: PropTypes.bool,
showCloudDataAlert: PropTypes.bool, showCloudDataAlert: PropTypes.bool,
showCloudDataAndVideoAlert: PropTypes.bool,
showEmailConfirmationModal: PropTypes.bool, showEmailConfirmationModal: PropTypes.bool,
showEmailConfirmationBanner: PropTypes.bool, showEmailConfirmationBanner: PropTypes.bool,
showModInfo: PropTypes.bool, showModInfo: PropTypes.bool,

11
src/views/preview/preview.scss
View file

@ -367,10 +367,17 @@ $stage-width: 480px;
z-index: 1; z-index: 1;
$alert-bg: rgba(255, 255, 255, .85); $alert-bg: rgba(255, 255, 255, .85);
.project-info-alert {
.project-info-alerts {
position: absolute; position: absolute;
z-index: 8; // Below navbar 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; border-radius: .25rem;
background: $alert-bg; background: $alert-bg;
padding: .75rem; padding: .75rem;

8
src/views/preview/project-view.jsx
View file

@ -379,9 +379,10 @@ class Preview extends React.Component {
} }
if (showAlerts) { 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) { if (this.props.isLoggedIn) {
newState.showUsernameBlockAlert = helpers.usernameBlock(projectData[0]); newState.showUsernameBlockAlert = helpers.usernameBlock(projectData[0]);
newState.showCloudDataAndVideoAlert = hasCloudData && helpers.videoSensing(projectData[0]);
} else { // Check for cloud vars only if user is logged out } else { // Check for cloud vars only if user is logged out
newState.showCloudDataAlert = hasCloudData; newState.showCloudDataAlert = hasCloudData;
} }
@ -492,6 +493,7 @@ class Preview extends React.Component {
this.setState({ this.setState({
showUsernameBlockAlert: false, showUsernameBlockAlert: false,
showCloudDataAlert: false, showCloudDataAlert: false,
showCloudDataAndVideoAlert: false,
greenFlagRecorded: true greenFlagRecorded: true
}); });
} }
@ -607,7 +609,8 @@ class Preview extends React.Component {
handleSeeInside () { handleSeeInside () {
this.setState({ // Remove any project alerts so they don't show up later this.setState({ // Remove any project alerts so they don't show up later
showUsernameBlockAlert: false, showUsernameBlockAlert: false,
showCloudDataAlert: false showCloudDataAlert: false,
showCloudDataAndVideoAlert: false
}); });
this.props.setPlayer(false); this.props.setPlayer(false);
if (this.state.justRemixed || this.state.justShared) { if (this.state.justRemixed || this.state.justShared) {
@ -794,6 +797,7 @@ class Preview extends React.Component {
reportOpen={this.state.reportOpen} reportOpen={this.state.reportOpen}
showAdminPanel={this.props.isAdmin} showAdminPanel={this.props.isAdmin}
showCloudDataAlert={this.state.showCloudDataAlert} showCloudDataAlert={this.state.showCloudDataAlert}
showCloudDataAndVideoAlert={this.state.showCloudDataAndVideoAlert}
showModInfo={this.props.isAdmin} showModInfo={this.props.isAdmin}
showEmailConfirmationModal={this.state.showEmailConfirmationModal} showEmailConfirmationModal={this.state.showEmailConfirmationModal}
showEmailConfirmationBanner={this.props.showEmailConfirmationBanner} showEmailConfirmationBanner={this.props.showEmailConfirmationBanner}