Merge ae5597e into d17d0e1

res/menu/app.en.yml

@@ -40,11 +40,15 @@ en:
             - label: 'Clear List'
               command: 'app:clear-recent-projects'
         - type: 'separator'
-        - &import
-          label: 'Import Photos…'
-          command: 'app:import-photos'
+        - &import-files
+          label: 'Import Files…'
+          command: 'app:import-files'
           accelerator: 'CmdOrCtrl+Shift+I'
           condition: 'project'
+        - &import-url
+          label: 'Import URL…'
+          command: 'app:import-url'
+          condition: 'project'
         - &consolidate
           label: 'Consolidate Photo Library'
           command: 'app:consolidate-photo-library'
@@ -252,7 +256,8 @@ en:
         - *open-new
         - *recent
         - type: 'separator'
-        - *import
+        - *import-files
+        - *import-url
         - *consolidate
         - type: 'separator'
         - *print

src/actions/item.js

@@ -20,7 +20,13 @@ module.exports = {
     return {
       type: ITEM.IMPORT,
       payload,
-      meta: { cmd: 'project', history: 'add', search: true, ...meta }
+      meta: {
+        cmd: 'project',
+        history: 'add',
+        search: true,
+        prompt: true,
+        ...meta
+      }
     }
   },
 

src/browser/tropy.js

