sidebar player

rauversion · Aug 18, 2023 · 45139f5 · 45139f5
1 parent a5f9819
commit 45139f5
Show file tree

Hide file tree

Showing 13 changed files with 130 additions and 75 deletions.
diff --git a/Gemfile b/Gemfile
@@ -148,6 +148,8 @@ gem "http", "~> 5.1"
 gem "ruby-oembed", "~> 0.16.1"
 
 gem "sidekiq", "~> 7.1"
+gem 'sidekiq-grouping'
+gem 'sidekiq-limit_fetch'
 
 gem "rubyzip", "~> 2.3"
 

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -499,6 +499,12 @@ GEM
       connection_pool (>= 2.3.0)
       rack (>= 2.2.4)
       redis-client (>= 0.14.0)
+    sidekiq-grouping (1.3.0)
+      activesupport
+      concurrent-ruby
+      sidekiq (>= 3.4.2)
+    sidekiq-limit_fetch (4.4.1)
+      sidekiq (>= 6)
     snaky_hash (2.0.1)
       hashie
       version_gem (~> 1.1, >= 1.1.1)
@@ -633,6 +639,8 @@ DEPENDENCIES
   sequel (~> 5.71)
   shoulda-matchers (~> 5.0)
   sidekiq (~> 7.1)
+  sidekiq-grouping
+  sidekiq-limit_fetch
   socialization (~> 2.0)
   sprockets-rails
   standardrb (~> 1.0)

diff --git a/app/controllers/home_controller.rb b/app/controllers/home_controller.rb
@@ -2,6 +2,8 @@ class HomeController < ApplicationController
 
 
   def index
-    @artists = User.artists.order("id desc").limit(12)
+    @artists = User.artists
+    .with_attached_avatar
+    .order("id desc").limit(12)
   end
 end
diff --git a/app/controllers/player_controller.rb b/app/controllers/player_controller.rb
@@ -1,5 +1,9 @@
 class PlayerController < ApplicationController
 
+  def update
+    @tracks = Track.where(id: params[:player][:ids])
+  end
+
   def show
     id = params[:id]
     @track = Track.friendly.find(id)
@@ -20,9 +24,13 @@ def show
 
   def next_track(id)
     Track.where("id > ?", id).order(id: :asc).first
+    .with_attached_cover
+    .includes(user: { avatar_attachment: :blob })
   end
 
   def previous(id)
     Track.where("id < ?", id).order(id: :desc).first
+    .with_attached_cover
+    .includes(user: { avatar_attachment: :blob })
   end
 end
diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js
@@ -5,7 +5,7 @@
 import { application } from "./application"
 
 import HelloController from "./hello_controller"
-
+import player_sidebar_controller from "./player_sidebar_controller"
 import Dropdown from "./dropdown"
 import Clipboard from 'stimulus-clipboard'
 import Audio from "./audio_controller"
@@ -69,3 +69,5 @@ application.register("panel", panel)
 application.register("medium-zoom", MediumZoom)
 application.register("scroll-to", ScrollTo)
 application.register("toggle-class", ToggleClass)
+application.register("player-sidebar", player_sidebar_controller)
+
diff --git a/app/javascript/controllers/player_sidebar_controller.js b/app/javascript/controllers/player_sidebar_controller.js
@@ -0,0 +1,23 @@
+// sidebar-controller.js
+import { Controller } from "@hotwired/stimulus";
+import { get, put } from "@rails/request.js";
+
+export default class extends Controller {
+  static targets = ["container"];
+
+  connect() {
+    this.loadTracks();
+  }
+
+  async loadTracks() {
+    const { playlist } = window.store.getState();
+
+    const track_ids = playlist;  // Assuming `store` is globally accessible
+    if (track_ids && track_ids.length) {
+      const response = await put('/player', { 
+        responseKind: "turbo-stream", 
+        body: { player: {ids: track_ids } } 
+      })
+    }
+  }
+}
diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
@@ -53,7 +53,10 @@
   <% end %>
 
   <%= render "articles/article_highlights",
