Modifying KDP by Editing uiConf XML

Fri, 11/27/2009 - 10:25 — Kalturian

Introduction

This Guide will show you how to modify the configuration of your Kaltura Player or Kaltura Playlist Player by editing its underlying XML code (called “uiConf XML”) and using the Kaltura TestMe Console.
You should note that certain changes to the look of a player require making changes via Flash/ Flex and are beyond the scope of this document (generally, uiConf XML controls structure and dimensions and the “skin SWF” created via Flash/ Flex controls look).

Terms used in this document (that you should understand)

The steps to create a uiConf manually

  1. Obtain a KS
  2. Get your uiConf XML code
  3. Modify the uiConf XML
  4. Update the uiConf XML
  5. Testing the player
  6. Optionally, return the player to its previous state

Obtain a Kaltura Session Key (KS)

  • Open the TestMe console (API testing console) - api_v3 TestMe (or inside your KalturaCE TestMe console).
  • Select session from the Select Service drop down list.
  • Insert your admin secret in the secret (string) text box.
  • Select ADMIN from the type (KalturaSessionType) drop down list.
  • Insert your Partner ID in the partnerId (int) text box. You'll notice that you no longer need to enter your sub-partner ID (there is no subpid in api_v3).
  • Click the Send button.
  • If you entered the right partner identifiers values the KS field will show a string of random characters. Now you can proceed to performing API actions. It's also important to note that as of api_v3, administrators can now do everything that a user can do, so be careful! - Do not expose your ADMIN KS to the public, only the user KS.

Note:

If you haven't given your playlist a meaningful name, do so now using Application Studio.
In the future this will help you find the playlist player you are about to change because once you are done manually modifying it, it will no longer appear in Application Studio (though there is a way to restore it to the Application Studio but for that you will need to locate it so, again, a meaningful name becomes important).

Get your uiConf XML code

  1. Go to the Kaltura TestMe Console
  2. In the “KS (string)” field, paste your KS
  3. Under "Select service", choose "uiConf"
  4. Change "Select action" to "get"
  5. In the "id" field enter your uiConf id. To find the uiConf id:
    • Go to KMC
    • Go to Application Studio
    • Look immediately to the right of the name of the player you wish to modify, in the column titled "ID"
    • If the player in question does not appear in KMC’s Application Studio, and you do not know its uiConf id, contact us).
  6. Make sure that the checkboxes next to both "KS" and "id" are checked
  7. Click "Send"
  8. The XML has been loaded in the right pane of the TestMe Console.

Modify the uiConf XML

  1. In the XML that was loaded in the right pane, locate the tag.
  2. Copy its content (without the tag itself) into your preferred text editor.
  3. For ease of use, we recommend formatting the pasted text to XML using the appropriate actions in your text editor (I do this by opening a new blank XML file and pasting my copied code in there).
  4. Those of you familiar with Flex will find the code very familiar (though it is not truly Flex). For those of you familiar with HTML - what you are seeing are basically tags describing structure.
  5. Following are two common modifications you can make to playlist players - turning a horizontal playlist created inside KMC's Application Studio into a vertical playlist or a player-only playlist:
    • A good way to focus on the area we want is by searching for "<playlist".
    • As you can see, the <playlist> resides inside a <VBox> (its parent), which in turn is preceded by another <VBox> (its sibling). Both of these are children of (contained within) an <HBox>.
    • The <playlist> is a non-structural tag. It loads the PlaylistAPI.swf file which contains the logic that communicates between the playlist and Kaltura's servers.
      As you may have guessed, an HBox defines a horizontal box and a VBox defines a vertical box.
  6. Turning the playlist into a vertical playlist:
    • Simply change the <HBox> into a <VBox>.
      Don't forget to change the closing tag to a Vbox as well.
    • On the VBox whose id attribute equals "plContainer" change the "width" attribute to 100% and the "height" attribute to 203.
    • If you are working on a multi-playlist, set "height" to 251.
    • This height setting assume a few things:
      • That you want to show three items in your list.
      • That in Application Studio you did not change the options for your "Playlist Items" in such a way as to affect the height of each item.
      • Otherwise, you can/ should change the height attribute so that it fits your needs
    • Copy the entire XML code.
    • Turning the playlist into a player-only playlist:
      • Copy the entire <playlist ... tag
      • Delete the entire <Vbox id="plContainer"... node
      • Paste the <playlist> (that you copied in step 1 above) where the VBox used to be (the one you deleted in step 2 above)
      • Copy the entire XML code

