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

Trying to make the audio player more mobile friendly

Browse source 
All good but progress bar is missing
This commit is contained in:
Arne Schlüter 2019-01-22 20:49:06 +01:00
commit afef13082e
3 changed files with 89 additions and 101 deletions
Download patch file Download diff file Expand all files Collapse all files

28
package-lock.json generated
View file

@ -207,7 +207,7 @@
"dependencies": { "dependencies": {
"util": { "util": {
"version": "0.10.3", "version": "0.10.3",
"resolved": "http://registry.npmjs.org/util/-/util-0.10.3.tgz", "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
"integrity": "sha1-evsa/lCAUkZInj23/g7TeTNqwPk=", "integrity": "sha1-evsa/lCAUkZInj23/g7TeTNqwPk=",
"dev": true, "dev": true,
"requires": { "requires": {
@ -482,7 +482,7 @@
}, },
"browserify-aes": { "browserify-aes": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "http://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz", "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
"integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==", "integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==",
"dev": true, "dev": true,
"requires": { "requires": {
@ -527,7 +527,7 @@
}, },
"browserify-rsa": { "browserify-rsa": {
"version": "4.0.1", "version": "4.0.1",
"resolved": "http://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz", "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
"integrity": "sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=", "integrity": "sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=",
"dev": true, "dev": true,
"requires": { "requires": {
@ -561,7 +561,7 @@
}, },
"buffer": { "buffer": {
"version": "4.9.1", "version": "4.9.1",
"resolved": "http://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz", "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
"integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=", "integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=",
"dev": true, "dev": true,
"requires": { "requires": {
@ -947,7 +947,7 @@
}, },
"create-hash": { "create-hash": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "http://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz", "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
"integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==", "integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==",
"dev": true, "dev": true,
"requires": { "requires": {
@ -960,7 +960,7 @@
}, },
"create-hmac": { "create-hmac": {
"version": "1.1.7", "version": "1.1.7",
"resolved": "http://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz", "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
"integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==", "integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==",
"dev": true, "dev": true,
"requires": { "requires": {
@ -1154,7 +1154,7 @@
}, },
"diffie-hellman": { "diffie-hellman": {
"version": "5.0.3", "version": "5.0.3",
"resolved": "http://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz", "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
"integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==", "integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==",
"dev": true, "dev": true,
"requires": { "requires": {
@ -1353,7 +1353,7 @@
}, },
"events": { "events": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "http://registry.npmjs.org/events/-/events-1.1.1.tgz", "resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz",
"integrity": "sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ=", "integrity": "sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ=",
"dev": true "dev": true
}, },
@ -2610,7 +2610,7 @@
}, },
"http-errors": { "http-errors": {
"version": "1.6.3", "version": "1.6.3",
"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz", "resolved": "http://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
"integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=", "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
"dev": true, "dev": true,
"requires": { "requires": {
@ -3414,7 +3414,7 @@
}, },
"media-typer": { "media-typer": {
"version": "0.3.0", "version": "0.3.0",
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", "resolved": "http://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
"integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=", "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
"dev": true "dev": true
}, },
@ -4084,7 +4084,7 @@
}, },
"parse-asn1": { "parse-asn1": {
"version": "5.1.1", "version": "5.1.1",
"resolved": "http://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.1.tgz", "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.1.tgz",
"integrity": "sha512-KPx7flKXg775zZpnp9SxJlz00gTd4BmJ2yJufSc44gMCRrRQ7NSzAcSJQfifuOLgW6bEi+ftrALtsgALeB2Adw==", "integrity": "sha512-KPx7flKXg775zZpnp9SxJlz00gTd4BmJ2yJufSc44gMCRrRQ7NSzAcSJQfifuOLgW6bEi+ftrALtsgALeB2Adw==",
"dev": true, "dev": true,
"requires": { "requires": {
@ -4694,7 +4694,7 @@
}, },
"safe-regex": { "safe-regex": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz", "resolved": "http://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
"integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=", "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=",
"dev": true, "dev": true,
"requires": { "requires": {
@ -4805,7 +4805,7 @@
}, },
"sha.js": { "sha.js": {
"version": "2.4.11", "version": "2.4.11",
"resolved": "http://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz", "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
"integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==", "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
"dev": true, "dev": true,
"requires": { "requires": {
@ -5222,7 +5222,7 @@
}, },
"stream-browserify": { "stream-browserify": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "http://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.1.tgz", "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.1.tgz",
"integrity": "sha1-ZiZu5fm9uZQKTkUUyvtDu3Hlyds=", "integrity": "sha1-ZiZu5fm9uZQKTkUUyvtDu3Hlyds=",
"dev": true, "dev": true,
"requires": { "requires": {

75
src/cljs/airsonic_ui/components/audio_player/views.cljs
View file

@ -69,30 +69,39 @@
[:div.buffered-part {:on-click seek [:div.buffered-part {:on-click seek
:style {:width (str "calc(" width "% - 1rem - 10px)")}}])) :style {:width (str "calc(" width "% - 1rem - 10px)")}}]))
(defn current-song-info [song status] (defn progress-bar [song status]
(let [current-time (:current-time status) (let [current-time (:current-time status)
buffered (:buffered status) buffered (:buffered status)
duration (:duration song)] duration (:duration song)]
[:article.current-song-info [:article.progress-bar
[:div.current-name (:artist song) [:br] (:title song)] [buffered-part buffered duration]
[:div.current-progress [current-progress current-time buffered duration]]))
[buffered-part buffered duration]
[current-progress current-time buffered duration]]]))
(defn song-controls [is-playing?] (defn playback-info [song status]
[:div.field.has-addons [:a.playback-info.media
(let [buttons [[:media-step-backward :audio-player/previous-song] {:href (routes/url-for ::routes/current-queue)
[(if is-playing? :media-pause :media-play) :audio-player/toggle-play-pause] :title "Go to current queue"}
[:media-step-forward :audio-player/next-song]] [:div.media-left [cover song 64]]
title {:media-step-backward "Previous" [:div.media-content
:media-play "Play" [:div.artist-and-title
:media-pause "Pause" [:span.artist(:artist song)]
:media-step-forward "Next"}] [:span.song-title (:title song)]]]])
(for [[icon-glyph event] buttons]
^{:key icon-glyph} [:p.control [:button.button.is-light (defn playback-controls [is-playing?]
{:on-click (muted-dispatch [event]) [:div.playback-controls
:title (title icon-glyph)} [:div.field.has-addons
[icon icon-glyph]]]))]) (let [buttons [[:media-step-backward :audio-player/previous-song]
[(if is-playing? :media-pause :media-play) :audio-player/toggle-play-pause]
[:media-step-forward :audio-player/next-song]]
title {:media-step-backward "Previous"
:media-play "Play"
:media-pause "Pause"
:media-step-forward "Next"}]
(for [[icon-glyph event] buttons]
^{:key icon-glyph} [:p.control [:button.button.is-light
{:on-click (muted-dispatch [event])
:title (title icon-glyph)}
[icon icon-glyph]]]))]])
(defn- toggle-shuffle [playback-mode] (defn- toggle-shuffle [playback-mode]
(muted-dispatch [:audio-player/set-playback-mode (if (= playback-mode :shuffled) (muted-dispatch [:audio-player/set-playback-mode (if (= playback-mode :shuffled)
@ -116,11 +125,12 @@
:repeat-all "Repeating current queue, click to repeat current track" :repeat-all "Repeating current queue, click to repeat current track"
:repeat-single "Repeating current track, click to repeat none" :repeat-single "Repeating current track, click to repeat none"
"Click to repeat current queue")] "Click to repeat current queue")]
[:div.field.has-addons [:div.playback-mode-controls
^{:key :shuffle-button} [shuffle-button {:on-click (toggle-shuffle playback-mode) [:div.button-group>div.field.has-addons
:title "Shuffle"} [icon :random]] ^{:key :shuffle-button} [shuffle-button {:on-click (toggle-shuffle playback-mode)
^{:key :repeat-button} [repeat-button {:on-click (toggle-repeat-mode repeat-mode) :title "Shuffle"} [icon :random]]
:title repeat-title} [icon :loop]]])) ^{:key :repeat-button} [repeat-button {:on-click (toggle-repeat-mode repeat-mode)
:title repeat-title} [icon :loop]]]]))
(defn audio-player [] (defn audio-player []
(let [current-song @(subscribe [:audio/current-song]) (let [current-song @(subscribe [:audio/current-song])
@ -130,14 +140,11 @@
[:nav.navbar.is-fixed-bottom.audio-player [:nav.navbar.is-fixed-bottom.audio-player
[:div.navbar-menu.is-active [:div.navbar-menu.is-active
(if current-song (if current-song
;; show song info ;; show song info, controls, progress bar, etc.
[:section.level.audio-interaction [:section.audio-interaction
[:div.level-left>article.media [playback-info current-song playback-status]
[:div.media-left [cover current-song 48]] [playback-controls is-playing?]
[:div.media-content [current-song-info current-song playback-status]]] [progress-bar current-song playback-status]
[:div.level-right [playback-mode-controls playlist]]
[:div.button-group [:p.control>a.button.is-light {:href (routes/url-for ::routes/current-queue) :title "Go to current queue"} [icon :menu]]]
[:div.button-group [song-controls is-playing?]]
[:div.button-group [playback-mode-controls playlist]]]]
;; not playing anything ;; not playing anything
[:p.navbar-item.idle-notification "No audio playing"])]])) [:p.navbar-item.idle-notification "No audio playing"])]]))

89
src/sass/app.sass
View file

@ -17,72 +17,47 @@
.loader .loader
+loader +loader
// navi on the left side
.sidebar
min-height: 100vh
background: $dark
a
color: $light
.has-navbar-fixed-bottom .sidebar
// 2.5 = 3.25 ($navbar-height) - 0.75 ($padding)
min-height: calc(100vh - 2.5rem)
// bottom bar // bottom bar
.audio-player .audio-player
// first clear some of that navigation styling
background-color: $dark
color: $light
min-height: 0
.navbar-menu .navbar-menu
color: $light padding: 0
background: $dark background-color: transparent
align-items: center
// now off to the contents
// when no song is playing
.idle-notification .idle-notification
color: $light color: inherit
// ... or with all the bells and whistles
.audio-interaction .audio-interaction
flex-grow: 1 display: flex
.media-left
margin-right: 0
.level-left
flex-grow: 1
flex-shrink: 0
.level-right
display: flex
.button-group
margin: 0 .5rem
+ .button-group
margin-left: 0
=tablet
flex-grow: 0
flex-shrink: 1
padding-left: .5rem
padding-right: .5rem
.media
flex-grow: 1
align-items: center align-items: center
.current-song-info .playback-info
display: flex // shows cover and current track
align-items: center align-items: center
flex-grow: 1
color: inherit
.current-name, .artist-and-title > *
.current-progress display: inline-block
padding: .5rem white-space: nowrap
width: 100%
text-overflow: ellipsis
.current-name
width: 30%
font-size: .8rem
white-space: nowrap
text-overflow: ellipsis
overflow: hidden
.current-progress .progress-bar
// hide progress bar on mobile
display: none
@include =tablet
display: block
flex-grow: 1 flex-grow: 1
position: relative position: relative
@ -98,6 +73,12 @@
height: 1rem height: 1rem
width: 100% width: 100%
// buttons to control current playback and playlist behavior
.playback-controls,
.playback-mode-controls
flex-shrink: 0
padding: .3rem
// preview card for album or artist listings // preview card for album or artist listings
.preview-card .preview-card
.card-content > div, .card-content > div,