danvics/pinchflat
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added fast indexing upgrade modal

Browse source
This commit is contained in:
Kieran Eglin 2024-03-10 11:57:00 -07:00
parent 816def21bb
commit 17633cc072
No known key found for this signature in database
GPG key ID: 193984967FCF432D
8 changed files with 105 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
lib/pinchflat/startup_tasks.ex
View file

@ -32,5 +32,6 @@ defmodule Pinchflat.StartupTasks do
defp apply_default_settings do
Settings.fetch!(:onboarding, true)
Settings.fetch!(:pro_enabled, false)
end
end

7
lib/pinchflat_web.ex
View file

@ -54,8 +54,9 @@ defmodule PinchflatWeb do
def live_view do
quote do
use Phoenix.LiveView,
layout: {PinchflatWeb.Layouts, :app}
use Phoenix.Component, global_prefixes: ~w(x-)
use Phoenix.LiveView
alias Pinchflat.Settings
@ -75,7 +76,7 @@ defmodule PinchflatWeb do
def html do
quote do
use Phoenix.Component
use Phoenix.Component, global_prefixes: ~w(x-)
# Import convenience functions from controllers
import Phoenix.Controller,

25
lib/pinchflat_web/components/core_components.ex
View file

@ -40,6 +40,7 @@ defmodule PinchflatWeb.CoreComponents do
"""
attr :id, :string, required: true
attr :show, :boolean, default: false
attr :allow_close, :boolean, default: true
attr :on_cancel, JS, default: %JS{}
slot :inner_block, required: true
@ -50,9 +51,9 @@ defmodule PinchflatWeb.CoreComponents do
phx-mounted={@show && show_modal(@id)}
phx-remove={hide_modal(@id)}
data-cancel={JS.exec(@on_cancel, "phx-remove")}
class="relative z-50 hidden"
class="relative z-99999 hidden"
>
<div id={"#{@id}-bg"} class="bg-zinc-50/90 fixed inset-0 transition-opacity" aria-hidden="true" />
<div id={"#{@id}-bg"} class="bg-black-2/80 fixed inset-0 transition-opacity" aria-hidden="true" />
<div
class="fixed inset-0 overflow-y-auto"
aria-labelledby={"#{@id}-title"}
@ -63,27 +64,27 @@ defmodule PinchflatWeb.CoreComponents do
>
<div class="flex min-h-full items-center justify-center">
<div class="w-full max-w-3xl p-4 sm:p-6 lg:py-8">
<.focus_wrap
<div
id={"#{@id}-container"}
phx-window-keydown={JS.exec("data-cancel", to: "##{@id}")}
phx-window-keydown={@allow_close && JS.exec("data-cancel", to: "##{@id}")}
phx-key="escape"
phx-click-away={JS.exec("data-cancel", to: "##{@id}")}
class="shadow-zinc-700/10 ring-zinc-700/10 relative hidden rounded-2xl bg-white p-14 shadow-lg ring-1 transition"
phx-click-away={@allow_close && JS.exec("data-cancel", to: "##{@id}")}
class="shadow-zinc-700/10 ring-zinc-700/10 relative hidden rounded-2xl bg-graydark p-14 shadow-lg ring-1 transition"
>
<div class="absolute top-6 right-5">
<div :if={@allow_close} class="absolute top-6 right-5">
<button
phx-click={JS.exec("data-cancel", to: "##{@id}")}
type="button"
class="-m-3 flex-none p-3 opacity-20 hover:opacity-40"
class="-m-3 flex-none p-3 opacity-60 hover:opacity-80"
aria-label={gettext("close")}
>
<.icon name="hero-x-mark-solid" class="h-5 w-5" />
<.icon name="hero-x-mark-solid" class="h-5 w-5 text-white" />
</button>
</div>
<div id={"#{@id}-content"}>
<%= render_slot(@inner_block) %>
</div>
</.focus_wrap>
</div>
</div>
</div>
</div>
@ -261,7 +262,7 @@ defmodule PinchflatWeb.CoreComponents do
attr :inputclass, :string, default: ""
attr :rest, :global, include: ~w(accept autocomplete capture cols disabled form list max maxlength min minlength
multiple pattern placeholder readonly required rows size step)
multiple pattern placeholder readonly required rows size step x-model)
slot :inner_block
@ -685,7 +686,6 @@ defmodule PinchflatWeb.CoreComponents do
)
|> show("##{id}-container")
|> JS.add_class("overflow-hidden", to: "body")
|> JS.focus_first(to: "##{id}-content")
end
def hide_modal(js \\ %JS{}, id) do
@ -697,7 +697,6 @@ defmodule PinchflatWeb.CoreComponents do
|> hide("##{id}-container")
|> JS.hide(to: "##{id}", transition: {"block", "block", "hidden"})
|> JS.remove_class("overflow-hidden", to: "body")
|> JS.pop_focus()
end
@doc """

