From 62bc310a2639d98df36f193a7dee8cac0dc536b5 Mon Sep 17 00:00:00 2001
From: Martin Ashby <martin@ashbysoft.com>
Date: Tue, 3 Jul 2018 19:07:13 +0100
Subject: Slightly wider color indicator. Youtube instead of periscope. Linter
 complaints resolved. Quicker deploy script.

---
 buildAndCopy.sh       |  1 +
 src/App.css           |  3 ++-
 src/App.js            | 13 ++-----------
 src/ColorIndicator.js |  2 +-
 src/Utils.js          | 15 +++++++--------
 src/YoutubeEmbed.js   | 17 +++++++++++++++++
 6 files changed, 30 insertions(+), 21 deletions(-)
 create mode 100755 buildAndCopy.sh
 create mode 100644 src/YoutubeEmbed.js

diff --git a/buildAndCopy.sh b/buildAndCopy.sh
new file mode 100755
index 0000000..0ec3cab
--- /dev/null
+++ b/buildAndCopy.sh
@@ -0,0 +1 @@
+npm run build && scp -rp build pi@shinypi:~/unicornpaint
diff --git a/src/App.css b/src/App.css
index 92768d0..d895c6d 100644
--- a/src/App.css
+++ b/src/App.css
@@ -25,7 +25,7 @@ body {
 
 .paintContainer {
     display: grid;
-    grid-template-columns: 8fr 32fr 5fr;
+    grid-template-columns: 10fr 32fr 5fr;
     grid-template-rows: 32fr 8fr;
 }
 
@@ -86,6 +86,7 @@ body {
 
     display: flex;
     flex-flow: row wrap;
+    max-width: 400px;
 }
 
 .framePreviewWrapper {
diff --git a/src/App.js b/src/App.js
index bfff3a6..5c88f5d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -10,7 +10,7 @@ import ConnectedIndicator from './ConnectedIndicator'
 import LoadDialog from './LoadDialog'
 import SaveDialog from './SaveDialog'
 import FrameControl from './FrameControl'
-import { Timeline } from 'react-twitter-widgets'
+import YoutubeEmbed from './YoutubeEmbed'
 import '@fortawesome/fontawesome-free-webfonts/css/fontawesome.css'
 import '@fortawesome/fontawesome-free-webfonts/css/fa-solid.css'
 import '@fortawesome/fontawesome-free-webfonts/css/fa-regular.css'
@@ -269,16 +269,7 @@ class App extends Component {
               imageData={imageData}/>
         </div>
         <div className="liveFeed">
-          <Timeline 
-            dataSource={{
-              sourceType: 'profile',
-              screenName: 'UnicornPaint',
-            }}
-            options={{
-              tweetLimit: 1,
-              chrome: "noheader nofooter noborders noscrollbar",
-              width: "300px"
-            }}/>
+            <YoutubeEmbed/>
         </div>
         <div>
           {
diff --git a/src/ColorIndicator.js b/src/ColorIndicator.js
index df0a517..e19c8d8 100644
--- a/src/ColorIndicator.js
+++ b/src/ColorIndicator.js
@@ -24,7 +24,7 @@ export default class ColorIndicator extends Component {
                 background: `rgb(${r},${g},${b})`, 
                 color: foreground
             }}>
-            {/* <span>{colorDesc}</span> */}
+            <span>{colorDesc}</span>
         </div>
     }
 }
diff --git a/src/Utils.js b/src/Utils.js
index eeeca0d..da4bab0 100644
--- a/src/Utils.js
+++ b/src/Utils.js
@@ -155,7 +155,7 @@ function transformPixels(pixels, transform) {
     let width = pixels.length
     let height = pixels[0].length
     let newPixels = []
-    for (var x = 0; x < width; x++) {
+    for (let x = 0; x < width; x++) {
         let column = []
         for (var y = 0; y < height; y++) {
             column.push([0, 0, 0])
@@ -163,8 +163,8 @@ function transformPixels(pixels, transform) {
         newPixels.push(column)
     }
     
-    for (var x = 0; x < width; x++) {
-      for (var y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      for (let y = 0; y < height; y++) {
         let px = getPixel(x, y, pixels)
         let {newx, newy} = transform(x, y, width, height)
         newPixels[newx][newy] = px
@@ -191,20 +191,19 @@ function readGifFrames(base64GifData) {
 
       // Create the x, y array upfront
       let pixels = new Array(width)
-      for (var y=0; y<height; y++) {
+      for (let y=0; y<height; y++) {
         pixels[y] = new Array(height)
       }
       frames.push(pixels)
 
       // Copy pixels to out array. The data provided is provided in rows
       var ix = 0
-      for (var y=0; y<height; y++) {
-        for (var x=0; x<width; x++) {
+      for (let y=0; y<height; y++) {
+        for (let x=0; x<width; x++) {
           let r = rawPixels[ix++]
           let g = rawPixels[ix++]
           let b = rawPixels[ix++]
-        //   let a = rawPixels[ix++]
-        ix++ // Ignore the alpha component
+          ix++ // Ignore the alpha component
           pixels[x][y] = [r, g, b]
         }
       }
diff --git a/src/YoutubeEmbed.js b/src/YoutubeEmbed.js
new file mode 100644
index 0000000..5c006c1
--- /dev/null
+++ b/src/YoutubeEmbed.js
@@ -0,0 +1,17 @@
+import React, { Component } from 'react'
+
+export default class YoutubeEmbed extends Component {
+    shouldComponentUpdate() {
+        return false
+    }
+    render() {
+        return <iframe 
+            title="live stream"
+            width="350" 
+            height="350" 
+            src="https://www.youtube.com/embed/HFlAhWwCdfE?autoplay=1" 
+            frameBorder="0" 
+            allow="autoplay; encrypted-media" 
+            allowFullScreen></iframe>
+    }
+}
\ No newline at end of file
-- 
cgit v1.2.3-ZIG