diff --git a/project.clj b/project.clj
index 800bd252..a3e30035 100644
--- a/project.clj
+++ b/project.clj
@@ -39,7 +39,7 @@
                  [district0x/district-time "1.0.1"]
                  [district0x/district-ui-component-active-account "1.0.1"]
                  [district0x/district-ui-component-active-account-balance "1.0.1"]
-                 [district0x/district-ui-component-form "0.2.11"]
+                 [district0x/district-ui-component-form "0.2.14"]
                  [district0x/district-ui-component-meta-tags "1.0.0"]
                  [district0x/district-ui-component-notification "1.0.0"]
                  [district0x/district-ui-component-tx-button "1.0.0"]
diff --git a/resources/public/assets/icons/play-button.svg b/resources/public/assets/icons/play-button.svg
new file mode 100644
index 00000000..aec93557
--- /dev/null
+++ b/resources/public/assets/icons/play-button.svg
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 142.448 142.448" style="enable-background:new 0 0 142.448 142.448;" xml:space="preserve">
+<g>
+	<path style="fill:#fafafa;" d="M142.411,68.9C141.216,31.48,110.968,1.233,73.549,0.038c-20.361-0.646-39.41,7.104-53.488,21.639
+		C6.527,35.65-0.584,54.071,0.038,73.549c1.194,37.419,31.442,67.667,68.861,68.861c0.779,0.025,1.551,0.037,2.325,0.037
+		c19.454,0,37.624-7.698,51.163-21.676C135.921,106.799,143.033,88.377,142.411,68.9z M111.613,110.336
+		c-10.688,11.035-25.032,17.112-40.389,17.112c-0.614,0-1.228-0.01-1.847-0.029c-29.532-0.943-53.404-24.815-54.348-54.348
+		c-0.491-15.382,5.122-29.928,15.806-40.958c10.688-11.035,25.032-17.112,40.389-17.112c0.614,0,1.228,0.01,1.847,0.029
+		c29.532,0.943,53.404,24.815,54.348,54.348C127.91,84.76,122.296,99.306,111.613,110.336z"/>
+	<path style="fill:#fafafa;" d="M94.585,67.086L63.001,44.44c-3.369-2.416-8.059-0.008-8.059,4.138v45.293
+		c0,4.146,4.69,6.554,8.059,4.138l31.583-22.647C97.418,73.331,97.418,69.118,94.585,67.086z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/src/memefactory/server/db.cljs b/src/memefactory/server/db.cljs
index ed1fd856..3618c63d 100644
--- a/src/memefactory/server/db.cljs
+++ b/src/memefactory/server/db.cljs
@@ -48,6 +48,7 @@
    [:meme/number :integer default-nil]
    [:meme/image-hash ipfs-hash not-nil]
    [:meme/meta-hash ipfs-hash not-nil]
+   [:meme/animation-hash ipfs-hash default-nil]
    [:meme/total-supply :unsigned :integer not-nil]
    [:meme/total-minted :unsigned :integer not-nil]
    [:meme/token-id-start :varchar default-nil]
