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

Move navigation to the top

Browse source 
Squashed commit of the following:

commit b03c1ea7ed0d2fbd56f56f3273e694abc5454101
Author: Arne Schlüter <arne@schlueter.is>
Date:   Wed Aug 29 11:38:32 2018 +0200

    Fix bug where dropdown menus behind notifications could not be hovered

commit f4d3cd3dad89d0de84f131dbef7268422b26aa35
Author: Arne Schlüter <arne@schlueter.is>
Date:   Wed Aug 29 11:16:41 2018 +0200

    Move navigation to top

commit 564d972291aebb382d1ca560a21fad332d70cd0c
Author: Arne Schlüter <arne@schlueter.is>
Date:   Wed Aug 29 10:23:17 2018 +0200

    Move audio player into its own component

commit 382e9e88021db1506efc5fb78935b7846b8257db
Author: Arne Schlüter <arne@schlueter.is>
Date:   Wed Aug 29 10:11:14 2018 +0200

    Remove link to last.fm in bio

commit f248c2999ca88eeb82769d7491b1e786ee4a7c9d
Author: Arne Schlüter <arne@schlueter.is>
Date:   Wed Aug 29 10:01:10 2018 +0200

    Add links to external services & hero headers to album and artist pages
This commit is contained in:
Arne Schlüter 2018-08-29 11:43:59 +02:00
commit 29ea86479c
17 changed files with 223 additions and 179 deletions
Download patch file Download diff file Expand all files Collapse all files

104
src/cljs/airsonic_ui/views.cljs
View file

@ -1,4 +1,6 @@
(ns airsonic-ui.views
"This module contains the outmost layer of our app views. It makes sure that
the proper subscriptions are run and arranges the complete layout."
(:require [re-frame.core :refer [dispatch subscribe]]
[airsonic-ui.routes :as routes :refer [url-for]]
[airsonic-ui.events :as events]
@ -7,73 +9,71 @@
[airsonic-ui.views.notifications :refer [notification-list]]
[airsonic-ui.views.breadcrumbs :refer [breadcrumbs]]
[airsonic-ui.views.audio-player :refer [audio-player]]
[airsonic-ui.views.login :refer [login-form]]
[airsonic-ui.views.album :as album]
[airsonic-ui.views.song :as song]
[airsonic-ui.components.audio-player.views :refer [audio-player]]
[airsonic-ui.components.search.views :as search]
[airsonic-ui.components.library.views :as library]))
[airsonic-ui.components.library.views :as library]
[airsonic-ui.components.artist.views :as artist]
[airsonic-ui.components.collection.views :as collection]))
;; TODO: Find better names and places for these.
(def logo-url "./img/airsonic-light-350x100.png")
(defn album-detail [{:keys [album]}]
[:div
[:h2.title (str (:artist album) " - " (:name album))]
[song/listing (:song album)]])
(defn artist-detail [{:keys [artist artist-info]}]
[:div
[:h2.title (:name artist)]
[:div.content>p {:dangerouslySetInnerHTML {:__html (:biography artist-info)}}]
[album/listing (:album artist)]])
(defn sidebar [user]
[:aside.menu.section
[search/form]
[:p.menu-label "Music"]
[:ul.menu-list
[:li [:a "By artist"]]
[:li [:a "Top rated"]]
[:li [:a "Most played"]]]
[:p.menu-label "Playlists"]
[:p.menu-label "Shares"]
[:p.menu-label "Podcasts"]
[:p.menu-label "User area"]
[:ul.menu-list
[:li [:a "Settings"]]
[:li [:a
(defn navbar-top
"Contains search, some navigational links and the logo"
[{:keys [user]}]
[:nav.navbar.is-fixed-top.is-dark {:role "navigation", :aria-label "search and navigation"}
[:div.navbar-brand
[:div.navbar-item>img {:src logo-url}]]
;; user is `nil` when we're not logged in, we can hide the extended navbar
(when user
[:div.navbar-menu
[:div.navbar-start
[:div.navbar-item [search/form]]]
[:div.navbar-end
[:div.navbar-item.has-dropdown.is-hoverable
[:div.navbar-link "Library"]
[:div.navbar-dropdown
[:a.navbar-item {:href (url-for ::routes/library {:criteria "recent"})} "Recently played"]
[:a.navbar-item {:href (url-for ::routes/library {:criteria "newest"})} "Newest additions"]
[:a.navbar-item {:href (url-for ::routes/library {:criteria "starred"})} "Starred"]]]
[:a.navbar-item {} "Podcasts"]
[:a.navbar-item {} "Shares"]
[:div.navbar-item.has-dropdown.is-hoverable
[:div.navbar-link "More"]
[:div.navbar-dropdown.is-right
[:a.navbar-item {:disabled true} "Settings"]
[:a.navbar-item
{:on-click #(dispatch [::events/logout]) :href "#"}
(str "Logout (" (:name user) ")")]]]])
(str "Logout (" (:name user) ")")]]]]])])
;; putting everything together
(defn app [route-id params query]
(let [user @(subscribe [::subs/user])
;; TODO: Move this to a layer 3 subscription ↓
(defn media-content
"Provides the complete UI to browse the media library, interact with search
results etc"
[route-id params query]
(let [;; TODO: Move this to a layer 3 subscription ↓
route-events @(subscribe [:routes/events-for-current-route])
content @(subscribe [:api/route-data route-events])]
[:div
[:main.columns
[:div.column.is-2.sidebar
[sidebar user]]
[:div.column.is-10
[:section.section
[breadcrumbs content]
(case route-id
::routes/library [library/main [route-id params query] content]
::routes/artist-view [artist-detail content]
::routes/album-view [album-detail content]
::routes/search [search/results content])]]]
[:section.section
[breadcrumbs content]
(case route-id
::routes/library [library/main [route-id params query] content]
::routes/artist-view [artist/detail content]
::routes/album-view [collection/detail content]
::routes/search [search/results content])]
[audio-player]]))
(defn main-panel []
(let [notifications @(subscribe [::subs/notifications])
is-booting? @(subscribe [::subs/is-booting?])
[route-id params query] @(subscribe [:routes/current-route])]
[route-id params query] @(subscribe [:routes/current-route])
user @(subscribe [::subs/user])]
[(add-classes :div route-id)
[notification-list notifications]
(if is-booting?
[:div.app-loading>div.loader]
(case route-id
::routes/login [login-form]
[app route-id params query]))]))
[:div
[navbar-top {:user user}]
(case route-id
::routes/login [login-form]
[media-content route-id params query])])]))