FIX: Support pausing GIFs for giphy/tenor oneboxes (#13194)

FIX: Support pausing GIFs for giphy/tenor oneboxes (#13194)

diff --git a/lib/onebox/engine.rb b/lib/onebox/engine.rb
index 1b2448d..cdd3adc 100644
--- a/lib/onebox/engine.rb
+++ b/lib/onebox/engine.rb
@@ -171,7 +171,7 @@ require_relative "engine/imgur_onebox"
 require_relative "engine/pastebin_onebox"
 require_relative "engine/slides_onebox"
 require_relative "engine/xkcd_onebox"
-require_relative "engine/giphy_onebox"
+require_relative "engine/animated_image_onebox"
 require_relative "engine/gfycat_onebox"
 require_relative "engine/typeform_onebox"
 require_relative "engine/vimeo_onebox"
diff --git a/lib/onebox/engine/animated_image_onebox.rb b/lib/onebox/engine/animated_image_onebox.rb
new file mode 100644
index 0000000..6ef2fe4
--- /dev/null
+++ b/lib/onebox/engine/animated_image_onebox.rb
@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Onebox
+  module Engine
+    class AnimatedImageOnebox
+      include Engine
+      include StandardEmbed
+
+      matches_regexp(/^https?:\/\/.*(giphy\.com|gph\.is|tenor\.com)\//)
+      always_https
+
+      def to_html
+        og = get_opengraph
+        "<img src='#{og.image}' width='#{og.image_width}' height='#{og.image_height}' class='animated onebox' #{og.title_attr}>"
+      end
+    end
+  end
+end
diff --git a/lib/onebox/engine/giphy_onebox.rb b/lib/onebox/engine/giphy_onebox.rb
deleted file mode 100644
index 569f423..0000000
--- a/lib/onebox/engine/giphy_onebox.rb
+++ /dev/null
@@ -1,23 +0,0 @@
-# frozen_string_literal: true
-
-module Onebox
-  module Engine
-    class GiphyOnebox
-      include Engine
-      include StandardEmbed
-
-      matches_regexp(/^https?:\/\/(giphy\.com\/gifs|gph\.is)\//)
-      always_https
-
-      def to_html
-        oembed = get_oembed
-
-        <<-HTML
-          <a href="#{oembed.url}" target="_blank" rel="noopener" class="onebox">
-            <img src="#{oembed.url}" width="#{oembed.width}" height="#{oembed.height}" #{oembed.title_attr}>
-          </a>
-        HTML
-      end
-    end
-  end
-end
diff --git a/spec/fixtures/onebox/giphy.response b/spec/fixtures/onebox/giphy.response
new file mode 100644
index 0000000..f21f475
--- /dev/null
+++ b/spec/fixtures/onebox/giphy.response
@@ -0,0 +1,335 @@
+
+<!DOCTYPE html>
+<html lang="en">
+  <head >
+    <link rel="preload" href="https://giphy.com/static/webfonts/InterFace_W_Bd.woff2" crossorigin="anonymous" as="font">
+    <link rel="preload" href="https://giphy.com/static/webfonts/InterFace_W_Rg.woff2" crossorigin="anonymous" as="font">
+    <link rel="preload" href="https://giphy.com/static/webfonts/nexa_black-webfont.woff2" crossorigin="anonymous" as="font">
+    <link rel="preload" href="https://giphy.com/static/webfonts/ss-standard.woff2" crossorigin="anonymous" as="font">
+      <meta charset="utf-8" />
+      <title>Happy So Excited GIF - Find &amp; Share on GIPHY</title>
+
+
+
+              <link rel="canonical" href="https://giphy.com/gifs/excited-oprah-shouting-y8Mz1yj13s3kI"/>
+
+
+
+      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+      <meta name="google-site-verification" content="8mfne8CLOmysP4fUdGDJioWLEGbHMJY4tBsxsQT2eSY" />
+      <meta name="msvalidate.01" content="F8A7FDC3D369E857ACB67C4AB8EBD9A4" />
+      <meta name="alexaVerifyID" content="HMyPJIK-pLEheM5ACWFf6xvnA2U" />
+      <meta property="fb:admins" content="548288355" />
+      <meta name="p:domain_verify" content="61a9a962d47f10756a14a44c1b44d7c8"/>
+      <meta name="viewport" content="width=device-width, user-scalable=1, initial-scale=1.0">
+
+
+
+
+        <meta name="robots" content="noindex, follow" />
+
+
+
+
+          <meta property="fb:app_id" content="406655189415060">
+    <meta property="og:site_name" content="GIPHY">
+    <meta property="og:url" content="https://media1.giphy.com/media/y8Mz1yj13s3kI/giphy.gif?cid=790b76118e5e3d667e79732abfe7580e5f1f5f83322f19be&amp;rid=giphy.gif&amp;ct=g">
+    <meta property="og:title" content="Happy So Excited GIF - Find &amp; Share on GIPHY">
+    <meta property="og:description" content="Discover &amp; share this Happy GIF with everyone you know. GIPHY is how you search, share, discover, and create GIFs.">
+
+
+
+
+    <meta property="og:type" content="video.other">
+    <meta property="og:image" content="https://media1.giphy.com/media/y8Mz1yj13s3kI/giphy.gif?cid=790b76118e5e3d667e79732abfe7580e5f1f5f83322f19be&amp;rid=giphy.gif&amp;ct=g">
+    <meta property="og:image:type" content="image/gif">
+    <meta property="og:image:width" content="500">
+    <meta property="og:image:height" content="375">
+
+
+    <meta property="og:video" content="https://media1.giphy.com/media/y8Mz1yj13s3kI/giphy.mp4?cid=790b76118e5e3d667e79732abfe7580e5f1f5f83322f19be&rid=giphy.mp4&ct=g">
+    <meta property="og:video:url" content="https://media1.giphy.com/media/y8Mz1yj13s3kI/giphy.mp4?cid=790b76118e5e3d667e79732abfe7580e5f1f5f83322f19be&rid=giphy.mp4&ct=g">
+    <meta property="og:video:secure_url" content="https://media1.giphy.com/media/y8Mz1yj13s3kI/giphy.mp4?cid=790b76118e5e3d667e79732abfe7580e5f1f5f83322f19be&rid=giphy.mp4&ct=g">
+    <meta property="og:video:type" content="video/mp4">
+    <meta property="og:video:width" content="500">
+    <meta property="og:video:height" content="375">
+
+
+    <meta name="twitter:account_id" content="1020383864" />
+    <meta name="twitter:card" content="player">
+    <meta name="twitter:title" content="Happy So Excited GIF - Find &amp; Share on GIPHY">
+    <meta name="twitter:creator" content="@Private~">
+    <meta name="twitter:site" content="@giphy">
+    <meta name="twitter:description" content="Discover &amp; share this Happy GIF with everyone you know. GIPHY is how you search, share, discover, and create GIFs.">
+
+    <meta name="twitter:image:src" content="https://media1.giphy.com/media/y8Mz1yj13s3kI/giphy_s.gif?cid=790b76118e5e3d667e79732abfe7580e5f1f5f83322f19be&amp;rid=giphy_s.gif&amp;ct=g">
+    <meta name="twitter:image" content="https://media1.giphy.com/media/y8Mz1yj13s3kI/giphy_s.gif?cid=790b76118e5e3d667e79732abfe7580e5f1f5f83322f19be&amp;rid=giphy_s.gif&amp;ct=g">
+
+    <meta name="twitter:domain" content="giphy.com">
+
+
+    <meta name="twitter:player" content="https://giphy.com/embed/y8Mz1yj13s3kI/twitter/iframe">
+    <meta name="twitter:player:width" content="435">
+    <meta name="twitter:player:height" content="326">
+
+
+
+    <meta name="rating" content="general">
+    <meta name="image:rating" content="g">
+
+
+    <!-- /twitter seo -->
+
+    <meta name="description" content="Discover &amp; share this Happy GIF with everyone you know. GIPHY is how you search, share, discover, and create GIFs."/>
+    <meta name="author" content="GIPHY"/>
+    <meta name="keywords" content="happy, excited, reactions, yay, great, ladies, exciting, oprah, shouting, you rock, so excited, oprah winfrey, reaction, women, awesome, emotions, stoked, classic reaction, im so excited, koreantagexcited, GIF, Animated GIF">
+    <meta name="pinterest" content="nohover">
+
+
+
+      <link rel="alternate" type="application/json+oembed" href="https://giphy.com/services/oembed?url=https://media1.giphy.com/media/y8Mz1yj13s3kI/giphy.gif?cid=790b76118e5e3d667e79732abfe7580e5f1f5f83322f19be&amp;rid=giphy.gif&amp;ct=g" title="Happy So Excited GIF - Find &amp; Share on GIPHY oEmbed Lookup" />
+
+
+
+
+      <link rel="icon" type="image/png" href="https://giphy.com/static/img/favicon.png" />
+      <meta name="apple-mobile-web-app-title" content="GIPHY">
+      <link rel="apple-touch-icon" sizes="120x120" href="https://giphy.com/static/img/icons/apple-touch-icon-120px.png"/>
+      <link rel="apple-touch-icon" sizes="180x180" href="https://giphy.com/static/img/icons/apple-touch-icon-180px.png" />
+      <link rel="apple-touch-icon" sizes="152x152" href="https://giphy.com/static/img/icons/apple-touch-icon-152px.png" />
+      <link rel="apple-touch-icon" sizes="167x167" href="https://giphy.com/static/img/icons/apple-touch-icon-167px.png" />
+

[... diff too long, it was truncated ...]

GitHub sha: 47e09700

This commit appears in #13194 which was approved by gschlager. It was merged by pmusaraj.