+1

CHANGELOG.md

reviewed

··· 4 4 5 5 - **Added ability to cache an entire playlist** (for offline usage) 6 6 - **Automatically prepend `_dnslink.` when using a domain name with an IPFS source** 7 7 + - Better color for the current-playing track 7 8 - Explain more things in the UI and on the about page 8 9 - Improve onboarding 9 10 - Show processing progress on sources screen

+1 -1

src/Applications/UI/Kit.elm

reviewed

··· 59 59 , background = rgb 2 7 14 60 60 , focus = rgb 0 0 0 61 61 , selection = colorKit.base0D 62 62 - , selectionAlt = Color.darken 0.275 colorKit.base0D -- rgb 3 48 63 62 62 + , selectionAlt = colorKit.base01 63 63 , text = colorKit.base01 64 64 } 65 65

+2 -1

src/Applications/UI/Tracks.elm

reviewed

··· 913 913 Just model.listScene.dnd 914 914 ) 915 915 |> UI.Tracks.Scene.List.view 916 916 - { height = deps.viewport.height 916 916 + { bgColor = deps.bgColor 917 917 + , height = deps.viewport.height 917 918 , isVisible = deps.isOnIndexPage 918 919 , showAlbum = deps.viewport.width >= 720 919 920 }

+45 -26

src/Applications/UI/Tracks/Scene/List.elm

reviewed

··· 3 3 import Browser.Dom as Dom 4 4 import Chunky exposing (..) 5 5 import Classes as C 6 6 - import Color 6 6 + import Color exposing (Color) 7 7 import Color.Ext as Color 8 8 import Color.Manipulate as Color 9 9 import Conditional exposing (ifThenElse) ··· 105 105 106 106 107 107 type alias Dependencies = 108 108 - { height : Float 108 108 + { bgColor : Maybe Color 109 109 + , height : Float 109 110 , isVisible : Bool 110 111 , showAlbum : Bool 112 112 + } 113 113 + 114 114 + 115 115 + type alias DerivedColors = 116 116 + { default : String 117 117 + , dark : String 118 118 + , light : String 111 119 } 112 120 113 121 ··· 174 182 175 183 infiniteListView : Dependencies -> List IdentifiedTrack -> InfiniteList.Model -> Bool -> Maybe String -> ( Maybe IdentifiedTrack, List Int ) -> Maybe (DnD.Model Int) -> Html.Styled.Html Msg 176 184 infiniteListView deps harvest infiniteList favouritesOnly searchTerm ( nowPlaying, selectedTrackIndexes ) maybeDnD = 185 185 + let 186 186 + color = 187 187 + Maybe.withDefault UI.Kit.colors.text deps.bgColor 188 188 + 189 189 + derivedColors = 190 190 + { default = Color.toCssString color 191 191 + , dark = Color.toCssString (Color.darken 0.325 color) 192 192 + , light = Color.toCssString (Color.fadeOut 0.625 color) 193 193 + } 194 194 + in 177 195 Html.Styled.fromUnstyled 178 196 (InfiniteList.view 179 197 (InfiniteList.withCustomContainer ··· 189 207 selectedTrackIndexes 190 208 dnd 191 209 deps.showAlbum 210 210 + derivedColors 192 211 193 212 _ -> 194 213 defaultItemView ··· 196 215 nowPlaying 197 216 selectedTrackIndexes 198 217 deps.showAlbum 218 218 + derivedColors 199 219 200 220 -- 201 221 , itemHeight = InfiniteList.withVariableHeight dynamicRowHeight ··· 413 433 -- INFINITE LIST ITEM 414 434 415 435 416 416 - defaultItemView : Bool -> Maybe IdentifiedTrack -> List Int -> Bool -> Int -> Int -> IdentifiedTrack -> Html Msg 417 417 - defaultItemView favouritesOnly nowPlaying selectedTrackIndexes showAlbum _ idx identifiedTrack = 436 436 + defaultItemView : Bool -> Maybe IdentifiedTrack -> List Int -> Bool -> DerivedColors -> Int -> Int -> IdentifiedTrack -> Html Msg 437 437 + defaultItemView favouritesOnly nowPlaying selectedTrackIndexes showAlbum derivedColors _ idx identifiedTrack = 418 438 let 419 439 ( identifiers, track ) = 420 440 identifiedTrack ··· 451 471 -- 452 472 , Html.div 453 473 (List.concat 454 454 - [ rowStyles idx rowIdentifiers 474 474 + [ rowStyles idx rowIdentifiers derivedColors 455 475 456 476 -- 457 477 , List.append ··· 479 499 ] 480 500 ) 481 501 (if showAlbum then 482 482 - [ favouriteColumn favouritesOnly favIdentifiers 502 502 + [ favouriteColumn favouritesOnly favIdentifiers derivedColors 483 503 , otherColumn "37.5%" False track.tags.title 484 504 , otherColumn "29.0%" False track.tags.artist 485 505 , otherColumn "29.0%" True track.tags.album 486 506 ] 487 507 488 508 else 489 489 - [ favouriteColumn favouritesOnly favIdentifiers 509 509 + [ favouriteColumn favouritesOnly favIdentifiers derivedColors 490 510 , otherColumn "52%" False track.tags.title 491 511 , otherColumn "43.5%" False track.tags.artist 492 512 ] ··· 494 514 ] 495 515 496 516 497 497 - playlistItemView : Bool -> Maybe IdentifiedTrack -> Maybe String -> List Int -> DnD.Model Int -> Bool -> Int -> Int -> IdentifiedTrack -> Html Msg 498 498 - playlistItemView favouritesOnly nowPlaying searchTerm selectedTrackIndexes dnd showAlbum _ idx identifiedTrack = 517 517 + playlistItemView : Bool -> Maybe IdentifiedTrack -> Maybe String -> List Int -> DnD.Model Int -> Bool -> DerivedColors -> Int -> Int -> IdentifiedTrack -> Html Msg 518 518 + playlistItemView favouritesOnly nowPlaying searchTerm selectedTrackIndexes dnd showAlbum derivedColors _ idx identifiedTrack = 499 519 let 500 520 ( identifiers, track ) = 501 521 identifiedTrack ··· 526 546 in 527 547 Html.div 528 548 (List.concat 529 529 - [ rowStyles idx rowIdentifiers 549 549 + [ rowStyles idx rowIdentifiers derivedColors 530 550 531 551 -- 532 552 , List.append ··· 570 590 ] 571 591 ) 572 592 (if showAlbum then 573 573 - [ favouriteColumn favouritesOnly favIdentifiers 593 593 + [ favouriteColumn favouritesOnly favIdentifiers derivedColors 574 594 , playlistIndexColumn (Maybe.withDefault 0 identifiers.indexInPlaylist) 575 595 , otherColumn "36.0%" False track.tags.title 576 596 , otherColumn "27.5%" False track.tags.artist ··· 578 598 ] 579 599 580 600 else 581 581 - [ favouriteColumn favouritesOnly favIdentifiers 601 601 + [ favouriteColumn favouritesOnly favIdentifiers derivedColors 582 602 , playlistIndexColumn (Maybe.withDefault 0 identifiers.indexInPlaylist) 583 603 , otherColumn "49.75%" False track.tags.title 584 604 , otherColumn "41.25%" False track.tags.artist ··· 733 753 35 734 754 735 755 736 736 - rowStyles : Int -> { isMissing : Bool, isNowPlaying : Bool, isSelected : Bool } -> List (Html.Attribute msg) 737 737 - rowStyles idx { isMissing, isNowPlaying, isSelected } = 756 756 + rowStyles : Int -> { isMissing : Bool, isNowPlaying : Bool, isSelected : Bool } -> DerivedColors -> List (Html.Attribute msg) 757 757 + rowStyles idx { isMissing, isNowPlaying, isSelected } derivedColors = 738 758 let 739 759 bgColor = 740 760 if isNowPlaying then 741 741 - rowBackgroundColors.selection 761 761 + derivedColors.light 742 762 743 763 else if modBy 2 idx == 1 then 744 764 rowBackgroundColors.whiteNear ··· 751 771 rowFontColors.selection 752 772 753 773 else if isNowPlaying then 754 754 - rowFontColors.white 774 774 + derivedColors.dark 755 775 756 776 else if isMissing then 757 777 rowFontColors.grey ··· 773 793 "28px" 774 794 775 795 776 776 - favouriteColumn : Bool -> { isFavourite : Bool, indexInList : Int, isNowPlaying : Bool, isSelected : Bool } -> Html Msg 777 777 - favouriteColumn favouritesOnly identifiers = 796 796 + favouriteColumn : Bool -> { isFavourite : Bool, indexInList : Int, isNowPlaying : Bool, isSelected : Bool } -> DerivedColors -> Html Msg 797 797 + favouriteColumn favouritesOnly identifiers derivedColors = 778 798 Html.div 779 799 ((++) 780 800 [ Html.Events.onClick (Reply <| ToggleFavourite identifiers.indexInList) 781 801 , Tachyons.classes [ T.flex_shrink_0, T.fw4, T.pl3 ] 782 802 ] 783 783 - (favouriteColumnStyles favouritesOnly identifiers) 803 803 + (favouriteColumnStyles favouritesOnly identifiers derivedColors) 784 804 ) 785 805 [ if identifiers.isFavourite then 786 806 text "t" ··· 790 810 ] 791 811 792 812 793 793 - favouriteColumnStyles : Bool -> { isFavourite : Bool, indexInList : Int, isNowPlaying : Bool, isSelected : Bool } -> List (Html.Attribute msg) 794 794 - favouriteColumnStyles favouritesOnly { isFavourite, isNowPlaying, isSelected } = 813 813 + favouriteColumnStyles : Bool -> { isFavourite : Bool, indexInList : Int, isNowPlaying : Bool, isSelected : Bool } -> DerivedColors -> List (Html.Attribute msg) 814 814 + favouriteColumnStyles favouritesOnly { isFavourite, isNowPlaying, isSelected } derivedColors = 795 815 let 796 816 color = 797 817 if isNowPlaying && isFavourite then ··· 799 819 favColors.selection 800 820 801 821 else 802 802 - favColors.white 822 822 + derivedColors.dark 803 823 804 824 else if isNowPlaying then 805 825 if isSelected then 806 806 - favColors.selectionFaded 826 826 + favColors.selectionFadedMore 807 827 808 828 else 809 809 - favColors.whiteFaded 829 829 + favColors.blackFaded 810 830 811 831 else if favouritesOnly || not isFavourite then 812 832 if isSelected then ··· 881 901 882 902 883 903 rowBackgroundColors = 884 884 - { selection = Color.toCssString UI.Kit.colors.selection 885 885 - , white = favColors.white 904 904 + { white = favColors.white 886 905 , whiteNear = Color.toCssString (Color.rgb255 252 252 252) 887 906 } 888 907