Kaltura Contribution Wizard (KCW) Customization

Primary tabs

Printer-friendly version
Kaltura Edition: 
Kaltura SaaS
Kaltura Cloud Edition
Kaltura Community Edition
Kaltura On Prem
Kaltura Version: 
Kaltura Eagle
Audience / Tech Expertise: 
Configuration
Content Administration
Design & Branding
Integration that Involves Programming

Customizing KCW Look and Feel

This article explains how integrators and project managers can customize the KCW.

Changing Configuration Values

The index.template.html file (under the KCW project->html-template) contains JavaScript and FlashVars. To adapt the KCW to your needs, you can change the following FlashVars:

Variable Description uiConf
sessionId A unique string that represents the user. Valid for 24 hours. No
protocol The protocol that the application uses No
uid The internal identifier of the end user No
isanonymous If true, the user is anonymous. The KCW allows an anonymous user to enter a screen name and source URL (a reference to where the media is from) before submitting entries. No
partnerid The identifier of the partner No
kshowid The kshow to which the new entries will be added No
host The host of the application No
Terms_of_use A URL for the partner terms of service. The link is displayed when the user is required to approve compliance with the site's terms of use. No
afteraddentry JavaScript function called when new entries are added No
close JavaScript function called when the user closes the wizard No
wizardreadyhandler JavaScript function called when the KCW completes loading and awaits user input. No
Groupid The identifier of the group No
partnerdata Custom data, passed from the partner, to be attached to each entry that is added No
filesystemmode If true, loads locale and skin No
uiconfid The uiConf that is used No
showclosebutton Determines whether to display the contribution Close button Yes
showcategories Determines whether to display the Categories combo box in the tagging screen Yes
showdescription Determines whether to display the Description field in the tagging screen Yes
showtags Determines whether to display the Tags field in the tagging screen Yes
quickedit Boolean flag. Indicates whether the contributed media files are added automatically to the end of the roughcut. The default value is 1. No
uploadurl The URL that is called on upload No
categoriesrootid The root category identifier for the tagging screen. All children of the root category are displayed as optional categories. The default value is 0. No
enforceCategory Defining the full name of a category allows all uploads to be automatically placed under the specified category. Works with uiConf v2.1.8 and upwards. No
additionalfield Locale key for an additional field that is displayed in the tagging screen. If there is no matching locale string, the field is not displayed. No
limitations.upload.* Sets limitations on uploaded files. Can be used as follows:
  • limitations.upload.singleFileSize.min
  • limitations.upload.singleFileSize.max
  • limitations.upload.totalFileSize.min
  • limitations.upload. totalFileSize.max
  • limitations.upload.numFiles.min
  • limitations.upload. numFiles.max
 Yes
limitations.search.* Sets limitations on imported files. Can be used as follows:
  • limitations.search.numFiles.min
  • limitations.search.numFiles.max
 Yes

Understanding the uiConf

The uiConf is the user interface configuration file. uiConf is a general name for XML files that enable customizing the KCW for a specific need, layout, and design.

The uiConf affects:

  • The functionality of the KCW. You can configure:
    • Media types (video/audio/image/swf)
    • Data providers (for example, upload/user content/webcam/flickr)
    • Restrictions on the uploaded data (for example, maximum file size to upload)
  • The appearance of the KCW. You can select the screens to display, such as an introduction screen and a finish screen.
  • Look and Feel: Defined in a compiled swf skin file that is linked in the uiConf file.

Creating a uiConf for the KCW

See Sample KCW confile for a complete uiConf sample file.

To create a uiConf

Use the uiconf.add API call with the following parameters:

  • objType = CONTRIBUTION_WIZARD
  • creationMode = ADVANCED
  • swfUrlVersion = [version number, for example: 2.1.4] It is important to leave the swfUrlVersion blank.  
  • name = [a name that you assign]
  • confile: See KCW confile format.

KCW confile format

The configuration file for the KCW is an XML file with the following format:

