clipboard sharer, like & repost button

rauversion · Aug 15, 2023 · 834b6e8 · 834b6e8
1 parent 9233c0d
commit 834b6e8
Show file tree

Hide file tree

Showing 23 changed files with 299 additions and 59 deletions.
diff --git a/TODO.md b/TODO.md
@@ -4,9 +4,6 @@ TODO:
     + sidebar show selected
 
   + tracks: 
-    + upload form
-    + likes
-    + reposts
     show:
     + track purchase
     + track sharer

diff --git a/app/controllers/likes_controller.rb b/app/controllers/likes_controller.rb
@@ -1,6 +1,14 @@
 class LikesController < ApplicationController
   def create
-    @track = Track.friendly.find(params[:track_id])
-    @button_class = current_user.toggle_like!(@track) ? "button-active" : "button"
+    @resource = find_resource
+    @button_class = current_user.toggle_like!(@resource) ? "button-active" : "button"
+  end
+
+  def find_resource
+    if params[:track_id]
+      @resource = Track.friendly.find(params[:track_id])
+    elsif params[:playlist_id]
+      @resource = Playlist.friendly.find(params[:playlist_id])
+    end
   end
 end
diff --git a/app/controllers/sharer_controller.rb b/app/controllers/sharer_controller.rb
@@ -0,0 +1,20 @@
+class SharerController < ApplicationController
+
+  before_action :authenticate_user!, except: [:index, :show ]
+
+  def new
+    @resource, @resource_path = find_resource
+
+    @button_class = "button"
+  end
+
+  def find_resource
+    if params[:track_id]
+      resource = Track.friendly.find(params[:track_id])
+      [ resource, track_embed_url(resource)]
+    elsif params[:playlist_id]
+      resource = Playlist.friendly.find(params[:playlist_id])
+      [ resource, playlist_embed_url(resource)]
+    end
+  end
+end
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
@@ -6,6 +6,16 @@ def gettext(text)
     text
   end
 
+  def liked?(object, user = current_user)
+    return if user.blank?
+    object.liked_by?(user)
+  end
+
+  def reposted?(object, user = current_user)
+    return if current_user.blank?
+    Repost.find_by(user: current_user, track: object).present?
+  end
+
   def item_class(action, kind)
     if action == kind
       "dark:bg-black dark:text-gray-100 bg-gray-50 bg-opacity-50 flex p-6 border-b border-gray-gray-200 dark:border-gray-800"

diff --git a/app/helpers/sharer_helper.rb b/app/helpers/sharer_helper.rb
@@ -0,0 +1,2 @@
+module SharerHelper
+end
diff --git a/app/javascript/controllers/clipboard_controller.js b/app/javascript/controllers/clipboard_controller.js
diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js
@@ -7,7 +7,7 @@ import { application } from "./application"
 import HelloController from "./hello_controller"
 
 import Dropdown from "./dropdown"
-// import Clipboard from 'stimulus-clipboard'
+import Clipboard from 'stimulus-clipboard'
 import Audio from "./audio_controller"
 import Tabs from "./tabs_controller"
 import FooterPlayer from './footer_player_controller'
@@ -43,7 +43,7 @@ application.register("dropdown", Dropdown)
 application.register("audio", Audio)
 application.register("tabs", Tabs)
 application.register("player", FooterPlayer)
-// application.register("clipboard", Clipboard)
+application.register("clipboard", Clipboard)
 application.register("chart", Chart)
 application.register("gmaps", GoogleMaps)
 application.register("scroll", Scroll)
@@ -65,4 +65,4 @@ application.register("player-info", player_info_controller)
 application.register("track-detector", track_detector_controller)
 application.register("play-button", play_button_controller)
 application.register("panel", panel)
-application.register("medium-zoom", MediumZoom)
+application.register("medium-zoom", MediumZoom)
diff --git a/app/models/playlist.rb b/app/models/playlist.rb
@@ -11,6 +11,7 @@ class Playlist < ApplicationRecord
 
   acts_as_likeable
   has_many :comments, as: :commentable
+  has_many :likes, as: :likeable
 
   accepts_nested_attributes_for :track_playlists, allow_destroy: true
 
@@ -62,4 +63,18 @@ def self.list_playlists_by_user_with_track(track_id, user_id)
                   .group('playlists.id')
   end
 
