Oovvuu-plugin NPM

oovvuu-plugin

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

Usage
- via jsDelivr
Icons
API
- oovvuuPlugin
Types
- CmsConfig
- Embed
Redirect Login Flow
Author
License

Usage

via jsDelivr

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

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