qnx.fuse.ui.media.MediaControl

MediaControl

Properties | Methods | Events | Examples


Packageqnx.fuse.ui.media
Classpublic class MediaControl
InheritanceMediaControl Inheritance UIComponent Inheritance flash.display.MovieClip

The MediaControl class provides a set of controls that can be used to control media, such as video and audio.

The control itself does not control the media. Instead, it broadcasts events as the user interacts with the controls. You can customize the control by setting options to hide or show interface features.

The following image shows a MediaControl instance with all UI options enabled:



Class information:
BlackBerry 10 Version:   10.0.0

View the examples

See also

MediaControlOption
MediaControlProperty
MediaControlState



Public Properties

 PropertyDefined By
 InheritedcontextActions : Vector.<ActionSet>
Gets or Sets a Vector of ActionSet objects.
UIComponent
 InheritedcontextMultiSelectText : String
Gets or Sets a String to be displayed when showing the Multi Select Context Menu.
UIComponent
 InheritedcurrentTheme : String
[read-only] Returns the current theme this component is styled with.
UIComponent
 InheritedexplicitHeight : Number
[read-only] Returns the explicit height (actual height, in pixels) of the UI component.
UIComponent
 InheritedexplicitWidth : Number
[read-only] Returns the explicit width (actual width, in pixels) of the UI component.
UIComponent
 Inheritedid : String
The id is a name for the component that can be used in CSS using the # selector.
UIComponent
 InheritedincludeInLayout : Boolean
Specifies whether or not the component should be included in its parent container's layout.
UIComponent
 InheritedlayoutData : Object
Gets or sets the layoutData.
UIComponent
 Inheritedlocale : String
Gets or sets the current locale of the component.
UIComponent
 InheritedminHeight : Number
Gets or sets the minimum preferred height of the control.
UIComponent
 InheritedminWidth : Number
Gets or sets the minimum preferred width of the control.
UIComponent
 InheritedstyleChildren : Boolean
Allows you to style the children of this component with CSS.
UIComponent

Protected Properties

 PropertyDefined By
 InheritedaccessibilityImplimentationClass : Class
UIComponent
  cssID : String
[override] [read-only] Returns the CSS ID of the component.
MediaControl
 InheritedexplicitLocale : Boolean
Set to true when the locale property has been set externally.
UIComponent
 InheritedinternalID : String
The Component's Id used for styling.
UIComponent
 InheritedlongPressEnabled : Boolean
Specifies whether the UIComponent can detect a long press.
UIComponent

Public Methods

 MethodDefined By
  
Creates a MediaControl instance.
MediaControl
 Inherited
Cancels a long press from occuring on the component.
UIComponent
 Inherited
childChanged(resizedChild:DisplayObject = null):Boolean
Notifies the UIComponent that one or more of its children has changed in a manner that may affect this object's layout.
UIComponent
 Inherited
destroy():void
Call this method when you want to have your object collected by the garbage collector.
UIComponent
 Inherited
Returns the CSS selector for the object, composing it from its position in the display hierarchy and an optional ID selector.
UIComponent
  
getOption(option:String):Boolean
Returns a Boolean indicating whether or not the option is shown.
MediaControl
  
getOptionEnabled(option:String):Boolean
Returns a Boolean indicating whether or not the option is enabled.
MediaControl
  
getProperty(prop:String):Object
Gets the current value of the specified property.
MediaControl
 Inherited
Returns the size options for the given control.
UIComponent
  
getState():String
Gets the state of the control.
MediaControl
 Inherited
Calling this method results in a call to the components validateDisplayList() method before the display list is rendered.
UIComponent
 Inherited
Calling this method results in a call to the components validateProperties() method before the display list is rendered.
UIComponent
 Inherited
measure(availableWidth:Number, availableHeight:Number):LayoutMeasurement
This method calls doMeasure() in order to calculate the preferred size of the control.
UIComponent
 Inherited
setActualSize(w:Number, h:Number):void
Sets the width and height of the object without setting the explicitWidth and explicitHeight.
UIComponent
 Inherited
setLayoutBounds(bounds:Rectangle):void
Sets the receiver's size and location to the rectangular area specified by the arguments.
UIComponent
  