+  def iframe_code_string(url)
+  end
+
+  def iframe_code_string(url)
+    <<-HTML
+      <iframe width="100%" height="100%" scrolling="no" frameborder="no" allow="autoplay" src="#{url}">
+      </iframe>
+      <div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;">
+        <a href="#{user.username}" title="#{user.username}" target="_blank" style="color: #cccccc; text-decoration: none;">#{user.username}</a> · 
+        <a href="#{url}" title="#{title}" target="_blank" style="color: #cccccc; text-decoration: none;">#{title}</a>
+      </div>
+    HTML
+  end
+
 end
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -55,9 +55,9 @@
 
     <%= render("shared/footer", assigns) %>
 
-    <% if ENV["GOOGLE_ANALYTICS_ID"] %>
+    <% if ENV["GA_ID"] %>
       <!-- Google tag (gtag.js) -->
-      <script async src="https://www.googletagmanager.com/gtag/js?id=G-S5CQZMGV0S">
+      <script async src="https://www.googletagmanager.com/gtag/js?id=<%= ENV["GA_ID"] %>">
       </script>
       <script>
         window.dataLayer = window.dataLayer || [];

diff --git a/app/views/likes/_like_button.html.erb b/app/views/likes/_like_button.html.erb
@@ -1,13 +1,15 @@
-<%= turbo_frame_tag "like-frame-item-#{track.id}", "data-turbo": true do %>
-  <%= button_to track_likes_path(track), 
+<% path = resource.is_a?(Track) ? track_likes_path(resource) : playlist_likes_path(resource) %>
+
+<%= turbo_frame_tag "like-frame-item-#{resource.id}", "data-turbo": true do %>
+  <%= button_to path, 
       class: local_assigns[:button_class], 
       "data-method": "post",
       "data-confirm": "Are you sure?" do %>
     <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
       <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
     </svg>
     <span class="flex space-x-1">
-      <span><%= track.likes.count %></span>
+      <span><%= resource.likes.count %></span>
       <span class="hidden sm:block">Me gusta</span>
     </span>
   <% end %>

diff --git a/app/views/likes/create.turbo_stream.erb b/app/views/likes/create.turbo_stream.erb
@@ -1,5 +1,5 @@
-<%= turbo_stream.update("like-frame-item-#{@track.id}") do %>
-  <%= render "like_button", track: @track, button_class: @button_class %>
+<%= turbo_stream.update("like-frame-item-#{@resource.id}") do %>
+  <%= render "like_button", resource: @resource, button_class: @button_class %>
 <% end %>
 
 <%= turbo_stream.replace("flashes") do %>

diff --git a/app/views/playlists/show.html.erb b/app/views/playlists/show.html.erb
@@ -160,21 +160,10 @@
               </h1>
             </div>
             <div class="mt-6 flex flex-col justify-stretch space-y-3 sm:flex-row sm:space-y-0 sm:space-x-4">
-              <a class="inline-flex justify-center px-4 py-2 border border-gray-300 dark:border-gray-700 shadow-sm text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-black hover:bg-gray-50 dark:hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500" 
-              href="#" 
-              phx-click="share-track-modal" 
-              phx-value-id="5">
-                <svg xmlns="http://www.w3.org/2000/svg" class="-ml-1 mr-2 h-5 w-5 text-gray-400 dark:text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"></path>
-                </svg>
-                <span>Compartir</span>
-              </a>
-              <button type="button" phx-click="like-playlist" phx-value-id="5" class="inline-flex justify-center px-4 py-2 border border-gray-300 dark:border-gray-700 shadow-sm text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-black hover:bg-gray-50 dark:hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500">
-                <svg xmlns="http://www.w3.org/2000/svg" class="-ml-1 mr-2 h-5 w-5 text-gray-400 dark:text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
-                </svg>
-                <span>2 Me gusta</span>
-              </button>
+
+              <%= render "sharer/share_button", resource: @playlist %>
+
+              <%= render "likes/like_button", resource: @playlist, button_class: liked?(@track) ? "button-active" : "button" %>
 
             </div>
           </div>
@@ -281,7 +270,7 @@
 
               <div class="pb-4">
                 <h2 id="activity-title" class="text-lg font-medium text-gray-900 dark:text-gray-100">
-                  Actividad
+                  <%= t("profile.comments") %>
                 </h2>
               </div>
 

diff --git a/app/views/reposts/_repost_button.html.erb b/app/views/reposts/_repost_button.html.erb
@@ -1,11 +1,14 @@
-<%= turbo_frame_tag "repost-frame-item-#{track.id}", "data-turbo": true do %>
-  <%= button_to track_reposts_path(track), 
+<% resource = local_assigns[:track] || local_assigns[:playlist] %>
+<% path = resource.is_a?(Track) ? track_reposts_path(resource) : playlist_reposts_path(resource) %>
+
+<%= turbo_frame_tag "repost-frame-item-#{resource.id}", "data-turbo": true do %>
+  <%= button_to path, 
       class: local_assigns[:button_class], 
       "data-method": "post",
       "data-confirm": "Are you sure?" do %>
     <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
       <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd"></path>
     </svg>
