Monday, August 14, 2017

3.0 Work in Progress 7: Fast Scroll & Gestures

The last 2 weeks I added in fast scroll (scroll through long lists fast by dragging down the bar on the right with the letter / number indicator to show where you are in the list) and gestures on now playing and the mini player.

The first up is fast scroll.  This rendition of fast scroll SHOULD be a bit more consistent than the old one in 2.0.  There was a random bug that was very difficult to reproduce that would cause the letters to not match what was showing on the screen.  The fast scroll code is much simpler this time around so i dont expect that bug to be an issue.  The video is a big laggy and the fast scroll in general is not as smooth as i'd like it to be, but that will be worked on once 3.0 gets to beta.



The second feature is the addition of gestures.  All the previous gestures have returned (swipe left right up down / tap / double tap / long press) plus I added in a few more.  New gestures are 2 finger tap/double tap/long press, and a 2 finger pan.  The pan is considered a "continuous" gesture, so there will only be a few actions that you can bind to it.  The video shows it bound to adjusting the volume, but the other options would be adjusting tempo or seeking the track.  If you decide to not use the pan, you will be able to use 2 finger swipes.  Right now GMMP is using the stock version of the gesture library and it works fairly decent for the most part.   If users find some gestures hard to use I will try to tweak the library to improve that.



My next 3.0 post on here will most likely not be for another 3-4 weeks since I have a vacation coming up and I plan on doing a 2.x patch for android O plus some other bug reports i've gotten over the past few months.

Saturday, July 29, 2017

3.0 Work in Progress 6: Mini Player

This update mainly focuses on the addition of the mini player to the bottom of the library view (and will also be on other views where it makes sense) but I did also make some improvements in the play / pause animation.



Above shows the new mini player.  Just like every other view so far, the metadata portion will be customizable and you will be able to choose how many buttons are shown.   Right now you can choose between prev track, play/pause, and next track.  I may open it up to some of the other media actions like shuffle / repeat but i havent decided on that yet.

In the WIP4 post I had shown off a little chunk of the code that added a bunch of "behaviors" to a view.  The behaviors contain all the common code for a particular behavior of a UI view.  This allows me to rewrite the same (or very similar) chunks of code for different UIs.  GMMP 1/2.x was loaded with repeated code despite my best efforts to refactor.  Anyway, since the mini player shares a lot of the same abilities as now playing, I created 2 new behaviors: PlayingInfoBehavior and MediaButtonBehavior.

So here are the behaviors for the Library view:


view?.let {
            addBehavior(LifecycleBehavior::class, StatusBarBehavior(context, it))
            addBehavior(LifecycleBehavior::class, ToolbarBehavior(this@LibraryPagerPresenter, it))
            addBehavior(LifecycleBehavior::class, PlayingInfoBehavior(context, this@LibraryPagerPresenter, it, state))
            addBehavior(LifecycleBehavior::class, MediaButtonBehavior(context, this@LibraryPagerPresenter, it, state))
            addBehavior(FragmentContainerBehavior::class, FragmentContainerBehavior(it, state))
            addBehavior(MenuBehavior::class, HasMenuBehavior())
        }


I now set up the state of the library view for the above screenshot:


state.metadataLinesModel = MetadataLinesModel(theme).apply {
            addMetadataLine("<align=left><typeface=sans-serif><size=16>%tr%")
            addMetadataLine("<align=left><typeface=sans-serif><size=12><color=secondary>%ar%")
        }

state.buttonDefinitions = mapOf(R.id.miniPlayerPlayPause to
                                                MediaButtonDefinition(-1, R.drawable.ic_gm_pause_to_play, 0, MusicControlEvent.PLAY_PAUSE, theme.iconColorNormal),
                                        R.id.miniPlayerButton1 to
                                                MediaButtonDefinition(0, R.drawable.ic_gm_skip_previous, 0, MusicControlEvent.PREVIOUS_TRACK, theme.iconColorNormal, View.GONE),
                                        R.id.miniPlayerButton3 to
                                                MediaButtonDefinition(1, R.drawable.ic_gm_skip_next, 0, MusicControlEvent.NEXT_TRACK, theme.iconColorNormal, View.GONE))

