reskinning KAE

Joined: 07/07/2009

Points: 39

Peace!

Good Day to everyone,

Has anyone tried to re-skin KAE (or any of the components for that matter)
I see that in the source code Kaltura uses the flex_skins.swc lib for the skinning part. Are we allowed to tweak the design a bit?

I tried to import the source code to Flex Builder 3 (using SDK 3.3 and added the necessary datavisualization swc's) but I keep getting this error:

"[SWF] /KalturaAdvancedVideoEditor/bin-debug/KalturaAdvancedVideoEditor.swf - 3,432,949 bytes after decompression
initializing application.
get Parameters
**************
KalturaCVF build version is: 1.2.1.24417
**************
got partner info:
(com.kaltura.base.context::PartnerInfo)#0
ks = (null)
partner_id = (null)
partnerId = (null)
subp_id = (null)
subpId = (null)
uid = (null)
init KalturaApplication
get uiConf
undefined
at mx.utils::URLUtil$/internalObjectToString()[C:\autobuild\3.3.0\frameworks\projects\rpc\src\mx\utils\URLUtil.as:470]
at mx.utils::URLUtil$/internalObjectToString()[C:\autobuild\3.3.0\frameworks\projects\rpc\src\mx\utils\URLUtil.as:470]

Can anyone please shed some light to this problem?

You might be wondering why I want to re-skin, I kinda like bigger buttons and changing the color scheme to suite a demo site (keeping the logos of kaltura of course).

Wed, 07/08/2009 - 18:43

Joined: 01/05/2009

Points: 1697

Hi Andrew,

What you're missing setting up your partner details so that the editor will be able to connect to the Kaltura server and load your data.

During the upcoming weeks we will massively update the site with tutorials and documentation - so there is much to look for as skinning and styling is a part of it.

For your specific need -

Open the html-template/index.template.php .
On the first part of the file you will find the variables that need to be defined.
Set your partner details (partner id, sub partner id, ks) and the entry id you would like to load.
clean the project and re-build.

Now the changes should be made to the css, images and skin files - all located under src/assets .

Looking forward to see what you do! :)

Thu, 07/09/2009 - 14:34

Joined: 07/07/2009

Points: 39

Thanks for the reply.. I'll definitely try it out...
If you don't mind me asking what are partner details?

Thu, 07/09/2009 - 14:50

Joined: 07/07/2009

Points: 39