<ContributionWizard>
	<UIConfigList>
	</UIConfigList>

	<MediaTypes>
	</MediaTypes>
 
	<StartupDefaults>
	</StartupDefaults>

	<limitations>
	</limitations>
</ContributionWizard>

UIConfigList

The UIConfigList section describes the skin and locale used for the media provider types. Each media provider can have a specific UIConfig node. A UIConfig node may be defined within a service node. In that case, it overrides a UIConfig defined in the UIConfigList. 

<UIConfig>
    <target>
      ContributionWizard.swf
    </target>
    <cssUrl />
    <localeUrl />
  </UIConfig>
# Node Attributes Data type Values Description
2 target -- -- string Defines the Flex module to which the skin and locale info relate. Usually, instead of providing specific skin info for every media provider, one CSS swf file is provided for the whole KCW.
2 cssUrl -- -- string The path of the skin swf file
2 localeUrl -- -- -- The path of the locale swf file

MediaTypes

The MediaTypes section defines the media providers that are available to the user. Each media type has its own media providers. A media provider is a source for importing media. Examples include Kaltura, Upload, and Webcam.

  <mediaTypes>

    <media type="video">
<provider id="upload" name="upload" code="1">
        		<authMethodList>
          			<authMethod type="1"/>
        		</authMethodList>
        		<moduleUrl>UploadView.swf</moduleUrl>
        		<fileFilters>
          	<filter type="video">
            	<allowedTypes>flv,asf,qt,mov,mpg,avi,wmv,mp4,3gp,f4v,m4v</allowedTypes>
         	     	 </filter>
        		</fileFilters>
      	</provider>
	… 
# Node Attributes Data type Values Description
2 provider IdNameCode StringStringInt -- Describes one data provider.Code can be:
  • FLICKR = 3
  • YOUTUBE = 4
  • MYSPACE = 7
  • PHOTOBUCKET = 8
  • JAMENDO = 9
  • CCMIXTER = 10
  • NYPL = 11
  • CURRENT = 12
  • MEDIA_COMMONS = 13
  • KALTURA = 20
  • KALTURA_USER_CLIPS = 21
  • ARCHIVE_ORG = 22;
  • KALTURA_PARTNER = 23
  • METACAFE = 24
  • SEARCH_PROXY = 28
  • PARTNER_SPECIFIC = 100
3 authMethodList -- -- -- Lists the available authorization modes used to access the media provider
3 moduleUrl -- -- -- Determines where the specific Flex component is located
3 fileFilters -- -- -- Lists filters for the media from the data provider

StartupDefaults

The StartupDefaults section defines default values and behaviors for the wizard. 

<StartupDefaults>
    <SingleContribution>false</SingleContribution>
    <showLogoImage>false</showLogoImage>
    <NavigationProperties>
      <showCloseButton>true</showCloseButton>
      <enableIntroScreen>false</enableIntroScreen>
      <enableTagging>true</enableTagging>
    </NavigationProperties>
    <gotoScreen>
      <mediaType>video</mediaType>
      <mediaProviderName>upload</mediaProviderName>
 </gotoScreen>
  </StartupDefaults> 
# Node Attributes Data type Values Description
2 SingleContribution -- -- Boolean Controls the way the wizard ends its flow. If true, the wizard displays its last "waiting..." message after submitting the contribution, and calls the defined JavaScript callback function notifying that entries were added. The JavaScript function should redirect the browser or close the modal window that displays the KCW.
2 showLogoImage -- -- Boolean Determines whether the Kaltura logo is displayed in the KCW footer
2 NavigationProperties -- -- -- Contains properties that control which screen to display or hide
2 gotoScreen -- -- -- Defines a default media provider
2 enableTOU  -- -- Boolean The default value is false. If false, the TOU is not displayed in any form.If not false, the TOU is displayed according to the value of autoTOUConfirmation.
2 autoTOUConfirmation -- -- Boolean

If true, the TOU footer is displayed. If not true, a TOU popup is displayed before uploading.  