@@ -247,7 +248,10 @@
 (defn patch-forbidden-reg-entry-image! [address]
   (db/run! {:update :memes
             :set {:meme/image-hash "forbidden-image-hash"}
-            :where [:= :reg-entry/address address]}))
+            :where [:= :reg-entry/address address]})
+  (db/run! {:update :memes
+            :set {:meme/animation-hash "forbidden-animation-hash"}
+            :where [:and [:= :reg-entry/address address] [:<> :meme/animation-hash nil]]}))
 
 (defn assign-meme-number! [address n]
   (db/run! {:update :memes
diff --git a/src/memefactory/server/emailer.cljs b/src/memefactory/server/emailer.cljs
index 391b54ea..9569b394 100644
--- a/src/memefactory/server/emailer.cljs
+++ b/src/memefactory/server/emailer.cljs
@@ -61,7 +61,7 @@
 
 (defn send-challenge-created-email [{:keys [:registry-entry :commit-period-end] :as ev}]
   (safe-go
-   (let [{:keys [:reg-entry/creator :meme/title :meme/image-hash] :as meme} (db/get-meme registry-entry)
+   (let [{:keys [:reg-entry/creator :meme/title :meme/image-hash :meme/animation-hash] :as meme} (db/get-meme registry-entry)
          {:keys [:from :template-id :api-key :print-mode?]} (get-in @config/config [:emailer])
          root-url (format/ensure-trailing-slash (get-in @config/config [:ui :root-url]))
          ipfs-gateway-url (format/ensure-trailing-slash (get-in @config/config [:ipfs :gateway]))
@@ -69,7 +69,7 @@
          [unit value] (time/time-remaining-biggest-unit (cljs-time/now)
                                                         (-> commit-period-end time/epoch->long time-coerce/from-long))
          time-remaining (format/format-time-units {unit value})
-         meme-image-url (str ipfs-gateway-url image-hash)
+         meme-image-url (str ipfs-gateway-url (or animation-hash image-hash))
          email (<? (district0x-emails/get-email {:district0x-emails/address creator}))]
      (if-let [to (validate-email email)]
        (do
@@ -127,11 +127,11 @@
 (defn send-auction-bought-email [{:keys [:meme-auction :buyer :price] :as ev}]
   (safe-go
    (let [{:keys [:meme-auction/seller :meme-auction/address] :as meme-auction} (db/get-meme-auction meme-auction)
-         {:keys [:reg-entry/address :meme/title :meme/image-hash]} (db/get-meme-by-auction-address address)
+         {:keys [:reg-entry/address :meme/title :meme/image-hash :meme/animation-hash]} (db/get-meme-by-auction-address address)
          {:keys [:from :template-id :api-key :print-mode?]} (get-in @config/config [:emailer])
          root-url (format/ensure-trailing-slash (get-in @config/config [:ui :root-url]))
          ipfs-gateway-url (format/ensure-trailing-slash (get-in @config/config [:ipfs :gateway]))
-         meme-image-url (str ipfs-gateway-url image-hash)
+         meme-image-url (str ipfs-gateway-url (or animation-hash image-hash))
          buyer-url (str root-url "memefolio/" buyer)
          meme-url (str root-url "meme-detail/" address)
          button-url (str root-url "memefolio/?tab=sold")
@@ -194,14 +194,14 @@
 
 (defn send-vote-reward-claimed-email [{:keys [:registry-entry :voter :amount] :as ev}]
   (safe-go
-   (let [{:keys [:meme/title :meme/image-hash] :as meme} (db/get-meme registry-entry)
+   (let [{:keys [:meme/title :meme/image-hash :meme/animation-hash] :as meme} (db/get-meme registry-entry)
          {:keys [:vote/option]} (db/get-vote {:reg-entry/address registry-entry :vote/voter voter} [:vote/option])
          {:keys [:from :template-id :api-key :print-mode?]} (get-in @config/config [:emailer ])
          root-url (format/ensure-trailing-slash (get-in @config/config [:ui :root-url]))
          ipfs-gateway-url (format/ensure-trailing-slash (get-in @config/config [:ipfs :gateway]))
          button-url (str root-url "memefolio/?tab=curated")
          meme-url (str root-url "meme-detail/" registry-entry)
-         meme-image-url (str ipfs-gateway-url image-hash)
+         meme-image-url (str ipfs-gateway-url (or animation-hash image-hash))
          email (<? (district0x-emails/get-email {:district0x-emails/address voter}))]
      (if-let [to (validate-email email)]
        (do
@@ -257,12 +257,12 @@
 
 (defn send-challenge-reward-claimed-email [{:keys [:registry-entry :challenger :amount] :as ev}]
   (safe-go
-   (let [{:keys [:meme/title :meme/image-hash] :as meme} (db/get-meme registry-entry)
+   (let [{:keys [:meme/title :meme/image-hash :meme/animation-hash] :as meme} (db/get-meme registry-entry)
          {:keys [:from :template-id :api-key :print-mode?]} (get-in @config/config [:emailer])
          root-url (format/ensure-trailing-slash (get-in @config/config [:ui :root-url]))
          ipfs-gateway-url (format/ensure-trailing-slash (get-in @config/config [:ipfs :gateway]))
          meme-url (str root-url "meme-detail/" registry-entry)
-         meme-image-url (str ipfs-gateway-url image-hash)
+         meme-image-url (str ipfs-gateway-url (or animation-hash image-hash))
          button-url (str root-url "memefolio/?tab=curated")
          email (<? (district0x-emails/get-email {:district0x-emails/address challenger}))]
      (if-let [to (validate-email email)]
diff --git a/src/memefactory/server/pinner.cljs b/src/memefactory/server/pinner.cljs
index 33f4ad97..5d311657 100644
--- a/src/memefactory/server/pinner.cljs
+++ b/src/memefactory/server/pinner.cljs
@@ -28,9 +28,9 @@
 
        :else
        (let [meme-meta (<? (server-utils/get-ipfs-meta @ipfs/ipfs meta-hash))
-             {:keys [:image-hash]} meme-meta]
-         (if-not (ipfs/ipfs-hash? image-hash)
-           (log/error (str "Meme image hash is not valid IPFS hash " image-hash) ::invalid-image-hash)
+             {:keys [:image :animation-url]} meme-meta]
+         (if-not (ipfs/ipfs-hash? image)
+           (log/error (str "Meme image hash is not valid IPFS hash " image) ::invalid-image-hash)
 
            (do
              (pin/add meta-hash
@@ -39,11 +39,18 @@
                           (log/error (str "Pinning meme meta hash failed " meta-hash) ::pin-meta-hash)
                           (log/info (str "Pinned meme meta hash " meta-hash) ::pin-meta-hash))))
 
-             (pin/add image-hash
+             (pin/add image
                       (fn [err]
                         (if err
-                          (log/error (str "Pinning meme image hash failed " image-hash " " err) ::pin-image-hash)
-                          (log/info (str "Pinned meme image hash " image-hash) ::pin-image-hash)))))))))))
+                          (log/error (str "Pinning meme image hash failed " image " " err) ::pin-image-hash)
+                          (log/info (str "Pinned meme image hash " image) ::pin-image-hash))))
+
+             (when animation-url
+               (pin/add animation-url
+                      (fn [err]
+                        (if err
+                          (log/error (str "Pinning meme image hash failed " animation-url " " err) ::pin-animation-url-hash)
+                          (log/info (str "Pinned meme image hash " animation-url) ::pin-animation-url-hash))))))))))))
 
 (defn challenge-created-event [err {:keys [:args]}]
   (let [{:keys [:metahash]} args
diff --git a/src/memefactory/server/syncer.cljs b/src/memefactory/server/syncer.cljs
index 094c06d3..19f7dda9 100644
--- a/src/memefactory/server/syncer.cljs
+++ b/src/memefactory/server/syncer.cljs
@@ -138,14 +138,16 @@
          errors)
 
        (let [meme-meta (<? (server-utils/get-ipfs-meta @ipfs/ipfs meta-hash))
-             {:keys [:name :image :description] {:keys [:search-tags]} :attributes} meme-meta
-             image-hash (server-utils/get-hash-from-ipfs-url image)]
+             {:keys [:name :image :description :animation_url] {:keys [:search-tags]} :attributes} meme-meta
+             image-hash (server-utils/get-hash-from-ipfs-url image)
+             animation-hash (if animation_url (server-utils/get-hash-from-ipfs-url animation_url) nil)]
          (db/insert-registry-entry! registry-entry-data)
          (db/upsert-user! {:user/address creator})
          (db/insert-meme! (merge meme {:reg-entry/address registry-entry
                                        :meme/comment description
                                        :meme/image-hash image-hash
-                                       :meme/title name}))
+                                       :meme/title name
+                                       :meme/animation-hash animation-hash}))
 
          (schedule-meme-number-assigner registry-entry (inc (- (bn/number challenge-period-end)
                                                                now-in-seconds)))
diff --git a/src/memefactory/server/twitter_bot.cljs b/src/memefactory/server/twitter_bot.cljs
index a06e5fe0..c3dbcc2e 100644
--- a/src/memefactory/server/twitter_bot.cljs
+++ b/src/memefactory/server/twitter_bot.cljs
@@ -81,13 +81,15 @@
         (async/put! out-ch e)))
     out-ch))
 
-(defn ensure-media-uploaded [twitter-obj {:keys [image-hash registry-entry]} {:keys [just-log-tweet? write-directory]
+(defn ensure-media-uploaded [twitter-obj {:keys [image-or-video-hash registry-entry]} {:keys [just-log-tweet? write-directory]
                                                                               :or {write-directory "/tmp/memefactory"}}]
   (safe-go
    (if-let [media-id (db/get-meme-media-id registry-entry)]
      media-id
-     (let [ipfs-hash (or image-hash
-                         (:meme/image-hash (db/get-meme registry-entry)))
+     (let [ipfs-hash (or image-or-video-hash
+                         (let [meme (db/get-meme registry-entry)]
+                           (or (:meme/animation-hash meme)
+                               (:meme/image-hash meme))))
            _ (log/info "Uploading media " {:ipfs-hash ipfs-hash} ::ensure-media-uploaded)
            image-tar-file-content (<? (server-utils/get-ipfs-binary-file ipfs-hash))]
        (when-not just-log-tweet?
@@ -100,9 +102,11 @@
   (safe-go
    (log/info "Twitter bot processing meme submitted event " ev ::tweet-meme-submitted)
    (let [meme-meta (<? (server-utils/get-ipfs-meta @ipfs/ipfs (web3-utils/to-ascii @web3 meta-hash)))
-         {:keys [:name :image]} meme-meta
-         image-hash (server-utils/get-hash-from-ipfs-url image)
-         media-id (<? (ensure-media-uploaded twitter-obj {:image-hash image-hash} opts))
+         {:keys [:name :image :animation-url]} meme-meta
+         image-or-video-hash (if animation-url
+                      (server-utils/get-hash-from-ipfs-url animation-url)
+                      (server-utils/get-hash-from-ipfs-url image))
+         media-id (<? (ensure-media-uploaded twitter-obj {:image-or-video-hash image-or-video-hash} opts))
          meme-detail-url (str "https://memefactory.io/meme-detail/" registry-entry)
          text (rand-nth [(gstring/format "Introducing '%s', The latest submission to vie for a place in the DANK registry. %s" name meme-detail-url)
                          (gstring/format "The newest entry to the DANK registry, meet '%s'. Will it pass the bar? %s" name meme-detail-url)])]
diff --git a/src/memefactory/shared/graphql_schema.cljs b/src/memefactory/shared/graphql_schema.cljs
index 3253d3dc..79d4e986 100644
--- a/src/memefactory/shared/graphql_schema.cljs
+++ b/src/memefactory/shared/graphql_schema.cljs
@@ -268,6 +268,7 @@
     meme_number: Int
     meme_metaHash: String
     meme_imageHash: String
+    meme_animationHash: String
     meme_totalSupply: Int
     meme_totalMinted: Int
     meme_tokenIdStart: Int
diff --git a/src/memefactory/styles/component/compact_tile.clj b/src/memefactory/styles/component/compact_tile.clj
index 35b9e095..5110d363 100644
--- a/src/memefactory/styles/component/compact_tile.clj
+++ b/src/memefactory/styles/component/compact_tile.clj
@@ -313,7 +313,29 @@
       :height (px card-height)
       :margin :auto}
      no-select-style
-     no-drag-style)]]
+     no-drag-style)]
+
+   [:video.meme-image
+    {:object-fit :fill}]
+
+   [:div.video-thumbnail
+    [:i.play-button
+     {:background-image "url('/assets/icons/play-button.svg')"
+      :position :absolute
+      ; right-bottom corner:
+      :bottom (px 20)
+      :right (px 20)
+      ; or center:
+      ;:top "50%"
+      ;:left "50%"
+      ;:transform "translate(-50%, -50%)"
+      ;
+      :height (px 45)
+      :width (px 45)
+      :border-radius "50%"
+      :background-color "rgba(0,0,0,0.5)"}]
+    [:i.play-button:hover {:filter "invert(25%)"
+                           :background-color "rgb(0,0,0)"}]]]
 
   [:.compact-tile-container
    {:display :flex
diff --git a/src/memefactory/styles/pages/dankregistry/submit.clj b/src/memefactory/styles/pages/dankregistry/submit.clj
index 34dc8ba8..db9f2fc2 100644
--- a/src/memefactory/styles/pages/dankregistry/submit.clj
+++ b/src/memefactory/styles/pages/dankregistry/submit.clj
@@ -55,6 +55,7 @@
       [:img {:width (px compact-tile/card-width)
              :height (px compact-tile/card-height)
              :object-fit :cover}]
+      [:video {:object-fit :fill}]
       [:.input-group
        [:.dropzone {:width (px compact-tile/card-width)
                     :height (px compact-tile/card-height)}]
diff --git a/src/memefactory/ui/bridge/page.cljs b/src/memefactory/ui/bridge/page.cljs
index b2f57d7a..213aba05 100644
--- a/src/memefactory/ui/bridge/page.cljs
+++ b/src/memefactory/ui/bridge/page.cljs
@@ -280,6 +280,7 @@
      [:items (remove nil? [:reg-entry/address
                            :reg-entry/created-on
                            :meme/image-hash
+                           :meme/animation-hash
                            :meme/meta-hash
                            :meme/number
                            :meme/title
@@ -337,10 +338,10 @@
                              :has-more? has-more?
                              :load-fn #(re-search end-cursor)}
            (when-not loading-first?
-             (doall (map (fn [{:keys [:reg-entry/address :meme/title :meme/number :meme/number :meme/owned-meme-tokens :meme/image-hash :meme/total-supply] :as meme}]
+             (doall (map (fn [{:keys [:reg-entry/address :meme/title :meme/number :meme/number :meme/owned-meme-tokens :meme/image-hash :meme/animation-hash :meme/total-supply] :as meme}]
                            (let [token-count (count owned-meme-tokens)]
                            [:div.compact-tile {:key address}
-                            [tiles/flippable-tile {:front [tiles/meme-image image-hash
+                            [tiles/flippable-tile {:front [tiles/meme-image image-hash animation-hash
                                                            {:class "collected-tile-front"}]
                                                    :back [tiles/meme-back-tile meme]
                                                    }]
diff --git a/src/memefactory/ui/components/challenge_list.cljs b/src/memefactory/ui/components/challenge_list.cljs
index 7a440f3a..6b409ef8 100644
--- a/src/memefactory/ui/components/challenge_list.cljs
+++ b/src/memefactory/ui/components/challenge_list.cljs
@@ -48,6 +48,7 @@
                        :challenge/votes-against
                        :meme/total-supply
                        :meme/image-hash
+                       :meme/animation-hash
                        :meme/title
                        :meme/comment
                        [:meme/tags [:tag/name]]
@@ -108,7 +109,7 @@
 
 (defn challenge [{:keys [:entry :include-challenger-info? :action-child]}]
   (let [{:keys [:reg-entry/address :reg-entry/created-on :reg-entry/challenge-period-end
-                :meme/total-supply :meme/image-hash :reg-entry/creator :meme/title
+                :meme/total-supply :meme/image-hash :meme/animation-hash :reg-entry/creator :meme/title
                 :meme/tags :challenge/challenger :challenge/comment :challenge/commit-period-end :challenge/reveal-period-end]} entry]
 
     (let [status (shared-utils/reg-entry-status @(ui-utils/now-in-seconds)
@@ -167,7 +168,7 @@
                           name]])]]))
 
        [:div.meme-tile
-        [tiles/meme-image image-hash {:rejected? (= status :reg-entry.status/blacklisted)}]]
+        [tiles/meme-image image-hash animation-hash {:rejected? (= status :reg-entry.status/blacklisted)}]]
        [:div.action
         (if (and (= 0 days hours minutes seconds)
                  (not (#{:reg-entry.status/whitelisted :reg-entry.status/blacklisted} status)))
diff --git a/src/memefactory/ui/components/tiles.cljs b/src/memefactory/ui/components/tiles.cljs
index fc3999ef..297f2f63 100644
--- a/src/memefactory/ui/components/tiles.cljs
+++ b/src/memefactory/ui/components/tiles.cljs
@@ -20,30 +20,43 @@
             [reagent.core :as r]
             [taoensso.timbre :as log :refer [spy]]))
 
+(defn meme-video [animation-url thumbnail show-video]
+  (let []
+    (if @show-video
+      [:video.meme-image.initial-fade-in-delay {:controls true
+                                                :loop true
+                                                :autoPlay true
+                                                :muted true
+                                                :width 290
+                                                :height 435}
+       [:source {:src animation-url
+                 :type "video/mp4"}]
+       [:span "Your browser does not support video tags"]]
+      [:div.video-thumbnail
+       [:img.meme-image.initial-fade-in-delay {:src thumbnail}]
+       [:i.play-button {:on-click (fn [e]
+                                    (.stopPropagation e)
+                                    (reset! show-video true)
+                                    )}]])))
+
 (defn meme-image [& _]
-  (let [url (:gateway @(subscribe [::ipfs-subs/ipfs]))]
-    (fn [image-hash & [{:keys [rejected?] :as props}]]
+  (let [url (:gateway @(subscribe [::ipfs-subs/ipfs]))
+        show-video (r/atom false)]
+    (fn [image-hash animation-hash & [{:keys [rejected?] :as props}]]
       (let [props (dissoc props :rejected?)
-            src-url (str (format/ensure-trailing-slash url) image-hash)]
+            image-url (str (format/ensure-trailing-slash url) image-hash)
+            animation-url (when animation-hash (str (format/ensure-trailing-slash url) animation-hash))]
         [:div.meme-card
          props
          (cond
 
-           (string/includes? src-url "forbidden")
+           (string/includes? image-url "forbidden")
            [:div.meme-placeholder.initial-fade-in [:img {:src "/assets/icons/mememouth.png"}]]
 
-           (string/includes? src-url ".mp4")
-           [:video.meme-image.initial-fade-in-delay {:controls false
-                                                     :loop true
-                                                     :autoPlay true
-                                                     :muted true
-                                                     :width 290
-                                                     :height 435}
-            [:source {:src src-url
-                      :type "video/mp4"}]
-            [:span "Your browser does not support video tags"]]
-
-           :else [:img.meme-image.initial-fade-in-delay {:src src-url}])
+           (some? animation-hash)
+           [meme-video animation-url image-url show-video]
+
+           :else [:img.meme-image.initial-fade-in-delay {:src image-url}])
          (when rejected?
            [:div.image-tape-container.initial-fade-in-delay
             [:div.image-tape
@@ -199,7 +212,7 @@
                                                                                                     :reg-entry/address)}
                                                                                      [[:items [:meme-auction/address]]]]]}]))]
         [:div.compact-tile
-         [flippable-tile {:front [meme-image (get-in meme-token [:meme-token/meme :meme/image-hash])]
+         [flippable-tile {:front [meme-image (get-in meme-token [:meme-token/meme :meme/image-hash]) (get-in meme-token [:meme-token/meme :meme/animation-hash])]
                           :back [auction-back-tile opts meme-auction]}]
 
          [nav-anchor {:route :route.meme-detail/index
@@ -256,9 +269,9 @@
        [:li [:label "Highest Single Sale:"] (ui-utils/format-price highest-single-sale)]]]]))
 
 
-(defn meme-tile [{:keys [:reg-entry/address :meme/image-hash :meme/number] :as meme}]
+(defn meme-tile [{:keys [:reg-entry/address :meme/image-hash :meme/animation-hash :meme/number] :as meme}]
   [:div.compact-tile
-   [flippable-tile {:front [meme-image image-hash]
+   [flippable-tile {:front [meme-image image-hash animation-hash]
                     :back [meme-back-tile meme]}]
    [nav-anchor {:route :route.meme-detail/index
                 :params {:address address}}
diff --git a/src/memefactory/ui/dank_registry/browse_page.cljs b/src/memefactory/ui/dank_registry/browse_page.cljs
index 9b1f4110..a74aa578 100644
--- a/src/memefactory/ui/dank_registry/browse_page.cljs
+++ b/src/memefactory/ui/dank_registry/browse_page.cljs
@@ -40,6 +40,7 @@
     [:items [:reg-entry/address
              :reg-entry/created-on
              :meme/image-hash
+             :meme/animation-hash
              :meme/title
              :meme/total-minted
              :meme/number
diff --git a/src/memefactory/ui/dank_registry/events.cljs b/src/memefactory/ui/dank_registry/events.cljs
index 8391604c..f6dbd907 100644
--- a/src/memefactory/ui/dank_registry/events.cljs
+++ b/src/memefactory/ui/dank_registry/events.cljs
@@ -9,42 +9,77 @@
    [district.shared.error-handling :refer [try-catch]]
    [taoensso.timbre :as log]))
 
-(defn build-meme-meta-string [{:keys [title search-tags issuance comment]} image-hash]
-  (-> {:name title
+(defn is-video? [file-info]
+  (= "video/mp4" (:type file-info)))
+
+
+(defn build-meme-meta-string [{:keys [title search-tags issuance comment file-info]} image-or-video-hash thumbnail-hash]
+  (-> (merge {:name title
        :description (string/trim (or comment ""))
        :external_url "https://memefactory.io/"
-       :image (str "ipfs://" image-hash)
+       :image (str "ipfs://" (if (is-video? file-info)
+                               thumbnail-hash
+                               image-or-video-hash))
        :attributes {
                     :search-tags search-tags
                     :issuance issuance}}
+         (when (is-video? file-info) {:animation_url (str "ipfs://" image-or-video-hash)}))
       clj->js
       js/JSON.stringify))
 
 (re-frame/reg-event-fx
  ::upload-meme
- (fn [_ [_ {:keys [:form-data :deposit] :as data}]]
-   (log/info "Uploading meme image" {:file (:file-info form-data)} ::upload-meme)
-   {:ipfs/call {:func "add"
-                :args [(:file (:file-info form-data))]
-                :opts {:wrap-with-directory true}
-                :on-success [::upload-meme-meta data]
-                :on-error [::logging/error "upload-meme ipfs call error" {:data form-data}
-                           ::upload-meme]}}))
+ (fn [_ [_ {:keys [:form-data] :as data}]]
+   (if (is-video? (:file-info form-data))
+     {:dispatch [::upload-thumbnail data]}
+     {:dispatch [::upload-meme-image data nil]})))
+
+
+(re-frame/reg-event-fx
+  ::upload-thumbnail
+  (fn [_ [_ {:keys [:form-data] :as data}]]
+    (log/info "Uploading video thumbnail" {:file (:video-thumbnail form-data)} ::upload-thumbnail)
+    {:ipfs/call {:func "add"
+                 :args [(:video-thumbnail form-data)]
+                 :opts {:wrap-with-directory true}
+                 :on-success [::upload-meme-image data]
+                 :on-error [::logging/error "upload-thumbnail ipfs call error" {:data form-data}
+                            ::upload-meme]}}))
+
+
+(defn get-thumbnail-hash [ipfs-thumbnail-response]
+  (let [resp (utils/parse-ipfs-response ipfs-thumbnail-response)
+        thumbnail-hash (str (-> resp last :Hash) "/" (-> resp first :Name))]
+    thumbnail-hash))
+
+(re-frame/reg-event-fx
+ ::upload-meme-image
+ (fn [_ [_ {:keys [:form-data :deposit] :as data} ipfs-thumbnail-response]]
+   (let [thumbnail-hash (when ipfs-thumbnail-response
+                          (log/info "Video thumbnail uploaded" {:ipfs-response ipfs-thumbnail-response} ::upload-meme-image)
+                          (get-thumbnail-hash ipfs-thumbnail-response))]
+     (log/info "Uploading meme image" {:file (:file-info form-data)} ::upload-meme)
+     {:ipfs/call {:func "add"
+                  :args [(:file (:file-info form-data))]
+                  :opts {:wrap-with-directory true}
+                  :on-success [::upload-meme-meta (merge data {:thumbnail-hash thumbnail-hash})]
+                  :on-error [::logging/error "upload-meme ipfs call error" {:data form-data}
+                             ::upload-meme]}})))
 
 (re-frame/reg-event-fx
  ::upload-meme-meta
- (fn [{:keys [db]} [_ data ipfs-response]]
+ (fn [{:keys [db]} [_ {:keys [:form-data :thumbnail-hash] :as data} ipfs-response]]
    (log/info "Meme image uploaded" {:ipfs-response ipfs-response} ::upload-meme-meta)
    (try-catch
     (let [resp (utils/parse-ipfs-response ipfs-response)
-          image-hash (str (-> resp last :Hash) "/" (-> resp first :Name))
-          meme-meta (build-meme-meta-string (:form-data data) image-hash)
+          image-or-video-hash (str (-> resp last :Hash) "/" (-> resp first :Name))
+          meme-meta (build-meme-meta-string form-data image-or-video-hash thumbnail-hash)
           buffer-data (js/buffer.Buffer.from meme-meta)]
       (log/info "Uploading meme meta" {:meme-meta meme-meta} ::upload-meme-meta)
       {:ipfs/call {:func "add"
                    :args [buffer-data]
                    :on-success [::meme-factory/approve-and-create-meme data]
                    :on-error [::logging/error "upload-meme-meta ipfs call error"
-                              {:data (:form-data data)
+                              {:data form-data
                                :meme-meta meme-meta}
                               ::upload-meme-meta]}}))))
diff --git a/src/memefactory/ui/dank_registry/submit_page.cljs b/src/memefactory/ui/dank_registry/submit_page.cljs
index 6e716bf1..93e23e1e 100644
--- a/src/memefactory/ui/dank_registry/submit_page.cljs
+++ b/src/memefactory/ui/dank_registry/submit_page.cljs
@@ -101,16 +101,35 @@
                             :id :file-info
                             :errors errors
                             :label "Upload a file"
-                            :comment "Upload image with ratio 2:3 and size less than 1.5MB"
+                            :comment "Upload image with ratio 2:3 and size less than 25MB"
+                            :video-attributes {:controls true
+                                               :autoPlay false
+                                               :on-loadedData (fn [e]
+                                                                (let [video (.-target e)]
+                                                                  ;; sets time to trigger on-seeked, to make sure video is rendered before building thumbnail
+                                                                  (set! (.-currentTime video) 0)))
+                                               :on-seeked (fn [e]
+                                                            ;; builds video thumbnail right after video is loaded and rendered
+                                                            (let [video (.-target e)]
+                                                              (def canvas (.getElementById js/document "thumbnail-id"))
+                                                              (set! (.-width canvas) (.-videoWidth video))
+                                                              (set! (.-height canvas) (.-videoHeight video))
+                                                              (def ctx (.getContext canvas "2d"))
+                                                              (.drawImage ctx video 0 0)
+                                                              (.toBlob canvas (fn [blob]
+                                                                                (swap! form-data assoc :video-thumbnail
+                                                                                       (js/File. [blob] (str (-> @form-data :file-info :file .-name) "-thumbnail.png")))))))}
                             :file-accept-pred (fn [{:keys [name type size] :as props}]
-                                                (log/debug "Veryfing acceptance of file" {:name name :type type :size size})
+                                                (log/debug "Verifying acceptance of file" {:name name :type type :size size})
                                                 (and (#{"image/png" "image/gif" "image/jpeg" "image/svg+xml" "video/mp4"} type)
-                                                     (< size 1500000)))
+                                                     (< size 25000000)))
                             :on-file-accepted (fn [{:keys [name type size array-buffer] :as props}]
                                                 (swap! form-data update-in [:file-info] dissoc :error)
+                                                (swap! form-data dissoc :video-thumbnail)
                                                 (log/info "Accepted file" {:name name :type type :size size} ::file-accepted))
                             :on-file-rejected (fn [{:keys [name type size] :as props}]
                                                 (swap! form-data assoc :file-info {:error "Non .png .jpeg .gif .svg or .mp4 file selected with size less than 1.5 Mb"})
+                                                (swap! form-data dissoc :video-thumbnail)
                                                 (log/warn "Rejected file" {:name name :type type :size size :user {:id active-account}} ::file-rejected))}]]
          [:div.form-panel
           [with-label "Title"
@@ -168,7 +187,8 @@
               "Submit")]
            [dank-with-logo (web3/from-wei deposit-value :ether)]]
           (when (< @account-balance deposit-value)
-            [:div.not-enough-dank "You don't have enough DANK tokens to submit a meme"])]]]])))
+            [:div.not-enough-dank "You don't have enough DANK tokens to submit a meme"])
+          [:canvas {:hidden true :id "thumbnail-id"}]]]]])))
 
 
 (defmethod page :route.dank-registry/submit []
diff --git a/src/memefactory/ui/home/page.cljs b/src/memefactory/ui/home/page.cljs
index 07db69d3..305744cb 100644
--- a/src/memefactory/ui/home/page.cljs
+++ b/src/memefactory/ui/home/page.cljs
@@ -38,12 +38,12 @@
                                          :show-cards-left? true} auc])))]))]))
 
 
-(defn trending-vote-tile [{:keys [:reg-entry/address :meme/image-hash :reg-entry/creator :challenge/commit-period-end
+(defn trending-vote-tile [{:keys [:reg-entry/address :meme/image-hash :meme/animation-hash :reg-entry/creator :challenge/commit-period-end
                                   :challenge/challenger :challenge/comment] :as meme}]
 
   (let [{:keys [:user/total-created-challenges-success :user/total-created-challenges]} challenger]
     [:div.compact-tile
-     [tiles/flippable-tile {:front [tiles/meme-image image-hash]
+     [tiles/flippable-tile {:front [tiles/meme-image image-hash animation-hash]
                             :back [:div.meme-card.back
                                    [:div.overlay
 
@@ -111,6 +111,7 @@
                             [:reg-entry/address
                              :meme/title
                              :meme/image-hash
+                             :meme/animation-hash
                              :meme/total-minted
                              :meme/number]]]]])
 
@@ -159,6 +160,7 @@
                :user/total-created-challenges]]
              :meme/title
              :meme/image-hash
+             :meme/animation-hash
              :challenge/votes-total
              :challenge/commit-period-end
              :challenge/comment]]]])
diff --git a/src/memefactory/ui/leaderboard/dankest_page.cljs b/src/memefactory/ui/leaderboard/dankest_page.cljs
index 60e6bfd8..738a8e90 100644
--- a/src/memefactory/ui/leaderboard/dankest_page.cljs
+++ b/src/memefactory/ui/leaderboard/dankest_page.cljs
@@ -35,6 +35,7 @@
     [:items [:reg-entry/address
              [:reg-entry/creator [:user/address :user/creator-rank]]
              :meme/image-hash
+             :meme/animation-hash
              :reg-entry/created-on
              :meme/title
              :meme/number
diff --git a/src/memefactory/ui/marketplace/page.cljs b/src/memefactory/ui/marketplace/page.cljs
index 554a2339..3a9216c9 100644
--- a/src/memefactory/ui/marketplace/page.cljs
+++ b/src/memefactory/ui/marketplace/page.cljs
@@ -68,6 +68,7 @@
                 [:meme/title
                  :reg-entry/address
                  :meme/image-hash
+                 :meme/animation-hash
                  :meme/number
                  :meme/total-minted]]]]]]]])
 
diff --git a/src/memefactory/ui/meme_detail/page.cljs b/src/memefactory/ui/meme_detail/page.cljs
index bc16905d..24c7fa54 100644
--- a/src/memefactory/ui/meme_detail/page.cljs
+++ b/src/memefactory/ui/meme_detail/page.cljs
@@ -50,6 +50,7 @@
                        :reg-entry/created-on
                        :reg-entry/challenge-period-end
                        :meme/image-hash
+                       :meme/animation-hash
                        :meme/meta-hash
                        :meme/number
                        :meme/title
@@ -147,6 +148,7 @@
                                       :meme/title
                                       :meme/number
                                       :meme/image-hash
+                                      :meme/animation-hash
                                       :meme/meta-hash
                                       :meme/total-minted]]]]]]]]])]
     (fn [address tags]
@@ -553,7 +555,7 @@
                                             :meme
                                             (shared-utils/reg-entry-dates-to-seconds))]
                               (assoc meme :reg-entry/status (shared-utils/reg-entry-status @now (shared-utils/reg-entry-dates-to-seconds meme)))))
