Improve video support

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"]

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

src/memefactory/server/emailer.cljs

@@ -61,15 +61,15 @@
 
 (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]))
          meme-url (str root-url "meme-detail/" registry-entry)
          [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)]

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

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)))

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)])]

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

src/memefactory/styles/component/compact_tile.clj

@@ -313,7 +313,39 @@
       :height (px card-height)
       :margin :auto}
      no-select-style
-     no-drag-style)]]
+     no-drag-style)]
+
+   [:div.video-flippable
+    {:position :relative}]
+
+   [:div.video-flip-area
+    {:height "85%"
+     :width "100%"
+     :z-index 1
+     :position :absolute}]
+
+   [:video.meme-image
+    {:object-fit :fill}]
+
+   [:div.video-thumbnail
+    {:position :relative}
+    [: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

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)}]

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]
                                                    }]

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)))