.NET (WPF) Development: Video Tools

Libraries used

We used the following command line libraries for our backend:

• Youtube-dl for downloading URLs as video and/or audio files
• FFmpeg for video playback and editing capabilities

Our project would map input arguments and execution to user-friendly graphical interfaces. For example, where a user might input to Youtube-dl:

youtube-dl -f [Format Code] [URL] -o \[File Name]\

Downloader

Initial Data Retrieval

When the user inputs a valid URL, the downloader retrieves details such as available dimensions, file extensions, and a preview thumbnail.

Normally, the information is displayed as a string or block of text in the command line interface. I wrote a parser to convert that information into selectable items on the Video Options and Audio Qualities views. Fortunately, I could at least add an event handler to the framework's Process class, which allowed me to get the information line by line instead of having it all spit out at once.

I put each valid video option into a class VideoOutput with properties such as FormatCode, Extension, and Resolution. Then it was straightforward to access the selected item's data or map data to the Video Quality columns.

Audio Only

Youtube-dl offered audio options along with the other video options, but those files had nonstandard formats and weren't always playable. I changed the acquisition to an audio rip, where Youtube-dl would download the video and convert its audio to a chosen option: mp3, ogg, wav, etc.

Download!

The application generates a query behind the scenes based on the user's input. From there, it's a matter of choosing a file name and hitting Save.

QA

As the user testing date drew near, I identified and fixed several bugs to clean up the functionality of our project. Some examples:

• Problem: There was significant audio stutter in the Slicer playback.
  The playback seeker widget had a rapid, circular update cycle where playback was affecting its position which affected playback. I set the event to the much less frequent Thumb.DragCompleted.
• Problem: The Cropper selection tool would fold on itself and disappear at smaller than 50 pixels.
  There was a MinWidth/Height constraint on the XAML which caused the widget to misbehave at that size. After removing that and ferrying the grid handles functionality into reusable class methods, I programmatically set a 10 pixel minimum height/width to combat the disappearing.
• Problem: The Cropper would crash when the tool touched the edges.
  This was due to negative geometry on the viewport mask, so I set constraints to prevent it.

Wireframes

Early on, I made wireframes: low fidelity sketches to quickly communicate layout.

I also had a foray into a potential colour scheme. As you can probably tell, we chose not to go with it.

Alex argued for a native OS look, which would:

• Mesh better with the usage of the Windows file system
• Display any contrast options that the user might have set
• Be more familiar-looking to Windows users who were new to video editing tools

Challenges

• Time
• The day before it was due, Alex said to me, "Hey, I'm going to ruin your squeakily clean encapsulated code." (Well, my code wasn't that clean or that squeaky, but it was a kind comment.) I said, "No worries." Kludge ahoy! Agile is hysterical. Here's the commit that stares you in the face when you look at the final release build: Dirty fix for parse timecode update when clicking away. I wrote it, so I bask in its filth.
• The native OS look meant leaving most of the XAML to its defaults. With my focus directed on making our tools run smoothly, it was hard to make the interface look appealing.