Do not record raw

Readme.md

@@ -8,7 +8,7 @@
 
 |   |   |   |
 |:---:|:---:|:---:|
-|[![screen_composite](https://mqtt-explorer.com/img/screen-composite_small.png)](https://mqtt-explorer.com/img/screen-composite.png)|[![screen2_small](https://mqtt-explorer.com/img/screen2_small.png)](https://mqtt-explorer.com/img/screen2.png)|[![screen3_small](https://mqtt-explorer.com/img/screen3_small.png)](https://mqtt-explorer.com/img/screen3.png)|
+|[![screen1_small](https://user-images.githubusercontent.com/7721625/53954800-84b34c00-40d7-11e9-842d-bf655c569600.jpg)](https://user-images.githubusercontent.com/7721625/53954364-52551f00-40d6-11e9-93cf-d5a9601897ea.png)|[![screen2_small](https://user-images.githubusercontent.com/7721625/53954801-84b34c00-40d7-11e9-913a-42572e675620.jpg)](https://user-images.githubusercontent.com/7721625/53954365-52551f00-40d6-11e9-823f-afd66f19ed01.png)|[![screen3_small](https://user-images.githubusercontent.com/7721625/53954802-854be280-40d7-11e9-973c-08f23c8dbf89.jpg)](https://user-images.githubusercontent.com/7721625/53954366-52551f00-40d6-11e9-9738-74db830d03ac.png)|
 
 # The App has moved to [mqtt-explorer.com](https://mqtt-explorer.com)
 MQTT Explorer is a comprehensive and easy-to-use MQTT Client.  

app/src/components/Tree/TreeNode.tsx

@@ -98,7 +98,7 @@ class TreeNodeComponent extends React.Component<Props, State> {
   }
 
   private viewStateHasChanged = (msg: void) => {
-    this.props.treeNode.viewModel && this.setState({ selected: this.props.treeNode.viewModel.isSelected() })
+    this.setState({ selected: this.props.treeNode.viewModel!.isSelected() })
   }
 
   private removeSubscriber(treeNode: q.TreeNode<TopicViewModel>) {

app/src/components/UpdateNotifier.tsx

@@ -44,7 +44,6 @@ interface GithubAsset {
   id: number
   node_id: string
   url: string
-  browser_download_url: string
   name: string
   label: string
 }
@@ -171,7 +170,7 @@ class UpdateNotifier extends React.Component<Props, State> {
           {this.renderDownloads()}
           <Button
             className={this.props.classes.download}
-            onClick={this.openHomePage}
+            onClick={this.openGithub}
           >
             Github Page
           </Button>
@@ -181,8 +180,8 @@ class UpdateNotifier extends React.Component<Props, State> {
     )
   }
 
-  private openHomePage = () => {
-    this.openUrl('https://mqtt-explorer.com')
+  private openGithub = () => {
+    this.openUrl('https://github.com/thomasnordquist/MQTT-Explorer')
   }
 
   private openUrl = (url: string) => {
@@ -214,7 +213,7 @@ class UpdateNotifier extends React.Component<Props, State> {
         <div>
           <Button
             className={this.props.classes.download}
-            onClick={() => this.openUrl(asset.browser_download_url)}
+            onClick={() => this.openUrl(asset.url)}
           >
             <CloudDownload />&nbsp;{asset.name}
           </Button>

app/src/components/helper/ConnectionHealthIndicator.tsx

@@ -47,7 +47,7 @@ class ConnectionHealthIndicator extends React.Component<Props, {}> {
 
     return (
       <Tooltip title={`Connection health "${health}"`}>
-        <div style={{ display: 'inherit' }}>
+        <div>
           <DeviceHubOutlined className={`${[classes[health]]} ${this.props.withBackground ? classes.icon : ''}`} />
         </div>
       </Tooltip>

backend/src/index.ts

@@ -1,14 +1,18 @@
 import { Base64Message } from './Model/Base64Message'
 import { DataSource, MqttSource } from './DataSource'
+import { UpdateInfo } from 'builder-util-runtime'
 import {
   AddMqttConnection,
+  EventDispatcher,
   MqttMessage,
   addMqttConnectionEvent,
   backendEvents,
+  checkForUpdates,
   makeConnectionMessageEvent,
   makeConnectionStateEvent,
   makePublishEvent,
   removeConnection,
+  updateAvailable
 } from '../../events'
 
 export class ConnectionManager {
@@ -72,3 +76,17 @@ export class ConnectionManager {
       .forEach(conenctionId => this.removeConnection(conenctionId))
   }
 }
+
+class UpdateNotifier {
+  public onCheckUpdateRequest = new EventDispatcher<void, UpdateNotifier>()
+  constructor() {
+    backendEvents.subscribe(checkForUpdates, () => {
+      this.onCheckUpdateRequest.dispatch()
+    })
+  }
+  public notify(updateInfo: UpdateInfo) {
+    backendEvents.emit(updateAvailable, updateInfo)
+  }
+}
+
+export const updateNotifier = new UpdateNotifier()

events/Events.ts

@@ -28,6 +28,10 @@ export function makeConnectionStateEvent(connectionId: string): Event<DataSource
   }
 }
 
+export const checkForUpdates: Event<void> = {
+  topic: 'app/update/check',
+}
+
 export const updateAvailable: Event<UpdateInfo> = {
   topic: 'app/update/available',
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "MQTT-Explorer",
-  "version": "0.2.6",
+  "version": "0.2.5",
   "description": "Explore your message queues",
   "main": "dist/src/electron.js",
   "scripts": {
@@ -14,8 +14,8 @@
     "test-backend": "cd backend && yarn run test && cd ..",
     "prepare-release": "ts-node scripts/prepare-release.ts",
     "package": "ts-node package.ts",
-    "ui-test": "./scripts/uiTests.sh",
-    "upload-video-artifacts": "./scripts/uploadVideoAsset.ts ui-test.mp4 ui-test.gif",
+    "ui-test": "./scripts/uiTests.sh 1920x1080",
+    "upload-video-artifacts": "./scripts/uploadVideoAsset.ts ui-test*.mp4 ui-test*.gif",
     "package-with-docker": "./scripts/package-with-docker.sh"
   },
   "repository": {
@@ -50,8 +50,7 @@
       "buildResources": "res",
       "output": "build"
     },
-    "afterAllArtifactBuild": "./dist/scripts/afterAllArtifactBuild.js",
-    "afterPack": "./dist/scripts/afterPack.js"
+    "afterAllArtifactBuild": "./dist/scripts/afterAllArtifactBuild.js"
   },
   "author": "Thomas Nordquist",
   "email": "xxnerowingerxx@gmail.com",

scripts/afterAllArtifactBuild.ts

@@ -13,8 +13,6 @@ export default async function(info: any) {
       await exec('sudo', ['unsquashfs', snapFile])
       await exec('sudo', ['rm', snapFile])
       await exec('sudo', ['chmod', '-R', 'g-s', 'squashfs-root'])
-
-      // Add command line argument to disable the sandbox
       await exec('sudo', ['snap', 'run', 'snapcraft', 'pack', 'squashfs-root', '--output', snapFile])
       await exec('sudo', ['rm', '-rf', 'squashfs-root'])
 

scripts/afterPack.ts

@@ -1,36 +0,0 @@
-import * as fs from 'fs-extra'
-import * as path from 'path'
-import { chdir } from 'process'
-import { exec } from './util'
-
-
-interface Target {
-  name: 'appImage' | string
-}
-
-interface Context {
-  appOutDir: string // .../build/clean/build/linux-unpacked
-  outDir: string // .../build/clean/build
-  targets: [Target]
-}
-
-export default async function(context: Context) {
-  console.log(context)
-  const isLinux = context.targets.find(target => target.name === 'appImage' || target.name === 'snap')
-  if (!isLinux) {
-    return
-  }
-
-  const originalDir = process.cwd()
-  const dirname = context.appOutDir
-  chdir(dirname)
-
-  await exec('mv', ['mqtt-explorer', 'mqtt-explorer.bin'])
-  const wrapperScript = `#!/bin/bash
-    "\${BASH_SOURCE%/*}"/mqtt-explorer.bin "$@" --no-sandbox
-  `
-  fs.writeFileSync('mqtt-explorer', wrapperScript)
-  await exec('chmod', ['+x', 'mqtt-explorer'])
-
-  chdir(originalDir)
-}

scripts/prepareVideo.sh

@@ -1,27 +1,27 @@
 #!/bin/bash
-DIMENSIONS="1024x720"
+DIMENSIONS=$1
 GIF_SCALE="1024"
 
-ffmpeg -s:v $DIMENSIONS -r 20 -f rawvideo -pix_fmt yuv420p -i qrawvideorgb24.yuv app2.mp4
+#ffmpeg -s:v $DIMENSIONS -r 20 -f rawvideo -pix_fmt yuv420p -i qrawvideorgb24.yuv app2.mp4
 
 # The video starts with a few blank frames, we want to know when the stop
-ffprobe -f lavfi -i "movie=app2.mp4,blackdetect[out0]" -show_entries tags=lavfi.black_start,lavfi.black_end -of default=nw=1 -v quiet > ffmpeg_info
+ffprobe -f lavfi -i "movie=app.mp4,blackdetect[out0]" -show_entries tags=lavfi.black_start,lavfi.black_end -of default=nw=1 -v quiet > ffmpeg_info
 END_OF_BLACK=`cat ffmpeg_info | grep end | head -n1 | cut -d'=' -f2`
 
 # Remove grey frames at the beginning (app start and splash screen)
 END_OF_BLACK=`awk "BEGIN {print $END_OF_BLACK+0.8; exit}"`
 
 # Trim black frames at start
-ffmpeg -s:v $DIMENSIONS -r 20 -f rawvideo -pix_fmt yuv420p -i qrawvideorgb24.yuv -ss $END_OF_BLACK  app.mp4
+ffmpeg -s:v $DIMENSIONS -r 20 -i app.mp4 -ss $END_OF_BLACK app.mp4
 
 # Generate gif palette
-ffmpeg -y -s:v $DIMENSIONS -r 20 -f rawvideo -pix_fmt yuv420p -i qrawvideorgb24.yuv -vf "fps=10,scale=$GIF_SCALE:-1:flags=lanczos,palettegen" palette1024.png
+ffmpeg -y -s:v $DIMENSIONS -r 20 -i app.mp4 -vf "fps=10,scale=$GIF_SCALE:-1:flags=lanczos,palettegen" palette1024.png
 
 # Create gif
-ffmpeg -s:v $DIMENSIONS -r 20 -f rawvideo -pix_fmt yuv420p -i qrawvideorgb24.yuv -i palette1024.png -ss $END_OF_BLACK -filter_complex "fps=10,scale=$GIF_SCALE:-1:flags=lanczos[x];[x][1:v]paletteuse" app720.gif
+ffmpeg -s:v $DIMENSIONS -r 20 -i app.mp4 -i palette1024.png -ss $END_OF_BLACK -filter_complex "fps=10,scale=$GIF_SCALE:-1:flags=lanczos[x];[x][1:v]paletteuse" app.gif
 
 # Clean up
 rm ffmpeg_info palette*.png qrawvideorgb24.yuv
 
-mv app.mp4 ui-test.mp4
-mv app720.gif ui-test.gif
+mv app.mp4 ui-test_$DIMENSIONS.mp4
+mv app.gif ui-test_$DIMENSIONS.gif

scripts/uiTests.sh

@@ -9,7 +9,7 @@ function finish {
 
 trap finish EXIT
 
-DIMENSIONS="1024x720"
+DIMENSIONS=$1
 SCR=99
 # Start new window manager
 Xvfb :$SCR -screen 0 "$DIMENSIONS"x24 -ac &
@@ -32,8 +32,8 @@ sleep 2
 rm ./app.mp4 || echo no need to delete ./app.mp4
 
 # Start recoring in tmux
-#tmux new-session -d -s record ffmpeg -f x11grab -draw_mouse 0 -video_size $DIMENSIONS -i :$SCR -codec:v libx264 -r 20 ./app.mp4
-tmux new-session -d -s record ffmpeg -f x11grab -draw_mouse 0 -video_size $DIMENSIONS -i :$SCR -r 20 -vcodec rawvideo -pix_fmt yuv420p qrawvideorgb24.yuv
+tmux new-session -d -s record ffmpeg -f x11grab -draw_mouse 0 -video_size $DIMENSIONS -i :$SCR -codec:v libx264 -r 20 ./app.mp4
+#tmux new-session -d -s record ffmpeg -f x11grab -draw_mouse 0 -video_size $DIMENSIONS -i :$SCR -r 20 -vcodec rawvideo -pix_fmt yuv420p qrawvideorgb24.yuv
 
 # Start tests
 node dist/src/spec/demoVideo.js
@@ -47,6 +47,6 @@ tmux send-keys -t record q
 sleep 5
 
 # Process the video
-./scripts/prepareVideo.sh
+./scripts/prepareVideo.sh $DIMENSIONS
 
 exit $TEST_EXIT_CODE

src/autoUpdater.ts

@@ -1,9 +1,10 @@
 import { autoUpdater } from 'electron-updater'
 import { BuildInfo } from 'electron-telemetry/build/Model'
 import { UpdateInfo } from '../events'
+import { updateNotifier } from '../backend/src/index'
 
 export function shouldAutoUpdate(build: BuildInfo) {
-  return build.package !== 'portable' && build.platform !== 'mac'
+  return build.package !== 'portable'
 }
 
 export function handleAutoUpdate() {
@@ -11,13 +12,15 @@ export function handleAutoUpdate() {
     console.log('There is an update available')
   })
 
-  autoUpdater.on('error', (error) => {
-    console.error('could not update due to error', error)
+  autoUpdater.on('error', () => {
+    console.log('could not update due to error')
   })
 
-  try {
-    autoUpdater.checkForUpdatesAndNotify()
-  } catch (error) {
-    console.error(error)
-  }
+  updateNotifier.onCheckUpdateRequest.subscribe(() => {
+    try {
+      autoUpdater.checkForUpdatesAndNotify()
+    } catch (error) {
+      console.error(error)
+    }
+  })
 }

src/electron.ts

@@ -38,8 +38,8 @@ async function createWindow() {
   const iconPath = path.join(__dirname, '..', '..', 'icon.png')
   // Create the browser window.
   mainWindow = new BrowserWindow({
-    width: 1024,
-    height: 720,
+    width: 1920 / 2,
+    height: 1080 / 2 + 22,
     show: false,
     webPreferences: {
       nodeIntegration: true,

src/spec/demoVideo.ts

@@ -41,7 +41,7 @@ const options = {
     browserName: 'electron',
     chromeOptions: {
       binary: `${__dirname}/../../../node_modules/.bin/electron`,
-      args: [`--app=${__dirname}/../../..`, '--force-device-scale-factor=1', '--no-sandbox', '--disable-dev-shm-usage', '--disable-extensions'].concat(runningUiTestOnCi),
+      args: [`--app=${__dirname}/../../..`, '--force-device-scale-factor=2', '--no-sandbox', '--disable-dev-shm-usage', '--disable-extensions'].concat(runningUiTestOnCi),
     },
     windowTypes: ['app', 'webview'],
   },
@@ -55,7 +55,6 @@ async function doStuff() {
   const browser = await webdriverio.remote(options)
   await createFakeMousePointer(browser)
 
-
   // Wait for Username input to be visible
   await browser.$('//label[contains(text(), "Username")]/..//input')
   const scenes = new SceneBuilder()
@@ -153,6 +152,7 @@ async function doStuff() {
   stopMqtt()
 
   fs.writeFileSync('scenes.json', JSON.stringify(scenes.scenes, undefined, '  '))
+  process.exit(0)
 }
 
 doStuff()