feat: display gifs category

Author: peterpeterparker

studio/src/app/components/feed/card/app-feed-card-content/app-feed-card-content.tsx

@@ -2,10 +2,6 @@ import {Component, Prop, State, Watch} from '@stencil/core';
 
 import DateTimeFormatOptions = Intl.DateTimeFormatOptions;
 
-interface InputTargetEvent extends EventTarget {
-    value: string;
-}
-
 @Component({
     tag: 'app-feed-card-content',
     styleUrl: 'app-feed-card-content.scss',

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

@@ -14,10 +14,39 @@ app-gif {
       flex-basis: 50%;
       max-width: 50%;
 
-      img {
-        width: calc(100% - 4px);
-        padding: 2px;
-        border-radius: 4px;
+      div.gifs-category, div.gif {
+        position: relative;
+
+        div.gifs-category-container, div.gif-container {
+          border-radius: 4px;
+          overflow: hidden;
+          position: relative;
+
+          img {
+            width: 100%;
+            height: auto;
+            min-height: 150px;
+            vertical-align: top;
+          }
+
+          div.gifs-category-placeholder {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+
+            background: rgba(var(--ion-color-dark-rgb), 0.6);
+
+            h2 {
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%, -50%);
+              color: white;
+            }
+          }
+        }
       }
     }
   }

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

@@ -14,22 +14,29 @@ export class AppGif {
 
     private gifService: GifService;
 
+    @State()
+    private categoriesOdd: TenorCategory[];
+
+    @State()
+    private categoriesEven: TenorCategory[];
+
     @State()
     private gifsOdd: TenorGif[];
 
     @State()
     private gifsEven: TenorGif[];
 
+    @State()
+    private searchTerm: string;
+
     constructor() {
         this.gifService = GifService.getInstance();
     }
 
     async componentDidLoad() {
         history.pushState({modal: true}, null);
 
-        const gifs: TenorGif[] = await this.gifService.getTrending();
-        this.gifsOdd = gifs.filter((_a, i) => i % 2);
-        this.gifsEven = gifs.filter((_a, i) => !(i % 2));
+        await this.fetchCategories();
     }
 
     @Listen('window:popstate')
@@ -52,6 +59,64 @@ export class AppGif {
         });
     }
 
