mirror of
https://github.com/ClaperCo/Claper.git
synced 2025-12-16 03:47:56 +01:00
459 lines
18 KiB
Plaintext
459 lines
18 KiB
Plaintext
<%= if @started do %>
|
|
<div class="relative min-h-screen lg:flex lg:flex-col lg:items-center lg:w-full bg-black lg:bg-gradient-to-tl from-primary-500 to-secondary-500">
|
|
<div class="relative w-full">
|
|
<div
|
|
id="side-menu-shadow"
|
|
phx-click={toggle_side_menu()}
|
|
class="hidden fixed z-20 h-screen bg-black bg-opacity-70 w-full"
|
|
>
|
|
</div>
|
|
|
|
<div
|
|
id="side-menu"
|
|
class="hidden fixed h-screen w-64 bg-white rounded-r-lg flex z-30 px-4 flex-col justify-start lg:left-0"
|
|
>
|
|
<div>
|
|
<img src="/images/logo-large-black.svg" class="h-16 my-3" />
|
|
|
|
<span class="font-bold text-xl"><%= @event.name %></span>
|
|
</div>
|
|
|
|
<a
|
|
class="flex items-center px-3 py-2 bg-gray-200 mb-15 rounded-lg mt-5"
|
|
href={~p"/?disconnected_from=#{@event.uuid}"}
|
|
>
|
|
<img src="/images/icons/exit-outline.svg" class="h-5 mr-3" />
|
|
<span><%= gettext("Leave") %></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
id="content"
|
|
class="w-full bg-black fixed z-10 lg:w-1/3"
|
|
style="box-shadow: 0px 15px 14px 1px rgba(0,0,0,0.75); -webkit-box-shadow: 0px 15px 14px 1px rgba(0,0,0,0.75); -moz-box-shadow: 0px 15px 14px 1px rgba(0,0,0,0.75);"
|
|
>
|
|
<div id="banner" class="hidden w-full bg-gray-800 text-center" phx-hook="EmbeddedBanner">
|
|
<a href="https://claper.co" target="_blank" class="text-xs text-white py-3 w-full">
|
|
<%= gettext("Create your next presentation with") %>
|
|
<span class="underline">Claper</span>
|
|
</a>
|
|
</div>
|
|
<div class="flex justify-between items-center px-5 py-3">
|
|
<button
|
|
phx-click={toggle_side_menu()}
|
|
class="bg-black rounded-full text-sm px-3 py-1 bg-gradient-to-tl from-primary-500 to-secondary-500 bg-size-200 bg-pos-0 text-white uppercase flex items-center"
|
|
>
|
|
<img src="/images/icons/menu-outline.svg" class="h-6" />
|
|
<span class="ml-1">#<%= @event.code %></span>
|
|
</button>
|
|
|
|
<div class="inline-flex justify-between items-center text-white text-sm">
|
|
<img src="/images/icons/online-users.svg" class="h-6 mr-2" />
|
|
<span id="counter"><%= @attendees_nb %></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%= case @current_interaction do %>
|
|
<% %Claper.Polls.Poll{} -> %>
|
|
<div
|
|
id="poll-wrapper-parent"
|
|
class="animate__animated animate__zoomInDown w-full lg:w-1/3 lg:mx-auto fixed top-16 z-10 px-2 lg:px-7 pb-6 max-h-screen overflow-y-auto"
|
|
>
|
|
<div class="transition-all" id="poll-wrapper">
|
|
<.live_component
|
|
module={ClaperWeb.EventLive.PollComponent}
|
|
id={"#{@current_interaction.id}-poll"}
|
|
poll={@current_interaction}
|
|
current_user={@current_user}
|
|
attendee_identifier={@attendee_identifier}
|
|
event={@event}
|
|
selected_poll_opt={@selected_poll_opt}
|
|
current_poll_vote={@current_poll_vote}
|
|
show_results={@current_interaction.show_results}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<% %Claper.Forms.Form{} -> %>
|
|
<div
|
|
id="form-wrapper-parent"
|
|
class="animate__animated animate__zoomInDown w-full lg:w-1/3 lg:mx-auto fixed top-16 z-10 px-2 pb-6 lg:px-7 max-h-screen overflow-y-auto"
|
|
>
|
|
<div class="transition-all" id="form-wrapper">
|
|
<.live_component
|
|
module={ClaperWeb.EventLive.FormComponent}
|
|
id={"#{@current_interaction.id}-form"}
|
|
form={@current_interaction}
|
|
current_user={@current_user}
|
|
attendee_identifier={@attendee_identifier}
|
|
event={@event}
|
|
current_form_submit={@current_form_submit}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<% %Claper.Embeds.Embed{} -> %>
|
|
<div
|
|
:if={@current_interaction.attendee_visibility == true}
|
|
id="embed-wrapper-parent"
|
|
class="animate__animated animate__zoomInDown w-full lg:w-1/3 lg:mx-auto fixed top-16 z-10 px-2 pb-6 lg:px-7 max-h-screen overflow-y-auto"
|
|
>
|
|
<div class="transition-all" id="embed-wrapper">
|
|
<.live_component
|
|
module={ClaperWeb.EventLive.EmbedComponent}
|
|
id={"#{@current_interaction.id}-embed"}
|
|
embed={@current_interaction}
|
|
current_user={@current_user}
|
|
attendee_identifier={@attendee_identifier}
|
|
event={@event}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<% _ -> %>
|
|
<!-- Handle any other types of interactions here if needed -->
|
|
<% end %>
|
|
|
|
<div
|
|
class="flex flex-col space-y-4 px-5 pt-20 pb-32 lg:w-1/3 bg-black min-h-screen"
|
|
id="post-list"
|
|
phx-update="stream"
|
|
data-posts-nb={Enum.count(@streams.posts)}
|
|
phx-hook="Scroll"
|
|
data-target="body"
|
|
>
|
|
<.live_component
|
|
:for={{id, post} <- @streams.posts}
|
|
module={ClaperWeb.EventLive.PostComponent}
|
|
id={id}
|
|
post={post}
|
|
leaders={@leaders}
|
|
is_leader={@is_leader}
|
|
current_user={@current_user}
|
|
attendee_identifier={@attendee_identifier}
|
|
event={@event}
|
|
reaction_enabled={@state.message_reaction_enabled}
|
|
liked_posts={@liked_posts}
|
|
loved_posts={@loved_posts}
|
|
loled_posts={@loled_posts}
|
|
/>
|
|
</div>
|
|
|
|
<%= if @post_count == 0 && @state.chat_enabled do %>
|
|
<div class="text-2xl text-white block fixed bottom-32 left-0 w-full lg:w-1/3 lg:left-1/2 lg:transform lg:-translate-x-1/2 text-center opacity-30">
|
|
<span><%= gettext("Be the first to react !") %></span>
|
|
<img src="/images/icons/arrow-white.svg" class="h-24 rotate-180 ml-12 mt-8" />
|
|
</div>
|
|
<% end %>
|
|
|
|
<div
|
|
id="reacts"
|
|
phx-hook="GlobalReacts"
|
|
data-class-name="h-12"
|
|
class="fixed right-5 bottom-12 z-30 w-1/3"
|
|
phx-update="ignore"
|
|
>
|
|
</div>
|
|
|
|
<div
|
|
id="nickname-popup"
|
|
class="hidden fixed bottom-0 h-36 w-full lg:w-1/3 lg:mx-auto bg-black text-white z-40 shadow-md rounded-md p-4 flex flex-col gap-y-2"
|
|
>
|
|
<%= if @state.anonymous_chat_enabled do %>
|
|
<button
|
|
phx-click={JS.push("set-nickname") |> toggle_nickname_popup()}
|
|
phx-value-nickname=""
|
|
phx-hook="EmptyNickname"
|
|
id="setAnonymous"
|
|
class="w-full bg-gray-900 text-left text-white px-3 py-2 rounded-md flex space-x-2 items-center"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="w-5 h-5"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="2"
|
|
stroke="currentColor"
|
|
fill="none"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
<path d="M3 11h18"></path>
|
|
<path d="M5 11v-4a3 3 0 0 1 3 -3h8a3 3 0 0 1 3 3v4"></path>
|
|
<path d="M7 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
|
|
<path d="M17 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
|
|
<path d="M10 17h4"></path>
|
|
</svg>
|
|
<span><%= gettext("Anonymous") %></span>
|
|
</button>
|
|
<% else %>
|
|
<button class="w-full bg-gray-900 opacity-50 text-left text-white px-3 py-2 rounded-md flex space-x-2 items-center cursor-default">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="w-5 h-5"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="2"
|
|
stroke="currentColor"
|
|
fill="none"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
<path d="M3 11h18"></path>
|
|
<path d="M5 11v-4a3 3 0 0 1 3 -3h8a3 3 0 0 1 3 3v4"></path>
|
|
<path d="M7 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
|
|
<path d="M17 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
|
|
<path d="M10 17h4"></path>
|
|
</svg>
|
|
<span><%= gettext("Anonymous") %> (<%= gettext("disabled") %>)</span>
|
|
</button>
|
|
<% end %>
|
|
|
|
<button
|
|
id="nicknamepicker"
|
|
phx-click={toggle_nickname_popup()}
|
|
data-prompt={gettext("Enter your name")}
|
|
phx-hook="NicknamePicker"
|
|
class="w-full bg-gray-900 text-left text-white px-3 py-2 rounded-md flex space-x-2 items-center"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
class="w-5 h-5"
|
|
>
|
|
<path d="M5.433 13.917l1.262-3.155A4 4 0 017.58 9.42l6.92-6.918a2.121 2.121 0 013 3l-6.92 6.918c-.383.383-.84.685-1.343.886l-3.154 1.262a.5.5 0 01-.65-.65z" />
|
|
<path d="M3.5 5.75c0-.69.56-1.25 1.25-1.25H10A.75.75 0 0010 3H4.75A2.75 2.75 0 002 5.75v9.5A2.75 2.75 0 004.75 18h9.5A2.75 2.75 0 0017 15.25V10a.75.75 0 00-1.5 0v5.25c0 .69-.56 1.25-1.25 1.25h-9.5c-.69 0-1.25-.56-1.25-1.25v-9.5z" />
|
|
</svg>
|
|
<span><%= gettext("Use your name") %></span>
|
|
</button>
|
|
<button
|
|
phx-click={toggle_nickname_popup()}
|
|
class="w-full text-left text-primary-500 text-sm px-3 py-0 rounded-md"
|
|
>
|
|
<%= gettext("Close") %>
|
|
</button>
|
|
</div>
|
|
|
|
<div class={"fixed w-full " <> if @state.message_reaction_enabled, do: "bottom-12", else: "bottom-3"}>
|
|
<%= if @state.chat_enabled do %>
|
|
<%= if !@state.anonymous_chat_enabled && (@nickname && @nickname == "") do %>
|
|
<.form
|
|
:let={f}
|
|
for={@post_changeset}
|
|
id="nickname-form"
|
|
class="w-full lg:w-1/3 lg:mx-auto"
|
|
phx-submit="save-nickname"
|
|
>
|
|
<div
|
|
class="rounded-lg text-base px-3 py-2 mx-5 relative"
|
|
style="
|
|
background: rgb(17,134,213);
|
|
background: linear-gradient(333deg, rgba(17,134,213,0.4962359943977591) 0%, rgba(163,39,255,0.5046393557422969) 100%);
|
|
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
|
backdrop-filter: blur(11.5px);
|
|
-webkit-backdrop-filter: blur(11.5px);"
|
|
>
|
|
<%= text_input(f, :name,
|
|
class:
|
|
"bg-transparent outline-none w-full text-white h-10 placeholder-white resize-none pr-20 leading-4 overflow-y-hidden focus:overflow-y-auto",
|
|
placeholder: gettext("Enter your name")
|
|
) %>
|
|
<p class="font-semibold text-sm">
|
|
<%= error_tag(f, :name) %>
|
|
</p>
|
|
<%= submit(gettext("Join"), class: "absolute right-5 top-2 p-2 bg-white rounded-md") %>
|
|
</div>
|
|
</.form>
|
|
<% else %>
|
|
<.form
|
|
:let={f}
|
|
for={@post_changeset}
|
|
id="post-form"
|
|
class="w-full lg:w-1/3 lg:mx-auto"
|
|
phx-hook="PostForm"
|
|
data-nickname={@nickname}
|
|
phx-submit="save"
|
|
>
|
|
<div
|
|
class="rounded-lg text-base px-3 py-2 mx-5 relative"
|
|
style="
|
|
background: rgb(17,134,213);
|
|
background: linear-gradient(333deg, rgba(17,134,213,0.4962359943977591) 0%, rgba(163,39,255,0.5046393557422969) 100%);
|
|
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
|
backdrop-filter: blur(11.5px);
|
|
-webkit-backdrop-filter: blur(11.5px);"
|
|
>
|
|
<div class="ml-0">
|
|
<a
|
|
href="#"
|
|
phx-click={toggle_nickname_popup()}
|
|
class="px-2 py-0.5 text-xs text-white rounded-full w-fit bg-gray-900 flex gap-x-1 items-center"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
class="w-4 h-4"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
|
|
/>
|
|
</svg>
|
|
<%= if @nickname && @nickname == "" do %>
|
|
<span><%= gettext("Anonymous") %></span>
|
|
<% else %>
|
|
<span><%= @nickname %></span>
|
|
<% end %>
|
|
</a>
|
|
</div>
|
|
|
|
<button class="absolute right-5 top-6 opacity-50" id="submitBtn">
|
|
<img src="/images/icons/send.svg" class="h-6" />
|
|
</button>
|
|
|
|
<div class="flex space-x-2 items-center">
|
|
<%= textarea(f, :body,
|
|
id: "postFormTA",
|
|
class:
|
|
"bg-transparent outline-none w-full text-white h-10 placeholder-white pt-3 resize-none pr-20 leading-4 overflow-y-hidden focus:overflow-y-auto",
|
|
placeholder: gettext("Ask, comment...")
|
|
) %>
|
|
</div>
|
|
</div>
|
|
<%= submit("Save", phx_disable_with: "Saving...", id: "hiddenSubmit", class: "hidden") %>
|
|
</.form>
|
|
<% end %>
|
|
<% else %>
|
|
<div id="post-form" class="w-full lg:w-1/3 lg:mx-auto">
|
|
<div
|
|
class="rounded-lg text-base px-4 py-2 mx-5 relative"
|
|
style="
|
|
background: rgb(17,134,213);
|
|
background: linear-gradient(333deg, rgba(17,134,213,0.4962359943977591) 0%, rgba(163,39,255,0.5046393557422969) 100%);
|
|
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
|
backdrop-filter: blur(11.5px);
|
|
-webkit-backdrop-filter: blur(11.5px);"
|
|
>
|
|
<div class="flex space-x-2 items-center">
|
|
<div class="opacity-50 bg-transparent outline-none w-full text-white h-10 placeholder-white pt-3 resize-none pr-20 leading-4 overflow-y-hidden focus:overflow-y-auto">
|
|
<%= gettext("Messages deactivated") %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
|
|
<div
|
|
:if={@state.message_reaction_enabled}
|
|
class="flex space-x-6 fixed justify-center bottom-3 w-full lg:w-1/3 lg:mx-auto"
|
|
>
|
|
<a
|
|
phx-click="global-react"
|
|
phx-hook="ClickFeedback"
|
|
id="react-heart"
|
|
class="cursor-pointer"
|
|
phx-value-type="heart"
|
|
>
|
|
<img class="h-6" src="/images/icons/heart.svg" />
|
|
</a>
|
|
|
|
<a
|
|
phx-click="global-react"
|
|
phx-hook="ClickFeedback"
|
|
id="react-clap"
|
|
class="cursor-pointer"
|
|
phx-value-type="clap"
|
|
>
|
|
<img class="h-6" src="/images/icons/clap.svg" />
|
|
</a>
|
|
|
|
<a
|
|
phx-click="global-react"
|
|
phx-hook="ClickFeedback"
|
|
id="react-hundred"
|
|
class="cursor-pointer"
|
|
phx-value-type="hundred"
|
|
>
|
|
<img class="h-6" src="/images/icons/hundred.svg" />
|
|
</a>
|
|
|
|
<a
|
|
phx-click="global-react"
|
|
phx-hook="ClickFeedback"
|
|
id="react-raisehand"
|
|
class="cursor-pointer"
|
|
phx-value-type="raisehand"
|
|
>
|
|
<img class="h-6" src="/images/icons/raisehand.svg" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<% else %>
|
|
<div class="w-full">
|
|
<div class="flex bg-black h-screen">
|
|
<div class="flex items-center text-center lg:text-left justify-center lg:justify-start lg:px-12 w-full lg:w-1/2">
|
|
<div class="w-full mx-12 lg:w-auto lg:mx-0">
|
|
<h1 class="py-5 text-5xl font-semibold text-white md:text-6xl"><%= @event.name %></h1>
|
|
|
|
<h2
|
|
x-data={"{date: moment.utc('#{@event.started_at}').local().format('LLLL')}"}
|
|
class="py-5 text-2xl text-gray-300 md:text-4xl"
|
|
x-text="date.charAt(0).toUpperCase() + date.slice(1)"
|
|
>
|
|
</h2>
|
|
|
|
<div class="text-white flex justify-between items-center mt-12">
|
|
<div class="flex flex-col items-center mr-10">
|
|
<span class="text-5xl font-bold">
|
|
<%= if @remaining_days < 10, do: "0" %><%= @remaining_days %>
|
|
</span>
|
|
<span class="text-gray-400"><%= gettext("days") %></span>
|
|
</div>
|
|
<div class="flex flex-col items-center mr-10">
|
|
<span class="text-5xl font-bold">
|
|
<%= if @remaining_hours < 10, do: "0" %><%= @remaining_hours %>
|
|
</span>
|
|
<span class="text-gray-400"><%= gettext("hours") %></span>
|
|
</div>
|
|
<div class="flex flex-col items-center mr-10">
|
|
<span class="text-5xl font-bold">
|
|
<%= if @remaining_minutes < 10, do: "0" %><%= @remaining_minutes %>
|
|
</span>
|
|
<span class="text-gray-400"><%= gettext("minutes") %></span>
|
|
</div>
|
|
<div class="flex flex-col items-center">
|
|
<span class="text-5xl font-bold">
|
|
<%= if @remaining_seconds < 10, do: "0" %><%= @remaining_seconds %>
|
|
</span>
|
|
<span class="text-gray-400"><%= gettext("seconds") %></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="hidden lg:block lg:w-1/2">
|
|
<div class="h-full object-cover bg-gradient-animate">
|
|
<div class="h-full bg-black text-white bg-opacity-50 text-center flex flex-col items-center justify-center">
|
|
<span class="text-4xl font-semibold mb-10">
|
|
<%= gettext("Scan to interact in real-time") %>
|
|
</span>
|
|
<div
|
|
phx-hook="QRCode"
|
|
id="qr"
|
|
phx-update="ignore"
|
|
class="rounded-lg mx-auto bg-black h-64 w-64 p-12 flex items-center justify-center mb-14"
|
|
>
|
|
</div>
|
|
<span class="text-4xl font-semibold mb-10"><%= gettext("Or use the code:") %></span>
|
|
<span class="text-5xl font-semibold mb-10">#<%= String.upcase(@event.code) %></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|