wiki:MEDIA_FRAME_CONTROLS_R0
Last modified 16 years ago Last modified on 05/14/09 14:53:00

Error: Macro BackLinksMenu(None) failed
compressed data is corrupt

Error: Macro TicketQuery(summary=MEDIA_FRAME_CONTROLS_R0, format=table, col=summary|owner|status|type|component|priority|effort|importance, rows=description|analysis_owners|analysis_reviewers|analysis_score|design_owners|design_reviewers|design_score|implementation_owners|implementation_reviewers|implementation_score|test_owners|test_reviewers|test_score|) failed
current transaction is aborted, commands ignored until end of transaction block

Analysis

Overview

When playing audio or video, the user needs the ability to control the media. This can be though simple controllers that start or stop the media, slider controllers that allow the user to control where in time the media is playing, or any other kind of controller we can imagine.

Each content should be able to determine how to render itself based on it's state.

Frames need a mechanism for handling adornments in general, of which controllers are one type of adornment. Adornments can either render themselves on top of the frame, or extend the size of the frame without affecting the content of the frame.

For example, a slider controller with a play/stop button, rewind, fast forward and a slider with a thumb, may live below the content in a frame. This controller would live below video. So if a video is 320x160, and the controller is 16 pixels tall, the actual frame size is 320x176. This is necessary because when the author flows text around the frame, they don't want the text flowing under a video controller.

However, other controllers may not need to extend the frame. One can imagine a controller that shows translucent controls on top of the media as the cursor passes over the media, and then fade out when the user stops moving the mouse.

So, adornments, be them controllers or some other use of adornments, need to be able to specify where they are to be rendered in the frame. They should be able to specify bottom, top, left, right, what their size should be (fixed, expanding in either vertical or horizontal dimensions) and whether or not they live inside or outside of the frame (the visual representation of it).

Adornments are properties of a frame, not the content. The same content can be rendered in 3 different frames, some with adornments, some without.

Users should be able to toggle controllers on and off.

Controllers will need to be able to interface with the content of the frame, so there will need to be a clean way to notify the controller that the content has changed state.

Task requirements

  • Create controllers for media manipulation.
    • play, stop and pause.
    • "Buttons" can be active and not active - if a button is not active its SceneElement's color is more transparent than the colors of the active buttons.
    • We should have one button that is for play and pause. Its icon should be changed correspondingly to the state of the media:
      • When the media is playing the pause icon should be set to the button.
      • When the media is stopped or paused the play icon should be set.
    • The stop button should be active only when the media is playing.
    • The start button should be active only when the media is stopped or paused.
    • Clicking the play/pause button when the media is stopped will start the playback from the beginning. If the media is paused it should continue from where stopped. The same button is used to pause the media and play it.
    • Clicking the stop button when the media is started will stop the playback and set the time of media to the beginning. Clicking this button when the media is pause will do the same.
  • Allow controllers to communicate with a frame's content.
  • Think about how controllers can be skinned
  • Notes:
    • Keep the connection between controllers and media as simple as possible.
    • Remember that every frame can have the same content in different states.

Task result

The result of this task is source code.

Implementation idea

  • Review the scene elements of the media.
  • Decide how to display controllers and connect them with the media manipulation interfaces (perhaps through the LogicR3).

How to demo

  • Insert a media frame.
  • Click on the frame.
  • Use the controls to manipulate the media.

Design

  • Media frame controls will be defined as MediaManipulationViews which have image SceneElements containing icons. These will represent "buttons" that manipulate the media in Sophie2. In order for the scene elements to behave as buttons we should specify some logic that changes the alpha values of the scene elements (so that they look as if they are clicked, pressed or active - as real buttons do).

source:trunk/sophie2-platform/doc/uml-design-diagrams/media-manipulation-uml.png

  • For the time being we will implement two MediaManipulationViews:
    • PlayPauseMediaManipulationView - for playing/pausing media.
    • StopMediaManipulationView - for stopping the media.
  • Every MediaManipulationView has a parent MediaContentView.
  • In order for these to be skinable we should define tool-tip and icon in a SkinPart.
    • They will be defined in the two implementing classes. Icons should be put in the same module as the views.
  • The MediaManipulationViews will also determine whether they should be active or not depending on media's playback.
  • "Buttons" should be arranged correspondingly in the bottom left corner of the frame in the same order as described above.
  • Every icon should be scaled to look nicely inside the frame.
  • Media controls will be zoom-able along with the media frame but should not change their size as media frame's size changes.
    • In order to do so, make the scene element of the MediaContentView a composite one and add the media scene element as well as the scene elements of the controls to it. Every descendant of the MediaContentView (VideoContentView and AudioContentView for the time being) will provide a media element instead of just an element. Whether the media is playing or not will be kept in a value property inside the MediaContentView. This is needed for the ManipulationViews to update their state and appearance correspondingly (alpha values of colors for their scene elements).
  • The changing of the alpha values of the scene elements will be done by a MediaManipulationLogic that is common both for Audio and Video.
  • The managing of the media playback will be done by a single logic instead of the two that we now have. This will be named MediaLogic and will be responsible for adding media and controlling it.
  • The icon of every implementation of the MediaManipulationView will be automatically changed upon skin changing. For the PlayPauseMediaManipulationView the icon will be changed upon media playback as well (play and pause icons).
  • The computeActivated method will be used to determine the alpha value of the MediaManipulationView's SceneElement's color.

source:trunk/sophie2-platform/doc/uml-design-diagrams/media-logics-uml.png

The design related code has been merged to the trunk in [2604].

Implementation

The implementation code along with the design code has been merged to the trunk in [2604].

Testing

(Place the testing results here.)

Comments

Steve doesn't feel that "including the ability to set image for not-available" and "and image for not playing" are not part of this task.

desc("related to frame contents") desc("should allow customization of how media appear (play button, slider, etc)") desc("including the ability to set image for not-available, ") desc("and image for not playing")