veritone-widgets
Advanced tools
```javascript import { VeritoneApp } from 'veritone-widgets' const app = VeritoneApp();
import { VeritoneApp } from 'veritone-widgets'
const app = VeritoneApp();
// a "log in with veritone" button
const oauthButton = new OAuthLoginButton({
// the ID of an existing element in your document where the button will appear
elId: 'login-button-widget',
// your app server's authentication endpoint (required):
OAuthURI: 'http://localhost:5001/auth/veritone',
// optional callbacks to retrieve the OAuth token for using outside of VeritoneApp:
onAuthSuccess: ({ OAuthToken }) => console.log(OAuthToken),
onAuthFailure: (error) => console.log(error)
});
// the Veritone app bar, which will receive auth after the user completes
// the oauth flow using the OAuthLoginButton
const appBar = new AppBarWidget({
elId: 'appBar-widget',
title: 'My App',
backgroundColor: '#4caf50',
profileMenu: true,
appSwitcher: true
});
VeritoneApp is a container for all the widgets and widget data in an app. Before using any widgets, you need to import and call it. Typically this will be done when your application is loaded and initialized.
import { VeritoneApp } from 'veritone-widgets'
const app = VeritoneApp();
Note: VeritoneApp creates a singleton, so you do not need to manage the constructed app instance yourself. As long as VeritoneApp() has been imported and called at least once, you can retrieve the same instance by importing and calling VeritoneApp() again elsewhere in your app, if needed.
If you already have an OAuth token (because your app handles the client-side OAuth flow on its own), provide it by calling login() on the returned app instance.
import { VeritoneApp } from 'veritone-widgets'
const app = VeritoneApp().login({
OAuthToken: 'my-token-here'
});
Calling login() is usually not necessary; we provide an OAuthLoginButton widget, which handles the OAuth token exchange automatically. See the instructions in the next section for more information.
After you've initialized the app framework by calling VeritoneApp(), you can begin using widgets.
A "widget" is a self-contained frontend component. Widgets always render into an empty element which you provide. They are self-contained and handle rendering a UI, responding to user interactions, making api calls, and so on.
For example, the AppBar widget renders the Veritone application toolbar, fetches the required data to render the Veritone app switcher and profile menu, and allows the developer to configure their application logo and title. When the user uses the app switcher or uses the profile menu to log out, the AppBar widget handles those events.
Widgets typically can be configured with a variety of options, but always require at least elId. This is the id (string) of an element in your document, often a div, into which the widget will be rendered. By applying styling to that div, you can position the widget around your app. The element specified in elId must exist in the document before you create the widget that will use it.
The first widget you are likely to include is OAuthLoginButton. OAuthLoginButton renders a "log in with Veritone" button that your users can click to start the OAuth authentication flow. At the end of that flow, your VeritoneApp instance will be authenticated and able to make requests to our API. You can also retrieve the oauth token to use in your own app.
Note: Unless you are handling the OAuth flow on your own and providing the token to VeritoneApp manually, the OAuthLoginButton widget is required for Veritone widgets to work.
The actual code you write to use widgets will vary based on your framework of choice, but in general, it should be as follows.
// assuming VeritoneApp has already been initailized as described earlier, and given a document like:
<body>
...
<div id="login-button-widget" />
</body>
// you can render the login button to the document like this:
import { OAuthLoginButton } from 'veritone-widgets'
const oauthButton = new OAuthLoginButton({
// the ID of the element in your document where the button will appear
elId: 'login-button-widget',
// your app server's authentication endpoint (required):
OAuthURI: 'http://localhost:5001/auth/veritone',
// optional callbacks to retrieve the OAuth token for using outside of VeritoneApp:
onAuthSuccess: ({ OAuthToken }) => console.log(OAuthToken),
onAuthFailure: (error) => console.log(error)
});
When new OAuthLoginButton({ ... }) runs, the widget will appear on your page.
All Veritone apps should also include the AppBar widget.
<body>
<div id="appBar-widget" />
...
</body>
import { AppBar } from 'veritone-widgets'
const appBar = new AppBarWidget({
elId: 'appBar-widget',
title: 'My App',
backgroundColor: '#4caf50',
profileMenu: true,
appSwitcher: true
});
Note that the OAuthLoginButton widget in the example above is being configured with four properties: elId, OAuthURI, onAuthSuccess and onAuthFailure. As mentioned earlier, an elId is required for every widget. OAuthURI, onAuthSuccess and onAuthFailure are specific configurable properties on the OAuthLoginButton. As it is in the example, configuration is always provided to the widget constructor.
Some widgets have methods which can be called on an instance of that widget. For example, the FilePicker widget has the methods pick() and cancel() to open and close the picker dialog, respectively.
this._picker = new FilePicker({
elId: 'file-picker-widget',
accept: ['image/*'],
multiple: true
});
...
// call the pick() instance method on the widget
this._picker.pick(files => console.log(files))
In practice, a widget is just a wrapper around a React component. The easiest way to determine all the possible options for a given widget is to look at the PropTypes of its component. Remember to watch for console warnings which will indicate when an option was configured incorrectly, or when a required option was not provided.
The "storybook" dev environments in veritone-widgets and veritone-react-common have live examples of the various widgets and components.
The story.js file in the root of each widget folder in veritone-widgets and in the root of each component folder in veritone-react-common show the code used to create the storybook pages. If you are using React to write your application, these can be used directly as a basis for your own implementation.
The PropTypes in the source files of the various widgets (in veritone-widgets) and their respective components (in veritone-react-common) generally correspond to configurable options. Likewise, instance methods for a widget will be defined on its widget class in veritone-widgets.
To remove a widget, call destroy() on the instance
const oauthButton = new OAuthLoginButton({ ... });
...
oauthButton.destroy();
The current widgets are:
AppBar
The title and navigation bar common between all Veritone applications. Includes a logo, title, the Veritone app switcher and profile menu.
Options:
OAuthLoginButton The "Log in with Veritone" button and corresponding frontend logic to handle the OAuth2 authentication flow.
Options:
FilePicker
The Veritone file upload dialog. Handles selecting and uploading files to S3 for use on the Veritone platform.
Options:
Instance methods
pick(callback): open the filepicker dialog.
false, the error that prevented the file from uploading, if anygetUrl will be valid, in seconds.null, the resulting S3 URL, if successful. Includes credentials that are valid for expires seconds.null, the resulting S3 URL, if successful. Does not include credentials and will need to be signed to be used.false, a warning message if some (but not all) files failed to upload. A warning indicates that result contains some successful upload result objects, and some that were not successful (unsuccessful objects will have error populated with an error message, as noted above)false, an error message, if all files failed to upload.cancel(): close the filepicker dialog. The callback provided to pick() will be called with (null, { cancelled: true }).
The OAuth2 flow requires both frontend and serverside components. An example server implementation can be found in the veritone-widgets-server package. The responsibility of the server is primarily to manage the application's OAuth secret during the token exchange with Veritone's servers. Please see the veritone-widgets-server readme for more information.
packages/veritone-widgets-server folder, fill in the missing fields in the env.development file with your own app's information (see our application quick-start guide for more info on how to create an app)packages/veritone-widgets folder, run yarn start.Copyright 2017, Veritone Inc.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
FAQs
As of v5.0.0, this package exports both React "smart components" and framework agnostic "widgets" for most components. When both are available, the smart component is the default export and the widget is a named export. For example, `import FilePicker, {
The npm package veritone-widgets receives a total of 19 weekly downloads. As such, veritone-widgets popularity was classified as not popular.
We found that veritone-widgets demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 10 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.