diff --git a/assets/css/app.css b/assets/css/app.css index 7e64a65..be0adb2 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -126,7 +126,7 @@ } @media (max-height: 500px) { - #focus-slot { + #focus-slot:not([data-interaction-mode="true"]) { height: 7rem; min-height: 7rem; } diff --git a/lib/claper_web/live/event_live/embed_component.ex b/lib/claper_web/live/event_live/embed_component.ex index 53849bc..815cd40 100644 --- a/lib/claper_web/live/event_live/embed_component.ex +++ b/lib/claper_web/live/event_live/embed_component.ex @@ -3,9 +3,12 @@ defmodule ClaperWeb.EventLive.EmbedComponent do @impl true def render(assigns) do + assigns = assign_new(assigns, :focus_mode, fn -> false end) + ~H"""
-
+
<%= if (length @poll.poll_opts) > 0 do %> <%= for {opt, idx} <- Enum.with_index(@poll.poll_opts) do %> <%= if (length @current_poll_vote) > 0 do %> diff --git a/lib/claper_web/live/event_live/show.html.heex b/lib/claper_web/live/event_live/show.html.heex index 299e37b..780f57e 100644 --- a/lib/claper_web/live/event_live/show.html.heex +++ b/lib/claper_web/live/event_live/show.html.heex @@ -8,7 +8,8 @@ <% interaction_mode? = match?(%Claper.Polls.Poll{}, @current_interaction) || match?(%Claper.Forms.Form{}, @current_interaction) || - match?(%Claper.Quizzes.Quiz{}, @current_interaction) %> + match?(%Claper.Quizzes.Quiz{}, @current_interaction) || + match?(%Claper.Embeds.Embed{attendee_visibility: true}, @current_interaction) %>
@@ -144,7 +146,7 @@ <%= case @current_interaction do %> <% %Claper.Polls.Poll{} -> %> -
+
<.live_component module={ClaperWeb.EventLive.PollComponent} id={"#{@current_interaction.id}-poll"} @@ -159,7 +161,7 @@ />
<% %Claper.Forms.Form{} -> %> -
+
<.live_component module={ClaperWeb.EventLive.FormComponent} id={"#{@current_interaction.id}-form"} @@ -172,7 +174,7 @@ />
<% %Claper.Quizzes.Quiz{} -> %> -
+
<.live_component module={ClaperWeb.EventLive.QuizComponent} id={"#{@current_interaction.id}-quiz"} @@ -188,13 +190,12 @@ />
<% %Claper.Embeds.Embed{attendee_visibility: true} -> %> -
+
<.live_component - id={"focus-embed-#{@current_interaction.id}"} - module={ClaperWeb.EventLive.EmbedIframeComponent} - provider={@current_interaction.provider} - content={@current_interaction.content} - title={@current_interaction.title} + id={"#{@current_interaction.id}-embed"} + module={ClaperWeb.EventLive.EmbedComponent} + embed={@current_interaction} + focus_mode />
<% _ -> %> diff --git a/test/claper_web/live/event_live/interaction_components_test.exs b/test/claper_web/live/event_live/interaction_components_test.exs index e8ef055..a266da8 100644 --- a/test/claper_web/live/event_live/interaction_components_test.exs +++ b/test/claper_web/live/event_live/interaction_components_test.exs @@ -40,6 +40,7 @@ defmodule ClaperWeb.EventLive.InteractionComponentsTest do assert "bg-primary-900/40" in option_classes assert "py-2" in option_classes assert "shrink-0" in option_classes + refute "overflow-y-auto" in classes(document, "#poll-options") refute "min-h-11" in option_classes assert Floki.attribute(document, "#poll-opt-0", "aria-pressed") == ["true"] assert "btn-gradient" in vote_classes @@ -284,6 +285,15 @@ defmodule ClaperWeb.EventLive.InteractionComponentsTest do assert "h-full" in classes(document, "iframe") assert "w-full" in classes(document, "iframe") assert Floki.attribute(document, "iframe", "title") == ["Watch the demo"] + + focus_document = + EmbedComponent + |> render_component(id: "focus-embed-component", embed: embed, focus_mode: true) + |> Floki.parse_document!() + + assert Floki.find(focus_document, "#collapsed-embed") == [] + assert Floki.find(focus_document, "#embed-pane") == [] + assert "shadow-none" in classes(focus_document, "#extended-embed") end test "custom web content is not cropped into a video aspect ratio" do