setOption(option:String, value:Boolean):void
Allows you to hide and show features of the MediaControl class.
MediaControl
  
setOptionEnabled(option:String, value:Boolean):void
Allows you to enable and disable UI control items of the MediaControl class.
MediaControl
 Inherited
setPosition(x:Number, y:Number):void
Sets the x and y position of the component.
UIComponent
  
setProperty(prop:String, value:Object):void
Sets a property to the specified value in the MediaControl component In the following listing, the volume property is set to 80 and the fullscreen mode property is set to true: controls.setProperty( MediaControlProperty.VOLUME, 80 ); controls.setProperty( MediaControlProperty.FULLSCREEN, true );
MediaControl
  
setState(state:String):void
Sets the state of the control.
MediaControl
 Inherited
updateDefaultLocale(updateChildren:Boolean = true):void
Updates the locale property to be the same as the locale of the device.
UIComponent
 Inherited
Lets a component that contains text know that it should update its font formats as the font settings have changed.
UIComponent
 Inherited
Validates the display list of the component by calling the updateDisplayList().
UIComponent
 Inherited
Validates the component immediately by calling validateProperties(), validateSizes(), and validateDisplayList() if necessary.
UIComponent
 Inherited
Validates the properties of the component by calling the commitProperties() method.
UIComponent

Protected Methods

 MethodDefined By
 Inherited
allowShowContextMenu(target:IEventDispatcher):Boolean
When the user presses on the component this method is called with the object that dispatched the event.
UIComponent
 Inherited
Process properties of the component.
UIComponent
 Inherited
Process the state of the component.
UIComponent
 Inherited
Style the component after the style has changed.
UIComponent
 Inherited
doMeasure(availableWidth:Number, availableHeight:Number):LayoutMeasurement
Performs a measurement on the control, and returns a LayoutMeasurement instance containing the available width and height within the layout.
UIComponent
 Inherited
excemptFromCSSStyling(target:*, property:String = null):void
Exempts a property on an object from being styled by CSS.
UIComponent
 Inherited
flushCache():void
Invoked as part of parentLayoutChanged.
UIComponent
 Inherited
getStyleApplier():Function
A style applier is a method that gets called every time a property from the stylesheet should be applied to the component.
UIComponent
 Inherited
onAdded():void
Called when the instance is added to the stage.
UIComponent
 Inherited
Is called when a user is no longer long pressing on the component.
UIComponent
 Inherited
Is called when a user long presses on the component.
UIComponent
 Inherited
onRemoved():void
Called when the instance is removed from the stage.
UIComponent
 Inherited
Invalidates the parent's size and display list if includeInLayout property is set to true.
UIComponent
 Inherited
Calling this function will refresh the ContextMenu with whatever actions were set by contextActions.
UIComponent
 Inherited
Shows the context menu if there are contextActions associated with the control.
UIComponent
 Inherited
styleState():void
Style the component after state has changed.
UIComponent
 Inherited
updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
Sets the size and position of the children of the component.
UIComponent

Events

 Event Summary Defined By
 InheritedDispatched when an action in the Context Menu is selected.UIComponent
 InheritedDispatched when the Context Menu has closed to the DISMISSED state.UIComponent
 InheritedDispatched when the ContextMenu is closing to the DISMISSED state.UIComponent
 InheritedDispatched when the Context Menu has opened to the PEEK or EXPANDED state.UIComponent
 InheritedDispatched when the ContextMenu is opening from the DISMISSED state.UIComponent
 InheritedDispatched when the CrossCut multiselect has been canceled.UIComponent
   Dispatched when certain elements in the control are touched by the user.MediaControl
   Dispatched when a property has changed through user interaction.MediaControl
   Dispatched when the state of the media must change based on user interaction with the controls.MediaControl

Property Detail

cssID


cssID:String  [read-only]
[override]

Returns the CSS ID of the component. The CSS ID is used for identifying the type of component in CSS.

The default value is MediaControl.


Implementation

protected function get cssID():String

Constructor Detail

MediaControl()


public function MediaControl()

Creates a MediaControl instance.

Method Detail

getOption()


