webcam: Add support for mobileNativeCamera option to Webcam and Dashboard

packages/@uppy/dashboard/src/Dashboard.jsx

@@ -90,11 +90,12 @@ export default class Dashboard extends UIPlugin {
       showSelectedFiles: true,
       showRemoveButtonAfterComplete: false,
       browserBackButtonClose: false,
+      showNativePhotoCameraButton: false,
+      showNativeVideoCameraButton: false,
       theme: 'light',
       autoOpenFileEditor: false,
       disabled: false,
       disableLocalFiles: false,
-      mobileNativeCamera: false,
     }
 
     // merge default options with the ones set by user
@@ -968,7 +969,8 @@ export default class Dashboard extends UIPlugin {
       maxNumberOfFiles: this.uppy.opts.restrictions.maxNumberOfFiles,
       requiredMetaFields: this.uppy.opts.restrictions.requiredMetaFields,
       showSelectedFiles: this.opts.showSelectedFiles,
-      mobileNativeCamera: this.opts.mobileNativeCamera,
+      showNativePhotoCameraButton: this.opts.showNativePhotoCameraButton,
+      showNativeVideoCameraButton: this.opts.showNativeVideoCameraButton,
       handleCancelRestore: this.handleCancelRestore,
       handleRequestThumbnail: this.handleRequestThumbnail,
       handleCancelThumbnail: this.handleCancelThumbnail,

packages/@uppy/dashboard/src/components/AddFiles.jsx

@@ -234,12 +234,14 @@ class AddFiles extends Component {
     )
   }
 
-  renderSourcesList = (acquirers, disableLocalFiles, mobileNativeCamera) => {
+  renderSourcesList = (acquirers, disableLocalFiles) => {
+    const { showNativePhotoCameraButton, showNativeVideoCameraButton } = this.props
+
     return (
       <div className="uppy-Dashboard-AddFiles-list" role="tablist">
         {!disableLocalFiles && this.renderMyDeviceAcquirer()}
-        {!disableLocalFiles && mobileNativeCamera && this.renderPhotoCamera()}
-        {!disableLocalFiles && mobileNativeCamera && this.renderVideoCamera()}
+        {!disableLocalFiles && showNativePhotoCameraButton && this.renderPhotoCamera()}
+        {!disableLocalFiles && showNativeVideoCameraButton && this.renderVideoCamera()}
         {acquirers.length > 0 && this.renderAcquirers(acquirers)}
       </div>
     )
@@ -273,14 +275,16 @@ class AddFiles extends Component {
   }
 
   render () {
+    const { showNativePhotoCameraButton, showNativeVideoCameraButton } = this.props
+
     return (
       <div className="uppy-Dashboard-AddFiles">
         {this.renderHiddenInput(false, (ref) => { this.fileInput = ref })}
         {this.renderHiddenInput(true, (ref) => { this.folderInput = ref })}
-        {this.renderHiddenCameraInput('photo', (ref) => { this.mobilePhotoFileInput = ref })}
-        {this.renderHiddenCameraInput('video', (ref) => { this.mobileVideoFileInput = ref })}
+        {showNativePhotoCameraButton && this.renderHiddenCameraInput('photo', (ref) => { this.mobilePhotoFileInput = ref })}
+        {showNativeVideoCameraButton && this.renderHiddenCameraInput('video', (ref) => { this.mobileVideoFileInput = ref })}
         {this.renderDropPasteBrowseTagline()}
-        {this.renderSourcesList(this.props.acquirers, this.props.disableLocalFiles, this.props.mobileNativeCamera)}
+        {this.renderSourcesList(this.props.acquirers, this.props.disableLocalFiles)}
         <div className="uppy-Dashboard-AddFiles-info">
           {this.props.note && <div className="uppy-Dashboard-note">{this.props.note}</div>}
           {this.props.proudlyDisplayPoweredByUppy && this.renderPoweredByUppy(this.props)}

packages/@uppy/dashboard/types/index.d.ts

@@ -48,6 +48,8 @@ export interface DashboardOptions extends Options {
   showProgressDetails?: boolean
   showSelectedFiles?: boolean
   showRemoveButtonAfterComplete?: boolean
+  showNativePhotoCameraButton?: boolean
+  showNativeVideoCameraButton?: boolean
   target?: PluginTarget
   theme?: 'auto' | 'dark' | 'light'
   trigger?: string

packages/@uppy/webcam/src/Webcam.jsx

@@ -51,6 +51,11 @@ function getMediaDevices () {
   // eslint-disable-next-line compat/compat
   return navigator.mediaDevices
 }
+
+function isModeAvailable (modes, mode) {
+  return modes.indexOf(mode) !== -1
+}
+
 /**
  * Webcam
  */
@@ -590,9 +595,12 @@ export default class Webcam extends UIPlugin {
   }
 
   install () {
-    if (this.opts.mobileNativeCamera) {
+    const { mobileNativeCamera, modes } = this.opts
+
+    if (mobileNativeCamera) {
       this.uppy.getPlugin('Dashboard').setOptions({
-        mobileNativeCamera: true,
+        showNativeVideoCameraButton: isModeAvailable(modes, 'video-only') || isModeAvailable(modes, 'video-audio'),
+        showNativePhotoCameraButton: isModeAvailable(modes, 'picture'),
       })
       return
     }

packages/@uppy/webcam/types/index.d.ts

@@ -21,7 +21,7 @@ export interface WebcamOptions extends PluginOptions {
     showRecordingLength?: boolean
     preferredImageMimeType?: string
     preferredVideoMimeType?: string
-    mobileNativeCamera?: string
+    mobileNativeCamera?: boolean
 }
 
 declare class Webcam extends UIPlugin<WebcamOptions> {}

website/src/docs/dashboard.md

@@ -97,6 +97,8 @@ uppy.use(Dashboard, {
   onRequestCloseModal: () => this.closeModal(),
   showSelectedFiles: true,
   showRemoveButtonAfterComplete: false,
+  showNativePhotoCameraButton: false,
+  showNativeVideoCameraButton: false,
   locale: defaultLocale,
   browserBackButtonClose: false,
   theme: 'light',

website/src/docs/webcam.md

@@ -159,9 +159,9 @@ If no preferred image mime type is given, the Webcam plugin will prefer types li
 
 ### `mobileNativeCamera`
 
-Replaces Uppy’s custom camera UI on mobile with “Take Picture” and/or “Record Video” buttons that open native device UI for pictures / video (`Function: boolean` || `boolean`, default: `isMobile()`).
+Replaces Uppy’s custom camera UI on mobile with “Take Picture” and / or “Record Video” buttons (depending on [`modes`](#modes) option) that open native device UI for pictures / video (`Function: boolean` || `boolean`, default: `isMobile()`).
 
-Set to a boolean to forcefully enable / disable this feature, or a function which returns a boolean. By default we use  the [`is-mobile`](https://github.com/juliangruber/is-mobile) package.
+Set to a boolean to forcefully enable / disable this feature, or a function which returns a boolean. By default we use the [`is-mobile`](https://github.com/juliangruber/is-mobile) package.
 
 ### `locale: {}`