From d74c1f223f578988c4914431ab3541ac4d14fdbf Mon Sep 17 00:00:00 2001
From: cen1 <cen.is.imba@gmail.com>
Date: Thu, 10 Mar 2022 13:49:25 +0100
Subject: [PATCH] general video improvements

---
 .../instance/overview/_details.html.eex       |  8 +++---
 .../tokens/inventory/_token.html.eex          |  2 +-
 .../views/tokens/instance/overview_view.ex    | 25 +++++++++++++++++++
 3 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/apps/block_scout_web/lib/block_scout_web/templates/tokens/instance/overview/_details.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/tokens/instance/overview/_details.html.eex
index c43a52a486..a8c4fbce51 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/tokens/instance/overview/_details.html.eex
+++ b/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(@token_instance.instance)) == "video" do %>
-              <video autoplay style="width: 100%;">
-                <source src=<%= media_src(@token_instance.instance) %> type="video/mp4">
+            <%= if media_type(media_src_detail(@token_instance.instance)) == "video" do %>
+              <video controls autoplay playsinline style="width: 100%;">
+                <source src=<%= media_src_detail(@token_instance.instance) %> type="video/mp4">
               </video>
             <% else %>
-              <img src=<%= media_src(@token_instance.instance) %> />
+              <img src=<%= media_src_detail(@token_instance.instance) %> />
             <% end %>
           </div>
         </div>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/tokens/inventory/_token.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/tokens/inventory/_token.html.eex
index 7db024cd0a..9fbdca242b 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/tokens/inventory/_token.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/tokens/inventory/_token.html.eex
@@ -46,7 +46,7 @@
       <!-- substitute the span with <img class="tile-image" /> to token with images -->
       <div class="inventory-erc721-media" >
         <%= if media_type(media_src(@token_transfer.instance)) == "video" do %>
-          <video autoplay>
+          <video>
             <source src=<%= media_src(@token_transfer.instance) %> type="video/mp4">
           </video>
         <% else %>
diff --git a/apps/block_scout_web/lib/block_scout_web/views/tokens/instance/overview_view.ex b/apps/block_scout_web/lib/block_scout_web/views/tokens/instance/overview_view.ex
index 4d61ff571b..4ae82f02d9 100644
--- a/apps/block_scout_web/lib/block_scout_web/views/tokens/instance/overview_view.ex
+++ b/apps/block_scout_web/lib/block_scout_web/views/tokens/instance/overview_view.ex
@@ -44,6 +44,31 @@ defmodule BlockScoutWeb.Tokens.Instance.OverviewView do
     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"])
+
+        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_detail(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()