Share Plugin

Share is a plugin to offer the end-user links for sharing a video. Once the plugin has been added to the <org>.js file, it checks to make sure that Share has not been disabled for the current player and then instantiates itself on the player. The Share module then displays itself on the video promo screen and, when the user’s mouse is hovering or if a mobile user has tapped, on the video itself.

By default, the share module provides options to share to Facebook, Twitter, or via email. The share modules for Facebook and Twitter appear in browser popups whereas the email option will open in the user’s default email application.

Example

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

    new Share({powa});
});

Events

The Share module responds to events to hide, show, or toggle the display. The module also emits events when a user has interacted with one of the sharing options. The events are available via a static member function, Share.EVENTS.

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

    new Share({powa});

    // Share.EVENTS = {
    //      HIDE_SHARE: 'hideShare',
    //      SHOW_SHARE: 'showShare',
    //      TOGGLE_SHARE: 'toggleShare',
    //
    //      SHARE_FACEBOOK: 'shareFacebook',
    //      SHARE_TWITTER: 'shareTwitter',
    //      SHARE_EMAIL: 'shareEmail',
    // };
    console.log(Share.EVENTS);

    // shared via Facebook
    powa.on(Share.EVENTS.SHARE_FACEBOOK, event => {
        console.log('The user shared the video to facebook!');
    });

    // toggle the Share module open or closed
    setInterval(() => {
        powa.trigger(Share.EVENTS.TOGGLE_SHARE);
    }, 10 * 1000)
});

Customization

The Share plugin can be customized by defining the templates for the title, description, and URL to be shared. The URLs to load Facebook and Twitter can be customized as can the mailto link for email sharing.

The look and feel of the plugin can be customized by defining a template to construct the HTML of the module and the style that is applied to it. The template function should return a string of HTML. The default classes used by the Share plugin are available via Share.CLASSES. The style should be a string of CSS or a function that returns a string of CSS.

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

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

    new Share({
        powa,

        // default URL, Title, and Description
        shareURL: (videoData, config) => encodeURIComponent(window.location.origin + videoData.canonical_url),
        shareTitle: (videoData, config) => encodeURIComponent(videoData.headlines.basic),
        shareDescription: (videoData, config) => encodeURIComponent(videoData.description.basic),

        // default Facebook, Twitter, and email templates
        facebookShareTemplate: (videoData, config) => `https://www.facebook.com/sharer/sharer.php?u=${ config.shareURL(videoData) }`,
        twitterShareTemplate: (videoData, config) => `https://twitter.com/share?url=${ config.shareURL(videoData) }&text=${ config.shareTitle(videoData) }`,
        emailShareTemplate: (videoData, config) => `mailto:?subject=${ config.shareTitle(videoData) }&body=${ config.shareDescription(videoData) }%0A%0A${ config.shareURL(videoData) }`,

        // default style
        style: config => `
            .powa-share {
                box-sizing: border-box;
                position: absolute;
                top: 5px;
                right: 5px;

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

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

                color: rgba(240, 248, 255, 0.9);
                background-color: rgba(0, 0, 0, 0.5);
                box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.5);

                transition: all 0.25s;
            }

            .powa-share-open {
                color: rgba(0, 0, 0, 0.9);
                background-color: rgba(0, 0, 0, 0.5);
                border: solid 2px rgba(240, 248, 255, 0.9);
                box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 9px 1px;

                height: 1.4em;
                max-width: 6em;
                padding-left: 1px;
            }

            .powa-share-item {
            }

            .powa-share-item:hover {
                cursor: pointer;
            }

            .powa-share-service {
                margin: 4px;
                overflow: hidden;
                color: rgba(240, 248, 255, 0.9);
                transition: all 0.25s;
            }

            .powa-share-service:hover {
                color: rgb(240, 248, 255);
            }

            .powa-share-service-hidden {
                width: 0;
                margin: 0;
                padding: 0;
            }

            .powa-share-toggle {
                display: flex;
                align-items: center;
                justify-content: center;

                width: 1em;
                padding: 1px;
                border-radius: 1em;

                color: rgba(240, 248, 255, 0.9);
                transition: all 0.25s;
            }

            .powa-share-toggle-open {
                padding: 3px 2px 1px 1px;
                border-radius: 0 1em 1em 0;
                color: rgba(0, 0, 0, 0.9);
                background-color: rgba(240, 248, 255, 0.9);
            }`,


        // default template
        template: config => `
            <span class="${ Share.CLASSES.shareItem } ${ Share.CLASSES.shareService }" data-share="facebook"><i class="fa fa-facebook-square" aria-hidden="true"></i></span>
            <span class="${ Share.CLASSES.shareItem } ${ Share.CLASSES.shareService }" data-share="twitter"><i class="fa fa-twitter-square" aria-hidden="true"></i></span>
            <span class="${ Share.CLASSES.shareItem } ${ Share.CLASSES.shareService }" data-share="email"><i class="fa fa-envelope" aria-hidden="true"></i></span>
            <span class="${ Share.CLASSES.shareItem } ${ Share.CLASSES.shareToggle }"><i class="fa fashare-square-o" aria-hidden="true"></i></span>

    });
});