feat: add transitions, detect spotify free

assets/js/app.js

@@ -92,13 +92,18 @@ hooks.root = {
       this.player = player
       window.player = player
 
-      this.player.on('authentication_error', ({ message }) => {
+      player.on('authentication_error', ({ message }) => {
         this.pushEvent('failed_to_authenticate', {})
       });
 
       player.on('playback_error', ({ message }) => {
         console.error('Failed to perform playback', message);
       });
+
+      player.on('account_error', ({ message }) => {
+        console.log(message)
+        this.pushEvent('spotify_free_detected', {})
+      })
     }
 
     this.handleEvent('initialize_audio', ({ start_ms, end_ms }) => {

lib/snippit/collection_snippets/collection_snippet.ex

@@ -23,7 +23,7 @@ defmodule Snippit.CollectionSnippets.CollectionSnippet do
     |> validate_required([:collection_id, :snippet_id, :added_by_id])
     |> unique_constraint([:collection_id, :snippet_id],
       name: :collection_snippets_collection_id_snippet_id_index,
-      message: "snippet already belongs to that collection!"
+      message: "Snippet already belongs to that collection!"
     )
   end
 end

lib/snippit_web/components/core_components.ex

@@ -225,6 +225,7 @@ defmodule SnippitWeb.CoreComponents do
   """
   attr :type, :string, default: nil
   attr :class, :string, default: nil
+  attr :kind, :string, default: "primary"
   attr :rest, :global, include: ~w(disabled form name value)
 
   slot :inner_block, required: true
@@ -234,9 +235,12 @@ defmodule SnippitWeb.CoreComponents do
     <button
       type={@type}
       class={[
-        "phx-submit-loading:opacity-75 rounded-lg bg-zinc-900 enabled:hover:opacity-80 py-2 px-3",
+        "phx-submit-loading:opacity-75 rounded-lg enabled:hover:opacity-80 py-2 px-3",
         "text-sm font-semibold leading-6 text-white active:text-white/80",
         "disabled:opacity-75 disabled:cursor-not-allowed",
+        @kind == "primary" && "bg-zinc-800",
+        @kind == "secondary" && "bg-zinc-600",
+        @kind == "warning" && "bg-red-800",
         @class
       ]}
       {@rest}

lib/snippit_web/components/custom_components.ex

@@ -117,7 +117,9 @@ defmodule SnippitWeb.CustomComponents do
                 value: %{"index" => index, "id" => item.id}
               )
             }
+            id={"#{item.id}:#{index}"}
             phx-target={@el}
+            phx-mounted={JS.transition({"transition-opacity duration-200", "opacity-0", "opacity-100"})}
           >
             <%= render_slot(@inner_block, %{"item" => item, "index" => index}) %>
           </li>

lib/snippit_web/live/add_snippet_live.ex

@@ -89,12 +89,12 @@ defmodule SnippitWeb.AddSnippet do
       |> validate_number(
         :start_ms,
         greater_than_or_equal_to: 0,
-        message: "start must be greater than zero"
+        message: "Start must be greater than zero."
       )
       |> validate_number(
         :end_ms,
         less_than_or_equal_to: socket.assigns.selected_track.duration_ms,
-        message: "end must be less than duration of song"
+        message: "End must be less than duration of song."
       )
       |> validate_bounds_no_overlap()
 
@@ -226,10 +226,11 @@ defmodule SnippitWeb.AddSnippet do
         on_cancel={JS.push("back", target: @myself)}
       >
         <div class="h-[75vh] flex flex-col gap-8 overflow-hidden">
-          <div class="text-2xl"> Create Snippet </div>
+          <div class="text-2xl font-bold"> Create Snippet </div>
           <div
             :if={!@selected_track}
             class="flex-1 flex flex-col gap-8 overflow-hidden"
+            phx-mounted={JS.transition({"transition-opacity duration-200", "opacity-0", "opacity-100"})}
           >
             <.form
               for={@snippet_search_form}
@@ -267,6 +268,8 @@ defmodule SnippitWeb.AddSnippet do
                 phx-value-idx={i}
                 phx-click="track_selected"
                 phx-target={@myself}
+                id={"#{track.track}:#{i}"}
+                phx-mounted={JS.transition({"transition-opacity duration-200", "opacity-0", "opacity-100"})}
               >
                 <.track_display
                   track={track.track}
@@ -281,7 +284,9 @@ defmodule SnippitWeb.AddSnippet do
           </div>
           <div
             :if={@selected_track}
+            id={@selected_track.track}
             class="flex-1 justify-around overflow-hidden flex flex-col gap-8"
+            phx-mounted={JS.transition({"transition-opacity duration-200", "opacity-0", "opacity-100"})}
           >
             <div class="flex items-center gap-16">
               <div class="flex-1">
@@ -316,7 +321,10 @@ defmodule SnippitWeb.AddSnippet do
                     phx-debounce="500"
                   />
                 </div>
-                <div class="h-6 text-sm text-red-500">
+                <div
+                  class="h-6 text-sm text-red-500"
+                  phx-mounted={JS.transition({"transition-opacity duration-100", "opacity-0", "opacity-100"})}
+                >
                   <%= get_first_error(@bounds_form) %>
                 </div>
               </.form>
@@ -346,15 +354,15 @@ defmodule SnippitWeb.AddSnippet do
               >
                 <div
                   id="track-marker"
-                  class="absolute left-[-4px] h-[8px] w-[8px] rounded-full translate-y-[-10px] cursor-pointer bg-black z-20"
+                  class="absolute left-[-4px] h-[8px] w-[8px] rounded-full translate-y-[-10px] cursor-pointer bg-zinc-800 z-20"
                   style={"transform:translateX(#{@track_ms * @track_width_px / @selected_track.duration_ms}px) translateY(-10px)"}
                 />
                 <div
-                  class="bound-marker absolute left-[-2px] h-[24px] w-[4px] cursor-pointer bg-black"
+                  class="bound-marker absolute left-[-2px] h-[24px] w-[4px] cursor-pointer bg-zinc-800"
                   style={"transform:translateX(#{@start_ms * @track_width_px / @selected_track.duration_ms}px) translateY(6px)"}
                 />
                 <div
-                  class="bound-marker absolute left-[-2px] h-[24px] w-[4px] cursor-pointer bg-black"
+                  class="bound-marker absolute left-[-2px] h-[24px] w-[4px] cursor-pointer bg-zinc-800"
                   style={"transform:translateX(#{@end_ms * @track_width_px / @selected_track.duration_ms}px) translateY(6px)"}
                 />
                 <div

lib/snippit_web/live/collection_form_live.ex

@@ -100,12 +100,12 @@ defmodule SnippitWeb.CollectionFormLive do
             <div class="flex-1 flex flex-col gap-2">
               <.input
                 phx-debounce="250"
-                label="name"
+                label="Name"
                 field={@collection_form[:name]}
               />
               <.input
                 phx-debounce="250"
-                label="description"
+                label="Description"
                 type="textarea"
                 field={@collection_form[:description]}
               />

lib/snippit_web/live/collections_live.ex

@@ -222,7 +222,7 @@ defmodule SnippitWeb.CollectionsLive do
         class="flex-none w-96 pr-4 flex flex-col gap-6 border-r-2"
       >
         <div class="flex justify-between items-center">
-          <div class="text-2xl"> Collections </div>
+          <div class="text-2xl font-bold"> Collections </div>
           <button
             class={[@adding_collection? || @collection_to_edit && "opacity-20 cursor-not-allowed"]}
             phx-click={"add_collection_clicked"}
@@ -323,17 +323,19 @@ defmodule SnippitWeb.CollectionsLive do
                 </div>
                 <div class="flex gap-8">
                   <.button
-                    class="w-24 bg-red-600"
+                    class="w-24"
+                    kind="warning"
                     phx-click={"delete_collection"}
                     phx-target={@myself}
                   >
-                    delete
+                    Delete
                   </.button>
                   <.button
                     class="w-24"
+                    kind="secondary"
                     phx-click={hide_modal("delete_collection")}
                   >
-                    cancel
+                    Cancel
                   </.button>
                 </div>
               </div>
@@ -349,7 +351,7 @@ defmodule SnippitWeb.CollectionsLive do
             :if={@collection_to_share}
             class="h-[64vh] flex flex-col gap-8"
           >
-            <div class="text-2xl"> Share Collection </div>
+            <div class="text-2xl font-bold"> Share Collection </div>
             <div class="h-full flex justify-between gap-16 overflow-hidden">
               <div class="flex-1 flex flex-col gap-8">
                 <div class="flex-1 flex flex-col gap-1 overflow-hidden">
@@ -399,13 +401,14 @@ defmodule SnippitWeb.CollectionsLive do
                     phx-click={"collection_shared"}
                     phx-target={@myself}
                   >
-                    share
+                    Share
                   </.button>
                   <.button
                     class="w-24"
+                    kind="secondary"
                     phx-click={hide_modal("share_collection")}
                   >
-                    cancel
+                    Cancel
                   </.button>
                 </div>
               </div>

lib/snippit_web/live/hello_live.ex

@@ -18,7 +18,7 @@ defmodule SnippitWeb.HelloLive do
     <.flash_group flash={@flash} />
     <.modal id="privacy_policy">
       <div class="h-[64vh] flex flex-col gap-8 overflow-scroll">
-        <div class="text-2xl"> Privacy Policy </div>
+        <div class="text-2xl font-bold"> Privacy Policy </div>
         <div class="flex flex-col gap-8">
           <span> A couple of things to know before we get started... </span>
           <ul class="flex flex-col gap-4 ml-8 list-disc">
@@ -96,7 +96,7 @@ defmodule SnippitWeb.HelloLive do
       </svg>
     </div>
     <div class="h-full px-4 py-10 sm:px-6 sm:py-28 lg:px-8 xl:px-28 xl:py-32 flex flex-col justify-between">
-      <div class="flex flex-col gap-4 w-[36rem]">
+      <div class="flex flex-col gap-4 mx-auto max-w-xl lg:mx-0">
         <p class="text-base text-zinc-600">
           hey 👋 we're working on getting spotify's permission to deploy this app.
         </p>

lib/snippit_web/live/home_live.ex

@@ -39,6 +39,7 @@ defmodule SnippitWeb.HomeLive do
     |> assign(:player_url, nil)
     |> assign(:audio_ms, 0)
     |> assign(:confirming_delete?, false)
+    |> assign(:user_has_spotify_premium?, true)
 
     {:ok, socket}
   end
@@ -57,13 +58,13 @@ defmodule SnippitWeb.HomeLive do
     if selected_collection do
       CollectionSnippets.subscribe(selected_collection.id)
       socket
-        |> start_async(:load_collection_snippets, fn ->
-          from(cs in CollectionSnippet,
-            where: cs.collection_id == ^selected_collection.id,
-            preload: [:snippet, :added_by]
-          )
-          |> Repo.all()
-        end)
+      |>  start_async(:load_collection_snippets, fn ->
+            from(cs in CollectionSnippet,
+              where: cs.collection_id == ^selected_collection.id,
+              preload: [:snippet, :added_by]
+            )
+            |> Repo.all()
+          end)
     else
       if collection_id do
         put_flash(socket, :error, "sorry, we can't find that collection.")
@@ -92,12 +93,12 @@ defmodule SnippitWeb.HomeLive do
 
   def handle_event("player_state_changed", state, socket) do
     socket = socket
-      |> assign(:device_connected?, true)
-      |> assign(:playing?, !state["paused"])
-      |> assign(:player_url, state["player_url"])
-      |> assign(:loading?, state["loading"])
-      |> assign(:audio_ms, state["position"])
-      |> push_event("player_state_changed", %{"playing" => !state["paused"], "position" => state["position"]})
+    |> assign(:device_connected?, true)
+    |> assign(:playing?, !state["paused"])
+    |> assign(:player_url, state["player_url"])
+    |> assign(:loading?, state["loading"])
+    |> assign(:audio_ms, state["position"])
+    |> push_event("player_state_changed", %{"playing" => !state["paused"], "position" => state["position"]})
     {:noreply, socket}
   end
 
@@ -115,18 +116,16 @@ defmodule SnippitWeb.HomeLive do
     socket = Phoenix.Component.update(socket, :collection_snippets, fn collection_snippets ->
       [Repo.preload(collection_snippet, :added_by) | collection_snippets]
     end)
-
     {:noreply, socket}
   end
 
   def handle_info({:collection_created, collection}, socket) do
     collection = Repo.preload(collection, :created_by)
     socket = socket
-      |>  Phoenix.Component.update(:collections_by_id, fn collections_by_id ->
-            Map.put(collections_by_id, collection.id, collection)
-          end)
-      |>  push_patch(to: ~p"/?collection=#{collection.id}")
-
+    |>  Phoenix.Component.update(:collections_by_id, fn collections_by_id ->
+          Map.put(collections_by_id, collection.id, collection)
+        end)
+    |>  push_patch(to: ~p"/?collection=#{collection.id}")
     {:noreply, socket}
   end
 
@@ -215,6 +214,10 @@ defmodule SnippitWeb.HomeLive do
     {:noreply, assign(socket, :confirming_delete?, false)}
   end
 
+  def handle_event("spotify_free_detected", _, socket) do
+    {:noreply, assign(socket, :user_has_spotify_premium?, false)}
+  end
+
   def render(assigns) do
     ~H"""
       <div
@@ -228,14 +231,15 @@ defmodule SnippitWeb.HomeLive do
           on_cancel={JS.push("user_modal_closed")}
         >
           <div class="h-[28vh] flex flex-col gap-8 overflow-scroll">
-            <div class="text-2xl"> Your Profile </div>
+            <div class="text-2xl font-bold"> Your Profile </div>
             <div class="flex flex-col gap-4">
               <span> Username: <%= @current_user.username %> </span>
               <span> Email: <%= @current_user.email %> </span>
             </div>
             <div class="flex justify-between items-center">
               <.button
-                class="w-32 bg-red-600"
+                class="w-32"
+                kind="warning"
                 phx-click="delete_account_clicked"
               >
                 <span :if={!@confirming_delete?}> Delete Account </span>
@@ -244,7 +248,7 @@ defmodule SnippitWeb.HomeLive do
               <div
                 :if={@confirming_delete?}
                 class="text-red-400 transition-opacity"
-                phx-mounted={JS.transition({"transform-opacity duration-100", "opacity-0", "opacity-100"})}
+                phx-mounted={JS.transition({"transition-opacity duration-100", "opacity-0", "opacity-100"})}
               >
                 Are you sure? You'll lose all of your collections.
               </div>
@@ -259,8 +263,10 @@ defmodule SnippitWeb.HomeLive do
           current_user={@current_user}
         />
         <div
-          :if={@selected_collection}
+          :if={@selected_collection && @user_has_spotify_premium?}
           class="flex flex-col gap-12 pl-8 w-full"
+          id={@selected_collection.name}
+          phx-mounted={JS.transition({"transition-opacity duration-200", "opacity-0", "opacity-100"})}
         >
           <div class="flex flex-col gap-4">
             <div class="flex gap-8 items-end">
@@ -343,11 +349,26 @@ defmodule SnippitWeb.HomeLive do
           </div>
         </div>
         <div
-         :if={!@selected_collection}
+         :if={!@selected_collection && @user_has_spotify_premium?}
          class="flex justify-center items-center h-full w-full text-2xl pb-16"
         >
           Select or create a collection from the sidebar!
         </div>
+        <div
+         :if={!@user_has_spotify_premium?}
+         class="flex flex-col justify-center items-center h-full w-full pb-16 gap-16 px-32"
+        >
+          <div class="text-2xl">
+            Sorry, Snippit requires Spotify Premium in order to receive audio playback.
+          </div>
+          <div class="text-zinc-600 text-md">
+            Spotify Premium lets you play any track, ad-free and with better audio quality. Go to
+            <a class="text-blue-600" href="https://spotify.com/premium" target="_blank">
+              spotify.com/premium
+            </a>
+            to try it for free.
+          </div>
+        </div>
       </div>
     """
   end

lib/snippit_web/live/repost_snippet_live.ex

@@ -74,10 +74,11 @@ defmodule SnippitWeb.RepostSnippet do
           class="h-[75vh] flex flex-col gap-8"
         >
           <div class="flex justify-between items-center">
-            <div class="text-2xl"> Add Snippet To Collection </div>
+            <div class="text-2xl font-bold"> Add Snippet To Collection </div>
             <div
               :if={@error}
               class="text-red-400 text-sm"
+              phx-mounted={JS.transition({"transition-opacity duration-100", "opacity-0", "opacity-100"})}
             >
               <%= @error %>
             </div>
@@ -119,6 +120,7 @@ defmodule SnippitWeb.RepostSnippet do
                 </.button>
                 <.button
                   class="w-24"
+                  kind="secondary"
                   phx-click={hide_modal("repost_snippet")}
                 >
                   Cancel