The first part defines how the metadata is going to display and the second part defines the media buttons.  Tells it what icon to use, the size, the action that will happen on press, the color, and finally the visibility.  This is all "hardcoded" right now but will eventually hooked up to the preferences making it really easy to customize.


Small change in the code here to get the 3 buttons:


state.metadataLinesModel = MetadataLinesModel(theme).apply {
            addMetadataLine("<align=left><typeface=sans-serif><size=16>%tr%")
            addMetadataLine("<align=left><typeface=sans-serif><size=12><color=secondary>%ar%")
        }

state.buttonDefinitions = mapOf(R.id.miniPlayerPlayPause to
                                                MediaButtonDefinition(-1, R.drawable.ic_gm_pause_to_play, 0, MusicControlEvent.PLAY_PAUSE, theme.iconColorNormal, View.VISIBLE),
                                        R.id.miniPlayerButton1 to
                                                MediaButtonDefinition(0, R.drawable.ic_gm_skip_previous, 0, MusicControlEvent.PREVIOUS_TRACK, theme.iconColorNormal, View.VISIBLE),
                                        R.id.miniPlayerButton3 to
                                                MediaButtonDefinition(1, R.drawable.ic_gm_skip_next, 0, MusicControlEvent.NEXT_TRACK, theme.iconColorNormal, View.VISIBLE))


Now playing is now configured the same way:


override fun onViewAttached()
    {
        super.onViewAttached()

        view?.let {
            addBehavior(LifecycleBehavior::class, ToolbarBehavior(this@NowPlayingPresenter, it, false))
            addBehavior(LifecycleBehavior::class, PlayingInfoBehavior(context, this@NowPlayingPresenter, it, state))
            addBehavior(LifecycleBehavior::class, MediaButtonBehavior(context, this@NowPlayingPresenter, it, state))
        }
    }

    private fun createState()
    {
        //Read state
        val theme = GMThemeEngine.getInstance(context).currentTheme
        state.metadataLinesModel = MetadataLinesModel(theme).apply {
            addMetadataLine("<align=center><typeface=sans-serif-medium><size=24>%tr%")
            addMetadataLine("<align=center><typeface=sans-serif-medium><size=20>%ar%")
            addMetadataLine("<align=center><typeface=sans-serif-medium><size=20>%al%")
        }

        state.buttonDefinitions = mapOf(R.id.npPlayPause to MediaButtonDefinition(-1, R.drawable.ic_gm_pause_to_play_circle_outline, 0, MusicControlEvent.PLAY_PAUSE, theme.accentColor),
                                        R.id.npMediaBtn1 to MediaButtonDefinition(0, R.drawable.ic_gm_repeat, 0, MusicControlEvent.TOGGLE_REPEAT, theme.iconColorNormal),
                                        R.id.npMediaBtn2 to MediaButtonDefinition(1, R.drawable.ic_gm_skip_previous, 1, MusicControlEvent.PREVIOUS_TRACK, theme.iconColorNormal),
                                        R.id.npMediaBtn3 to MediaButtonDefinition(2, R.drawable.ic_gm_skip_next, 1, MusicControlEvent.NEXT_TRACK, theme.iconColorNormal),
                                        R.id.npMediaBtn4 to MediaButtonDefinition(3, R.drawable.ic_gm_shuffle, 0, MusicControlEvent.TOGGLE_SHUFFLE, theme.iconColorNormal))

    }