Is the partner details the one found in the email sent by Kalturas.com when the Register option was checked at the KalturaCE_v101 installation? ( btw, have you replicated our error at http://www.kaltura.org/error-message-array-0-failed-serialize-server-res... ) I'll try this info and fill out the stuff you said from that email :) Thanks again

Thu, 07/09/2009 - 15:05

Joined: 07/07/2009

Points: 39

Hi I filled up the following

$uid = "";
$uname = "";
$pid = "32882";

But I can't seem to find the uid and uname from the Kaltura Management console. Should I leave it blank?

Thu, 07/09/2009 - 15:18

Joined: 01/05/2009

Points: 1697

Hi Andrew,

uid and uname are custom fields you (the "partner" ) should use to manage users in your application context.
the uid (user id) is unique to your partner and the uname (user name) is just a name to the uid, and is not unique.

What is important as I mentioned are the following -
you got it on the registration to Kaltura.com via the KMC or when you first installed the KalturaCE

The partner id.
The subpid - this is always your partner id * 100. (so if your pid=2, your subid is 200).
The web secret.

Thu, 07/09/2009 - 15:26

Joined: 07/07/2009

Points: 39

Gotcha....
I got the pid, spid and secret from the Kaltura Management Console. The secret I placed in was the user secret value from the said console instead of the admin secret. Is this correct?

Anyway, I filled it up and cleaned the project... Ran it and I still got the following from the Flex Builder Console

[SWF] /KalturaAdvancedVideoEditor/bin-debug/KalturaAdvancedVideoEditor.swf - 3,432,949 bytes after decompression

initializing application.

get Parameters

**************

KalturaCVF build version is: 1.2.1.24417

**************

got partner info:

(com.kaltura.base.context::PartnerInfo)#0

  ks = (null)

  partner_id = (null)

  partnerId = (null)

  subp_id = (null)

  subpId = (null)

  uid = (null)

init KalturaApplication

get uiConf

undefined

        at mx.utils::URLUtil$/internalObjectToString()[C:\autobuild\3.3.0\frameworks\projects\rpc\src\mx\utils\URLUtil.as:470]

        at mx.utils::URLUtil$/internalObjectToString()[C:\autobuild\3.3.0\frameworks\projects\rpc\src\mx\utils\URLUtil.as:470]

I looked at the index.php file in the bin-debug, the values were there.

                $uid = "";

                $uname = "";

                $pid = "32882";

                $spid = "3288200";

                $secret = "<the user secret from the console>";

                $kshowid = "-1";

                $entryid = "-1";

                $entryversion = "-1";

                $host = "www.kaltura.com";

                $debugmode = "1";

This is weird huh?

Thu, 07/09/2009 - 15:34

Joined: 01/05/2009

Points: 1697

Well, for start, your missing an entry id - without it you don't tell the editor on what entry to work.
If you don't care about the user, pass anonymous in the uid and uname.

Last thing - We developed the KAE based on Flex 3.0 ... you might also try to use the same Flex SDK version (3.0) .

Thu, 07/09/2009 - 15:42

Joined: 07/07/2009

Points: 39

Kalturian, your help is wonderful
My apologies for being so .... nosey with my questions...
Will set my SDK back to ver 3.0
and for entryid, I tried to search for it in the email "Registration confirmation for Kaltura Partner Program" and in the Accounts -> Server Settings at the Kaltura Console but I have no luck... where can I get this info?

Again... thank you for your help

Thu, 07/09/2009 - 16:01

Joined: 01/05/2009

Points: 1697

the entry id is the representation to the actual mix you are working on..
next week we'll update with documentation that will clarify this better.

you might use the prepopulate your editor guide as a reference to learn how you work with the editor vs. the kaltura server.

Thu, 07/09/2009 - 22:44

#10

Joined: 07/07/2009

Points: 39

Hi Kalturian,

Again thank you for your assistance... I've read through the guide and am having difficulty understanding where the entryID should be taken. Is it taken from the MediaID (found under the "Add the entries to the new mix" header) or is it the mixID (found under the "Create a new mix(Rough Cut)" header)?

Again, your assistance has been invaluable and I thank you

Thu, 07/09/2009 - 23:01

#11

Joined: 07/07/2009

Points: 39

Hi Kalturian,

Just a side note. I've set my compiler to Flex 3.1 (it was the lowest ver 3 SDK that I had) and debugged the program

As usual I've setup the variables (I know they're incomplete):

                $uid = "anonymous";

                $uname = "anonymous";

                $pid = "32882";

                $spid = "3288200";

                $secret = "<user secret from console>";

                $kshowid = "-1";

                $entryid = "-1";

                $entryversion = "-1";

                $host = "www.kaltura.com";

                $debugmode = "1";

And I've noticed something in the Console trace output:

[SWF] /KalturaAdvancedVideoEditor/bin-debug/KalturaAdvancedVideoEditor.swf - 3,329,872 bytes after decompression

initializing application.

get Parameters

**************

KalturaCVF build version is: 1.2.1.24417

**************

got partner info:

(com.kaltura.base.context::PartnerInfo)#0

  ks = (null)

  partner_id = (null)

  partnerId = (null)

  subp_id = (null)

  subpId = (null)

  uid = (null)

init KalturaApplication

get uiConf

undefined

        at mx.utils::URLUtil$/internalObjectToString()[E:\dev\3.1.0\frameworks\projects\rpc\src\mx\utils\URLUtil.as:470]

        at mx.utils::URLUtil$/internalObjectToString()[E:\dev\3.1.0\frameworks\projects\rpc\src\mx\utils\URLUtil.as:470]

notice the :

got partner info:

(com.kaltura.base.context::PartnerInfo)#0

  ks = (null)

  partner_id = (null)

  partnerId = (null)

  subp_id = (null)

  subpId = (null)

  uid = (null)

Did we not fill most of these stuff up in the PHP part of the program... Looking at the JS code in the index.php, weren't these sent up to the SWF file as FlashVars? I'm using IE8 as the browser.

Fri, 07/10/2009 - 07:28

#12

Joined: 04/05/2009

Points: 354

In the KMC, if you click the Preview & Embed button next to an entry it will give you the embeddable code. For example:

You can find the Entry ID in there. In the above example the Entry ID is jglmokgtt4.

Fri, 07/10/2009 - 07:26

#13

Joined: 04/05/2009

Points: 354

Not sure if this is helpful, but is your development PC connected to the Internet? Maybe it's having trouble "talking" with the Kaltura server? Just throwing ideas out there...

