FX

With the full-functional player created, the next enhancement to it might be overlays to display additional information overlying the media content. Such graphical panels typically slide in and slide out on the mouse click and are hidden the rest of the time.

The following diagram shows the structure of the media player application enhanced by the graphical overlays. In this example, overlaying panels are implemented as CustomNode objects and are added to the scene's content.

Figure 1: Structure of a Media Player with Graphics Overlays

Add the Play List Pane

Play lists are a popular yet practical feature in many media players. In this application, the play list is implemented in a form of an overlaying panel with UI controls. The play list, named sidePanel, is shown in the following figure.

Figure 2: The Play List Pane

Refer to the RightSideController.fx file for implementation details.

The bar, button and pointer elements construct the barPanel element to slide in and slide out the play list pane. On application startup the sidePanel is hidden. When the button element of the barPanel is clicked, the showSlidePanel function is invoked. This function rotates the triangle pointer at 180 degrees and translates the play list pane.

//showSlidePanel of barPanel
RotateTransition {
                node: pointer
                duration: 500ms
                fromAngle: 0
                toAngle: 180
}.play();

...
//showSlidePanel of sidePanel
opacity = 0.7;
TranslateTransition {
                duration: 500ms
                node: this
                fromX: controller.width
                toX: 0
}.play();

When the play list pane is enabled, a mouse click causes sliding in of the panel: The pointer is rotated at another 180 degrees to its initial state and the play list panel is hidden.

//showSlidePanel of barPanel
RotateTransition {
                node: pointer
                duration: 500ms
                fromAngle: 180
                toAngle: 0
                action: function() {
                    bar.opacity = 0;
                    button.opacity = 0;
                    pointer.opacity = 0;
                }
}.play();

...
//showSlidePanel of sidePanel
TranslateTransition {
                duration: 500ms
                node: this
                fromX: 0
                toX: controller.width

                action: function() {
                    opacity = 0;
                }
}.play();

Add the Reflection Pane

You can apply various transformation available through the JavaFX API to the MediaView instances. This application provides the capability of reflecting media content. Create another overlay panel as shown in the following figure.

Figure 3: The Reflection Pane

The reflection pane contains three UI elements: frame, reflection, and reflectFraction.

The following code fragment shows a binding dependency between the slider's value and the reflection fraction. Refer to the LeftSideController.fx file for implementation details.

var reflection:SwingCheckBox = SwingCheckBox {
        var reflectionEffect = Reflection 
                 {fraction: bind reflectFraction.value/10.0 topOffset: 5}
        translateX: 20
        translateY: sy
        text: "Reflection"
        action: function() {
            if(reflection.selected) {
                controller.mediaView.effect = reflectionEffect;
            } else {
                controller.mediaView.effect = null;
            }
        }
    }

This panel slides in and slides out, similar to the play list panel.

Add a Multiple-pane Panel to Display and Control Media Playback Information

The media option pane is enabled when the optionButton is clicked in the bottom control panel. Refer to the ArrowInCircleIcon.fx file for more details about the optionButton implementation.

Figure 4: The Media Option Pane

When the optionButton is clicked, the show function is invoked for the optionPane. The show function sets the visible variable of the optionPane object to true and runs the slideIn function. The second mouse click sets the visible variable of the optionPane object to false and runs the slideOut function. Both slideIn and slideOut are the Timeline implementations that alter the height of the media option pane, thus producing the sliding effect. Find more details in the MediaOptionPane.fx file.

public function show(selected:Boolean) {
        if(selected) {
            length = 0;
            if(not this.visible) this.visible = true;
            slideIn.playFromStart();
            PauseTransition {
                duration: 550ms
                action: function() {
                    visibleFlag = true;
                }
            }.play();
        } else {
            visibleFlag = false;
            slideOut.playFromStart();
            PauseTransition {
                duration: 550ms
                action: function() {
                    if(this.visible) this.visible = false;
                    length = 0;
                }
            }.play();
        }
}

Each component of the multiple-pane panel is a CustomNode based object with UI elements to control playback and display media data.

	The AudioPane object. Provides three sliders to control volume, balance, and the fader values. The Mute button duplicates the identical function of the bottom control panel. More details are available in the MediaOptionPane.fx file.
	The AspectRatioOption object. Provides five SwingCheckBox elements to proportion the MediaView panel. More details are available in the AspectRatioOption.fx file.
	The MediaPane object. Displays media data such as media source, video resolution, duration, the number of metadata, and the number of tracks by retrieving variables of the media object. More details are available in the MediaOptionPane.fx file.
	The MetadataPane object. More details are available in the MediaOptionPane.fx file.
	The PlayOption object. Provides UI elements to control the media playback. The Play/Pause button duplicates the identical button in the bottom control panel. Displays the proportion of the elapsed time to the remaining time, similar to the progress bar status. More details are available in the PlayOption.fx
	The TracksPane object. Provides the number of tracks for the media file. More details are available in the MediaOptionPane.fx file.

Use the animated transition functionality available in in the javafx.animation.transition package to ensure smooth transition of the panes. The following code fragment shows the sequential transition for the leftButton element.

SequentialTransition {
                content: [
                    FadeTransition {
                        node: optionPanes[currentPane]
                        duration: 300ms
                        fromValue: 1.0
                        toValue: 0.0
                    },
                    PauseTransition {
                        duration: 10ms
                        action: function() {
                            if(currentPane-1 < 0) {
                                optionPanes[sizeof optionPanes-1].opacity = 0;
                                currentPane = (sizeof optionPanes-1);
                            } else {
                                optionPanes[currentPane-1].opacity = 0;
                                currentPane--;
                            }
                        }
                    },
                    FadeTransition { // bug???
                        node: bind optionPanes[if(currentPane-1 < 0) sizeof 
                               optionPanes-1 else currentPane-1]
                        duration: 300ms
                        fromValue: 0.0
                        toValue: 1.0
                    },
                ]
}.play();

Press the Launch Application button to run this application by using Java Web Start software. Press the Downlad NetBeans Project button to find the complete code of the example.

In order to play the media content used in this application, ensure that the required codecs are installed in your system.