-    <span class="hidden sm:block">Repostar</span>
+    <span class="hidden sm:block"><%= t("repost") %></span>
   <% end %>
 <% end %>
diff --git a/app/views/sharer/_share_button.erb b/app/views/sharer/_share_button.erb
@@ -0,0 +1,12 @@
+<% path = resource.is_a?(Track) ? new_track_sharer_path(resource) : new_playlist_sharer_path(resource) %>
+
+<%= turbo_frame_tag "share-frame-item-#{resource.id}", "data-turbo": true do %>
+  <%= link_to path,
+      "data-turbo-frame": "modal", 
+      class: local_assigns[:button_class] || "button" do %>
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+      <path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z"></path>
+    </svg>
+    <span class="hidden sm:block"><%= t("share") %></span>
+  <% end %>
+<% end %>
diff --git a/app/views/sharer/new.erb b/app/views/sharer/new.erb
@@ -0,0 +1,142 @@
+
+<%= turbo_frame_tag "modal" do %>
+  <%= render "shared/modal" do %>
+
+    <div class="space-y-8 divide-y divide-gray-200 dark:divide-gray-800 sm:space-y-5">
+      <div class="mx-2 py-6">
+        <div class="relative">
+          <nav class="flex space-x-4 mt-2" aria-label="Tabs" data-controller="tabs">
+            <a
+              href="#"
+              data-tab="#share-tab"
+              data-action="click->tabs#changeTab"
+              class="tab-link bg-brand-100 text-brand-700 px-3 py-2 font-medium text-sm rounded-md"
+            >
+              <%= t("sharer.share") %>
+            </a>
+            <a
+              href="#"
+              data-tab="#embed-tab"
+              data-action="click->tabs#changeTab"
+              class="tab-link text-brand-500 hover:text-brand-700 px-3 py-2 font-medium text-sm rounded-md"
+            >
+              <%= t("sharer.embed") %>
+            </a>
+            <a
+              href="#"
+              data-tab="#message-tab"
+              data-action="click->tabs#changeTab"
+              class="hidden tab-link text-brand-500 hover:text-brand-700 px-3 py-2 font-medium text-sm rounded-md"
+            >
+              <%= t("sharer.message") %>
+            </a>
+          </nav>
+
+          <section id="share-tab" class="tab-pane block py-4">
+            <h2 class="mx-0 mt-0 mb-4 font-sans text-base font-bold leading-none">
+              <%= t("sharer.private_share") %>
+            </h2>
+            <div class="mb-4 text-zinc-800 dark:text-gray-100">
+              <div class="flex items-center space-x-3">
+                <input
+                  type="text"
+                  value="<%= track_url(@resource, format: :private, utm_source: 'clipboard', utm_campaign: 'social_sharing', utm_medium: 'text') %>"
+                  class="shadow-sm focus:ring-brand-500 focus:border-brand-500 block w-full sm:text-sm border-gray-300 rounded-md dark:bg-gray-900 dark:text-gray-100"
+                  readonly="readonly"
+                />
+                <label class="flex items-center space-x-2">
+                  <input
+                    type="checkbox"
+                    id=""
+                    name="share_from"
+                    class="focus:ring-brand-500 h-4 w-4 text-brand-600 border-gray-300 rounded"
+                  />
+                  <span class=""><%= t("sharer.at") %></span>
+                </label>
+                <input
+                  type="text"
+                  value="0:00"
+                  class="w-1/4 shadow-sm focus:ring-brand-500 focus:border-brand-500 block w-full sm:text-sm border-gray-300 rounded-md dark:bg-gray-900 dark:text-gray-100"
+                />
+              </div>
+            </div>
+            <div class="text-sm text-gray-700 dark:text-gray-300 py-2">
+              <%= t("sharer.private_share_instructions") %>
+            </div>
+            <div class="hidden mb-4 text-brand-600 dark:text-brand-400">
+              <%= t("sharer.reset_link_warning") %>
+            </div>
+            <div class="hidden visible py-1 px-0 mb-4 font-sans text-xs text-red-700 opacity-100">
+              <%= t("sharer.link_reset_error") %>
+            </div>
+            <div class="text-zinc-800">
+              <button
+                type="button"
+                class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-brand-600 hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500"
+              >
+                <%= t("sharer.reset_secret_link") %>
+              </button>
+              <div class="hidden">
+                <button
+                  type="button"
+                  class="inline-block relative py-px pr-3 pl-2 m-0 h-6 font-sans text-sm font-thin leading-5 text-center text-white whitespace-nowrap bg-brand-600 rounded-sm border border-brand-600 border-solid cursor-pointer select-none box-border focus:border-brand-600 focus:bg-brand-600 focus:text-white hover:border-brand-600 hover:bg-brand-600 hover:text-white"
+                >
+                  <%= t("sharer.reset") %>
+                </button>
+                <button
+                  type="button"
+                  class="inline-block relative py-1 pr-3 pl-2 m-0 h-6 font-sans text-sm font-thin leading-5 text-center whitespace-nowrap bg-none rounded-sm border-0 border-solid cursor-pointer select-none box-border border-neutral-200 focus:border-0 focus:border-stone-300 focus:bg-none focus:py-1 focus:text-zinc-800 hover:border-0 hover:border-stone-300 hover:bg-none hover:py-1 hover:text-zinc-800"
+                >
+                  <%= t("sharer.cancel") %>
+                </button>
+              </div>
+            </div>
+            <div class="hidden text-zinc-800">
+              <%= t("sharer.secret_link_reset_success") %>
+            </div>
+          </section>
+
+          <section id="embed-tab" class="tab-pane hidden py-4">
+            <h2 class="mx-0 mt-0 mb-4 font-sans text-base font-bold leading-none">
+              <%= t("sharer.embed") %>
+            </h2>
+            <div>
+              <div
+                data-controller="clipboard"
+                data-clipboard-success-content="Copied!"
+                class="mt-1 flex rounded-md shadow-sm"
+              >
+                <input
+                  type="text"
+                  value="<%= @resource.iframe_code_string(@resource_path) %>"
+                  data-clipboard-target="source"
+                  readonly=""
+                  class="py-2 border-0 focus:ring-brand-500 focus:border-brand-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 rounded-md dark:bg-gray-900 dark:text-gray-100"
+                />
+                <span
+                  data-clipboard-target="trigger"
+                  data-action="clipboard#copy"
+                  class="cursor-pointer inline-flex items-center px-4 py-2 border border-l-0 border-gray-300 bg-gray-50 text-gray-500 text-sm rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500"
+                >
+                  <%= t("sharer.copy") %>
+                </span>
+              </div>
+            </div>
+          </section>
+
+          <section id="message-tab" class="tab-pane hidden py-4">
+            <h2 class="mx-0 mt-0 mb-4 font-sans text-base font-bold leading-none">
+              <%= t("sharer.message") %>
+            </h2>
+            <div class="text-zinc-800">
+              <%= t("sharer.message_placeholder") %>
+            </div>
+          </section>
+        </div>
+      </div>
+    </div>
+
+  <% end %>
+<% end %>
+
+
diff --git a/app/views/tracks/_track_item.html.erb b/app/views/tracks/_track_item.html.erb
@@ -97,17 +97,9 @@
     <p class="hidden mt-1 text-sm text-gray-500"></p>
     <div class="p-2 sm:ml-3 sm:p-0 sm:pt-2 flex items-center space-x-1">
 
-      <div>
-        <a class="button" href="#" phx-click="share-track-modal">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
-            <path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z"></path>
-          </svg>
-          <span class="hidden sm:block">Compartir</span>
-        </a>
-      </div>
-
-
-      <%= render "likes/like_button", track: track, button_class: track.respond_to?(:like_id) && track&.like_id.present? ? "button-active" :  "button" %>
+      <%= render "sharer/share_button", resource: track %>
+      
+      <%= render "likes/like_button", resource: track, button_class: track.respond_to?(:like_id) && track&.like_id.present? ? "button-active" :  "button" %>
 
       <%= render "reposts/repost_button", track: track, button_class: track.respond_to?(:repost_id) && track&.repost_id.present? ? "button-active" :  "button" %>
 
@@ -119,7 +111,7 @@
         %>
       </div>
 
-      <div class="relative inline-block text-left" id="dropdownjj-dd-178" data-controller="dropdown">
+      <div class="relative inline-block text-left" data-controller="dropdown">
         <div>
           <button type="button" data-action="dropdown#toggle click@window->dropdown#hide" class="button" aria-expanded="true" aria-haspopup="true">
             <span class="flex space-x-1">