Removed "zoom" in gif selector in favor of instant-insert

refs https://github.com/TryGhost/Team/issues/1220

- there's no options for individual gifs like there are with Unsplash images and there's no real need to zoom for gifs that are already fairly small so the extra zoom step is unnecessary

ghost/admin/app/components/gh-tenor.hbs

@@ -42,7 +42,6 @@
                                     {{#each gifs as |gif|}}
                                         <GhTenor::Gif
                                             @gif={{gif}}
-                                            @zoom={{fn this.zoom gif}}
                                             @select={{fn this.select gif}} />
                                     {{/each}}
                                 </div>
@@ -78,17 +77,6 @@
                             @triggerOffset={{1000}} />
                     {{/unless}}
                 </div>
-
-                {{!-- zoomed image overlay --}}
-                {{#if this.zoomedGif}}
-                    <div class="absolute flex justify-center top-0 right-0 bottom-0 left-0 pr20 pb10 pl20 bg-white overflow-hidden" {{on "click" this.closeZoom}}>
-                        <GhTenor::Gif
-                            @gif={{this.zoomedGif}}
-                            @zoomed={{true}}
-                            @zoom={{this.closeZoom}}
-                            @select={{fn this.select this.zoomedGif}} />
-                    </div>
-                {{/if}}
             </div>
         </div>
     </div>

ghost/admin/app/components/gh-tenor.js

@@ -9,8 +9,6 @@ const THREE_COLUMN_WIDTH = 940;
 export default class GhTenorComponent extends Component {
     @service tenor;
 
-    @tracked zoomedGif;
-
     willDestroy() {
         super.willDestroy(...arguments);
         this._resizeObserver?.disconnect();
@@ -48,18 +46,6 @@ export default class GhTenorComponent extends Component {
         this._resizeObserver.observe(containerElem);
     }
 
-    @action
-    zoom(gif, event) {
-        event?.preventDefault();
-        this.zoomedGif = gif;
-    }
-
-    @action
-    closeZoom(event) {
-        event?.preventDefault();
-        this.zoomedGif = null;
-    }
-
     @action
     select(gif, event) {
         event?.preventDefault();
@@ -80,10 +66,6 @@ export default class GhTenorComponent extends Component {
 
     @action
     handleEscape() {
-        if (this.zoomedGif) {
+        this.args.close();
-            this.zoomedGif = null;
-        } else {
-            this.args.close();
-        }
     }
 }

ghost/admin/app/components/gh-tenor/gif.hbs

@@ -1,23 +1,5 @@
-<a class="gh-unsplash-photo" href="#" {{on "click" @zoom}} data-tenor-zoomed-gif={{if @zoomed @gif.id}} data-test-tenor-gif={{@gif.id}} style={{this.style}} {{did-insert this.didInsert}}>
+<a class="gh-tenor-gif" href="#" {{on "click" @select}} data-test-tenor-gif={{@gif.id}} style={{this.style}}>
     <div class="gh-unsplash-photo-container" style={{this.containerStyle}} data-test-tenor-gif-container>
         <img src={{this.imageUrl}} alt={{@gif.description}} width={{this.width}} height={{this.height}} data-test-tenor-gif-image />
-
-        <div class="gh-unsplash-photo-overlay">
-            <div class="gh-unsplash-photo-header">
-                {{!-- <a class="gh-unsplash-button-likes gh-unsplash-button" href="{{@gif.links.html}}?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit" target="_blank">{{svg-jar "unsplash-heart"}}{{@gif.likes}}</a>
-                <a class="gh-unsplash-button-download gh-unsplash-button" href="{{@gif.links.download}}/?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit&force=true">{{svg-jar "download"}}</a> --}}
-            </div>
-            <div class="gh-unsplash-photo-footer">
-                <div class="gh-unsplash-photo-author">
-                    {{!-- <a class="gh-unsplash-photo-author-img" href="{{@gif.user.links.html}}?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit" target="_blank">
-                        <img src="{{@gif.user.profile_image.medium}}" />
-                    </a>
-                    <a class="gh-unsplash-photo-author-name" href="{{@gif.user.links.html}}?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit" target="_blank">
-                        {{@gif.user.name}}
-                    </a> --}}
-                </div>
-                <button class="gh-unsplash-button" {{on "click" @select}}>Insert gif</button>
-            </div>
-        </div>
     </div>
 </a>

ghost/admin/app/components/gh-tenor/gif.js

@@ -1,15 +1,9 @@
 import Component from '@glimmer/component';
-import {action} from '@ember/object';
 import {htmlSafe} from '@ember/template';
-import {run} from '@ember/runloop';
 
 export default class GhTenorGifComponent extends Component {
     get media() {
-        if (this.args.zoomed) {
+        return this.args.gif.media[0].tinygif;
-            return this.args.gif.media[0].gif;
-        } else {
-            return this.args.gif.media[0].tinygif;
-        }
     }
 
     get imageUrl() {
@@ -35,82 +29,9 @@ export default class GhTenorGifComponent extends Component {
 
         const styles = [];
         const ratio = this.args.gif.ratio;
-        const zoomed = this.args.zoomed;
 
-        if (zoomed) {
+        styles.push(`padding-bottom: ${ratio * 100}%`);
-            styles.push(`cursor: zoom-out`);
-        } else {
-            styles.push(`padding-bottom: ${ratio * 100}%`);
-        }
 
         return htmlSafe(styles.join('; '));
     }
-
-    willDestroy() {
-        super.willDestroy(...arguments);
-        this._teardownResizeHandler();
-    }
-
-    @action
-    didInsert() {
-        this._hasRendered = true;
-
-        if (this.args.zoomed) {
-            this._setZoomedSize();
-            this._setupResizeHandler();
-        }
-    }
-
-    // adjust dimensions so that the full gif is visible on-screen no matter it's ratio
-    _setZoomedSize() {
-        if (!this._hasRendered) {
-            return;
-        }
-
-        const a = document.querySelector(`[data-tenor-zoomed-gif="${this.args.gif.id}"]`);
-
-        a.style.width = '100%';
-        a.style.height = '100%';
-
-        const offsets = a.getBoundingClientRect();
-        const ratio = this.args.gif.ratio;
-
-        const maxHeight = {
-            width: offsets.height / ratio,
-            height: offsets.height
-        };
-
-        const maxWidth = {
-            width: offsets.width,
-            height: offsets.width * ratio
-        };
-
-        let usableSize;
-
-        if (ratio <= 1) {
-            usableSize = maxWidth.height > offsets.height ? maxHeight : maxWidth;
-        } else {
-            usableSize = maxHeight.width > offsets.width ? maxWidth : maxHeight;
-        }
-
-        a.style.width = `${usableSize.width}px`;
-        a.style.height = `${usableSize.height}px`;
-    }
-
-    _setupResizeHandler() {
-        if (this._resizeHandler) {
-            return;
-        }
-
-        this._resizeHandler = run.bind(this, this._handleResize);
-        window.addEventListener('resize', this._resizeHandler);
-    }
-
-    _teardownResizeHandler() {
-        window.removeEventListener('resize', this._resizeHandler);
-    }
-
-    _handleResize() {
-        this._throttleResize = run.throttle(this, this._setZoomedSize, 100);
-    }
 }

ghost/admin/app/styles/components/unsplash.css

@@ -1,4 +1,4 @@
-/* Unsplash Integration
+/* Unsplash+Tenor Integration
 /* ---------------------------------------------------------- */
 
 
@@ -281,3 +281,15 @@
 .gh-unsplash-zoom .gh-unsplash-photo-overlay {
     opacity: 1;
 }
+
+/* Tenor Integration
+/* ---------------------------------------------------------- */
+
+.gh-tenor-gif {
+    position: relative;
+    display: block;
+    width: 100%;
+    margin: 0 0 24px;
+    color: #fff;
+    cursor: pointer;
+}