1 files changed, 10 insertions, 28 deletions

diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index e686368e9..ef66c2b11 100644
--- a/src/client/views/nodes/ComparisonBox.tsx
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -5,7 +5,7 @@ import { IReactionDisposer, action, computed, makeObservable, observable, reacti
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import ReactLoading from 'react-loading';
-import { returnFalse, returnNone, returnTrue, returnZero, setupMoveUpEvents } from '../../../ClientUtils';
+import { imageUrlToBase64, returnFalse, returnNone, returnTrue, returnZero, setupMoveUpEvents } from '../../../ClientUtils';
 import { emptyFunction } from '../../../Utils';
 import { Doc, Opt } from '../../../fields/Doc';
 import { DocData } from '../../../fields/DocSymbols';
@@ -44,7 +44,6 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     constructor(props: FieldViewProps) {
         super(props);
         makeObservable(this);
-        this.setListening();
     }
 
     @observable private _inputValue = '';
@@ -366,7 +365,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                 'Content-Type': 'application/json',
             },
         });
-        this.Document.phoneticTranscription = response.data['transcription'];
+        this.Document.phoneticTranscription = response.data.transcription;
     };
 
     /**
@@ -375,7 +374,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
      * @returns
      */
     getYouTubeVideoId = (url: string) => {
-        const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=|\?v=)([^#\&\?]*).*/;
+        const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=|\?v=)([^#&?]*).*/;
         const match = url.match(regExp);
         return match && match[2].length === 11 ? match[2] : null;
     };
@@ -393,7 +392,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                 'Content-Type': 'application/json',
             },
         });
-        return response.data['transcription'];
+        return response.data.transcription;
     };
 
     createFlashcardPile(collectionArr: Doc[], gpt: boolean) {
@@ -403,9 +402,9 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
             _layout_fitWidth: false,
             _layout_autoHeight: true,
         });
-        newCol['x'] = this.layoutDoc['x'];
-        newCol['y'] = NumCast(this.layoutDoc['y']) + 50;
-        newCol.type_collection = 'carousel';
+        newCol.x = this.layoutDoc.x;
+        newCol.y = NumCast(this.layoutDoc.y) + 50;
+        newCol.type_collection = CollectionViewType.Carousel as string;
         for (let i = 0; i < collectionArr.length; i++) {
             DocCast(collectionArr[i])[DocData].embedContainer = newCol;
         }
@@ -600,34 +599,17 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                 _height: 150,
                 title: '--snapshot' + NumCast(this.layoutDoc._layout_currentTimecode) + ' image-',
             });
-            imageSnapshot['x'] = this.layoutDoc['x'];
-            imageSnapshot['y'] = this.layoutDoc['y'];
+            imageSnapshot.x = this.layoutDoc.x;
+            imageSnapshot.y = this.layoutDoc.y;
             return imageSnapshot;
         } catch (error) {
             console.log(error);
         }
     };
 
-    static imageUrlToBase64 = async (imageUrl: string): Promise<string> => {
-        try {
-            const response = await fetch(imageUrl);
-            const blob = await response.blob();
-
-            return new Promise((resolve, reject) => {
-                const reader = new FileReader();
-                reader.readAsDataURL(blob);
-                reader.onloadend = () => resolve(reader.result as string);
-                reader.onerror = error => reject(error);
-            });
-        } catch (error) {
-            console.error('Error:', error);
-            throw error;
-        }
-    };
-
     getImageDesc = async (u: string) => {
         try {
-            const hrefBase64 = await ComparisonBox.imageUrlToBase64(u);
+            const hrefBase64 = await imageUrlToBase64(u);
             const response = await gptImageLabel(hrefBase64, 'Answer the following question as a short flashcard response. Do not include a label.' + (this.dataDoc.text as RichTextField)?.Text);
 
             DocCast(this.dataDoc[this.props.fieldKey + '_0'])[DocData].text = response;