microsoft / buildcast

Example UWP Media Application to show best practices

topic	languages	products
sample	csharp	windows windows-uwp

BuildCast Video Player UWP Sample

BuildCast is an end-to-end sample built to showcase the Microsoft Fluent Design System as well as other capabilities of the Universal Windows Platform. It permits browsing, downloading and playback of select video podcasts including a sampling of the most popular ones from Channel 9 as well as some popular Windows tech enthusiast feeds. It has other features such as ink notes, bookmarks and remote playback. This sample was initially shown and discussed at the 2017 Build conference during the Build Amazing Apps with Fluent Design talk.

Features

At a high level this sample demonstrates usage of:

• Fluent design system (Acrylic material, Reveal highlight, Connected animations, ParallaxView, an Adobe XD UX Prototype etc)
• XAML controls and features (NavigationView, swipe commanding, context menu with icons and SVG assets, LoadedImageService, conditional XAML etc)
• Media playback including picture-in-picture and fullscreen views
• Inking and smart ink
• Project Rome and AppServices
• Background download service, Entity Framework and SQLite
• Windows composition APIs (InteractionTracker, implicit animations, scene lighting)
• Notifications with progress bar
• Share contract

Run the sample

Prepare your environment

This sample requires Visual Studio 2017 with Update 5 and the Windows 10 Software Development Kit (SDK) version 16299, Windows 10 OS - Fall Creators Update.

• Get a copy of Visual Studio 2017 Update 4 with support for building Universal Windows apps [includes SDK 16299]

• Get the latest Windows 10 Fall Creator's Update [10.0.16299.0 or later]

• Get the Windows 10 Insider SDK 16299 as a standalone download.

Additionally, to receive the latest updates to Windows and the development tools, and to help shape their development, join the Windows Insider Program.

Run

After opening the Visual Studio solution, set your startup project as BuildCast, the architecture to AMD64 or x86, and press F5 to run.

Code at a glance

The table below shows the platform features used in the application and where abouts to find them in the sample.

Release Notes Update 1 October 2017

• Add the Adobe XD UX prototype file
• Add back Spectrum Analyzer visualization to now playing
• On startup, app will check for cached media changes at filesystem level and update database state to match this
• Improved commanding on favorites, downloads, notes
• Design tweaks
• Known issues where there will be code changes have all been moved to issues on github
• Bug fixes

Known Issues

• Download progress reported via toasts / action center will not update when the app quits, even though the download will proceed using background transfer service. This is due to a known platform gap
• Deploying / running BuildCast on a XBOX will result in the app crashing due to a platform bug that is being investigated. More details here.
• A number of warnings have not been addressed
• Things that didn't make it from the Build talk:
  • TreeView control: did not ship in the final Fall Creator's update
  • 360 video playback: this will come in a future update to the app

App details

Frameworks

Framework	Usage	Code file
Entity framework	ORM to store objects in SQLite	LocalStorageContext.cs
SQLite in UWP	Primary mechanism for persistence	N/A
.NET Standard 2.0	Provides System.Tuple	NowPlayingState.cs

App features

App feature	Description	Code file
Adobe XD UX Prototype		BuildCast.xd
Acrylic material	Acrylic material usage	Branded.xaml
Reveal highlight	Reveal highlight usage	CustomMTC.xaml
NavigationView	NavigationView usage	NavigationRoot.xaml
Connected animations	Used in connected transitions between pages	FeedDetails.xaml.cs
Inking	Ink annotation on video frame	InkNote.xaml.cs
Smart Ink	Recognize and convert images to glyphs and emoji	InkNote.xaml.cs
Emoji picker	Select emoji	InkNote.xaml.cs
Context menus with icons	Context menus with icons	FeedDetails.xaml
Swipe commanding	Swipe controls on lists	FeedDetails.xaml
Mnemonics/Access Keys	Mnemonics usage	EpisodeDetails.xaml
Command bar	Command bar usage	Player.xaml
Coordinated animations	Used in connected transitions between pages	FeedDetails.xaml.cs
Conditional XAML	NavigationView loads based on OS version support	NavigationRoot.xaml
SVG	BuildCast logo on homepage	Home.xaml
Adaptive state triggers	UI optimizations for assorted screen sizes	Home.xaml
ParallaxView	Home screen parallax layout	Home.xaml
Lighting	Buffering animation	BufferingVisualManager.cs
Interaction tracker	Interaction tracker	Timeline.cs
Layout animations	Layout animations	Home.xaml.cs
LoadedImageSurface	Composition Surface for Images	CustomMediaPlayer.xaml.cs
Composition expression language	Timeline animations	Timeline.cs
Implicit animations	Poster frame fade out when video starts playing	VisualHelpers.cs
Compact overlay mode	Picture-in-picture support	ViewModeService.cs
Spectrum Analyzer	Realtime visualization of audio spectra for currently playing clip	player.xaml.cs
Full screen mode	Full screen mode for video	ViewModeService.cs
Share contract	Share the annotated frame	InkNote.xaml.cs
Background transfer service	Video download for offline viewing	BackgroundDownloadHelper.cs
BTS toast completion notifications	Toast display upon background download completion	BackgroundDownloadHelper.cs
Toast progress bars	Visual download progress indicator	BackgroundDownloadHelper.cs
App services	Support Rome based remote control	RemotePlayService.cs
Media Composition API	Extract frame for Ink annotations from local file	PlayerService.cs
Template studio	Theming, settings model