+    private fetchCategories(): Promise<void> {
+        return new Promise<void>(async (resolve) => {
+            const categories: TenorCategory[] = await this.gifService.getCategories();
+
+            if (!categories || categories.length <= 0) {
+                resolve();
+                return;
+            }
+
+            this.categoriesOdd = categories.filter((_a, i) => i % 2);
+            this.categoriesEven = categories.filter((_a, i) => !(i % 2));
+
+            resolve();
+        });
+    }
+
+    private selectCategory(searchTerm: string) {
+        this.searchTerm = searchTerm;
+    }
+
+    private search(): Promise<void> {
+        return new Promise<void>(async (resolve) => {
+            if (!this.searchTerm || this.searchTerm.length <= 0) {
+                await this.clear();
+                resolve();
+                return;
+            }
+
+            const gifs: TenorGif[] = await this.gifService.getGifs(this.searchTerm);
+
+            if (!gifs || gifs.length <= 0) {
+                this.gifsOdd = [];
+                this.gifsEven = [];
+
+                resolve();
+                return;
+            }
+
+            this.gifsOdd = gifs.filter((_a, i) => i % 2);
+            this.gifsEven = gifs.filter((_a, i) => !(i % 2));
+
+            resolve();
+        });
+    }
+
+    private clear(): Promise<void> {
+        return new Promise<void>((resolve) => {
+            this.gifsOdd = null;
+            this.gifsEven = null;
+
+            resolve();
+        });
+    }
+
+    private handleInput($event: CustomEvent<KeyboardEvent>) {
+        this.searchTerm = ($event.target as InputTargetEvent).value;
+    }
+
     render() {
         return [
             <ion-header>
@@ -67,30 +132,67 @@ export class AppGif {
             <ion-content padding>
                 <div class="gifs-container">
                     <div class="gifs-column">
+                        {this.renderCategories(this.categoriesOdd)}
                         {this.renderGifs(this.gifsOdd)}
                     </div>
                     <div class="gifs-column">
+                        {this.renderCategories(this.categoriesEven)}
                         {this.renderGifs(this.gifsEven)}
                     </div>
                 </div>
             </ion-content>,
             <ion-footer>
                 <ion-toolbar>
-                    <ion-searchbar debounce={500} placeholder="Search Tenor"></ion-searchbar>
+                    <ion-searchbar debounce={500} placeholder="Search Tenor" value={this.searchTerm}
+                                   onIonClear={() => this.clear()}
+                                   onIonInput={(e: CustomEvent<KeyboardEvent>) => this.handleInput(e)}
+                                   onIonChange={() => {
+                                       this.search()
+                                   }}></ion-searchbar>
                 </ion-toolbar>
             </ion-footer>
         ];
     }
 
+    private renderCategories(categories: TenorCategory[]) {
+        if (this.gifsEven || this.gifsOdd) {
+            return undefined;
+        }
+
+        if (categories && categories.length > 0) {
+            return (
+                categories.map((category: TenorCategory) => {
+                    if (category.image) {
+                        return <div custom-tappable class="gifs-category ion-padding"
+                                    onClick={() => this.selectCategory(category.searchterm)}>
+                            <div class="gifs-category-container">
+                                <img src={category.image}></img>
+                                <div class="gifs-category-placeholder">
+                                    <h2 class="ion-no-margin">{category.name}</h2>
+                                </div>
+                            </div>
+                        </div>
+                    } else {
+                        return undefined;
+                    }
+                })
+            );
+        } else {
+            return undefined;
+        }
+    }
+
     private renderGifs(gifs: TenorGif[]) {
         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
                         && 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>
+                        return <div class="gif ion-padding" custom-tappable onClick={() => this.addSlide(gif)}>
+                            <div class="gif-container">
+                                <img src={gif.media[0].tinygif.url} alt={gif.title ? gif.title : gif.url}></img>
+                            </div>
                         </div>
                     } else {
                         return undefined;

studio/src/app/services/gif/gif.service.tsx

@@ -23,12 +23,35 @@ export class GifService {
         return GifService.instance;
     }
 
-    // call the trending and category endpoints
-    getTrending(): Promise<TenorGif[]> {
-        return new Promise<TenorGif[]>(async (resolve, reject) => {
+    getCategories(): Promise<TenorCategory[]> {
+        return new Promise<TenorCategory[]>(async (resolve) => {
             const config: EnvironmentTenorConfig = EnvironmentConfigService.getInstance().get('tenor');
 
-            const searchTerm: string = 'excited';
+            const anonymousId: string = await this.getAnonymousId();
+
+            const searchUrl = config.url + 'categories?key=' + config.key + '&anon_id=' + anonymousId + '&media_filter=minimal';
+
+            try {
+                const rawResponse: Response = await fetch(searchUrl);
+
+                const response: TenorCategoryResponse = JSON.parse(await rawResponse.text());
+
+                if (!response) {
+                    this.errorService.error('Tenor trending could not be fetched');
+                    return;
+                }
+
+                resolve(response.tags);
+            } catch (err) {
+                this.errorService.error(err.message);
+                resolve(err);
+            }
+        });
+    }
+
+    getGifs(searchTerm: string): Promise<TenorGif[]> {
+        return new Promise<TenorGif[]>(async (resolve) => {
+            const config: EnvironmentTenorConfig = EnvironmentConfigService.getInstance().get('tenor');
 
             const anonymousId: string = await this.getAnonymousId();
 
@@ -41,13 +64,15 @@ export class GifService {
                 const response: TenorTrendingResponse = JSON.parse(await rawResponse.text());
 
                 if (!response) {
-                    reject('Tenor trending could not be fetched');
+                    this.errorService.error('Tenor trending could not be fetched');
+                    resolve();
+                    return;
                 }
 
                 resolve(response.results);
             } catch (err) {
                 this.errorService.error(err.message);
-                reject(err);
+                resolve();
             }
         });
     }

studio/src/app/utils/input.d.ts

@@ -0,0 +1,3 @@
+interface InputTargetEvent extends EventTarget {
+    value: string;
+}

studio/src/app/utils/tenor.d.ts

@@ -36,11 +36,21 @@ interface TenorGif {
     media: TenorMedia[];
 }
 
-
 interface TenorTrendingResponse {
     results: TenorGif[];
 }
 
+interface TenorCategory {
+    searchterm: string;
+    path: string;
+    image: string;
+    name: string;
+}
+
+interface TenorCategoryResponse {
+    tags: TenorCategory[];
+}
+
 interface TenorAnonymousResponse {
     anon_id: string;
 }

studio/src/components.d.ts

@@ -8,9 +8,9 @@
 import '@stencil/core';
 
 import '@ionic/core';
-import 'ionicons';
 import 'deckdeckgo';
 import 'deckdeckgo-inline-editor';
+import 'ionicons';
 import {
   EventEmitter,
 } from '@stencil/core';