Fri, 07/10/2009 - 12:15

#14

Joined: 07/07/2009

Points: 39

Peace!

Sir Hocking,

Thank you for your guidance.

Yes, my dev PC is connected to the internet... I'll try this one today :) Thank you

Fri, 07/10/2009 - 15:00

#15

Joined: 07/07/2009

Points: 39

Hi people... I tried to do a "back to zero" event. Cleaned out the dev copy of KAE and plopped in a new one from the original SVN and had Flex Builder 3 (with now SDK 3.0) rebuilding the workspace. An error occurred during rebuilding

Errors during build.

  Errors running builder 'Integrated External Tool Builder' on project 'KalturaAdvancedVideoEditor'.

  Variable references non-existent resource : ${workspace_loc:/Version/com/kaltura/versions/VersionUpdate.exe}

  Errors running builder 'Integrated External Tool Builder' on project 'KalturaAdvancedVideoEditor'.

  Launch configuration type id "org.eclipse.ant.AntBuilderLaunchConfigurationType" does not exist.

Possible causes:

        Missing specification of a launch type (missing plug-in)

        Incorrect launch configuration XML

Could this be the reason why I can't seem to make it work?

Anyway thinking of just copying the following folders and rebuilding the project again:
src
locale
libs
html-template
docs
asdocs

leaving behind the following XML files
buildLinkReport.xml
buildLocales.xml

will post what will happen :)

Fri, 07/10/2009 - 15:39

#16

Joined: 07/07/2009

Points: 39

WHAHA! Success! I have it running (well save some errors)

the top part of the page printed this:

Array ( [result] => Array ( [ks] => NjY0OWNkYmRiMjY0N2Q0YjYwMzI5MWYwNzg5ZjQzOWYxYmQ0NGRjNXwzMjg4MjszMjg4MjsxMjQ3MzI2MzkyOzA7MTI0NzIzOTk5Mi41OTg2O2Fub255bW91cztlZGl0Oio= [partner_id] => 32882 [subp_id] => 3288200 [uid] => anonymous [serverTime] => 1247239992 ) [debug] => Array ( [sigtype] => 1 [signature] => 4fe7f5a38bb1f7897a5ebb5998989c78 [execute_impl_time] => 0.0001060962677 [execute_time] => 0.0268068313599 [total_time] => 0.02715802192688 ) ) 

and the following errors appeared:

Alert.show -> entry loaded is not a roughcut.

Trace Console -> ERROR - get Entry-multiRequest

Alert.show -> error loading skin and style.

index.php held:

                $uid = "anonymous";

                $uname = "anonymous";

                $pid = "32882";

                $spid = "3288200";

                $secret = "<from console>";

                $kshowid = "-2";

                $entryid = "wfhi0ti0bk";

                $entryversion = "1";

                $host = "www.kaltura.com";

                $debugmode = "1";

I know the error is in the index.php... maybe you can shed some light?

Fri, 07/10/2009 - 19:18

#17

Joined: 07/07/2009

Points: 39

Hi, I downloaded http://www.kaltura.org/sites/default/files/pre-populated-mix.rar and used the code in testeditor.php

I'd like to share that the following files in the kae_v1.0.0 are not the same as the one found in testeditor.php

kaltura_client.php
kaltura_client_base.php

when using the files found in the subversion copy has this error

Fatal error: Call to undefined method KalturaClient::addRoughcutEntry() in /var/www/KalturaDev/KalturaAdvancedVideoEditor/bin-debug/index.php on line 76

So I replaced them with the ones in the http://www.kaltura.org/sites/default/files/pre-populated-mix.rar and it worked

Anyway ...

I inserted the code lines in testeditor.php and used the values to populate the following

                $flashVars = array();

                $flashVars["partnerId"] = $partnerId;

                $flashVars["subpId"]    = $subPartnerId;

                $flashVars["uid"]       = $user->userId;

                $flashVars["ks"]        = $sessionId;

                $flashVars["kshowId"]   = "entry-".$mix_id;

                $flashVars["entryId"]   = $mix_id;

                $flashVars["backF"]     = "onSimpleEditorBackClick";

                $flashVars["saveF"]     = "onSimpleEditorSaveClick";

                $flashVars["quick_edit"] = 0;

                /*

                        Enter below you details (partner, secret for generating ks automatically and kshow/entry to load).

                */

                $uid = "anonymous";

                $uname = "anonymous";

                $pid = $partnerId;

                $spid = $subPartnerId;

                $secret = "<code in console>";

                $kshowid = "entry-".$mix_id;

                $entryid = $mix_id;

                $entryversion = "-1";

                $host = "www.kaltura.com";

                $debugmode = "1";