Contributing

While we expect to at a later date, this project is not currently accepting contributions. For now, if you have any feedback or questions, please open an Issue on GitHub for the team.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments

Copyright © Microsoft Corporation. All rights reserved. This program/project is and its use is subject to the MIT License

buildcast's Issues

There are issues with the concurrent PiP view: when closing the main view the app won't currently relaunch unless PiP is closed. Also, when minimizing main view app is suspended and playback stops

Move InkNotes page over to MVVM

Source code missing

Where's the source code? It's been MONTHS and yet the source code hasn't been uploaded yet. When will it be uploaded?

When refreshing a feed with new items, new items are not correctly sorted until navigating away and back to the feed details page

When refreshing a feed with new items, new items are not correctly sorted until navigating away and back to the feed details page

No code yet??

Make list of improvements for UI tailoring for XBOX

make a list of improvements or, ideally, provide an Adobe XD file for design improvements when running on XBOX

Unable to build because of PlaybackSource and IVisualizer

Despite doing everything that pertains to this project I can't seem to build because of the player. I have UWPAudioVisualizer nuget installed but it seems its is lacking some classes required in the player

Error CS1729 'PlaybackSource' does not contain a constructor that takes 1 arguments BuildCast D:\CSharp\PlayGround\BuildCast\src\BuildCast\Services\PlayerService.cs
Error CS0234 The type or namespace name 'IVisualizer' does not exist in the namespace 'AudioVisualizer' (are you missing an assembly reference?) BuildCast D:\CSharp\PlayGround\BuildCast\src\BuildCast\Views\Player.xaml.cs

IntelliSense Failure

I've never loaded a UWP source application before this. But when I load this up into Visual Studio, I get this message:

[Failure] Could not find file 'C:\Users\Me\Desktop\BuildCast-master\BuildCast-master\src\BuildCast\obj\ARM\Debug\App.g.i.cs'.

It does have 'App.g.cs' in the target directory. Is this supposed to be the same file? It is not there before I load the project into Visual Studio.

Glyphs recognized via smart ink are not persisted

BLOCKED: this requires the datamodel update before can be tackled.
Only ink strokes are preserved in ink notes, glyphs recognized via smart ink are not currently persisted. Work here is to

• Update datebase schema to support collection of XAML overlays by adding size, position, glyph
• Save: iterate over all added glyphs added within xamloverlay canvas and save size, position, which glyph
• Load: query database for glyphs, add them to the xamloverlay canvas when ink note is loaded

Not loading new episodes

This might be something I've done but i am trying to add in a couple more podcast feeds and no matter what i do some of them never load any information about the episodes.

"AllFeeds.Add(new Feed(new Uri("http://feeds.twit.tv/aaa_video_hd.xml"), "All About Android", "Description", new Uri("ms-appx:///UI/StaticImages/aaa2048.jpg"), "TWiT"));"

Here is a new feed that i have added for All About Android from TWiT. No matter what i do it will never load the episodes for this feed. I have it setup exactly as the Windows Weekly is setup and it still won't work. If i hit Refresh Episodes while it is loading the whole app will crash. What could be the issue with this?

Download progress is only reported via action center

• Add in-app UX to show download progress. Re-attach to in-progress downloads and update downloads

• When download completes update the downloads page

• Show empty placeholder text when the downloads page is empty

