near/airsonic-ui
1
0
Fork 0
mirror of https://github.com/heyarne/airsonic-ui.git synced 2026-05-06 18:33:38 +02:00
Code Issues Projects Releases Wiki Activity

Polish and lipstick (#7)

Browse source 
* Add dark sidebar

* Add generated covers for items that have none

* Fix small spacing issue with generated covers

* Set up different sidebar sections and improve styling of bottom bar

* Add open-iconic and use icons for playback control buttons

* Make sure sidebar always extends to complete height

* Simplify album listing view function, add text-overflow to thumbs

* Use better identifier for generated covers

Makes sure that covers look the same, no matter if generated from an album or
individual track

* Move shadow-cljs to devDependencies

* Display all album titles in a table

* Make progress bar take up all available space
This commit is contained in:
Arne Schlüter 2018-06-03 17:05:52 +02:00 • committed by GitHub
commit c8849810db
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 236 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/cljs/airsonic_ui/views/bottom_bar.cljs
View file

@ -2,40 +2,46 @@
(:require [re-frame.core :refer [dispatch subscribe]]
[airsonic-ui.events :as events]
[airsonic-ui.subs :as subs]
[airsonic-ui.views.cover :refer [cover]]))
[airsonic-ui.views.cover :refer [cover]]
[airsonic-ui.views.icon :refer [icon]]))
;; currently playing / coming next / audio controls...
(defn current-song-info [{:keys [item status]}]
[:article
[:div (:artist item) " - " (:title item)]
;; FIXME: Sometimes items don't have a duration
[:progress.progress.is-tiny {:value (:current-time status)
:max (:duration item)}]])
:max (:duration item)}]])
(defn playback-controls []
(defn playback-controls [is-playing?]
;; TODO: Toggle play pause icon based on playback status
[:div.field.has-addons
(let [buttons [["previous" ::events/previous-song]
["play / pause" ::events/toggle-play-pause]
["next" ::events/next-song]]]
(map (fn [[label event]]
[:p.control>button.button.is-light {:on-click #(dispatch [event])} label])
(let [buttons [[:media-step-backward ::events/previous-song]
[(if is-playing? :media-pause :media-play) ::events/toggle-play-pause]
[:media-step-forward ::events/next-song]]]
(map (fn [[icon-glyph event]]
^{:key icon-glyph} [:p.control>button.button.is-light
{:on-click #(dispatch [event])}
[icon icon-glyph]])
buttons))])
(def logo-url "https://airsonic.github.io/airsonic-ui/assets/images/logo/airsonic-dark-350x100.png")
(def logo-url "https://airsonic.github.io/airsonic-ui/assets/images/logo/airsonic-light-350x100.png")
(defn bottom-bar []
(let [currently-playing @(subscribe [::subs/currently-playing])]
[:nav.navbar.is-fixed-bottom
(let [currently-playing @(subscribe [::subs/currently-playing])
is-playing? @(subscribe [::subs/is-playing?])]
[:nav.navbar.is-fixed-bottom.playback-area
[:div.navbar-brand
[:div.navbar-item
[:img {:src logo-url}]]]
[:div.navbar-menu.is-active
(if currently-playing
;; show song info
[:section.level
[:section.level.audio-interaction
[:div.level-left>article.media
[:div.media-left [cover (:item currently-playing) 48]]
[:div.media-content [current-song-info currently-playing]]]
[:div.level-right [playback-controls]]]
[:div.level-right [playback-controls is-playing?]]]
;; not playing anything
[:span "Currently no song selected"])]]))
[:p.idle-notification "Currently no song selected"])]]))