showing users a card list of screens that can be recorded

Author: ymekuria

index.js main.js

@@ -4,7 +4,7 @@ const path = require('path');
 const url = require('url');
 const MainWindow = require('./app/MainWindow');
 const CaptureTray = require('./app/CaptureTray');
-const { app, BrowserWIndow, Tray, Menu } = electron;
+const { app, BrowserWIndow, Tray, Menu, ipcMain,  desktopCapturer } = electron;
 const startUrl = require('./config/keys').startUrl;
 
 let mainWindow;

package.json

@@ -2,7 +2,7 @@
   "name": "capture",
   "version": "0.1.0",
   "private": true,
-  "main": "index.js",
+  "main": "main.js",
   "devDependencies": {
     "electron": "^1.7.9"
   },

public/iconfont/MaterialIcons-Regular.eot

@@ -0,0 +1,9 @@
+The recommended way to use the Material Icons font is by linking to the web font hosted on Google Fonts:
+
+```html
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet">
+```
+
+Read more in our full usage guide:
+http://google.github.io/material-design-icons/#icon-font-for-the-web

public/iconfont/MaterialIcons-Regular.ijmap

@@ -0,0 +1,38 @@
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
+  src: local('Material Icons'),
+       local('MaterialIcons-Regular'),
+       url(MaterialIcons-Regular.woff2) format('woff2'),
+       url(MaterialIcons-Regular.woff) format('woff'),
+       url(MaterialIcons-Regular.ttf) format('truetype');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;  /* Preferred icon size */
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: 'liga';
+}

public/iconfont/MaterialIcons-Regular.svg

@@ -10,7 +10,8 @@
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
+    <link href="/iconfont/material-icons.css" rel="stylesheet" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

public/iconfont/MaterialIcons-Regular.ttf

@@ -1,11 +1,12 @@
 import { GET_SCREEN_SOURCES } from './types';
 import { asyncToPromise } from '../utils/utils'
-const { ipcRenderer, desktopCapturer } = window.electron;
+const electron = window.electron;
+const { desktopCapturer } = electron;
 
 export const getUserScreens = () => async dispatch => {
 
-  let sources = await asyncToPromise(desktopCapturer.getSources, { types: ['window', 'screen'] } );
+  let sources = await asyncToPromise(desktopCapturer.getSources, { types: ['window', 'screen'] });
+  console.log('sources, ', sources );
 
   dispatch({ type: GET_SCREEN_SOURCES, payload: sources });
-
 };

public/iconfont/MaterialIcons-Regular.woff

@@ -11,13 +11,23 @@ class HomeScreen extends Component {
 	}
 
 	renderScreenSources = () => {
-		return _.map(this.props.screenSources, (source) => {
+		return _.map(this.props.screenSources, ({ id, name, thumbnail}) => {
+			let thumbUrl = `'${thumbnail.toDataURL('image/jpeg')}'`
+			console.log('thumbUrl', thumbUrl);
 			return (
-				<div>
-					<div>
-
-					</div>
-				</div>
+				<div className="row" key={id}>
+	        <div className="col s12 m6">
+	          <div className="card blue-grey darken-1">
+	            <div className="card-content white-text">
+	              <span className="card-title">{name.slice(0,20)}</span>
+	              <img src={thumbnail.toDataURL()} />
+	            </div>
+	            <div className="card-action">
+	              <a href="#">Record</a>
+	            </div>
+	          </div>
+	        </div>
+	      </div>
 
 			)
 		});
@@ -30,6 +40,7 @@ class HomeScreen extends Component {
 			<div>
 				<div>HomeScreen</div>
 				<div>HomeScreen</div>
+				{this.renderScreenSources()}
 			</div>
 		);
 	}