Token instance page: improve video media files display

CHANGELOG.md

@@ -4,6 +4,7 @@
 - [#5268](https://github.com/blockscout/blockscout/pull/5268) - Contract names display improvement
 
 ### Fixes
+- [#5300](https://github.com/blockscout/blockscout/pull/5300) - Token instance page: general video improvements
 - [#5136](https://github.com/blockscout/blockscout/pull/5136) - Improve contract verification
 - [#5285](https://github.com/blockscout/blockscout/pull/5285) - Fix verified smart-contract bytecode twins feature
 - [#5269](https://github.com/blockscout/blockscout/pull/5269) - Address Page: Fix implementation address align

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

@@ -61,12 +61,12 @@
       <div class="card">
         <div class="card-body">
           <div class="erc721-media" >
-            <%= if media_type(media_src_detail(@token_instance.instance)) == "video" do %>
+            <%= if media_type(media_src(@token_instance.instance)) == "video" do %>
               <video controls autoplay playsinline style="width: 100%;">
-                <source src=<%= media_src_detail(@token_instance.instance) %> type="video/mp4">
+                <source src=<%= media_src(@token_instance.instance) %> type="video/mp4">
               </video>
             <% else %>
-              <img src=<%= media_src_detail(@token_instance.instance) %> />
+              <img src=<%= media_src(@token_instance.instance) %> />
             <% end %>
           </div>
         </div>

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

@@ -26,49 +26,32 @@ defmodule BlockScoutWeb.Tokens.Instance.OverviewView do
   def media_src(nil), do: @stub_image
 
   def media_src(instance) do
-    result =
-      cond do
-        instance.metadata && instance.metadata["image_url"] ->
-          retrieve_image(instance.metadata["image_url"])
-
-        instance.metadata && instance.metadata["image"] ->
-          retrieve_image(instance.metadata["image"])
-
-        instance.metadata && instance.metadata["properties"]["image"]["description"] ->
-          instance.metadata["properties"]["image"]["description"]
-
-        true ->
-          media_src(nil)
-      end
+    result = get_media_src(instance.metadata)
 
     if String.trim(result) == "", do: media_src(nil), else: result
   end
 
-  def media_src_detail(nil), do: @stub_image
+  defp get_media_src(nil), do: media_src(nil)
 
-  def media_src_detail(instance) do
-    result =
+  defp get_media_src(metadata) do
     cond do
-        instance.metadata && instance.metadata["animation_url"] ->
-          retrieve_image(instance.metadata["animation_url"])
+      metadata["animation_url"] ->
+        retrieve_image(metadata["animation_url"])
 
-        instance.metadata && instance.metadata["image_url"] ->
-          retrieve_image(instance.metadata["image_url"])
+      metadata["image_url"] ->
+        retrieve_image(metadata["image_url"])
 
-        instance.metadata && instance.metadata["image"] ->
-          retrieve_image(instance.metadata["image"])
+      metadata["image"] ->
+        retrieve_image(metadata["image"])
 
-        instance.metadata && instance.metadata["properties"]["image"]["description"] ->
-          instance.metadata["properties"]["image"]["description"]
+      metadata["properties"]["image"]["description"] ->
+        metadata["properties"]["image"]["description"]
 
       true ->
-          media_src_detail(nil)
+        media_src(nil)
     end
-
-    if String.trim(result) == "", do: media_src_detail(nil), else: result
   end
 
-
   def media_type(media_src) when not is_nil(media_src) do
     ext = media_src |> Path.extname() |> String.trim()
 

apps/block_scout_web/priv/gettext/default.pot

@@ -1551,7 +1551,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:187
+#: lib/block_scout_web/templates/tokens/instance/overview/_tabs.html.eex:10 lib/block_scout_web/views/tokens/instance/overview_view.ex:195
 msgid "Metadata"
 msgstr ""
 
@@ -2629,7 +2629,7 @@ msgstr ""
 #: lib/block_scout_web/templates/tokens/instance/transfer/index.html.eex:16 lib/block_scout_web/templates/tokens/overview/_tabs.html.eex:5
 #: lib/block_scout_web/templates/tokens/transfer/index.html.eex:14 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:357
-#: lib/block_scout_web/views/tokens/instance/overview_view.ex:186 lib/block_scout_web/views/tokens/overview_view.ex:41
+#: lib/block_scout_web/views/tokens/instance/overview_view.ex:194 lib/block_scout_web/views/tokens/overview_view.ex:41
 #: lib/block_scout_web/views/transaction_view.ex:511
 msgid "Token Transfers"
 msgstr ""

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

@@ -1551,7 +1551,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:187
+#: lib/block_scout_web/templates/tokens/instance/overview/_tabs.html.eex:10 lib/block_scout_web/views/tokens/instance/overview_view.ex:195
 msgid "Metadata"
 msgstr ""
 
@@ -2629,7 +2629,7 @@ msgstr ""
 #: lib/block_scout_web/templates/tokens/instance/transfer/index.html.eex:16 lib/block_scout_web/templates/tokens/overview/_tabs.html.eex:5
 #: lib/block_scout_web/templates/tokens/transfer/index.html.eex:14 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:357
-#: lib/block_scout_web/views/tokens/instance/overview_view.ex:186 lib/block_scout_web/views/tokens/overview_view.ex:41
+#: lib/block_scout_web/views/tokens/instance/overview_view.ex:194 lib/block_scout_web/views/tokens/overview_view.ex:41
 #: lib/block_scout_web/views/transaction_view.ex:511
 msgid "Token Transfers"
 msgstr ""

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

@@ -37,5 +37,65 @@ defmodule BlockScoutWeb.Tokens.Instance.OverviewViewTest do
 
       assert OverviewView.media_src(instance) != ""
     end
+
+    test "fetches image from image_url" do
+      json = """
+        {
+          "name": "ManReclaimed at MetaZoo International",
+          "tags": ["poap", "event"],
+          "year": 2021,
+          "home_url": "https://app.poap.xyz/token/98554",
+          "image_url": "https://storage.googleapis.com/poapmedia/manreclaimed-at-metazoo-international-2021-logo-1615826139072.png",
+          "attributes": [{
+            "value": "15-Mar-2021",
+            "trait_type": "startDate"
+          }, {
+            "value": "31-Mar-2021",
+            "trait_type": "endDate"
+          }, {
+            "value": "true",
+            "trait_type": "virtualEvent"
+          }, {
+            "value": "Decentraland",
+            "trait_type": "city"
+          }, {
+            "value": "111,-23",
+            "trait_type": "country"
+          }, {
+            "value": "https://play.decentraland.org/?position=110%2C-23&realm=loki-amber",
+            "trait_type": "eventURL"
+          }],
+          "properties": [],
+          "description": "You experienced ManReclaimed at MetaZoo International...",
+          "external_url": "https://api.poap.xyz/metadata/1242/98554"
+        }
+      """
+
+      data = Jason.decode!(json)
+
+      assert OverviewView.media_src(%{metadata: data}) ==
+               "https://storage.googleapis.com/poapmedia/manreclaimed-at-metazoo-international-2021-logo-1615826139072.png"
+    end
+
+    test "fetches image from animation_url" do
+      json = """
+        {
+          "name": "Zombie MILF",
+          "image": "https://assets.cargo.build/611a883b0d039100261bfe79/b89cf189-13e9-47ed-b801-a1f6aa15a7bf/a0784ea0-45be-41cd-9cdd-cc40ad20f20d-zombiepngpng.png",
+          "description": "grab your crossbow, ‘cause you’re gonna turn when this MILFy zombie bites you!",
+          "external_url": "https://app.cargo.build/marketplace?tokenDetail=611a876d0d14af00085bf25c:120",
+          "animation_url": "https://assets.cargo.build/611a883b0d039100261bfe79/b89cf189-13e9-47ed-b801-a1f6aa15a7bf/376db72d-f8dc-44bb-b6ac-0e8a31fc6164-comp-1_8mp4.mp4",
+          "cargoDisplayContent": {
+            "type": "video",
+            "files": ["https://assets.cargo.build/611a883b0d039100261bfe79/b89cf189-13e9-47ed-b801-a1f6aa15a7bf/376db72d-f8dc-44bb-b6ac-0e8a31fc6164-comp-1_8mp4.mp4"]
+          }
+        }
+      """
+
+      data = Jason.decode!(json)
+
+      assert OverviewView.media_src(%{metadata: data}) ==
+               "https://assets.cargo.build/611a883b0d039100261bfe79/b89cf189-13e9-47ed-b801-a1f6aa15a7bf/376db72d-f8dc-44bb-b6ac-0e8a31fc6164-comp-1_8mp4.mp4"
+    end
   end
 end