Now Playing code improvements

[YourOrdinaryCat]

Resolved / Related Issues

169

Details of Changes There are multiple Now Playing controls, some duplicates of each other in some areas. This PR attempts to fix that issue. Current plan goes as follows:

• [x] Implement previous methods in a more friendly manner in MediaPlaybackViewModel
• [x] Remove references to the original PlaybackViewModel - this covers the media bars, now playing pages, and pages that can start media playback
• [x] Implement the new Now Playing bar UI through control templates where necessary
• [x] Add Now Playing pages in a cleaner manner

Validation Not needed yet, will update as soon as the previous bars are replaced.

Screenshots / Videos (optional) Media Players as of May 29:

[YourOrdinaryCat]

The new media bar was added to allow for easier customization - it will be DataTemplate driven and will make it easier to customize the design.

The MediaPlaybackViewModel will be a reimplementation of PlaybackViewModel with better documentation, improved methods, and new events. This is to make everything easier to use and understand.

This PR will also define a simple interface with all needed properties to display media items.

[YourOrdinaryCat]

I'll be working on subclassing the default MediaTransportControls directly, which would essentially give us the system behavior for free while still being able to work on custom addons. The new control will still be there, but subclassing the MTC directly will help a lot.

[YourOrdinaryCat]

Still a work in progress, but I'm planning to add a few things that will make working with the transport controls much easier. We also have a compact bar now, if that's needed. For now, screenshots:

[josephbeattie]

https://www.figma.com/file/uOqnndf1l14u4IFNtk7BM4/RiseMP-Design-Toolkit?node-id=0%3A1

This figma link is a lil messy, but just go to the now playing bar section and you’ll see some rough designs, including a compact mode etc. Also, see if you can add an option to just show video thumbnail/album art in the bottom right corner. This looks 100x better! Will it make live scrubbing work correctly?

[itsWindows11]

Oop I accidentally deleted this thinking I pressed on reply, sorry @josephbeattie.

[itsWindows11]

Still a work in progress, but I'm planning to add a few things that will make working with the transport controls much easier. We also have a compact bar now, if that's needed. For now, screenshots:

There's too much spacing between the slider and the volume icon, unlike the now playing bar that's used currently.

[esibruti]

Still a work in progress, but I'm planning to add a few things that will make working with the transport controls much easier. We also have a compact bar now, if that's needed. For now, screenshots:

So, this way, with these changes, the sound problem in the application will be solved? (The sound problem is that when you change the sound in the now playing bar, it doesn't stay the same throughout the program)

And another problem, will the glyphs for windows 10 also look like this or will they continue to not appear in some places in the playing bar?

[YourOrdinaryCat]

I tested on Windows 10, took the screenshots on an 11 VM. Both show the icons correctly.

[YourOrdinaryCat]

The control template and derived classes were added in the 512ea6334d714618f183ae87230ed1f85776251d commit.

[YourOrdinaryCat]

@itsWindows11 instead of changing button visibility directly in the template, please do it with the default props:

https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.mediatransportcontrols?view=winrt-22000#properties (specifically the Is[Blank]ButtonVisible and Is[Blank]Enabled props)

This is to make what actually gets enabled clearer and to be able to hide/disable controls through visual states, you could set the values in the default template for RiseMediaTransportControls.

[YourOrdinaryCat]

Latest commit only has the definitions + docs. The methods don't do anything yet.

[YourOrdinaryCat]

Last commit just added an instance of it* typo sorry

[YourOrdinaryCat]

From the next commit onwards, I'll be working on making stuff use the MPViewModel. UI improvements will follow soon.

[YourOrdinaryCat]

Yes.

[YourOrdinaryCat]

I may redo the Now Playing pages, there's a lot of trickery with the MainPage that would take a while to get working and it's exception prone with the new playback handling.

[YourOrdinaryCat]

The last two commits were made to fix a Now Playing bug, where it would crash the app if the thumbnail was null. The thumbnail was previously not fetched when activating the app from a file, which caused a crash that is now fixed. It also makes some of the code logic when working with albums much easier to follow.

[YourOrdinaryCat]

For anyone interested in playback related methods such as PlaySingleItemAsync, I made it so that you don't have to pass a cancellation token or wrap it inside a try catch, you can call them as much as you wish and they'll work fine. Of course, you'll still get exceptions if something unrelated to cancellation goes wrong.

[YourOrdinaryCat]

I'm currently trying to lower the reference count of the original PlaybackViewModel - this is why you see a bunch of commits just deleting files or removing dependencies. I'll update the comment at the top with the current plan, to make things like this more clear.

[YourOrdinaryCat]

Last commit starts with some work on the UI.

cc @josephbeattie, may interest you.

[itsWindows11]

uhm there's an issue

[YourOrdinaryCat]

o h, I think the last few commits fixed that

[itsWindows11]

What about compact overlay mode?

[itsWindows11]

o h, I think the last few commits fixed that

nope, still crashing when clicking on the fullscreen button

[itsWindows11]

Seems like the state manager wasn't able to access the elements inside the transport controls, so moved the code over.

[YourOrdinaryCat]

Alright, thanks

[YourOrdinaryCat]

Seems like the controls don't change between states anymore. Do we need the fullscreen button anyways? We're using the restore button and artwork for that aren't we?

[itsWindows11]

Seems like the controls don't change between states anymore. Do we need the fullscreen button anyways? We're using the restore button and artwork for that aren't we?

I think the fullscreen button would be useful on the now playing and video playback page, but not with the default implementation (make the page fullscreen instead of the control).

For states we could just change them in the code, if visual states don't work.

[YourOrdinaryCat]

So maybe a custom button for those, and we disable the current one on the MainPage?

[itsWindows11]

yup, btw can we continue in email to not flood this PR with comments?

[YourOrdinaryCat]

Sure thing, also just improved the VisualStates a little, gonna add some animation now.

[YourOrdinaryCat]

Updated pictures of the Now Playing bars are now available in the first comment.