6 files changed, 43 insertions, 6 deletions
diff --git a/src/frontend/tubo/components/player.cljs b/src/frontend/tubo/components/player.cljs
index 0373c27..a8f3a18 100644
--- a/src/frontend/tubo/components/player.cljs
+++ b/src/frontend/tubo/components/player.cljs
@@ -209,6 +209,15 @@
    :extra-classes [:text-sm]
    :show-on-mobile? show-on-mobile?])
 
+(defn shuffle-button
+  [shuffle? color show-on-mobile?]
+  [button
+   :icon
+   [:i.fa-solid.fa-shuffle {:style {:color (when shuffle? color)}}]
+   :on-click #(rf/dispatch [:queue/shuffle (not shuffle?)])
+   :extra-classes [:text-sm]
+   :show-on-mobile? show-on-mobile?])
+
 (defn volume-slider
   [_player _volume-level _muted? _service-color]
   (let [show-slider? (r/atom nil)]
diff --git a/src/frontend/tubo/player/subs.cljs b/src/frontend/tubo/player/subs.cljs
index c61473a..312451d 100644
--- a/src/frontend/tubo/player/subs.cljs
+++ b/src/frontend/tubo/player/subs.cljs
@@ -43,6 +43,11 @@
    (:loop-playback db)))
 
 (rf/reg-sub
+ :shuffle
+ (fn [db _]
+   (:shuffle db)))
+
+(rf/reg-sub
  :paused
  (fn [db _]
    (:paused db)))
diff --git a/src/frontend/tubo/player/views.cljs b/src/frontend/tubo/player/views.cljs
index 1cd8c86..6a87242 100644
--- a/src/frontend/tubo/player/views.cljs
+++ b/src/frontend/tubo/player/views.cljs
@@ -32,6 +32,7 @@
         queue-pos        @(rf/subscribe [:queue-pos])
         loading?         @(rf/subscribe [:bg-player/loading])
         loop-playback    @(rf/subscribe [:loop-playback])
+        shuffle?         @(rf/subscribe [:shuffle])
         bg-player-ready? @(rf/subscribe [:bg-player/ready])
         paused?          @(rf/subscribe [:paused])
         !elapsed-time    @(rf/subscribe [:elapsed-time])]
@@ -62,7 +63,8 @@
       [player/button
        :icon [:i.fa-solid.fa-forward-step]
        :on-click #(rf/dispatch [:queue/change-pos (inc queue-pos)])
-       :disabled? (not (and queue (< (inc queue-pos) (count queue))))]]
+       :disabled? (not (and queue (< (inc queue-pos) (count queue))))]
+      [player/shuffle-button shuffle? color]]
      [:div.hidden.lg:flex.items-center.text-sm
       [:span.mx-2
        (if (and bg-player-ready? @!player @!elapsed-time)
diff --git a/src/frontend/tubo/queue/events.cljs b/src/frontend/tubo/queue/events.cljs
index a174623..f44769b 100644
--- a/src/frontend/tubo/queue/events.cljs
+++ b/src/frontend/tubo/queue/events.cljs
@@ -9,6 +9,25 @@
     :body-overflow show?}))
 
 (rf/reg-event-fx
+ :queue/shuffle
+ [(rf/inject-cofx :store)]
+ (fn [{:keys [db store]} [_ val]]
+   (let [queue             (:queue db)
+         queue-pos         (+ 1 (:queue-pos db))
+         queue-to-end      (subvec queue queue-pos)
+         shuffled-to-end   (shuffle queue-to-end)
+         unshuffled-to-end (into (subvec queue 0 queue-pos) queue-to-end)
+         shuffled-queue    (into (subvec queue 0 queue-pos) shuffled-to-end)
+         unshuffled-queue  (or (:queue/unshuffled db)
+                               (into (subvec queue 0 (- queue-pos 1))
+                                     unshuffled-to-end))
+         updated-db        (assoc db
+                                  :queue
+                                  (if val shuffled-queue unshuffled-queue))]
+     {:db    (assoc updated-db :shuffle val :queue/unshuffled unshuffled-queue)
+      :store (assoc store :queue (:queue updated-db) :shuffle val)})))
+
+(rf/reg-event-fx
  :queue/add
  [(rf/inject-cofx :store)]
  (fn [{:keys [db store]} [_ stream notify?]]
diff --git a/src/frontend/tubo/queue/subs.cljs b/src/frontend/tubo/queue/subs.cljs
index f173ff7..fbec406 100644
--- a/src/frontend/tubo/queue/subs.cljs
+++ b/src/frontend/tubo/queue/subs.cljs
@@ -8,6 +8,11 @@
    (:queue db)))
 
 (rf/reg-sub
+ :queue/unshuffled
+ (fn [db _]
+   (:queue/unshuffled db)))
+
+(rf/reg-sub
  :queue-pos
  (fn [db _]
    (:queue-pos db)))
diff --git a/src/frontend/tubo/queue/views.cljs b/src/frontend/tubo/queue/views.cljs
index eae40b2..0947a74 100644
--- a/src/frontend/tubo/queue/views.cljs
+++ b/src/frontend/tubo/queue/views.cljs
@@ -83,6 +83,7 @@
 (defn main-controls
   [color]
   (let [loop-playback    @(rf/subscribe [:loop-playback])
+        shuffle?         @(rf/subscribe [:shuffle])
         !player          @(rf/subscribe [:player])
         loading?         @(rf/subscribe [:bg-player/loading])
         bg-player-ready? @(rf/subscribe [:bg-player/ready])
@@ -136,11 +137,7 @@
        :disabled? (not (and queue (< (inc queue-pos) (count queue))))
        :extra-classes [:text-xl]
        :show-on-mobile? true]
-      [player/button
-       :icon [:i.fa-solid.fa-list]
-       :on-click #(rf/dispatch [:queue/show false])
-       :show-on-mobile? true
-       :extra-classes [:pl-4 :pr-3]]]]))
+      [player/shuffle-button shuffle? color true]]]))
 
 (defn queue
   []