Custom MediaFront field types not working

So, I just pushed up some changes to the 2.x branch where I upgraded the SimpleBlack template as another template. You can certainly use that as a stepping stone until I have a chance to get that video recorded.

You can do the following to at least get you started...

• Create a custom module to house your templates. There is a lot of documentation on how to do this elsewhere.
• Create a folder in your module called templates and copy the simpleblack template folder from the latest 2.x branch into this folder.
• Do a mass rename of everything 'simpleblack' in that folder (including filenames) to whatever you want to call your template.
• Implement the following hook in your module...
  

  /**
   * Implementation of hook_osmplayer_info
   */
  function mymodule_osmplayer_info() {
    return array(
      'templates' => osmplayer_get_templates(drupal_get_path('module', 'mymodule') . '/templates')
    );
  }
  

• You can then modify the *.tpl.php file within that template to make changes... the CSS file is in the CSS folder....

This should hopefully get you started until I make a video of it.

Thanks,

Travis.

This is an issue for me as well. Modifying the default player template under my own module and trying to add the body field as a custom field. Noticed it's not working as you'd expect.

Once again, this isn't a bug, it's a feature. It's just undocumented (at least seemingly so).

All of the methods in the osmplayer.js can be overridden within the template by adding the [template] call next to the object name.

So for this particular issue, we just copy the entire setNode method into osmplayer.teaser.themename.js file and name it this

osmplayer.teaser[template].prototype.setNode = function(node) {

We then add in our code that sets the custom value we want.

------

I added a plain text description field through fields ui and set it as a Media Front "description" field in the view.

Then as described in the OP, I added a div for it under osmplayer.teaser[template].prototype.getDisplay and an element under osmplayer.teaser[template].prototype.getElements in my osmplayer.teaser.themename.js file.

I then added the following method code from osmplayer.js to my osmplayer.teaser.themename.js file below the construct method:

  /**
   * Sets the node.
   *
   * @param {object} node The node object to set.
   */
  osmplayer.teaser[template].prototype.setNode = function(node) {
  
    // Add this to the node info for this teaser.
    this.node = node;
    
    // Set the title of the teaser.
    if (this.elements.title) {
      this.elements.title.text(node.title);
    }
    
    if (this.elements.description) {
      this.elements.description.text(node.description.value);
    }
  
    // Load the thumbnail image if it exists.
    if (node.mediafiles && node.mediafiles.image) {
      var image = osmplayer.getImage(node.mediafiles.image, 'thumbnail');
      if (image) {
        if (this.elements.image) {
          this.preview = new minplayer.image(this.elements.image);
          this.preview.load(image);
        }
      }
    }
  
    // Bind when they click on this teaser.
    this.display.unbind('click').click((function(teaser) {
      return function(event) {
        event.preventDefault();
        teaser.trigger('nodeLoad', teaser.node);
      };
    })(this));
  };

Works beautifully. I'm a happy camper now. I finally have the baseline for my player working the way I want it. Thanks for this awesome module! Hope this helps someone.

The info element is just the parent of the title element. Look at the code inside this.context.append. You'll see this line: <div class="osmplayer-' + template + '-teaser-info ui-state-default">\

That element is defined so it can be targeted by the teaser selection method through this.elements.info.addClass. I actually changed that line to this.elements.image.addClass so I can target the image instead for a dynamic "playing" overlay.

@jaymallison,

Thank you SO much for your effort. For the most part, you are absolutely right with your approach.... there were just a few things that I would recommend changing.

Just so that everyone knows, I started up a MediaFront documentation page here on Drupal.org so that the mediafront.org site isn't the only place to find documentation. Here is the link http://drupal.org/node/1563486. This is a wiki page so everyone can edit it. The first page I am doing is on creating templates found here http://drupal.org/node/1563496 where I do go into some detail that will help. Please edit as you see fit.

Thanks,

Travis.

@mrtoner

That line is extending the teaser object with a new property based on the target inside the jQuery call... i.e. the info div. This allows the stock functionality to then target the info div in the method that controls which teaser node is active.

@travist

Glad I could help. This is quite the massive project in regards to JS. So much to digest and reverse engineer. I see what you put in the docs and it makes perfect sense. Hard to guess these things without some context. Glad we are making headway on exposing just how powerful this system is. I have to say, the more I work with it, the more I realize how awesome it is!

I also want to make a modification to your code above... It should derive from the base class and then just extend the custom functionality like this...

/**
 * Sets the node.
 *
 * @param {object} node The node object to set.
 */
osmplayer.teaser[template].prototype.setNode = function(node) {

  // Call the base class first.
  osmplayer.teaser.prototype.setNode.call(this, node);

  // Set the description.
  if (this.elements.description) {
    this.elements.description.text(node.description.value);
  }
};

You will also need to add description to your getElements method in your template as well....

  // Return the elements
  osmplayer.teaser[template].prototype.getElements = function() {
    var elements = osmplayer.teaser.prototype.getElements.call(this);
    return jQuery.extend(elements, {
      info: jQuery('.osmplayer-' + template + '-teaser-info', this.display),
      title:jQuery('.osmplayer-' + template + '-teaser-title', this.display),
      description: jQuery('.osmplayer-' + template + '-teaser-description', this.display),
      image:jQuery('.osmplayer-' + template + '-teaser-image', this.display)
    });
  };

And then, of course add that element to the tpl.php file where you want it to live.

Hope this helps.

Travis.

Yeah my OO experience with JS has been limited as of late and I'm a bit rusty haha.

I agree that approach is preferred, you're calling the base class to essentially "construct" it, and after it's been constructed, then extending it. I'll adjust my code to use that approach as it is obviously preferred. That way if you make a change to the base class in the future to add some functionality project wide, my code isn't bypassing it.

Also your addition to the getElements code is word for word exactly what I had already done. ;-)

Thanks for this... very helpful! Can I ask if "description" you refer to in the .js is the machine name of the field?