@@ -132,7 +132,7 @@ class Tropy extends EventEmitter {
       case '.jpeg':
       case '.png':
       case '.svg':
-        this.import([file])
+        this.import({ files: [file] })
         break
       case '.ttp':
         this.importTemplates([file])
@@ -217,8 +217,8 @@ class Tropy extends EventEmitter {
     this.emit('app:reload-menu')
   }
 
-  import(files) {
-    return this.dispatch(act.item.import({ files }), this.wm.current())
+  import(...args) {
+    return this.dispatch(act.item.import(...args), this.wm.current())
   }
 
   importTemplates(files) {
@@ -343,9 +343,12 @@ class Tropy extends EventEmitter {
     this.on('app:optimize-project', () =>
       this.dispatch(act.project.optimize(), this.wm.current()))
 
-    this.on('app:import-photos', () =>
+    this.on('app:import-files', () =>
       this.import())
 
+    this.on('app:import-url', () =>
+      this.import({}, { prompt: 'url' }))
+
     this.on('app:rename-project', (win) =>
       this.dispatch(act.edit.start({ project: { name: true } }), win))
 

src/commands/item.js

@@ -51,20 +51,20 @@ class Create extends Command {
 }
 
 class Import extends ImportCommand {
-  static get ACTION() { return ITEM.IMPORT }
+  static get ACTION() {
+    return ITEM.IMPORT
+  }
 
   *exec() {
     let { db } = this.options
-    let { files, list } = this.action.payload
-
+    let { payload, meta } = this.action
+    let { files, list } = payload
     let items = []
 
-    if (!files) {
-      this.isInteractive = true
-      files = yield call(open.items)
-    }
-
-    if (!files) return []
+    if (!files && meta.prompt)
+      files = yield this.prompt(meta.prompt)
+    if (!files)
+      return []
 
     yield put(act.nav.update({ mode: MODE.PROJECT, query: '' }))
 
@@ -141,6 +141,20 @@ class Import extends ImportCommand {
 
     return items
   }
+
+  *prompt(type) {
+    try {
+      this.suspend()
+      switch (type) {
+        case 'url':
+        default:
+          return yield call(open.items)
+      }
+
+    } finally {
+      this.resume()
+    }
+  }
 }
 
 class Delete extends Command {

src/commands/photo.js

@@ -106,7 +106,10 @@ class Consolidate extends ImportCommand {
 
             let path = yield this.resolve(photo)
             if (path) {
-              image = yield call(Image.open, { path, page: photo.page })
+              image = yield call(Image.open, {
+                path,
+                page: photo.page,
+                protocol: 'file' })
             }
           }
 
@@ -282,10 +285,10 @@ class Duplicate extends ImportCommand {
     let photos = []
 
     for (let i = 0; i < total; ++i) {
-      const { template, path, page } = originals[i]
+      const { template, path, page, protocol } = originals[i]
 
       try {
-        let image = yield call(Image.open, { path, page })
+        let image = yield call(Image.open, { path, page, protocol })
 
         let photo = yield call(db.transaction, tx =>
           mod.photo.create(tx, { base, template }, {

src/components/esper/esper.js

@@ -223,15 +223,9 @@ class Esper extends React.PureComponent {
   }
 
   getSource(photo, { cache } = this.props) {
-    switch (photo.mimetype) {
-      case MIME.PDF:
-      case MIME.HEIC:
-      case MIME.HEIF:
-      case MIME.TIFF:
-        return Cache.url(cache, photo.id, 'full', photo.mimetype)
-      default:
-        return `${photo.protocol}://${photo.path}`
-    }
+    return (photo.protocol !== 'file' || !MIME.WEB[photo.mimetype]) ?
+      Cache.url(cache, photo.id, 'full', photo.mimetype) :
+      `${photo.protocol}://${photo.path}`
   }
 
   getZoomToFill(screen, { width } = this.state, props = this.props) {

src/components/list/node.js

@@ -351,7 +351,7 @@ const DropTargetSpec = {
 
     switch (type) {
       case NativeTypes.FILE:
-        return !!item.types.find(t => isImageSupported({ type: t }))
+        return !!item.types.find(isImageSupported)
       case DND.LIST:
         return !(props.isDragging || props.isDraggingParent)
       default:

src/components/project/view.js

@@ -6,10 +6,11 @@ const { DropTarget, NativeTypes } = require('../dnd')
 const { ItemGrid, ItemTable } = require('../item')
 const { ProjectSidebar } = require('./sidebar')
 const { ProjectToolbar } = require('./toolbar')
-const { pick } = require('../../common/util')
+const { blank, pick } = require('../../common/util')
 const { array, bool, func, object, number } = require('prop-types')
 const { isImageSupported } = require('../../constants/mime')
 const { ITEM } = require('../../constants/sass')
+const { extname } = require('path')
 
 
 class ProjectView extends React.Component {
@@ -140,18 +141,38 @@ class ProjectView extends React.Component {
 
 const spec = {
   drop({ nav, onItemImport }, monitor) {
-    const files = monitor
-      .getItem()
-      .files
-      .filter(isImageSupported)
-      .map(file => file.path)
-
-    onItemImport({ files, list: nav.list })
-    return { files }
+    let type = monitor.getItemType()
+    let item = monitor.getItem()
+    let files
+
+    switch (type) {
+      case NativeTypes.FILE:
+        files = item.files.filter(isImageSupported).map(f => f.path)
+        break
+      case NativeTypes.URL:
+        files = item.urls.filter(url => isImageSupported(extname(url)))
+        break
+    }
+
+    if (!blank(files)) {
+      onItemImport({ files, list: nav.list })
+      return { files }
+    }
   },
 
   canDrop(_, monitor) {
-    return !!monitor.getItem().types.find(type => isImageSupported({ type }))
+    let type = monitor.getItemType()
+    let item = monitor.getItem()
+
+    switch (type) {
+      case NativeTypes.FILE:
+        return !!item.types.find(isImageSupported)
+      case NativeTypes.URL:
+        return true
+      default:
+        return false
+    }
+
   }
 }
 
@@ -162,5 +183,8 @@ const collect = (connect, monitor) => ({
 })
 
 module.exports = {
-  ProjectView: DropTarget(NativeTypes.FILE, spec, collect)(ProjectView)
+  ProjectView: DropTarget([
+    NativeTypes.FILE,
+    NativeTypes.URL
+  ], spec, collect)(ProjectView)
 }

src/constants/mime.js

@@ -16,7 +16,21 @@ const MIME = {
   WEBP: 'image/webp'
 }
 
-const SUPPORTED_IMAGE = {
+MIME.EXT = [
+  '.gif',
+  '.heic',
+  '.heif',
+  '.jpg',
+  '.jpeg',
+  '.pdf',
+  '.png',
+  '.svg',
+  '.tif',
+  '.tiff',
+  '.webp'
+]
+
+const SUPPORTED = {
   [MIME.GIF]: true,
   [MIME.HEIC]: true,
   [MIME.HEIC_SEQ]: true,
@@ -30,6 +44,17 @@ const SUPPORTED_IMAGE = {
   [MIME.WEBP]: true
 }
 
-MIME.isImageSupported = (file) => SUPPORTED_IMAGE[file.type]
+MIME.EXT.forEach(ext => SUPPORTED[ext] = true)
+
+MIME.WEB = {
+  [MIME.JPG]: true,
+  [MIME.PNG]: true,
+  [MIME.WEBP]: true,
+  [MIME.GIF]: true,
+  [MIME.SVG]: true
+}
+
+MIME.isImageSupported = (file) =>
+  (typeof file === 'string') ? SUPPORTED[file] : SUPPORTED[file.type]
 
 module.exports = MIME

src/dialog.js

@@ -4,18 +4,7 @@ const assert = require('assert')
 const { ipcRenderer: ipc, shell, clipboard } = require('electron')
 const { counter, get } = require('./common/util')
 const { crashReport, warn } = require('./common/log')
-
-const IMAGE_EXTENSIONS = [
-  'gif',
-  'jpg',
-  'jpeg',
-  'pdf',
-  'png',
-  'svg',
-  'tif',
-  'tiff',
-  'webp'
-]
+const { MIME } = require('./constants')
 
 let seq
 let pending
@@ -116,7 +105,7 @@ function open(options) {
 open.items = (options) => open({
   filters: [{
     name: t('dialog', 'filter', 'items'),
-    extensions: [...IMAGE_EXTENSIONS, 'json', 'jsonld']
+    extensions: [...MIME.EXT.map(x => x.slice(1)), 'json', 'jsonld']
   }],
   defaultPath: ARGS.pictures,
   properties: ['openFile', 'multiSelections'],
@@ -126,7 +115,7 @@ open.items = (options) => open({
 open.images = (options) => open({
   filters: [{
     name: t('dialog', 'filter', 'images'),
-    extensions: IMAGE_EXTENSIONS
+    extensions: MIME.EXT.map(x => x.slice(1))
   }],
   defaultPath: ARGS.pictures,
   properties: ['openFile', 'multiSelections'],