Ext.ux.FlashControl - Mediator for Flash Movies

[Ronaldo]

Thanks for answering. I found the answer and adapted it to my needs (this points to the Ext.form.FormPanel)

this.previewPanel = new Ext.Panel({
            title: 'Preview',
            region: 'east',
            layout: 'fit',
            width: '50%',
            collapsible: true,
            split: true,
            tbar: [{ 
                text:'Reload player',
                scope: this,
                handler:function(){ 
                    this.previewPanel.remove(this.flashComponent); 
                    this.flashComponent = this.getFlashComponent(); // returns a new Ext.FlashComponent
                    this.previewPanel.add(this.flashComponent);
                    this.doLayout();
                } 
            }]
        });

Works like charm!

Cheers,
Ronaldo

[Ronaldo]

Hi,

One last question (I hope )

When I minimize the panel, or deactivate the tab the panel is on, the flash movie restarts every time when it becomes visible again... which is rather annoying... It should continue playing, as it does in your examples.

Your example shows a window, and when minimizing that, the movie just keeps playing.
In my case (with the same youtube movie) it stops playing and on re-opening the panel, the movie is stopped at time 0.

Any idea what might cause this behaviour?

I added a collapsible:true to your panel example, and that seems to work fine. With the following changes, your flashmovie continues playing when collapsed:

northPanel = new Ext.Panel({
            region    : 'north',
            height    : 100,
            layout    : 'fit',
            bodyStyle : 'background:#EDEDED',
            title: 'north',
            collapsible: true,
            split: true
        });

I also noted that you don't include an items property in the northpanel, like

items:[flashComponent]