4
lib/pinchflat_web/components/custom_components/button_components.ex
View file

@ -14,7 +14,9 @@ defmodule PinchflatWeb.CustomComponents.ButtonComponents do
attr :color, :string, default: "bg-primary"
attr :rounding, :string, default: "rounded-sm"
attr :class, :string, default: ""
attr :type, :string, default: "submit"
attr :disabled, :boolean, default: false
attr :rest, :global
slot :inner_block, required: true
@ -26,9 +28,11 @@ defmodule PinchflatWeb.CustomComponents.ButtonComponents do
"#{@rounding} inline-flex items-center justify-center px-8 py-4",
"#{@color}",
"hover:bg-opacity-90 lg:px-8 xl:px-10",
"disabled:bg-opacity-50 disabled:cursor-not-allowed disabled:text-gray-2",
@class
]}
disabled={@disabled}
{@rest}
>
<%= render_slot(@inner_block) %>
</button>

40
lib/pinchflat_web/components/layouts/partials/upgrade_button_live.ex Normal file
View file

@ -0,0 +1,40 @@
defmodule Pinchflat.UpgradeButtonLive do
use PinchflatWeb, :live_view
def render(assigns) do
~H"""
<form phx-change="check_matching_text">
<.input type="text" name="unlock-pro-textbox" value="" />
</form>
<.button
class="w-full mt-4"
type="button"
disabled={@button_disabled}
phx-click={hide_modal("upgrade-modal")}
x-on:click="setTimeout(() => { proEnabled = true }, 200)"
>
Unlock Pro
</.button>
"""
end
def mount(_params, _session, socket) do
{:ok, assign(socket, :button_disabled, true)}
end
def handle_event("check_matching_text", %{"unlock-pro-textbox" => text}, socket) do
normalized_text =
text
|> String.trim()
|> String.downcase()
if normalized_text == "got it!" do
Settings.set!(:pro_enabled, true)
{:noreply, update(socket, :button_disabled, fn _ -> false end)}
else
{:noreply, update(socket, :button_disabled, fn _ -> true end)}
end
end
end

28
lib/pinchflat_web/components/layouts/partials/upgrade_modal.heex Normal file
View file

@ -0,0 +1,28 @@
<.modal id="upgrade-modal" allow_close={false}>
<section x-data="{ inputValue: '' }">
<h3 class="text-2xl text-white">Pro Mode</h3>
<p class="text-sm">Don't worry - Pinchflat is completely free :&rpar;</p>
<p class="mt-4">
If you find the project valuable and want to support its development, a
<.inline_link href="https://www.paypal.me/kieraneglin">donation</.inline_link>
would be greatly appreciated.
</p>
<p class="mt-4">
Plus, $5 USD from any donation over $10 USD will be donated to
<.inline_link href="https://www.eff.org/">The Electronic Frontier Foundation</.inline_link>
who defend your online liberties and backed
<.inline_code>youtube-dl</.inline_code>
when Google took them down<.inline_link href="https://github.com/github/dmca/blob/9a85e0f021f7967af80e186b890776a50443f06c/2020/11/2020-11-16-RIAA-reversal-effletter.pdf">
<.icon name="hero-arrow-top-right-on-square" class="h-3 w-3" />
</.inline_link>. <strong>You do not need to donate to unlock Pro</strong>. It's just a way to say thanks!
</p>
<p class="mt-4">
To unlock Pro, simply type
<.inline_code>got it!</.inline_code>
into the text box and press the button.
</p>
<%= live_render(@conn, Pinchflat.UpgradeButtonLive) %>
</section>
</.modal>

9
lib/pinchflat_web/components/layouts/root.html.heex
View file

@ -12,7 +12,14 @@
<script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
</script>
</head>
<body x-data="{ sidebarVisible: false }" class="dark text-bodydark bg-boxdark-2">
<body
x-data={"{ sidebarVisible: false, proEnabled: #{Settings.get!(:pro_enabled)} }"}
class="dark text-bodydark bg-boxdark-2"
>
<%= @inner_content %>
<template x-if="!proEnabled">
<.upgrade_modal conn={@conn} />
</template>
</body>
</html>

14
lib/pinchflat_web/controllers/sources/source_html/source_form.html.heex
View file

@ -36,12 +36,14 @@
/>
<%!-- TODO: use Alpine to disable the index frequency when fast indexing is enabled --%>
<.input
field={f[:fast_index]}
type="toggle"
label="Use Fast Indexing?"
help="Experimental. Ignores 'Index Frequency'. Recommended for large channels that upload frequently. See below for more info"
/>
<div phx-click={show_modal("upgrade-modal")}>
<.input
field={f[:fast_index]}
type="toggle"
label="Use Fast Indexing?"
help="Experimental. Ignores 'Index Frequency'. Recommended for large channels that upload frequently. See below for more info"
/>
</div>
<h3 class="mt-8 text-2xl text-black dark:text-white">
Downloading Options