If you aren’t aware of the Silverlight Media Framework, you should take a look.  This is a media playback framework for Silverlight that is based off of a lot of best practices from such implementations as the NBC Olympics, Sunday Night Football and others. 

It has a lot of features built-in to the framework such as:

• Logging
• DVR-style features
• Fast forward
• Slow motion
• Media Markers
• etc

Basic stuff plus some great included features and extensibility points.

Missing Features – Part 1

What I didn’t like in v1 was two things: it was only for Smooth Streaming and it was a framework versus just a XAP I could use in a web application.  After some successful complaining :-) and an opportunity to get into a milestone build, the progressive download feature was added which enabled non-Smooth Streaming people to use it.

I’m wanting to standardize on what our teams are providing for best practices, so I’ve started using this player. 

NOTE: Does SL Video Player still live?  Yes, and it has VERY basic features.  It is super small and simple, but may not be for everyone’s liking.

So I started to solve the other problem, primarily for my use, of having essentially a stand-alone player using this framework. 

Extending the Silverlight Media Framework

You see, the SMF itself is essentially a set of controls…but not an ‘app’ itself that you can just consume the binary.  What I did was basically create a new Silverlight application myself with one simple element: Player.  This way I could implement what I needed for my use.  The first thing I wanted was to have a simple XAP that I’d be able to load parameters in…very much like we did for SL Video Player on codeplex.  To make essentially the player have a flexible use model.  I could host the player anywhere and just feed it media to play.

I used the InitParams feature of the Silverlight plugin model to enable me to pass in parameters to the application.  I wanted a simple parameter ‘media’ that basically was a URI to my media.  For most of my needs this would be a progressive download situation.  I added the simple feature using InitParams, and passed that URI to the MediaElement of the player framework.  All was well.

Missing Features – Part 2

I then realized two features that I love about the Expression Encoder templates: AutoLoad and ThumbnailImage.  These two features are pretty much essential for a bandwidth saving playback experience.  AutoLoad basically disables the media from starting to be fetched until the user clicks play.  The ThumbnailImage enables a static screenshot view to be displayed until a media frame could be captured.  These two features work well together.

The AutoLoad (cueing) was critical for me.  I didn’t want media to start downloading until the user said so.  This saves me bandwidth as well as doesn’t annoy the user if there is a ton of media on one page (which might not be a good UX to begin with, but I digress).

I saw an event PlayControlClicked in the framework that I felt I could tap into.  I figured I’d just wire up to that event and set the MediaElement.Source when the user clicked that.  FAIL.  The problem was that the play control in the current framework isn’t even enabled until the media source is set.  This defeated my whole purpose.

After some spelunking in the source – did I mention that SMF is Open Source? – I found the culprit functions.  Disabling them made everything work but it just didn’t feel right.  Luckily one of the developers of the framework, Kevin from Vertigo, and I start chatting (virtually of course, after all nobody ‘talks’ anymore for real right?).  I told him of my findings and hacks and he educated me that I didn’t even need to mess with the source, but could accomplish my needs by subclassing the Player.  Kevin sent me some sample code for what he called a DeferredSource, which is what I wanted.

After some quick tests, I realized that I should keep all scenarios enabled:

• Deferred loading (AutoLoad=false)
• Normal progressive playback (AutoLoad=true)
• Windows Streaming
• IIS Smooth Streaming

I modified Kevin’s source a bit and got everything working.  Now I have 3 parameters:

• media – the URI of the stream, IIS Smooth Streaming manifest, or media file for progressive download
• autoload – used really only for progressive download, would enable/disable cueing of the video upon load
• ss – to specify if the URI indicated in ‘media’ is an IIS Smooth Streaming implementation

With this done I can now do something as simple as:

   1: <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="320" height="240">

   2:   <param name="source" value="/ClientBin/SmfSimplePlayer.xap"/>

   3:   <param name="background" value="white" />

   4:   <param name="minRuntimeVersion" value="3.0.40818.0" />

   5:   <param name="initParams" value="media=URL_TO_YOUR_VIDEO" />

   6:   <param name="autoUpgrade" value="true" />

   7:   <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0" style="text-decoration:none">

   8:           <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>

   9:   </a>

  10: </object>

