mirror of
https://github.com/heyarne/airsonic-ui.git
synced 2026-05-07 02:33:39 +02:00
70 lines
2.8 KiB
Clojure
70 lines
2.8 KiB
Clojure
(ns airsonic-ui.components.current-queue.views
|
|
(:require [re-frame.core :refer [subscribe dispatch]]
|
|
[reagent.core :as r]
|
|
["react-sortable-hoc" :refer [SortableHandle]]
|
|
[airsonic-ui.helpers :as helpers]
|
|
[airsonic-ui.views.song :as song]
|
|
[airsonic-ui.views.icon :refer [icon]]
|
|
[airsonic-ui.components.sortable.views :as sortable]
|
|
[airsonic-ui.routes :as routes]))
|
|
|
|
(def SortHandle
|
|
(SortableHandle.
|
|
;; Alternative to r/reactify-component, which doens't convert props and hiccup,
|
|
;; is to just provide fn as component and use as-element or create-element
|
|
;; to return React elements from the component.
|
|
(fn []
|
|
(r/as-element [:span.is-size-7.has-text-grey-lighter
|
|
[icon :elevator]]))))
|
|
|
|
(defn song-actions []
|
|
(let [controls-id (str "song-actions-" (random-uuid))
|
|
is-active? (r/atom false)]
|
|
(fn []
|
|
[(if @is-active? :div.dropdown.is-right.is-active :div.dropdown.is-right)
|
|
[:div.dropdown-trigger
|
|
[:span.is-small.button {:aria-haspopup "true"
|
|
:aria-controls controls-id
|
|
:on-click #(swap! is-active? not)}
|
|
[icon :ellipses]]]
|
|
[:div.dropdown-menu {:id controls-id, :role "menu"}
|
|
[:div.dropdown-content
|
|
;; TODO: Implement removal
|
|
[:a.dropdown-item {:href "#"} "Remove from queue"]
|
|
;; TODO: Implement "Go to source"
|
|
[:a.dropdown-item {:href "#"} "Go to source"]]]])))
|
|
|
|
(defn artist-link [{id :artistId, artist :artist}]
|
|
(if id
|
|
[:a {:href (routes/url-for ::routes/artist.detail {:id id})} artist]
|
|
artist))
|
|
|
|
(defn song-table [{:keys [songs current-song]}]
|
|
[:table.song-listing-table.table.is-fullwidth
|
|
[sortable/sortable-component
|
|
{:container [:tbody]
|
|
:items songs
|
|
|
|
:render-item
|
|
(fn [{song :value}]
|
|
[(if (= (:id song) (:id current-song)) :tr.is-playing :tr)
|
|
[:td.sort-handle.is-narrow [:> SortHandle]]
|
|
[:td.song-artist [artist-link song]]
|
|
[:td.song-title (:title song)]
|
|
[:td.song-duration (helpers/format-duration (:duration song) :brief? true)]
|
|
[:td.song-actions.is-narrow [song-actions]]])
|
|
|
|
:on-sort-end
|
|
(fn [{:keys [old-idx new-idx]}]
|
|
)}]])
|
|
|
|
(defn current-queue []
|
|
[:section.section>div.container
|
|
[:h1.title "Current Queue"]
|
|
(let [current-queue @(subscribe [:audio/current-queue])
|
|
current-song @(subscribe [:audio/current-song])]
|
|
(if (some? current-queue)
|
|
[song-table {:songs current-queue
|
|
:current-song current-song}]
|
|
[:p "You are currently not playing anything. Use the search or go to your "
|
|
[:a {:href (routes/url-for ::routes/library)} "Library"] " to start playing some music."]))])
|