Auto-resizing player in BEML

In this example, I'm trying to solve two problems at once:

  • when viewers start a video, you want them to watch it, without being distracted by the other items in a playlist or the surrounding decor
  • you want to take advantage of all the real estate you have to show the video in as large a size as possible

The solution below is pure BEML, no programming required. Click play or select a video from the playlist to see how it works -- and pause the video to see the full dynamics.

 

Here's how it's done. The layout has fixed dimensions, and is divided into two HBoxes, with an explicit height only for the lower one. The upper HBox is divided between the player and the simple playlist, with the width of List component set explicitly:

Template Layout

The key to the magic resizing of the player is that the List component and the whole lower HBox have their includeInLayout attributes data-bound to !videoPlayer.playing, meaning they are there when no video is playing, and disappear whenever playback occurs. Since the video player and its surrounding layout container are sized relatively, they fill up the space of the layout during playback. Here's the complete BEML code:

<Runtime>
  <Theme name="Deluxe" style="Light">
    <Style id="default"><![CDATA[.titleText {fontSize: 12;}.bodyText {fontSize: 10;}.linkText {fontSize: 10;}]]></Style>
  </Theme>
  <Layout id="application" width="800" height="450" boxType="vbox" padding="6" gutter="4">
    <HBox gutter="6">
      <ChromelessVideoPlayer id="videoPlayer" video="{videoList.selectedItem}"/>
      <List id="videoList" width="177.78" rowHeight="78" automaticAdvance="false" 
        selectOnClick="true" itemInsetV="4" itemLeading="2" includeInLayout="{!videoPlayer.playing}">
        <ListItem boxType="hbox" hAlign="center" vAlign="middle">
          <ThumbnailButton height="60" width="107" 
            data="{currentItem}" source="{currentItem.thumbnailURL}"/>
        </ListItem>
      </List>
    </HBox>
    <HBox height="100" padding="5" hAlign="center" 
      includeInLayout="{!videoPlayer.playing}" >
      <Image id="bottomImage" width="728" height="90" source="http://files.brightcove.com/BCL_bannerImage.jpg"/>
    </HBox>
  </Layout>
</Runtime>