Boom, done.  Now I had a player based on SMF that served my needs.

Wishlist

I still didn’t implement the ThumbnailImage in my player.  This is a wishlist item for me…it isn’t critical but nice for when AutoLoad=false so it isn’t just a blank screen!  Additionally, the one thing I have to admit I’m not wild about is the overall size.  The compiled XAP is 230K.  In contrast my SL Video Player is 16K.  Why the big size?  Well, the SMF today is intended for someone who really wants to implement all the features it provides, including Smooth Streaming.  If you aren’t using Smooth Streaming, then you still have those dependencies with you…not ideal.

In talking with the dev team and framework team, I know their plans for updated milestones of SMF and am pleased with the roadmap.  They have taken a lot of feedback of how mainstream uses might be implemented and will make it continue to be awesome with a bit more flexibility of taking what you need!

Summary

If you need a solid, basic player take a look at SMF.  There are other players out there of course, but this one is based on proven best practices in the toughest situations.  And it is only getting better.  There is a lot of room for improvement for the ‘YouTube’ style simplicity of playback for medium-low quality video playback for your personal sites showing home movies, etc. – and I know that scenario will improve, because I’m pushing for it as well.

If you want to use what I’ve done here, feel free – here are the files:

• Compiled XAP (Updated 29-APR-2010 for SL4 for full-screen pinning)
• Source code for my modified stand-alone player – note that you will need the SMF and the dependencies for that before this will compile.  This source contains only my modifications

There are also a bunch of videos for working with the Silverlight Media Framework beyond the basics.  Be sure to check them out!

Hope this helps!

Yesterday Microsoft announced that Visual Studio 2010 Release Candidate was available for MSDN subscribers and would be generally available on 10 February 2010 for the public.  This release represents a significant improvement in the overall Visual Studio product and a lot was based on beta tester feedback.

Of course, as a Silverlight developer you will be wondering: Can I still develop Silverlight 4 applications with the VS2010 RC?

Here’s the simplest form of a FAQ I could provide for you:

Q: What was released this week for Visual Studio 2010?
A: The Visual Studio team released Visual Studio 2010 and .NET Framework 4 Release Candidate builds.

Q: When can I download them?
A: If you are an MSDN subscriber, you can today (8 FEB).  Generally availability will be 10 FEB.

Q: Can I developer Silverlight applications?
A: Yes, you can develop Silverlight 3 applications with the release candidate of Visual Studio 2010.

Q: What about Silverlight 4 applications?
Q: Is there an updated Silverlight 4 Tools installer?
Q: Is there an updated WCF RIA Services build for VS2010?
Q: Is there an updated Silverlight Toolkit build for VS2010/Silverlight 4?
Q: Is there an updated Blend for .NET 4 Preview build?
A: At this time, VS2010 RC does not support developing Silverlight 4 applications.  This means that at this time there is no update for Silverlight 4 runtime/tools or the WCF RIA Services or other companion frameworks (toolkit controls, etc.).  This will not be enabled until the next public build of Silverlight 4 and companion frameworks.

Q: If I want to develop Silverlight 4 applications, what should I do?
A: You should stick on the public Beta 2 build of Visual Studio for now with the companion tools/framework builds.

