Merge pull request #100 from t-kazu/merge/scratch-gui

Scratch-guiをマージしました

Author: takaokouji

.babelrc

@@ -1,10 +1,13 @@
 {
     "plugins": [
-        "syntax-dynamic-import",
-        "transform-async-to-generator",
-        "transform-object-rest-spread",
+        "@babel/plugin-syntax-dynamic-import",
+        "@babel/plugin-transform-async-to-generator",
+        "@babel/plugin-proposal-object-rest-spread",
         ["react-intl", {
             "messagesDir": "./translations/messages/"
         }]],
-    "presets": [["env", {"targets": {"browsers": ["last 3 versions", "Safari >= 8", "iOS >= 8"]}}], "react"]
+    "presets": [
+        ["@babel/preset-env", {"targets": {"browsers": ["last 3 versions", "Safari >= 8", "iOS >= 8"]}}],
+        "@babel/preset-react"
+    ]
 }

package.json

@@ -29,19 +29,20 @@
     "react-dom": "^16.0.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.1.2",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+    "@babel/plugin-transform-async-to-generator": "^7.1.0",
+    "@babel/preset-env": "^7.1.0",
+    "@babel/preset-react": "^7.0.0",
     "arraybuffer-loader": "^1.0.6",
     "autoprefixer": "^9.0.1",
-    "babel-core": "^6.23.1",
-    "babel-eslint": "^8.0.1",
-    "babel-loader": "^7.1.0",
-    "babel-plugin-syntax-dynamic-import": "^6.18.0",
-    "babel-plugin-transform-async-to-generator": "^6.24.1",
-    "babel-plugin-transform-object-rest-spread": "^6.22.0",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-react": "^6.22.0",
+    "babel-core": "7.0.0-bridge.0",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "^8.0.4",
     "base64-loader": "1.0.0",
     "bowser": "1.9.4",
-    "chromedriver": "2.42.0",
+    "chromedriver": "2.43.0",
     "classnames": "2.2.6",
     "copy-webpack-plugin": "^4.5.1",
     "core-js": "2.5.7",
@@ -100,11 +101,11 @@
     "scratch-audio": "0.1.0-prerelease.20180625202813",
     "scratch-blocks": "0.1.0-prerelease.1539267627",
     "scratch-l10n": "3.0.20181010220115",
-    "scratch-paint": "0.2.0-prerelease.20181010194950",
-    "scratch-render": "0.1.0-prerelease.20181002192350",
-    "scratch-storage": "1.0.4",
-    "scratch-svg-renderer": "0.2.0-prerelease.20180926143036",
-    "scratch-vm": "0.2.0-prerelease.20181011142759",
+    "scratch-paint": "0.2.0-prerelease.20181017200201",
+    "scratch-render": "0.1.0-prerelease.20181017195657",
+    "scratch-storage": "1.0.5",
+    "scratch-svg-renderer": "0.2.0-prerelease.20181017193458",
+    "scratch-vm": "0.2.0-prerelease.20181019092856",
     "selenium-webdriver": "3.6.0",
     "startaudiocontext": "1.2.1",
     "style-loader": "^0.23.0",

src/components/cards/cards.jsx

@@ -11,6 +11,8 @@ import leftArrow from './icon--prev.svg';
 import helpIcon from '../../lib/assets/icon--tutorials.svg';
 import closeIcon from '../close-button/icon--close.svg';
 
+import {translateVideo} from '../../lib/libraries/decks/translate-video.js';
+
 const CardHeader = ({onCloseCards, onShowAll, totalSteps, step}) => (
     <div className={styles.headerButtons}>
         <div
@@ -64,12 +66,18 @@ const VideoStep = ({video, dragging}) => (
         ) : null}
         <iframe
             allowFullScreen
-            allow="autoplay; encrypted-media"
+            allowTransparency="true"
             frameBorder="0"
-            height="337"
-            src={`${video}?rel=0&amp;showinfo=0`}
+            height="338"
+            scrolling="no"
+            src={`https://fast.wistia.net/embed/iframe/${video}?seo=false&videoFoam=true`}
+            title="📹"
             width="600"
         />
+        <script
+            async
+            src="https://fast.wistia.net/assets/external/E-v1.js"
+        />
     </div>
 );
 
@@ -207,6 +215,7 @@ const Cards = props => {
         content,
         dragging,
         isRtl,
+        locale,
         onActivateDeckFactory,
         onCloseCards,
         onDrag,
@@ -258,7 +267,7 @@ const Cards = props => {
                             steps[step].video ? (
                                 <VideoStep
                                     dragging={dragging}
-                                    video={steps[step].video}
+                                    video={translateVideo(steps[step].video, locale)}
                                 />
                             ) : (
                                 <ImageStep
@@ -294,7 +303,8 @@ Cards.propTypes = {
         })
     }),
     dragging: PropTypes.bool.isRequired,
-    isRtl: PropTypes.bool,
+    isRtl: PropTypes.bool.isRequired,
+    locale: PropTypes.string.isRequired,
     onActivateDeckFactory: PropTypes.func.isRequired,
     onCloseCards: PropTypes.func.isRequired,
     onDrag: PropTypes.func,

src/components/gui/gui.css

@@ -279,6 +279,21 @@ $fade-out-distance: 15px;
     margin-top: 0;
 }
 
