feat: update Gifs UX and create new slide with requested URL

Author: peterpeterparker

studio/src/app/modals/editor/app-gif/app-gif.tsx

@@ -1,5 +1,7 @@
 import {Component, Element, Listen, State} from '@stencil/core';
 
+import {EditorUtils} from '../../../utils/editor-utils';
+
 import {GifService} from '../../../services/gif/gif.service';
 
 @Component({
@@ -39,6 +41,17 @@ export class AppGif {
         await (this.el.closest('ion-modal') as HTMLIonModalElement).dismiss();
     }
 
+    private addSlide(gif: TenorGif): Promise<void> {
+        return new Promise<void>(async (resolve) => {
+            const url: string = gif.media[0].gif.url;
+
+            const slide: any = await EditorUtils.createSlideGif(url);
+            await (this.el.closest('ion-modal') as HTMLIonModalElement).dismiss(slide);
+
+            resolve();
+        });
+    }
+
     render() {
         return [
             <ion-header>
@@ -73,8 +86,12 @@ export class AppGif {
         if (gifs && gifs.length > 0) {
             return (
                 gifs.map((gif: TenorGif) => {
-                    if (gif.media && gif.media.length > 0 && gif.media[0].tinygif && gif.media[0].tinygif.url) {
-                        return <img src={gif.media[0].tinygif.url} alt={gif.title ? gif.title : gif.url}></img>
+                    if (gif.media && gif.media.length > 0
+                        && gif.media[0].tinygif && gif.media[0].tinygif.url
+                        && gif.media[0].gif && gif.media[0].gif.url) {
+                        return <div custom-tappable onClick={() => this.addSlide(gif)}>
+                            <img src={gif.media[0].tinygif.url} alt={gif.title ? gif.title : gif.url}></img>
+                        </div>
                     } else {
                         return undefined;
                     }

studio/src/app/pages/editor/app-editor/app-editor.tsx

@@ -291,21 +291,29 @@ export class AppEditor {
             }
 
             if (detail.data.slide) {
-                await this.concatSlide(detail.data.slide);
-                await this.slideToLastSlide();
+                await this.addSlide(detail.data.slide);
             }
         });
 
         await popover.present();
     }
 
+    private async addSlide(slide: any) {
+        await this.concatSlide(slide);
+        await this.slideToLastSlide();
+    }
+
     private async openGifPicker() {
         const modal: HTMLIonModalElement = await this.modalController.create({
             component: 'app-gif'
         });
 
-        modal.onDidDismiss().then(async (_detail: OverlayEventDetail) => {
-            // TODO: apply gif
+        modal.onDidDismiss().then(async (detail: OverlayEventDetail) => {
+            if (detail.data) {
+                await this.addSlide(detail.data);
+
+                // TODO: call lazy load
+            }
         });
 
         await modal.present();

studio/src/app/popovers/editor/app-slide-type/app-slide-type.tsx

@@ -33,10 +33,10 @@ export class AppSlideType {
 
     private async addSlide(template: SlideTemplate) {
         const slide: any = await EditorUtils.createSlide(template);
-        await this.closePopover(slide, template);
+        await this.closePopover(template, slide);
     }
 
-    async closePopover(slide: any, template: SlideTemplate) {
+    async closePopover(template: SlideTemplate, slide?: any) {
         await (this.el.closest('ion-popover') as HTMLIonModalElement).dismiss({
             slide: slide,
             template: template
@@ -63,7 +63,7 @@ export class AppSlideType {
                     <p slot="end">Content</p>
                 </deckgo-slide-split>
             </div>
-            <div class="item" custom-tappable onClick={() => this.addSlide(SlideTemplate.GIF)}>
+            <div class="item" custom-tappable onClick={() => this.closePopover(SlideTemplate.GIF)}>
                 <deckgo-slide-gif src="./assets/img/example.gif" alt="Slide Gif">
                     <p slot="footer" style={{"font-size": "var(--font-size-very-small)", padding: "2px", "border-radius": "4px"}}>GIFs</p>
                 </deckgo-slide-gif>

studio/src/app/utils/editor-utils.tsx

@@ -27,7 +27,7 @@ export class EditorUtils {
             } else if (template === SlideTemplate.SPLIT) {
                 resolve(await this.createSlideSplit());
             } else if (template === SlideTemplate.GIF) {
-                resolve(await this.createSlideGif());
+                resolve(await this.createSlideGif('./assets/img/example.gif'));
             } else {
                 resolve(null);
             }
@@ -106,7 +106,7 @@ export class EditorUtils {
         });
     }
 
-    private static createSlideGif(): Promise<any> {
+    static createSlideGif(src: string): Promise<any> {
         return new Promise<any>((resolve) => {
             if (!document) {
                 resolve();
@@ -121,7 +121,7 @@ export class EditorUtils {
                 {this.DEFAULT_CAPTION}
             </h2>;
 
-            const slide: any = <deckgo-slide-gif src="./assets/img/example.gif">
+            const slide: any = <deckgo-slide-gif src={src}>
                 {title}
                 {content}
             </deckgo-slide-gif>;