Discovery Plugin

Discovery is a plugin to provide playlist functionality to embedded players. Once the plugin has been added to the {org}.js file it looks for the data-discovery=“true” data attribute and instantiates itself on the player. Discovery makes a request against the ‘playlist’ API endpoint using the value of data-playlist=”{Playlist Name}” to retrieve Video Center playlists.

Example

    window.addEventListener('powaRender', event => {
    const id = event.detail.id;
    const powa = event.detail.powa;

    new Discovery({id, powa});
});

Default CSS

    .powa-discovery-hidden {
    display: none;
}

.powa-discovery-tinted {
    background: rgba(0,0,0, 0.5);
}

.powa-discovery {
    background-color: #FAFAFA;
    border: 1px solid #E1E1E1;
    border-radius: 0 0 4px 4px;
    box-sizing: border-box;
    color: #222222;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.powa-discovery-header {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    padding: 20px;
    width: 100%;
}

.powa-discovery-title {
}

.powa-discovery-controls {
    display: flex;
    justify-content: center;
}

.powa-discovery-control {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
}

.powa-discovery-control-icon {
    cursor: pointer;
    margin: 0 10px;
}

.powa-discovery-control-left {
    justify-content: flex-end;
}

.powa-discovery-control-right {
    justify-content: flex-start;
}

.powa-discovery-playlist-wrap {
    margin-right: 10px;
    overflow-x: scroll;
}

.powa-discovery-playlist {
    display: flex;
    width: auto;
    padding: 0 10px 20px 10px;
}

.powa-discovery-divider {
    background-color: darkgray;
    border-radius: 1px;
    height: auto;
    margin: 0 10px;
    padding: 1px;
}

.powa-discovery-playlist-item-wrap {
}

.powa-discovery-playlist-item {
    margin: 0 10px;
    width: 150px;
    transition: all 0.5s;
}

.powa-discovery-playlist-item-hidden {
    opacity: 0;
    width: 0;
}

.powa-discovery-playlist-item-promo {
    cursor: pointer;
    margin-bottom: 10px;
    width: 100%;
    height: 84px;
    background-size: cover;
    background-position: center;
}

.powa-discovery-playlist-item-overlay {
    display: flex;
    align-items: flex-end;
    height: 100%;
    color: white;
    text-shadow: 1px 1px 5px black;
}

.powa-discovery-playlist-item-playing {
    font-size: 13px;
    margin-left: 10px;
    margin-bottom: 8px;
}

.powa-discovery-playlist-item-duration {
    font-size: 12px;
    margin-left: 10px;
    margin-bottom: 8px;
}

.powa-discovery-playlist-item-blurb {
    font-size: 16px;
    transition: opacity 0.5s;
    line-height: 17px;
    margin: 0;
    width: 100%;
}

.powa-discovery-playlist-item-blurb-hidden {
    opacity: 0;
}

@media only screen and (min-width: 480px) {
    .powa-discovery-header {
        font-size: 18px;
    }

    .powa-discovery-playlist-item-blurb {
        font-size: 16px;
    }

    .powa-discovery-playlist-item {
        width: 180px;
    }

    .powa-discovery-playlist-item-promo {
        height: 101px;
    }

    .powa-discovery-playlist-item-playing {
        font-size: 13px;
    }

    .powa-discovery-playlist-item-duration {
        font-size: 13px;
    }

    .powa-discovery-playlist-item-blurb {
        line-height: 20px;
    }
}

Customization

Some basic configurations can be applied to the default style and html. Arrow styles, colors, fonts, etc. can be easily adjusted via the Discovery configuration object.

By default, the CSS for Discovery is generated by a function that takes a ‘style’ object and returns a string of CSS. These defaults can be selectively overwritten by providing a style object in the Discovery configuration object. Listed below are the default values and an example of overwriting a few properties.

Default Style Object

    const defaultStyle = {
    color: '#222222',
    borderColor: '#E1E1E1',
    backgroundColor: '#FAFAFA',
    dividerColor: 'darkgray',
    fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif',

    gutter: 10,
    slideTime: 0.5,
    opacityTime: 0.5,

    breakpoint: '480',

    mobile: {
        headerFontSize: '18px',
        blurbFontSize: '16px',
        blurbLineHeight: '17',

        playlistImageWidth: '150',
        playlistImageHeight: '84',

        playingFontSize: '13',
        durationFontSize: '12',
    },

    desktop: {
        headerFontSize: '18px',
        blurbFontSize: '16px',
        blurbLineHeight: '20',

        playlistImageWidth: '180',
        playlistImageHeight: '101',

        playingFontSize: '13',
        durationFontSize: '13',
    },
};

    new Discovery({
    id,
    powa,
    arrowLeft: 'arrow-circle-left',
    arrowRight: 'arrow-circle-right',
    style: {
        color: 'darkorchid',
        borderColor: 'darkorchid',
        backgroundColor: 'antiquewhite',
        dividerColor: 'rgba(153, 50, 204, 0.8)',
    },
});

Further customization

If changing some colors around can’t meet your creative vision the CSS can be entirely redefined as well as the HTML template itself.

The CSS for Discovery can be customized in totality by providing a css property on the Discovery config object that is either a string of CSS or a function that returns a string of CSS. If the css property is provided and it is a function, the style property will be provided to that function as a parameter.

The HTML for Discovery can be customized by defining a template function on the Discovery config object. The function is passed a playlist array of video data objects, the name of the playlist, and the Discovery config object.

    function playlistTemplate (playlist, name = '', config) {
  const formatTime = totalSeconds => {
    const hours = Math.floor(totalSeconds / 3600);
    const minutes = Math.floor(totalSeconds % 3600 / 60);
    const seconds = Math.floor(totalSeconds % 60);

    const hourDisplay = hours ? `${ hours }:` : '';
    const minuteDisplay = hours && (minutes < 10) ? `0${ minutes }:` : `${ minutes }:`;
    const secondDisplay = seconds < 10 ? `0${ seconds }` : seconds;

    return `${ hourDisplay }${ minuteDisplay }${ secondDisplay }`;
  };

  const getImage = (videoData, targetSize = 'small') => {
    const resized = videoData.additional_properties.imageResizerUrls.find(image => image && image.size && image.size === targetSize);

    return resized && resized.url ? resized.url : videoData.promo_image.url;
  };

  const playlistItemTemplate = videoData => {
    return `<div class="powa-discovery-playlist-item-wrap"></div>`
  };

  const divider = '<div class="powa-discovery-divider"></div>';

  return `
    <div class="powa-discovery">
      <div class="powa-discovery-header">
        <div class="powa-discovery-title">${ name }</div>
        <div class="powa-discovery-controls">
          <div class="powa-discovery-control powa-discovery-control-left"><i class="powa-discovery-control-icon fa fa-${ config.arrowLeft }" aria-hidden="true"></i></div>
          <div class="powa-discovery-control powa-discovery-control-right"><i class="powa-discovery-control-icon fa fa-${ config.arrowRight }" aria-hidden="true"></i></div>
        </div>
      </div>
      <div class="powa-discovery-playlist-wrap">
        <div class="powa-discovery-playlist">
          ${ playlist.reduce((memo, playlistItem) => `${ memo }${ memo ? divider : '' }${ playlistItemTemplate(playlistItem) }`, '') }
        </div>
      </div>
    </div>
  `;
}