it seems to work fine save that of one error that still pops up (which is sad because this is the main reason for me asking for help because I want to reskin kae).

Alert.show ->"error loading skin and style."

Can someone shed light to this?

Sat, 07/11/2009 - 00:50

#18

Joined: 04/05/2009

Points: 354

Are the paths in the kae_net10_generic.xml file pointing to all the right places?

Mon, 07/13/2009 - 13:58

#19

Joined: 07/07/2009

Points: 39

Peace!

Thanks for the hint... I'll definitely check on this one

Mon, 07/13/2009 - 15:03

#20

Joined: 07/07/2009

Points: 39

Peace!

Yep, I checked the UICONFIG and it's all good

<uIConfig>

                        <cvf>

                                <pluginsDirectory>/swf/plugins/cvesdk</pluginsDirectory>

                                <mediaServerUrl>rtmp://{DOMAIN_NAME}/oflaDemo</mediaServerUrl>

                                <pluginsProvider>/swf/plugins/cvesdk/plugins.xml</pluginsProvider></cvf>

                        <target>KalturaAdvancedVideoEditor.swf</target>

                        <cssUrl>/assets/css/kae_net10_generic_styles.swf</cssUrl>

                        <localeUrl>/content/uiconf/droga5/net10/kae_1.0.5/kae_net10_en_US.swf</localeUrl>

                        <baseLocaleUrl>/content/uiconf/droga5/net10/kae_1.0.5/kae_net10_en_US_kaltura.swf</baseLocaleUrl></uIConfig>

unless, they need to be pointed to the HTTP_ROOT/projectFolder/bin-debug/
I'll make a backup and edit to assume it needs to be pointed as such
I'll post the update here soon

Mon, 07/13/2009 - 15:16

#21

Joined: 07/07/2009

Points: 39

Well that didn't work... instead of touching the xml itself I created another virt host which pointed to the ProjectFolder/bin-debug/ location and accessed the program from that specific host... still the error of not able to load the skins appeared.

Any suggestions?

Mon, 07/13/2009 - 23:27

#22

Joined: 01/05/2009

Points: 1697

You should locate the compiled css swf file, it should be under bin-debug/assets... and then set it on
<cssUrl>/assets/css/kae_net10_generic_styles.swf</cssUrl>

If you can't find the compiled css file under that directory, than you need to recompile (clean the project and compile again), still no file ? generate an error on the css file, recompile, fix the error, recompile and check again...

Tue, 07/14/2009 - 16:34

#23

Joined: 07/07/2009

Points: 39

Whoohoo! The error's gone (THANKS Kalturian)

But the whole thing is skinned in a RED Hue... anyway I'm sure it's because I didn't follow Kalturian's instruction to the letter. What I did was

1) copy the kae_net10_generic_styles.swf file from html-template\content\uiconf\droga5\net10\kae_1.0.5 and plop it into bin-debug\assets\css cause .... I'm lazy.... :) anyway, the thing kinda worked but I'll try to do what Kalturian suggested to the letter

FYI: the kae_net10_generic_styles.swf was not found at the bin-debug/assets/css folder ... so I think I'll have to do a clean compile again... :D but this is GREAT!

Tue, 07/14/2009 - 16:41

#24

Joined: 07/07/2009

Points: 39

it worked... still doing a clean build though (had to edit this post since my reply to Kalturian predated this one and this one said that I'll try his idea)

Wed, 07/15/2009 - 16:37

#25

Joined: 07/07/2009

Points: 39

Gosh... I don't know why but this red hue display does not coincide with the CSS values in kae_net10_generic_styles.css
i've tried filling the Application with BLACK Gradients and even the background-image is already black from the AppBg.png... and yet it's still a red hue... this is giving me a headache

Any updates on your documentation on skinning?

Wed, 07/15/2009 - 18:42

#26

Joined: 07/07/2009

Points: 39

I even compiled your flexSkinsCS3.fla so to create the same skin as seen in your demo but still the red-hue thing keeps on happening.... I'll do a clean build without copying the kae_net10_generic_styles.swf file from the html-template location

Thu, 07/16/2009 - 01:26

#27

Joined: 04/05/2009

Points: 354

Hi Andrew,

I tried compiling the KAE today - but had no luck at all... I've never worked with Flex, so that's understandable. Sorry I can't be of any help...

However - if you do ever get this working, it would be fantastic if you could help put together an "beginners guide" to skinning the KAE. I'm sure a lot of people here would appreciate your efforts and learn a lot from all the trouble you've had trying to get this thing to work... Anyway - just an idea!

Good luck with it! I'll keep trying on this end as well and let you know how I go...

Best Regards, Chris!

Thu, 07/16/2009 - 13:34

#28

Joined: 07/07/2009

Points: 39

Peace!

That's not a problem Chris... I've been taking notes in my steps ...
Update: Summary of my endeavours

1) Did clean build(s) (multiple builds) without copying the /html-template ... /kae_net10_generic_styles.swf to /bin-debug/asset/css/
Result:
error loading skins

