oovvuu-plugin

Oovvuu Plugin provides a simple way for publishers to embed videos into their articles without leaving their CMS.

Table of Contents

• Usage
  • via jsDelivr
    • Backwards compatibility script available for implementations before type="module" requirement
• Icons
• API
  • oovvuuPlugin
• Types
  • CmsConfig
  • Embed
• Redirect Login Flow
• Author
• License

Usage

via jsDelivr

<script type="module" src="https://cdn.jsdelivr.net/npm/oovvuu-plugin@1/dist/oovvuu-plugin.index.js" onload="setOovvuuConfig()"></script>
<script>
  function setOovvuuConfig() {
    oovvuuPlugin.setConfig({
      clientId: "client-id",
      cmsName: "cms-name",
      articleId: "article-guid",
      onAddEmbed: (embed) => {
        // Implement this to insert the embed code into the article
        console.log(JSON.stringify(embed, null, 2));
      },
      headline: "article-headline",
    });
    console.log(oovvuuPlugin.version);
  }
</script>

...

<button onclick="oovvuuPlugin.open()">Select Videos</button>

Backwards compatibility script available for implementations before type="module" requirement

⚠️ Not intended for new implementations
This uses the old filename so existing implementations can remain working.
This will simply insert the new script into the page head automatically.

<script src="https://cdn.jsdelivr.net/npm/oovvuu-plugin@1/dist/oovvuu-plugin.min.js"></script>

Icons

Oovvuu logos are available via jsDelivr.

Image	Example
oovvuu-logo.png
oovvuu-mark.png

Example use in buttons

<button>
  <img
    src="https://cdn.jsdelivr.net/npm/oovvuu-plugin/assets/oovvuu-logo.png"
    height="20"
  />
</button>

<button>
  <img
    src="https://cdn.jsdelivr.net/npm/oovvuu-plugin/assets/oovvuu-mark.png"
    height="20"
  />
  Select Videos
</button>

API

oovvuuPlugin

The core interface of the plugin.

Properties

Name	Type	Description
version	string	The current version of the plugin.

Functions

close(): void

This closes the plugin.

getConfig(): CmsConfig

This gets the configuration for the plugin. It raises an exception if the configuration is not set.

open(config?: CmsConfig): void

This opens the plugin. An optional config may be passed as a convenience; it can be partial similar to setConfig.

setConfig(config: CmsConfig): void

This sets the configuration for the plugin. It allows partial updates to the configuration.

handleLoginCallback(): Promise<void>

This sets the handles the Auth0 login callback after a redirect login.

// Update some configuration leaving the rest as is.
oovvuuPlugin.setConfig({
  articleId: "new-article-id",
  headline: "new-article-headline",
  onAddEmbed: (embed) => {
    // do something
  },
});

Types

CmsConfig

A configuration object for the plugin.

Properties

Name	Type	Description
articleId	string	The unique identifier for the article.
clientId	string	A customer-specific identifier that will be used in the authentication process.
cmsName	string	A globally unique name for the publisher's Content Management System, such as its domain name.
headline	string	The headline of the article.
loginCallbackPath	string	The callback path used to handle Auth0 login callback. This page needs to call handleLoginCallback()

Functions

onAddEmbed(embed: Embed): void

A JavaScript callback that is invoked every time the user creates an embed. The embed object is passed in.

onClose(): void

A JavaScript callback that is invoked when the plugin is closed.

Embed

The embed object passed to the onAddEmbed callback.

Properties

Name	Type	Description
ampEmbedCode	string	An HTML embed to be used on amp pages.
articleId	string	This is the id of the article as set in the plugin configuration.
displayTitle	string	A title that can be displayed above the video or collection for display purposes.
embedCode	string	The full embed code for the chosen video or collection.
embedId	string	The unique identifier for the embed of the chosen video or collection.
headline	string	The headline for the article.
linkToDownloadThumbnail	string	A URL from where the poster image for the chosen video or collection can be downloaded.
playerScriptUrl	string	The url for Oovvuu’s playback script.

Redirect Login Flow

In cases where the popup login flow is blocked by CORS, we allow the use of a redirect login flow.

This requires a dedicated page to load the plugin for handling the callback. This page needs to only call the oovvuuPlugin.handleLoginCallback() function which will handle the login and return the user to the previous page.

<script type="module" src="https://cdn.jsdelivr.net/npm/oovvuu-plugin@1/dist/oovvuu-plugin.index.js" onload="setOovvuuConfig()"></script>
<script>
  function setOovvuuConfig() {
    oovvuuPlugin.setConfig({
      clientId: "client-id",
      loginCallbackPath: "/path-for-callback",
    });
  }
</script>

<script>
  // Wait for page to load before attempting to call
  window.addEventListener("load", function () {
    oovvuuPlugin.handleLoginCallback();
  });
</script>

Author

Oovvuu

License

See the LICENSE file for license rights and limitations (MIT).