diff --git a/package-lock.json b/package-lock.json index 1588dbc..d553c8a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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": { diff --git a/src/cljs/airsonic_ui/components/audio_player/views.cljs b/src/cljs/airsonic_ui/components/audio_player/views.cljs index 7f94cac..bcc1670 100644 --- a/src/cljs/airsonic_ui/components/audio_player/views.cljs +++ b/src/cljs/airsonic_ui/components/audio_player/views.cljs @@ -69,30 +69,39 @@ [: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 - [buffered-part buffered duration] - [current-progress current-time buffered duration]]])) + [:article.progress-bar + [buffered-part buffered duration] + [current-progress current-time buffered duration]])) -(defn song-controls [is-playing?] - [: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] - [: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 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] + [: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] (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 - ^{: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]]])) + [: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]]]])) (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"])]])) diff --git a/src/sass/app.sass b/src/sass/app.sass index 627497b..c4115b6 100644 --- a/src/sass/app.sass +++ b/src/sass/app.sass @@ -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 + display: flex align-items: center -.current-song-info - display: flex - align-items: center + .playback-info + // shows cover and current track + align-items: center + flex-grow: 1 + color: inherit - .current-name, - .current-progress - padding: .5rem + .artist-and-title > * + display: inline-block + 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 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,