-        {:keys [:reg-entry/status :meme/image-hash :meme/title :meme/number :reg-entry/status :meme/total-supply :reg-entry/created-on
+        {:keys [:reg-entry/status :meme/image-hash :meme/animation-hash :meme/title :meme/number :reg-entry/status :meme/total-supply :reg-entry/created-on
                 :meme/tags :meme/owned-meme-tokens :reg-entry/creator :challenge/challenger :reg-entry/challenge-period-end :challenge/reveal-period-end]} meme
         token-count (->> owned-meme-tokens
                          (map :meme-token/token-id)
@@ -584,7 +586,7 @@
              (when number
                [:div.meme-number {:key :meme-number} (str "#" number)])
              ^{:key :container}
-             [tiles/meme-image image-hash {:rejected? (-> (gql-utils/gql-name->kw status) (= :reg-entry.status/blacklisted))}]
+             [tiles/meme-image image-hash animation-hash {:rejected? (-> (gql-utils/gql-name->kw status) (= :reg-entry.status/blacklisted))}]
              (if exists?
                [:div.registry {:key :registry}
                 [share-buttons/share-buttons (. (. js/document -location) -href)]
diff --git a/src/memefactory/ui/memefolio/page.cljs b/src/memefactory/ui/memefolio/page.cljs
index c5fb8ffe..5701bc0d 100644
--- a/src/memefactory/ui/memefolio/page.cljs
+++ b/src/memefactory/ui/memefolio/page.cljs
@@ -314,7 +314,7 @@
                         :has-more? has-more?
                         :load-fn re-search}
        (when-not loading-first?
-         (doall (map (fn [{:keys [:reg-entry/address :meme/image-hash :meme/number
+         (doall (map (fn [{:keys [:reg-entry/address :meme/image-hash :meme/animation-hash :meme/number
                                   :meme/title :meme/total-supply :meme/owned-meme-tokens] :as meme}]
                        (when address
                          (let [token-ids (map :meme-token/token-id owned-meme-tokens)
@@ -323,7 +323,7 @@
                                                 count)
                                active-user-page? (or (empty? url-address) (= url-address active-account))]
                            [:div.compact-tile {:key address}
-                            [tiles/flippable-tile {:front [tiles/meme-image image-hash
+                            [tiles/flippable-tile {:front [tiles/meme-image image-hash animation-hash
                                                            {:class "collected-tile-front"}]
                                                    :back (if active-user-page?
                                                            [collected-tile-back {:meme/number number
@@ -361,6 +361,7 @@
                                                                  :reg-entry/address
                                                                  :meme/number
                                                                  :meme/image-hash
+                                                                 :meme/animation-hash
                                                                  :meme/total-minted]]]]]]]]
                                        [:search-memes [:total-count]]
                                        [:search-meme-tokens [:total-count]]]}])
@@ -452,14 +453,14 @@
                                                     [:div.spinner-container [spinner/spin]])
                         :load-fn re-search}
        (when-not loading-first?
-         (doall (map (fn [{:keys [:reg-entry/address :meme/image-hash :meme/number
+         (doall (map (fn [{:keys [:reg-entry/address :meme/image-hash :meme/animation-hash :meme/number
                                   :meme/title :meme/total-supply :meme/total-minted] :as meme}]
                        (when address
                          (let [status (shared-utils/reg-entry-status @now (shared-utils/reg-entry-dates-to-seconds meme))
                                rejected? (= status :reg-entry.status/blacklisted)]
                            ^{:key address} [:div.compact-tile
                                             [:div.container
-                                             [tiles/meme-image image-hash {:rejected? rejected?}]]
+                                             [tiles/meme-image image-hash animation-hash {:rejected? rejected?}]]
                                             [nav-anchor {:route :route.meme-detail/index
                                                          :params {:address address}
                                                          :query nil
@@ -554,7 +555,7 @@
                       :load-fn re-search}
      (when-not loading-first?
        (doall
-        (map (fn [{:keys [:reg-entry/address :meme/image-hash :meme/number
+        (map (fn [{:keys [:reg-entry/address :meme/image-hash :meme/animation-hash :meme/number
                           :meme/title :challenge/vote] :as meme}]
                (when address
                  (let [{:keys [:vote/option]} vote
@@ -565,7 +566,7 @@
                    [:div.compact-tile
                     [:div.container
                      [:div.meme-card-front
-                      [tiles/meme-image image-hash {:rejected? rejected?}]]]
+                      [tiles/meme-image image-hash animation-hash {:rejected? rejected?}]]]
                     [nav-anchor {:route :route.meme-detail/index
                                  :params {:address address}
                                  :query nil
@@ -687,7 +688,7 @@
                     {:keys [:meme/title :meme/total-minted] :as meme} :meme-token/meme :as meme-token} :meme-auction/meme-token
                    :as meme-auction}]
                [:div.compact-tile {:key address}
-                [tiles/flippable-tile {:front [tiles/meme-image (get-in meme-token [:meme-token/meme :meme/image-hash])]
+                [tiles/flippable-tile {:front [tiles/meme-image (get-in meme-token [:meme-token/meme :meme/image-hash]) (get-in meme-token [:meme-token/meme :meme/animation-hash])]
                                        :back [:div.meme-card
                                               [:div.overlay
 
@@ -747,6 +748,7 @@
                     [:items (remove nil? [:reg-entry/address
                                           :reg-entry/created-on
                                           :meme/image-hash
+                                          :meme/animation-hash
                                           :meme/meta-hash
                                           :meme/number
                                           :meme/title
@@ -775,6 +777,7 @@
                   :has-next-page
                   [:items [:reg-entry/address
                            :meme/image-hash
+                           :meme/animation-hash
                            :meme/meta-hash
                            :meme/number
                            :meme/title
@@ -808,6 +811,7 @@
                   :has-next-page
                   [:items [:reg-entry/address
                            :meme/image-hash
+                           :meme/animation-hash
                            :meme/meta-hash
                            :meme/number
                            :meme/title
@@ -849,6 +853,7 @@
                                :meme/title
                                :meme/number
                                :meme/image-hash
+                               :meme/animation-hash
                                :meme/meta-hash
                                :meme/total-minted]]]]]]]]]
       :sold [[:search-meme-auctions (merge {:seller user-address
@@ -879,6 +884,7 @@
                            [:reg-entry/address
                             :meme/title
                             :meme/image-hash
+                            :meme/animation-hash
                             :meme/meta-hash
                             :meme/number
                             :meme/total-minted]]]]]]]]])))