Java Reference
In-Depth Information
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
"{%02d mediaPlayer.currentTime.toHours()
mod 12 as Integer}:"
"{%02d mediaPlayer.currentTime.toMinutes()
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:
Circle
{
...
centerX:bind
if(mediaPlayer.media.duration > 0ms)
(mediaPlayer.currentTime /
mediaPlayer.media.duration)*100
else 5
}
