Promo Screen

When the player is not running (neither playing nor paused), it displays a promo screen. The default promo screen displays the promo image from the current video’s ANS. You can customize the promo by defining a template function and/or defining the style to apply to the page.

Customization

The promo can be customized by defining custom HTML and/or CSS. The structure of the promo itself can be customized by providing a PoWaSettings.promo.template function that returns a string of HTML. The style of the promo can be updated by providing a string of CSS or a function that returns a string of CSS on PoWaSettings.Promo.Style. If the style is defined externally, e.g. a single site-wide CSS file, then PoWaSettings.Promo.Style should be set to null.

The promo utilizes PoWaControl classes to trigger custom events on elements. The most important event class is powa-click-promo-play which triggers the promoPlay event and kicks off video playback.

The default promo uses Font Awesome by default. This can be disabled by settings PoWaSettings.fontAwesome = false though a custom template must then be provided.

    PoWaSettings.promo = PoWaSettings.promo || {
    // default template
    template: settings => {
        return `
            <div class="powa-shot-image ${ classes.powaClickPlay }"${ settings.image ? ` style="background-image: url('${ settings.image }')"` : '' }>
                ${ settings.video ? `<video class="powa-shot-video" src="${ settings.video }" playsinline muted autoplay loop></video>` : '' }
                ${ settings.title ? `<div class="powa-shot-title">${ settings.title }</div>` : '' }
                <div class="powa-shot-play-btn ${ classes.powaClickPlay }">
                    ${ fontAwesomeIcon('play-circle-o', 'powa-shot-play-icon', 'fa-5x') }
                    ${ fontAwesomeIcon('circle-o-notch', 'powa-shot-loading-icon', 'fa-4x', 'fa-spin') }
                </div>
                ${ settings.video ? `<div class="powa-shot-video-toggle ${ classes.powaClickVideoToggle }">
                    ${ fontAwesomeIcon('pause-circle', 'powa-shot-video-toggle-icon', 'powa-shot-video-pause-icon') }
                    ${ fontAwesomeIcon('play-circle', 'powa-shot-video-toggle-icon', 'powa-shot-video-play-icon') }
                </div>` : '' }
            </div>
        `;
    },

    // default style
    style: (config = {}) => `
        .powa-shot {
             position: absolute;
             color: rgb(240, 248, 255);
             font-family: "HelveticaNeue", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
             z-index: 1;
             width: 100%;
             height: 100%;
             top: 0px;
             left: 0px;
        }

        .powa-shot-title {
             font-size: x-large;
             text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8);
             position: absolute;
             top: 15px;
             left: 15px;
        }

        .powa-shot-image {
             position: absolute;
             width: 100%;
             height: 100%;
             overflow: hidden;
             background-size: cover;
             background-repeat: no-repeat;
             background-position: center;

             display: flex;
             align-items: center;
             justify-content: space-around;
        }

        .powa-shot-video {
             position: absolute;
             width: 100%;
             height: 100%;
        }

        .powa-shot-video-toggle {
             position: absolute;
             bottom: 5px;
             right: 5px;

             display: flex;
             align-items: center;
             justify-content: center;

             height: 1em;
             width: 1em;
             border-radius: 1em;

             background-color: rgba(0, 0, 0, 0.25);
             box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.25);

             cursor: pointer;
             transition: all 0.25s;
             z-index: 1;
        }

        .powa-shot-video-toggle:hover {
             color: rgb(153, 50, 204);
        }

        .powa-shot-video-toggle-icon {
             opacity: 0.5;
        }

        .powa-shot-play-btn {
             display: flex;
             align-items: center;
             justify-content: center;

             height: 4em;
             width: 4em;
             border-radius: 2em;

             background-color: rgba(0, 0, 0, 0.25);
             box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.25);

             cursor: pointer;
             transition: all 0.25s;
             z-index: 1;
        }

        .powa-shot-play-btn:hover {
             color: rgb(153, 50, 204);
        }

        .powa-shot-play-icon,
        .powa-shot-loading-icon {
             opacity: 0.85;
        }
    `,
};