Ext.ux.YoutubePlayer - a mediaplayer for Ext JS

[lorezyra]

Without modifying the Ext.apply function of Ext.ux.YoutubePlayer.Control(),
Is there a way to simply not render the ejectbutton?

        Ext.apply(this, {
            cls   : 'ext-ux-youtubeplayer-control',
            items : [
                this.ejectButton,
                this.playButton,
                this.stopButton,
                this.previousButton,
                this.nextButton,
                ' ',
                this.sliderField,
                ' ',
                this.elRuntime,
                new Ext.Toolbar.Spacer(),
                this.muteButton
            ]
        });

I'm thinking something along the lines where I pass a config for the buttons I want...

[coolstar]

Can you give us an example of using the player in the desktop? I can't seem to get this to work. I have put in the code.

            new MyDesktop.YoutubeWindow(),

MyDesktop.YoutubeWindow = Ext.extend(Ext.app.Module, {
    id:'yt-win',
    init : function(){
        this.launcher = {
            text: 'Youtube Player',
            iconCls:'tabs',
            handler : this.createWindow,
            scope: this
        }
    },

    createWindow : function(){
                var playerPanel = new Ext.ux.YoutubePlayer({
   		developerKey : DEVELOPER_KEY,	
   		playerId	 : 'myplayer',
   		border		 : false,
   		ratioMode    : 'strict',
   		hideMode     : 'visibility',
   		bgColor 	 : "#000000",
   		bodyStyle 	 : 'background-color:#000000;'
   	});
   
   	playerPanel.on('ready', function(panel, player) {
   		panel.cueVideoById('u1zgFlCw8Aw', 0);
   	}, playerPanel);
        var desktop = this.app.getDesktop();
        var win = desktop.getWindow('yt-win');
        if(!win){
            win = desktop.createWindow({
                id: 'yt-win',
                title:'Youtube Player',
                width:740,
                height:480,
                iconCls: 'tabs',
                shim:false,
                animCollapse:false,
                border:false,
                constrainHeader:true,
                layout: 'fit',
                items: [playerPanel],
                bbar	 : new Ext.ux.YoutubePlayer.Control({
        	player   : playerPanel,
        	border	 : false,
        	id 		 : 'control', 
        	style	 : 'border:none;'
                }),
                listeners   : {
        	'resize': function(){this.bottomToolbar.fireEvent('resize')}
    	        }
            });
        }
        win.show();
    }
});

Here is the error reported by firebug:
Ext.Menu.Adapter is not a constructor

[wm003]

Ext.Menu.Adapter is not a constructor

i guess you are using Ext 3.x ? The Menu Component has been changed in Ext 3.x so the extension might need some code adjustments.

[ThorstenSuckow]

I have updated the component at r17 to work with Ext 3.0.3 (http://code.google.com/p/ext-ux-yout.../browse/trunk/)

[coolstar]

Thanks. I updated the extension, and now the player works when I open the window once, but after I close it(destroying all the components), I get the following error in firebug:

n is undefined

When I try to reopen the window, I get the following error:

I is undefined
Here is my code:

new MyDesktop.YoutubeWindow(),

MyDesktop.YoutubeWindow = Ext.extend(Ext.app.Module, {
    id:'yt-win',
    init : function(){
        this.launcher = {
            text: 'Youtube Player',
            iconCls:'tabs',
            handler : this.createWindow,
            scope: this
        }
    },

    createWindow : function(){
                var playerPanel = new Ext.ux.YoutubePlayer({
   		developerKey : DEVELOPER_KEY,	
   		playerId	 : 'myplayer',
   		border		 : false,
   		ratioMode    : 'strict',
   		hideMode     : 'visibility',
   		bgColor 	 : "#000000",
   		bodyStyle 	 : 'background-color:#000000;'
   	});
        var desktop = this.app.getDesktop();
        var win = desktop.getWindow('yt-win');
        if(!win){
            win = desktop.createWindow({
                id: 'yt-win',
                title:'Youtube Player',
                width:740,
                height:480,
                iconCls: 'tabs',
                shim:false,
                animCollapse:false,
                border:false,
                constrainHeader:true,
		minimizable: false,
                layout: 'fit',
                items: [playerPanel],
                bbar	 : new Ext.ux.YoutubePlayer.Control({
        	player   : playerPanel,
        	border	 : false,
        	id 		 : 'control', 
        	style	 : 'border:none;'
                }),
                listeners   : {
        	'resize': function(){this.bottomToolbar.fireEvent('resize')}
    	        }
            });
        }
        win.show();
    }
});

I am using the Extjs 3.1 desktop.

Here is the clip from the firebug console after I open the window, close it(destroying the components), and trying to reopen the window:
I had to send it in a zip, because it is too large, and is 2.7 MB uncompressed.

[ThorstenSuckow]

Thanks. I updated the extension, and now the player works when I open the window once, but after I close it(destroying all the components), I get the following error in firebug

No clue. Can you put a demo online so I can take a look at it myself?

[coolstar]

Here is the demo so that you can see for yourself:
http://coolstar.zxq.net/csos/login.php
Username: demo
Password: demo

Then, click Start > Youtube Player.

Note: For some reason, the demo doesn't work in IE. I have to resolve that. For now use some other browser. (e.g, Firefox, Chrome, Safari, Opera).

[coolstar]

Just a reminder. I put a live demo for you to see:
http://csos.zxq.net/

Username: demo
Password: demo

Then, click Start > Youtube Player.

Note: For some reason, the demo doesn't work in IE. I have to resolve that. For now use some other browser. (e.g, Firefox, Chrome, Safari, Opera).

[coolstar]

Can you check the demo I put just now?

[ThorstenSuckow]

I have checked the demo and can confirm the issue. It seems to be related with the SWFObject. Which Ext version are you using? 3.1?