- {this.props.disabled ? (
-
-
+
- {this.props.insetIconURL ? (
-
+ {this.props.disabled ? (
+
+ {this.props.insetIconURL ? (
+
+
+ ) : null}
+ {this.props.iconSource ? (
+ this.renderImage(styles.featuredImage, this.props.iconSource)
+ ) : null}
+
+ 
) : null}
- {this.props.iconSource ? (
- this.renderImage(styles.featuredImage, this.props.iconSource)
- ) : null}
-
-
+ .driver-overlay {
+ visibility: hidden;
+}
+
+/* Fallback, if :has is not supported */
+.tooltip-face-sensing-modal ~ .driver-overlay {
+ visibility: hidden;
+}
+
+.driver-popover.tooltip-face-sensing-modal {
+ padding: 1rem;
+ background-color: $looks-secondary;
+ color: $ui-white;
+ z-index: 1000;
+ min-width: 12rem;
+ max-width: 13rem;
+ border-radius: 0.5rem;
+ border: 1px solid $looks-secondary;
+ transform: translate(0, 1.2rem);
+}
+
+.driver-popover.tooltip-face-sensing-modal .driver-popover-description {
+ font-weight: 400;
+ line-height: 1.25rem;
+ font-size: 0.875rem;
+}
+
+.driver-popover.tooltip-face-sensing-modal .driver-popover-arrow-side-right {
+ border-right-color: $looks-secondary;
+ border-width: 0.5rem;
+}
+
+.driver-popover.tooltip-face-sensing-modal .driver-popover-arrow-side-left {
+ border-left-color: $looks-secondary;
+ border-width: 0.5rem;
+}
+
+.driver-popover.tooltip-face-sensing-modal .driver-popover-arrow-side-bottom {
+ border-bottom-color: $looks-secondary;
+ border-width: 0.5rem;
+}
diff --git a/packages/scratch-gui/src/components/library/library.css b/packages/scratch-gui/src/components/library/library.css
index 1419380c10..2020a26289 100644
--- a/packages/scratch-gui/src/components/library/library.css
+++ b/packages/scratch-gui/src/components/library/library.css
@@ -15,6 +15,11 @@
height: calc(100% - $library-header-height);
}
+/* The selector needs to more specific and marked with !important to override driverjs styles */
+html body .library-scroll-grid {
+ overflow-y: auto !important;
+}
+
.library-scroll-grid.withFilterBar {
height: calc(100% - $library-header-height - $library-filter-bar-height - 2rem);
}
diff --git a/packages/scratch-gui/src/components/library/library.jsx b/packages/scratch-gui/src/components/library/library.jsx
index 2e53a44ceb..4e4d0f4322 100644
--- a/packages/scratch-gui/src/components/library/library.jsx
+++ b/packages/scratch-gui/src/components/library/library.jsx
@@ -3,6 +3,9 @@ import bindAll from 'lodash.bindall';
import PropTypes from 'prop-types';
import React from 'react';
import {defineMessages, injectIntl, intlShape} from 'react-intl';
+// eslint-disable-next-line import/no-unresolved
+import {driver} from 'driver.js';
+import 'driver.js/dist/driver.css';
import LibraryItem from '../../containers/library-item.jsx';
import Modal from '../../containers/modal.jsx';
@@ -12,9 +15,13 @@ import TagButton from '../../containers/tag-button.jsx';
import {legacyConfig} from '../../legacy-config';
import Spinner from '../spinner/spinner.jsx';
import {CATEGORIES} from '../../../src/lib/libraries/decks/index.jsx';
+import {getLocalStorageValue, setLocalStorageValue} from '../../lib/local-storage.js';
import styles from './library.css';
+const localStorageAvailable =
+ 'localStorage' in window && window.localStorage !== null;
+
const messages = defineMessages({
filterPlaceholder: {
id: 'gui.library.filterPlaceholder',
@@ -26,6 +33,12 @@ const messages = defineMessages({
defaultMessage: 'All',
description: 'Label for library tag to revert to all items after filtering by tag.'
},
+ faceSensingModalCallout: {
+ id: 'gui.library.faceSensingCallout',
+ description: 'Description for Face Sensing callout',
+ // eslint-disable-next-line max-len
+ defaultMessage: 'You can now use your face to control your projects, like making a sprite follow wherever your nose goes!'
+ },
// Strings here need to be defined statically
// https://formatjs.io/docs/getting-started/message-declaration/#pre-declaring-using-definemessage-for-later-consumption-less-recommended
[CATEGORIES.gettingStarted]: {
@@ -111,6 +124,18 @@ const getItemIcons = function (item) {
}
};
+// Default to true to make sure we don't end up showing the feature
+// callouts multiple times if localStorage isn't available.
+const hasUsedFaceSensing = (username = 'guest') => {
+ if (!localStorageAvailable) return true;
+ return getLocalStorageValue('hasUsedFaceSensing', username) === true;
+};
+
+const setHasUsedFaceSensing = (username = 'guest') => {
+ if (!localStorageAvailable) return;
+ setLocalStorageValue('hasUsedFaceSensing', username, true);
+};
+
class LibraryComponent extends React.Component {
constructor (props) {
super(props);
@@ -123,14 +148,18 @@ class LibraryComponent extends React.Component {
'handlePlayingEnd',
'handleSelect',
'handleTagClick',
+ 'handleScroll',
'setFilteredDataRef'
]);
this.state = {
playingItem: null,
filterQuery: '',
selectedTag: ALL_TAG.tag,
- loaded: false
+ loaded: false,
+ shouldShowFaceSensingCallout: props.showNewFeatureCallouts && !hasUsedFaceSensing(props.username)
};
+
+ this.driver = null;
}
componentDidMount () {
// Allow the spinner to display before loading the content
@@ -144,11 +173,76 @@ class LibraryComponent extends React.Component {
prevState.selectedTag !== this.state.selectedTag) {
this.scrollToTop();
}
+
+ // We need to create the driver when the content is loaded for the target element to exist
+ if (!prevState.loaded && this.state.loaded && this.state.shouldShowFaceSensingCallout) {
+ const onFirstClick = () => {
+ const isExtensionItemVisible = document.getElementById('faceSensing');
+ if (!isExtensionItemVisible) return;
+
+ const tooltip = driver({
+ allowClose: false,
+ allowInteraction: true,
+ overlayColor: 'transparent',
+ popoverOffset: -2,
+ steps: [{
+ element: 'div[id="faceSensing"]',
+ popover: {
+ description: this.props.intl.formatMessage(messages.faceSensingModalCallout),
+ side: 'left',
+ align: 'start',
+ popoverClass: 'tooltip-face-sensing-modal',
+ showButtons: []
+ }
+ }]
+ });
+
+ this.driver = tooltip;
+ tooltip.drive();
+ };
+
+ window.addEventListener('click', onFirstClick, {once: true});
+ this.filteredDataRef.addEventListener('scroll', this.handleScroll);
+ }
+ }
+ componentWillUnmount () {
+ if (this.driver) {
+ this.driver.destroy();
+ this.driver = null;
+ }
+
+ if (this.animationFrameId) {
+ window.cancelAnimationFrame(this.animationFrameId);
+ }
+
+ this.filteredDataRef.removeEventListener('scroll', this.handleScroll);
+ }
+ handleScroll () {
+ if (this.animationFrameId) return;
+
+ this.animationFrameId = window.requestAnimationFrame(() => {
+ if (this.driver) {
+ this.driver.refresh();
+ }
+
+ this.animationFrameId = null;
+ });
}
handleSelect (id) {
+ const selectedItem = this.getFilteredData().find(item => this.constructKey(item) === id);
+
+ if (this.state.shouldShowFaceSensingCallout && !this.driver && selectedItem.extensionId !== 'faceSensing') {
+ return;
+ }
+ if (this.state.shouldShowFaceSensingCallout && selectedItem.extensionId === 'faceSensing') {
+ setHasUsedFaceSensing(this.props.username);
+ this.setState({
+ shouldShowFaceSensingCallout: false
+ });
+ }
+
this.handleClose();
- this.props.onItemSelected(this.getFilteredData()
- .find(item => this.constructKey(item) === id));
+ this.props.onItemSelected(selectedItem);
}
handleClose () {
this.props.onRequestClose();
@@ -269,6 +363,7 @@ class LibraryComponent extends React.Component {
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
onSelect={this.handleSelect}
+ showItemCallout={this.state.shouldShowFaceSensingCallout && data.extensionId === 'faceSensing'}
/>);
}
renderData (data) {
@@ -395,7 +490,9 @@ LibraryComponent.propTypes = {
setStopHandler: PropTypes.func,
showPlayButton: PropTypes.bool,
tags: PropTypes.arrayOf(PropTypes.shape(TagButton.propTypes)),
- title: PropTypes.string.isRequired
+ title: PropTypes.string.isRequired,
+ username: PropTypes.string,
+ showNewFeatureCallouts: PropTypes.bool
};
LibraryComponent.defaultProps = {
diff --git a/packages/scratch-gui/src/containers/blocks.jsx b/packages/scratch-gui/src/containers/blocks.jsx
index 714f306ea5..efd6b0572e 100644
--- a/packages/scratch-gui/src/containers/blocks.jsx
+++ b/packages/scratch-gui/src/containers/blocks.jsx
@@ -602,6 +602,8 @@ class Blocks extends React.Component {
vm={vm}
onCategorySelected={this.handleCategorySelected}
onRequestClose={onRequestCloseExtensionLibrary}
+ showNewFeatureCallouts={this.props.showNewFeatureCallouts}
+ username={this.props.username}
/>
) : null}
{customProceduresVisible ? (
@@ -651,7 +653,9 @@ Blocks.propTypes = {
vm: PropTypes.instanceOf(VM).isRequired,
workspaceMetrics: PropTypes.shape({
targets: PropTypes.objectOf(PropTypes.object)
- })
+ }),
+ showNewFeatureCallouts: PropTypes.bool,
+ username: PropTypes.string
};
Blocks.defaultOptions = {
diff --git a/packages/scratch-gui/src/containers/extension-library.jsx b/packages/scratch-gui/src/containers/extension-library.jsx
index f76a7de7b7..cb542001b9 100644
--- a/packages/scratch-gui/src/containers/extension-library.jsx
+++ b/packages/scratch-gui/src/containers/extension-library.jsx
@@ -60,6 +60,8 @@ class ExtensionLibrary extends React.PureComponent {
visible={this.props.visible}
onItemSelected={this.handleItemSelect}
onRequestClose={this.props.onRequestClose}
+ showNewFeatureCallouts={this.props.showNewFeatureCallouts}
+ username={this.props.username}
/>
);
}
@@ -70,7 +72,9 @@ ExtensionLibrary.propTypes = {
onCategorySelected: PropTypes.func,
onRequestClose: PropTypes.func,
visible: PropTypes.bool,
- vm: PropTypes.instanceOf(VM).isRequired // eslint-disable-line react/no-unused-prop-types
+ vm: PropTypes.instanceOf(VM).isRequired, // eslint-disable-line react/no-unused-prop-types
+ username: PropTypes.string,
+ showNewFeatureCallouts: PropTypes.bool
};
export default injectIntl(ExtensionLibrary);
diff --git a/packages/scratch-gui/src/containers/gui.jsx b/packages/scratch-gui/src/containers/gui.jsx
index c78fafc640..9eb9ac011d 100644
--- a/packages/scratch-gui/src/containers/gui.jsx
+++ b/packages/scratch-gui/src/containers/gui.jsx
@@ -123,6 +123,7 @@ GUI.propTypes = {
isShowingProject: PropTypes.bool,
isTotallyNormal: PropTypes.bool,
loadingStateVisible: PropTypes.bool,
+ manuallySaveThumbnails: PropTypes.bool,
onProjectLoaded: PropTypes.func,
onSeeCommunity: PropTypes.func,
onStorageInit: PropTypes.func,
@@ -130,6 +131,10 @@ GUI.propTypes = {
onVmInit: PropTypes.func,
platform: PropTypes.oneOf(Object.keys(PLATFORM)),
setPlatform: PropTypes.func.isRequired,
+ /**
+ * Whether to highlight new editor features in the UI.
+ */
+ showNewFeatureCallouts: PropTypes.bool,
projectHost: PropTypes.string,
projectId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
shouldStopProject: PropTypes.bool,
diff --git a/packages/scratch-gui/src/containers/library-item.jsx b/packages/scratch-gui/src/containers/library-item.jsx
index c07e101490..ed0439f081 100644
--- a/packages/scratch-gui/src/containers/library-item.jsx
+++ b/packages/scratch-gui/src/containers/library-item.jsx
@@ -135,6 +135,7 @@ class LibraryItem extends React.PureComponent {
onMouseLeave={this.handleMouseLeave}
onPlay={this.handlePlay}
onStop={this.handleStop}
+ showItemCallout={this.props.showItemCallout}
/>
);
}
@@ -171,7 +172,8 @@ LibraryItem.propTypes = {
onMouseLeave: PropTypes.func.isRequired,
onSelect: PropTypes.func.isRequired,
platform: PropTypes.oneOf(Object.keys(PLATFORM)),
- showPlayButton: PropTypes.bool
+ showPlayButton: PropTypes.bool,
+ showItemCallout: PropTypes.bool
};
export default compose(
diff --git a/packages/scratch-gui/src/lib/local-storage.js b/packages/scratch-gui/src/lib/local-storage.js
new file mode 100644
index 0000000000..0ab82e0a1a
--- /dev/null
+++ b/packages/scratch-gui/src/lib/local-storage.js
@@ -0,0 +1,28 @@
+/**
+ * Copied from scratch-www:
+ * Util functions for managing local storage entries as key-value pairs.
+ */
+
+const getMap = key => {
+ try {
+ const raw = localStorage.getItem(key);
+ return raw ? JSON.parse(raw) : {};
+ } catch (e) {
+ return {};
+ }
+};
+
+const setMap = (key, map) => {
+ localStorage.setItem(key, JSON.stringify(map));
+};
+
+export const getLocalStorageValue = (key, id) => {
+ const map = getMap(key);
+ return map[id];
+};
+
+export const setLocalStorageValue = (key, id, value) => {
+ const map = getMap(key);
+ map[id] = value;
+ setMap(key, map);
+};
diff --git a/packages/scratch-gui/webpack.config.js b/packages/scratch-gui/webpack.config.js
index d0310a96d7..34e2eda2e3 100644
--- a/packages/scratch-gui/webpack.config.js
+++ b/packages/scratch-gui/webpack.config.js
@@ -21,12 +21,18 @@ const commonHtmlWebpackPluginOptions = {
gtm_env_auth: process.env.GTM_ENV_AUTH || ''
};
+const cssModuleExceptions = [
+ /\.raw\.css$/, // Allow for overriding CSS classes from libraries
+ /[\\/]driver\.js[\\/].*\.css$/ // driver.js CSS
+];
+
const baseConfig = new ScratchWebpackConfigBuilder(
{
rootPath: path.resolve(__dirname),
enableReact: true,
enableTs: true,
- shouldSplitChunks: false
+ shouldSplitChunks: false,
+ cssModuleExceptions
})
.setTarget('browserslist')
.merge({
diff --git a/packages/scratch-render/package.json b/packages/scratch-render/package.json
index 93a1417f66..15129814db 100644
--- a/packages/scratch-render/package.json
+++ b/packages/scratch-render/package.json
@@ -78,7 +78,7 @@
"scratch-render-fonts": "1.0.218",
"scratch-semantic-release-config": "3.0.0",
"scratch-storage": "4.0.201",
- "scratch-webpack-configuration": "3.0.0",
+ "scratch-webpack-configuration": "3.1.0",
"semantic-release": "19.0.5",
"tap": "16.3.10",
"terser-webpack-plugin": "5.3.14",
diff --git a/packages/scratch-svg-renderer/package.json b/packages/scratch-svg-renderer/package.json
index aa3cfd4905..7d82aa690d 100644
--- a/packages/scratch-svg-renderer/package.json
+++ b/packages/scratch-svg-renderer/package.json
@@ -63,7 +63,7 @@
"rimraf": "3.0.2",
"scratch-render-fonts": "1.0.218",
"scratch-semantic-release-config": "3.0.0",
- "scratch-webpack-configuration": "3.0.0",
+ "scratch-webpack-configuration": "3.1.0",
"semantic-release": "19.0.5",
"tap": "16.3.10",
"webpack": "5.101.0",
diff --git a/packages/scratch-vm/package.json b/packages/scratch-vm/package.json
index b1184881d5..0456b5998c 100644
--- a/packages/scratch-vm/package.json
+++ b/packages/scratch-vm/package.json
@@ -96,7 +96,7 @@
"scratch-l10n": "6.0.13",
"scratch-render-fonts": "1.0.218",
"scratch-semantic-release-config": "3.0.0",
- "scratch-webpack-configuration": "3.0.0",
+ "scratch-webpack-configuration": "3.1.0",
"script-loader": "0.7.2",
"semantic-release": "19.0.5",
"stats.js": "0.17.0",
+ {this.props.name}
+
+ {this.props.description}
- ) : null}
- + {this.props.description}
- {this.props.name}
-
- {this.props.description} -
- {this.props.bluetoothRequired || this.props.internetConnectionRequired || this.props.collaborator ? (
- - {this.props.description} -
-
) : (
- {this.props.bluetoothRequired || this.props.internetConnectionRequired ? (
-
-
+ ) : null}
+
-
-
- {this.props.bluetoothRequired ? (
- 
- ) : null}
- {this.props.internetConnectionRequired ? (
- 
- ) : null}
-
+ {this.props.bluetoothRequired ||
+ this.props.internetConnectionRequired || this.props.collaborator ? (
+
+
-
+ {this.props.bluetoothRequired || this.props.internetConnectionRequired ? (
+
- ) : null}
-
+
+ ) : null}
+
+
+ {this.props.bluetoothRequired ? (
+
+ ) : null}
+ {this.props.internetConnectionRequired ? (
+
+ ) : null}
+
+
- {this.props.collaborator ? (
-
- ) : null}
+
-
-
-
-
- {this.props.collaborator}
-
+
+ {this.props.collaborator ? (
+
- ) : null}
-
+
+ ) : null}
+
+
+ {this.props.collaborator}
+
+