TheaterMania Component Library

Banner 

<div class="banner js-banner">
    <img src="/assets/images/showpage/saigonBanner.jpg" alt="image-alt" class="banner-image" />
</div>
 
<div class="banner{{#if full-banner}} js-banner{{/if}}">
  {{#if video-banner}}
    <div class="banner__video">
      {{render '@video' video-modifiers merge=true}}
      <button class="banner__video-controls js-banner__video-controls" aria-label="{{aria-label}}">
        <span class="controls-pause">{{render '@icons--pause'}}</span>
        <span class="controls-play">{{render '@icons--play'}}</span>
      </button>
    </div>
    {{else}}
      <img src="{{image}}" alt="image-alt" class="banner-image" />
  {{/if}}
</div>
 
{
  "full-banner": true,
  "image": "/assets/images/showpage/saigonBanner.jpg",
  "image-alt": "Example image alt",
  "aria-label": "Pause"
}
  • Content: 
    const brightCoveVideo = document.querySelector(`.vjs-tech`);
const controlsBtn = document.querySelector(`.js-banner__video-controls`);
const banner = document.querySelector(`.js-banner`);

if (banner) {
  // Demo - sets Showpage banner height to 100vh - the height of the header.
  // Utilizing this is not finalized and it is recommended set a max-width on the banner
  // rather than calculating height.
  const header = document.querySelector(`.js-header-container`);
  banner.style.maxHeight = `calc(100vh - ${header.offsetHeight}px)`;

  if (brightCoveVideo) {
    brightCoveVideo.addEventListener(`playing`, () => {
      controlsBtn.classList.toggle(`banner_video-controls--pause`);
      controlsBtn.setAttribute(`aria-label`, `Pause`);
    });

    brightCoveVideo.addEventListener(`pause`, () => {
      controlsBtn.classList.toggle(`banner_video-controls--pause`);
      controlsBtn.setAttribute(`aria-label`, `Play`);
    });

    controlsBtn.addEventListener(`click`, () => {
      brightCoveVideo.paused ? brightCoveVideo.play() : brightCoveVideo.pause();
    });
  }
}
  • URL: /components/raw/banner/Banner.js
  • Filesystem Path: src/components/01-Units/Banner/Banner.js
  • Size: 1.1 KB
  • Content: 
    .banner__video {
  position: relative;
  display: block;
  margin: 0 auto;
}

.banner__video-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  padding: 0 0.13rem;
  top: 0.5rem;
  right: 0.5rem;
  width: 2rem;
  height: 2rem;
  border-radius: $border-radius;
  border: none;
  background: rgba($color-black, 0.5);
  cursor: pointer;

  @include breakpoint($break-medium) {
    top: 1rem;
    right: 1rem;
  }
}

.icon {
  .banner__video-controls & {
    opacity: 0;
    transition: $transition;
  }
}

.icon--pause {
  .banner__video-controls & {
    width: 1.75rem;
    height: 1.75rem;
    stroke: $color-white;
    stroke-width: 4;
    opacity: 0;
  }

  .banner_video-controls--pause & {
    opacity: 1;
  }
}

.controls-play {
  position: absolute;
  top: calc(25% - 0.13rem);
  left: calc(25% - 1px);
}

.icon--play {
  .banner__video-controls & {
    width: 1.25rem;
    height: 1.25rem;
    fill: $color-white;
    stroke: none;
    opacity: 1;
  }

  .banner_video-controls--pause & {
    opacity: 0;
  }
}

.banner-image {
  margin: 0 auto;
  width: 100%;
  max-width: 100rem;
}
  • URL: /components/raw/banner/Banner.scss
  • Filesystem Path: src/components/01-Units/Banner/Banner.scss
  • Size: 1.1 KB

The banner envisioned and employed for this can be seen on the show page. This can be an image or video banner. The video banner is an autoplaying Brightcove video without traditional video controls.