Merge pull request #3406 from poanetwork/vb-nft-mp4-support

Adding mp4 files support for NFTs

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## Current
 
 ### Features
+- [#3406](https://github.com/poanetwork/blockscout/pull/3406) - Adding mp4 files support for NFTs
 - [#3398](https://github.com/poanetwork/blockscout/pull/3398) - Collect and display gas usage per day at the main page
 - [#3385](https://github.com/poanetwork/blockscout/pull/3385), [#3397](https://github.com/poanetwork/blockscout/pull/3397) - Total gas usage at the main page
 - [#3384](https://github.com/poanetwork/blockscout/pull/3384), [#3386](https://github.com/poanetwork/blockscout/pull/3386) - Address total gas usage

apps/block_scout_web/assets/css/components/_erc721_token_image_container.scss

@@ -2,6 +2,7 @@
 .erc721-image {
     display: flex;
     justify-content: center;
+    max-height: 200px;
 }
 
  .erc721-image img {

apps/block_scout_web/lib/block_scout_web/controllers/chain_controller.ex

@@ -65,7 +65,7 @@ defmodule BlockScoutWeb.ChainController do
 
     # Need datapoint for legend if none currently available.
     if Enum.empty?(transaction_stats) do
-      [%{number_of_transactions: 0}]
+      [%{number_of_transactions: 0, gas_used: 0}]
     else
       transaction_stats
     end

apps/block_scout_web/lib/block_scout_web/csp_header.ex

@@ -16,6 +16,7 @@ defmodule BlockScoutWeb.CSPHeader do
         script-src 'self' 'unsafe-inline' 'unsafe-eval';\
         style-src 'self' 'unsafe-inline' 'unsafe-eval' https://fonts.googleapis.com;\
         img-src 'self' * data:;\
+        media-src 'self' * data:;\
         font-src 'self' 'unsafe-inline' 'unsafe-eval' https://fonts.gstatic.com data:;\
       "
     })

apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex

@@ -96,13 +96,14 @@
                 <span class="dashboard-banner-chart-legend-value" data-selector="tx_per_day">
                     <% num_of_transactions = BlockScoutWeb.Cldr.Number.to_string!(Enum.at(@transaction_stats, 0).number_of_transactions, format: "#,###") %>
                     <%= num_of_transactions %>
-                    <%= if Enum.at(@transaction_stats, 0).gas_used do %>
+                    <% gas_used = Enum.at(@transaction_stats, 0).gas_used %>
+                    <%= if gas_used && gas_used > 0 do %>
                       <span
                         data-toggle="tooltip"
                         data-placement="top"
                         data-html="true"
                         data-template="<div class='tooltip tooltip-inversed-color tooltip-gas-usage' role='tooltip'><div class='arrow'></div><div class='tooltip-inner'></div></div>"
-                        title="<div class='custom-tooltip-header'>Gas used</div><div class='custom-tooltip-description'><b><%= BlockScoutWeb.Cldr.Number.to_string!(Enum.at(@transaction_stats, 0).gas_used, format: "#,###") %><b></div>">
+                        title="<div class='custom-tooltip-header'>Gas used</div><div class='custom-tooltip-description'><b><%= BlockScoutWeb.Cldr.Number.to_string!(gas_used, format: "#,###") %><b></div>">
                         <i style="color: #ffffff;" class="fa fa-info-circle ml-1"></i>
                       </span>
                     <% end %>

apps/block_scout_web/lib/block_scout_web/templates/tokens/instance/overview/_details.html.eex

@@ -85,7 +85,13 @@
       <div class="card">
         <div class="card-body">
           <div class="erc721-image" >
-            <img src=<%=image_src(@token_instance.instance)%> />
+            <%= if media_type(media_src(@token_instance.instance)) == "mp4" do %>
+              <video autoplay>
+                <source src=<%= media_src(@token_instance.instance) %> type="video/mp4">
+              </video>
+            <% else %>
+              <img src=<%= media_src(@token_instance.instance) %> />
+            <% end %>
           </div>
         </div>
       </div>

apps/block_scout_web/lib/block_scout_web/templates/tokens/inventory/_token.html.eex

@@ -29,7 +29,7 @@
     <div class="pl-5 col-md-2 d-flex flex-column align-items-left justify-content-start justify-content-lg-center">
       <!-- substitute the span with <img class="tile-image" /> to token with images -->
       <div class="inventory-erc721-image" >
-        <img src=<%=image_src(@token_transfer.instance)%> />
+        <img src=<%=media_src(@token_transfer.instance)%> />
       </div>
     </div>
   </div>

apps/block_scout_web/lib/block_scout_web/views/tokens/instance/overview_view.ex

@@ -17,9 +17,9 @@ defmodule BlockScoutWeb.Tokens.Instance.OverviewView do
   def total_supply?(%Token{total_supply: nil}), do: false
   def total_supply?(%Token{total_supply: _}), do: true
 
-  def image_src(nil), do: "/images/controller.svg"
+  def media_src(nil), do: "/images/controller.svg"
 
-  def image_src(instance) do
+  def media_src(instance) do
     result =
       cond do
         instance.metadata && instance.metadata["image_url"] ->
@@ -32,12 +32,20 @@ defmodule BlockScoutWeb.Tokens.Instance.OverviewView do
           instance.metadata["properties"]["image"]["description"]
 
         true ->
-          image_src(nil)
+          media_src(nil)
       end
 
-    if String.trim(result) == "", do: image_src(nil), else: result
+    if String.trim(result) == "", do: media_src(nil), else: result
   end
 
+  def media_type(media_src) when not is_nil(media_src) do
+    media_src
+    |> String.split(".")
+    |> Enum.at(-1)
+  end
+
+  def media_type(nil), do: nil
+
   def external_url(nil), do: nil
 
   def external_url(instance) do

apps/block_scout_web/lib/block_scout_web/views/tokens/inventory_view.ex

@@ -1,7 +1,7 @@
 defmodule BlockScoutWeb.Tokens.InventoryView do
   use BlockScoutWeb, :view
 
-  import BlockScoutWeb.Tokens.Instance.OverviewView, only: [image_src: 1]
+  import BlockScoutWeb.Tokens.Instance.OverviewView, only: [media_src: 1]
 
   alias BlockScoutWeb.Tokens.OverviewView
 end

apps/block_scout_web/priv/gettext/default.pot

@@ -151,7 +151,7 @@ msgid "Anything not in this list is not supported. Click on the method to be tak
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:124
+#: lib/block_scout_web/templates/chain/show.html.eex:125
 msgid "Average block time"
 msgstr ""
 
@@ -236,7 +236,7 @@ msgid "BlockScout provides analytics data, API, and Smart Contract tools for the
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:179
+#: lib/block_scout_web/templates/chain/show.html.eex:180
 #: lib/block_scout_web/templates/layout/_topnav.html.eex:34
 #: lib/block_scout_web/templates/layout/_topnav.html.eex:38
 msgid "Blocks"
@@ -900,7 +900,7 @@ msgstr ""
 #: lib/block_scout_web/templates/transaction/_tabs.html.eex:4
 #: lib/block_scout_web/templates/transaction_token_transfer/index.html.eex:7
 #: lib/block_scout_web/views/address_view.ex:350
-#: lib/block_scout_web/views/tokens/instance/overview_view.ex:111
+#: lib/block_scout_web/views/tokens/instance/overview_view.ex:119
 #: lib/block_scout_web/views/tokens/overview_view.ex:37
 #: lib/block_scout_web/views/transaction_view.ex:394
 msgid "Token Transfers"
@@ -1065,7 +1065,7 @@ msgid "More internal transactions have come in"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:240
+#: lib/block_scout_web/templates/chain/show.html.eex:241
 #: lib/block_scout_web/templates/pending_transaction/index.html.eex:12
 #: lib/block_scout_web/templates/transaction/index.html.eex:18
 msgid "More transactions have come in"
@@ -1175,7 +1175,7 @@ msgstr ""
 #: lib/block_scout_web/templates/address/overview.html.eex:59
 #: lib/block_scout_web/templates/address/overview.html.eex:163
 #: lib/block_scout_web/templates/tokens/instance/overview/_details.html.eex:51
-#: lib/block_scout_web/templates/tokens/instance/overview/_details.html.eex:101
+#: lib/block_scout_web/templates/tokens/instance/overview/_details.html.eex:107
 #: lib/block_scout_web/templates/tokens/overview/_details.html.eex:36
 #: lib/block_scout_web/templates/tokens/overview/_details.html.eex:121
 msgid "QR Code"
@@ -1309,7 +1309,7 @@ msgstr ""
 #: lib/block_scout_web/templates/address_transaction/index.html.eex:48
 #: lib/block_scout_web/templates/address_validation/index.html.eex:22
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:23
-#: lib/block_scout_web/templates/chain/show.html.eex:183
+#: lib/block_scout_web/templates/chain/show.html.eex:184
 #: lib/block_scout_web/templates/pending_transaction/index.html.eex:21
 #: lib/block_scout_web/templates/stakes/_table.html.eex:44
 #: lib/block_scout_web/templates/tokens/holder/index.html.eex:22
@@ -1324,7 +1324,7 @@ msgid "Something went wrong, click to reload."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:246
+#: lib/block_scout_web/templates/chain/show.html.eex:247
 msgid "Something went wrong, click to retry."
 msgstr ""
 
@@ -1453,7 +1453,7 @@ msgid "Total Supply"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:154
+#: lib/block_scout_web/templates/chain/show.html.eex:155
 msgid "Total blocks"
 msgstr ""
 
@@ -1593,12 +1593,12 @@ msgid "Version"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:178
+#: lib/block_scout_web/templates/chain/show.html.eex:179
 msgid "View All Blocks"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:236
+#: lib/block_scout_web/templates/chain/show.html.eex:237
 msgid "View All Transactions"
 msgstr ""
 
@@ -1640,7 +1640,7 @@ msgid "WEI"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:162
+#: lib/block_scout_web/templates/chain/show.html.eex:163
 msgid "Wallet addresses"
 msgstr ""
 
@@ -1718,8 +1718,8 @@ msgstr ""
 #: lib/block_scout_web/templates/address/_validator_metadata_modal.html.eex:37
 #: lib/block_scout_web/templates/address/overview.html.eex:164
 #: lib/block_scout_web/templates/address/overview.html.eex:172
-#: lib/block_scout_web/templates/tokens/instance/overview/_details.html.eex:102
-#: lib/block_scout_web/templates/tokens/instance/overview/_details.html.eex:110
+#: lib/block_scout_web/templates/tokens/instance/overview/_details.html.eex:108
+#: lib/block_scout_web/templates/tokens/instance/overview/_details.html.eex:116
 #: lib/block_scout_web/templates/tokens/overview/_details.html.eex:122
 #: lib/block_scout_web/templates/tokens/overview/_details.html.eex:130
 msgid "Close"
@@ -1770,7 +1770,7 @@ msgstr ""
 #, elixir-format
 #: lib/block_scout_web/templates/tokens/instance/metadata/index.html.eex:18
 #: lib/block_scout_web/templates/tokens/instance/overview/_tabs.html.eex:10
-#: lib/block_scout_web/views/tokens/instance/overview_view.ex:112
+#: lib/block_scout_web/views/tokens/instance/overview_view.ex:120
 msgid "Metadata"
 msgstr ""
 
@@ -1780,7 +1780,7 @@ msgid "Module"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:133
+#: lib/block_scout_web/templates/chain/show.html.eex:134
 msgid "Total transactions"
 msgstr ""
 
@@ -1867,7 +1867,7 @@ msgstr ""
 #: lib/block_scout_web/templates/address_transaction/index.html.eex:15
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:10
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:18
-#: lib/block_scout_web/templates/chain/show.html.eex:237
+#: lib/block_scout_web/templates/chain/show.html.eex:238
 #: lib/block_scout_web/templates/layout/_topnav.html.eex:53
 #: lib/block_scout_web/views/address_view.ex:349
 msgid "Transactions"

apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po

@@ -151,7 +151,7 @@ msgid "Anything not in this list is not supported. Click on the method to be tak
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:124
+#: lib/block_scout_web/templates/chain/show.html.eex:125
 msgid "Average block time"
 msgstr ""
 
@@ -236,7 +236,7 @@ msgid "BlockScout provides analytics data, API, and Smart Contract tools for the
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:179
+#: lib/block_scout_web/templates/chain/show.html.eex:180
 #: lib/block_scout_web/templates/layout/_topnav.html.eex:34
 #: lib/block_scout_web/templates/layout/_topnav.html.eex:38
 msgid "Blocks"
@@ -900,7 +900,7 @@ msgstr ""
 #: lib/block_scout_web/templates/transaction/_tabs.html.eex:4
 #: lib/block_scout_web/templates/transaction_token_transfer/index.html.eex:7
 #: lib/block_scout_web/views/address_view.ex:350
-#: lib/block_scout_web/views/tokens/instance/overview_view.ex:111
+#: lib/block_scout_web/views/tokens/instance/overview_view.ex:119
 #: lib/block_scout_web/views/tokens/overview_view.ex:37
 #: lib/block_scout_web/views/transaction_view.ex:394
 msgid "Token Transfers"
@@ -1065,7 +1065,7 @@ msgid "More internal transactions have come in"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:240
+#: lib/block_scout_web/templates/chain/show.html.eex:241
 #: lib/block_scout_web/templates/pending_transaction/index.html.eex:12
 #: lib/block_scout_web/templates/transaction/index.html.eex:18
 msgid "More transactions have come in"
@@ -1175,7 +1175,7 @@ msgstr ""
 #: lib/block_scout_web/templates/address/overview.html.eex:59
 #: lib/block_scout_web/templates/address/overview.html.eex:163
 #: lib/block_scout_web/templates/tokens/instance/overview/_details.html.eex:51
-#: lib/block_scout_web/templates/tokens/instance/overview/_details.html.eex:101
+#: lib/block_scout_web/templates/tokens/instance/overview/_details.html.eex:107
 #: lib/block_scout_web/templates/tokens/overview/_details.html.eex:36
 #: lib/block_scout_web/templates/tokens/overview/_details.html.eex:121
 msgid "QR Code"
@@ -1309,7 +1309,7 @@ msgstr ""
 #: lib/block_scout_web/templates/address_transaction/index.html.eex:48
 #: lib/block_scout_web/templates/address_validation/index.html.eex:22
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:23
-#: lib/block_scout_web/templates/chain/show.html.eex:183
+#: lib/block_scout_web/templates/chain/show.html.eex:184
 #: lib/block_scout_web/templates/pending_transaction/index.html.eex:21
 #: lib/block_scout_web/templates/stakes/_table.html.eex:44
 #: lib/block_scout_web/templates/tokens/holder/index.html.eex:22
@@ -1324,7 +1324,7 @@ msgid "Something went wrong, click to reload."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:246
+#: lib/block_scout_web/templates/chain/show.html.eex:247
 msgid "Something went wrong, click to retry."
 msgstr ""
 
@@ -1453,7 +1453,7 @@ msgid "Total Supply"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:154
+#: lib/block_scout_web/templates/chain/show.html.eex:155
 msgid "Total blocks"
 msgstr ""
 
@@ -1593,12 +1593,12 @@ msgid "Version"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:178
+#: lib/block_scout_web/templates/chain/show.html.eex:179
 msgid "View All Blocks"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:236
+#: lib/block_scout_web/templates/chain/show.html.eex:237
 msgid "View All Transactions"
 msgstr ""
 
@@ -1640,7 +1640,7 @@ msgid "WEI"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:162
+#: lib/block_scout_web/templates/chain/show.html.eex:163
 msgid "Wallet addresses"
 msgstr ""
 
@@ -1718,8 +1718,8 @@ msgstr ""
 #: lib/block_scout_web/templates/address/_validator_metadata_modal.html.eex:37
 #: lib/block_scout_web/templates/address/overview.html.eex:164
 #: lib/block_scout_web/templates/address/overview.html.eex:172
-#: lib/block_scout_web/templates/tokens/instance/overview/_details.html.eex:102
-#: lib/block_scout_web/templates/tokens/instance/overview/_details.html.eex:110
+#: lib/block_scout_web/templates/tokens/instance/overview/_details.html.eex:108
+#: lib/block_scout_web/templates/tokens/instance/overview/_details.html.eex:116
 #: lib/block_scout_web/templates/tokens/overview/_details.html.eex:122
 #: lib/block_scout_web/templates/tokens/overview/_details.html.eex:130
 msgid "Close"
@@ -1770,7 +1770,7 @@ msgstr ""
 #, elixir-format
 #: lib/block_scout_web/templates/tokens/instance/metadata/index.html.eex:18
 #: lib/block_scout_web/templates/tokens/instance/overview/_tabs.html.eex:10
-#: lib/block_scout_web/views/tokens/instance/overview_view.ex:112
+#: lib/block_scout_web/views/tokens/instance/overview_view.ex:120
 msgid "Metadata"
 msgstr ""
 
@@ -1780,7 +1780,7 @@ msgid "Module"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:133
+#: lib/block_scout_web/templates/chain/show.html.eex:134
 msgid "Total transactions"
 msgstr ""
 
@@ -1867,7 +1867,7 @@ msgstr ""
 #: lib/block_scout_web/templates/address_transaction/index.html.eex:15
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:10
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:18
-#: lib/block_scout_web/templates/chain/show.html.eex:237
+#: lib/block_scout_web/templates/chain/show.html.eex:238
 #: lib/block_scout_web/templates/layout/_topnav.html.eex:53
 #: lib/block_scout_web/views/address_view.ex:349
 msgid "Transactions"

apps/block_scout_web/test/block_scout_web/views/tokens/instance/overview_view_test.exs

@@ -3,7 +3,7 @@ defmodule BlockScoutWeb.Tokens.Instance.OverviewViewTest do
 
   alias BlockScoutWeb.Tokens.Instance.OverviewView
 
-  describe "image_src/1" do
+  describe "media_src/1" do
     test "fetches image from ['properties']['image']['description'] path" do
       json = """
         {
@@ -28,14 +28,14 @@ defmodule BlockScoutWeb.Tokens.Instance.OverviewViewTest do
 
       data = Jason.decode!(json)
 
-      assert OverviewView.image_src(%{metadata: data}) ==
+      assert OverviewView.media_src(%{metadata: data}) ==
                "https://img.paoditu.com/images/cut_trace_images/6b/5f/5b754f6b5f3b5_500_500.jpg"
     end
 
     test "handles empty images" do
       instance = %{metadata: %{"image" => ""}}
 
-      assert OverviewView.image_src(instance) != ""
+      assert OverviewView.media_src(instance) != ""
     end
   end
 end