If enableTOU is false, the autoTOUConfirmation parameter has no effect.
2 showCategories  -- -- Boolean The default value is true. If true, the Categories combo box is displayed in the tagging screen.
2 showTags -- -- -- The default value is true. If true, the Tags field is displayed in the tagging screen.
2 showDescription -- -- Boolean The default value is true. If true, the Description field is displayed in the tagging screen.

Limitations

The limitations section defines limitations on uploaded and imported files.

  <limitations>
    <upload>
      <singleFileSize min="-1" max="-1"/>
      <numFiles min="-1" max="100"/>
      <totalFileSize min="-1" max="-1"/>
    </upload>
    <search>
      	<numFiles min="-1" max="-1"/>
    </search>
  </limitations> 
# Node Attributes Data type Values Description
2 upload -- -- -- Contains all limitations regarding the upload action
3 singleFileSize minmax Int -- Determines the maximum and minimum size of a single file to upload
3 numFiles minmax Int -- Determines how many files the user can upload/import at once
3 totalFileSize minmax Int -- Restricts the total file size a user can upload
2 search -- -- -- Contains all limitations regarding the search action

Applying Skins and Styles

You can skin the KCW with a swf file that the uiConf points to (in the cssUrl tag).

Each KCW component is associated with a specific style. The figure shows the components and associated styles. 

Defining Locales

You can compile a new locale and point to it in the uiConf (in the localeUrl tag).

