playlist embed

app/controllers/embeds_controller.rb

@@ -30,10 +30,15 @@ def private_playlist
   end
 
   def oembed_show
-    @track = Track.friendly.find(params[:track_id])
-    return render status: 404, plain: "This track is private or not found" unless @track
-
-    render json: data_for_oembed_track(@track)
+    if params[:track_id]
+      @track = Track.friendly.find(params[:track_id])
+      return render status: 404, plain: "This track is private or not found" unless @track
+      render json: data_for_oembed_track(@track)
+    else
+      @playlist = Playlist.friendly.find(params[:playlist_id])
+      return render status: 404, plain: "This playlist is private or not found" unless @playlist
+      render json: data_for_oembed_playlist(@playlist)
+    end
   end
 
   def oembed_private_show
@@ -80,4 +85,22 @@ def data_for_oembed_track(track)
       author_url: user_url(track.user)
     }
   end
+
+  def data_for_oembed_playlist(playlist)
+    url = "#{playlist_private_embed_url(playlist.signed_id)}"
+    {
+      version: 1,
+      type: "rich",
+      provider_name: "Rauversion",
+      provider_url: root_url,
+      height: 450,
+      width: "100%",
+      title: "#{playlist.title} by #{playlist.user.username}",
+      description: playlist.description,
+      thumbnail_url: playlist.cover_url(:medium),
+      html: playlist.iframe_code_string(url),
+      author_name: playlist.user.username,
+      author_url: user_url(playlist.user)
+    }
+  end
 end

app/controllers/playlists_controller.rb

@@ -16,29 +16,7 @@ def show
     @playlist ||= Playlist.published.friendly.find(params[:id])
     @track = @playlist.tracks.first
 
-    metatags = {
-      title: @playlist.title,
-      description: @playlist.description,
-      keywords: "",
-      # url: Routes.articles_show_url(socket, :show, playlist.id),
-      title: "#{@playlist.title} on Rauversion",
-      description: "Stream #{@playlist.title} by #{@playlist.user.username} on Rauversion.",
-      image: @playlist.cover_url(:small),
-      "twitter:player": playlist_embed_url(@playlist)
-    }
-
-    metatags.merge!({
-      twitter: {
-        card: "player",
-        player: {
-          stream: @playlist.tracks&.first&.mp3_audio&.url,
-          "stream:content_type": "audio/mpeg",
-          width: 290,
-          height: 58
-        }
-      }
-    })
-    set_meta_tags(metatags)
+    get_meta_tags
   end
 
   def edit
@@ -89,7 +67,7 @@ def playlist_params
       :id,
       :title, :description, :private, :price,
       :playlist_type, :release_date, :cover,
-      :record_label, :buy_link,
+      :record_label, :buy_link, :buy_link_title,
       :enable_label,
       :copyright,
       :attribution, :noncommercial, :non_derivative_works, :copies,
@@ -121,4 +99,34 @@ def find_playlist
       .where(user_id: current_user.id).or(Playlist.where(label_id: current_user.id))
       .friendly.find(params[:id])
   end
+
+
+  def get_meta_tags
+    @supporters = []
+    set_meta_tags(
+      # title: @track.title,
+      # description: @track.description,
+      keywords: @playlist.tags.join(", "),
+      # url: Routes.articles_show_url(socket, :show, track.id),
+      title: "#{@playlist.title} on Rauversion",
+      description: "Stream #{@playlist.title} by #{@playlist.user.username} on Rauversion.",
+      image: @playlist.cover_url(:small),
+      "twitter:player": playlist_embed_url(@playlist),
+      twitter: {
+        card: "player",
+        player: {
+          stream: @playlist&.tracks&.first&.mp3_audio&.url,
+          "stream:content_type": "audio/mpeg",
+          width: 290,
+          height: 58
+        }
+      }
+    )
+
+    @oembed_json = !@playlist.private? ?
+    oembed_playlist_show_url(playlist_id: @playlist, format: :json)
+      :  private_oembed_playlist_url(playlist_id: @playlist.signed_id, format: :json)
+
+
+  end
 end

app/helpers/tailwind_form_builder.rb

