filesafe-embed - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

app/components/FilesView.js

@@ -9,25 +9,40 @@ import React from 'react';
     this.state = {};
+    this.delegate = FilesafeManager.get().getDelegate();
   }
 
-  downloadFile = async (fileDescriptor) => {
-    if(this.isMobile) {
-      let platform = FilesafeManager.get().filesafe.getPlatform();
-      let display = platform == "ios" ? "iOS" : "Android";
-      alert(`Downloading files is not currently supported on ${display}.`)
-      return;
+  get supportsPreviews() {
+    if(this._supportsPreview !== undefined) {
+      return this._supportsPreview;
     }
+    
+    let env = FilesafeManager.get().filesafe.getEnvironment();
+    // May be undefined if bridge hasn't been established yet.
+    if(env == undefined) {
+      return false;
+    }
 
+    // Only the web app supports previews, as temporary object urls are created for previews,
+    // and temp urls only live in the same browser scope as client. In desktop, the electron scope
+    // is different from the the browser scope, and on mobile, the web view scope will be different than
+    // the user's browser. On web, since we open the preview in the same browser, it will work.
+    this._supportsPreview = env == "web";
+  }
+
+  setStatusForFile = (file, status, hasSpinner) => {
+    this.setState({fileStatusFile: file, fileStatus: status, hasStatusSpinner: hasSpinner});
+  }
+
+  decryptFile = async (fileDescriptor) => {
     let integration = FilesafeManager.get().filesafe.integrationForFileDescriptor(fileDescriptor);
     let name = FilesafeManager.get().filesafe.displayStringForIntegration(integration);
-    this.setState({status: `Downloading from ${name}...`});
+    this.setStatusForFile(fileDescriptor, `Downloading from ${name}...`, true);
 
     return FilesafeManager.get().filesafe.downloadFileFromDescriptor(fileDescriptor).then((item) => {
-      this.setState({status: "Decrypting..."});
+      this.setStatusForFile(fileDescriptor, "Decrypting...", true);
       return FilesafeManager.get().filesafe.decryptFile({fileDescriptor: fileDescriptor, fileItem: item}).then((data) => {
-        FilesafeManager.get().filesafe.downloadBase64Data({
+        return {
           base64Data: data.decryptedData,
           fileName: fileDescriptor.content.fileName,
           fileType: fileDescriptor.content.fileType
-        });
-        this.setState({status: null, selectedFile: null});
+        };
       }).catch((decryptionError) => {
@@ -43,2 +58,32 @@ console.error("filesafe-embed | error decrypting file:", decryptionError);
 
+  downloadFile = async (fileDescriptor) => {
+    if(this.isMobile) {
+      let platform = FilesafeManager.get().filesafe.getPlatform();
+      let display = platform == "ios" ? "iOS" : "Android";
+      alert(`Downloading files is not currently supported on ${display}.`)
+      return;
+    }
+
+    let fileData = await this.decryptFile(fileDescriptor);
+    FilesafeManager.get().filesafe.downloadBase64Data(fileData);
+    this.setStatusForFile(fileDescriptor, null);
+  }
+
+  previewFile = async (fileDescriptor) => {
+    // Only supported on web, and not mobile or desktop. Preview button is not rendered on those platforms.
+    let fileData = await this.decryptFile(fileDescriptor);
+    let url = FilesafeManager.get().filesafe.createTemporaryFileUrl({base64Data: fileData.base64Data, dataType: fileData.fileType});
+    this.setStatusForFile(fileDescriptor, null);
+    this.setState({previewUrl: url, previewingFile: fileDescriptor});
+  }
+
+  onClickPreview = () => {
+    // We'll try revoking here in a timeout, but in browsers, since it opens in another tab, this code may not execute.
+    // In that case, we'll revoke again when the current file is collapsed or another is selected.
+    // Actually I've found that with a timeout of 100, it doesn't execute, but if you increase to 250-500, it does.
+    setTimeout(() => {
+      this.revokePreview();
+    }, 500)
+  }
+
   selectFile = (event, metadata) => {
@@ -49,11 +94,23 @@ var element = event.target;
       this.setState({selectedFile: null})
+      this.delegate.onSelectFile && this.delegate.onSelectFile(null);
     } else {
       this.setState({selectedFile: metadata});
+      this.delegate.onSelectFile && this.delegate.onSelectFile(metadata);
     }
+
+    // We want to release previews after another file is selected or when the current file is collapsed.
+    this.revokePreview();
   }
 
+  revokePreview() {
+    if(this.state.previewUrl) {
+      FilesafeManager.get().filesafe.revokeTempUrl(this.state.previewUrl);
+    }
+    this.setState({previewUrl: null, previewingFile: null});
+  }
+
   flashError(error) {
-    this.setState({status: error, statusClass: "danger"});
+    this.setStatusForFile(error, false);
     setTimeout(() => {
-      this.setState({status: null, statusClass: null});
+      this.setStatusForFile(null);
     }, 2500);
@@ -88,5 +145,11 @@ }
 
+    let previewReady = this.state.previewUrl && this.state.previewingFile == file;
+    // We should make Files their own component and have their own state but for now we're doing it this way.
+    let hasStatus = this.state.fileStatusFile == file && this.state.fileStatus;
+    let hasSpinner = this.state.hasStatusSpinner;
+
     return (
       <div className={"file-item-container " + (this.isFileSelected(file) ? "expanded" : "")}>
         <div onClick={(event) => {this.selectFile(event, file)}} className={"file-item-button sk-button info " + (this.isFileSelected(file) ? "selected" : undefined)}>
+
           <div className="sk-label">
@@ -96,2 +159,11 @@ {file.content.fileName}
 
+          {hasStatus &&
+            <div className="file-download-status sk-horizontal-group">
+              {hasSpinner &&
+                <div className="sk-spinner x-small" />
+              }
+              <div className={"file-status-label"}>{this.state.fileStatus}</div>
+           </div>
+          }
+
           {this.isFileSelected(file) &&
@@ -108,3 +180,23 @@ <div className="file-item-options-wrapper">
                   <div className="sk-app-bar-item border"></div>
+                  
+                  {this.supportsPreviews && previewReady && 
+                    <a className="sk-app-bar-item" href={this.state.previewUrl} onClick={(e) => {e.stopPropagation(); this.onClickPreview()}} target="_blank">
+                      <div className={"sk-label contrast"}>
+                        Open Preview
+                      </div>
+                    </a>
+                  }
 
+                  {this.supportsPreviews && !previewReady && 
+                    <div onClick={(e) => {e.stopPropagation(); this.previewFile(file)}} className="sk-app-bar-item">
+                      <div className={"sk-label contrast " + (this.isMobile ? "disabled" : "")}>
+                        Preview
+                      </div>
+                    </div>                    
+                  }
+
+                  {this.supportsPreviews &&
+                    <div className="sk-app-bar-item border"></div>
+                  }
+
                   <div onClick={(e) => {e.stopPropagation(); this.copyInsertionLink(file)}} className="sk-app-bar-item">
@@ -137,25 +229,4 @@ <div className="sk-label contrast">
   render() {
-    var statusClass = this.state.statusClass ? this.state.statusClass : "info";
-    var hasSpinner = statusClass == "info";
-
-    var elements = [];
-
-    if(this.state.status) {
-      elements.push((
-        <div id="file-download-status" className="sk-horizontal-group">
-          {hasSpinner &&
-            <div className="sk-spinner info small" />
-          }
-          <div className={statusClass}>{this.state.status}</div>
-        </div>
-      ))
-    }
-
-    var fileElements = this.props.files.map((file) => {return this.elementForFile(file)});
-    if(fileElements.length > 0) {
-      elements = elements.concat(fileElements);
-    }
-
-    return elements;
+    return this.props.files.map((file) => {return this.elementForFile(file)});
   }
 }

app/FilesafeEmbed.js

@@ -9,4 +9,5 @@ import React from 'react';
   // Called by consumer
-  static renderInElement(element, filesafe) {
+  static renderInElement(element, filesafe, delegate) {
     FilesafeManager.get().setFilesafeInstance(filesafe);
+    FilesafeManager.get().setDelegate(delegate);
     ReactDOM.render(React.createElement(FilesafeEmbed), element);
@@ -13,0 +14,0 @@ }

app/lib/FilesafeManager.js

@@ -29,2 +29,10 @@ import Filesafe from "filesafe-js";
 
+  setDelegate(delegate) {
+    this.delegate = delegate;
+  }
+
+  getDelegate() {
+    return this.delegate || {};
+  }
+
   addDataChangeObserver(observer) {
@@ -31,0 +39,0 @@ this.dataChangeObservers.push(observer);

package.json

 {
   "name": "filesafe-embed",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "main": "dist/dist.js",
@@ -41,4 +41,4 @@ "author": "Standard Notes",
   "dependencies": {
-    "filesafe-js": "^1.0.1"
+    "filesafe-js": "1.0.3"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1147509

increased by1.13%

Lines of code

19201

increased by1.1%

Dependency changes

• + Addedfilesafe-js@1.0.3(transitive)

• - Removedfilesafe-js@1.0.5(transitive)

• Updatedfilesafe-js@1.0.3