diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.css | 3 | ||||
| -rw-r--r-- | src/App.js | 13 | ||||
| -rw-r--r-- | src/ColorIndicator.js | 2 | ||||
| -rw-r--r-- | src/Utils.js | 15 | ||||
| -rw-r--r-- | src/YoutubeEmbed.js | 17 |
5 files changed, 29 insertions, 21 deletions
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 { @@ -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 |