Creating a Compact Minimizing List Player

If you were a Video Cloud customer before the release of Video Cloud 3, you might wonder what happened to the Compact Minimizing List Player. Well, it's back, and better than ever, using BEML and a custom module. While the BEML displays the playlist, the module draws and controls the button that shows the list. 

Here's the player. Notice the extra button to the right of the Play/Pause button.

Let's look at the BEML player template for this player. 

BEML Player Template for the Compact Minimizing List Player

<Runtime>
  <Theme name='Deluxe' style='Dark'/>
  <Layout id='application' width='300' height='300' boxType='vbox' padding='0' gutter='0'>
     <Canvas>
       <VideoPlayer id='videoPlayer' video='{videoList.selectedItem}' />
       <SWFLoader source='flash/CompactMinimizingListPlayer.swf?buttonX=35&amp;buttonY=283&amp;listY=135'
                  x='0' y='0' />
       <VBox gutter='0' id='expandedList' y="1000">
          <List id='videoList' rowHeight='38' automaticAdvance='true'
                selectOnClick='true' itemInsetV='4' itemLeading='2' height='165'>
             <ListItem boxType='hbox'>
                <Spacer width='8' />
                <VBox width='36' height='100%' vAlign='middle'>
                    <ThumbnailButton height='30' data='{currentItem}' 
                                     source='{currentItem.thumbnailURL}' />
                </VBox>
                <Spacer width='7' />
                <TitleLabel text='{currentItem.displayName}' truncate='true' vAlign='middle'/>
                <Spacer width='3' />
             </ListItem>
          </List>
        </VBox>
      </Canvas>
  </Layout>
</Runtime>

The BEML contains three major elements: the video player, our custom SWF loader, and a vertical list to render the videos in the player's playlist. It is essentially just like the Video Cloud Video Player with Dropdown Navigation template with the addition of a custom SWF.

The custom SWF is loaded with this BEML SWFLoader element:

<SWFLoader source='flash/CompactMinimizingListPlayer.swf?buttonX=35&amp;buttonY=283&amp;listY=135'
                  x='0' y='0' />

The custom SWF takes 3 attributes: 

• buttonX: X position of playlist expand button
• buttonY: Y position of playlist expand button
• listY: The Y position the playlist assumes when the viewer clicks the button and causes it to expand. It is initially located outside of the player (y="1000").

Custom Module

You can download a zip file that contains the ActionScript source code and compiled SWF for our custom module. You can extract the SWF and host it on your own server, and it should work in your players. You may need to modify the buttonX and buttonY positions of the button, depending on your player size. Remember to take account of Flash cross-domain security.

Like all custom modules, our custom SWF retrieves the API modules and instantiates the necessary listeners in the initialize method:

override protected function initialize():void {
    // Get Module. 
    player.loadModules(); 
    experienceModule = player.getModule(APIModules.EXPERIENCE) as ExperienceModule;
    videoModule = player.getModule(APIModules.VIDEO_PLAYER) as VideoPlayerModule;
    menuModule = player.getModule(APIModules.MENU) as MenuModule;           

    // Event listeners 
    menuModule.addEventListener(MenuEvent.MENU_PAGE_OPEN,onMenuPageOpen); 
    menuModule.addEventListener(MenuEvent.MENU_PAGE_CLOSE,onMenuPageClose);
    videoModule.addEventListener(MediaEvent.PLAY,onMediaPlay);            
    experienceModule.addEventListener(ExperienceEvent.ENTER_FULLSCREEN, onEnterFullScreen);
    experienceModule.addEventListener(ExperienceEvent.EXIT_FULLSCREEN, onExitFullScreen);
  
    drawMe();
}

The method drawMe, called on the last line of initialize, draws the playlist expand button and assigns a listener on the button's click event. The button's x and y values are set to the parameters passed in the URL.  Feel free to add additional hover states, change the icon, etc. to the button in this method.

private function drawMe():void {
    var paramObj:Object = LoaderInfo(this.root.loaderInfo).parameters;
    listY = paramObj.listY;
 
    var showListImage:Bitmap = new ShowListButton();
    showListButton = new Sprite();
    showListButton.addChild(showListImage);
    showListButton.x = paramObj.buttonX;
    showListButton.y = paramObj.buttonY;
    showListButton.mouseEnabled = true;
    showListButton.buttonMode = true;
    this.addChild(showListButton);
   
    showListButton.addEventListener(MouseEvent.CLICK,onExpandListClick);
}

Showing and hiding the list is done in the expandList and collapseList methods:

private function expandList():void {
    // Move tabs to visible
    var expandedList:LayoutBox = experienceModule.getElementByID("expandedList") as LayoutBox;            
    expandedList.move(0,listY);                    
   
    // Show Menu
    menuModule.showMenuPage(MenuModule.INFO);
    showListButton.visible = false;    
}

private function collapseList():void {
    var expandedList:LayoutBox = experienceModule.getElementByID("expandedList") as LayoutBox;
    expandedList.move(0,1000);    
    showListButton.visible = true;        
}

On expandList, the program retrieves the expanded list box using the experienceModule.getElementByID method, and sets the y value to the listY value (as defined in the URL parameter). Once the y value is set, the expanded list pops up in the player, allowing the viewer to interact with the list in the same way as with any other Brightcove list component. 

At this point, the list is covering part of the video player screen, which means we need a method to shrink the video screen. The simplest way to decrease the video screen size is to show the menu info screen, resulting in a small video screen in the top left of the player. Though the menu info screen also displays the related videos, these videos are covered by the expanded playlist.  That's all!  Upon selecting a video in the playlist, the selected video loads in the video player (no extra logic is required from our custom SWF).  Our SWF listens for the Media.PLAY event to collapse the list after this action.

The collapseList method simply retrieves the expanded list box and moves it out of sight by setting the y position to 1000.

Other various listener methods, such as onMenuPageClose, assist in closing the expanded list when necessary.