Full screen player improvements
This commit is contained in:
parent
3b3387f636
commit
5b6afafb13
6 changed files with 71 additions and 18 deletions
|
@ -1,3 +1,7 @@
|
|||
export function requestAnimationFrame(callback) {
|
||||
globalThis.requestAnimationFrame(callback);
|
||||
}
|
||||
|
||||
export function replaceHash(hash) {
|
||||
globalThis.history.replaceState({}, document.title, hash);
|
||||
}
|
||||
|
|
|
@ -1,2 +1,5 @@
|
|||
@external(javascript, "../../browser_ffi.mjs", "requestAnimationFrame")
|
||||
pub fn request_animation_frame(callback: fn() -> Nil) -> Nil
|
||||
|
||||
@external(javascript, "../../browser_ffi.mjs", "replaceHash")
|
||||
pub fn replace_hash(new_url: String) -> Nil
|
||||
|
|
|
@ -38,6 +38,7 @@ import elekf/web/components/button_group
|
|||
import elekf/web/components/link
|
||||
import elekf/web/events/start_play
|
||||
import elekf/web/utils
|
||||
import elekf/utils/browser
|
||||
import elekf/web/components/icon.{Alt, icon}
|
||||
import elektrofoni
|
||||
|
||||
|
@ -91,12 +92,22 @@ pub fn init(auth_data: common.AuthData) {
|
|||
effect.from(fn(dispatch) { router.init(dispatch) })
|
||||
|> effect.map(Router)
|
||||
|
||||
let #(path, _query) = router.get_current_path()
|
||||
let #(path, query) = router.get_current_path()
|
||||
let route = result.unwrap(router.parse(path), router.default_route)
|
||||
|
||||
// If we are initialising straight into the full screen player, remove the
|
||||
// query argument (as the player is not open on init)
|
||||
case set.contains(router.parse_query(query), router.FullScreen) {
|
||||
True ->
|
||||
browser.replace_hash(
|
||||
router.queryless(route)
|
||||
|> router.to_hash(),
|
||||
)
|
||||
False -> Nil
|
||||
}
|
||||
|
||||
let initial_view =
|
||||
path
|
||||
|> router.parse()
|
||||
|> result.unwrap(router.TrackList)
|
||||
route
|
||||
|> route_to_view()
|
||||
|> result.unwrap(library_view.Tracks)
|
||||
|
||||
|
|
|
@ -77,7 +77,7 @@ fn init() {
|
|||
True,
|
||||
fn(_) -> List(LibraryItem(Track)) { [] },
|
||||
shuffler,
|
||||
track_utils.sort_by_name,
|
||||
track_utils.sort_by_track_number,
|
||||
)
|
||||
|
||||
#(
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import gleam/int
|
||||
import gleam/float
|
||||
import gleam/option
|
||||
import lustre/element.{text}
|
||||
import lustre/element/html.{div, input, p}
|
||||
|
@ -40,6 +41,22 @@ pub fn view(model: Model) {
|
|||
p([attribute.id("full-player-track-name")], [text(model.track.title)]),
|
||||
p([attribute.id("full-player-artist-name")], [text(model.artist.name)]),
|
||||
p([attribute.id("full-player-album-name")], [text(model.album.name)]),
|
||||
div([attribute.id("full-player-metas")], [
|
||||
meta("full-player-trackno", "Track", int.to_string(model.track.number)),
|
||||
meta("full-player-discno", "Disc", int.to_string(model.album.disc)),
|
||||
meta("full-player-genre", "Genre", model.track.genre),
|
||||
meta("full-player-year", "Year", int.to_string(model.track.year)),
|
||||
meta(
|
||||
"full-player-replaygain",
|
||||
"ReplayGain",
|
||||
float.to_string(model.track.replay_gain),
|
||||
),
|
||||
meta(
|
||||
"full-player-rating",
|
||||
"Rating",
|
||||
int.to_string(model.track.rating) <> " / 5",
|
||||
),
|
||||
]),
|
||||
div([attribute.id("player-controls")], [
|
||||
button_group.view("", [attribute.id("player-controls-buttons")], [
|
||||
button.view(
|
||||
|
@ -104,3 +121,10 @@ pub fn view(model: Model) {
|
|||
],
|
||||
)
|
||||
}
|
||||
|
||||
fn meta(id: String, title: String, value: String) {
|
||||
div([attribute.id(id), attribute.class("full-player-meta")], [
|
||||
p([], [text(title)]),
|
||||
p([], [text(value)]),
|
||||
])
|
||||
}
|
||||
|
|
37
style.css
37
style.css
|
@ -16,7 +16,7 @@
|
|||
--background-gradient-top: rgba(252, 176, 69, 1);
|
||||
--text-color: #123456;
|
||||
|
||||
--glass-opacity: 0.3;
|
||||
--glass-opacity: 0.5;
|
||||
--glass-opacity-active: 0.2;
|
||||
--glass-shadow-opacity: 0.1;
|
||||
--glass-background: rgba(255, 255, 255, var(--glass-opacity));
|
||||
|
@ -36,7 +36,7 @@
|
|||
--track-thumb-size: 20px;
|
||||
--track-scale-factor: 4;
|
||||
|
||||
--library-top-nav-height: 45px;
|
||||
--library-top-nav-height: 50px;
|
||||
|
||||
--search-size: 1.6rem;
|
||||
}
|
||||
|
@ -229,8 +229,16 @@ single-album-view {
|
|||
padding: var(--double-margin);
|
||||
|
||||
display: grid;
|
||||
grid-template: "art art" "track track" "artist artist" "album album" ". ." 1fr "controls controls" auto / 1fr 1fr;
|
||||
gap: var(--side-margin);
|
||||
grid-template:
|
||||
"art art"
|
||||
"track track"
|
||||
"artist artist"
|
||||
"album album"
|
||||
"meta meta"
|
||||
". ." 1fr
|
||||
"controls controls" auto
|
||||
/ 1fr 1fr;
|
||||
gap: var(--double-margin);
|
||||
|
||||
text-align: center;
|
||||
font-weight: 100;
|
||||
|
@ -239,7 +247,15 @@ single-album-view {
|
|||
|
||||
#full-player-artwork-wrapper img {
|
||||
margin: 0 auto;
|
||||
padding-bottom: var(--side-margin);
|
||||
padding-bottom: var(--double-margin);
|
||||
}
|
||||
|
||||
#full-player-metas {
|
||||
grid-area: meta;
|
||||
|
||||
display: grid;
|
||||
gap: var(--double-margin);
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
}
|
||||
|
||||
#player-controls {
|
||||
|
@ -332,8 +348,10 @@ single-album-view {
|
|||
}
|
||||
|
||||
#library-top-nav .glass-button {
|
||||
font-size: 2rem;
|
||||
padding: 0;
|
||||
|
||||
font-size: 2rem;
|
||||
line-height: var(--library-top-nav-height);
|
||||
}
|
||||
|
||||
#library-loading-indicator {
|
||||
|
@ -431,13 +449,6 @@ single-album-view {
|
|||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
.library-item-expanded {
|
||||
}
|
||||
|
||||
.library-item-expanded-contents {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.library-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue