Back to Design / Interaction - Yahoo! TV Widgets Forum
0

Extending a custom MediaTransportOverlay

Hello,
I like the Media transport overlay that is being used in the KONtx framework. I simply need to add a branding icon and rearrange some of the elements (e.g. - play button, duration of video). I started small by just creating this:

CODE
// This overlay gets us closer to the Samsung box
KONtx.control.KrmaCodeMediaTransportOverlay = new KONtx.Class({
  ClassName: 'KrmaCodeMediaTransportOverlay',

  Extends: KONtx.control.ControlVideoTransportOverlay,

  // overriding Media Transport Overlay's controls positioning
  _createContent: function(){
    this._controls = {};

    this.parent()._createButtons();
    this.parent()._createBody();
    this.parent()._createTitleBar();
    this.parent()._createIntervalText();
    this.parent()._createProgressBar();
  },

  _createTitleBar: function(){
    this.element.title_bar = new KONtx.control.Text({
      label: "Title Bar",
      truncation: 'end',
      styles: {
        fontSize: '14px',
        textAlign: 'center',
        width: '25%',
      },
    }).appendTo(this);
  },
});


This is where I am calling my custom class
CODE
    this.controls.overlay = new KONtx.control.KrmaCodeMediaTransportOverlay({
      fadeTimeout: 5,
      stopButton: false,
      events: {
        onTransportButtonPress: function(event){
          if(event.payload.button == "fastforward") {
            event.preventDefault();
            KONtx.mediaplayer.control.seek(10, true);
          } else if(event.payload.button == "rewind") {
            event.preventDefault();
            KONtx.mediaplayer.control.seek(-10, true);
          }
        },
        onControlSeek: function(event){
        },
      },
    }).appendTo(this);


The simulator is giving the following error:

CODE
TypeError: (new KONtx.control.KrmaCodeMediaTransportOverly(.....).appendTo is not a function (videoplayer.js line 34)


Is there any documentation on creating custom control objects?

by
Report Abuse
7 Replies
  • A couple of things jump out at me just from reading over the code.

    QUOTE (Bensan George @ Mar 9 2011, 08:47 AM) <{POST_SNAPBACK}>
    Extends: KONtx.control.ControlVideoTransportOverlay

    There is no such control. Also, you should be using the KONtx.control.MediaTransportOverlay instead of the KONtx.control.VideoTransportOverlay.

    QUOTE (Bensan George @ Mar 9 2011, 08:47 AM) <{POST_SNAPBACK}>
    The simulator is giving the following error:

    CODE
    TypeError: (new KONtx.control.KrmaCodeMediaTransportOverly(.....).appendTo is not a function (videoplayer.js line 34)

    You have a typo: new KONtx.control.KrmaCodeMediaTransportOverly
    Report Abuse
    0
  • QUOTE (Benjamin Toll @ Mar 9 2011, 12:17 PM) <{POST_SNAPBACK}>
    A couple of things jump out at me just from reading over the code.


    There is no such control. Also, you should be using the KONtx.control.MediaTransportOverlay instead of the KONtx.control.VideoTransportOverlay.


    You have a typo: new KONtx.control.KrmaCodeMediaTransportOverly



    The type was just that. I changed my custom class to extend KONtx.control.MediaTransportOverlay and now it says this:

    CODE
    Theme.storage.get(this.ClassName+"Button") has no properties (control.overlays.js: line 267)


    In looking through the forums my understanding is that I can put in Theme.storage.alias("KrmaCodeMediaTransportOverlay", "MediaTransportOverlay") and get further that way but where should I declare this?
    Report Abuse
    0
  • So Theme.storage.alias does not get me anywhere quickly. Anyone have any thoughts on this?

    QUOTE (Bensan George @ Mar 9 2011, 02:00 PM) <{POST_SNAPBACK}>
    The typo was just that. I changed my custom class to extend KONtx.control.MediaTransportOverlay and now it says this:

    CODE
    Theme.storage.get(this.ClassName+"Button") has no properties (control.overlays.js: line 267)


    In looking through the forums my understanding is that I can put in Theme.storage.alias("KrmaCodeMediaTransportOverlay", "MediaTransportOverlay") and get further that way but where should I declare this?
    Report Abuse
    0
  • OK I have looked through the code any clear path for me to extend from the MediaTransportOverlay control. All I know is that there seems to be required methods that I must have in my subclass. Can anyone please provide any feedback on this. It is much appreciated. If I have missed anything in the documentation, please tell me where to look. Thank you.

    QUOTE (Bensan George @ Mar 10 2011, 12:59 PM) <{POST_SNAPBACK}>
    So Theme.storage.alias does not get me anywhere quickly. Anyone have any thoughts on this?
    Report Abuse
    0
  • QUOTE (Bensan George @ Mar 13 2011, 01:23 PM) <{POST_SNAPBACK}>
    OK I have looked through the code any clear path for me to extend from the MediaTransportOverlay control. All I know is that there seems to be required methods that I must have in my subclass. Can anyone please provide any feedback on this. It is much appreciated. If I have missed anything in the documentation, please tell me where to look. Thank you.


    Ok, finally getting some time to dig into this. This should work for you:

    CODE
    KONtx.control.KrmaCodeMediaTransportOverlay = new KONtx.Class({
      Extends: KONtx.control.MediaTransportOverlay,

      // overriding Media Transport Overlay's controls positioning
      _createContent: function(){
        this.parent();
        this._createTitleBar();
      },

      _createTitleBar: function(){
        this.element.title_bar = new KONtx.element.Text({
          label: "Title Bar",
          truncation: 'end',
          styles: {
            fontSize: '14px',
            textAlign: 'center',
            width: '25%',
          },
        }).appendTo(this);
      },
    });

    Basically, when extending, if you're overriding any methods you should call the parent method or things will probably break. In your case they weren't because you had copied in the entire function body of the overridden method (btw, don't call this.parent()._createButtons(), etc.).

    As you can see, I call the parent method and then whatever is different (i,e., the reason for overriding the parent method in the first place). If the order is important, then you will need to completely replace the method like you did in your example. Also, the extended class will inherit the ClassName (in this case 'ControlVideoTransportOverlay'), so you don't need to define one unless you're providing your own custom themes. The theme will be looked up using the 'ControlVideoTransportOverlay' class, which will map to an already-defined theme. So, this will get rid of your other error.

    Lastly, you need to use the KONtx.element.Text control rather than the non-existent KONtx.control.Text control.

    Hope this helps.
    Report Abuse
    0
  • Thank you for looking this up for me. Since I had to change the majority of MediaTransportOverlay, I just made a new control for it.

    I have placed in new elements and reordered others and they all seem to be working just fine. I am having some trouble with the title bar which I want to float above the transport overlay. I would like this title bar to show up whenever the transport overlay is visible. I created a text element but cannot get it out of the overlay area. How can I do so?

    The code so far:

    CODE
      _createContent: function() {
        this._controls = {};

        this._createButtons();
        this._createBody();
        this._createBrowseIcon();    

        this._createIntervalText();
        this._createProgressBar();
        this._createBrandingIcon();
        this._createTitleBar();
      },
      
      _createTitleBar: function(){
        this.titleBar = new KONtx.element.Text({
          label: 'Title Bar',
          truncation: 'end',
          styles: {
            fontSize: '18px',
            color: '#FFF',
            textAlign: 'center',
            width: 350,
            height: 33,
            backgroundColor: '#000',
            hOffset: 300,
          }
        }).appendTo(this);
      },


    QUOTE (Benjamin Toll @ Mar 14 2011, 02:02 PM) <{POST_SNAPBACK}>
    Ok, finally getting some time to dig into this. This should work for you:

    CODE
    KONtx.control.KrmaCodeMediaTransportOverlay = new KONtx.Class({
      Extends: KONtx.control.MediaTransportOverlay,

      // overriding Media Transport Overlay's controls positioning
      _createContent: function(){
        this.parent();
        this._createTitleBar();
      },

      _createTitleBar: function(){
        this.element.title_bar = new KONtx.element.Text({
          label: "Title Bar",
          truncation: 'end',
          styles: {
            fontSize: '14px',
            textAlign: 'center',
            width: '25%',
          },
        }).appendTo(this);
      },
    });

    Basically, when extending, if you're overriding any methods you should call the parent method or things will probably break. In your case they weren't because you had copied in the entire function body of the overridden method (btw, don't call this.parent()._createButtons(), etc.).

    As you can see, I call the parent method and then whatever is different (i,e., the reason for overriding the parent method in the first place). If the order is important, then you will need to completely replace the method like you did in your example. Also, the extended class will inherit the ClassName (in this case 'ControlVideoTransportOverlay'), so you don't need to define one unless you're providing your own custom themes. The theme will be looked up using the 'ControlVideoTransportOverlay' class, which will map to an already-defined theme. So, this will get rid of your other error.

    Lastly, you need to use the KONtx.element.Text control rather than the non-existent KONtx.control.Text control.

    Hope this helps.
    Report Abuse
    0
  • QUOTE (Bensan George @ Mar 14 2011, 07:37 PM) <{POST_SNAPBACK}>
    Thank you for looking this up for me. Since I had to change the majority of MediaTransportOverlay, I just made a new control for it.

    I have placed in new elements and reordered others and they all seem to be working just fine. I am having some trouble with the title bar which I want to float above the transport overlay. I would like this title bar to show up whenever the transport overlay is visible. I created a text element but cannot get it out of the overlay area. How can I do so?

    The MediaTransportOverlay control has two different events you should subscribe to: onTransportOverlayShow and onTransportOverlayHide. You can see the source here. Listen for those events and when they occur you can show/hide your title bar.

    For example:

    CODE
    this.controls.overlay = new KONtx.control.MediaTransportOverlay({
        events: {
            onTransportOverlayHide: function (event) {
                this.getView().controls.titleBar.hide();
            },
            onTransportOverlayShow: function (event) {
                this.getView().controls.titleBar.show();
            }
        }
    }).appendTo(this);
    Report Abuse
    0
Ask a Question

Recent Posts

in Design / Interaction - Yahoo! TV Widgets