lib/onebox/engine/gfycat_onebox.rb in onebox-1.8.36 vs lib/onebox/engine/gfycat_onebox.rb in onebox-1.8.38

@@ -16,18 +16,36 @@
         "https://gfycat.com/cajax/get/#{match[:name]}"
       end
 
       def to_html
         <<-HTML
-          <div>
-            <video controls loop autoplay muted poster="#{data[:posterUrl]}" width="#{data[:width]}" height="#{data[:height]}">
-              <source id="webmSource" src="#{data[:webmUrl]}" type="video/webm">
-              <source id="mp4Source" src="#{data[:mp4Url]}" type="video/mp4">
-              <img title="Sorry, your browser doesn't support HTML5 video." src="#{data[:posterUrl]}">
-            </video><br/>
-            <a href="#{data[:url]}">#{data[:name]}</a>
-          </div>
+          <aside class="onebox gfycat">
+            <header class="source">
+              <img src="https://gfycat.com/static/favicons/favicon-96x96.png" class="site-icon" width="64" height="64">
+              <a href="#{data[:url]}" target="_blank" rel="nofollow noopener">Gfycat.com</a>
+            </header>
+            <article class="onebox-body">
+              <h4>
+                #{data[:title]} by
+                <a href="https://gfycat.com/@#{data[:author]}" target="_blank" rel="nofollow noopener">
+                  <span>#{data[:author]}</span>
+                </a>
+              </h4>
+
+              <div class="video">
+                <video controls loop #{data[:autoplay]} muted poster="#{data[:posterUrl]}" style="--aspect-ratio: #{data[:width]}/#{data[:height]}">
+                  <source id="webmSource" src="#{data[:webmUrl]}" type="video/webm">
+                  <source id="mp4Source" src="#{data[:mp4Url]}" type="video/mp4">
+                  <img title="Sorry, your browser doesn't support HTML5 video." src="#{data[:posterUrl]}">
+                </video>
+              </div>
+              <p>
+                <span class="label1">#{data[:tags]}</span>
+              </p>
+
+            </article>
+          </aside>
         HTML
       end
 
       def placeholder_html
         <<-HTML
@@ -39,21 +57,30 @@
       end
 
       private
 
         def match
-          @match ||= @url.match(/^https?:\/\/gfycat\.com\/(?<name>.+)/)
+          @match ||= @url.match(/^https?:\/\/gfycat\.com\/(gifs\/detail\/)?(?<name>.+)/)
         end
 
         def data
+
+          total_tags = [raw['gfyItem']['tags'], raw['gfyItem']['userTags']].flatten.compact
+          tag_links = total_tags.map { |t| "<a href='https://gfycat.com/gifs/search/#{t}'>##{t}</a>" }.join(' ') if total_tags
+          autoplay = raw['gfyItem']['webmSize'].to_i < 10485760 ? 'autoplay' : ''
+
           {
             name: raw['gfyItem']['gfyName'],
+            title: raw['gfyItem']['title'] || 'No Title',
+            author: raw['gfyItem']['userName'],
+            tags: tag_links,
             url: @url,
             posterUrl: raw['gfyItem']['posterUrl'],
             webmUrl: raw['gfyItem']['webmUrl'],
             mp4Url: raw['gfyItem']['mp4Url'],
             width: raw['gfyItem']['width'],
-            height: raw['gfyItem']['height']
+            height: raw['gfyItem']['height'],
+            autoplay: autoplay
           }
         end
 
     end
   end