@@ -116,8 +116,8 @@ def color_fieldssss(object_name, method = "", options = {})
 
   def div_radio_button(method, tag_value, options = {})
     @template.tag.div(@template.radio_button(
-      @object_name, method, tag_value, objectify_options(options)
-    ))
+                        @object_name, method, tag_value, objectify_options(options)
+                      ))
   end
 
   def radio_button(method, value, options = {})
@@ -139,19 +139,25 @@ def radio_button(method, value, options = {})
         end
     end
   end
-  
+
   def check_box(method, options = {}, checked_value = "1", unchecked_value = "0")
-    info = @template.label_tag(
-      tr(options[:label] || method), nil,
-      class: "block font-bold text-md leading-5 text-gray-900 dark:text-white pt-0"
-    ) +
-      field_details(method, object, options)
+    # Conditionally build the label if options[:label] is not false
+    info = ""
+    unless options[:label] == false
+      info = @template.label_tag(
+        tr(options[:label] || method), nil,
+        class: "block text-gray-500 dark:text-white text-sm font-normal"
+      ) + field_details(method, object, options)
+    end
+
+    # Merge in default class unless a specific class has been provided in options
+    options.merge!(class: "self-center mt-1-- mr-2 form-checkbox h-4 w-4 text-indigo-600 transition duration-150 ease-in-out") unless options.key?(:class)
 
-    options[:class] = "self-start mt-1 mr-1 form-checkbox h-4 w-4 text-brand-600 transition duration-150 ease-in-out"
+    # Create the checkbox and, conditionally, its label
     @template.tag.div(class: "flex items-center") do
       @template.check_box(
         @object_name, method, objectify_options(options), checked_value, unchecked_value
-      ) + @template.tag.div(class: "flex-col items-center") { info }
+      ) + (info.present? ? @template.tag.div(class: "flex-col items-center") { info } : "".html_safe)
     end
   end
 

app/javascript/controllers/clipboard_controller.js

@@ -0,0 +1,28 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+    static targets = ["source", "message"];
+
+    copy() {
+        const source = this.sourceTarget;
+        //source.select(); // Select the text field
+        navigator.clipboard.writeText(source.value);
+        //document.execCommand("copy"); // Copy the text inside the text field
+        //alert("Copied the text: " + source.value); // Alert the copied text
+
+        this.updateText()
+    }
+
+
+    updateText() {
+
+      this.messageTarget.textContent = this.messageTarget.dataset.text.ok || "Copied!"
+      this.messageTarget.classList.add("animate-pulse", "text-green-500"); // Adding animation and style
+
+      setTimeout(() => {
+          this.messageTarget.textContent = this.messageTarget.dataset.text;
+          this.messageTarget.classList.remove("animate-pulse", "text-green-500"); // Remove animation and style
+      }, 2000); // Revert after 2 seconds
+  }
+}
+

app/views/articles/_form.html.erb

@@ -84,12 +84,18 @@
             </div>
             <div class="pt-4 pb-6">
               <div class="flex text-sm">
-                <a href="#" class="group inline-flex items-center font-medium text-brand-600 hover:text-brand-900">
-                  <svg class="h-5 w-5 text-brand-500 group-hover:text-brand-900" x-description="Heroicon name: solid/link" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                    <path fill-rule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" clip-rule="evenodd"></path>
-                  </svg>
-                  <span class="ml-2"> Copiar enlace </span>
-                </a>
+
+                 <div class="mt-1 ml-2" data-controller="clipboard">
+                  <input type="hidden" data-clipboard-target="source" value="<%= preview_article_url(@article.signed_id) %>" readonly>
+                  <button data-action="clipboard#copy" class="btn-clipboard flex items-center space-x-2 link" title="Copiar enlace">
+                    <svg class="h-5 w-5 text-brand-500 group-hover:text-brand-900" x-description="Heroicon name: solid/link" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                      <path fill-rule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" clip-rule="evenodd"></path>
+                    </svg>
+                    <span class="ml-2"> Copiar enlace </span>
+                  </button>
+                  <span class="text-sm" data-clipboard-target="message" data-text="" data-text-ok="Copied!"></span>  
+                </div>
+
               </div>
               <div class="mt-4 flex text-sm">
                 <a href="#" class="group inline-flex items-center text-gray-500 hover:text-gray-900 dark:text-gray-100">