Skip to content

Commit 9d9e8a3

Browse files
zcesurzcesur
committed
feat: implement modal video component in home section for enhanced multimedia engagement
1 parent 1f38b7b commit 9d9e8a3

File tree

1 file changed

+61
-55
lines changed

1 file changed

+61
-55
lines changed

‎lib/algora_web/live/home_live.ex‎

Lines changed: 61 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ defmodule AlgoraWeb.HomeLive do
1616
alias AlgoraWeb.Components.Footer
1717
alias AlgoraWeb.Components.Header
1818
alias AlgoraWeb.Components.Logos
19-
alias AlgoraWeb.Components.Wordmarks
2019
alias AlgoraWeb.Data.PlatformStats
2120
alias AlgoraWeb.Forms.BountyForm
2221
alias AlgoraWeb.Forms.TipForm
@@ -68,6 +67,39 @@ defmodule AlgoraWeb.HomeLive do
6867
|> assign(:pending_action, nil)}
6968
end
7069

70+
attr :src, :string, required: true
71+
attr :poster, :string, required: true
72+
attr :title, :string, default: nil
73+
attr :alt, :string, default: nil
74+
attr :class, :string, default: nil
75+
attr :autoplay, :boolean, default: true
76+
77+
defp modal_video(assigns) do
78+
~H"""
79+
<div
80+
class={
81+
classes([
82+
"group relative aspect-video w-full overflow-hidden rounded-xl lg:rounded-2xl bg-gray-800 cursor-pointer",
83+
@class
84+
])
85+
}
86+
phx-click={
87+
%JS{}
88+
|> JS.set_attribute({"src", @src <> "?autoplay=#{@autoplay}"}, to: "#video-modal-iframe")
89+
|> JS.set_attribute({"title", @title}, to: "#video-modal-iframe")
90+
|> show_modal("video-modal")
91+
}
92+
>
93+
<img src={@poster} alt={@alt} class="object-cover w-full h-full" />
94+
<div class="absolute inset-0 flex items-center justify-center">
95+
<div class="size-16 rounded-full bg-black/50 flex items-center justify-center group-hover:bg-black/70 transition-colors">
96+
<.icon name="tabler-player-play-filled" class="size-8 text-white" />
97+
</div>
98+
</div>
99+
</div>
100+
"""
101+
end
102+
71103
@impl true
72104
def render(assigns) do
73105
~H"""
@@ -132,33 +164,13 @@ defmodule AlgoraWeb.HomeLive do
132164
<div class="mx-auto max-w-6xl gap-8 text-sm leading-6 py-16 sm:py-40">
133165
<div class="pt-40 flex flex-row gap-x-16 gap-y-8">
134166
<div class="w-[40%]">
135-
<div class="relative flex aspect-[9/16] w-full items-center justify-center overflow-hidden rounded-xl lg:rounded-2xl rounded-r-none lg:rounded-r-none bg-gray-800">
136-
<div
137-
class="absolute inset-0 z-10 flex items-center justify-center cursor-pointer group"
138-
phx-click={JS.hide(to: "#poster-overlay")}
139-
id="poster-overlay"
140-
>
141-
<img
142-
src={~p"/images/people/john-de-goes.jpg"}
143-
alt="John A De Goes"
144-
class="object-cover aspect-[9/16] w-full h-full absolute inset-0"
145-
/>
146-
<div class="relative z-10 size-16 rounded-full bg-black/50 flex items-center justify-center group-hover:bg-black/70 transition-colors">
147-
<.icon name="tabler-player-play-filled" class="size-8 text-white" />
148-
</div>
149-
</div>
150-
<iframe
151-
src="https://www.youtube.com/embed/xObOGcUdtY0?autoplay=1"
152-
title="$15,000 Open source bounty to hire a Rust engineer"
153-
frameborder="0"
154-
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
155-
referrerpolicy="strict-origin-when-cross-origin"
156-
allowfullscreen
157-
width="100%"
158-
height="100%"
159-
>
160-
</iframe>
161-
</div>
167+
<.modal_video
168+
class="aspect-[9/16] rounded-l-xl lg:rounded-l-2xl"
169+
src="https://www.youtube.com/embed/xObOGcUdtY0"
170+
title="$15,000 Open source bounty to hire a Rust engineer"
171+
poster={~p"/images/people/john-de-goes.jpg"}
172+
alt="John A De Goes"
173+
/>
162174
</div>
163175
<div class="w-[60%]">
164176
<div class="relative flex aspect-[1121/1343] w-full items-center justify-center overflow-hidden rounded-xl lg:rounded-2xl rounded-l-none lg:rounded-l-none bg-gray-800">
@@ -686,33 +698,13 @@ defmodule AlgoraWeb.HomeLive do
686698
</div>
687699
</div>
688700
<div class="w-[76%]">
689-
<div class="relative flex aspect-video w-full items-center justify-center overflow-hidden rounded-xl lg:rounded-2xl bg-gray-800">
690-
<div
691-
class="absolute inset-0 z-10 flex items-center justify-center cursor-pointer group"
692-
phx-click={JS.hide(to: "#poster-overlay-mogery")}
693-
id="poster-overlay-mogery"
694-
>
695-
<img
696-
src={~p"/images/people/mogery.png"}
697-
alt="Gergő Móricz"
698-
class="object-cover aspect-[9/16] w-full h-full rounded-2xl absolute inset-0"
699-
/>
700-
<div class="relative z-10 size-16 rounded-full bg-black/50 flex items-center justify-center group-hover:bg-black/70 transition-colors">
701-
<.icon name="tabler-player-play-filled" class="size-8 text-white" />
702-
</div>
703-
</div>
704-
<iframe
705-
src="https://www.youtube.com/embed/HhTT-GX5tjQ"
706-
title="🧑🏻‍💻 Building your bounty hunter reputation & Mendable contributions 💸"
707-
frameborder="0"
708-
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
709-
referrerpolicy="strict-origin-when-cross-origin"
710-
allowfullscreen
711-
width="100%"
712-
height="100%"
713-
>
714-
</iframe>
715-
</div>
701+
<.modal_video
702+
class="rounded-r-xl lg:rounded-r-2xl"
703+
src="https://www.youtube.com/embed/HhTT-GX5tjQ"
704+
title="🧑🏻‍💻 Building your bounty hunter reputation & Mendable contributions 💸"
705+
poster={~p"/images/people/mogery.png"}
706+
alt="Gergő Móricz"
707+
/>
716708
</div>
717709
</div>
718710
</div>
@@ -824,6 +816,20 @@ defmodule AlgoraWeb.HomeLive do
824816
</div>
825817
</main>
826818
</div>
819+
820+
<.dialog id="video-modal" show={false} class="w-screen h-screen lg:max-w-none p-[5rem]">
821+
<.dialog_content class="flex items-center justify-center">
822+
<iframe
823+
id="video-modal-iframe"
824+
frameborder="0"
825+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
826+
referrerpolicy="strict-origin-when-cross-origin"
827+
allowfullscreen
828+
class="w-full h-full"
829+
>
830+
</iframe>
831+
</.dialog_content>
832+
</.dialog>
827833
"""
828834
end
829835

0 commit comments

Comments
 (0)