From 04f0ff273c1589e03795a7306227bf5c4e07c384 Mon Sep 17 00:00:00 2001
From: Tjaco Oostdijk <tjaco.oostdijk@persgroep.net>
Date: Mon, 23 Jan 2023 20:59:51 +0100
Subject: [PATCH 1/2] feat: live_video_preview

---
 assets/js/phoenix_live_view/hooks.js       | 15 +++++
 lib/phoenix_component.ex                   | 40 ++++++++++++++
 test/phoenix_component/components_test.exs | 64 ++++++++++++++++++++++
 3 files changed, 119 insertions(+)

diff --git a/assets/js/phoenix_live_view/hooks.js b/assets/js/phoenix_live_view/hooks.js
index 672f8cea86..1e95244027 100644
--- a/assets/js/phoenix_live_view/hooks.js
+++ b/assets/js/phoenix_live_view/hooks.js
@@ -43,6 +43,21 @@ let Hooks = {
       URL.revokeObjectURL(this.url)
     }
   },
+  // Currently this is exactly the same as the LiveImgPreview, but I wanted to add this 
+  // so possibly this can have functionality specific to videos in the future.
+  LiveVideoPreview: {
+    mounted(){
+      this.ref = this.el.getAttribute("data-phx-entry-ref")
+      this.inputEl = document.getElementById(this.el.getAttribute(PHX_UPLOAD_REF))
+      LiveUploader.getEntryDataURL(this.inputEl, this.ref, url => {
+        this.url = url
+        this.el.src = url
+      })
+    },
+    destroyed(){
+      URL.revokeObjectURL(this.url)
+    }
+  },
   FocusWrap: {
     mounted(){
       this.focusStart = this.el.firstElementChild
diff --git a/lib/phoenix_component.ex b/lib/phoenix_component.ex
index 1e3f7fc918..163d251f73 100644
--- a/lib/phoenix_component.ex
+++ b/lib/phoenix_component.ex
@@ -2582,6 +2582,46 @@ defmodule Phoenix.Component do
     raise ArgumentError, "missing required :entry attribute to <.live_img_preview/>"
   end
 
+  @doc """
+  Generates a video preview on the client for a selected file.
+
+  ## Examples
+
+  ```heex
+  <%= for entry <- @uploads.avatar.entries do %>
+    <.live_video_preview entry={entry} width="400" />
+  <% end %>
+  ```
+  """
+  @doc type: :component
+  def live_video_preview(assigns)
+
+  # attr :entry, Phoenix.LiveView.UploadEntry, required: true
+  # attr :rest, :global
+  def live_video_preview(%{entry: %Phoenix.LiveView.UploadEntry{ref: ref} = entry} = assigns) do
+    rest =
+      assigns
+      |> assigns_to_attributes([:entry])
+      |> Keyword.put_new_lazy(:id, fn -> "phx-preview-#{ref}" end)
+
+    assigns = assign(assigns, entry: entry, ref: ref, rest: rest)
+
+    ~H"""
+    <video
+      controls
+      data-phx-upload-ref={@entry.upload_ref}
+      data-phx-entry-ref={@ref}
+      data-phx-hook="Phoenix.LiveVideoPreview"
+      data-phx-update="ignore"
+      {@rest}
+    />
+    """
+  end
+
+  def live_video_preview(_assigns) do
+    raise ArgumentError, "missing required :entry attribute to <.live_video_preview/>"
+  end
+
   @doc """
   Intersperses separator slot between an enumerable.
 
diff --git a/test/phoenix_component/components_test.exs b/test/phoenix_component/components_test.exs
index 72b2ae6958..f6ad19f70f 100644
--- a/test/phoenix_component/components_test.exs
+++ b/test/phoenix_component/components_test.exs
@@ -479,6 +479,70 @@ defmodule Phoenix.LiveView.ComponentsTest do
     end
   end
 
+  describe "live_img_preview/1" do
+    test "basic usage" do
+      entry = %Phoenix.LiveView.UploadEntry{
+        progress: 100,
+        preflighted?: true,
+        upload_config: :poster_imgix_src,
+        upload_ref: "phx-Fz1Xjn4seffww0vC",
+        ref: "1",
+        uuid: "898e29b9-1724-4b5f-b42f-2389b85bb9f4",
+        valid?: true,
+        done?: true,
+        cancelled?: false,
+        client_name: "an_image.jpg",
+        client_relative_path: "",
+        client_size: 2065187,
+        client_type: "image/jpeg",
+        client_last_modified: 1646642130571
+      }
+      assigns = %{entry: entry}
+
+      assert render(~H|<.live_img_preview entry={@entry}/>|) == ~s|<img data-phx-upload-ref="phx-Fz1Xjn4seffww0vC" data-phx-entry-ref="1" data-phx-hook="Phoenix.LiveImgPreview" data-phx-update="ignore" id="phx-preview-1">|
+    end
+
+    test "requires an entry to be given" do
+      assigns = %{}
+
+      assert_raise ArgumentError, "missing required :entry attribute to <.live_img_preview/>",  fn ->
+        render(~H|<.live_img_preview />|)
+      end
+    end
+  end
+
+  describe "live_video_preview/1" do
+    test "basic usage" do
+      entry = %Phoenix.LiveView.UploadEntry{
+        progress: 100,
+        preflighted?: true,
+        upload_config: :some_field,
+        upload_ref: "phx-Fz1Xjn4tLhvww0xC",
+        ref: "0",
+        uuid: "e3ae39ee-8251-4e24-9655-d1574adef682",
+        valid?: true,
+        done?: true,
+        cancelled?: false,
+        client_name: "a_video.mp4",
+        client_relative_path: "",
+        client_size: 17116709,
+        client_type: "video/mp4",
+        client_last_modified: 1671742709575
+      }
+      assigns = %{entry: entry}
+
+      assert render(~H|<.live_video_preview entry={@entry}/>|) == ~s|<video controls data-phx-upload-ref="phx-Fz1Xjn4tLhvww0xC" data-phx-entry-ref="0" data-phx-hook="Phoenix.LiveVideoPreview" data-phx-update="ignore" id="phx-preview-0"></video>|
+    end
+
+    test "requires an entry to be given" do
+      assigns = %{}
+
+      assert_raise ArgumentError, "missing required :entry attribute to <.live_video_preview/>",  fn ->
+        render(~H|<.live_video_preview />|)
+      end
+    end
+  end
+
   describe "intersperse" do
     test "generates form with no options" do
       assigns = %{}

From 224a804c6272f8e5e8e8047d611ba276b5996eb7 Mon Sep 17 00:00:00 2001
From: Tjaco Oostdijk <tjaco.oostdijk@persgroep.net>
Date: Tue, 24 Jan 2023 22:40:59 +0100
Subject: [PATCH 2/2] fix: use LiveImgPreview Hook for live_video_preview

---
 assets/js/phoenix_live_view/hooks.js       | 15 ---------------
 lib/phoenix_component.ex                   |  2 +-
 test/phoenix_component/components_test.exs |  2 +-
 3 files changed, 2 insertions(+), 17 deletions(-)

diff --git a/assets/js/phoenix_live_view/hooks.js b/assets/js/phoenix_live_view/hooks.js
index 1e95244027..672f8cea86 100644
--- a/assets/js/phoenix_live_view/hooks.js
+++ b/assets/js/phoenix_live_view/hooks.js
@@ -43,21 +43,6 @@ let Hooks = {
       URL.revokeObjectURL(this.url)
     }
   },
-  // Currently this is exactly the same as the LiveImgPreview, but I wanted to add this 
-  // so possibly this can have functionality specific to videos in the future.
-  LiveVideoPreview: {
-    mounted(){
-      this.ref = this.el.getAttribute("data-phx-entry-ref")
-      this.inputEl = document.getElementById(this.el.getAttribute(PHX_UPLOAD_REF))
-      LiveUploader.getEntryDataURL(this.inputEl, this.ref, url => {
-        this.url = url
-        this.el.src = url
-      })
-    },
-    destroyed(){
-      URL.revokeObjectURL(this.url)
-    }
-  },
   FocusWrap: {
     mounted(){
       this.focusStart = this.el.firstElementChild
diff --git a/lib/phoenix_component.ex b/lib/phoenix_component.ex
index 163d251f73..5f753798fd 100644
--- a/lib/phoenix_component.ex
+++ b/lib/phoenix_component.ex
@@ -2611,7 +2611,7 @@ defmodule Phoenix.Component do
       controls
       data-phx-upload-ref={@entry.upload_ref}
       data-phx-entry-ref={@ref}
-      data-phx-hook="Phoenix.LiveVideoPreview"
+      data-phx-hook="Phoenix.LiveImgPreview"
       data-phx-update="ignore"
       {@rest}
     />
diff --git a/test/phoenix_component/components_test.exs b/test/phoenix_component/components_test.exs
index f6ad19f70f..6a2d07590d 100644
--- a/test/phoenix_component/components_test.exs
+++ b/test/phoenix_component/components_test.exs
@@ -531,7 +531,7 @@ defmodule Phoenix.LiveView.ComponentsTest do
       }
       assigns = %{entry: entry}
 
-      assert render(~H|<.live_video_preview entry={@entry}/>|) == ~s|<video controls data-phx-upload-ref="phx-Fz1Xjn4tLhvww0xC" data-phx-entry-ref="0" data-phx-hook="Phoenix.LiveVideoPreview" data-phx-update="ignore" id="phx-preview-0"></video>|
+      assert render(~H|<.live_video_preview entry={@entry}/>|) == ~s|<video controls data-phx-upload-ref="phx-Fz1Xjn4tLhvww0xC" data-phx-entry-ref="0" data-phx-hook="Phoenix.LiveImgPreview" data-phx-update="ignore" id="phx-preview-0"></video>|
     end
 
     test "requires an entry to be given" do