Update the uiConf XML

  1. Return to the Test Me Console
  2. Change "Select action" to "update"
  3. Enter the uiConf id in the "id" field
  4. Make sure "Select service:" is still set to "uiConf"
  5. Click on "uiConf (KalturaUiConf):" - it's a link even though it may not look like it - to open additional options:
  6. Set the new height and width for it to be a vertical player:
    • In "uiConf:width (int):" enter 400
    • In "uiConf:height (int):" enter 538
      • If you are working on a multi-playlist, the height should be 586
      • These height settings assume a couple of things as detailed in “Modify the uiConf XML”, section 5.c.ii.2 above.
  7. In the field labeled "uiConf:confFile (string):" paste the entire XML code that you've edited (and copied in step 5.5 above).
  8. In order to be able to restore this player to the way it was created in Application Studio:
    • In the XML that should still be loaded in the right pane of the Test Me Console, look for the tag.
    • Copy the contents of the tag (without the tag itself) and paste them into the field labeled "uiConf:confFileFeatures (string):".
  9. In the dropdown labeled "uiConf:creationMode", select "ADVANCED"
  10. Make sure all the checkboxes next to all the fields you changed as well as next to "KS" are checked and that no other checkboxes are checked.
  11. Scroll the right pane of the Test Me Console all the way down (you'll see why in a second)
  12. Click "Send"
  13. The page should have been refreshed with the new, altered XML loaded in the right pane. You can make sure this happened by seeing that the right pane is now scrolled all the way to the top.
  14. Your playlist is now no longer visible in Application Studio so make sure to you know its UI Conf ID. There are ways of finding the UI Conf in the future - as detailed below - but they are not very intuitive, so it's a good idea for you to save this info somewhere:
    • To locate the UI Conf Id now (while this current session of the Test Me Console is alive): look in the "id (int):" field.
    • Finding the UI Conf Id in the future using the Test Me Console:
      • Create a KS (see #3 above) and paste it in the "KS" field
      • In "Select service:" choose "uiConf"
      • In "Select action:" choose "list"
      • Click on "filter (KalturaUiConfFilter):" to show options that will let you limit your results.
        "filter:nameLike (string):" is likely to be useful here.
    • Clicking on "Send" will load (in the right pane of the Test Me Console) the entire text of all ui-conf's that match your criteria, with the XML of each ui-conf appearing under a separate node of the resulting XML.
      • Scroll the right pane and look through the <item> nodes for the UI Conf you want - probably by looking at the <name> (which is why we started this guide by stating that giving meaningful names is important).
      • Immediately above <name> is <id> which holds the UI Conf Id you're looking for.
    • Finding the UI Conf Id in the future using the KMC:
      • Go to the "Content" tab
      • Click on "Playlist" to see a list of the playlists you can use
      • Click on "Preview & Embed" next to any item
      • From the dropdown list at the top left (of the preview window) choose the player you are looking for (again, the importance of choosing meaningful names).
      • Inside the textbox that holds the embed code look for data="...
      • At the end is what you're looking for: data=".../kwidget/cache_st/123456789/wid/_12345/ui_conf_id/48110"

Testing the player

  • Go to the "Content" tab in KMC
  • Click on "Playlist"
  • Click on "Preview & Embed" next to any playlist item
  • In the dropdown list at the top left (of the preview window) choose the player you are looking for

How to return the player to its previous state

To restore your playlist to its Application Studio settings:

  • Make it visible in Application Studio:
    • Create a KS (see #3 above) and paste it in the "KS" field (not needed if you're in the middle of an active Test Me Console session).
    • In "Select service:" choose "uiConf"
    • In "Select action:" choose "update"
    • In the "Id" field enter your UI Conf Id
    • Make sure the checkboxes next to both "KS" and "Id" are checked
    • Click on "uiConf (KalturaUiConf):" to see more options
    • Look for the very last option, labeled "uiConf:creationMode" and change it to "WIZARD"
    • Click "Send"
  • Restore its original Application Studio settings:
    • First of all: realize that this step is destructive - you will lose all changes you've made manually, and will have o way of getting them back!
    • Login to KMC
    • Go to Application Studio
    • Locate the Playlist Player you are looking for and from the "Select Action" dropdown choose edit.
    • Click on "Save Changes" (again: remember this is destructive and non-reversible).

‹ Go to "KDP uiConf definitions and usage"Go to Parent PagePlayer with playlist module (and playlist API) ›
Back to top