Here is a screenshot of the play pause in now playing using the icon from the mini player.  I plan on also adding the other play icon inside the filled circle (in addition to the current play with the circle outline.


Finally here is a video of everything in action.  The animations / transitions didnt seem to record as smooth as it appears on the device, so just keep that in mind.  I do most of my testing on a galaxy s3 running 7.1.2 and an original moto x running 5.1, so if things look smooth on those old devices they should be great on the newer ones.  This video also shows a bug with the 3 dot menu getting shifted to the left a bit when coming back to the library view.  I havent really looked into that much but it'll get fixed.. no worries.


I also want to note that when 3.0 is finally released I do think I will add 2 other options for how now playing looks.  One being the colored toolbar on top, with the album art underneath it taking up all the space between the toolbar and the metadata.  The other being smaller album art centered around a blurred background generated from the album art.  Some other players use that look and i really like it.  Plus it will be a compromise for current users of the holo themes with the blurred background

Sunday, July 16, 2017

3.0 Work in Progress 5: Library view

In this update I added a library view similar to the one in the old UI.  I also added in an artist list, genre list, and track list tabs.


The big difference with this one is the toolbar will collapse when you scroll down and if you scroll up it will become visible again


Here is a video of it in action


The plan with the library view is to allow the user to choose which views to add to the library (others will end up in the side navigation view if they are not in the library), the title of those views, and their order.  Below is the chunk of code responsible for building the library, its "hardcoded" currently but will be fairly simple to hook up to the preferences.

v.setupAdapter(listOf(BaseFragmentEntry("Artists", ArtistListFragment::class)
                                  , BaseFragmentEntry("Albums", AlbumListFragment::class)
                                  , BaseFragmentEntry("Genres", GenreListFragment::class)
                                  , BaseFragmentEntry("Songs", TrackListFragment::class)))

I am sure many of you are anxious to try out the new UI, but it is still a ways off.  Some of the views are not too straight forward to code like the equalizer and the browser / folder view, so I expect they will take some time to code.  My plan is to have a working alpha by this fall.  The alpha however will not really contain much customization.  Its really easy to add customization to the code, however actually creating UIs to configure everything is going to take a long time.  Because of this, the alpha will be through a separate group in google+ that users will have to join.  I didnt want to push something so incomplete to the beta channel

Thursday, June 29, 2017

3.0 Work in Progress 4: MultiSelect, Overflow Menu, and Sort

For those who havent noticed, I am trying to do post progess updates every 2 weeks.  This iteration doesnt have too much to actually show off, however a lot of work was done under the hood.  Everything has been wired for easily adding multi select (and its action menu), the overflow menu, and sort.   By "wired" I mean that the majority of the code was written and for each new view I only have to write a few lines of code to add the capabilities and then write the code to handle the actual selected actions.

Example:

This is in the album list view's presenter code (couldnt figure out a way to post code so the formatting is a bit weird).  As you can see its not much code at all to add a lot of functionality

override fun onViewAttached()
{
    super.onViewAttached()

    view?.let {        addBehavior(MenuBehavior::class
, ViewModeMenuBehavior(R.menu.menu_gm_shared_view_mode, state))
        addBehavior(MenuBehavior::class
, GridSizeMenuBehavior(R.menu.menu_gm_shared_gridsize, state))
        addBehavior(MenuBehavior::class
, SortMenuBehavior(R.menu.menu_gm_sort_album_list, state))
        addBehavior(SelectionBehavior::class
, AlbumSelectionBehavior())
        addBehavior(ActionModeBehavior::class
, AlbumActionModeBehavior(it))
    }}



Anyway here are some screenshots





Friday, June 16, 2017

3.0 Work in Progress 3: Album Details + Album Grid transitions

The last 2 weeks I've been working on the album details view along with learning how to do transitions between different views.  As mentioned before I'm currently just focusing on the code portion so the actual UIs themselves are not final and still need a lot of work.


This is the current state of the album details view.  Its using the CoordinaterLayout with a collapseable toolbar, so when you scroll up the album art will basically collapse into the toolbar at the top.  I currently like how the album title moves while you scroll up and eventually becomes the title in the toolbar, but im not 100% sure if that is the direction i will go.


Below is a video that shows the transitions between selecting an album from the album grid and opening the album details.  This was recorded on an old galaxy s3 running Lineage OS (7.1.2) so it appears the actual recording is a bit glitchy.  The Image showing over half of the floating action button doesnt actually happen on the device.


Progress might seem slow but once a lot of the essential capabilities are written, they will be reusable on almost all the other views (IE artist detail view and genre detail view will be pretty similar to the album view, so it wont take long for me to add).  Next up on my list is adding the 3 dot buttons / context menus on to the list / grid items.

Friday, June 2, 2017

3.0 Work in Progress 2: Album Grid

Before I talk about my latest progress I want to reiterate that this is just a work in progress / prototype so nothing shown in the screenshots will be final.  I havent spent too much time on the UIs themselves, but have been focusing on the underlying UI code (presenters / data access / adapters / etc).  I encourage people to give feedback, however just because something is not being shown, does not mean I am getting rid of it.

Recently, google announced a bunch of new architecture libraries https://developer.android.com/topic/libraries/architecture/index.html and since I was in the middle of some major rework, I decided to go ahead and start adapting GMMP to use these new libs.


  • Room is going to greatly simplify access GMMP's database.
  • LiveData combined with Room makes it super simple for my UI to get access to the data and get notified on changes to the database
  • ViewModel allows me to maintain UI state between orientation changes
  • Lifecycle gives my presenters access to the fragment/activity lifecycle without being tightly coupled to the fragment/activity

Google also announced official support for Kotlin in Android Studio.  I have only played around with it a little but from everything I have read it looks amazing and I do have plans to convert some of GMMP over to it.  Since its compatible with the JVM I can mix and match both kotlin and java in the same project.

Anyway for the last 2 weeks I have been working on the album view (its a standalone since I have not done anything with drawer navigation or the viewpager / tab navigation yet).  For now I have created 4 different modes for the albums list.

List


Card List



Grid


Card Grid


There are also nice transitions in between each view mode (and changing the number of grid columns).

I also made the metadata shown in each grid/list item configurable in the same way as now playing.  There will however be less options for the variables depending on the view (IE albums view would only give you access to the artist/album/year and not trackname variable. stuff like that).  I also added another small addition to the markup language used for the metadata lines and that is the ability to set the color.. in a very limited way.  <color=secondary> or <color=primary> can be added to each metadata line.  Primary is the whiter color and secondary is the grayer one.  For a light theme these colors would be different.  Also, each view mode will have its own metadata lines.  In the images above you will see that the list views are aligned left, but the grid views the text is aligned center.

Now Playing

There are 2 minor changes to now playing.



I made the buttons at the bottom configurable.  Besides play/pause you will be able to configure them to show other actions and also choose the icon side (small/medium/large).  In the image above I adjusted the icon sizes a bit: Shuffle/repeat are small, Next/Prev are medium, and Play/Pause is Large

Finally here is a gif if the play/pause animation:  https://media.giphy.com/media/1pvYO3Fs7nPpK/giphy.gif

Saturday, May 20, 2017

3.0 Work In Progress 1: New theme engine and now playing

I'd like to start off by saying that GMMP 3.0 is a long long way from being complete, but I have made some progress so I wanted to share whats been done so far.

New Theme Engine

In 2.x, GMMP had 2 main theme types: Holo and Material.  The holo themes leveraged a library called HoloAccent which reimplemented all of the UI elements in a dynamically color-able holo style.  The material themes used the android compatibility library and required each theme to be predefined in xml.  I generated roughly 1000 or so different color combinations and thats what was available to choose from.  On top of that, a lot of custom code had to be placed through out the UI code to make sure everything colored properly.

GMMP 3.0 will feature a new theme engine that will do the dynamic coloring of Material themes.  That unfortunately means there will no longer be any holo themes.  Google keeps releasing updates that break parts of that holo accent library, so I decided to drop it.  Anyway the new engine will traverse through the entire view and theme things accordingly.  It also allows me to specify different behaviors straight in the UI xml instead of in code.  (Example would be the the play/pause button using the accent color instead of the standard button color).



As of right now, a theme is defined by 6 different colors.  Primary, Primary Light, Primary Dark, Accent, Accent Dark, and Accent Light.  GMMP 3.0 will allow all 6 of these to be chosen by the user.  There will also be tons of predetermined themes available to select from for those who dont want to customize each color.

New Now Playing

The pictures above show the current state of the now playing screen.  The album art area will be where gestures are done.  I will also probably make an option to choose between having the album art extend all the way through the status bar, and having a standard colored toolbar with the album art underneath it.  The floating action button is just a placeholder currently but its purpose is going to be for quick actions.  The actions will be similar to the options available for the gesture actions.  I have not yet determined how they will be presented.

One option is the FAB to expand out to a bunch of smaller floating buttons like below:


It looks nice, but due to the location of the FAB it doesnt leave room for many buttons, so I may have to modify it to show both above and below the FAB or go down a different route all together.  The other thought i had was to make it expand out to a toolbar with buttons that sits on top of where the song information is shown.  I"ll have to prototype both to see which works better.

Below the album art is the metadata display which I will go into more detail later on in this post.  When single tapping the metadata area it will transition the UI to the queue.  I've had a lot of requests for easier queue access and it seems like this allows for that.  Perhaps a long press on that area would open up a popup with all the song details.  Finally the play/pause button will do a nice transition animation when pressed (the one where the play morphs into the pause).

Not everything mentioned here implemented yet, but that is what im shooting for.   I'll most likely do partial implementations of most of the UI views just to see how everything works together first before doing the full implementations.

Metadata View Customization

In GMMP 1.x/2.x, users were giving the option to choose from a long list of different metadata fields for each line or allowed the user to write there own custom lines using variables like %ar% (artist), %al% (album), etc.  I've greatly expanded upon this for 3.0.  There will still be presets that users can choose from if they dont want to mess with writing the lines themselves.

Fields

This has not changed.  %field% will be replaced by metadata from the tags.  The code was completely rewritten so its much more efficient this time around.  It actually parses each line instead of just doing a general replace for each field.

Formatting

Entire lines or specific words in a line can be wrapped with formatting tags (there will be examples later on)

  • <align> : Aligns the text left, right, or centered.  This applies to the entire line of text
  • <b> : Bold
  • <i> : Italics
  • <size> : Text/Font size
  • <typeface> : Choose the font to use
  • <u> : Underline

Functions

Inspired by foobar2000, I've put in a few functions to allow you to apply a little logic to the lines
  • $ifequal(val1, val2, text_if_equal, text_if_not) : Compares 2 integers (val1, val2) and if they are the same it will display [text_if_equal], otherwise show [text_if_not] or nothing if that field is not specified.  
  • $ifgreater(val1, val2, text_if_greater, text_if_not) : Compares 2 integers (val1, val2) and if val > val2 it will display [text_if_greater], otherwise show [text_if_not] or nothing if that field is not specified.  
  • $notempty(val1, val2, val3, etc) : Will display the first parameter that is not empty.
All of these parameters can contain fields (which is really the only way they are useful).  More functions will probably come later, but at least right now with these 3 you can do some nice things like:  
  • Hiding disc number or track number if its 0
  • Show composer or album artist if the field is set, otherwise show artist

Examples


"<align=center><typeface=sans-serif><size=24>%tr%"
"<align=center><typeface=sans-serif><size=20>%ar%"
"<align=center><typeface=sans-serif><size=20>%al%"


"<align=left><b><typeface=sans-serif><size=24>%tr%"
"<align=center><i><typeface=serif><size=20>%ar%"
"<align=right><u><typeface=monospace><size=20>%al%"

"<align=center><b><typeface=sans-serif><size=24>%tr%"
"<align=center><typeface=sans-serif><size=20><b>$notempty(%cp%,   ,%ar%)</b> - <i>%al%</i>"

Multiple alignments on a single line

The last customization that can be done is essentially splitting a single line into multiple segments that take up an equal percentage of the line (2 segments = 50% each or 3 segments is 33.3% each).  Each segment can get their own alignment

This is the java code representing above.  I will try to make this much more user friendly when creating lines in app

"<align=center><typeface=serif><size=24>%tr%"
new String[]
{
 "<align=left><typeface=serif><size=20>$ifequal(%yr%,0,No Year,%yr%)",
 "<align=center><typeface=serif><size=20>%br%",
 "<align=right><typeface=serif><size=20>%sr%",
}
new String[]
{
 "<align=center><typeface=serif><size=20>$ifequal(%yr%,0,No Year,%yr%)",
 "<align=center><typeface=serif><size=20>%sr%"
}

So thats it for now.  I will be doing more posts as things get developed