How it works...
The custom class presented in this recipe implements a CustomNode which encapsulates
the icons and logic for media playback control functions including reverse, play, fast-forward,
volume up, and volume down. The class also provides visual feedback on the length and
current progression of the video playback. Let's take a closer look at the custom class:
F Textual time progression —before we look at the control functions, we will look at how
the component reports time progression for the playback. The first item involved in time
progression feedback is the variable timestat (to which a Text object that displays
progression information is bound). timestat is itself bound to several expressions
that return values containing current time and total time of playback, using values from
mediaPlayer.currentTime and mediaPlayer.media.duration . Since time
is reported as a Duration type, we have to pluck out each time subdivision (hour,
minute, seconds) individually using the mod operator. Then, each unit is formatted to
be printed as zero-padded values as shown in the snippet below:
var timestat = bind
mod 12 as Integer}:"
mod 60 as Integer}:"
F Visual time progression —to provide visual feedback of the progression of the playback,
the media controller uses a custom progress bar composed of a Circle that slides
along a Line instance. The line represents the total duration of the video, and the
location of the circle (along the line) represents the current position of the playhead.
To achieve this, the Circle.centerX property is bound to an expression that returns
a ratio of mediaPlayer.currentTime/mediaPlayer.media.duration . This
ratio is used to normalize the progress bar by multiplying it to the length of the line to
get the current position of the circle, as shown in the snippet below:
if(mediaPlayer.media.duration > 0ms)