feat(GUI): Add featured-project component

Change-type: patch
Changelog-entry: Added featured-project while flashing
Signed-off-by: Lorenzo Alberto Maria Ambrosi <lorenzoa@balena.io>

lib/gui/app/components/featured-project/featured-project.jsx

@@ -0,0 +1,56 @@
+/*
+ * Copyright 2016 resin.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use strict'
+
+const React = require('react')
+const SafeWebview = require('../safe-webview/safe-webview.jsx')
+const settings = require('../../models/settings')
+const analytics = require('../../modules/analytics')
+const endpoint = null
+
+class FeaturedProject extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      endpoint
+    }
+  }
+
+  componentDidMount () {
+    return settings.load()
+      .then(() => {
+        if (settings.has('featuredProjectEndpoint')) {
+          this.setState({ endpoint: settings.get('featuredProjectEndpoint') })
+        } else {
+          this.setState({ endpoint: 'https://assets.balena.io/etcher-featured/index.html' })
+        }
+      })
+      .catch(analytics.logException)
+  }
+
+  render () {
+    return (this.state.endpoint) ? (
+      <SafeWebview
+        src={this.state.endpoint}
+        {...this.props}>
+      </SafeWebview>
+    ) : null
+  }
+}
+
+module.exports = FeaturedProject

lib/gui/app/components/featured-project/index.js

@@ -0,0 +1,34 @@
+/*
+ * Copyright 2016 resin.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use strict'
+
+/**
+ * @module Etcher.Components.FeaturedProject
+ */
+
+const angular = require('angular')
+const { react2angular } = require('react2angular')
+
+const MODULE_NAME = 'Etcher.Components.FeaturedProject'
+const FeaturedProject = angular.module(MODULE_NAME, [])
+
+FeaturedProject.component(
+  'featuredProject',
+  react2angular(require('./featured-project.jsx'))
+)
+
+module.exports = MODULE_NAME

lib/gui/app/components/safe-webview/index.js

@@ -0,0 +1,34 @@
+/*
+ * Copyright 2018 resin.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use strict'
+
+/**
+ * @module Etcher.Components.SafeWebview
+ */
+
+const angular = require('angular')
+const { react2angular } = require('react2angular')
+
+const MODULE_NAME = 'Etcher.Components.SafeWebview'
+const SafeWebview = angular.module(MODULE_NAME, [])
+
+SafeWebview.component(
+  'safeWebview',
+  react2angular(require('./safe-webview.jsx'))
+)
+
+module.exports = MODULE_NAME

lib/gui/app/components/safe-webview/safe-webview.jsx

@@ -20,17 +20,12 @@
 
 const _ = require('lodash')
 const electron = require('electron')
-const angular = require('angular')
 const react = require('react')
 const propTypes = require('prop-types')
-const { react2angular } = require('react2angular')
-const analytics = require('../modules/analytics')
-const store = require('../models/store')
-const settings = require('../models/settings')
-const packageJSON = require('../../../../package.json')
-
-const MODULE_NAME = 'Etcher.Components.SafeWebview'
-const angularSafeWebview = angular.module(MODULE_NAME, [])
+const analytics = require('../../modules/analytics')
+const store = require('../../models/store')
+const settings = require('../../models/settings')
+const packageJSON = require('../../../../../package.json')
 
 /**
  * @summary Electron session identifier
@@ -274,6 +269,4 @@ SafeWebview.propTypes = {
 
 }
 
-angularSafeWebview.component('safeWebview', react2angular(SafeWebview))
-
-module.exports = MODULE_NAME
+module.exports = SafeWebview

lib/gui/app/pages/main/main.js

@@ -40,6 +40,7 @@ const MainPage = angular.module(MODULE_NAME, [
   require('../../components/image-selector'),
   require('../../components/warning-modal/warning-modal'),
   require('../../components/file-selector'),
+  require('../../components/featured-project'),
 
   require('../../os/open-external/open-external'),
   require('../../os/dropzone/dropzone'),

lib/gui/app/pages/main/templates/main.tpl.html

@@ -90,6 +90,12 @@
     </div>
   </div>
 
+  <featured-project
+    ng-class="{
+      isFlashing: main.state.isFlashing()
+    }">
+  </featured-project>
+
   <div class="col-xs" ng-controller="FlashController as flash">
     <div class="box text-center">
       <div class="center-block">

lib/gui/app/scss/main.scss

@@ -155,7 +155,7 @@ body,
     bottom: 0;
     left: 0;
     width: 100%;
-    height: 255px;
+    height: 320px;
   }
 }
 
@@ -174,3 +174,22 @@ body,
     padding-right: 3px;
   }
 }
+
+featured-project {
+  webview {
+    flex: 0 1;
+    height: 0;
+    width: 0;
+  }
+
+  &.isFlashing webview {
+    width: 480px;
+    height: 360px;
+    position: absolute;
+    z-index: 1;
+    left: 5%;
+    top: 10%;
+    border-radius: 7px;
+    overflow: hidden;
+  }
+}

lib/gui/css/main.css

@@ -9933,7 +9933,7 @@ body,
   bottom: 0;
   left: 0;
   width: 100%;
-  height: 255px; }
+  height: 320px; }
 
 .wrapper {
   height: 100%;
@@ -9946,3 +9946,18 @@ body,
   .section-header > .button {
     padding-left: 3px;
     padding-right: 3px; }
+
+featured-project webview {
+  flex: 0 1;
+  height: 0;
+  width: 0; }
+
+featured-project.isFlashing webview {
+  width: 480px;
+  height: 360px;
+  position: absolute;
+  z-index: 1;
+  left: 5%;
+  top: 10%;
+  border-radius: 7px;
+  overflow: hidden; }

lib/gui/etcher.js

@@ -35,7 +35,7 @@ let mainWindow = null
 const createMainWindow = () => {
   mainWindow = new electron.BrowserWindow({
     width: 800,
-    height: 380,
+    height: 480,
     useContentSize: true,
     show: false,
     resizable: Boolean(config.fullscreen),