Token instance page: improve video media files display

pull/5300/head
Viktor Baranov 3 years ago
parent d74c1f223f
commit 7269381481
  1. 1
      CHANGELOG.md
  2. 6
      apps/block_scout_web/lib/block_scout_web/templates/tokens/instance/overview/_details.html.eex
  3. 47
      apps/block_scout_web/lib/block_scout_web/views/tokens/instance/overview_view.ex
  4. 4
      apps/block_scout_web/priv/gettext/default.pot
  5. 4
      apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po
  6. 60
      apps/block_scout_web/test/block_scout_web/views/tokens/instance/overview_view_test.exs

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

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

@ -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
def media_src_detail(instance) do
result =
cond do
instance.metadata && instance.metadata["animation_url"] ->
retrieve_image(instance.metadata["animation_url"])
defp get_media_src(nil), do: media_src(nil)
instance.metadata && instance.metadata["image_url"] ->
retrieve_image(instance.metadata["image_url"])
defp get_media_src(metadata) do
cond do
metadata["animation_url"] ->
retrieve_image(metadata["animation_url"])
instance.metadata && instance.metadata["image"] ->
retrieve_image(instance.metadata["image"])
metadata["image_url"] ->
retrieve_image(metadata["image_url"])
instance.metadata && instance.metadata["properties"]["image"]["description"] ->
instance.metadata["properties"]["image"]["description"]
metadata["image"] ->
retrieve_image(metadata["image"])
true ->
media_src_detail(nil)
end
metadata["properties"]["image"]["description"] ->
metadata["properties"]["image"]["description"]
if String.trim(result) == "", do: media_src_detail(nil), else: result
true ->
media_src(nil)
end
end
def media_type(media_src) when not is_nil(media_src) do
ext = media_src |> Path.extname() |> String.trim()

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

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

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

Loading…
Cancel
Save