mirror of
https://github.com/heyarne/airsonic-ui.git
synced 2026-05-07 02:33:39 +02:00
Trying to make the audio player more mobile friendly
All good but progress bar is missing
This commit is contained in:
parent
6d3cd2104b
commit
afef13082e
3 changed files with 89 additions and 101 deletions
28
package-lock.json
generated
28
package-lock.json
generated
|
|
@ -207,7 +207,7 @@
|
|||
"dependencies": {
|
||||
"util": {
|
||||
"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=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
|
|
@ -482,7 +482,7 @@
|
|||
},
|
||||
"browserify-aes": {
|
||||
"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==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
|
|
@ -527,7 +527,7 @@
|
|||
},
|
||||
"browserify-rsa": {
|
||||
"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=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
|
|
@ -561,7 +561,7 @@
|
|||
},
|
||||
"buffer": {
|
||||
"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=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
|
|
@ -947,7 +947,7 @@
|
|||
},
|
||||
"create-hash": {
|
||||
"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==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
|
|
@ -960,7 +960,7 @@
|
|||
},
|
||||
"create-hmac": {
|
||||
"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==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
|
|
@ -1154,7 +1154,7 @@
|
|||
},
|
||||
"diffie-hellman": {
|
||||
"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==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
|
|
@ -1353,7 +1353,7 @@
|
|||
},
|
||||
"events": {
|
||||
"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=",
|
||||
"dev": true
|
||||
},
|
||||
|
|
@ -2610,7 +2610,7 @@
|
|||
},
|
||||
"http-errors": {
|
||||
"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=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
|
|
@ -3414,7 +3414,7 @@
|
|||
},
|
||||
"media-typer": {
|
||||
"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=",
|
||||
"dev": true
|
||||
},
|
||||
|
|
@ -4084,7 +4084,7 @@
|
|||
},
|
||||
"parse-asn1": {
|
||||
"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==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
|
|
@ -4694,7 +4694,7 @@
|
|||
},
|
||||
"safe-regex": {
|
||||
"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=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
|
|
@ -4805,7 +4805,7 @@
|
|||
},
|
||||
"sha.js": {
|
||||
"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==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
|
|
@ -5222,7 +5222,7 @@
|
|||
},
|
||||
"stream-browserify": {
|
||||
"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=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
|
|
|
|||
|
|
@ -69,17 +69,26 @@
|
|||
[:div.buffered-part {:on-click seek
|
||||
:style {:width (str "calc(" width "% - 1rem - 10px)")}}]))
|
||||
|
||||
(defn current-song-info [song status]
|
||||
(defn progress-bar [song status]
|
||||
(let [current-time (:current-time status)
|
||||
buffered (:buffered status)
|
||||
duration (:duration song)]
|
||||
[:article.current-song-info
|
||||
[:div.current-name (:artist song) [:br] (:title song)]
|
||||
[:div.current-progress
|
||||
[:article.progress-bar
|
||||
[buffered-part buffered duration]
|
||||
[current-progress current-time buffered duration]]]))
|
||||
[current-progress current-time buffered duration]]))
|
||||
|
||||
(defn song-controls [is-playing?]
|
||||
(defn playback-info [song status]
|
||||
[:a.playback-info.media
|
||||
{:href (routes/url-for ::routes/current-queue)
|
||||
:title "Go to current queue"}
|
||||
[:div.media-left [cover song 64]]
|
||||
[:div.media-content
|
||||
[:div.artist-and-title
|
||||
[:span.artist(:artist song)]
|
||||
[:span.song-title (:title song)]]]])
|
||||
|
||||
(defn playback-controls [is-playing?]
|
||||
[:div.playback-controls
|
||||
[:div.field.has-addons
|
||||
(let [buttons [[:media-step-backward :audio-player/previous-song]
|
||||
[(if is-playing? :media-pause :media-play) :audio-player/toggle-play-pause]
|
||||
|
|
@ -92,7 +101,7 @@
|
|||
^{:key icon-glyph} [:p.control [:button.button.is-light
|
||||
{:on-click (muted-dispatch [event])
|
||||
:title (title icon-glyph)}
|
||||
[icon icon-glyph]]]))])
|
||||
[icon icon-glyph]]]))]])
|
||||
|
||||
(defn- toggle-shuffle [playback-mode]
|
||||
(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-single "Repeating current track, click to repeat none"
|
||||
"Click to repeat current queue")]
|
||||
[:div.field.has-addons
|
||||
[:div.playback-mode-controls
|
||||
[:div.button-group>div.field.has-addons
|
||||
^{:key :shuffle-button} [shuffle-button {:on-click (toggle-shuffle playback-mode)
|
||||
:title "Shuffle"} [icon :random]]
|
||||
^{:key :repeat-button} [repeat-button {:on-click (toggle-repeat-mode repeat-mode)
|
||||
:title repeat-title} [icon :loop]]]))
|
||||
:title repeat-title} [icon :loop]]]]))
|
||||
|
||||
(defn audio-player []
|
||||
(let [current-song @(subscribe [:audio/current-song])
|
||||
|
|
@ -130,14 +140,11 @@
|
|||
[:nav.navbar.is-fixed-bottom.audio-player
|
||||
[:div.navbar-menu.is-active
|
||||
(if current-song
|
||||
;; show song info
|
||||
[:section.level.audio-interaction
|
||||
[:div.level-left>article.media
|
||||
[:div.media-left [cover current-song 48]]
|
||||
[:div.media-content [current-song-info current-song playback-status]]]
|
||||
[:div.level-right
|
||||
[: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]]]]
|
||||
;; show song info, controls, progress bar, etc.
|
||||
[:section.audio-interaction
|
||||
[playback-info current-song playback-status]
|
||||
[playback-controls is-playing?]
|
||||
[progress-bar current-song playback-status]
|
||||
[playback-mode-controls playlist]]
|
||||
;; not playing anything
|
||||
[:p.navbar-item.idle-notification "No audio playing"])]]))
|
||||
|
|
|
|||
|
|
@ -17,72 +17,47 @@
|
|||
.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
|
||||
.audio-player
|
||||
// first clear some of that navigation styling
|
||||
background-color: $dark
|
||||
color: $light
|
||||
min-height: 0
|
||||
|
||||
.navbar-menu
|
||||
color: $light
|
||||
background: $dark
|
||||
align-items: center
|
||||
padding: 0
|
||||
background-color: transparent
|
||||
|
||||
// now off to the contents
|
||||
|
||||
// when no song is playing
|
||||
.idle-notification
|
||||
color: $light
|
||||
color: inherit
|
||||
|
||||
// ... or with all the bells and whistles
|
||||
.audio-interaction
|
||||
flex-grow: 1
|
||||
|
||||
.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
|
||||
|
||||
.current-song-info
|
||||
display: flex
|
||||
align-items: center
|
||||
|
||||
.current-name,
|
||||
.current-progress
|
||||
padding: .5rem
|
||||
.playback-info
|
||||
// shows cover and current track
|
||||
align-items: center
|
||||
flex-grow: 1
|
||||
color: inherit
|
||||
|
||||
.current-name
|
||||
width: 30%
|
||||
font-size: .8rem
|
||||
.artist-and-title > *
|
||||
display: inline-block
|
||||
white-space: nowrap
|
||||
width: 100%
|
||||
text-overflow: ellipsis
|
||||
overflow: hidden
|
||||
|
||||
.current-progress
|
||||
|
||||
.progress-bar
|
||||
// hide progress bar on mobile
|
||||
display: none
|
||||
@include =tablet
|
||||
display: block
|
||||
|
||||
flex-grow: 1
|
||||
position: relative
|
||||
|
||||
|
|
@ -98,6 +73,12 @@
|
|||
height: 1rem
|
||||
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
|
||||
.card-content > div,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue