Update html to use hyperx; use Component where lifecycle needed, refs;

also fix bugs here and there

src/plugins/Dashboard/ActionBrowseTagline.js

@@ -1,4 +1,8 @@
-const html = require('yo-yo')
+const { h } = require('preact')
+const hyperx = require('hyperx')
+const html = hyperx(h)
+
+let inputEl
 
 module.exports = (props) => {
   const input = html`
@@ -9,7 +13,10 @@ module.exports = (props) => {
            type="file" 
            name="files[]" 
            multiple="true"
-           onchange=${props.handleInputChange} />`
+           onchange=${props.handleInputChange} 
+           ref=${(input) => {
+             inputEl = input
+           }} />`
 
   return html`
     <span>
@@ -19,9 +26,7 @@ module.exports = (props) => {
       }
       <button type="button"
               class="UppyDashboard-browse"
-              onclick=${(ev) => {
-                input.click()
-              }}>${props.i18n('browse')}</button>
+              onclick=${(ev) => inputEl.click()}>${props.i18n('browse')}</button>
       ${input}
     </span>
   `

src/plugins/Dashboard/Dashboard.js

@@ -1,11 +1,13 @@
-const html = require('yo-yo')
 const FileList = require('./FileList')
 const Tabs = require('./Tabs')
 const FileCard = require('./FileCard')
-// const UploadBtn = require('./UploadBtn')
 const { isTouchDevice, toArray } = require('../../core/Utils')
 const { closeIcon } = require('./icons')
 
+const { h } = require('preact')
+const hyperx = require('hyperx')
+const html = hyperx(h)
+
 // http://dev.edenspiekermann.com/2016/02/11/introducing-accessible-modal-dialog
 // https://github.com/ghosh/micromodal
 

src/plugins/Dashboard/FileCard.js

@@ -1,7 +1,10 @@
-const html = require('yo-yo')
 const getFileTypeIcon = require('./getFileTypeIcon')
 const { checkIcon } = require('./icons')
 
+const { h } = require('preact')
+const hyperx = require('hyperx')
+const html = hyperx(h)
+
 module.exports = function fileCard (props) {
   const file = props.fileCardFor ? props.files[props.fileCardFor] : false
   const meta = {}
@@ -57,8 +60,14 @@ module.exports = function fileCard (props) {
             <div class="UppyDashboardFileCard-info">
               <fieldset class="UppyDashboardFileCard-fieldset">
                 <label class="UppyDashboardFileCard-label">Name</label>
-                <input class="UppyDashboardFileCard-input" data-name="name" type="text" value="${file.meta.name}"
-                       onkeyup=${tempStoreMetaOrSubmit} />
+                <input class="UppyDashboardFileCard-input" 
+                       type="text"
+                       data-name="name"
+                       value="${file.meta.name || ''}"
+                       placeholder="name"
+                       onkeyup=${tempStoreMetaOrSubmit}
+                       onkeydown=${tempStoreMetaOrSubmit}
+                       onkeypress=${tempStoreMetaOrSubmit} />
               </fieldset>
               ${renderMetaFields(file)}
             </div>

src/plugins/Dashboard/FileItem.js

@@ -1,4 +1,3 @@
-const html = require('yo-yo')
 const { getETA,
          getSpeed,
          prettyETA,
@@ -10,6 +9,10 @@ const FileItemProgress = require('./FileItemProgress')
 const getFileTypeIcon = require('./getFileTypeIcon')
 const { iconEdit, iconCopy, iconRetry } = require('./icons')
 
+const { h } = require('preact')
+const hyperx = require('hyperx')
+const html = hyperx(h)
+
 module.exports = function fileItem (props) {
   const file = props.file
   const acquirers = props.acquirers
@@ -22,7 +25,7 @@ module.exports = function fileItem (props) {
   const error = file.error || false
 
   const fileName = getFileNameAndExtension(file.meta.name).name
-  const truncatedFileName = props.isWide ? truncateString(fileName, 16) : fileName
+  const truncatedFileName = props.isWide ? truncateString(fileName, 14) : fileName
 
   const onPauseResumeCancelRetry = (ev) => {
     if (isUploaded) return
@@ -148,7 +151,7 @@ module.exports = function fileItem (props) {
                        title="Remove file"
                        onclick=${() => props.removeFile(file.id)}>
                  <svg aria-hidden="true" class="UppyIcon" width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
-                    <path stroke="#FFF" stroke-width="0.8px" fill-rule="nonzero" vector-effect="non-scaling-stroke" d="M30 1C14 1 1 14 1 30s13 29 29 29 29-13 29-29S46 1 30 1z" />
+                    <path stroke="#FFF" stroke-width="1" fill-rule="nonzero" vector-effect="non-scaling-stroke" d="M30 1C14 1 1 14 1 30s13 29 29 29 29-13 29-29S46 1 30 1z" />
                     <path fill="#FFF" vector-effect="non-scaling-stroke" d="M42 39.667L39.667 42 30 32.333 20.333 42 18 39.667 27.667 30 18 20.333 20.333 18 30 27.667 39.667 18 42 20.333 32.333 30z"/>
                  </svg>
                </button>`

src/plugins/Dashboard/FileItemProgress.js

@@ -1,4 +1,6 @@
-const html = require('yo-yo')
+const { h } = require('preact')
+const hyperx = require('hyperx')
+const html = hyperx(h)
 
 // http://codepen.io/Harkko/pen/rVxvNM
 // https://css-tricks.com/svg-line-animation-works/

src/plugins/Dashboard/FileList.js

@@ -1,8 +1,11 @@
-const html = require('yo-yo')
 const FileItem = require('./FileItem')
 const ActionBrowseTagline = require('./ActionBrowseTagline')
 const { dashboardBgIcon } = require('./icons')
 
+const { h } = require('preact')
+const hyperx = require('hyperx')
+const html = hyperx(h)
+
 module.exports = (props) => {
   return html`<ul class="UppyDashboard-files
                          ${props.totalFileCount === 0 ? 'UppyDashboard-files--noFiles' : ''}">

src/plugins/Dashboard/Tabs.js

@@ -1,6 +1,10 @@
-const html = require('yo-yo')
 const ActionBrowseTagline = require('./ActionBrowseTagline')
 const { localIcon } = require('./icons')
+const { h } = require('preact')
+const hyperx = require('hyperx')
+const html = hyperx(h)
+
+let inputEl
 
 module.exports = (props) => {
   const isHidden = Object.keys(props.files).length === 0
@@ -19,29 +23,28 @@ module.exports = (props) => {
     `
   }
 
-  const input = html`
-    <input class="UppyDashboard-input"
-          hidden="true"
-          aria-hidden="true" 
-          tabindex="-1" 
-          type="file" 
-          name="files[]" 
-          multiple="true"
-          onchange=${props.handleInputChange} />`
-
   return html`<div class="UppyDashboardTabs">
       <ul class="UppyDashboardTabs-list" role="tablist">
         <li class="UppyDashboardTab" role="presentation">
-          <button type="button" class="UppyDashboardTab-btn"
+          <button type="button" 
+                  class="UppyDashboardTab-btn"
                   role="tab"
                   tabindex="0"
-                  onclick=${(ev) => {
-                    input.click()
-                  }}>
+                  onclick=${ev => inputEl.click()}>
             ${localIcon()}
             <h5 class="UppyDashboardTab-name">${props.i18n('myDevice')}</h5>
           </button>
-          ${input}
+          <input class="UppyDashboard-input"
+                 hidden="true"
+                 aria-hidden="true" 
+                 tabindex="-1" 
+                 type="file" 
+                 name="files[]" 
+                 multiple="true"
+                 onchange=${props.handleInputChange} 
+                 ref=${(input) => {
+                   inputEl = input
+                 }} />
         </li>
         ${props.acquirers.map((target) => {
           return html`<li class="UppyDashboardTab" role="presentation">

src/plugins/Dashboard/UploadBtn.js

@@ -1,21 +0,0 @@
-const html = require('yo-yo')
-const { uploadIcon } = require('./icons')
-
-module.exports = (props) => {
-  props = props || {}
-
-  return html`<button class="UppyButton--circular
-                   UppyButton--blue
-                   UppyDashboard-upload"
-                 type="button"
-                 title="${props.i18n('uploadAllNewFiles')}"
-                 aria-label="${props.i18n('uploadAllNewFiles')}"
-                 onclick=${props.startUpload}>
-            ${uploadIcon()}
-            <sup class="UppyDashboard-uploadCount"
-                 title="${props.i18n('numberOfSelectedFiles')}"
-                 aria-label="${props.i18n('numberOfSelectedFiles')}">
-                  ${props.newFileCount}</sup>
-    </button>
-  `
-}

src/plugins/Dashboard/icons.js

@@ -1,4 +1,6 @@
-const html = require('yo-yo')
+const { h } = require('preact')
+const hyperx = require('hyperx')
+const html = hyperx(h)
 
 // https://css-tricks.com/creating-svg-icon-system-react/
 

src/plugins/Dashboard/index.js

@@ -210,9 +210,12 @@ module.exports = class DashboardUI extends Plugin {
     document.body.classList.add('is-UppyDashboard-open')
     document.body.style.top = `-${this.savedDocumentScrollPosition}px`
 
+    this.updateDashboardElWidth()
+    this.setFocusToFirstNode()
+
     // timeout is needed because yo-yo/morphdom/nanoraf; not needed without nanoraf
-    setTimeout(this.setFocusToFirstNode, 100)
-    setTimeout(this.updateDashboardElWidth, 100)
+    // setTimeout(this.setFocusToFirstNode, 100)
+    // setTimeout(this.updateDashboardElWidth, 100)
   }
 
   closeModal () {

src/plugins/Dropbox/icons.js

@@ -1,4 +1,6 @@
-const html = require('yo-yo')
+const { h } = require('preact')
+const hyperx = require('hyperx')
+const html = hyperx(h)
 
 module.exports = {
   folder: () =>

src/plugins/Dropbox/index.js

@@ -1,9 +1,12 @@
-const html = require('yo-yo')
 const Plugin = require('../../core/Plugin')
 const Provider = require('../Provider')
 const View = require('../Provider/view')
 const icons = require('./icons')
 
+const { h } = require('preact')
+const hyperx = require('hyperx')
+const html = hyperx(h)
+
 module.exports = class Dropbox extends Plugin {
   constructor (uppy, opts) {
     super(uppy, opts)
@@ -28,7 +31,6 @@ module.exports = class Dropbox extends Plugin {
     this.files = []
 
     this.onAuth = this.onAuth.bind(this)
-
     this.render = this.render.bind(this)
 
     // set default options

src/plugins/Dummy.js

@@ -1,6 +1,7 @@
 const Plugin = require('../core/Plugin')
-const html = require('yo-yo')
-// const yo = require('yo-yo')
+const { h } = require('preact')
+const hyperx = require('hyperx')
+const html = hyperx(h)
 
 /**
  * Dummy

src/plugins/FileInput.js

@@ -1,7 +1,9 @@
 const Plugin = require('../core/Plugin')
 const { toArray } = require('../core/Utils')
 const Translator = require('../core/Translator')
-const html = require('yo-yo')
+const { h } = require('preact')
+const hyperx = require('hyperx')
+const html = hyperx(h)
 
 module.exports = class FileInput extends Plugin {
   constructor (uppy, opts) {

src/plugins/GoogleDrive/index.js

@@ -1,8 +1,11 @@
-const html = require('yo-yo')
 const Plugin = require('../../core/Plugin')
 const Provider = require('../Provider')
 const View = require('../Provider/view')
 
+const { h } = require('preact')
+const hyperx = require('hyperx')
+const html = hyperx(h)
+
 module.exports = class GoogleDrive extends Plugin {
   constructor (uppy, opts) {
     super(uppy, opts)

src/plugins/Informer.js

@@ -1,5 +1,8 @@
 const Plugin = require('../core/Plugin')
-const html = require('yo-yo')
+
+const { h } = require('preact')
+const hyperx = require('hyperx')
+const html = hyperx(h)
 
 /**
  * Informer
@@ -14,7 +17,6 @@ module.exports = class Informer extends Plugin {
     this.type = 'progressindicator'
     this.id = this.opts.id || 'Informer'
     this.title = 'Informer'
-    // this.timeoutID = undefined
 
     // set default options
     const defaultOptions = {

src/plugins/Instagram/index.js

@@ -1,8 +1,11 @@
-const html = require('yo-yo')
 const Plugin = require('../../core/Plugin')
 const Provider = require('../Provider')
 const View = require('../Provider/view')
 
+const { h } = require('preact')
+const hyperx = require('hyperx')
+const html = hyperx(h)
+
 module.exports = class Instagram extends Plugin {
   constructor (uppy, opts) {
     super(uppy, opts)
@@ -80,7 +83,7 @@ module.exports = class Instagram extends Plugin {
   }
 
   getItemIcon (item) {
-    return html`<img width="100px" src=${item.images.thumbnail.url}/>`
+    return html`<img width="100" src=${item.images.thumbnail.url}/>`
   }
 
   getItemSubList (item) {
@@ -126,7 +129,7 @@ module.exports = class Instagram extends Plugin {
   }
 
   getNextPagePath () {
-    const { files } = this.uppy.getState()[this.stateId]
+    const { files } = this.getPluginState()
     return `recent?max_id=${this.getItemId(files[files.length - 1])}`
   }
 

src/plugins/ProgressBar.js

@@ -1,5 +1,7 @@
 const Plugin = require('../core/Plugin')
-const html = require('yo-yo')
+const { h } = require('preact')
+const hyperx = require('hyperx')
+const html = hyperx(h)
 
 /**
  * Progress bar

src/plugins/Provider/view/AuthView.js

@@ -1,21 +1,33 @@
-const html = require('yo-yo')
-const onload = require('on-load')
 const LoaderView = require('./Loader')
 
-module.exports = (props) => {
-  const demoLink = props.demo ? html`<button class="UppyProvider-authBtnDemo" onclick=${props.handleDemoAuth}>Proceed with Demo Account</button>` : null
-  const AuthBlock = () => html`
-    <div class="UppyProvider-auth">
-      <h1 class="UppyProvider-authTitle">Please connect your ${props.pluginName}<br> account to select files</h1>
-      <button type="button" class="UppyProvider-authBtn" onclick=${props.handleAuth}>Connect to ${props.pluginName}</button>
-      ${demoLink}
-    </div>
-  `
-  return onload(html`
-    <div style="height: 100%;">
-      ${props.checkAuthInProgress
-        ? LoaderView()
-        : AuthBlock()
-      }
-    </div>`, props.checkAuth, null, `auth${props.pluginName}`)
+const { h, Component } = require('preact')
+const hyperx = require('hyperx')
+const html = hyperx(h)
+
+class AuthView extends Component {
+  componentDidMount () {
+    this.props.checkAuth()
+  }
+
+  render () {
+    const demoLink = this.props.demo ? html`<button class="UppyProvider-authBtnDemo" onclick=${this.props.handleDemoAuth}>Proceed with Demo Account</button>` : null
+    const AuthBlock = () => html`
+      <div class="UppyProvider-auth">
+        <h1 class="UppyProvider-authTitle">Please authenticate with <span class="UppyProvider-authTitleName">${this.props.pluginName}</span><br> to select files</h1>
+        <button type="button" class="UppyProvider-authBtn" onclick=${this.props.handleAuth}>Connect to ${this.props.pluginName}</button>
+        ${demoLink}
+      </div>
+    `
+
+    return html`
+      <div style="height: 100%;">
+        ${this.props.checkAuthInProgress
+          ? LoaderView()
+          : AuthBlock()
+        }
+      </div>
+    `
+  }
 }
+
+module.exports = AuthView

src/plugins/Provider/view/Breadcrumb.js

@@ -1,4 +1,6 @@
-const html = require('yo-yo')
+const { h } = require('preact')
+const hyperx = require('hyperx')
+const html = hyperx(h)
 
 module.exports = (props) => {
   return html`

src/plugins/Provider/view/Breadcrumbs.js

@@ -1,4 +1,6 @@
-const html = require('yo-yo')
+const { h } = require('preact')
+const hyperx = require('hyperx')
+const html = hyperx(h)
 const Breadcrumb = require('./Breadcrumb')
 
 module.exports = (props) => {

src/plugins/Provider/view/Browser.js

@@ -1,7 +1,10 @@
-const html = require('yo-yo')
 const Breadcrumbs = require('./Breadcrumbs')
 const Table = require('./Table')
 
+const { h } = require('preact')
+const hyperx = require('hyperx')
+const html = hyperx(h)
+
 module.exports = (props) => {
   let filteredFolders = props.folders
   let filteredFiles = props.files

src/plugins/Provider/view/Loader.js

@@ -1,4 +1,6 @@
-const html = require('yo-yo')
+const { h } = require('preact')
+const hyperx = require('hyperx')
+const html = hyperx(h)
 
 module.exports = (props) => {
   return html`

src/plugins/Provider/view/Table.js

@@ -1,4 +1,6 @@
-const html = require('yo-yo')
+const { h } = require('preact')
+const hyperx = require('hyperx')
+const html = hyperx(h)
 const Row = require('./TableRow')
 
 module.exports = (props) => {
@@ -17,7 +19,7 @@ module.exports = (props) => {
   return html`
     <table class="BrowserTable" onscroll=${props.handleScroll}>
       <tbody role="listbox" aria-label="List of files from ${props.title}">
-        ${props.folders.map((folder) => {
+        ${props.folders.map(folder => {
           let isDisabled = false
           let isChecked = props.isChecked(folder)
           if (isChecked) {
@@ -25,7 +27,8 @@ module.exports = (props) => {
           }
           return Row({
             title: props.getItemName(folder),
-            active: props.activeRow(folder),
+            type: 'folder',
+            // active: props.activeRow(folder),
             getItemIcon: () => props.getItemIcon(folder),
             handleClick: () => props.handleFolderClick(folder),
             isDisabled: isDisabled,
@@ -34,10 +37,11 @@ module.exports = (props) => {
             columns: props.columns
           })
         })}
-        ${props.files.map((file) => {
+        ${props.files.map(file => {
           return Row({
             title: props.getItemName(file),
-            active: props.activeRow(file),
+            type: 'file',
+            // active: props.activeRow(file),
             getItemIcon: () => props.getItemIcon(file),
             handleClick: () => props.handleFileClick(file),
             isDisabled: false,

src/plugins/Provider/view/TableRow.js

@@ -1,25 +1,48 @@
-const html = require('yo-yo')
+const { h } = require('preact')
+const hyperx = require('hyperx')
+const html = hyperx(h)
 const cuid = require('cuid')
 
 module.exports = (props) => {
-  // const classes = props.active ? 'BrowserTable-row is-active' : 'BrowserTable-row'
   const uniqueId = cuid()
 
+  const checkboxSelect = (ev) => {
+    if (ev.keyCode === 13) {
+      ev.stopPropagation()
+      ev.preventDefault()
+    }
+  }
+
+  const handleItemClick = (ev) => {
+    // when file is clicked, select it, but when folder is clicked, open it
+    if (props.type === 'folder') {
+      return props.handleClick()
+    }
+    props.handleCheckboxClick(ev)
+  }
+
   return html`
-    <tr class="BrowserTable-row">
+    <tr class="BrowserTable-row" onclick=${handleItemClick}>
       <td class="BrowserTable-column">
         <div class="BrowserTable-checkbox">
           <input type="checkbox"
                  role="option" 
                  tabindex="0"
-                 aria-label="Select file: ${props.title}"
+                 aria-label="Select ${props.title}"
                  id=${uniqueId}
-                 checked=${props.isChecked}
-                 disabled=${props.isDisabled}
-                 onchange=${props.handleCheckboxClick} />
+                 ${props.isChecked
+                  ? { 'checked': true }
+                 : {}}
+                 ${props.isDisabled
+                  ? { 'disabled': true }
+                 : {}}
+                 onchange=${props.handleCheckboxClick}
+                 onkeyup=${checkboxSelect}
+                 onkeydown=${checkboxSelect}
+                 onkeypress=${checkboxSelect} />
           <label for=${uniqueId}></label>
         </div>
-        <button type="button" class="BrowserTable-item" aria-label="Select file: ${props.title}" tabindex="0" onclick=${props.handleClick}>
+        <button type="button" class="BrowserTable-item" aria-label="Select ${props.title}" tabindex="0" onclick=${handleItemClick}>
           ${props.getItemIcon()} ${props.title}
         </button>
       </td>

src/plugins/Provider/view/index.js

@@ -2,6 +2,7 @@ const AuthView = require('./AuthView')
 const Browser = require('./Browser')
 const LoaderView = require('./Loader')
 const Utils = require('../../../core/Utils')
+const { h } = require('preact')
 
 /**
  * Class to easily generate generic views for plugins
@@ -555,7 +556,7 @@ module.exports = class View {
     }
 
     if (!authenticated) {
-      return AuthView({
+      return h(AuthView, {
         pluginName: this.plugin.title,
         demo: this.plugin.opts.demo,
         checkAuth: this.checkAuth,

src/plugins/StatusBar/StatusBar.js

@@ -1,6 +1,9 @@
-const html = require('yo-yo')
 const throttle = require('lodash.throttle')
 
+const { h } = require('preact')
+const hyperx = require('hyperx')
+const html = hyperx(h)
+
 function progressDetails (props) {
   return html`<span>${props.totalProgress || 0}%・${props.complete} / ${props.inProgress}・${props.totalUploadedSize} / ${props.totalSize}・↑ ${props.totalSpeed}/s・${props.totalETA}</span>`
 }
@@ -15,10 +18,6 @@ const STATE_POSTPROCESSING = 'postprocessing'
 const STATE_COMPLETE = 'complete'
 
 function getUploadingState (props, files) {
-  // if (props.error) {
-  //   return STATE_ERROR
-  // }
-
   if (props.isAllErrored) {
     return STATE_ERROR
   }

src/plugins/Webcam/CameraIcon.js

@@ -1,4 +1,6 @@
-const html = require('yo-yo')
+const { h } = require('preact')
+const hyperx = require('hyperx')
+const html = hyperx(h)
 
 module.exports = (props) => {
   return html`<svg aria-hidden="true" class="UppyIcon" width="100" height="77" viewBox="0 0 100 77">

src/plugins/Webcam/CameraScreen.js

@@ -1,4 +1,6 @@
-const html = require('yo-yo')
+const { h, Component } = require('preact')
+const hyperx = require('hyperx')
+const html = hyperx(h)
 const SnapshotButton = require('./SnapshotButton')
 const RecordButton = require('./RecordButton')
 
@@ -6,40 +8,42 @@ function isModeAvailable (modes, mode) {
   return modes.indexOf(mode) !== -1
 }
 
-module.exports = (props) => {
-  const src = props.src || ''
-  let video
-
-  if (props.useTheFlash) {
-    video = props.getSWFHTML()
-  } else {
-    video = html`<video class="UppyWebcam-video" autoplay muted src="${src}"></video>`
+class CameraScreen extends Component {
+  constructor (props) {
+    super(props)
+    this.src = this.props.src || ''
+    this.shouldShowRecordButton = this.props.supportsRecording && (
+      isModeAvailable(this.props.modes, 'video-only') ||
+      isModeAvailable(this.props.modes, 'audio-only') ||
+      isModeAvailable(this.props.modes, 'video-audio')
+    )
+    this.shouldShowSnapshotButton = isModeAvailable(this.props.modes, 'picture')
   }
 
-  const shouldShowRecordButton = props.supportsRecording && (
-    isModeAvailable(props.modes, 'video-only') ||
-    isModeAvailable(props.modes, 'audio-only') ||
-    isModeAvailable(props.modes, 'video-audio')
-  )
+  componentDidMount () {
+    this.props.onFocus()
+    // const recordButton = el.querySelector('.UppyWebcam-recordButton')
+    // if (recordButton) recordButton.focus()
+  }
 
-  const shouldShowSnapshotButton = isModeAvailable(props.modes, 'picture')
+  componentWillUnmount () {
+    this.props.onStop()
+  }
 
-  return html`
-    <div class="UppyWebcam-container" onload=${(el) => {
-      props.onFocus()
-      const recordButton = el.querySelector('.UppyWebcam-recordButton')
-      if (recordButton) recordButton.focus()
-    }} onunload=${(el) => {
-      props.onStop()
-    }}>
-      <div class='UppyWebcam-videoContainer'>
-        ${video}
+  render () {
+    return html`
+      <div class="UppyWebcam-container">
+        <div class="UppyWebcam-videoContainer">
+          <video class="UppyWebcam-video" autoplay muted src="${this.src}"></video>
+        </div>
+        <div class="UppyWebcam-buttonContainer">
+          ${this.shouldShowSnapshotButton ? SnapshotButton(this.props) : null}
+          ${this.shouldShowRecordButton ? RecordButton(this.props) : null}
+        </div>
+        <canvas class="UppyWebcam-canvas" style="display: none;"></canvas>
       </div>
-      <div class='UppyWebcam-buttonContainer'>
-        ${shouldShowRecordButton ? RecordButton(props) : null}
-        ${shouldShowSnapshotButton ? SnapshotButton(props) : null}
-      </div>
-      <canvas class="UppyWebcam-canvas" style="display: none;"></canvas>
-    </div>
-  `
+    `
+  }
 }
+
+module.exports = CameraScreen

src/plugins/Webcam/PermissionsScreen.js

@@ -1,4 +1,6 @@
-const html = require('yo-yo')
+const { h } = require('preact')
+const hyperx = require('hyperx')
+const html = hyperx(h)
 
 module.exports = (props) => {
   return html`

src/plugins/Webcam/RecordButton.js

@@ -1,4 +1,6 @@
-const html = require('yo-yo')
+const { h } = require('preact')
+const hyperx = require('hyperx')
+const html = hyperx(h)
 const RecordStartIcon = require('./RecordStartIcon')
 const RecordStopIcon = require('./RecordStopIcon')
 

src/plugins/Webcam/RecordStartIcon.js

@@ -1,4 +1,6 @@
-const html = require('yo-yo')
+const { h } = require('preact')
+const hyperx = require('hyperx')
+const html = hyperx(h)
 
 module.exports = (props) => {
   return html`<svg aria-hidden="true" class="UppyIcon" width="100" height="100" viewBox="0 0 100 100">

src/plugins/Webcam/RecordStopIcon.js

@@ -1,4 +1,6 @@
-const html = require('yo-yo')
+const { h } = require('preact')
+const hyperx = require('hyperx')
+const html = hyperx(h)
 
 module.exports = (props) => {
   return html`<svg aria-hidden="true" class="UppyIcon" width="100" height="100" viewBox="0 0 100 100">

src/plugins/Webcam/SnapshotButton.js

@@ -1,4 +1,6 @@
-const html = require('yo-yo')
+const { h } = require('preact')
+const hyperx = require('hyperx')
+const html = hyperx(h)
 const CameraIcon = require('./CameraIcon')
 
 module.exports = function SnapshotButton ({ onSnapshot }) {

src/plugins/Webcam/WebcamIcon.js

@@ -1,4 +1,6 @@
-const html = require('yo-yo')
+const { h } = require('preact')
+const hyperx = require('hyperx')
+const html = hyperx(h)
 
 module.exports = (props) => {
   return html`

src/plugins/Webcam/index.js

@@ -1,3 +1,4 @@
+const { h } = require('preact')
 const Plugin = require('../../core/Plugin')
 const Translator = require('../../core/Translator')
 const {
@@ -168,7 +169,9 @@ module.exports = class Webcam extends Plugin {
       })
       return this.getVideo()
     }).then((file) => {
-      return this.uppy.addFile(file)
+      this.uppy.addFile(file)
+      const dashboard = this.uppy.getPlugin('Dashboard')
+      if (dashboard) dashboard.hideAllPanels()
     }).then(() => {
       this.recordingChunks = null
       this.recorder = null
@@ -301,7 +304,7 @@ module.exports = class Webcam extends Plugin {
       return PermissionsScreen(webcamState)
     }
 
-    return CameraScreen(Object.assign({}, webcamState, {
+    return h(CameraScreen, Object.assign({}, webcamState, {
       onSnapshot: this.takeSnapshot,
       onStartRecording: this.startRecording,
       onStopRecording: this.stopRecording,