• If an error occurs with a background download while app is closed, notify the user next time the app launches

returning from pip mode causes navigation options to disappear

When we return from picture in picture mode to normal mode, all options in the navigation menu just disappear.
Settings : Whole window turns into pip mode.

No in-app Picture-in-Picture

Whilst video playback continues when navigating away from the player, there is no in-app picture-in-picture currently hence you'll only hear audio play back. Need to add a visual hosted in the navigationrootpage that is dynamically hooked / unhooked when switching to and from now playing page

Concurrent PiP Mode problems

• Close main window, app won't re-launch because app not handling multi-view re-launch correctly
• When using concurrent PiP mode and main view is minimized, playback stops

Cant perform Add-Migration

When I try to perform Add-Migration command, I get the following:

PM> add-migration InitialMigration
System.Reflection.TargetInvocationException: Exception has been thrown by the target of an invocation. ---> System.TypeInitializationException: The type initializer for 'BuildCast.DataModel.LocalStorageContext' threw an exception. ---> System.TypeLoadException: Could not load type 'System.Threading.Tasks.Task' from assembly 'System.Runtime, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a'.
at BuildCast.DataModel.LocalStorageContext..cctor()
--- End of inner exception stack trace ---
at BuildCast.DataModel.LocalStorageContext..ctor()
--- End of inner exception stack trace ---
at System.RuntimeTypeHandle.CreateInstance(RuntimeType type, Boolean publicOnly, Boolean noCheck, Boolean& canBeCached, RuntimeMethodHandleInternal& ctor, Boolean& bNeedSecurityCheck)
at System.RuntimeType.CreateInstanceSlow(Boolean publicOnly, Boolean skipCheckThis, Boolean fillCache, StackCrawlMark& stackMark)
at System.RuntimeType.CreateInstanceDefaultCtor(Boolean publicOnly, Boolean skipCheckThis, Boolean fillCache, StackCrawlMark& stackMark)
at System.Activator.CreateInstance(Type type, Boolean nonPublic)
at System.Activator.CreateInstance(Type type)
at Microsoft.EntityFrameworkCore.Design.Internal.DbContextOperations.<>c__DisplayClass12_3.b__13()
at Microsoft.EntityFrameworkCore.Design.Internal.DbContextOperations.CreateContext(Func1 factory) at Microsoft.EntityFrameworkCore.Design.Internal.DbContextOperations.CreateContext(String contextType) at Microsoft.EntityFrameworkCore.Design.Internal.MigrationsOperations.AddMigration(String name, String outputDir, String contextType) at Microsoft.EntityFrameworkCore.Design.OperationExecutor.AddMigrationImpl(String name, String outputDir, String contextType) at Microsoft.EntityFrameworkCore.Design.OperationExecutor.AddMigration.<>c__DisplayClass0_1.<.ctor>b__0() at Microsoft.EntityFrameworkCore.Design.OperationExecutor.OperationBase.<>c__DisplayClass3_01.b__0()
at Microsoft.EntityFrameworkCore.Design.OperationExecutor.OperationBase.Execute(Action action)
Exception has been thrown by the target of an invocation.

the page with a single video info is not responsive

When we click a single video in listview and page opens with its thumbnail and title with option to play and download, The title on that page isnt responsive, so when we resize the screen, half of the title gets disappeared.

Move NowPlaying over to MVVM

BLOCKED: requires datamodel updates

Need to change the theme

am asking how I can change the theme from blue to another color like green or black

This repo is missing important files

There are important files that Microsoft projects should all have that are not present in this repository. A pull request has been opened to add the missing file(s). When the pr is merged this issue will be closed automatically.

Microsoft teams can learn more about this effort and share feedback within the open source guidance available internally.

Merge this pull request

Duplicate entries may appear in search results

This is due to the fact that they are listed in multiple RSS feeds and the datamodel doesn't currently take this into account

The now playing page has issues when resizing the page down to a small size aka this page isn't fully responsive

Add MTC controls to the hover menu on taskbar

Microsoft HoloLens

At Build 2017 there was a demo showing the app using a MR device. However I can't get it working since the latest available release build for the HoloLens is 14393 while this project needs 16299.

when will we have the code

its more than a month now but still no code is in this repo at all, Please can I know when can we expect the code here?

pip mode turns full white while loading

When video is still loading before playing and I turn on the pip mode, whole window goes white and turns back to normal when I come back in normal view mode