public function getOption(option:String):Boolean

Returns a Boolean indicating whether or not the option is shown.

Parameters

option:String — The option to retrieve.

Returns

Boolean — Returns true if the option is shown, otherwise false.

See also

setOption()
MediaControlOption

getOptionEnabled()


public function getOptionEnabled(option:String):Boolean

Returns a Boolean indicating whether or not the option is enabled.

Parameters

option:String — The option to retrieve.

Returns

Boolean — Returns true if the option is enabled, otherwise false.

See also

setOptionEnabled()
MediaControlOption

getProperty()


public function getProperty(prop:String):Object

Gets the current value of the specified property. The expected return value types are:

PropertyReturn value
MediaControlProperty.DURATION int
MediaControlProperty.POSITION int
MediaControlProperty.FULLSCREEN Boolean
MediaControlProperty.VOLUME Number
MediaControlProperty.STATE String
MediaControlProperty.AUDIO_BOOST Boolean

Parameters

prop:String — The property for which to return the current value.

Returns

Object — The MediaControl property value. Depending on the MediaControlProperty specified the result type will vary.

See also

setProperty()
MediaControlProperty

getState()


public function getState():String

Gets the state of the control.

One of the following values will be returned:

  • MediaControlState.PLAY
  • MediaControlState.PAUSE
  • MediaControlState.STOP
  • MediaControlState.SEEK_START
  • MediaControlState.SEEK_END

Returns

String — The state of the control.

See also

MediaControlState
setState()

setOption()


public function setOption(option:String, value:Boolean):void

Allows you to hide and show features of the MediaControl class.

By default all items are hidden.

In the following listing, the play, next, and previous buttons are added to the control:

controls.setOption( MediaControlOption.PLAY_PAUSE, true );
controls.setOption( MediaControlOption.NEXT, true );
controls.setOption( MediaControlOption.PREVIOUS, true );
         

Valid values for the option parameter are:

  • MediaControlOption.VOLUME
  • MediaControlOption.FULLSCREEN
  • MediaControlOption.NEXT
  • MediaControlOption.PREVIOUS
  • MediaControlOption.PLAY_PAUSE
  • MediaControlOption.SEEKBAR
  • MediaControlOption.STOP
  • MediaControlOption.DURATION
  • MediaControlOption.POSITION
  • MediaControlOption.BACKGROUND

The MediaControlOption.SEEKBAR option will be disabled if MediaControlProperty.DURATION property has not been set using the setProperty method.

Parameters

option:String — The option to show or hide.
value:Boolean — When set to true the option is shown. When set to false the option is hidden.

See also

MediaControlOption
getOption()

setOptionEnabled()


public function setOptionEnabled(option:String, value:Boolean):void

Allows you to enable and disable UI control items of the MediaControl class.

By default all items are enabled.

Valid values for the option parameter are:

  • MediaControlOption.VOLUME
  • MediaControlOption.FULLSCREEN
  • MediaControlOption.NEXT
  • MediaControlOption.PREVIOUS
  • MediaControlOption.PLAY_PAUSE
  • MediaControlOption.SEEKBAR
  • MediaControlOption.STOP

Parameters

option:String — The option to enable or disable.
value:Boolean — When set to true the option is enabled. When set to false the option is disabled.

See also

MediaControlOption
getOptionEnabled()

setProperty()


public function setProperty(prop:String, value:Object):void

Sets a property to the specified value in the MediaControl component

In the following listing, the volume property is set to 80 and the fullscreen mode property is set to true:

controls.setProperty( MediaControlProperty.VOLUME, 80 );
controls.setProperty( MediaControlProperty.FULLSCREEN, true );
         

Parameters

prop:String — The property for which to set a value. Valid properties and values:
PropertyExpected value
MediaControlProperty.DURATIONThe duration of the media in milliseconds
MediaControlProperty.POSITIONThe duration of the media in milliseconds
MediaControlProperty.FULLSCREENtrue if the media is in fullscreen mode or false if it is not.
MediaControlProperty.VOLUME An int value ranging between 0 and 100.
MediaControlProperty.AUDIO_BOOSTtrue if volume boost is enabled or false if it is not.
value:Object — The value to set (see table above).

