Added fast indexing upgrade modal

lib/pinchflat/startup_tasks.ex

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

lib/pinchflat_web.ex

@@ -54,8 +54,9 @@ defmodule PinchflatWeb do
 
   def live_view do
     quote do
-      use Phoenix.LiveView,
+      use Phoenix.Component, global_prefixes: ~w(x-)
-        layout: {PinchflatWeb.Layouts, :app}
+
+      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,

lib/pinchflat_web/components/core_components.ex

@@ -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}")}
+              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-white p-14 shadow-lg ring-1 transition"
+              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 """

lib/pinchflat_web/components/custom_components/button_components.ex

@@ -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>

lib/pinchflat_web/components/layouts/partials/upgrade_button_live.ex

@@ -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

lib/pinchflat_web/components/layouts/partials/upgrade_modal.heex

@@ -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>

lib/pinchflat_web/components/layouts/root.html.heex

@@ -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>

lib/pinchflat_web/controllers/sources/source_html/source_form.html.heex

@@ -36,12 +36,14 @@
   />
 
   <%!-- TODO: use Alpine to disable the index frequency when fast indexing is enabled --%>
+  <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