Summary:
This file is EXTREMELY NECESSARY

2) Tried to create an error in the /src/assets/css/kae_net10_generic_styles.css file... Although I've never known a css file to produce a swf file before (there's always a first time)... no matter how I try, no error... no matter how many clean builds, no kae_net10_generic_styles.swf in the bin-debug/assets/css folder

Summary:
kae_net10_generic_styles.css controls the skin feature of KAE.
Changing some of the values by using another flex_skin.swc file (although you have to rename the flex_skin.swc, do not copy inside lib and manually just add the newly imported swc with a css definition file in the main KAE file via a tag) will replace the following skins
a) tabs
b) alerts
c) sliders
d) buttons

3)Did another clean build and tried to replace some of the skinning template inside kae_net10_generic_styles.css. Example the Application css background image .. replacing it with something weird and specifying a black background with no gradient... the results was NO EFFECT

4)Did another clean build and tried to override some of the css skinning template specified in kae_net10_generic_styles.css by placing my own custom css and REDEFINING them at the end of the code... sorta worked but the styles that I can change are still limited to the modules mentioned in #2

At this point I am at my wits end... so one last try

5) I published a new flex_skin.swc (backed up the one in the lib directory) using the provided for source fla found in src/assets/skins/flexSkinsCS3.fla (cause I thought that the flex_skins.swc used the flexSkins.fla source which was RED HUED theme) to create a dark Grey theme (similar to the one found at the Kaltura demo link for KAE)... exported the newly created swc file to the lib... did a clean build and....

.... FAILURE... still RED HUE theme using the dark Grey tabs, buttons, alerts, sliders...

So far I'm pretty good at changing tabs, buttons, alerts, sliders, tooltips... anything else is a bust.. :)

Fri, 07/17/2009 - 11:06

#29

Joined: 01/05/2009

Points: 1697

Andrew,

I will soon (week/two) update with a new tutorial about setting-up, compiling, skinning and styling the editors.
Till then, you'd have to bash it with a hammer (fiddler, debugger) and figure out what skin is being loaded and where to change it.

Good luck,

Zohar.

Fri, 07/17/2009 - 16:43

#30

Joined: 07/07/2009

Points: 39

Peace!

:) I guess it can't be helped... will try my best

Fri, 07/17/2009 - 17:55

#31

Joined: 07/07/2009

Points: 39

Peace!

Hi Zohar... thanks for the advice... If I may ask ... how do you create the "compiled css" that's specified in the kae_net10_generic.xml? you know the one specified in the cssUrl Tag that has the value of kae_net10_generic_styles.swf? it can't be the flex_skin cause it's too big... and I don't see any of .fla or a file that says kae_net10_generic_styles.fla

Sun, 07/26/2009 - 04:22

#32

Joined: 01/05/2009

Points: 1697

Hi Andrew,

The compiled swf is a Flex compiled CSS, you need to run Adobe Flex Builder or the Eclipse Flex Plugin to compile the CSS to SWF.

Mon, 08/10/2009 - 20:57

#33

Joined: 07/07/2009

Points: 39

Peace!

Just learned how to compile the css to swf from Zohar :D wow, can't believe how simple the problem was

--
Engr. Andrew John P. Young
IT Consultant/RH Technician
RHCT sn# 609003172208054
"With God Everything IS POSSIBLE"

Wed, 02/24/2010 - 23:55

#34

itmKalturaUser

Joined: 02/01/2010

Points: 10

How about images ?
I changed an image buttonclose.png to be of different color and now I compiled the css but the image still shows the same .. any idea on this ?

Wed, 08/12/2009 - 23:10

#35