See also

MediaControlProperty
getProperty()

setState()


public function setState(state:String):void

Sets the state of the control.

This method expects one of the following values:

  • MediaControlState.PLAY
  • MediaControlState.PAUSE
  • MediaControlState.STOP

Parameters

state:String — The state to set.

See also

MediaControlState
getState()

Event Detail

optionClicked


Event Object Type: qnx.fuse.ui.events.MediaControlEvent
MediaControlEvent.type property = qnx.fuse.ui.events.MediaControlEvent.OPTION_CLICK

Dispatched when certain elements in the control are touched by the user.

The following cases will cause this event to be dispatched:

  • When the user touches the next button.
  • When the user touches the previous button.

See also

MediaControlOption

propertyChange


Event Object Type: qnx.fuse.ui.events.MediaControlEvent
MediaControlEvent.type property = qnx.fuse.ui.events.MediaControlEvent.PROPERTY_CHANGE

Dispatched when a property has changed through user interaction.

The following cases will cause this event to be dispatched:

  • When the user interacts with the seek bar.
  • When the user interacts with the volume slider.
  • When the user presses the fullscreen button.

See also

MediaControlProperty

stateChange


Event Object Type: qnx.fuse.ui.events.MediaControlEvent
MediaControlEvent.type property = qnx.fuse.ui.events.MediaControlEvent.STATE_CHANGE

Dispatched when the state of the media must change based on user interaction with the controls.

The following cases will cause this event to be dispatched:

  • The user presses the stop button.
  • The user presses the pause button.
  • The user presses the play button.
  • The user touches down on the seek thumb.
  • The user releases the seek thumb.

See also

MediaControlState

Examples

The following sample application is included to describe the interaction between the MediaControl class and the MediaPlayer class. The application launches a movie. The MediaControl class provides the basic UI, while the MediaPlayer class provides the rendering. In the example below, a URL to a local movie file is passed into the MediaPlayer instance. The MediaPlayer and MediaControl communicate state and property changes using events.

This sample assumes that you have a video file bbball.m4v bundled in a assets folder within your application.