-    posts: Post.published.order("id desc").limit(3)
+    posts: Post.published
+    .with_attached_cover
+    .includes(user: { avatar_attachment: :blob })
+    .order("id desc").limit(3)
   %>
 
   <!-- Trending products -->
@@ -73,7 +76,10 @@
       <div class="mt-8 relative">
         <div class="relative w-full overflow-x-auto">
           <ul role="list" class="mx-4 inline-flex space-x-8 sm:mx-6 lg:mx-0 lg:space-x-0 lg:grid lg:grid-cols-6 lg:gap-x-8">
-            <% Track.published.latests.limit(12).each do |track| %>
+            <% Track.published.latests
+              .with_attached_cover
+              .includes(user: { avatar_attachment: :blob })
+              .limit(12).each do |track| %>
               <%= render "tracks/track_cell", track: track %>
             <% end %>
           </ul>
@@ -126,7 +132,6 @@
                         <div class="space-y-1 text-sm text-left mt-2">
                           <h3 class="font-medium leading-none">
                               <%= playlist.title %>
-
                           </h3>
                           <p class="text-xs text-slate-500 dark:text-slate-400">
                             <%= t(:by, name: playlist.user.username) %>

diff --git a/app/views/player/_player.erb b/app/views/player/_player.erb
@@ -23,7 +23,7 @@
         <%= render "player/track_info", track: track %>
       </div>
 
-      <% #= render "player/sidebar" %>
+      <%= render "player/sidebar" %>
 
 
 

diff --git a/app/views/player/_sidebar.erb b/app/views/player/_sidebar.erb
@@ -1,6 +1,7 @@
 <!-- SIDEBAR PLAYLIST -->
 <div
   data-player-target="sidebar"
+  data-controller="player-sidebar"
   style="height: calc(100% - 64px);"
   class="hidden pointer-events-none fixed inset-y-0 right-0 flex max-w-full bg-white dark:bg-black"
 >
@@ -52,54 +53,11 @@
             <div class="flow-root mt-6">
               <ul
                 role="list"
+                data-player-sidebar-target="container"
                 class="-my-5 divide-y divide-gray-200 dark:divide-gray-800 h-full"
               >
-                <% Track.published.each do |item| %>
-                  <% # = for item <- @tracks  do %>
-                  <li id="sidebar-track-<%= item.id %>" 
-                    data-url="<%= player_path(id: item, t: true) %>"
-                    class="py-4 px-2 w-full <%= false ? "bg-gray-100 dark:bg-gray-900" : "" %>">
-                    <div class="flex items-center space-x-4 justify-between">
-                      <%= link_to player_path(id: item, t: true), class: "flex items-center space-x-4" do %>
-                        <div class="flex-shrink-0">
-                          <%= image_tag item.cover_url(:small), class: "h-8 w-8 rounded-full" %>
-                        </div>
-                        <div class="flex-1 min-w-0">
-                          <p class="w-[300px] text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
-                            <%= item.title %>
-                          </p>
-                          <p class="text-sm text-gray-500 truncate">
-                            <%= item.user.username %>
-                          </p>
-                        </div>
-                      <% end %>
-
-                        <div class="">
-                          <button
-                            data-action="click->player#removeSong"
-                            data-value="<%= item.id %>"
-                            class="inline-flex items-center shadow-sm border border-gray-300 dark:border-gray-700 rounded-full text-gray-700 bg-white hover:bg-gray-50 dark:text-gray-300 dark:bg-black dark:hover:bg-gray-900"
-                          >
-                            <svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              fill="none"
-                              viewBox="0 0 24 24"
-                              class="w-4 h-4"
-                              strokeWidth={1.5}
-                              stroke="currentColor"
-                              className="w-6 h-6"
-                            >
-                              <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                d="M6 18L18 6M6 6l12 12"
-                              />
-                            </svg>
-                          </button>
-                        </div>
-                      
-                    </div>
-                  </li>
+                <%= turbo_frame_tag "player-sidebar-tracks-list" do %>
+                  oliii
                 <% end %>
               </ul>
             </div>