Q: You mentioned ‘next public build’ so when will that be for Silverlight 4?
A: We haven’t released a timeframe on that availability right now. :-(

Q: Can I run Visual Studio 2010 Beta 2 and Visual Studio RC side-by-side?
A: No.

Q: Are there hacks to make Silverlight 4 tools work with the VS2010 RC? 
A: I’m sure someone might cobble something together, but frankly there are issues between the two and the combination isn’t supported.

Q: What is wrong with you people?  Why don’t you release things at the same time?!
A: If everyone could intern for a week in the developer division at Microsoft you’d see the challenges faced with various products innovating on different time schedules and resources and teams managing as best they can.  Frankly, Visual Studio is on a path.  Silverlight 4 as a not-yet-released-product has to wait for VS milestones to ensure SL tools work well with our builds.  This same holds true for the companion frameworks and Blend.  It is not a fun place to be as we are all moving targets for each other with varying dependencies.  The Silverlight and RIA Services teams are working hard to finish a product.  That is our goal.  We want to make sure not to distract resources from adding support to interim builds that we simply can’t handle right now in order to deliver a quality FINAL product for you.

Hopefully this helps, even if it isn’t what you wanted to hear for Silverlight development at this time.

Here’s how it started…

Lisa (my wife) [shouting from office into the kitchen]: Tim, what’s this Amazon charge for $193?
Me [thinking what I may have purchased and not remembered]: Um, don’t know…let me look.

I then logged into my Amazon account to see what order I may have forgotten.  Surely I didn’t order $200 worth of MP3…that’s ridiculous.  Sure enough nothing was there.  Immediately I’m thinking fraud.  I start freaking out, getting mad, figuring out my revenge scheme on the scammer, etc.

Then it hit me: Amazon Web Services account.

The Culprit

Sure enough I logged in and my January 2010 billing account was $193 and change.  Yikes.  Well, I could let the (what has been averaging) $30 or so charge slide under the family CFO radar for a while…but this $193 charge…the chief auditor herself caught that one.

So I panicked.  I needed to figure out where/what the spike was.  I logged into the Amazon Web Services management console (I only use the S3/CloudFront storage in their services right no) to see what was going on.  I see ‘Usage Reports’ and click.  I’m met with essentially a bunch of useless data really.  No offense to Amazon, but really the usage reports weren’t really helpful at all.  First, they gave me a Resource ID which I thought would represent the URI I was looking for.  Nope, Resource ID == Bucket.  And they didn’t even put the bucket name in the report!

For some perspective, here’s essentially what I’m used to – here’s my December 2009 billing statement details:

Anyhow, after some hunting it was obvious that I wasn’t going to figure out what bucket objects/unique URIs were causing my spike.  This was primarily because I didn’t have logging turned on at all on my buckets.  I had in the past but really didn’t think I needed it so I turned it off.

I was wrong – go now and enable logging.

While I was searching for a solution to understand my traffic, I was curious for where my traffic was.  Like I said, I’d been averaging (actually *peaking*) at about a $30 charge for the S3 hosting.

NOTE: I use S3 for all my image/screenshot/sample code file hosting.  I’ve invested in S3 for a long time and built my blogging workflow around it with building tools like S3 Browser for Windows Live Writer.

What was interesting was my most usage of my CloudFront data was coming from Hong Kong.  Compare to above the December 2009 billing to this January 2010 billing:

Yeah, that was my reaction too.  I went from roughly 40GB of transfer bandwidth to over 960GB in one month.  I suspected I knew what happened, but needed to confirm before I changed things. 

Implementing Logging for Statistics

The problem was that I didn’t have logging enabled and I was pretty much stuck.  I needed to get some data from the logs before being for sure.  I quickly found S3Stat and it appears to be the de-facto reporting for Amazon S3 log files.  I signed up for the free trial and generated a new access key to give them.

NOTE: They have a ‘manual’ option which means a lot more work.  I simply generated a NEW S3 access key for this specific purpose.  That way I didn’t have to give them my golden key I’ve been using in other places and can shut this off at any time without issue to my other workflows.

24 hours later, I had some reports.  Wicked cool reports.  Here’s a list of what I’m currently looking at:

• Total hits, total files, total kbytes
• Hits/files per hour/day
• Hourly stats
• Top 30 URIs
• Top URIs by kbytes used
• Top referrers (find out who’s using your bits without you knowing)
• User agents

Here’s a quick snapshot of one:

Wow…honestly…THIS is what I was expecting when I see “usage” data reports.  S3Stat is awesome and you should use that now.  Yes, I’m buttering up to them…but they have a great tool here for $5/month if you are a heavy Amazon S3/CloudFront user.  Amazon frankly should just buy them and integrate this into their management console.  You can see other examples of their report outputs on their site at http://www.s3stat.com. 

What I also found out is that the tool I use for my desktop usage of S3/CloudFront (outside of my blogger workfow and S3Browser) has S3Stat integration built in!  I use CloudBerry’s S3 Explorer Pro for managing my S3 content.  It’s awesome and you should look at it.  When I look at the logging features in CloudBerry I see this:

And after enabling the logging, within CloudBerry I can view the log data within the tool:

Summary

Wow, this is incredibly helpful and insightful data.  I now know who/how/when my cloud storage data is being used in various ways I can see the data.  S3Stat immediately showed me incredible value within less than 24 hours of enabling it.  I know can confirm the culprit of the burst of usage and plan accordingly.

Now, to be clear I’m not complaining about the cost of cloud storage.  That has been clear to me from the beginning.  Nothing is hidden and I’m not an idiot for not understanding it.  What I did not account for was the popularity of some files…and then the ones that just happened to be the largest.  I could not have personally thought I’d see a 920GB spike in one month of usage…but now I know…and have to alter some plans. 

Hopefully this is helpful for some who are just exploring cloud storage solutions/services.  Make sure you have instrumentation and logging capabilities turned on so you can identify and tune your situations.  For me, S3Stat and CloudBerry are winners for my personal usages.  If you are an Amazon S3 customer, I recommend looking at S3Stat and turning on logging immediately!

A developer asked me this question and while a simple answer, I thought it would be a good quick tip to share for those who may be in similar situations.

The scenario is the classic master-details scenario where perhaps you have a grid of data and when a user selects the row, the details are enabled in a form (or perhaps the child of the element) for editing.  Maybe something like this:

See you can see the row clearly selected (note: this is using the default DataGrid styling).  But watch what happens when you go to the form to edit:

Notice the focus now on the TextBox in the form, and the row, while still ‘selected’ is much more subtle in which row is selected.  The uninformed eye might miss which one.  For some scenarios this might be important.  Some might even think the row isn’t selected anymore since the visual state changed.

In fact it still *IS* selected and the only thing that changed *IS* the visual state…literally.  Since Silverlight has the concept of the VisualStateManager, that is what we are seeing in action here.  So you want to change that to make your desired UI as expected…having the row retain it’s selected look even when the user is editing.  This is simple.

Using Expression Blend, you can select the DataGrid element and then choose Edit Additional Templates to find the RowStyle template to edit a copy of:

Once you have this, click the States tab in the tool and you’ll see the various visual states that a DataGridRow can have.  Notice the NormalSelected and UnfocusedSelected states:

You would modify the Fill.Color property of the UnfocusedSelected state to accomplish the desired change.  In this example, I just used the same color as the default grid for illustration.  The end result is what the user may be expecting more.  Notice the focus is on the TextBox in the form still, but the row still has a prominent selected color view:

A simple edit, but a helpful UI change to give your users more indication of what they are doing.  Of course I’m just using the default styles of the DataGrid here, but you could use your own styles as well.  Hope this helps!

Here is my style XAML as I completed the task above: StaySelectedStyle.txt

it’s that time again…beginning of a new month!  That means that Smashing Magazine has released their monthly wallpaper pictures again.

As you could expect, February entries are full of a lot of Valentine type stuff.  Here are your February Windows 7 Theme Packs for the wallpapers though…including all images (note: some ‘without calendar’ images are not provided by the authors) unfiltered.

• Smashing Magazine February 2010 Windows 7 Theme (calendar) [58.2 MB]
• Smashing Magazine February 2010 Windows 7 Theme (without calendar) [51.8 MB]
• Smashing Magazine Desktop Wallpaper: February 2010 (original post)

UPDATE PLEASE READ (4-Feb):

There is an issue with the .themepack file for some reason.  Although I’m using the prescribed mechanism for creating these it is not functioning as easily as the January one.  I’ve got some folks on the Windows team looking into it, but no resolution yet.  In the interim, you can extract the .themepack file using 7-Zip (a free and great utility) and then double-click on the .theme file where you extracted it.  This should trigger the installation of the theme.

For details on these and to see past ones, visit the Smashing Magazine Windows 7 Theme information for the specifications I used for the theme pack as well as previous themes.  Want to participate and submit yours?  Join in!