Scrubber

The player includes a scrubber to present consistent controls across browsers. Basic customization of colors can be set via the PoWaSettings.colors object. The template and style can also be customized. There are currently two “out of the box” default styles. The player can also be configured to use the browser’s native controls.

Base Theme Manipulation

The base theme of the player can be changed. There are three possible methods to produce the change. The following are examples of places where the theme can be declared.

Via data-attribute

    <div class="powa" data-org="..." data-uuid="..." data-theme="refresh2021"></div>

Via PoWaSettings.theme Object

    PoWaSettings.theme = 'refresh2021';

One way to express the theme choice is in the your script, similar to the above customization, by setting the PoWaSettings.theme value to refresh2021 the refresh theme will be activated. If your player is currently displaying the updated theme without having explicitly set the value in your script, and you would like to reactivate the original theme set the value to original this will deactivate the theme update.

Customization

The scrubber can be customized by defining custom HTML and/or CSS. The structure of the scrubber itself can be customized by providing a PoWaSettings.scrubber.template function that returns a string of HTML. The style of the scrubber can be updated by providing a string of CSS or a function that returns a string of CSS on PoWaSettings.Scrubber.Style.

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

    PoWaSettings.scrubber = PoWaSettings.scrubber || {
    // default template
    template: () => `
        <span class="powa-bar-padding"></span>
        <div class="powa-bar-prev-next powa-bar-prev-next-hidden powa-bar-prev powa-click-prev-click">
            <i class="fa fa-backward" aria-hidden="true"></i>
        </div>
        <div class="powa-bar-play-pause powa-click-play-pause-click">
            <i class="powa-bar-play fa fa-play" aria-hidden="true"></i>
            <i class="powa-bar-pause fa fa-pause" aria-hidden="true"></i>
        </div>
        <div class="powa-bar-prev-next powa-bar-prev-next-hidden powa-bar-next powa-click-next-click">
            <i class="fa fa-forward" aria-hidden="true"></i>
        </div>
        <div class="powa-bar-time"></div>
          <div class="powa-bar-scrubbers">
        <div class="powa-bar-scrubber powa-click-scrubber-click"></div>
            <div class="powa-bar-scrubber-progress"></div>
            <div class="powa-bar-scrubber-time"></div>
        </div>
        <div class="powa-bar-duration"></div>
        <div class="powa-bar-audio">
            <div class="powa-bar-volume-scrubber powa-click-volume-click">
                <div class="powa-bar-volume-level"></div>
            </div>
            <div class="powa-bar-audio-icon powa-click-audio-click">
                <i class="powa-bar-mute fa fa-volume-up" aria-hidden="true"></i>
                <i class="powa-bar-unmute fa fa-volume-off" aria-hidden="true"></i>
            </div>
        </div>
        <div class="powa-bar-subtitles powa-touch-subtitles-touch">
            <div class="powa-bar-subtitles-controls">
                <div class="powa-bar-subtitles-tracks"></div>
                <div class="powa-bar-subtitles-customize powa-click-subtitles-customize-click">
                    <i class="fa fa-cog" aria-hidden="true"></i>
                </div>
            </div>
            <div class="powa-bar-subtitles-icon powa-click-subtitles-click">
                <i class="fa fa-cc" aria-hidden="true"></i>
            </div>
        </div>
        <div class="powa-bar-fullscreen powa-click-fullscreen-click">
            <i class="powa-bar-expand fa fa-expand" aria-hidden="true"></i>
            <i class="powa-bar-compress fa fa-compress" aria-hidden="true"></i>
        </div>
        <span class="powa-bar-padding"></span>`,

    // default style
    style: () => `
        .powa-bar-padding {
            width: 3px;
        }

        .powa-bar {
            position: absolute;
            bottom: 0;
            left: 0;

            width: 100%;
            height: 25px;

            display: flex;
            align-items: center;

            user-select: none;
            color: rgb(240, 248, 255);

            font-size: 16px;
            font-family: sans-serif;
            text-shadow: 0 0 2px rgba(0, 0, 0, 0.75);

            background-color: rgba(0, 0, 0, 0.25);

            z-index: 2;
        }

        .powa-bar-hide {
            height: 0;
            opacity: 0;
            pointer-events: none;

            transition: all 0.5s;
        }

        .powa-bar-play-pause {
            display: flex;
            align-items: center;
            justify-content: space-around;

            min-width: 14px;
            margin: 0 2px;

            transition: all 0.25s;
        }

        .powa-bar-play-pause:active {
            color: rgb(153, 50, 204);
        }

        .powa-bar-prev-next {
            font-size: 12px;
            transition: all 0.25s;
        }

        .powa-bar-prev-next:active {
            color: rgb(153, 50, 204);
        }

        .powa-bar-prev-next-hidden {
            width: 0;
            opacity: 0;
            pointer-events: none;
        }

        .powa-bar-time {
            margin: 0 2px;
        }

        .powa-bar-duration {
            margin: 0 2px;
        }

        .powa-bar-scrubbers {
            pointer-events: none;
            position: relative;
            display: flex;
            width: 100%;
            height: 12px;
            border: 1px solid rgba(240, 248, 255, 0.9);
            border-radius: 3px;
            margin: 0 2px;
            overflow: hidden;
        }

        .powa-bar-scrubber {
            pointer-events: auto;

            width: 100%;
            height: 100%;

            background-color: rgba(240, 248, 255, 0.5);
        }

        .powa-bar-scrubber-progress {
            position: absolute;

            height: 100%;
            background-color: rgba(153, 50, 204, 0.2);

            transition: width 0.1s;
        }

        .powa-bar-scrubber-time {
            position: absolute;

            height: 100%;
            background-color: rgba(153, 50, 204, 0.9);

            transition: width 0.1s;
        }

        .powa-bar-audio {
            display: flex;
            align-items: center;
            justify-content: flex-end;

            margin: 0 2px;

            width: 15px;
            transition: all 0.2s;
        }

        .powa-bar-audio:hover {
            width: 70px;
        }

        .powa-bar-audio-icon {
            display: flex;
            align-items: center;
            justify-content: space-around;

            width: 15px;

            transition: all 0.25s;
        }

        .powa-bar-audio-icon:active {
            color: rgb(153, 50, 204);
        }

        .powa-bar-volume-scrubber {
            position: relative;
            overflow: hidden;

            width: 0;
            margin: 0;
            opacity: 0;
            height: 12px;

            transition: all 0.2s;
        }

        .powa-bar-audio:hover .powa-bar-volume-scrubber {
            border: 1px solid rgba(240, 248, 255, 0.9);
            background-color: rgba(240, 248, 255, 0.5);
            border-radius: 3px;

            opacity: 1;
            width: 50px;
            margin-right: 2px;
        }

        .powa-bar-volume-level {
            height: 100%;
            position: absolute;
            pointer-events: none;
            background-color: rgba(153, 50, 204, 0.9);

            transition: width 0.2s;
        }

        .powa-bar-subtitles {
            display: flex;
            align-items: center;
            justify-content: space-between;

            margin: 2px;
            max-width: 100px;
        }

        .powa-bar-subtitles-controls {
            max-width: 0;
            margin-bottom: 1px;
            opacity: 0;
            height: 14px;
            overflow: hidden;

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

            font-size: 14px;
            text-shadow: 0 0 1px rgba(240, 248, 255, 0.5);

            transition: all 0.2s;
        }

        .powa-bar-subtitles:hover .powa-bar-subtitles-controls {
            border: 1px solid rgba(240, 248, 255, 0.9);
            background-color: rgba(240, 248, 255, 0.5);
            border-radius: 3px;

            max-width: 150px;
            margin-right: 1px;
            padding: 0 1px;
            opacity: 1;
        }

        .powa-bar-subtitles-tracks {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .powa-bar-subtitles-track {
            max-width: 0;
            transition: all 0.2s;
        }

        .powa-bar-subtitles-track:hover {
            text-shadow: 0 0 2px rgba(240, 248, 255, 0.75);
        }

        .powa-bar-subtitles-track-showing {
            color: rgb(153, 50, 204);
        }

        .powa-bar-subtitles:hover .powa-bar-subtitles-track {
            max-width: 18px;
            margin: 0 1px;
        }

        .powa-bar-subtitles-customize {
            max-width: 0;
            transition: all 0.2s;
        }

        .powa-bar-subtitles-customize:active {
            color: rgb(153, 50, 204);
        }

        .powa-bar-subtitles:hover .powa-bar-subtitles-customize {
            max-width: 14px;
            margin: 0 1px;
        }

        .powa-bar-subtitles-icon {
            margin: 1px;
        }

        .powa-bar-subtitles-enabled .powa-bar-subtitles-icon {
            color: rgb(153, 50, 204);
        }

        .powa-bar-subtitles-icon:active {
            color: rgb(153, 50, 204);
        }

        .powa-bar-fullscreen {
            margin: 0 2px;
            transition: all 0.25s;
        }

        .powa-bar-fullscreen:active {
            color: rgb(153, 50, 204);
        }`,
};

Disabling

If you would rather employ the browser’s native scrubber it can be re-enabled via one of two ways. The default for all players can be updated via PoWaSettings.scrubber.controls (default: “powa”). Set it to “native” to use the browser’s default scrubber. The controls for a specific player can be set via a data attribute, data-controls. This attribute can also be set conditionally (or across the board) client-side via PoWaSettings.powaUp.element.

Change default to ‘native’

    PoWaSettings.scrubber = PoWaSettings.scrubber || {
  controls: 'native', // default: 'powa'
};

Via data-attribute

    <div class="powa" data-org="..." data-uuid="..." data-controls="native"></div>

Set conditionally client-side

    PoWaSettings.powaUp.element.push(powas => {
    return new Promise((resolve, reject) => {
        powas.forEach(powa => {
            // 50/50 shot that a player gets 'powa' or 'native'
            if (Math.random() > 0.5) {
                powa.setAttribute('data-controls', 'native');
            }
        });

        resolve(powas);
    });
});