package qnx.test.mediaplayer 
{
    import qnx.events.AudioManagerEvent;
    import qnx.system.AudioManager;
    import flash.display.StageScaleMode;
    import flash.display.StageAlign;
    import qnx.fuse.ui.media.MediaControlState;
    import qnx.fuse.ui.events.MediaControlEvent;
    import qnx.fuse.ui.media.MediaControlProperty;
    import qnx.fuse.ui.media.MediaControlOption;
    import flash.display.Sprite;
    import flash.filesystem.File;
    
    import qnx.events.MediaPlayerEvent;
    import qnx.media.MediaPlayer;
    import qnx.fuse.ui.media.MediaControl;
    import qnx.fuse.ui.media.VideoDisplay;
    
    public class MediaPlayerSample extends Sprite
    {
        private var _myPlayer:MediaPlayer;
        private var _myVD:VideoDisplay;
        private var _myMediaControl:MediaControl;
        
        private const INIT_VOLUME:int = 50;
        
        public function MediaPlayerSample()
        {
            // support autoOrients
            stage.align = StageAlign.TOP_LEFT;
            stage.scaleMode = StageScaleMode.NO_SCALE;
            
            initializeUI();
            initializePlayer();            
        }
        
        private function initializePlayer():void
        {
            // Set initial volume value
            AudioManager.audioManager.setOutputLevel(INIT_VOLUME);
            AudioManager.audioManager.addEventListener(AudioManagerEvent.OUTPUT_LEVEL_CHANGED, audioManagerHandler);
            
            _myVD = new VideoDisplay(false);
            _myVD.setPosition(0, 200);
            _myVD.width = stage.stageWidth;
            _myVD.height = 480;
            _myVD.backgroundColor = 0xc7c7c7;
            addChild(_myVD);
            
            _myPlayer = new MediaPlayer();
            _myPlayer.addEventListener(MediaPlayerEvent.INFO_CHANGE, infoChange);
            
            // For this sample, you need to add the assets folder to be packaged
            // into the BAR file        
            var file:File = File.applicationDirectory.resolvePath("assets/bbball.m4v");
            
            _myPlayer.url = "file://" + file.nativePath;            
            _myPlayer.videoDisplay = _myVD;
        }
        private function initializeUI():void
        {
            _myMediaControl = new MediaControl();
            _myMediaControl.width = stage.stageWidth;
            _myMediaControl.x = Math.round((stage.stageWidth - _myMediaControl.width) / 2);
            _myMediaControl.y = stage.stageHeight - _myMediaControl.height;
            
            _myMediaControl.setOption( MediaControlOption.PLAY_PAUSE, true );
            _myMediaControl.setOption( MediaControlOption.STOP, true );
            _myMediaControl.setOption( MediaControlOption.SEEKBAR, true );
            _myMediaControl.setOption( MediaControlOption.DURATION, true );
            _myMediaControl.setOption( MediaControlOption.POSITION, true );
            _myMediaControl.setOption( MediaControlOption.BACKGROUND, true);
            
            //Extra options - commented out to save screen space on portrait mode
            //_myMediaControl.setOption( MediaControlOption.NEXT, true );
            //_myMediaControl.setOption( MediaControlOption.PREVIOUS, true );
            _myMediaControl.setOption( MediaControlOption.VOLUME, true );
            
            _myMediaControl.setProperty( MediaControlProperty.VOLUME, INIT_VOLUME );
            _myMediaControl.setProperty( MediaControlProperty.FULLSCREEN, true );
            
            _myMediaControl.addEventListener( MediaControlEvent.STATE_CHANGE, mediaControlStateChange );
            _myMediaControl.addEventListener( MediaControlEvent.PROPERTY_CHANGE, mediaControlPropChange );
            
            addChild(_myMediaControl);  
        }
        
        private function infoChange(event:MediaPlayerEvent):void 
        {
            if (event.what.position)
            {
                _myMediaControl.setProperty(MediaControlProperty.POSITION, _myPlayer.position);
            }
            
            if (event.what.duration)
            {
                _myMediaControl.setProperty(MediaControlProperty.DURATION, _myPlayer.duration);
            }
            
            if (event.what.state) 
            {
                _myMediaControl.setState(_myPlayer.isPlaying ? MediaControlState.PLAY : MediaControlState.PAUSE);
            }
        }
        
        private function mediaControlStateChange(mediaControlEvent:MediaControlEvent):void
        {
            var state:String = _myMediaControl.getState();
                
            switch( state )
            {
                case MediaControlState.PLAY:
                    if (!_myPlayer.isPlaying) 
                    {
                        _myPlayer.play();
                    } 
                    else 
                    {
                        _myPlayer.speed = 1000;
                    }
                    break;
                case MediaControlState.PAUSE:
                    _myPlayer.pause();
                    break;
                case MediaControlState.STOP:
                    _myPlayer.stop();
                    break;
                case MediaControlState.SEEK_START:
                    _myPlayer.pause();
                    break;
                case MediaControlState.SEEK_END:
                    _myPlayer.play();
                    break;
                default:
                    break;
            }
        }
                
        private function mediaControlPropChange(event:MediaControlEvent):void 
        {
            switch (event.property) 
            {   
                case MediaControlProperty.POSITION:
                    _myPlayer.seek(uint( _myMediaControl.getProperty(MediaControlProperty.POSITION)));
                    break;
                case MediaControlProperty.DURATION:
                    break;
                case MediaControlProperty.FULLSCREEN:
                    break;
                case MediaControlProperty.VOLUME:
                    AudioManager.audioManager.setOutputLevel(uint(_myMediaControl.getProperty(MediaControlProperty.VOLUME)));
                    break;
                default:
                    break;
            }
        }
        private function audioManagerHandler(event : AudioManagerEvent) : void 
        { 
            switch(event.type) 
            {    
                case AudioManagerEvent.OUTPUT_LEVEL_CHANGED:
                    // Adjusts the volume control if the user uses the hard buttons 
                    _myMediaControl.setProperty( MediaControlProperty.VOLUME, AudioManager.audioManager.getOutputLevel() );                    
                    break;
                defaut:
                    break;
            }
        }   
    }
}
     




comments powered by Disqus