Do not record raw

app/src/components/Layout/Notification.tsx

@@ -37,7 +37,7 @@ class Notification extends React.Component<Props, {}> {
       <Snackbar
         anchorOrigin={snackbarAnchor}
         open={Boolean(this.props.message)}
-        autoHideDuration={this.props.type === 'error' ? 10000 : 3000}
+        autoHideDuration={this.props.type === 'error' ? 10000 : 2000}
         onClose={this.props.onClose}
       >
         <SnackbarContent

app/src/components/helper/Copy.tsx

@@ -2,40 +2,35 @@ import * as React from 'react'
 import Check from '@material-ui/icons/Check'
 import CustomIconButton from './CustomIconButton'
 import FileCopy from '@material-ui/icons/FileCopy'
-import green from '@material-ui/core/colors/green'
-import { Snackbar, SnackbarContent, Tooltip } from '@material-ui/core'
-import { Theme, withStyles } from '@material-ui/core/styles'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { globalActions } from '../../actions'
 
 const copy = require('copy-text-to-clipboard')
 
 interface Props {
   value: string
-  classes: any
+  actions: {
+    global: typeof globalActions
+  }
 }
 
 interface State {
   didCopy: boolean
-  snackBarOpen: boolean
 }
 
-const styles = (theme: Theme) => ({
-  snackbar: {
-    backgroundColor: green[600],
-    color: theme.typography.button.color,
-  },
-})
-
 class Copy extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props)
-    this.state = { didCopy: false, snackBarOpen: false }
+    this.state = { didCopy: false }
   }
 
   private handleClick = (event: React.MouseEvent) => {
     event.stopPropagation()
 
     copy(this.props.value)
-    this.setState({ didCopy: true, snackBarOpen: true })
+    this.props.actions.global.showNotification('Copied to clipboard')
+    this.setState({ didCopy: true })
     setTimeout(() => {
       this.setState({ didCopy: false })
     }, 1500)
@@ -53,23 +48,17 @@ class Copy extends React.Component<Props, State> {
             {icon}
           </CustomIconButton>
         </span>
-        <Snackbar
-          anchorOrigin={{
-            vertical: 'bottom',
-            horizontal: 'left',
-          }}
-          open={this.state.snackBarOpen}
-          autoHideDuration={2000}
-          onClose={() => { this.setState({ snackBarOpen: false }) }}
-        >
-          <SnackbarContent
-            className={this.props.classes.snackbar}
-            message="Copied to clipboard"
-          />
-        </Snackbar>
       </span>
     )
   }
 }
 
-export default withStyles(styles)(Copy)
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: {
+      global: bindActionCreators(globalActions, dispatch),
+    },
+  }
+}
+
+export default connect(undefined, mapDispatchToProps)(Copy)

package.json

@@ -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": {

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/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'],
   },
@@ -56,12 +56,7 @@ async function doStuff() {
   await createFakeMousePointer(browser)
 
   // Wait for Username input to be visible
-  let inputField = undefined
-  let start = Date.now()
-  let maxWaitDuration = 30000
-  while ((!inputField || !inputField.isExisting) && ((Date.now() - start) < maxWaitDuration)) {
-    inputField = await browser.$(`//label[contains(text(), "Username")]/..//input`)
-  }
+  await browser.$('//label[contains(text(), "Username")]/..//input')
   const scenes = new SceneBuilder()
   await scenes.record('connect', async () => {
     await connectTo('127.0.0.1', browser)
@@ -69,10 +64,10 @@ async function doStuff() {
   })
 
   await scenes.record('topic_updates', async () => {
-    await showText('Topic overview', 2000, browser, 'top')
-    await sleep(2000)
-    await showText('Indicate topic updates', 2000, browser, 'bottom')
-    await sleep(3000)
+    await showText('Topic overview', 1000, browser, 'top')
+    await sleep(1000)
+    await showText('Indicate topic updates', 1000, browser, 'middle')
+    await sleep(1000)
   })
 
   await scenes.record('numeric_plots', async () => {
@@ -138,7 +133,7 @@ async function doStuff() {
   await scenes.record('customize_subscriptions', async () => {
     await sleep(2000)
     await disconnect(browser)
-    await showText('Customize Subscriptions', 3000, browser, 'top')
+    await showText('Customize Subscriptions', 1000, browser, 'top')
     await showAdvancedConnectionSettings(browser)
   })
 
@@ -157,6 +152,7 @@ async function doStuff() {
   stopMqtt()
 
   fs.writeFileSync('scenes.json', JSON.stringify(scenes.scenes, undefined, '  '))
+  process.exit(0)
 }
 
 doStuff()

src/spec/scenarios/showJsonFormatting.ts

@@ -10,9 +10,11 @@ export async function showJsonFormatting(browser: Browser<void>) {
   const payloadInput = await browser.$('//*[contains(@class, "ace_text-input")]')
   await clickOn(editor, browser)
   await browser.keys(['\uE009', 'A']) // Ctrl + A
+  await sleep(200)
   await browser.keys(['\uE000']) // End keyboard modifier
+  await sleep(200)
   await browser.keys(['\uE003']) // Backspace
-  await sleep(500)
+  await sleep(200)
   await writeTextPayload(payloadInput, '{"action": "setState", "state": "on" }')
   await sleep(300)
   await clickOn(formatJsonButton, browser)

src/spec/scenarios/showMenu.ts

@@ -1,4 +1,4 @@
-import { clickOn, sleep, writeText, expandTopic, moveToCenterOfElement } from '../util'
+import { clickOn, sleep, writeText, expandTopic, moveToCenterOfElement, showText } from '../util'
 import { Browser } from 'webdriverio'
 
 export async function showMenu(browser: Browser<void>) {
@@ -19,5 +19,13 @@ export async function showMenu(browser: Browser<void>) {
   await clickOn(alphabetically, browser)
   await sleep(2000)
 
+  await showText('Dark Mode', 1500, browser, 'top')
+  await sleep(1500)
+  const themeSwitch = await browser.$('//*[contains(text(), "Dark Mode")]/..//input')
+  await clickOn(themeSwitch, browser)
+  await sleep(3000)
+  await browser.saveScreenshot('screen_dark_mode.png')
+  await clickOn(themeSwitch, browser)
+
   await clickOn(menuButton, browser)
 }

src/spec/scenarios/showOffDiffCapability.ts

@@ -14,8 +14,8 @@ export async function showOffDiffCapability(browser: Browser<void>) {
   const diffMessages = await browser.$('#valueRendererDisplayMode-diff')
   await clickOn(diffMessages, browser)
 
-  // const firstEntry = await browser.$('//span[contains(text(), "History")]/../../div/div[1]/div')
-  const secondEntry = await browser.$('//span[contains(text(), "History")]/../../div/div[2]/div')
-  await clickOn(secondEntry, browser)
-  await sleep(2000)
+  // // const firstEntry = await browser.$('//span[contains(text(), "History")]/../../div/div[1]/div')
+  // const secondEntry = await browser.$('//span[contains(text(), "History")]/../../div/div[2]/div')
+  // await clickOn(secondEntry, browser)
+  // await sleep(2000)
 }