Skip to content

Commit 48f4d72

Browse files
zcesurzcesur
committed
feat: add start attribute to modal_video component for enhanced video playback control
1 parent 9ea0b0c commit 48f4d72

File tree

1 file changed

+35
-37
lines changed

1 file changed

+35
-37
lines changed

‎lib/algora_web/live/home_live.ex‎

Lines changed: 35 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ defmodule AlgoraWeb.HomeLive do
7474
attr :alt, :string, default: nil
7575
attr :class, :string, default: nil
7676
attr :autoplay, :boolean, default: true
77+
attr :start, :integer, default: 0
7778

7879
defp modal_video(assigns) do
7980
~H"""
@@ -86,7 +87,9 @@ defmodule AlgoraWeb.HomeLive do
8687
}
8788
phx-click={
8889
%JS{}
89-
|> JS.set_attribute({"src", @src <> "?autoplay=#{@autoplay}"}, to: "#video-modal-iframe")
90+
|> JS.set_attribute({"src", @src <> "?autoplay=#{@autoplay}&start=#{@start}"},
91+
to: "#video-modal-iframe"
92+
)
9093
|> JS.set_attribute({"title", @title}, to: "#video-modal-iframe")
9194
|> show_modal("video-modal")
9295
}
@@ -176,6 +179,7 @@ defmodule AlgoraWeb.HomeLive do
176179
<.modal_video
177180
class="aspect-[9/16] rounded-l-xl lg:rounded-l-2xl"
178181
src="https://www.youtube.com/embed/xObOGcUdtY0"
182+
start={122}
179183
title="$15,000 Open source bounty to hire a Rust engineer"
180184
poster={~p"/images/people/john-de-goes.jpg"}
181185
alt="John A De Goes"
@@ -575,25 +579,23 @@ defmodule AlgoraWeb.HomeLive do
575579
Find your next team member through real-world collaboration. Use bounties to evaluate developers based on actual contributions to your codebase.
576580
</p>
577581
<div class="mx-auto mt-16 max-w-6xl gap-8 text-sm leading-6 sm:mt-32">
578-
<div class="grid items-center gap-x-16 gap-y-8 lg:grid-cols-11">
582+
<div class="grid items-center gap-x-16 gap-y-8 lg:grid-cols-12">
579583
<div class="lg:col-span-6 order-first lg:order-last">
580584
<div class="relative flex aspect-video w-full items-center justify-center overflow-hidden rounded-xl lg:rounded-2xl bg-gray-800">
581-
<iframe
582-
src="https://www.youtube.com/embed/FXQVD02rfg8?si=rt3r_8-aFt2ZKla8"
583-
title="YouTube video player"
584-
frameborder="0"
585-
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
586-
referrerpolicy="strict-origin-when-cross-origin"
587-
allowfullscreen
588-
width="100%"
589-
height="100%"
590-
>
591-
</iframe>
585+
<.modal_video
586+
class="rounded-r-xl lg:rounded-r-2xl"
587+
src="https://www.youtube.com/embed/FXQVD02rfg8"
588+
start={8}
589+
title="How Nick got a job with Open Source Software"
590+
poster="https://img.youtube.com/vi/FXQVD02rfg8/maxresdefault.jpg"
591+
alt="Eric Allam"
592+
/>
592593
</div>
593594
</div>
594-
<div class="lg:col-span-5 order-last lg:order-first">
595+
<div class="lg:col-span-6 order-last lg:order-first">
595596
<h3 class="text-3xl font-display font-bold leading-[3rem]">
596-
It was the easiest hire because we already knew how great he was
597+
It was the <span class="text-success">easiest hire</span>
598+
because we already knew how great he was
597599
</h3>
598600
<div class="flex flex-wrap items-center gap-x-8 gap-y-4 pt-12">
599601
<div class="flex items-center gap-4">
@@ -611,24 +613,23 @@ defmodule AlgoraWeb.HomeLive do
611613
612614
<div class="mx-auto mt-16 max-w-6xl gap-8 text-sm leading-6 sm:mt-32">
613615
<div class="grid items-center gap-x-16 gap-y-8 lg:grid-cols-11">
614-
<div class="lg:col-span-6">
616+
<div class="lg:col-span-5">
615617
<div class="relative flex aspect-video w-full items-center justify-center overflow-hidden rounded-xl lg:rounded-2xl bg-gray-800">
616-
<iframe
618+
<.modal_video
619+
class="rounded-r-xl lg:rounded-r-2xl"
617620
src="https://www.youtube.com/embed/3wZGDuoPajk"
618-
title="YouTube video player"
619-
frameborder="0"
620-
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
621-
referrerpolicy="strict-origin-when-cross-origin"
622-
allowfullscreen
623-
width="100%"
624-
height="100%"
625-
>
626-
</iframe>
621+
start={13}
622+
title="OSS Bounties & Hiring engineers on Algora.io | Founder Testimonial"
623+
poster="https://img.youtube.com/vi/3wZGDuoPajk/maxresdefault.jpg"
624+
alt="Tushar Mathur"
625+
/>
627626
</div>
628627
</div>
629-
<div class="lg:col-span-5">
628+
<div class="lg:col-span-6">
630629
<h3 class="text-3xl font-display font-bold leading-[3rem]">
631-
Bounties help us control our burn rate, get work done & meet new hires. I've made 3 full-time hires from Algora
630+
Bounties help us control our burn rate, get work done & meet new hires. I've made
631+
<span class="text-success">3 full-time hires</span>
632+
using Algora
632633
</h3>
633634
<div class="flex flex-wrap items-center gap-x-8 gap-y-4 pt-12">
634635
<div class="flex items-center gap-4">
@@ -693,23 +694,20 @@ defmodule AlgoraWeb.HomeLive do
693694
<div class="pt-12 flex flex-row gap-x-16 gap-y-8">
694695
<div class="w-[24%]">
695696
<div class="relative flex aspect-[9/16] w-full items-center justify-center overflow-hidden rounded-xl lg:rounded-2xl bg-gray-800">
696-
<iframe
697+
<.modal_video
698+
class="aspect-[9/16] rounded-r-xl lg:rounded-r-2xl"
697699
src="https://www.youtube.com/embed/j4fLNIJCywk"
698700
title="High school student solves #opensource bounties"
699-
frameborder="0"
700-
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
701-
referrerpolicy="strict-origin-when-cross-origin"
702-
allowfullscreen
703-
width="100%"
704-
height="100%"
705-
>
706-
</iframe>
701+
poster="https://img.youtube.com/vi/j4fLNIJCywk/maxresdefault.jpg"
702+
alt="Gergő Móricz"
703+
/>
707704
</div>
708705
</div>
709706
<div class="w-[76%]">
710707
<.modal_video
711708
class="rounded-r-xl lg:rounded-r-2xl"
712709
src="https://www.youtube.com/embed/HhTT-GX5tjQ"
710+
start={293}
713711
title="🧑🏻‍💻 Building your bounty hunter reputation & Mendable contributions 💸"
714712
poster={~p"/images/people/mogery.png"}
715713
alt="Gergő Móricz"

0 commit comments

Comments
 (0)