But that appearantly the flashControl attaches itself to the northpanel when rendered/activated:

 
flashControl = new Ext.ux.util.FlashControl({
            flashComponent    : movie,
            container         : northPanel,
            ....

If I omit the items property in my collapsible panel, I don't see the flash movie when the tab is opened on which the panel is situated...

Here's my code:

this.flashComponent = this.getFlashComponent(); 
        this.flashControl = this.getFlashControl();
        
        this.previewPanel = new Ext.Panel({
            title: 'Preview',
            region: 'east',
            layout: 'fit',
            width: '50%',
            collapsible: true,
            split: true,
            tbar: [{ 
                text:'Reload player',
                scope: this,
                handler:function(){ 
                    this.reloadPlayer(this.contentField.getRawValue());
                } 
            }]
            ,
            items:[this.flashComponent]
        });

this.tabPanel = new Ext.TabPanel({
            xtype:'tabpanel',
            activeTab: 0,
            anchor:'0 -65',
            height: 200,
            autoWidth: true,
            hideLabel: true,
            plain: true, 
            items:[{
                 title: 'General',
                 ...
               }, {
               title: 'Content',
               layout:'border',        
                items: [{
                    title: 'Content',
                    region: 'center',
                    split: true,
                    layout: 'fit',
                    items: [this.contentField] // A textArea
                }, 
                    this.previewPanel
                ]
            }]
        });

getFlashComponent: function() {
        return new Ext.FlashComponent({
            // its important to set the FlashComponents hideMode to offsets
            hideMode : 'offsets',
            id : 'dustinthewind',
            swfId : 'dustinthewind', 
            url      : 'http://www.youtube.com/v/1qxSwJC3Ly0&hl=de&fs=1&'
        }); 
    },
    getFlashControl : function() {
        return new Ext.ux.util.FlashControl({
            flashComponent    : this.flashComponent,
            container         : this.previewPanel,
            quirksFF          : false,
            quirksIE          : false,
            autoDragTracker   : false, // true gives same behaviour
            autoDestroy       : true, // false gives same behaviour
            autoAddListeners : [
             'collapse',
             'beforecollapse',
             'expand',
             'beforeexpand',
             'maximize'
            ], 
            getListenerConfig : function() {
                //var tabPanel = this.container.ownerCt;
                //var mainTabPanel = tabPanel.ownerCt.ownerCt;
                return {
                    activate : {
                        fn     : this.flashComponent.show,
                        scope  : this.flashComponent,
                        items : [this.container]//, tabPanel, mainTabPanel]
                    },
                    deactivate : {
                        fn     : this.flashComponent.hide,
                        scope  : this.flashComponent,
                        items : [this.container]//, tabPanel, mainTabPanel]
                    },
                    beforecollapse : {
                        // hideFlashComponent...
                        fn    : 'hideFlashComponent',
                        // ...will be called when this.container's
                        // beforecollapse event triggers
                        scope  : this,
                        strict : false,
                        items : [this.container]
                    },
                    maximize : {
                        // showFlashComponent...
                        fn    : 'showFlashComponent',
                        // ...will be called when this.container's
                        // maximize event triggers
                        scope  : this,
                        strict : false,
                        items : [this.container]
                    },
                    expand : {
                        // showFlashComponent...
                        fn    : 'showFlashComponent',
                        // ...will be called when this.container's
                        // expand event triggers
                        scope  : this,
                        strict : false,
                        items : [this.container]
                    },
                    beforeexpand : {
                        // hideFlashComponent...
                        fn    : 'hideFlashComponent',
                        // ...will be called when this.container's
                        // beforeexpand event triggers
                        scope  : this,
                        strict : false,
                        items : [this.container]
                    },
                    collapse : {
                        // hideFlashComponent...
                        fn    : 'hideFlashComponent',
                        // ...will be called when this.container's
                        // collapse event triggers
                        scope  : this,
                        strict : false,
                        items : [this.container]
                    }
                };
            }
        });

[ThorstenSuckow]

Try the following code.

        this.previewPanel = new Ext.Panel({
            title: 'Preview',
            region: 'east',
            layout: 'fit',
            width: '50%',
            collapsible: true,
            split: true,
            tbar: [{ 
                text:'Reload player',
                scope: this,
                handler:function(){ 
                    this.reloadPlayer(this.contentField.getRawValue());
                } 
            }]
            
            // no need to add this, as the container is just a placeholder and
            // no real container for the flashpanel
            //,items:[this.flashComponent]
            
        });

this.tabPanel = new Ext.TabPanel({
            xtype:'tabpanel',
            activeTab: 0,
            anchor:'0 -65',
            height: 200,
            autoWidth: true,
            hideLabel: true,
            plain: true, 
            items:[{
                 title: 'General',
                 ...
               }, {
               title: 'Content',
               layout:'border',        
                items: [{
                    title: 'Content',
                    region: 'center',
                    split: true,
                    layout: 'fit',
                    items: [this.contentField] // A textArea
                }, 
                    this.previewPanel
                ]
            }]
        });

getFlashComponent: function() {
        return new Ext.FlashComponent({
            // its important to set the FlashComponents hideMode to offsets
            hideMode : 'offsets',
            id : 'dustinthewind',
            swfId : 'dustinthewind', 
            url      : 'http://www.youtube.com/v/1qxSwJC3Ly0&hl=de&fs=1&'
        }); 
    },
    
  
    getFlashControl : function() {
        return new Ext.ux.util.FlashControl({
            flashComponent    : this.flashComponent,
            container         : this.previewPanel,
            autoAddListeners  : true
        });
        
        
    
    // Moved here just to make sure components are available when methods are called
    this.flashComponent = this.getFlashComponent(); 
    this.flashControl = this.getFlashControl();
    

[Ronaldo]

Hi,

Your fixes work fine! Thanks!

The flashComponent is on a tab in a tabpanel nested in another tabpanel.
It would be great if your component could autodetect this and automagically attach listeners to it's parenttabpanels for the beforetabchange and tabchange events...

I did this for my situation like this, but in general, there's no previewPanel.

getListenerConfig : function() {
                var pItems = [this.container];
                var ow = this.container.ownerCt;
                while(ow != null) {
                    if(ow.constructor.xtype=='tabpanel') {
                        pItems.push(ow);
                    }
                    ow = ow.ownerCt
                }

                return {
                    beforetabchange: {
                        fn: function(p,newTab,currentTab) {
                            if(newTab.previewPanel != this.container) {
                                this.hideFlashComponent();
                            } 
                        },
                        scope  : this,
                        items : pItems
                    },
                    tabchange: {
                        fn: function(p,newTab) {
                            if(newTab.previewPanel == this.container) {
                                this.showFlashComponent();
                            } 
                        },
                        scope  : this,
                        items : pItems
                    },...

Ronaldo

[Ronaldo]

Ow, still a small issue... When I reload the player using

        this.previewPanel.remove(this.flashComponent);
        this.flashComponent = this.getFlashComponent(data);
        this.previewPanel.add(this.flashComponent);
        this.doLayout();

where this is an Ext.Panel, it displays fine.
However when I now start the flash movie, and then collapse its surrounding panel, the movie stops playing.
It should continue playing.

After expanding the panel, the movie has jumpt to the start and is not playing any more.
It just has something to do with the reloading code above, because this scenario works fine when I don't reload the flashComponent using the code above.

Best regards,
Ronaldo

[casbar]

Hello,

really great Extension... !!
But I have one problem, when I implement the last version of the ManagedIFrame in my application, and I want to close a window, containing a FlashComponent, the Flash movie doesn't will disappear!

Any idea?
Thankyou,
casbar

[darkdestruction]

Hello Folks!,

I fixed a bug in flashControl Component.
When you had this component into a window which is child of a "renderTo" attribute Ext.Window, You could not destroy it, causing a crash (the component remained in the Window). Bellow, follow the solution:

    
    autoEvents : [        'expand',
        'beforeexpand',
        'collapse',
        'beforecollapse',
        'activate',
        'deactivate',
        'maximize',
        'close' //add "close" to autoEvent 
    ],

    autoInstallListeners : function()    {
      //preserve the old code here...

         //Destroy flashComponent when the last container is a child Window                    case (container.container):
                        if (activeEvents['close'] && container.getXType() == 'window') {
                            
                            var masterContainer = container.container instanceof Ext.Element? Ext.getCmp(container.container.id):container.container;
                            masterContainer.on('close',this.onDestroy,this);
                            this.appliedListeners.push([
                                masterContainer, 'close', this.onDestroy, this
                            ]);
                        }
    }

That worked for me!!!

[ThorstenSuckow]

Sweet, thanks. Which Ext-version did you use with this code?

[darkdestruction]

I'm using Ext 3.4