- {'This site is unable to compile arbitrary JavaScript. This is most likely caused by an overly-strict Content-Security-Policy set by the server.'} + {'Unable to compile JavaScript with new Function(). This is most likely caused by an overly-strict Content-Security-Policy. The CSP must include \'unsafe-eval\'.'}
)} -
-
+
+
+
-
+
+
+
+ {!tabOrder.includes('code') && }
+ {!tabOrder.includes('costume') && }
+ {!tabOrder.includes('sound') && }
+ {!tabOrder.includes('variable') && }
+ {/* {!tabOrder.includes('file') && } */}
+
+
+
@@ -408,6 +639,9 @@ const GUIComponent = props => {
{soundsTabVisible ?
+
+ {variablesTabVisible ?
{backpackVisible ? (
+ 
+
+ );
+ const costumesTab = (
+
+ 
+ {targetIsStage ? (
+
+ );
+ const soundsTab = (
+
+ 
+
+ );
+
+ const tabPairs = {
+ code: codeTab,
+ costume: costumesTab,
+ sound: soundsTab,
+ };
+
+ const enabledTabs = [];
+ for (const tabId of tabOrder) {
+ enabledTabs.push(tabPairs[tabId] || codeTab);
+ }
+
+ return enabledTabs;
+ })();
+
+ return (
+
+
+ {organizedTabs}
+
+
+
+
+
+
+
+
+
+
+
+ {costumesTabVisible ? (
+
+
+ {soundsTabVisible ?
+
+ );
+ }
+}
+
+OrganizedTabs.propTypes = {
+ activeTabIndex: PropTypes.any,
+ onActivateTab: PropTypes.any,
+ targetIsStage: PropTypes.any,
+ canUseCloud: PropTypes.any,
+ basePath: PropTypes.any,
+ stageSize: PropTypes.any,
+ vm: PropTypes.any,
+ intl: PropTypes.any,
+ messages: PropTypes.any,
+ isDark: PropTypes.any,
+ onActivateCostumesTab: PropTypes.any,
+ onActivateSoundsTab: PropTypes.any,
+ onExtensionButtonClick: PropTypes.any,
+ blocksTabVisible: PropTypes.any,
+ costumesTabVisible: PropTypes.any,
+ soundsTabVisible: PropTypes.any,
+};
+
+export default injectIntl(OrganizedTabs);
diff --git a/src/components/library-item/delete/filled.svg b/src/components/library-item/delete/filled.svg
new file mode 100644
index 00000000000..b6bd302cff9
--- /dev/null
+++ b/src/components/library-item/delete/filled.svg
@@ -0,0 +1,11 @@
+
\ No newline at end of file
diff --git a/src/components/library-item/download/filled.svg b/src/components/library-item/download/filled.svg
new file mode 100644
index 00000000000..1eb61d2d844
--- /dev/null
+++ b/src/components/library-item/download/filled.svg
@@ -0,0 +1,11 @@
+
\ No newline at end of file
diff --git a/src/components/library-item/favorite-active.svg b/src/components/library-item/favorite-active.svg
new file mode 100644
index 00000000000..d29fb8b5136
--- /dev/null
+++ b/src/components/library-item/favorite-active.svg
@@ -0,0 +1,35 @@
+
+
diff --git a/src/components/library-item/favorite-inactive.svg b/src/components/library-item/favorite-inactive.svg
new file mode 100644
index 00000000000..0b147de9800
--- /dev/null
+++ b/src/components/library-item/favorite-inactive.svg
@@ -0,0 +1,35 @@
+
+
diff --git a/src/components/library-item/favorite/filled.svg b/src/components/library-item/favorite/filled.svg
new file mode 100644
index 00000000000..5bba6883088
--- /dev/null
+++ b/src/components/library-item/favorite/filled.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/components/library-item/favorite/outline.svg b/src/components/library-item/favorite/outline.svg
new file mode 100644
index 00000000000..ad97d149f2c
--- /dev/null
+++ b/src/components/library-item/favorite/outline.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/components/library-item/lib-icon--loop-rtl.svg b/src/components/library-item/lib-icon--loop-rtl.svg
new file mode 100644
index 00000000000..ed7d624587a
--- /dev/null
+++ b/src/components/library-item/lib-icon--loop-rtl.svg
@@ -0,0 +1,10 @@
+
\ No newline at end of file
diff --git a/src/components/library-item/lib-icon--loop.svg b/src/components/library-item/lib-icon--loop.svg
new file mode 100644
index 00000000000..20a1594b047
--- /dev/null
+++ b/src/components/library-item/lib-icon--loop.svg
@@ -0,0 +1,5 @@
+
\ No newline at end of file
diff --git a/src/components/library-item/lib-icon--theme-rtl.svg b/src/components/library-item/lib-icon--theme-rtl.svg
new file mode 100644
index 00000000000..e7daa0856eb
--- /dev/null
+++ b/src/components/library-item/lib-icon--theme-rtl.svg
@@ -0,0 +1,9 @@
+
\ No newline at end of file
diff --git a/src/components/library-item/lib-icon--theme.svg b/src/components/library-item/lib-icon--theme.svg
new file mode 100644
index 00000000000..da9c160059d
--- /dev/null
+++ b/src/components/library-item/lib-icon--theme.svg
@@ -0,0 +1,9 @@
+
\ No newline at end of file
diff --git a/src/components/library-item/library-item.css b/src/components/library-item/library-item.css
index bcd008d09c5..606acd8dbf0 100644
--- a/src/components/library-item/library-item.css
+++ b/src/components/library-item/library-item.css
@@ -26,6 +26,37 @@
background: $ui-primary;
}
+.library-item-sound {
+ width: 200px;
+ max-width: 200px;
+ flex-basis: 200px;
+ height: 100px;
+ padding: 0.25rem;
+ padding-bottom: 0;
+}
+.library-item-sound.library-item-new {
+ /*
+ we have to use hue-rotate,
+ since the waveforms have their color baked in by design
+ & the play button styling would be annoying
+ */
+ filter: hue-rotate(60deg);
+}
+.library-item-new-badge {
+ border-radius: 1024px;
+ color: white;
+ font-size: 10px;
+ font-weight: bold;
+ background-color: #EB6566;
+ padding: 1px 5px;
+ position: absolute;
+ left: -8px;
+ top: -8px;
+}
+.library-item-sound .library-item-new-badge {
+ background-color: $sound-primary;
+}
+
.library-item-extension {
align-self: stretch;
}
@@ -34,6 +65,108 @@
border-width: 2px;
border-color: $motion-primary;
}
+.library-item-sound:hover {
+ border-color: $sound-primary;
+}
+.library-item-new:hover {
+ border-color: #EB6566;
+}
+.library-item-new.library-item-sound:hover {
+ border-color: $sound-primary;
+}
+
+.library-item-favorite {
+ background: transparent;
+ position: absolute;
+ top: calc(11.5rem + 4px);
+ right: 4px;
+ width: 24px;
+ height: 24px;
+ border: 0;
+ margin: 0;
+ padding: 0;
+}
+.library-item-favorite img {
+ background: transparent;
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 24px;
+ height: 24px;
+ border: 0;
+ margin: 0;
+ padding: 0;
+}
+.library-item-favorite > img[data-usedimage="false"] {
+ opacity: 0;
+}
+
+.library-item-delete {
+ background: transparent;
+ position: absolute;
+ top: calc(11.5rem + 4px);
+ right: 4px;
+ width: 24px;
+ height: 24px;
+ border: 0;
+ margin: 0;
+ padding: 0;
+}
+.library-item-delete img {
+ background: transparent;
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 24px;
+ height: 24px;
+ border: 0;
+ margin: 0;
+ padding: 0;
+}
+
+/* delete button */
+.library-item-delete > img {
+ filter: brightness(0);
+ opacity: 0.25;
+}
+[theme="dark"] .library-item-delete>img {
+ filter: saturate(0) brightness(255);
+}
+.library-item-delete:hover > img {
+ filter: brightness(1);
+ opacity: 1;
+}
+.library-item-delete:active > img {
+ filter: brightness(0.25);
+ opacity: 1;
+}
+
+/* unfavorited items */
+.library-item-favorite[data-activated="false"] > img[data-usedimage="true"] {
+ filter: brightness(0);
+ opacity: 0.25;
+}
+[theme="dark"] .library-item-favorite[data-activated="false"]>img[data-usedimage="true"] {
+ filter: saturate(0) brightness(255);
+}
+.library-item-favorite[data-activated="false"]:hover > img[data-usedimage="true"] {
+ filter: brightness(1);
+ opacity: 1;
+}
+.library-item-favorite[data-activated="false"]:active > img[data-usedimage="true"] {
+ filter: brightness(1);
+ opacity: 1;
+}
+.library-item-favorite[data-activated="false"]:active > img[data-usedimage="false"] {
+ filter: brightness(1);
+ opacity: 1;
+}
+
+/* favorited items */
+.library-item-favorite[data-activated="true"] > img[data-usedimage="true"] {
+ filter: none;
+ opacity: 1;
+}
.hidden {
display: none;
@@ -48,6 +181,27 @@
border-color: $ui-black-transparent;
}
+.inspect-extension {
+ position: relative;
+ background: #00c3ff;
+ color: white;
+ font-weight: bold;
+ padding: 0;
+ margin: 0 4px;
+ border: 0;
+ border-radius: 4px;
+ float: right;
+ width: 20px;
+ height: 20px;
+}
+.inspect-extension > img {
+ width: 20px;
+ height: 20px;
+}
+.small-bottom-margin {
+ margin-bottom: 4px;
+}
+
.library-item-image-container-wrapper {
height: 100px;
width: 100%;
@@ -109,13 +263,32 @@
max-width: 100%;
max-height: 100%;
}
+.library-item-image-overlay {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+}
+
+.library-item-waveform {
+ position: absolute;
+ left: 0;
+ width: calc(100% - 3rem);
+ height: 3rem;
+ max-width: 100%;
+ max-height: 100%;
+}
+[dir="rtl"] .library-item-waveform {
+ left: initial;
+ right: 0;
+}
.library-item-inset-image {
width: 2.5rem;
}
.library-item-name {
- width: 80%;
+ width: 100%;
margin: 0.25rem 0;
text-align: center;
@@ -125,9 +298,32 @@
*/
overflow: hidden;
text-overflow: ellipsis;
- white-space: nowrap;
+ white-space: pre-wrap;
min-width: 0;
}
+.library-item-sound-name {
+ text-align: left;
+ width: 100%;
+ margin-bottom: 0;
+}
+.library-item-sound-type {
+ text-align: left;
+ width: 100%;
+ margin-top: 0;
+ opacity: 0.65;
+}
+
+[dir="rtl"] .library-item-sound-name,
+[dir="rtl"] .library-item-sound-type {
+ text-align: right;
+}
+
+.library-item-sound-info-container {
+ width: 100%;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+}
.featured-item {
flex-basis: 300px;
@@ -139,6 +335,7 @@
.featured-image-container {
position: relative;
+ width: 100%;
}
.featured-image {
@@ -209,8 +406,24 @@
font-weight: bold;
}
-.featured-extension-metadata-detail img{
+.featured-extension-metadata-detail img {
margin-right: 0.25rem;
+ width: 20px;
+ height: 20px;
+}
+
+.extension-links {
+ width: 300px;
+ padding: 0 1.25rem 1rem 1.25rem;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ opacity: 0.75;
+ text-align: left;
+}
+.extension-links a {
+ color: inherit !important;
+ text-decoration: underline;
}
.coming-soon-text {
@@ -232,8 +445,21 @@
transform: translate(calc(-2 * $space), calc(2 * $space));
}
-.incompatible-with-scratch {
- padding: 0 1.25rem 1rem 1.25rem;
- width: 100%;
- text-align: left;
+.favorite-container {
+ display: none;
+ background: none;
+ border: none;
+ padding: 0;
+ margin: 0;
+ position: absolute;
+ top: 0.5rem;
+ left: 0.5rem;
+}
+.favorite-icon {
+ width: 32px;
+ height: 32px;
+}
+.favorite-container.active,
+.library-item:hover .favorite-container {
+ display: block;
}
diff --git a/src/components/library-item/library-item.jsx b/src/components/library-item/library-item.jsx
index e60f74843c1..1f39b97a1e0 100644
--- a/src/components/library-item/library-item.jsx
+++ b/src/components/library-item/library-item.jsx
@@ -1,4 +1,4 @@
-import { FormattedMessage } from 'react-intl';
+import {FormattedMessage, intlShape, defineMessages} from 'react-intl';
import PropTypes from 'prop-types';
import React from 'react';
@@ -9,6 +9,25 @@ import classNames from 'classnames';
import bluetoothIconURL from './bluetooth.svg';
import internetConnectionIconURL from './internet-connection.svg';
+
+import favoritedFilledUrl from './favorite/filled.svg';
+import favoritedOutlineUrl from './favorite/outline.svg';
+import deleteFilledUrl from './delete/filled.svg';
+import downloadFilled from './download/filled.svg';
+
+const getURLOrigin = (url) => {
+ let urlObj;
+ try {
+ urlObj = new URL(url);
+ } catch {
+ // not a valid URL
+ return String(url);
+ }
+ return urlObj.origin;
+};
+const getMSFormatted = (ms) => {
+ return (ms / 1000).toFixed(2);
+};
import snailIconUrl from './snail.svg';
/* eslint-disable react/prefer-stateless-function */
@@ -39,6 +58,8 @@ class LibraryItemComponent extends React.PureComponent {
) : null}
@@ -52,6 +73,7 @@ class LibraryItemComponent extends React.PureComponent {
) : null}
@@ -67,6 +89,49 @@ class LibraryItemComponent extends React.PureComponent {
/>
) : null}
+ {(this.props.favoritable && !this.props.deletable) ? (
+
+ ) : null}
+ {this.props.deletable && (
+
+ )}
{dropdownCaret} Block Color
-
-
+
+ 
+
+
+
+
+ (
+ {!props.editing &&
+ {props.returns ? <>
+
}
+
+ props.onOutputTypeChanged('string')}
+ >
+ 
+
+
+
+ props.onOutputTypeChanged('number')}
+ >
+
+
+
+ : <>
+
+
+ props.onOutputTypeChanged('statement')}
+ >
+
+
+
+
+ props.onOutputTypeChanged('end')}
+ >
+ 
+
+ }
+ {props.returns &&
+
+ props.onOutputTypeChanged('boolean')}
+ >
+ 
+
}
+
+
+
-
- {props.returns ? (
) : null}
- - {props.returns ? (
-
-
-
-
) : (
-
-
-
)}
-
{dropdownCaret} Coloring and Styling
-
-
- {/*
-
*/}
-
-
- {dropdownCaret} Debug
- - -{this.props.name}
{this.props.description} - {this.props.docsURI && ( - + {this.props.custom && ( + <>
- - Click Here For Docs - - + {this.props.extensionId.startsWith("data:") ? ( + + {this.props._unsandboxed ? + ( +
{
@@ -124,7 +246,7 @@ class LibraryItemComponent extends React.PureComponent {
{this.props.description} - {this.props.docsURI && ( - + {this.props.custom && ( + <>
- - Click Here For Docs - - + {this.props.extensionId.startsWith("data:") ? ( + + {this.props._unsandboxed ? + ( +
{this.props.collaborator ? (
-
+
) : null}
{this.props.twDeveloper ? (
- 
+ );
+};
+PauseButtonComponent.propTypes = {
+ paused: PropTypes.bool,
+ className: PropTypes.string,
+ onClick: PropTypes.func.isRequired,
+ title: PropTypes.string
+};
+PauseButtonComponent.defaultProps = {
+ paused: false,
+ title: 'Pause'
+};
+export default PauseButtonComponent;
diff --git a/src/components/pm-extension-modals/extension-modals.css b/src/components/pm-extension-modals/extension-modals.css
new file mode 100644
index 00000000000..d48abf6be8c
--- /dev/null
+++ b/src/components/pm-extension-modals/extension-modals.css
@@ -0,0 +1,86 @@
+@import "../../css/colors.css";
+
+.modal-content {
+ width: 400px;
+}
+
+.body {
+ background: $ui-white;
+ padding: 1.5rem 2.25rem;
+}
+
+.centered {
+ background: $ui-white;
+ padding: 1.5rem 2.25rem;
+ display: flex;
+ align-content: center;
+ justify-content: center;
+}
+[theme="dark"] .body {
+ color: $text-primary;
+ background: $ui-primary;
+}
+
+.body input[type="checkbox"],
+.body input[type="radio"] {
+ margin: 3px;
+}
+
+.text-input {
+ margin-bottom: 1rem;
+ width: 100%;
+ border: 1px solid $ui-black-transparent;
+ border-radius: 5px;
+ padding: 0 1rem;
+ height: 3rem;
+ color: $text-primary-transparent;
+ font-size: .875rem;
+}
+[theme="dark"] .text-input {
+ background: $ui-secondary;
+ color: white;
+}
+
+.button-row {
+ font-weight: bolder;
+ text-align: right;
+}
+
+.button-row button {
+ padding: 0.75rem 1rem;
+ border-radius: 0.25rem;
+ background: white;
+ border: 1px solid $ui-black-transparent;
+ font-weight: 600;
+ font-size: 0.85rem;
+}
+.button-row button[disabled] {
+ opacity: 0.5;
+}
+[dir="ltr"] .button-row button + button {
+ margin-left: 0.5rem;
+}
+
+[dir="rtl"] .button-row button + button {
+ margin-right: 0.5rem;
+}
+
+.button-row button.ok-button {
+ background: $motion-primary;
+ border: $motion-primary;
+ color: white;
+}
+.button-row button.cancel-button {
+ color: black;
+}
+
+.help-text {
+ margin-bottom: 1rem;
+}
+
+.must-change {
+ font-weight: bold;
+}
+.reset-link {
+ cursor: pointer;
+}
diff --git a/src/components/pm-extension-modals/extension-modals.jsx b/src/components/pm-extension-modals/extension-modals.jsx
new file mode 100644
index 00000000000..1a61aec96d1
--- /dev/null
+++ b/src/components/pm-extension-modals/extension-modals.jsx
@@ -0,0 +1,32 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Box from '../box/box.jsx';
+import Modal from '../../containers/modal.jsx';
+import classNames from 'classnames';
+
+import styles from './extension-modals.css';
+
+const ExtensionModal = props => (
+
+
+ {props._debugText && (
+
+
+);
+
+ExtensionModal.propTypes = {
+ vm: PropTypes.any,
+ title: PropTypes.string,
+ _debugText: PropTypes.string,
+ onCancel: PropTypes.func.isRequired,
+ onOk: PropTypes.func.isRequired
+};
+
+export default ExtensionModal;
diff --git a/src/components/prompt/prompt.jsx b/src/components/prompt/prompt.jsx
index 5319c028eac..1d648448140 100644
--- a/src/components/prompt/prompt.jsx
+++ b/src/components/prompt/prompt.jsx
@@ -1,5 +1,5 @@
import classNames from 'classnames';
-import {defineMessages, FormattedMessage} from 'react-intl';
+import { defineMessages, FormattedMessage } from 'react-intl';
import PropTypes from 'prop-types';
import React from 'react';
@@ -7,7 +7,7 @@ import Box from '../box/box.jsx';
import Modal from '../../containers/modal.jsx';
import styles from './prompt.css';
-import {SCRATCH_MAX_CLOUD_VARIABLES} from '../../lib/tw-cloud-limits.js';
+import { SCRATCH_MAX_CLOUD_VARIABLES } from '../../lib/tw-cloud-limits.js';
const messages = defineMessages({
@@ -90,7 +90,7 @@ const PromptComponent = props => (
/>
+
) : null}
{this.props.extDeveloper ? (
-
Originally for TurboWarp by
@@ -168,7 +290,7 @@ class LibraryItemComponent extends React.PureComponent {
+
) : null}
{this.props.eventSubmittor ? (
- { }
};
@@ -1030,6 +1065,8 @@ const mapStateToProps = (state, ownProps) => {
projectTitle: state.scratchGui.projectTitle,
sessionExists: state.session && typeof state.session.session !== 'undefined',
errorsMenuOpen: errorsMenuOpen(state),
+ username: user ? user.username : null,
+ usernameLoggedIn: state.scratchGui.tw.usernameLoggedIn,
userOwnsProject: ownProps.authorUsername && user &&
(ownProps.authorUsername === user.username),
vm: state.scratchGui.vm
diff --git a/src/components/menu-bar/share-button.css b/src/components/menu-bar/share-button.css
index ba1e52c94c0..e2635b806fe 100644
--- a/src/components/menu-bar/share-button.css
+++ b/src/components/menu-bar/share-button.css
@@ -1,11 +1,34 @@
@import "../../css/colors.css";
+@keyframes iconSpin {
+ 0% {
+ rotate: 0deg;
+ }
+ 50% {
+ rotate: 180deg;
+ }
+ 100% {
+ rotate: 360deg;
+ }
+}
+
.share-button {
background: $motion-primary;
color: $ui-white;
box-shadow: 0 0 0 1px $ui-black-transparent;
}
+.disabled {
+ cursor: not-allowed;
+}
+
+.share-content {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+}
+
[theme="dark"] .share-button {
background: transparent;
color: $ui-white;
@@ -16,3 +39,12 @@
background: $ui-black-transparent;
cursor: default;
}
+
+.icon {
+ height: 1.5rem;
+ margin-left: 4px;
+ animation-name: iconSpin;
+ animation-timing-function: linear;
+ animation-duration: 1s;
+ animation-iteration-count: infinite;
+}
\ No newline at end of file
diff --git a/src/components/menu-bar/share-button.jsx b/src/components/menu-bar/share-button.jsx
index 042e124aa9c..8bdd96c0da9 100644
--- a/src/components/menu-bar/share-button.jsx
+++ b/src/components/menu-bar/share-button.jsx
@@ -64,6 +64,9 @@ class ShareButton extends React.Component {
return;
}
+ if (!e.data.p4) {
+ return;
+ }
if (!e.data.p4) {
return;
}
@@ -211,4 +214,4 @@ const mapDispatchToProps = dispatch => ({});
export default injectIntl(connect(
mapStateToProps,
mapDispatchToProps
-)(ShareButton));
+)(ShareButton));
\ No newline at end of file
diff --git a/src/components/modal/modal.css b/src/components/modal/modal.css
index 0573e1fc8bc..89e6995e86c 100644
--- a/src/components/modal/modal.css
+++ b/src/components/modal/modal.css
@@ -11,6 +11,9 @@
z-index: $z-index-modal;
background-color: $ui-modal-overlay;
}
+.scrollable {
+ overflow: auto;
+}
.modal-content * {
box-sizing: border-box;
diff --git a/src/components/modal/modal.jsx b/src/components/modal/modal.jsx
index 32fe0502854..66e9f22611f 100644
--- a/src/components/modal/modal.jsx
+++ b/src/components/modal/modal.jsx
@@ -20,7 +20,9 @@ const ModalComponent = props => (
[styles.fullScreen]: props.fullScreen
})}
contentLabel={props.contentLabel}
- overlayClassName={styles.modalOverlay}
+ overlayClassName={classNames(styles.modalOverlay, {
+ [styles.scrollable]: props.scrollable
+ })}
onRequestClose={props.onRequestClose}
>
(
+const DefaultMonitor = ({categoryColor, label, value, isHTML}) => (
@@ -21,6 +24,7 @@ const DefaultMonitor = ({categoryColor, label, value}) => (
DefaultMonitor.propTypes = {
categoryColor: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
+ isHTML: PropTypes.bool.isRequired,
value: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number
diff --git a/src/components/monitor/large-monitor.jsx b/src/components/monitor/large-monitor.jsx
index 5101ad0a5da..041cd066ba6 100644
--- a/src/components/monitor/large-monitor.jsx
+++ b/src/components/monitor/large-monitor.jsx
@@ -1,20 +1,24 @@
import React from 'react';
import PropTypes from 'prop-types';
import styles from './monitor.css';
+import DOMElementRenderer from '../../containers/dom-element-renderer.jsx';
-const LargeMonitor = ({categoryColor, value}) => (
+const LargeMonitor = ({categoryColor, value, isHTML}) => (
);
LargeMonitor.propTypes = {
categoryColor: PropTypes.string,
+ isHTML: PropTypes.bool.isRequired,
value: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number
diff --git a/src/components/monitor/list-monitor-scroller.jsx b/src/components/monitor/list-monitor-scroller.jsx
index cfcd6a248b8..f9e23074abe 100644
--- a/src/components/monitor/list-monitor-scroller.jsx
+++ b/src/components/monitor/list-monitor-scroller.jsx
@@ -6,6 +6,7 @@ import {FormattedMessage} from 'react-intl';
import styles from './monitor.css';
import {List} from 'react-virtualized';
+import DOMElementRenderer from '../../containers/dom-element-renderer.jsx';
class ListMonitorScroller extends React.Component {
constructor (props) {
@@ -31,6 +32,17 @@ class ListMonitorScroller extends React.Component {
);
}
rowRenderer ({index, key, style}) {
+ const item = this.props.values[index];
+ const renderedValue = item.toListItem
+ ? item.toListItem()
+ : item.toMonitorContent
+ ? item.toMonitorContent()
+ : item.toReporterContent
+ ? item.toReporterContent()
+ : item;
+ const value = item.isHTML
+ ? (
@@ -81,7 +93,7 @@ class ListMonitorScroller extends React.Component {
Created by
@@ -180,7 +302,7 @@ class LibraryItemComponent extends React.PureComponent {
+
) : null}
{this.props.credits ? (
- {changeUsername => (
-
Event Submission by
@@ -192,7 +314,7 @@ class LibraryItemComponent extends React.PureComponent {
+
+ {this.props.isNew && (
+
+ {this.props.overlayURL && (
+ 
+ )}
- {this.props.name}
- {this.props.docsURI && (
-
-
- - Click Here For Docs - - + {this.props.styleForSound ? ( + {
+ if (!Array.isArray(array)) array = [];
+ if (!Array.isArray(from)) from = [];
+ const value = from.every((value) => {
+ return array.indexOf(value) >= 0;
+ });
+ // console.log(array, from, value);
+ return value;
+};
class LibraryComponent extends React.Component {
constructor (props) {
@@ -41,38 +62,116 @@ class LibraryComponent extends React.Component {
'handlePlayingEnd',
'handleSelect',
'handleTagClick',
- 'setFilteredDataRef'
+ 'setFilteredDataRef',
+ 'loadLibraryData',
+ 'loadLibraryFavorites',
+ 'waitForLoading',
+ 'handleFavoritesUpdate',
+ 'createFilteredData',
+ 'getFilteredData'
]);
this.state = {
playingItem: null,
filterQuery: '',
- selectedTag: ALL_TAG.tag,
+ selectedTags: [],
+ favorites: [],
+ collapsed: false,
loaded: false,
data: props.data
};
+
+ // used for actor libraries
+ // they have special things like favorited items
+ // the way they load though breaks stuff
+ this.usesSpecialLoading = [
+ "ExtensionLibrary"
+ ];
}
- componentDidMount () {
- if (this.state.data.then) {
- // If data is a promise, wait for the promise to resolve
- this.state.data.then(data => {
- this.setState({
- loaded: true,
- data
+
+ loadLibraryData () {
+ return new Promise((resolve) => {
+ if (this.state.data.then) {
+ // If data is a promise, wait for the promise to resolve
+ this.state.data.then(data => {
+ resolve({ key: "data", value: data });
});
- });
- } else {
- // Allow the spinner to display before loading the content
- setTimeout(() => {
- this.setState({loaded: true});
- });
+ } else {
+ // Allow the spinner to display before loading the content
+ setTimeout(() => {
+ const data = this.state.data;
+ resolve({ key: "data", value: data });
+ });
+ }
+ });
+ }
+ async loadLibraryFavorites () {
+ const favorites = await localforage.getItem("pm:favorited_extensions");
+ return { key: "favorites", value: favorites ? favorites : [] };
+ }
+ async handleFavoritesUpdate () {
+ const favorites = await localforage.getItem("pm:favorited_extensions");
+ this.setState({
+ favorites
+ });
+ }
+
+ async waitForLoading (processes) {
+ // we store values in here
+ const packet = {};
+ for (const process of processes) {
+ // result = { key: "data", value: ... }
+ const result = await process();
+ packet[result.key] = result.value;
+ }
+ return packet;
+ }
+
+ componentDidMount() {
+ if (!this.usesSpecialLoading.includes(this.props.actor)) {
+ // regular loading
+ if (this.state.data.then) {
+ // If data is a promise, wait for the promise to resolve
+ this.state.data.then(data => {
+ this.setState({
+ loaded: true,
+ data
+ });
+ });
+ } else {
+ // Allow the spinner to display before loading the content
+ setTimeout(() => {
+ this.setState({ loaded: true });
+ });
+ }
}
if (this.props.setStopHandler) this.props.setStopHandler(this.handlePlayingEnd);
+ if (!this.usesSpecialLoading.includes(this.props.actor)) return;
+ // special loading
+ const spinnerProcesses = [this.loadLibraryData];
+ // pm: actors can load extra stuff
+ // pm: if we are acting as the extension library, load favorited extensions
+ if (this.props.actor === "ExtensionLibrary") {
+ spinnerProcesses.push(this.loadLibraryFavorites);
+ }
+ // wait for spinner stuff
+ this.waitForLoading(spinnerProcesses).then((packet) => {
+ const data = { loaded: true, ...packet };
+ this.setState(data);
+ });
}
+ // uncomment this if favorites start exploding the website lol!
+ // componentWillUnmount () {
+ // // pm: clear favorites from.... memory idk
+ // this.setState({
+ // favorites: []
+ // });
+ // }
componentDidUpdate (prevProps, prevState) {
if (prevState.filterQuery !== this.state.filterQuery ||
- prevState.selectedTag !== this.state.selectedTag) {
+ prevState.selectedTags.length !== this.state.selectedTags.length) {
this.scrollToTop();
}
+
if (prevProps.data !== this.props.data) {
// eslint-disable-next-line react/no-did-update-set-state
this.setState({
@@ -80,25 +179,34 @@ class LibraryComponent extends React.Component {
});
}
}
- handleSelect (id) {
- this.handleClose();
+ handleSelect (id, event) {
+ if (event.shiftKey !== true) {
+ this.handleClose();
+ }
this.props.onItemSelected(this.getFilteredData()[id]);
}
handleClose () {
this.props.onRequestClose();
}
- handleTagClick (tag) {
+ handleTagClick (tag, enabled) {
+ // console.log(tag, enabled);
if (this.state.playingItem === null) {
this.setState({
filterQuery: '',
- selectedTag: tag.toLowerCase()
+ selectedTags: this.state.selectedTags.concat([tag.toLowerCase()])
});
} else {
this.props.onItemMouseLeave(this.getFilteredData()[[this.state.playingItem]]);
this.setState({
filterQuery: '',
playingItem: null,
- selectedTag: tag.toLowerCase()
+ selectedTags: this.state.selectedTags.concat([tag.toLowerCase()])
+ });
+ }
+ if (!enabled) {
+ const tags = this.state.selectedTags.filter(t => (t !== tag));
+ this.setState({
+ selectedTags: tags
});
}
}
@@ -130,22 +238,22 @@ class LibraryComponent extends React.Component {
if (this.state.playingItem === null) {
this.setState({
filterQuery: event.target.value,
- selectedTag: ALL_TAG.tag
+ selectedTags: []
});
} else {
this.props.onItemMouseLeave(this.getFilteredData()[[this.state.playingItem]]);
this.setState({
filterQuery: event.target.value,
playingItem: null,
- selectedTag: ALL_TAG.tag
+ selectedTags: []
});
}
}
handleFilterClear () {
this.setState({filterQuery: ''});
}
- getFilteredData () {
- if (this.state.selectedTag === 'all') {
+ createFilteredData () {
+ if (this.state.selectedTags.length <= 0) {
if (!this.state.filterQuery) return this.state.data;
return this.state.data.filter(dataItem => (
(dataItem.tags || [])
@@ -161,12 +269,29 @@ class LibraryComponent extends React.Component {
.indexOf(this.state.filterQuery.toLowerCase()) !== -1
));
}
- return this.state.data.filter(dataItem => (
+ return this.state.data.filter(dataItem => (arrayIncludesItemsFrom(
dataItem.tags &&
dataItem.tags
- .map(String.prototype.toLowerCase.call, String.prototype.toLowerCase)
- .indexOf(this.state.selectedTag) !== -1
- ));
+ .map(String.prototype.toLowerCase.call, String.prototype.toLowerCase),
+ this.state.selectedTags)));
+ }
+ getFilteredData () {
+ const filtered = this.createFilteredData();
+
+ if (this.props.actor !== "ExtensionLibrary") {
+ return filtered;
+ }
+
+ const final = [].concat(
+ this.state.favorites
+ .filter(item => (typeof item !== "string"))
+ .map(item => ({ ...item, custom: true }))
+ .reverse(),
+ filtered.filter(item => (this.state.favorites.includes(item.extensionId))),
+ filtered.filter(item => (!this.state.favorites.includes(item.extensionId)))
+ ).map(item => ({ ...item, custom: typeof item.custom === "boolean" ? item.custom : false }));
+
+ return final;
}
scrollToTop () {
this.filteredDataRef.scrollTop = 0;
@@ -182,89 +307,188 @@ class LibraryComponent extends React.Component {
id={this.props.id}
onRequestClose={this.handleClose}
>
- {(this.props.filterable || this.props.tags) && (
-
);
diff --git a/src/components/menu-bar/menu-bar.css b/src/components/menu-bar/menu-bar.css
index 1beb4ebd3fb..843ed74bfd3 100644
--- a/src/components/menu-bar/menu-bar.css
+++ b/src/components/menu-bar/menu-bar.css
@@ -222,7 +222,7 @@
}
.mystuff > a {
- background-image: url("/images/mystuff.png");
+ /* background-image: url("/images/mystuff.png"); */
}
.about-icon {
diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx
index 65d5888346b..33d4c9f5e05 100644
--- a/src/components/menu-bar/menu-bar.jsx
+++ b/src/components/menu-bar/menu-bar.jsx
@@ -307,6 +307,36 @@ class MenuBar extends React.Component {
this.props.onClickLanguage(e);
}
}
+
+ handleClickMode(effect) {
+ const body = document.body;
+ body.style = '';
+ if (!effect) return;
+
+ // fix some weird sizing, just applies on effects
+ body.style = "width:100%;height:100%;position:fixed;overflow:hidden;";
+ switch (effect) {
+ case 'night':
+ body.style.filter = 'brightness(90%) sepia(100%) hue-rotate(340deg) saturate(400%)';
+ break;
+ case 'blur':
+ body.style.filter = 'blur(4px)';
+ break;
+ case 'comic':
+ body.style.filter = 'brightness(70%) contrast(1000%) grayscale(100%)';
+ break;
+ case 'toxic':
+ body.style.filter = 'sepia(100%) hue-rotate(58deg) saturate(400%)';
+ break;
+ case 'uhd':
+ body.style.filter = 'url("./bloomfilter.svg#bloom")';
+ break;
+ case 'upsidedown':
+ body.style.transform = 'rotateX(180deg) rotateY(180deg)';
+ break;
+ }
+ }
+
restoreOptionMessage(deletedItem) {
switch (deletedItem) {
case 'Sprite':
@@ -747,7 +777,10 @@ class MenuBar extends React.Component {
)}
Credits
@@ -211,7 +333,9 @@ class LibraryItemComponent extends React.PureComponent {
+ NEW
+
+ )}
+ {/* Layers of wrapping is to prevent layout thrashing on animation */}
- - Click Here For Docs - - + {this.props.styleForSound ? ( +
+ {this.props.name}
+
+ {this.props.soundType}, {getMSFormatted(this.props.soundLength)}
+
+
+ ) : (
+ {this.props.name}
)}
{this.props.showPlayButton ? (
- {this.props.filterable && (
-
- {tagListPrefix.concat(this.props.tags).map((tagProps, id) => (
-
+ ) : null}
+ {/* filter bar & stuff */}
+
-
- {tagListPrefix.concat(this.props.tags).map((tagProps, id) => (
-
+
+ ) : null}
+ {/* filter bar & stuff */}
+
+
);
diff --git a/src/components/loader/loader.jsx b/src/components/loader/loader.jsx
index a285e105c76..fcc9cc81b60 100644
--- a/src/components/loader/loader.jsx
+++ b/src/components/loader/loader.jsx
@@ -10,6 +10,7 @@ import { tip } from '../../lib/randomUnhelpfulTip';
import snail from './snail.svg'
import * as progressMonitor from './tw-progress-monitor';
+import isScratchDesktop from '../../lib/isScratchDesktop';
// tw:
// we make some rather large changes here:
@@ -81,7 +82,9 @@ class LoaderComponent extends React.Component {
]);
}
componentDidMount () {
- progressMonitor.setProgressHandler(this.handleProgressChange);
+ if (!isScratchDesktop()) {
+ progressMonitor.setProgressHandler(this.handleProgressChange);
+ }
this.updateMessage();
}
componentDidUpdate () {
@@ -101,7 +104,9 @@ class LoaderComponent extends React.Component {
this.update();
}
update () {
- this.barInner.style.width = `${this.progress * 100}%`;
+ if (this.barInner) {
+ this.barInner.style.width = `${this.progress * 100}%`;
+ }
if (this._state === 2) {
this.updateMessage();
}
@@ -147,13 +152,14 @@ class LoaderComponent extends React.Component {
ref={this.messageRef}
/>
+ {/*
+ todo: translation?
+ */}
+
- )}
- Filters
+ {this.props.filterable && ( +
+
+ )}
+ {this.props.tags &&
+
+ {tagListPrefix.concat(this.props.tags).map((tagProps, id) => {
+ let onclick = this.handleTagClick;
+ if (tagProps.type === 'divider') {
+ return (
}
{tagProps.intlLabel}
); + } + if (tagProps.type === 'subtitle') { + return ({tagProps.intlLabel}
); + } + if (tagProps.type === 'custom') { + onclick = () => { + const api = {}; + api.useTag = this.handleTagClick; + api.close = this.handleClose; + api.select = (id) => { + const items = this.state.data; + for (const item of items) { + if (item.extensionId === id) { + this.handleClose(); + this.props.onItemSelected(item); + return; + }; + } + }; + tagProps.func(api); + }; + return ( +
+
+ );
+ })}
+
+
+ {this.state.loaded &&
+ (
+ this.state.data.filter(dataItem => (arrayIncludesItemsFrom(
+ dataItem.tags &&
+ dataItem.tags
+ .map(String.prototype.toLowerCase.call, String.prototype.toLowerCase),
+ [tagProps.tag]))).length
+ )
+ }
+
+
- {this.state.loaded ? this.getFilteredData().map((dataItem, index) => (
-
-
+ {this.state.loaded ? this.getFilteredData().map((dataItem, index) => (
+ this.handleFavoritesUpdate()}
+ _unsandboxed={dataItem._unsandboxed}
/>
-
- )}
+ )) : (
+
+
+ )}
+
-
-
-
+ {!isScratchDesktop() && (
+
+
+
+ )}
@@ -12,7 +13,9 @@ const DefaultMonitor = ({categoryColor, label, value}) => (
className={styles.value}
style={{background: categoryColor}}
>
- {value}
+ {isHTML
+ ? (
- {value}
+ {isHTML
+ ? (
) : (
-
{this.props.values[index]}
+ {value}
)}
- (
className={styles.monitorContainer}
componentRef={props.componentRef}
onDoubleClick={props.mode === 'list' || !props.draggable ? null : props.onNextMode}
+ data-id={props.id}
+ data-opcode={props.opcode}
>
{React.createElement(modes[props.mode], {
categoryColor: categories[props.category],
@@ -133,8 +135,10 @@ MonitorComponent.propTypes = {
category: PropTypes.oneOf(Object.keys(categories)),
componentRef: PropTypes.func.isRequired,
draggable: PropTypes.bool.isRequired,
+ id: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
mode: PropTypes.oneOf(monitorModes),
+ opcode: PropTypes.string.isRequired,
onDragEnd: PropTypes.func.isRequired,
onExport: PropTypes.func,
onImport: PropTypes.func,
diff --git a/src/components/monitor/slider-monitor.jsx b/src/components/monitor/slider-monitor.jsx
index 0271b140a03..74fb120ec0a 100644
--- a/src/components/monitor/slider-monitor.jsx
+++ b/src/components/monitor/slider-monitor.jsx
@@ -14,7 +14,7 @@ const SliderMonitor = ({categoryColor, isDiscrete, label, min, max, value, onSli
className={styles.value}
style={{background: categoryColor}}
>
- {value}
+ {Number(value)}
@@ -24,7 +24,7 @@ const SliderMonitor = ({categoryColor, isDiscrete, label, min, max, value, onSli
min={min}
step={isDiscrete ? 1 : 0.01}
type="range"
- value={value}
+ value={Number(value)}
onChange={onSliderUpdate}
/>
diff --git a/src/components/pause-button/pause-button.css b/src/components/pause-button/pause-button.css
new file mode 100644
index 00000000000..eac94109fb7
--- /dev/null
+++ b/src/components/pause-button/pause-button.css
@@ -0,0 +1,15 @@
+@import "../../css/colors.css";
+
+.pause-btn {
+ width: 2rem;
+ height: 2rem;
+ padding: 0.375rem;
+ border-radius: 0.25rem;
+ user-select: none;
+ user-drag: none;
+ cursor: pointer;
+}
+
+.pause-btn:hover {
+ background-color: $motion-light-transparent;
+}
diff --git a/src/components/pause-button/pause-button.jsx b/src/components/pause-button/pause-button.jsx
new file mode 100644
index 00000000000..8510c6b9901
--- /dev/null
+++ b/src/components/pause-button/pause-button.jsx
@@ -0,0 +1,43 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import pauseIcon from '../stage-header/stagecontrols/pause.svg';
+import playIcon from '../stage-header/stagecontrols/play.svg';
+import styles from './pause-button.css';
+
+const PauseButtonComponent = function (props) {
+ const {
+ paused,
+ className,
+ onClick,
+ title,
+ ...componentProps
+ } = props;
+ return (
+ {props._debugText}
+ )} +