Claper/lib/claper_web/live/event_live/presenter.html.heex

<style>
  body {
    background: black;
  }

  iframe {
    width: 100%;
    height: 100%;
  }
</style>

<div
  id="presenter"
  phx-hook="Presenter"
  data-max-page={@event.presentation_file.length}
  data-hash={@event.presentation_file.hash}
  data-current-page={@state.position}
>
  <!-- JOIN SCREEN -->
  <div
    id="joinScreen"
    class={"#{if @state.join_screen_visible, do: "opacity-100 z-40", else: "opacity-0"} h-full w-full flex flex-col justify-center bg-black absolute transition-opacity"}
  >
    <div class="h-full bg-white text-black text-center flex flex-col items-center justify-center">
      <span class="font-semibold mb-10 sm:text-3xl md:text-4xl lg:text-6xl">
        {gettext("Scan to interact in real-time")}
      </span>
      <div
        phx-hook="QRCode"
        data-code={@event.code}
        data-dynamic="true"
        id="qr"
        phx-update="ignore"
        class="rounded-lg mx-auto flex items-center justify-center mb-14"
      >
      </div>
      <span class="font-semibold mb-10 sm:text-3xl md:text-4xl lg:text-6xl">
        {gettext("Or go to %{url} and use the code:", url: @host)}
      </span>
      <span class="font-semibold mb-10 sm:text-5xl md:text-6xl lg:text-8xl">
        #{String.upcase(@event.code)}
      </span>
    </div>
  </div>
  <!-- POLL -->
  <%= if @current_poll do %>
    <div
      id="poll"
      class={"#{if @state.poll_visible, do: "opacity-100", else: "opacity-0"} h-full w-full flex flex-col justify-center bg-black/90 absolute z-30 left-1/2 top-1/2 transform -translate-y-1/2 -translate-x-1/2 p-10 transition-opacity"}
    >
      <div class="w-full md:w-1/2 mx-auto h-full">
        <p class={"#{if @iframe, do: "text-xl mb-12", else: "text-5xl mb-24"} text-white font-bold  text-center"}>
          {@current_poll.title}
        </p>

        <div class={"#{if @iframe, do: "space-y-5", else: "space-y-8"} flex flex-col"}>
          <%= if (length @current_poll.poll_opts) > 0 do %>
            <%= for opt <- @current_poll.poll_opts do %>
              <div class={"#{if @iframe, do: "py-1", else: "py-4"} bg-gray-500 px-6 rounded-3xl flex justify-between items-center relative text-white"}>
                <div
                  style={"width: #{opt.percentage}%;"}
                  class="bg-linear-to-r from-primary-500 to-secondary-500 rounded-3xl h-full absolute left-0 transition-all"
                >
                </div>
                <div class="flex space-x-3 z-10 text-left">
                  <span class={"#{if @iframe, do: "text-base", else: "text-2xl"} flex-1 font-bold pr-2"}>
                    {opt.content}
                  </span>
                </div>
                <span class={"#{if @iframe, do: "text-base", else: "text-2xl"} z-10 font-bold"}>
                  {opt.percentage}% ({opt.vote_count})
                </span>
              </div>
            <% end %>
          <% end %>
        </div>
      </div>
    </div>
  <% end %>
  <!-- QUIZ -->
  <%= if @current_quiz do %>
    <.live_component
      module={ClaperWeb.EventLive.ManageableQuizComponent}
      id={"#{@current_quiz.id}-quiz"}
      quiz={@current_quiz}
      iframe={@iframe}
    />
  <% end %>
  <!-- MESSAGES -->
  <div
    id="slider-wrapper"
    class={"w-full min-h-screen grid #{if (@state.chat_visible && @event.presentation_file.length > 0) || (@current_embed && @event.presentation_file.length == 0), do: "grid-cols-[1fr_10px_1fr]", else: "grid-cols-[1fr]"} items-center justify-center relative bg-black"}
    phx-hook="Split"
    data-type="column"
    data-gutter=".gutter-1"
  >
    <div
      :if={@state.chat_visible}
      class="px-5 transition-all duration-150 flex flex-col h-screen py-5 justify-end max-h-screen bg-black"
      id="post-list-wrapper"
      phx-update="replace"
    >
      <%= if @state.show_only_pinned == false do %>
        <div id="post-list" phx-update="replace">
          <%= for post <- @posts do %>
            <div class={if post.__meta__.state == :deleted, do: "hidden"} id={"#{post.id}-post"}>
              <div class="px-4 pb-2 pt-3 rounded-b-lg rounded-tr-lg bg-white shadow-md text-black break-word mt-4">
                <%= if post.name do %>
                  <p class={"#{if @iframe, do: "text-base", else: "text-lg"} text-gray-400 font-semibold mb-2 mr-2"}>
                    {post.name}
                  </p>
                <% end %>
                <p class={"#{if @iframe, do: "text-xl", else: "text-3xl"}"}>{post.body}</p>

                <%= if post.like_count > 0 || post.love_count > 0 || post.lol_count > 0 do %>
                  <div class="flex h-6 space-x-2 text-lg text-gray-500 pb-3 items-center mt-5">
                    <div class="flex items-center">
                      <%= if post.like_count > 0 do %>
                        <img
                          src="/images/icons/thumb.svg"
                          class={"#{if @iframe, do: "h-4", else: "h-7"}"}
                        />
                        <span class="ml-1">{post.like_count}</span>
                      <% end %>
                    </div>
                    <div class="flex items-center">
                      <%= if post.love_count > 0 do %>
                        <img
                          src="/images/icons/heart.svg"
                          class={"#{if @iframe, do: "h-4", else: "h-7"}"}
                        />
                        <span class="ml-1">{post.love_count}</span>
                      <% end %>
                    </div>
                    <div class="flex items-center">
                      <%= if post.lol_count > 0 do %>
                        <img
                          src="/images/icons/laugh.svg"
                          class={"#{if @iframe, do: "h-4", else: "h-7"}"}
                        />
                        <span class="ml-1">{post.lol_count}</span>
                      <% end %>
                    </div>
                  </div>
                <% end %>
              </div>
            </div>
          <% end %>
        </div>
      <% else %>
        <div id="pinned-posts" phx-update="replace">
          <%= for post <- @pinned_posts do %>
            <div class={if post.__meta__.state == :deleted, do: "hidden"} id={"#{post.id}-post"}>
              <div class="px-4 pb-2 pt-3 rounded-b-lg rounded-tr-lg bg-white shadow-md text-black break-word mt-4">
                <%= if post.name do %>
                  <p class={"#{if @iframe, do: "text-base", else: "text-lg"} text-gray-400 font-semibold mb-2 mr-2"}>
                    {post.name}
                  </p>
                <% end %>
                <p class={"#{if @iframe, do: "text-xl", else: "text-3xl"}"}>{post.body}</p>

                <%= if post.like_count > 0 || post.love_count > 0 || post.lol_count > 0 do %>
                  <div class="flex h-6 space-x-2 text-lg text-gray-500 pb-3 items-center mt-5">
                    <div class="flex items-center">
                      <%= if post.like_count > 0 do %>
                        <img
                          src="/images/icons/thumb.svg"
                          class={"#{if @iframe, do: "h-4", else: "h-7"}"}
                        />
                        <span class="ml-1">{post.like_count}</span>
                      <% end %>
                    </div>
                    <div class="flex items-center">
                      <%= if post.love_count > 0 do %>
                        <img
                          src="/images/icons/heart.svg"
                          class={"#{if @iframe, do: "h-4", else: "h-7"}"}
                        />
                        <span class="ml-1">{post.love_count}</span>
                      <% end %>
                    </div>
                    <div class="flex items-center">
                      <%= if post.lol_count > 0 do %>
                        <img
                          src="/images/icons/laugh.svg"
                          class={"#{if @iframe, do: "h-4", else: "h-7"}"}
                        />
                        <span class="ml-1">{post.lol_count}</span>
                      <% end %>
                    </div>
                  </div>
                <% end %>
              </div>
            </div>
          <% end %>
        </div>
      <% end %>
    </div>
    <div
      class={"gutter-1 row-span-full cursor-col-resize col-2 text-center text-sm leading-3 text-white #{if (!@state.chat_visible && @event.presentation_file.length > 0) || (!@current_embed && @event.presentation_file.length == 0), do: "hidden"}"}
      style="writing-mode: vertical-rl"
    >
      •••
    </div>
    <!-- SLIDES -->
    <div id="slides">
      <%= if @current_embed do %>
        <!-- EMBED -->
        <div id="embed" class="max-h-screen w-full h-screen">
          <.live_component
            id="embed-component"
            module={ClaperWeb.EventLive.EmbedIframeComponent}
            provider={@current_embed.provider}
            content={@current_embed.content}
          />
        </div>
      <% end %>
      <div class={"#{if @current_embed, do: "hidden", else: ""} text-center"} id="slider">
        <img
          :for={src <- Presentations.get_slide_urls(@event.presentation_file)}
          src={src}
          class="max-h-screen w-auto!"
        />
      </div>
    </div>
  </div>
  <!-- ONLINE BADGE -->
  <div
    :if={!@iframe && @state.show_attendee_count}
    class="absolute z-20 bottom-5 right-5 px-4 pt-3 pb-1 rounded-md bg-black shadow-md text-white flex-1"
  >
    <div id="reacts" phx-hook="GlobalReacts" data-class-name="h-24" phx-update="ignore"></div>

    <div class="inline-flex justify-between items-center text-white text-2xl">
      <img src="/images/icons/online-users.svg" class="h-12 mr-2" />
      <span id="counter" phx-hook="UpdateAttendees" phx-update="ignore">
        {@attendees_nb}
      </span>
    </div>
  </div>
</div>