The locales folder is under the KCW workspace (refer to http://www.kaltura.org/kalorg/kcw/trunk) -> Locales_Kaltura_ContributionWizard -> locale -> en_US

Note: you must compile a new locale in the en_US folder.

To compile a new locale

  1. In the command line, set the root under the Locales_Kaltura_ContributionWizard project.
  2. Run the following command (replace the variables with your values):
    mxmlc -locale=en_US -source-path=locale/{locale} -include-resource-bundles=[list your properties files] -output=[name of the output swf file] 

The figure shows an example of defining a new locale. 

  

Sample KCW confile 

The following is the uiConf XML file for the default KCW. 

<kcw>

  <UIConfigList>
    	<UIConfig>
      		<target>ContributionWizard.swf</target>
     		 <cssUrl>/content/uiconf/kaltura/kmc/kcw/v2.1.4/styles.swf</cssUrl>
      		<localeUrl>/content/uiconf/kaltura/kmc/kcw/v2.1.4/en_US_ContributionWizard_kaltura.swf</localeUrl>
    	</UIConfig>
  </UIConfigList>

  <ImportTypesConfig>
    	<taggingConfig>
      		<minTitleLen>1</minTitleLen>
      		<maxTitleLen>2000</maxTitleLen>
      		<minTagsLen>0</minTagsLen>
     		 <maxTagsLen>2000</maxTagsLen>
    	</taggingConfig>
  </ImportTypesConfig>

  <webcamParams>
    <keyFrameInterval/>
    <width/>
    <height/>
    <framerate/>
    <favorArea/>
    <bandwidth/>
    <quality/>
  </webcamParams>

  <limitations>
    <upload>
      <singleFileSize min="-1" max="-1"/>
      <numFiles min="-1" max="100"/>
      <totalFileSize min="-1" max="-1"/>
    </upload>
    <search>
      	<numFiles min="-1" max="-1"/>
    </search>
  </limitations>

  <mediaTypes>

    <media type="video">
<provider id="upload" name="upload" code="1">
        		<authMethodList>
          			<authMethod type="1"/>
        		</authMethodList>
        		<moduleUrl>UploadView.swf</moduleUrl>
        		<fileFilters>
          	<filter type="video">
            	<allowedTypes>flv,asf,qt,mov,mpg,avi,wmv,mp4,3gp,f4v,m4v</allowedTypes>
         	     	 </filter>
        		</fileFilters>
      	</provider>

      	<provider id="webcam" name="webcam" code="2">
        		<authMethodList>
         		 	<authMethod type="1"/>
        		</authMethodList>
      		 <moduleUrl>WebcamView.swf</moduleUrl>
        		<customData>
          			<serverUrl>rtmp://{HOST_NAME}/oflaDemo</serverUrl>
        		</customData>
     	 </provider>

      	<provider id="metacafe" name="metacafe" code="24">
       		 <moduleUrl>SearchView.swf</moduleUrl>
       		 <authMethodList>
         			 <authMethod type="1"/>
        		</authMethodList>
      	</provider>

     	<provider id="thissite" name="thissite" code="23" addsearch="true">
       		 <moduleUrl>SearchView.swf</moduleUrl>
       		 <authMethodList>
         			 <authMethod type="1"/>
        		</authMethodList>
        		<tokens>
          			<token>
           				 <name>extra_data</name>
            			<value>$partner_id</value>
          			</token>
        		</tokens>
      	</provider>
    </media>
    
    <media type="audio">
     	 <provider id="upload" name="upload" code="1">
       		 <authMethodList>
        			  <authMethod type="1"/>
       		 </authMethodList>
        		<moduleUrl>UploadView.swf</moduleUrl>
        		<fileFilters>
          			<filter type="audio">
           			 	<allowedTypes>flv,asf,wmv,qt,mov,mpg,avi,mp3,wav</allowedTypes>
         			 </filter>
       		 </fileFilters>
      	</provider>

      	<provider id="ccmixter" name="ccmixter" code="10">
       		 <moduleUrl>SearchView.swf</moduleUrl>
       		 <authMethodList>
          			<authMethod type="1"/>
          			<authMethod type="3"/>
        		</authMethodList>
      	</provider>
	  
<provider id="thissite" name="thissite" code="23">
<moduleUrl>SearchView.swf</moduleUrl>
        	<authMethodList>
          		<authMethod type="1"/>
        	</authMethodList>
       	 <tokens>
          		<token>
            		<name>extra_data</name>
           		 	<value>$partner_id</value>
         		 </token>
        	</tokens>
 </provider>
	  
    </media>

   <media type="image">

      	<provider id="upload" name="upload" code="1">
       	 <authMethodList>
         		 <authMethod type="1"/>
        	</authMethodList>
       	 <moduleUrl>UploadView.swf</moduleUrl>
        	<fileFilters>
          		<filter type="image">
            		<allowedTypes>jpg,bmp,png,gif,tiff</allowedTypes>
         	 	</filter>
        	</fileFilters>
      	</provider>

      	<provider id="flickr" name="flickr" code="3">
        		<moduleUrl>SearchView.swf</moduleUrl>
       		 <authMethodList>
          		<authMethod type="1"/>
        		  	<authMethod type="4" searchable="false"/>
        		</authMethodList>
     	 </provider>

      	<provider id="nypl" name="nypl" code="11">
       		 <moduleUrl>SearchView.swf</moduleUrl>
       		 <authMethodList>
          			<authMethod type="1"/>
       		 </authMethodList>
      	</provider>
      
     	 <provider id="thissite" name="thissite" code="23" addsearch="true">
       		 <moduleUrl>SearchView.swf</moduleUrl>
        		<authMethodList>
          			<authMethod type="1"/>
       		 </authMethodList>
        		<tokens>
          			<token>
            		<name>extra_data</name>
            		<value>$partner_id</value>
          			</token>
       		 </tokens>
      	</provider>
    </media>
  </mediaTypes>

  <StartupDefaults>
    <SingleContribution>false</SingleContribution>
    <showLogoImage>false</showLogoImage>
    <NavigationProperties>
      <showCloseButton>true</showCloseButton>
      <enableIntroScreen>false</enableIntroScreen>
      <enableTagging>true</enableTagging>
    </NavigationProperties>
    <gotoScreen>
      <mediaType>video</mediaType>
      <mediaProviderName>upload</mediaProviderName>
 </gotoScreen>
  </StartupDefaults>
</kcw>
(2564 reads)