Fix #53 Make url property reactive

safrazik · Apr 25, 2020 · a9f9e48 · a9f9e48
1 parent 8fee733
commit a9f9e48
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 10 deletions.
diff --git a/src/components/vue-file-preview-mixin.ts b/src/components/vue-file-preview-mixin.ts
@@ -20,7 +20,7 @@ export default Vue.extend({
       if (!this.linkable) {
         return false;
       }
-      return !!this.fileRecord.url && !this.fileRecord.isPlayableVideo() && !this.fileRecord.isPlayableAudio();
+      return !!this.fileRecord.url() && !this.fileRecord.isPlayableVideo() && !this.fileRecord.isPlayableAudio();
     },
   },
   methods: {
@@ -73,7 +73,7 @@ export default Vue.extend({
       player.controls = true;
       // player.style.width = this.prvWidth + 'px';
       wrapper.appendChild(player);
-      const url = fileRecord.url || createObjectURL(fileRecord.file);
+      const url = (fileRecord.url() as string) || createObjectURL(fileRecord.file);
       player.src = url;
       player.play();
       fileRecord.isPlayingAv = true;

diff --git a/src/lib/file-record.ts b/src/lib/file-record.ts
@@ -30,7 +30,7 @@ interface ErrorFlags {
 }
 
 interface RawFileRecord {
-  url: string | null;
+  url: string | ((value?: string) => string | void);
   urlResized: string | null;
   src: () => any;
   name: any;
@@ -72,7 +72,7 @@ class FileRecord {
     isSync = false,
   ): FileRecord | Promise<FileRecord> {
     const fileRecord = new FileRecord(rawFileRecord, options);
-    const promise = fileRecord.setUrl(rawFileRecord.url);
+    const promise = fileRecord.setUrl(rawFileRecord.url as string);
     rawFileRecord.progress = fileRecord.progress.bind(fileRecord); // convert it as a function
     rawFileRecord.src = fileRecord.src.bind(fileRecord);
     rawFileRecord.name = fileRecord.name.bind(fileRecord); // convert it as a function
@@ -129,7 +129,7 @@ class FileRecord {
     return Promise.all(promises);
   }
 
-  public url: null | string = null;
+  public urlValue: null | string = null;
   public urlResized: null | string = null;
   public image: HTMLImageElement | {} = {};
   public isPlayingAv: boolean = false;
@@ -162,7 +162,7 @@ class FileRecord {
   public calculateAverageColor: boolean;
 
   public constructor(data: RawFileRecord, options: Options) {
-    this.url = null;
+    this.urlValue = null;
     this.urlResized = null;
     this.lastKnownSrc = null;
     this.image = {};
@@ -220,9 +220,16 @@ class FileRecord {
     return this.progressInternal || 0;
   }
 
+  public url(value?: string): string | undefined | Promise<this> {
+    if (value !== undefined) {
+      return this.setUrl(value);
+    }
+    return this.urlValue || undefined;
+  }
+
   public src(): string {
     if (this.isImage()) {
-      return this.urlResized || this.url || (this.file as any).url;
+      return this.urlResized || this.urlValue || (this.file as any).url;
     }
     if (this.isPlayableVideo()) {
       return this.videoThumbnail || '';
@@ -310,7 +317,7 @@ class FileRecord {
   }
 
   public setUrl(url: string | null): Promise<this> {
-    this.url = url;
+    this.urlValue = url;
     return new Promise((resolve, reject) => {
       if (this.isImage()) {
         this.resizeImage().then(
@@ -344,7 +351,7 @@ class FileRecord {
   public resizeImage(): Promise<this> {
     return new Promise((resolve, reject) => {
       utils
-        .resizeImage(this.thumbnailSize, this.file, this.url as string, this.calculateAverageColor)
+        .resizeImage(this.thumbnailSize, this.file, this.urlValue as string, this.calculateAverageColor)
         .then((resized) => {
           this.imageResized(resized);
           resolve(this);
@@ -382,7 +389,8 @@ class FileRecord {
 
   public toRaw(): RawFileRecord {
     const raw = this.raw || {};
-    raw.url = this.url;
+    // raw.url = this.urlValue;
+    raw.url = this.url.bind(this);
     raw.urlResized = this.urlResized;
     raw.src = this.src.bind(this);
     raw.name = this.name.bind(this);