From TrillWiki

If you want to add AV controls to your skin with SkinXML, digging the codes through Stixe may make it even harder to understand what they are really about. In fact, adding AV controls is just as easy as adding any other controls.

Contents 1 Step 1: Know the Controls 2 Step 2: Decide the Method of Displaying these iControls 2.1 Method A: Just Place Them Plainly 2.2 Method B: Panels + Variables 2.3 Method C: Variables Only

[edit] Step 1: Know the Controls

First of all, Audio and video icontrols are basically the same as any other icontrols for other functions in a Private Message window, like the text display or text edit box. While the text edit box has the edit toolbar buttons, the edit box itself and the Send button, audio and video has their own set of buttons and displays too.

The general outline of the icontrols:

• Audio Chat requires icontrols that displays, mutes and changes the volume of the local and remote audio streams (microphone and speaker).
• Video Chat requires a video display, and toolbar buttons for filters and different video views (side by side, thumbnail, etc).
• Initiation and Confirmation Stati: Both types of chat requires icontrols for initiating and confirming the chat, and showing status messages of them as well.
• Time Travel: Audio Chat has its own set of Time Travel icontrols, but they will be superceded by the set of Time Travel controls for Video Chat.
• Video Chat are usually accompanied with Audio Chat, except Webcam mode in Yahoo!.
• Audio Chat in Conference: Though A/V iControls are mostly populated in Private Message Windows, please note that the Yahoo! medium also allows audio chat in Conference Windows.
• Webcam Broadcast Panel: Additionally, the Yahoo! medium also requires Video Broadcast controls in the Contact List. And only in this case, the controls must be contained in a panel.

For your further reference, view the complete list of icontrols here:

• Audio Chat Controls
• Video Chat Controls

[edit] Step 2: Decide the Method of Displaying these iControls

[edit] Method A: Just Place Them Plainly

You can place all of them in the window if you want to. However, since some of the controls, like Accept/Deny or Status, are only occasionally needed, and since audio and video chat are not always initiated, why consume all the space in the window? Therefore, we had devised a few methods between that will help you to hide things when they are not needed.

[edit] Method B: Panels + Variables

Steps:

1. Create Controls in Prefs
2. Create Components
3. Place iControls in Components
4. Use visible="variable" to turn things on and off
5. <panel> tag
6. Create Panel Zone in Prefs
7. Place in Private Message Window

(to be continued...)

[edit] Method C: Variables Only

The task of calculating the position and spaces occupied by the Audio and Video controls are handled by panels automatically if you use them. However, if you want to have a more rigid window layout, you can use frames and anchors instead of panels.