diff --git a/app/views/player/_track.erb b/app/views/player/_track.erb
@@ -0,0 +1,44 @@
+<li id="sidebar-track-<%= item.id %>" 
+  data-url="<%= player_path(id: item, t: true) %>"
+  class="py-4 px-2 w-full <%= false ? "bg-gray-100 dark:bg-gray-900" : "" %>">
+  <div class="flex items-center space-x-4 justify-between">
+    <%= link_to player_path(id: item, t: true), class: "flex items-center space-x-4" do %>
+      <div class="flex-shrink-0">
+        <%= image_tag item.cover_url(:small), class: "h-8 w-8 rounded-full" %>
+      </div>
+      <div class="flex-1 min-w-0">
+        <p class="w-[300px] text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
+          <%= item.title %>
+        </p>
+        <p class="text-sm text-gray-500 truncate">
+          <%= item.user.username %>
+        </p>
+      </div>
+    <% end %>
+
+      <div class="">
+        <button
+          data-action="click->player#removeSong"
+          data-value="<%= item.id %>"
+          class="inline-flex items-center shadow-sm border border-gray-300 dark:border-gray-700 rounded-full text-gray-700 bg-white hover:bg-gray-50 dark:text-gray-300 dark:bg-black dark:hover:bg-gray-900"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            class="w-4 h-4"
+            strokeWidth={1.5}
+            stroke="currentColor"
+            className="w-6 h-6"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
+        </button>
+      </div>
+
+  </div>
+</li>
diff --git a/app/views/player/new.html.erb b/app/views/player/new.html.erb
diff --git a/app/views/player/update.turbo_stream.erb b/app/views/player/update.turbo_stream.erb
@@ -0,0 +1,3 @@
+<%= turbo_stream.update("player-sidebar-tracks-list") do %>
+  <%= render partial: "track", collection: @tracks, as: :item %>
+<% end %>
diff --git a/app/views/playlists/show.html.erb b/app/views/playlists/show.html.erb
@@ -166,31 +166,31 @@
               <%= render "likes/like_button", resource: @playlist, button_class: liked?(@track) ? "button-active" : "button" %>
 
 
-            <% if user_signed_in? && @playlist.user_id == current_user.id %>
-              <%= link_to edit_playlist_path(@playlist), class: "button",
-                "data-turbo-frame": "modal" do %>
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
-                  <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"></path>
-                </svg>
-                <span><%= t("playlists.edit") %></span>
-              <% end %>
-
-
-              <div data-turbo="true">
-                <%= turbo_frame_tag "playlist-#{@playlist.id}-delete" do %>
-                  <%= button_to playlist_path(@playlist), 
-                    method: :delete, 
-                    data: {confirm: t("delete.confirm"), turbo_method: :delete, turbo_confirm: t("delete.confirm")},
-                    class: "button" 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="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"></path>
-                    </svg>
-                    <span><%= t("playlists.delete") %></span>
-                  <% end %>
+              <% if user_signed_in? && @playlist.user_id == current_user.id %>
+                <%= link_to edit_playlist_path(@playlist), class: "button",
+                  "data-turbo-frame": "modal" do %>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                    <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"></path>
+                  </svg>
+                  <span><%= t("playlists.edit") %></span>
                 <% end %>
-              </div>
+
+
+                <div data-turbo="true">
+                  <%= turbo_frame_tag "playlist-#{@playlist.id}-delete" do %>
+                    <%= button_to playlist_path(@playlist), 
+                      method: :delete, 
+                      data: {confirm: t("delete.confirm"), turbo_method: :delete, turbo_confirm: t("delete.confirm")},
+                      class: "button" 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="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"></path>
+                      </svg>
+                      <span><%= t("playlists.delete") %></span>
+                    <% end %>
+                  <% end %>
+                </div>
 
-            <% end %>
+              <% end %>
 
 
             </div>