+/* Sprite Selection Watermark */
+.watermark {
+    position: absolute;
+    top: 1.25rem;
+    pointer-events: none;
+}
+
+[dir="ltr"] .watermark {
+    right: 1.25rem;
+}
+
+[dir="rtl"] .watermark {
+    left: 1.25rem;
+}
+
 /* Menu */
 
 .menu-bar-position {

src/components/gui/gui.jsx

@@ -21,6 +21,7 @@ import Box from '../box/box.jsx';
 import MenuBar from '../menu-bar/menu-bar.jsx';
 import CostumeLibrary from '../../containers/costume-library.jsx';
 import BackdropLibrary from '../../containers/backdrop-library.jsx';
+import Watermark from '../../containers/watermark.jsx';
 
 import Backpack from '../../containers/backpack.jsx';
 import ImportModal from '../../containers/import-modal.jsx';
@@ -62,6 +63,11 @@ const GUIComponent = props => {
         backpackOptions,
         blocksTabVisible,
         cardsVisible,
+        canCreateNew,
+        canRemix,
+        canSave,
+        canSaveAsCopy,
+        canShare,
         children,
         costumeLibraryVisible,
         costumesTabVisible,
@@ -164,6 +170,11 @@ const GUIComponent = props => {
                 ) : null}
                 <MenuBar
                     accountNavOpen={accountNavOpen}
+                    canCreateNew={canCreateNew}
+                    canRemix={canRemix}
+                    canSave={canSave}
+                    canSaveAsCopy={canSaveAsCopy}
+                    canShare={canShare}
                     className={styles.menuBarPosition}
                     enableCommunity={enableCommunity}
                     renderLogin={renderLogin}
@@ -275,6 +286,9 @@ const GUIComponent = props => {
                                             />
                                         </button>
                                     </Box>
+                                    <Box className={styles.watermark}>
+                                        <Watermark />
+                                    </Box>
                                 </TabPanel>
                                 <TabPanel className={tabClassNames.tabPanel}>
                                     {costumesTabVisible ? <CostumeTab vm={vm} /> : null}
@@ -322,6 +336,11 @@ GUIComponent.propTypes = {
     }),
     basePath: PropTypes.string,
     blocksTabVisible: PropTypes.bool,
+    canCreateNew: PropTypes.bool,
+    canRemix: PropTypes.bool,
+    canSave: PropTypes.bool,
+    canSaveAsCopy: PropTypes.bool,
+    canShare: PropTypes.bool,
     cardsVisible: PropTypes.bool,
     children: PropTypes.node,
     costumeLibraryVisible: PropTypes.bool,
@@ -363,6 +382,12 @@ GUIComponent.defaultProps = {
         visible: false
     },
     basePath: './',
+    canCreateNew: true,
+    canRemix: false,
+    canSave: false,
+    canSaveAsCopy: false,
+    canShare: false,
+    onUpdateProjectTitle: () => {},
     stageSizeMode: STAGE_SIZE_MODES.large
 };
 

src/components/language-selector/language-selector.css

@@ -1,10 +1,6 @@
 @import "../../css/colors.css";
 @import "../../css/units.css";
 
-.language-icon {
-    height:  1.5rem;
-}
-
 /* Position the language select over the language icon, and make it transparent */
 .language-select {
     position: absolute;

src/components/loader/loader.css

@@ -42,6 +42,18 @@
     animation: bottom-slide-in 1.5s ease infinite;
 }
 
+[dir="rtl"] .top-block {
+    animation: top-slide-in-rtl 1.5s ease infinite;
+}
+
+[dir="rtl"] .middle-block {
+    animation: middle-slide-in-rtl 1.5s ease infinite;
+}
+
+[dir="rtl"] .bottom-block {
+    animation: bottom-slide-in-rtl 1.5s ease infinite;
+}
+
 @keyframes top-slide-in {
   0% {
     transform: translateY(50px);
@@ -88,6 +100,60 @@
   }
 }
 
+@keyframes top-slide-in-rtl {
+  0% {
+    transform: translateY(50px) scaleX(-1);
+    opacity: 0;
+  }
+
+  33% {
+    transform: translateY(0px) scaleX(-1);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(0px) scaleX(-1);
+    opacity: 1;
+  }
+}
+
+@keyframes middle-slide-in-rtl {
+  0% {
+    transform: translateY(50px) scaleX(-1);
+    opacity: 0;
+  }
+
+  33% {
+    transform: translateY(50px) scaleX(-1);
+    opacity: 0;
+  }
+
+  66% {
+    transform: translateY(0px) scaleX(-1);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(0px) scaleX(-1);
+    opacity: 1;
+  }
+}
+
+@keyframes bottom-slide-in-rtl {
+  0% {
+    transform: translateY(50px) scaleX(-1);
+    opacity: 0;
+  }
+
+  66% {
+    transform: translateY(50px) scaleX(-1);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateY(0px) scaleX(-1);
+    opacity: 1;
+  }
+}
+
 .message-container-outer {
     height: 30px;
     overflow: hidden;

src/components/menu-bar/menu-bar.css

@@ -47,10 +47,11 @@
 
 .language-icon {
     height:  1.5rem;
+    vertical-align: middle;
 }
 
 .language-caret {
-    margin-bottom: .625rem;
+    margin: 0 .125rem;
 }
 
 .language-menu {
@@ -100,6 +101,10 @@
     padding: 0 0.75rem;
 }
 
+.menu-bar-item.language-menu {
+    padding: 0 0.5rem;
+}
+
 .menu-bar-menu {
     margin-top: $menu-bar-height;
     z-index: $z-index-menu-bar;