From c0b14da1c8f0735e6682ab825e46ccaa4f5e9df2 Mon Sep 17 00:00:00 2001
From: IshavSohal <ishav.sohal@mail.utoronto.ca>
Date: Tue, 26 Nov 2024 12:52:39 -0500
Subject: [PATCH] create shared assets folder

---
 src/components/dynamic-editor.vue        |   3 +
 src/components/editor.vue                |  38 ++-
 src/components/helpers/image-preview.vue |   2 +-
 src/components/image-editor.vue          | 250 ++++++++++++----
 src/components/metadata-editor.vue       | 350 +++++++++++++++++++++--
 src/components/slide-editor.vue          |  16 +-
 src/components/slide-toc.vue             |  83 +++++-
 src/components/slideshow-editor.vue      |   6 +
 src/components/video-editor.vue          | 186 +++++++++++-
 9 files changed, 831 insertions(+), 103 deletions(-)

diff --git a/src/components/dynamic-editor.vue b/src/components/dynamic-editor.vue
index 5fa2eb2ad..a2152f5db 100644
--- a/src/components/dynamic-editor.vue
+++ b/src/components/dynamic-editor.vue
@@ -92,6 +92,9 @@
                     :centerSlide="centerSlide"
                     :dynamicSelected="dynamicSelected"
                     @slide-edit="$emit('slide-edit')"
+                    @shared-asset="(oppositeAssetPath: string, sharedAssetPath: string, oppositeLang: string) => {
+                        $emit('shared-asset', oppositeAssetPath, sharedAssetPath, oppositeLang);
+                    }"
                 ></component>
             </div>
         </div>
diff --git a/src/components/editor.vue b/src/components/editor.vue
index 9aea6e08a..176da1304 100644
--- a/src/components/editor.vue
+++ b/src/components/editor.vue
@@ -261,6 +261,14 @@
                     :slideIndex="slideIndex"
                     @slide-change="selectSlide"
                     @slides-updated="updateSlides"
+                    @shared-asset="(oppositeAssetPath: string, sharedAssetPath: string, oppositeLang: string) => {
+                        $emit('shared-asset', oppositeAssetPath, sharedAssetPath, oppositeLang);
+                    }"
+                    @process-panel="
+                        (panel, callback, ...args) => {
+                            $emit('process-panel', panel, callback, ...args);
+                        }
+                    "
                     :configFileStructure="configFileStructure"
                     :lang="configLang"
                     :sourceCounts="sourceCounts"
@@ -323,6 +331,14 @@
                     :slideIndex="slideIndex"
                     @slide-change="selectSlide"
                     @slides-updated="updateSlides"
+                    @shared-asset="(oppositeAssetPath: string, sharedAssetPath: string, oppositeLang: string) => {
+                        $emit('shared-asset', oppositeAssetPath, sharedAssetPath, oppositeLang);
+                    }"
+                    @process-panel="
+                        (panel, callback, ...args) => {
+                            $emit('process-panel', panel, callback, ...args);
+                        }
+                    "
                     :configFileStructure="configFileStructure"
                     :lang="configLang"
                     :sourceCounts="sourceCounts"
@@ -342,6 +358,9 @@
                     :slideIndex="slideIndex"
                     :isLast="slideIndex === slides.length - 1"
                     :uid="uuid"
+                    @shared-asset="(oppositeAssetPath: string, sharedAssetPath: string, oppositeLang: string) => {
+                        $emit('shared-asset', oppositeAssetPath, sharedAssetPath, oppositeLang);
+                    }"
                     @slide-change="selectSlide"
                     @slide-edit="onSlidesEdited"
                     @custom-slide-updated="updateCustomSlide"
@@ -376,14 +395,17 @@
 <script lang="ts">
 import { Options, Prop, Vue, Watch } from 'vue-property-decorator';
 import {
+    BasePanel,
     ConfigFileStructure,
     HelpSection,
+    ImagePanel,
     MetadataContent,
     MultiLanguageSlide,
     Slide,
     SourceCounts,
     StoryRampConfig,
-    TextPanel
+    TextPanel,
+    VideoPanel
 } from '@/definitions';
 import { VueSpinnerOval } from 'vue3-spinners';
 import axios from 'axios';
@@ -501,6 +523,10 @@ export default class EditorV extends Vue {
      * Change current slide to selected slide.
      */
     selectSlide(index: number, lang?: string): void {
+        console.log(' ');
+        console.log('selectSlide()');
+        console.log('current lang');
+        console.log(this.configLang);
         // save changes to current slide before changing slides
         if (this.$refs.slide !== undefined) {
             (this.$refs.slide as SlideEditorV).saveChanges();
@@ -512,15 +538,21 @@ export default class EditorV extends Vue {
             panel: [{ type: 'loading-page' }, { type: 'loading-page' }]
         };
 
+        const newLang = lang ? lang : this.configLang ? this.configLang : 'en';
+        console.log('newLang');
+        console.log(newLang);
+        if (this.configLang !== newLang) {
+            this.$emit('lang-change', newLang);
+        }
+
         setTimeout(() => {
             if (index === -1 || !this.loadSlides) {
                 this.currentSlide = '';
             } else {
-                const selectedLang = (lang ?? this.configLang) as keyof MultiLanguageSlide;
+                const selectedLang = newLang as keyof MultiLanguageSlide;
                 const selectedSlide = this.loadSlides[index][selectedLang];
                 this.currentSlide = selectedSlide ?? '';
             }
-
             this.slideIndex = index;
             (this.$refs.slide as SlideEditorV).panelIndex = 0;
             (this.$refs.slide as SlideEditorV).advancedEditorView = false;
diff --git a/src/components/helpers/image-preview.vue b/src/components/helpers/image-preview.vue
index bd25eaf60..a97c2b956 100644
--- a/src/components/helpers/image-preview.vue
+++ b/src/components/helpers/image-preview.vue
@@ -17,7 +17,7 @@
             <div class="flex-grow image-container">
                 <img
                     class="image-file object-cover"
-                    :title="imageFile.id"
+                    :title="imageFile.id.split('/').at(-1)"
                     :src="imageFile.src"
                     :alt="imageFile.altText"
                 />
diff --git a/src/components/image-editor.vue b/src/components/image-editor.vue
index d11713e13..2ea1f2e98 100644
--- a/src/components/image-editor.vue
+++ b/src/components/image-editor.vue
@@ -217,7 +217,7 @@ export default class ImageEditorV extends Vue {
                             assetFile.async('blob').then((res: Blob) => {
                                 return {
                                     ...image,
-                                    id: filename ? filename : image.src,
+                                    id: image.src,
                                     src: URL.createObjectURL(res)
                                 } as ImageFile;
                             })
@@ -230,7 +230,7 @@ export default class ImageEditorV extends Vue {
                                 });
                                 return {
                                     ...image,
-                                    id: filename ? filename : image.src,
+                                    id: image.src,
                                     src: URL.createObjectURL(imageFile)
                                 } as ImageFile;
                             })
@@ -244,36 +244,188 @@ export default class ImageEditorV extends Vue {
                 this.imagePreviews = res;
                 this.imagePreviewsLoading = false;
             });
-
             this.slideshowCaption = this.panel.caption as string;
         }
     }
 
-    onFileChange(e: Event): void {
-        // create object URL(s) to display image(s)
-        const filelist = Array.from((e.target as HTMLInputElement).files as ArrayLike<File>);
-        this.imagePreviews.push(
-            ...filelist.map((file: File) => {
-                // Add the uploaded images to the product ZIP file.
-                const uploadSource = `${this.configFileStructure.uuid}/assets/${this.lang}/${file.name}`;
-                this.configFileStructure.assets[this.lang].file(file.name, file);
-
-                if (this.sourceCounts[uploadSource]) {
-                    this.sourceCounts[uploadSource] += 1;
+    // Converts a file into a promise that resolves to an ArrayBuffer containing the files data
+    readBinaryData(file: File): Promise<ArrayBuffer> {
+        return new Promise((resolve, reject) => {
+            const fileReader = new FileReader();
+            fileReader.onload = () => {
+                resolve(fileReader.result);
+            };
+            fileReader.onerror = () => {
+                reject(new Error('Could not load file reader'));
+            };
+            fileReader.readAsArrayBuffer(file);
+        });
+    }
+
+    // Converts a file into a promise that resolves to its has, as an array of 8-bit integers
+    obtainHashData(file: File): Promise<Uint8Array> {
+        return this.readBinaryData(file)
+            .then((res) => {
+                res = new Uint8Array(res);
+                return window.crypto.subtle.digest('SHA-256', res);
+            })
+            .then((res) => {
+                res = new Uint8Array(res);
+                return res;
+            });
+    }
+
+    // Helper used to find all instances of the specified file in the specified asset folder
+    async filesInAssetFolder(file: File, folder: string, checkNested = true): Promise<Array<Promise<string>>> {
+        const uploadedFileHash = await this.obtainHashData(file);
+
+        // Here, if a file in the specified folder has the same name and hash as the file uploaded, then we consider the
+        // two to be the same. Otherwise, we consider them to be different. We even consider if the asset is within a
+        // subfolder of the specified folder, so long as the name and hash of the file is the same. There may be more than one
+        // instance of the specified asset in the specified folder, albeit in seperate subfolders, hence why we collect
+        // an array of duplicate asset promises
+        //TODO: consider using await somewhere here. This way, the array returned wont be an array of promises
+        const sharedAssetPromises = [];
+        this.configFileStructure.assets[folder].forEach((relativePath, zippedFile) => {
+            const assetName = checkNested ? relativePath.split('/').at(-1) : relativePath;
+            if (assetName === file.name) {
+                const assetType = assetName.split('.').at(-1);
+                if (assetType !== 'svg') {
+                    sharedAssetPromises.push(
+                        zippedFile
+                            .async('blob')
+                            .then((img: Blob) => {
+                                const currentFile = new File([img], assetName);
+                                return this.obtainHashData(currentFile);
+                            })
+                            .then((hash) => {
+                                return hash.join() === uploadedFileHash.join() ? relativePath : '';
+                            })
+                    );
                 } else {
-                    this.sourceCounts[uploadSource] = 1;
+                    sharedAssetPromises.push(
+                        zippedFile
+                            .async('text')
+                            .then((img) => {
+                                const currentFile = new File([img], assetName, {
+                                    type: 'image/svg+xml'
+                                });
+                                return this.obtainHashData(currentFile);
+                            })
+                            .then((hash) => {
+                                return hash.join() === uploadedFileHash.join() ? relativePath : '';
+                            })
+                    );
                 }
+            }
+        });
 
-                let imageSrc = URL.createObjectURL(file);
-                return {
-                    id: file.name,
-                    altText: '',
-                    caption: '',
-                    src: imageSrc
-                };
-            })
-        );
-        this.onImagesEdited();
+        return sharedAssetPromises;
+    }
+
+    // Helper for onFileChange and dropImages. Maps a File object to an ImageFile object
+    async addUploadedFile(file: File): Promise<ImageFile> {
+        console.log(' ');
+        console.log('addUploadedFfile (image)');
+        const oppositeLang = this.lang === 'en' ? 'fr' : 'en';
+
+        // This array will contain either 0 or 1 promise, since we don't care for nested assets here
+        const duplicatesInShared = await this.filesInAssetFolder(file, 'shared', false);
+        let inSharedAsset = false;
+        let oppositeSourceCount = 0;
+        let newAssetName = file.name;
+        let uploadSource = `${this.configFileStructure.uuid}/assets/shared/${file.name}`;
+
+        // Should contain either 0 or 1 promise. If the promise inside is a valid asset path, then the
+        // shared asset folder contains an asset with the same name and contents, so we do nothing. If,
+        // however, the promise inside is empty, then the shared asset folder contains an asset with the
+        // same name but different content. In the latter case, we should upload the asset into the shared
+        // asset folder, but with a unique name
+        const sharedAssetPaths = await Promise.all(duplicatesInShared);
+        sharedAssetPaths.forEach((sharedAssetPath) => {
+            // If an asset with the same name, but different content, is already in the shared
+            // folder, we must give the asset we are uploading a unique name. Otherwise the existing
+            // asset will be overwritten
+            if (!sharedAssetPath) {
+                let i = 2;
+                while (this.configFileStructure.assets['shared'].file(newAssetName)) {
+                    newAssetName = `${file.name.split('.').at(0)}(${i}).${file.name.split('.').at(-1)}`;
+                    i++;
+                }
+                uploadSource = `${this.configFileStructure.uuid}/assets/shared/${newAssetName}`;
+            } else {
+                inSharedAsset = true;
+            }
+        });
+
+        // If the asset is already in the shared asset folder, we do not need to do anything. We can assume that it
+        // does not exist in the opposite lang's asset folder anymore. If not, we move it there
+        if (!inSharedAsset) {
+            const duplicatesInOpposite = await this.filesInAssetFolder(file, oppositeLang);
+            const oppositeAssetPaths = await Promise.all(duplicatesInOpposite);
+            // If the current promise is empty, then the current path refers to an asset in the opposite asset
+            // folder that has the same name, but different contents, as the asset uploaded. In this case we do
+            // nothing, as this asset is not a valid duplicate.
+            oppositeAssetPaths.forEach((oppositeAssetPath) => {
+                if (oppositeAssetPath) {
+                    const oppositeFileSource = `${this.configFileStructure.uuid}/assets/${oppositeLang}/${oppositeAssetPath}`;
+                    oppositeSourceCount = this.sourceCounts[oppositeFileSource] ?? 0;
+                    this.sourceCounts[oppositeFileSource] = 0;
+                    this.configFileStructure.assets[oppositeLang].remove(oppositeAssetPath);
+
+                    this.configFileStructure.assets['shared'].file(newAssetName, file);
+                    this.$emit('shared-asset', oppositeFileSource, uploadSource, oppositeLang);
+                    inSharedAsset = true;
+                }
+            });
+        }
+
+        // If the asset uploaded is in the shared asset folder, then no need to upload to the current langs assets folder
+        if (!inSharedAsset) {
+            console.log('asset neither in shared nor opposite');
+            // This array will contain either 0 or 1 promise, since we don't care for nested assets here
+            const duplicatesInCurrent = await this.filesInAssetFolder(file, this.lang, false);
+            const currAssetPaths = await Promise.all(duplicatesInCurrent);
+            currAssetPaths.forEach((currAssetPath) => {
+                // An asset w/ same name but different content is in current asset folder, need to rename
+                if (!currAssetPath) {
+                    console.log('asset w/ same name but different contents in curr asset folder');
+                    let i = 2;
+                    while (this.configFileStructure.assets[this.lang].file(newAssetName)) {
+                        newAssetName = `${file.name.split('.').at(0)}(${i}).${file.name.split('.').at(-1)}`;
+                        console.log('new unique curr lang asset name');
+                        console.log(newAssetName);
+                        i++;
+                    }
+                }
+            });
+            uploadSource = `${this.configFileStructure.uuid}/assets/${this.lang}/${newAssetName}`;
+            this.configFileStructure.assets[this.lang].file(newAssetName, file);
+        }
+
+        if (this.sourceCounts[uploadSource]) {
+            this.sourceCounts[uploadSource] += 1 + oppositeSourceCount;
+        } else {
+            this.sourceCounts[uploadSource] = 1 + oppositeSourceCount;
+        }
+
+        let imageSrc = URL.createObjectURL(file);
+        return {
+            id: uploadSource,
+            altText: '',
+            caption: '',
+            src: imageSrc
+        };
+    }
+
+    onFileChange(e: Event): void {
+        // create object URL(s) to display image(s)
+        const filelist = Array.from((e.target as HTMLInputElement).files as ArrayLike<File>);
+        const filePromises = filelist.map((file: File) => this.addUploadedFile(file));
+        Promise.all(filePromises).then((files) => {
+            this.imagePreviews.push(...files);
+            this.onImagesEdited();
+        });
     }
 
     dropImages(e: DragEvent): void {
@@ -285,41 +437,27 @@ export default class ImageEditorV extends Vue {
                 files = [files[0]];
             }
 
-            this.imagePreviews.push(
-                ...files.map((file: File) => {
-                    // Add the uploaded images to the product ZIP file.
-                    const uploadSource = `${this.configFileStructure.uuid}/assets/${this.lang}/${file.name}`;
-                    this.configFileStructure.assets[this.lang].file(file.name, file);
-
-                    if (this.sourceCounts[uploadSource]) {
-                        this.sourceCounts[uploadSource] += 1;
-                    } else {
-                        this.sourceCounts[uploadSource] = 1;
-                    }
+            const filePromises = files.map((file: File) => this.addUploadedFile(file));
+            Promise.all(filePromises).then((files) => {
+                this.imagePreviews.push(...files);
+                this.onImagesEdited();
+            });
 
-                    let imageSrc = URL.createObjectURL(file);
-                    return {
-                        id: file.name,
-                        altText: '',
-                        caption: '',
-                        src: imageSrc
-                    };
-                })
-            );
             this.dragging = false;
         }
-        this.onImagesEdited();
     }
 
     deleteImage(img: ImageFile): void {
         const idx = this.imagePreviews.findIndex((file: ImageFile) => file.id === img.id);
         if (idx !== -1) {
-            const fileSource = `${this.configFileStructure.uuid}/assets/${this.lang}/${this.imagePreviews[idx].id}`;
+            const assetFolder = this.imagePreviews[idx].id.split('/')[2];
+            const assetSource = this.imagePreviews[idx].id;
+            const assetRelativePath = this.imagePreviews[idx].id.split('/').slice(3).join('/');
 
             // Remove the image from the product ZIP file.
-            this.sourceCounts[fileSource] -= 1;
-            if (this.sourceCounts[fileSource] === 0) {
-                this.configFileStructure.assets[this.lang].remove(this.imagePreviews[idx].id);
+            this.sourceCounts[assetSource] -= 1;
+            if (this.sourceCounts[assetSource] === 0) {
+                this.configFileStructure.assets[assetFolder].remove(assetRelativePath);
                 URL.revokeObjectURL(this.imagePreviews[idx].src);
             }
             this.imagePreviews.splice(idx, 1);
@@ -327,7 +465,7 @@ export default class ImageEditorV extends Vue {
         this.onImagesEdited();
     }
 
-    saveChanges(): void {
+    saveChanges(): Promise<void> {
         if (this.edited) {
             // Delete the existing properties so we can rebuild the object.
             Object.keys(this.panel).forEach((key) => {
@@ -355,18 +493,20 @@ export default class ImageEditorV extends Vue {
                     // @ts-ignore
                     (this.panel as ImagePanel)[key] = imageFile[key];
                 });
-
-                (this.panel as ImagePanel).src = `${this.configFileStructure.uuid}/assets/${this.lang}/${imageFile.id}`;
+                (this.panel as ImagePanel).src = imageFile.id;
             } else {
                 // Otherwise, convert this to a slideshow panel.
                 this.panel.type = PanelType.Slideshow;
                 this.panel.caption = this.slideshowCaption ?? undefined;
 
-                // Turn each of the image configs into an image panel and add them to the slidesow.
+                // Turn each of the image configs into an image panel and add them to the slideshow.
                 (this.panel as SlideshowPanel).items = this.imagePreviews.map((imageFile: ImageFile) => {
+                    const imageSrc = imageFile.id;
+                    const imageId = imageFile.id.split('/').at(-1);
                     return {
                         ...imageFile,
-                        src: `${this.configFileStructure.uuid}/assets/${this.lang}/${imageFile.id}`,
+                        src: imageSrc,
+                        id: imageId,
                         type: PanelType.Image
                     } as ImagePanel;
                 });
diff --git a/src/components/metadata-editor.vue b/src/components/metadata-editor.vue
index 0cedb53ed..a9eda5082 100644
--- a/src/components/metadata-editor.vue
+++ b/src/components/metadata-editor.vue
@@ -499,10 +499,13 @@
                 :configLang="configLang"
                 :saving="saving"
                 :unsavedChanges="unsavedChanges"
+                @shared-asset="updateToSharedAsset"
+                @process-panel="panelHelper"
                 @save-changes="onSave"
                 @save-status="updateSaveStatus"
                 @refresh-config="refreshConfig"
                 @export-product="exportProduct"
+                @lang-change="changeLang"
                 ref="mainEditor"
             >
                 <!-- Metadata editing modal inside the editor -->
@@ -733,7 +736,8 @@ export default class MetadataEditorV extends Vue {
     };
     slides: MultiLanguageSlide[] = [];
     sourceCounts: SourceCounts = {};
-    sessionExpired: boolean = false;
+    sessionExpired = false;
+    logoSource = ''; // used to keep track of logo location
     totalTime = import.meta.env.VITE_APP_CURR_ENV ? Number(import.meta.env.VITE_SESSION_END) : 30;
 
     mounted(): void {
@@ -742,6 +746,8 @@ export default class MetadataEditorV extends Vue {
     }
 
     created(): void {
+        console.log(' ');
+        console.log('created');
         this.loadExisting = this.editExisting;
 
         // Generate UUID for new product
@@ -764,7 +770,6 @@ export default class MetadataEditorV extends Vue {
             this.metadata.tocOrientation = 'vertical';
             this.metadata.returnTop = true;
         }
-
         // Find which view to render based on route
         if (this.$route.name === 'editor') {
             this.loadEditor = true;
@@ -772,6 +777,8 @@ export default class MetadataEditorV extends Vue {
 
             // Properties already passed in props and storyline is locked, load editor view (could use a refactor to clean up this workflow process)
             if (props && props.configs && props.configFileStructure && this.lockStore.uuid) {
+                console.log('props passed to storyline');
+                console.log(props);
                 this.configs = props.configs;
                 this.configLang = props.configLang;
                 this.configFileStructure = props.configFileStructure;
@@ -782,7 +789,7 @@ export default class MetadataEditorV extends Vue {
                 this.unsavedChanges = props.unsavedChanges;
                 // Load product logo (if provided).
                 const logo = this.configs[this.configLang]?.introSlide.logo?.src;
-                const logoSrc = `assets/${this.configLang}/${this.metadata.logoName}`;
+                const logoSrc = `${logo.substring(logo.indexOf('/') + 1)}`;
 
                 this.loadSlides(props.configs);
 
@@ -888,9 +895,16 @@ export default class MetadataEditorV extends Vue {
         this.handleSessionTimeout();
     }
 
+    // this gets called at same time as swapLang(), causing issues
+    changeLang(lang: string): void {
+        console.log(' ');
+        console.log('changeLang()');
+        this.configLang = lang;
+    }
+
     /**
      * Open current editor config as a new Storylines product in new tab.
-     * Note: Preview button on metadata editor will only show when editing an existing product, not cwhen creating a new one
+     * Note: Preview button on metadata editor will only show when editing an existing product, not when creating a new one
      * This is a design decision, can change if we decide that people would want to preview new products for some reason
      */
     preview(): void {
@@ -941,6 +955,8 @@ export default class MetadataEditorV extends Vue {
      * Generates a new product file for brand new products.
      */
     generateNewConfig(): void {
+        console.log(' ');
+        console.log('generateNewConfig()');
         const configZip = new JSZip();
 
         // Generate a new configuration file and populate required fields.
@@ -952,10 +968,15 @@ export default class MetadataEditorV extends Vue {
         if (!this.metadata.logoName) {
             config.introSlide.logo.src = '';
         } else if (!this.metadata.logoName.includes('http')) {
-            config.introSlide.logo.src = `${this.uuid}/assets/${this.configLang}/${this.logoImage?.name}`;
+            // since config is being cloned for the opposite langs config, should this be moved to the shared folder?
+            // however upon uploading logo for specific langs config, it must be added to that langs asset folder, assuming
+            // its not already in the opposite langs asset folder (in which case the asset is moved to the shared asset folder)
+            config.introSlide.logo.src = `${this.uuid}/assets/shared/${this.logoImage?.name}`;
         } else {
             config.introSlide.logo.src = this.metadata.logoName;
         }
+        console.log('logo src');
+        console.log(config.introSlide.logo.src);
         config.slides = [];
 
         const otherLang = this.configLang === 'en' ? 'fr' : 'en';
@@ -1398,6 +1419,9 @@ export default class MetadataEditorV extends Vue {
     }
 
     incrementSourceCount(src: string): void {
+        console.log(' ');
+        console.log('incrementing source count of:');
+        console.log(src);
         if (this.sourceCounts[src]) {
             this.sourceCounts[src] += 1;
         } else {
@@ -1405,11 +1429,253 @@ export default class MetadataEditorV extends Vue {
         }
     }
 
+    /**
+     * Executes a callback for each ImagePanel/VideoPanel within the provided BasePanel
+     *
+     * @param panel The panel which we are processing
+     * @param callback The callback function that is called on each ImagePanel/VideoPanel in the provided BasePanel
+     * @param callbackArgs The additional argument(s) for the callback function (can be empty)
+     */
+    panelHelper(panel: BasePanel, callback: (panel: ImagePanel | VideoPanel, ...args) => void, ...callbackArgs): void {
+        switch (panel.type) {
+            case 'slideshow':
+                panel.items.forEach((item) => this.panelHelper(item, callback, ...callbackArgs));
+                break;
+            case 'dynamic':
+                panel.children.forEach((child) => this.panelHelper(child.panel, callback, ...callbackArgs));
+                break;
+            case 'image':
+            case 'video':
+                callback(panel, ...callbackArgs);
+        }
+    }
+
+    /**
+     * Updates the source of an asset from the opposite lang's assets folder to the shared assets folder
+     * @param oppositeAssetPath Path of the asset within the opposite langs asset folder that has been moved
+     * @param sharedAssetName Path of the asset within the shared asset folder
+     * @param oppositeLang Language from which the asset was removed
+     */
+    updateToSharedAsset(oppositeAssetPath: string, sharedAssetPath: string, oppositeLang: string): void {
+        console.log(' ');
+        console.log('updateToSharedAsset()');
+        const oppositeConfig = this.configs[oppositeLang];
+        console.log('configs');
+        console.log(this.configs);
+        console.log('oppositeLang');
+        console.log(oppositeLang);
+
+        const updateAssetSrc = (panel: ImagePanel | VideoPanel, oppositeAssetPath: string, sharedAssetPath: string) => {
+            if (panel.src) {
+                if (panel.src === oppositeAssetPath) {
+                    panel.src = sharedAssetPath;
+                }
+            }
+        };
+
+        // Need to check logo seperately
+        if (oppositeConfig.introSlide.logo.src === oppositeAssetPath) {
+            oppositeConfig.introSlide.logo.src = sharedAssetPath;
+        }
+
+        oppositeConfig?.slides.forEach((slide) => {
+            slide.panel.forEach((panel) => {
+                this.panelHelper(panel, updateAssetSrc, oppositeAssetPath, sharedAssetPath);
+            });
+        });
+
+        this.updateSaveStatus(true);
+    }
+
+    // Converts a file into a promise that resolves to an ArrayBuffer containing the files data
+    readBinaryData(file: File): Promise<ArrayBuffer> {
+        return new Promise((resolve, reject) => {
+            const fileReader = new FileReader();
+            fileReader.onload = () => {
+                resolve(fileReader.result);
+            };
+            fileReader.onerror = () => {
+                reject(new Error('Could not load file reader'));
+            };
+            fileReader.readAsArrayBuffer(file);
+        });
+    }
+
+    // Converts a file into a promise that resolves to its has, as an array of 8-bit integers
+    obtainHashData(file: File): Promise<Uint8Array> {
+        return this.readBinaryData(file)
+            .then((res) => {
+                res = new Uint8Array(res);
+                return window.crypto.subtle.digest('SHA-256', res);
+            })
+            .then((res) => {
+                res = new Uint8Array(res);
+                return res;
+            });
+    }
+
+    /**
+     * Helper used to find all instances of the specified file in the specified asset folder
+     * @param file The file for which we are looking for duplicates within the specified folder
+     * @param folder The asset folder to search for the specified asset file
+     * @param checkNested Whether we should search subfolders within specfied asset file
+     */
+    async filesInAssetFolder(file: File, folder: string, checkNested = true): Promise<Array<Promise<string>>> {
+        const uploadedFileHash = await this.obtainHashData(file);
+
+        // Here, if a file in the specified folder has the same name and hash as the file uploaded, then we consider the
+        // two to be the same. Otherwise, we consider them to be different. We even consider if the asset is within a
+        // subfolder of the specified folder, so long as the name and hash of the file is the same. There may be more than one
+        // instance of the specified asset in the specified folder, albeit in seperate subfolders, hence why we collect
+        // an array of duplicate asset promises
+        //TODO: consider using await somewhere here. This way, the array returned wont be an array of promises
+        const sharedAssetPromises = [];
+        this.configFileStructure.assets[folder].forEach((relativePath, zippedFile) => {
+            const assetName = checkNested ? relativePath.split('/').at(-1) : relativePath;
+            if (assetName === file.name) {
+                const assetType = assetName.split('.').at(-1);
+                if (assetType !== 'svg') {
+                    sharedAssetPromises.push(
+                        zippedFile
+                            .async('blob')
+                            .then((img: Blob) => {
+                                const currentFile = new File([img], assetName);
+                                return this.obtainHashData(currentFile);
+                            })
+                            .then((hash) => {
+                                return hash.join() === uploadedFileHash.join() ? relativePath : '';
+                            })
+                    );
+                } else {
+                    sharedAssetPromises.push(
+                        zippedFile
+                            .async('text')
+                            .then((img) => {
+                                const currentFile = new File([img], assetName, {
+                                    type: 'image/svg+xml'
+                                });
+                                return this.obtainHashData(currentFile);
+                            })
+                            .then((hash) => {
+                                return hash.join() === uploadedFileHash.join() ? relativePath : '';
+                            })
+                    );
+                }
+            }
+        });
+
+        return sharedAssetPromises;
+    }
+
+    /**
+     * Helper used to upload a new logo for the current langs config. Only needed when uploading a new logo to an
+     * existing config (not when creating a new product)
+     * @param logo the logo being uploaded
+     * @param config the config of the lang within which the logo was uploaded
+     */
+    async uploadLogo(logo: File, config): Promise<void> {
+        console.log(' ');
+        console.log('uploadLogo');
+        console.log('logo uploaded');
+        console.log(logo);
+        const oppositeLang = this.configLang === 'en' ? 'fr' : 'en';
+        // This array will contain either 0 or 1 promise, since we don't care for nested assets here
+        const duplicatesInShared = await this.filesInAssetFolder(logo, 'shared', false);
+        let inSharedAsset = false;
+        let oppositeSourceCount = 0;
+        let newAssetName = logo.name;
+        let uploadSource = `${this.configFileStructure.uuid}/assets/shared/${logo.name}`;
+        console.log('uploadSource(before)');
+        console.log(uploadSource);
+
+        // Should contain either 0 or 1 promise.
+        const sharedAssetPaths = await Promise.all(duplicatesInShared);
+        sharedAssetPaths.forEach((sharedAssetPath) => {
+            // If an asset with the same name, but different content, is already in the shared
+            // folder, we must give the asset we are uploading a unique name. Otherwise the existing
+            // asset will be overwritten
+            if (!sharedAssetPath) {
+                console.log('asset with same name but different content in shared asset folder');
+                let i = 2;
+                while (this.configFileStructure.assets['shared'].file(newAssetName)) {
+                    newAssetName = `${logo.name.split('.').at(0)}(${i}).${logo.name.split('.').at(-1)}`;
+                    console.log('new unique shared asset name');
+                    console.log(newAssetName);
+                    i++;
+                }
+                uploadSource = `${this.configFileStructure.uuid}/assets/shared/${newAssetName}`;
+            } else {
+                console.log('asset with same name and content in shared asset folder');
+                inSharedAsset = true;
+            }
+        });
+
+        if (!inSharedAsset) {
+            const duplicatesInOpposite = await this.filesInAssetFolder(logo, oppositeLang);
+            const oppositeAssetPaths = await Promise.all(duplicatesInOpposite);
+            // If the current promise is empty, then the current path refers to an asset in the opposite asset
+            // folder that has the same name, but different contents, as the asset uploaded. In this case we do
+            // nothing, as this asset is not a valid duplicate.
+            oppositeAssetPaths.forEach((oppositeAssetPath) => {
+                if (oppositeAssetPath) {
+                    console.log('asset with same name and contents in opposite asset folder');
+                    const oppositeFileSource = `${this.configFileStructure.uuid}/assets/${oppositeLang}/${oppositeAssetPath}`;
+                    console.log('oppositeFileSource');
+                    console.log(oppositeFileSource);
+                    oppositeSourceCount = this.sourceCounts[oppositeFileSource] ?? 0;
+                    this.sourceCounts[oppositeFileSource] = 0;
+                    this.configFileStructure.assets[oppositeLang].remove(oppositeAssetPath);
+
+                    this.configFileStructure.assets['shared'].file(newAssetName, logo);
+                    this.updateToSharedAsset(oppositeFileSource, uploadSource, oppositeLang);
+                    inSharedAsset = true;
+                }
+            });
+        }
+
+        // If the asset uploaded is neither in the shared nor in the opposite lang's asset folder then we upload to the
+        // current langs assets folder (if its not already there)
+        if (!inSharedAsset) {
+            console.log('logo neither in shared nor opposite');
+            // This array will contain either 0 or 1 promise, since we don't care for nested assets here
+            const duplicatesInCurrent = await this.filesInAssetFolder(logo, this.configLang, false);
+            const currAssetPaths = await Promise.all(duplicatesInCurrent);
+            currAssetPaths.forEach((currAssetPath) => {
+                // An asset w/ same name but different content is in current asset folder, need to rename
+                if (!currAssetPath) {
+                    console.log('asset w/ same name but different contents in curr asset folder');
+                    let i = 2;
+                    while (this.configFileStructure.assets[this.configLang].file(newAssetName)) {
+                        newAssetName = `${logo.name.split('.').at(0)}(${i}).${logo.name.split('.').at(-1)}`;
+                        console.log('new unique curr lang asset name');
+                        console.log(newAssetName);
+                        i++;
+                    }
+                }
+            });
+            uploadSource = `${this.configFileStructure.uuid}/assets/${this.configLang}/${newAssetName}`;
+            this.configFileStructure.assets[this.configLang].file(newAssetName, logo);
+        }
+
+        // Check if the logo src is the same as before. If it is, then we assume that nothing has changed, and thus no
+        // need to increment source counts
+        console.log('uploadSource(after)');
+        console.log(uploadSource);
+        if (config.introSlide.logo.src !== uploadSource) {
+            console.log('logo src is new');
+            this.incrementSourceCount(uploadSource);
+            this.sourceCounts[uploadSource] += oppositeSourceCount;
+            config.introSlide.logo.src = uploadSource; // source of logo for current config must be updated seperately
+        }
+    }
+
     /**
      * Generates or loads a ZIP file and creates required project folders if needed.
      * Returns an object that makes it easy to access any specific folder.
      */
     configFileStructureHelper(configZip: typeof JSZip, uploadLogo?: File | undefined): Promise<void> {
+        console.log(' ');
+        console.log('configFileStrcutureHelper');
         const assetsFolder = configZip.folder('assets');
         const chartsFolder = configZip.folder('charts');
         const rampConfigFolder = configZip.folder('ramp-config');
@@ -1420,7 +1686,8 @@ export default class MetadataEditorV extends Vue {
             configs: this.configs as unknown as { [key: string]: StoryRampConfig },
             assets: {
                 en: (assetsFolder as JSZip).folder('en') as JSZip,
-                fr: (assetsFolder as JSZip).folder('fr') as JSZip
+                fr: (assetsFolder as JSZip).folder('fr') as JSZip,
+                shared: (assetsFolder as JSZip).folder('shared') as JSZip
             },
             charts: {
                 en: (chartsFolder as JSZip).folder('en') as JSZip,
@@ -1429,11 +1696,13 @@ export default class MetadataEditorV extends Vue {
             rampConfig: rampConfigFolder as JSZip
         };
 
-        // If uploadLogo is set, upload the logo to the directory.
+        // If uploadLogo is set, upload the logo to the shared asset folder (due to cloning of configs in
+        // generateNewConfig)
         if (uploadLogo !== undefined) {
-            this.configFileStructure.assets[this.configLang].file(uploadLogo?.name, uploadLogo);
+            console.log('logo uploaded');
+            console.log(uploadLogo);
+            this.configFileStructure.assets['shared'].file(uploadLogo?.name, uploadLogo);
         }
-
         return this.loadConfig();
     }
 
@@ -1443,6 +1712,8 @@ export default class MetadataEditorV extends Vue {
      * @param config the configuration object to load.
      */
     async loadConfig(config?: StoryRampConfig): Promise<void> {
+        console.log(' ');
+        console.log('loadConfig()');
         if (config) {
             this.useConfig(config);
             return;
@@ -1474,7 +1745,7 @@ export default class MetadataEditorV extends Vue {
         // Load in project data.
         if (this.configs[this.configLang]) {
             this.useConfig(this.configs[this.configLang] as StoryRampConfig);
-            this.findSources(this.configs);
+            this.findSources(this.configs); // increments source counts for all panels
             // Update router path
             if (this.reloadExisting) {
                 this.loadEditor = true;
@@ -1488,6 +1759,8 @@ export default class MetadataEditorV extends Vue {
     }
 
     useConfig(config: StoryRampConfig): void {
+        console.log(' ');
+        console.log('useConfig()');
         this.metadata.title = config.title;
         this.metadata.introTitle = config.introSlide.title;
         this.metadata.introSubtitle = config.introSlide.subtitle;
@@ -1500,10 +1773,14 @@ export default class MetadataEditorV extends Vue {
         this.loadSlides(this.configs);
 
         const logo = config.introSlide.logo?.src;
+        console.log('logo source');
+        console.log(logo);
         if (logo) {
             // Set the alt text for the logo.
             this.metadata.logoAltText = config.introSlide.logo?.altText ? config.introSlide.logo.altText : '';
             this.metadata.logoName = logo.split('/').at(-1);
+            console.log('metadata logoname');
+            console.log(this.metadata.logoName);
 
             // Fetch the logo from the folder (if it exists).
             const logoSrc = `${logo.substring(logo.indexOf('/') + 1)}`;
@@ -1530,6 +1807,8 @@ export default class MetadataEditorV extends Vue {
             } else {
                 // Fill in the field with this value whether it exists or not.
                 this.metadata.logoName = logo;
+                console.log('else case logo name');
+                console.log(logo);
 
                 // If it doesn't exist, maybe it's a remote file?
                 fetch(logo).then((data: Response) => {
@@ -1582,6 +1861,8 @@ export default class MetadataEditorV extends Vue {
      */
     generateConfig(publish = true): ConfigFileStructure {
         this.lockStore.broadcast?.postMessage({ action: 'saving' });
+        console.log(' ');
+        console.log('generateConfig()');
         this.saving = true;
 
         // Clear any session timeouts, don't want the app to exit while saving, duh
@@ -1597,10 +1878,10 @@ export default class MetadataEditorV extends Vue {
         const frFileName = `${this.uuid}_fr.json`;
 
         // Replace undefined slides with empty objects
-        this.configs.en!.slides = this.configs.en!.slides.map((slide) => {
+        this.configs.en.slides = this.configs.en?.slides.map((slide) => {
             return slide ?? {};
         });
-        this.configs.fr!.slides = this.configs.fr!.slides.map((slide) => {
+        this.configs.fr.slides = this.configs.fr?.slides.map((slide) => {
             return slide ?? {};
         });
         this.loadSlides(this.configs);
@@ -1611,6 +1892,11 @@ export default class MetadataEditorV extends Vue {
         this.configFileStructure?.zip.file(engFileName, engFormattedConfigFile);
         this.configFileStructure?.zip.file(frFileName, frFormattedConfigFile);
 
+        console.log('new configFileStructure');
+        console.log(this.configFileStructure);
+        console.log('new sourcecounts');
+        console.log(this.sourceCounts);
+
         // Upload the ZIP file.
         if (publish) {
             this.unsavedChanges = false;
@@ -1756,10 +2042,15 @@ export default class MetadataEditorV extends Vue {
     }
 
     /**
-     * Called when `Save Changes` is pressed on metadata page. Save metadata content fields
-     * to config file. If `publish` is set to true, publish to server as well.
+     * Called when `Save Changes` or `Next` (for existing products only) is pressed on metadata page, as well as when
+     * `Done` is pressed in the metadata editor within editor-main. Save metadata content fields to config file. If
+     * `publish` is set to true, publish to server as well.
      */
-    saveMetadata(publish = false): void {
+    async saveMetadata(publish = false): Promise<void> {
+        console.log(' ');
+        console.log('saveMetadata()');
+        console.log('config lang');
+        console.log(this.configLang);
         // update metadata content to existing config only if it has been successfully loaded
         const config = this.configs[this.configLang];
         if (config !== undefined) {
@@ -1783,11 +2074,15 @@ export default class MetadataEditorV extends Vue {
             if (!this.metadata.logoName) {
                 config.introSlide.logo.src = '';
             } else if (!this.metadata.logoName.includes('http')) {
-                config.introSlide.logo.src = `${this.uuid}/assets/${this.configLang}/${this.logoImage?.name}`;
-                this.configFileStructure?.assets[this.configLang].file(
-                    this.logoImage?.name as string,
-                    this.logoImage as File
-                );
+                // TODO: if the logo is the same as before, its source count gets incremented an additional time
+                // Need to check whether a new logo image was uploaded, or it is the same as
+                //
+                console.log('logo image');
+                console.log(this.logoImage);
+                // Here a logo is being uploaded for a specific langs config (rather than both). In this case we
+                // must check to see if this asset already exists in the opposite langs config, and if so, upload it
+                // to the shared asset folder
+                await this.uploadLogo(this.logoImage as File, config);
             } else {
                 config.introSlide.logo.src = this.metadata.logoName;
             }
@@ -1831,7 +2126,13 @@ export default class MetadataEditorV extends Vue {
      * Language toggle.
      */
     swapLang(): void {
+        console.log(' ');
+        console.log('swapLang()');
+        console.log('old lang');
+        console.log(this.configLang);
         this.configLang = this.configLang === 'en' ? 'fr' : 'en';
+        console.log('new lang');
+        console.log(this.configLang);
         if (!this.configs[this.configLang]) {
             return;
         }
@@ -1926,8 +2227,12 @@ export default class MetadataEditorV extends Vue {
     }
 
     onFileChange(e: Event): void {
+        console.log(' ');
+        console.log('onFileChange()');
         // Retrieve the uploaded file.
         const uploadedFile = ((e.target as HTMLInputElement).files as ArrayLike<File>)[0];
+        console.log('logo file uploaded');
+        console.log(uploadedFile);
         this.logoImage = uploadedFile;
 
         // Generate an image preview.
@@ -1981,8 +2286,9 @@ export default class MetadataEditorV extends Vue {
             if (this.loadExisting) {
                 if (this.configs[this.configLang] !== undefined && this.uuid === this.configFileStructure?.uuid) {
                     this.loadEditor = true;
-                    this.saveMetadata(false);
-                    this.updateEditorPath();
+                    this.saveMetadata(false).then(() => {
+                        this.updateEditorPath();
+                    });
                 } else {
                     Message.error(this.$t('editor.editMetadata.message.error.noConfig'));
                 }
diff --git a/src/components/slide-editor.vue b/src/components/slide-editor.vue
index 5fe1b4f9f..e247ea629 100644
--- a/src/components/slide-editor.vue
+++ b/src/components/slide-editor.vue
@@ -336,9 +336,16 @@
                     ref="editor"
                     :config="currentSlide"
                     @slide-edit="$emit('slide-edit')"
-                    @config-edited="(slideConfig: Slide, save?: boolean = false) => $emit('custom-slide-updated', slideConfig, save, lang)"
+                    @config-edited="(slideConfig: Slide, save?: boolean = false) => {
+                        $emit('custom-slide-updated', slideConfig, save, lang)
+                    }"
+                    @shared-asset="(oppositeAssetPath: string, sharedAssetPath: string, oppositeLang: string) => {
+                        $emit('shared-asset', oppositeAssetPath, sharedAssetPath, oppositeLang);
+                    }"
                     v-if="advancedEditorView"
                 ></custom-editor>
+                <!-- TODO: upon calling saveChanges() for an image panel, determineEditorType below gets called 
+                 This results in issues if the saveChanges() method is async, and the panel array is not yet defined -->
                 <component
                     ref="editor"
                     :is="editors[determineEditorType(currentSlide.panel[panelIndex])]"
@@ -350,6 +357,9 @@
                     :sourceCounts="sourceCounts"
                     :centerSlide="centerSlide"
                     :dynamicSelected="dynamicSelected"
+                    @shared-asset="(oppositeAssetPath: string, sharedAssetPath: string, oppositeLang: string) => {
+                        $emit('shared-asset', oppositeAssetPath, sharedAssetPath, oppositeLang);
+                    }"
                     @slide-edit="(changedFromDefault: boolean = true) => {
                         $emit('slide-edit');
 
@@ -495,7 +505,7 @@ export default class SlideEditorV extends Vue {
         this.centerPanel = this.currentSlide.centerPanel ?? false;
         this.centerSlide = this.currentSlide.centerSlide ?? false;
         this.includeInToc = this.currentSlide.includeInToc ?? true;
-        this.onePanelOnly = this.currentSlide?.rightOnly || this.currentSlide?.panel.length === 1;
+        this.onePanelOnly = this.currentSlide?.rightOnly || this.currentSlide?.panel?.length === 1;
     }
 
     /**
@@ -598,6 +608,8 @@ export default class SlideEditorV extends Vue {
             }
 
             case 'image': {
+                // as long as assets are uploaded/removed from the appropriate folders (either shared or current lang),
+                // then this should work fine as is
                 const imagePanel = panel as ImagePanel;
                 this.sourceCounts[imagePanel.src] -= 1;
                 if (this.sourceCounts[imagePanel.src] === 0) {
diff --git a/src/components/slide-toc.vue b/src/components/slide-toc.vue
index 7d4ef5f11..8a98a2f39 100644
--- a/src/components/slide-toc.vue
+++ b/src/components/slide-toc.vue
@@ -320,8 +320,8 @@ import {
     DynamicPanel,
     ImagePanel,
     MapPanel,
-    Slide,
     MultiLanguageSlide,
+    Slide,
     SlideshowPanel,
     SourceCounts,
     TextPanel,
@@ -353,7 +353,7 @@ export default class SlideTocV extends Vue {
     @Prop() configFileStructure!: ConfigFileStructure;
     @Prop() lang!: string;
     @Prop() sourceCounts!: SourceCounts;
-    @Prop() closeSidebar!: Function;
+    @Prop() closeSidebar!: () => void;
     @Prop({ default: false }) isMobileSidebar!: boolean;
 
     defaultBlankSlide: Slide = {
@@ -410,6 +410,7 @@ export default class SlideTocV extends Vue {
      * @param currLang The config to delete, either 'en' for English of 'fr' for French.
      */
     deleteConfig(slides: MultiLanguageSlide, currLang: 'en' | 'fr'): void {
+        slides[currLang].panels.forEach((panel: BasePanel) => this.removeSourceHelper(panel));
         slides[currLang] = undefined;
         this.$emit('slides-updated', this.slides);
     }
@@ -428,9 +429,71 @@ export default class SlideTocV extends Vue {
 
     // Assumes that you've already checked that the other lang DOES have a config.
     copyConfigFromOtherLang(index: number, currLang: keyof MultiLanguageSlide): void {
-        this.slides[index][currLang] = JSON.parse(JSON.stringify(this.slides[index][currLang === 'en' ? 'fr' : 'en']));
-        this.$emit('slides-updated', this.slides);
-        this.$emit('slide-change', index, currLang);
+        const oppositeLang = currLang === 'en' ? 'fr' : 'en';
+        // Called on each image/video panel in the opposite lang's config (at the provided index)
+        // The asset within this panel (assuming one exists) must be moved to the shared folder (if its not already
+        // there). However, we must check beforehand whether an asset with the same name and contents already exists
+        // in the shared folder (in which case we do nothing), and if an asset with the same name and different
+        // contents already exists in the shared folder (in which case we give the asset uploaded to the shared
+        // asset folder a unique name)
+        const oppositeToSharedFolder = (panel: ImagePanel | VideoPanel, oppositeLang: string): void => {
+            if (panel.src) {
+                const assetSrc = panel.src.split('/');
+                const fileName = assetSrc.at(-1);
+                const assetType = fileName.split('.').at(-1);
+                let inSharedAssets = assetSrc[2] === 'shared';
+                let sharedFileSource = `${this.configFileStructure.uuid}/assets/shared/${fileName}`;
+
+                // If the asset for this panel refers to the opposite lang's asset folder, we will assume that there
+                // is no asset in the shared asset folder with the same name and contents as this asset
+                if (!inSharedAssets) {
+                    const oppositeFileSource = panel.src;
+                    const oppositeRelativePath = assetSrc.slice(3).join('/');
+                    let sharedAssetName = fileName;
+                    let fileZipped = this.configFileStructure.assets[oppositeLang].file(oppositeRelativePath);
+                    let i = 2;
+
+                    // If an asset with the same name, but different content, is already in the shared folder, we must
+                    // give the asset we are uploading a unique name. Otherwise the existing asset will be overwritten
+                    while (this.configFileStructure.assets['shared'].file(sharedAssetName)) {
+                        sharedAssetName = `${fileZipped.name.split('.').at(0)}(${i}).${fileZipped.name
+                            .split('.')
+                            .at(-1)}`;
+                        i++;
+                    }
+                    sharedFileSource = `${this.configFileStructure.uuid}/assets/shared/${sharedAssetName}`;
+
+                    fileZipped.async(assetType !== 'svg' ? 'blob' : 'text').then((assetFile) => {
+                        if (assetType === 'svg') {
+                            assetFile = new File([assetFile], fileName, {
+                                type: 'image/svg+xml'
+                            });
+                        }
+                        this.configFileStructure.assets[oppositeLang].remove(oppositeRelativePath);
+                        this.configFileStructure.assets['shared'].file(sharedAssetName, assetFile);
+                        this.sourceCounts[sharedFileSource] = this.sourceCounts[oppositeFileSource] ?? 0;
+                        this.sourceCounts[oppositeFileSource] = 0;
+                        this.$emit('shared-asset', oppositeFileSource, sharedFileSource, oppositeLang);
+                    });
+                }
+                // At this point the src of this panel will have been updated if it was neccesary to do so
+                this.sourceCounts[sharedFileSource] += 1;
+            }
+        };
+
+        this.slides[index][oppositeLang].panel.forEach((panel) => {
+            this.$emit('process-panel', panel, oppositeToSharedFolder, oppositeLang);
+        });
+
+        // TODO: find better alternative to setTimeout. This code MUST execute after the callback above executes on each
+        // panel in the opposite lang's slide. Otherwise it will copy the contents of the opposite config before its
+        // src values are updated
+        setTimeout(() => {
+            this.slides[index][currLang].panel.forEach((panel) => this.removeSourceHelper(panel));
+            this.slides[index][currLang] = JSON.parse(JSON.stringify(this.slides[index][oppositeLang]));
+            this.$emit('slides-updated', this.slides);
+            this.$emit('slide-change', index, currLang);
+        }, 300);
     }
 
     /**
@@ -450,6 +513,16 @@ export default class SlideTocV extends Vue {
      */
     copySlide(index: number): void {
         this.slides.splice(index + 1, 0, cloneDeep(this.slides[index]));
+
+        // increment source count of each asset in this slide
+        const incrementSourceCounts = (panel: ImagePanel | VideoPanel) => {
+            if (panel.src) {
+                this.sourceCounts[panel.src] += 1;
+            }
+        };
+        this.slides[index].en.panel.forEach((panel) => this.$emit('process-panel', panel, incrementSourceCounts));
+        this.slides[index].fr.panel.forEach((panel) => this.$emit('process-panel', panel, incrementSourceCounts));
+
         this.$emit('slides-updated', this.slides);
         this.selectSlide(index + 1, this.lang);
         Message.success(this.$t('editor.slide.copy.success'));
diff --git a/src/components/slideshow-editor.vue b/src/components/slideshow-editor.vue
index 595ddc302..5c9132b8f 100644
--- a/src/components/slideshow-editor.vue
+++ b/src/components/slideshow-editor.vue
@@ -95,6 +95,9 @@
                         :lang="lang"
                         :sourceCounts="sourceCounts"
                         :allowMany="false"
+                        @shared-asset="(oppositeAssetPath: string, sharedAssetName: string, oppositeLang: string) => {
+                            $emit('shared-asset', oppositeAssetPath, sharedAssetName, oppositeLang);
+                        }"
                     ></component>
                     <div class="mt-3 w-full flex justify-end">
                         <button
@@ -117,6 +120,9 @@
                         :sourceCounts="sourceCounts"
                         :key="editingIdx + panel.items[editingIdx].type"
                         :allowMany="false"
+                        @shared-asset="(oppositeAssetPath: string, sharedAssetName: string, oppositeLang: string) => {
+                            $emit('shared-asset', oppositeAssetPath, sharedAssetName, oppositeLang);
+                        }"
                     ></component>
                     <div class="mt-3 w-full flex justify-end">
                         <button class="editor-button bg-black text-white hover:bg-gray-800" @click="saveItem()">
diff --git a/src/components/video-editor.vue b/src/components/video-editor.vue
index c51d13cf2..af5b3c558 100644
--- a/src/components/video-editor.vue
+++ b/src/components/video-editor.vue
@@ -171,7 +171,7 @@ export default class VideoEditorV extends Vue {
                     this.videoPreviewPromise = assetFile.async('blob').then((res: Blob) => {
                         return {
                             ...this.panel,
-                            id: filename ? filename : this.panel.src,
+                            id: this.panel.src,
                             src: URL.createObjectURL(res)
                         } as VideoFile;
                     });
@@ -200,26 +200,172 @@ export default class VideoEditorV extends Vue {
         }
     }
 
+    // Converts a file into a promise that resolves to an ArrayBuffer containing the files data
+    readBinaryData(file: File): Promise<ArrayBuffer> {
+        return new Promise((resolve, reject) => {
+            const fileReader = new FileReader();
+            fileReader.onload = () => {
+                resolve(fileReader.result);
+            };
+            fileReader.onerror = () => {
+                reject(new Error('Could not load file reader'));
+            };
+            fileReader.readAsArrayBuffer(file);
+        });
+    }
+
+    // Converts a file into a promise that resolves to its has, as an array of 8-bit integers
+    obtainHashData(file: File): Promise<Uint8Array> {
+        return this.readBinaryData(file)
+            .then((res) => {
+                res = new Uint8Array(res);
+                return window.crypto.subtle.digest('SHA-256', res);
+            })
+            .then((res) => {
+                res = new Uint8Array(res);
+                return res;
+            });
+    }
+
+    // Helper used to find all instances of the specified file in the specified asset folder
+    async filesInAssetFolder(file: File, folder: string, checkNested = true): Promise<Array<Promise<string>>> {
+        const uploadedFileHash = await this.obtainHashData(file);
+
+        // Here, if a file in the specified folder has the same name and hash as the file uploaded, then we consider the
+        // two to be the same. Otherwise, we consider them to be different. We even consider if the asset is within a
+        // subfolder of the specified folder, so long as the name and hash of the file is the same. There may be more than one
+        // instance of the specified asset in the specified folder, albeit in seperate subfolders, hence why we collect
+        // an array of duplicate asset promises
+        //TODO: consider using await somewhere here. This way, the array returned wont be an array of promises
+        const sharedAssetPromises = [];
+        this.configFileStructure.assets[folder].forEach((relativePath, zippedFile) => {
+            const assetName = checkNested ? relativePath.split('/').at(-1) : relativePath;
+            if (assetName === file.name) {
+                const assetType = assetName.split('.').at(-1);
+                if (assetType !== 'svg') {
+                    sharedAssetPromises.push(
+                        zippedFile
+                            .async('blob')
+                            .then((img: Blob) => {
+                                const currentFile = new File([img], assetName);
+                                return this.obtainHashData(currentFile);
+                            })
+                            .then((hash) => {
+                                return hash.join() === uploadedFileHash.join() ? relativePath : '';
+                            })
+                    );
+                } else {
+                    sharedAssetPromises.push(
+                        zippedFile
+                            .async('text')
+                            .then((img) => {
+                                const currentFile = new File([img], assetName, {
+                                    type: 'image/svg+xml'
+                                });
+                                return this.obtainHashData(currentFile);
+                            })
+                            .then((hash) => {
+                                return hash.join() === uploadedFileHash.join() ? relativePath : '';
+                            })
+                    );
+                }
+            }
+        });
+
+        return sharedAssetPromises;
+    }
+
     // adds an uploaded file that is either a: video, transcript or captions
-    addUploadedFile(file: File, type: string): void {
-        const uploadSource = `${this.configFileStructure.uuid}/assets/${this.lang}/${file.name}`;
-        this.configFileStructure.assets[this.lang].file(file.name, file);
+    async addUploadedFile(file: File, type: string): Promise<void> {
+        console.log(' ');
+        console.log('addUploadedFfile (video)');
+        const oppositeLang = this.lang === 'en' ? 'fr' : 'en';
+        const duplicatesInOpposite = await this.filesInAssetFolder(file, oppositeLang);
+        // This array will contain either 0 or 1 promise, since we don't care for nested assets here
+        const duplicatesInShared = await this.filesInAssetFolder(file, 'shared', false);
+        let inSharedAsset = false;
+        let oppositeSourceCount = 0;
+        let newAssetName = file.name;
+        let uploadSource = `${this.configFileStructure.uuid}/assets/shared/${file.name}`;
+
+        // Should contain either 0 or 1 promise. If the promise inside is a valid asset path, then the shared asset
+        // folder contains an asset with the same name and contents, so we do nothing. If, however, the promise inside
+        // is empty, then the shared asset folder contains an asset with the same name but different content. In the
+        // latter case, we should upload the asset into the shared asset folder, but with a unique name
+        const sharedAssetPaths = await Promise.all(duplicatesInShared);
+        sharedAssetPaths.forEach((sharedAssetPath) => {
+            // If an asset with the same name, but different content, is already in the shared folder, we must give the
+            // asset we are uploading a unique name. Otherwise the existingasset will be overwritten
+            if (!sharedAssetPath) {
+                let i = 2;
+                while (this.configFileStructure.assets['shared'].file(newAssetName)) {
+                    newAssetName = `${file.name.split('.').at(0)}(${i}).${file.name.split('.').at(-1)}`;
+                    i++;
+                }
+                uploadSource = `${this.configFileStructure.uuid}/assets/shared/${newAssetName}`;
+            } else {
+                inSharedAsset = true;
+            }
+        });
+
+        if (!inSharedAsset) {
+            const oppositeAssetPaths = await Promise.all(duplicatesInOpposite);
+            // If the current promise is empty, then the current path refers to an asset in the opposite asset folder that
+            // has the same name, but different contents, as the asset uploaded. In this case we do nothing, as this asset
+            // is not a valid duplicate.
+            oppositeAssetPaths.forEach((oppositeAssetPath) => {
+                if (oppositeAssetPath) {
+                    const oppositeFileSource = `${this.configFileStructure.uuid}/assets/${oppositeLang}/${oppositeAssetPath}`;
+                    oppositeSourceCount = this.sourceCounts[oppositeFileSource] ?? 0;
+                    this.sourceCounts[oppositeFileSource] = 0;
+                    this.configFileStructure.assets[oppositeLang].remove(oppositeAssetPath);
+
+                    this.configFileStructure.assets['shared'].file(newAssetName, file);
+                    this.$emit('shared-asset', oppositeFileSource, uploadSource, oppositeLang);
+                    inSharedAsset = true;
+                }
+            });
+        }
+        // If the asset uploaded is in the shared asset folder, then no need to upload to the current langs assets folder
+        if (!inSharedAsset) {
+            console.log('asset neither in shared nor opposite');
+            // This array will contain either 0 or 1 promise, since we don't care for nested assets here
+            const duplicatesInCurrent = await this.filesInAssetFolder(file, this.lang, false);
+            const currAssetPaths = await Promise.all(duplicatesInCurrent);
+            currAssetPaths.forEach((currAssetPath) => {
+                // An asset w/ same name but different content is in current asset folder, need to rename
+                if (!currAssetPath) {
+                    console.log('asset w/ same name but different contents in curr asset folder');
+                    let i = 2;
+                    while (this.configFileStructure.assets[this.lang].file(newAssetName)) {
+                        newAssetName = `${file.name.split('.').at(0)}(${i}).${file.name.split('.').at(-1)}`;
+                        console.log('new unique curr lang asset name');
+                        console.log(newAssetName);
+                        i++;
+                    }
+                }
+            });
+            uploadSource = `${this.configFileStructure.uuid}/assets/${this.lang}/${newAssetName}`;
+            this.configFileStructure.assets[this.lang].file(newAssetName, file);
+        }
+
         if (this.sourceCounts[uploadSource]) {
-            this.sourceCounts[uploadSource] += 1;
+            this.sourceCounts[uploadSource] += 1 + oppositeSourceCount;
         } else {
-            this.sourceCounts[uploadSource] = 1;
+            this.sourceCounts[uploadSource] = 1 + oppositeSourceCount;
         }
 
         // check if source file is creating a new video or uploading captions/transcript for current video
         const fileSrc = URL.createObjectURL(file);
         if (type === 'src') {
+            const assetName = inSharedAsset ? newAssetName : file.name;
             this.videoPreview = {
-                id: file.name,
-                title: this.videoPreview.title || file.name,
+                id: uploadSource,
+                title: assetName,
                 videoType: 'local',
                 src: fileSrc
             };
-            this.findFileType(file.name);
+            this.findFileType(assetName);
         } else {
             this.videoPreview[type as 'caption' | 'transcript'] = fileSrc;
         }
@@ -301,13 +447,25 @@ export default class VideoEditorV extends Vue {
     dropVideo(e: DragEvent): void {
         if (e.dataTransfer !== null) {
             const file = [...e.dataTransfer.files][0];
-            this.addUploadedFile(file, 'src');
-            this.dragging = false;
+            this.addUploadedFile(file, 'src').then(() => {
+                this.dragging = false;
+            });
         }
         this.onVideoEdited();
     }
 
     deleteVideo(): void {
+        if (this.videoPreview.videoType === 'local') {
+            const videoSource = this.videoPreview.id;
+            const videoFolder = this.videoPreview.id.split('/')[2];
+            const videoRelativePath = this.videoPreview.id.split('/').slice(3).join('/');
+
+            this.sourceCounts[videoSource] -= 1;
+            if (this.sourceCounts[videoSource] === 0) {
+                this.configFileStructure.assets[videoFolder].remove(videoRelativePath);
+                URL.revokeObjectURL(this.videoPreview.src);
+            }
+        }
         (this.$refs.videoFileInput as HTMLInputElement).value = '';
         this.videoPreview = {};
         this.onVideoEdited();
@@ -318,10 +476,8 @@ export default class VideoEditorV extends Vue {
             // save all changes to panel config (cannot directly set to avoid prop mutate)
             this.panel.title = this.videoPreview.title;
             this.panel.videoType = this.videoPreview.videoType;
-            this.panel.src =
-                this.videoPreview.videoType === 'local'
-                    ? `${this.configFileStructure.uuid}/assets/${this.lang}/${this.videoPreview.id}`
-                    : this.videoPreview.src;
+
+            this.panel.src = this.videoPreview.videoType === 'local' ? this.videoPreview.id : this.videoPreview.src;
             this.panel.caption = this.videoPreview.caption ? this.videoPreview.caption : '';
             this.panel.transcript = this.videoPreview.transcript ? this.videoPreview.transcript : '';
         }