{"_id":"@azure/video-indexer-widgets","_rev":"4-4124851ad570b668c009eb5e12c21af6","name":"@azure/video-indexer-widgets","dist-tags":{"latest":"1.0.5"},"versions":{"1.0.0":{"name":"@azure/video-indexer-widgets","version":"1.0.0","keywords":["Video Indexer","widgets","azure","video analyzer","media"],"author":"Microsoft Azure","license":"MIT","_id":"@azure/video-indexer-widgets@1.0.0","maintainers":[{"name":"azure-sdk","email":"azure-sdk-npmjs@microsoft.com"}],"homepage":"https://www.videoindexer.ai","bugs":{"url":"https://github.com/Azure-Samples/media-services-video-indexer/issues"},"dist":{"shasum":"4ab623022b0b9fd0bf4ed7f0a2e3cdb0b10eba15","tarball":"https://registry.npmjs.org/@azure/video-indexer-widgets/-/video-indexer-widgets-1.0.0.tgz","fileCount":32,"integrity":"sha512-Ua+GMz/kCmBY2RNkDHAZG9ghkorzyEBWclafnXbMg9Jl5qLgofw7Okqo/DdyD0Xu9+OLh784h7UTuZwPf3nrqw==","signatures":[{"sig":"MEYCIQDPct61cREWR0Z2rTWDGLQEZa/jWqNXQWg2mM+jHqv11QIhAPiv8wUNGEPy+n7Df8T0iH7rszAjjj0B/0Uad5HpbVam","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZ87XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqtNxAAoKopKeHWeAnKQA6jXcyYRbI5f8s/p2KCwDZEXoszgmgU84ZH\r\ncd7u51Ouan5IVR1HJXbpNxfC7s2fmKyhM6s1W2czvWpkQP2HePbxW0yLQhBc\r\nR6y+lg9uaGrTkWgj+mlMZL6U9fZcnZomfJnTMxwA5GRmvKNutaHL+GQfz5gu\r\nnk+6pKLf4rDiAxrdGU/bkZFFx4o0VcIYV0p4bt6seu9q4OrZ5YYFZZCV6KEA\r\nEt7exeUkDS9Nh0csTZCJbmQ6KZR4un4kJzxFbsQ/oSQjZq4DH2hRjjvDPLyK\r\nKam8a3YM5LGrDOUO6Vw1nH+bL6JLSyq85B4pFcRIeCJ42HNXUdmCTrQC839U\r\nziP9lOz3FSpGNj/eqhIykMyx8uo4eWspeCTRhXM1mupFQjw2XtXtnbj0vwLc\r\nZQbMRUIrkwMi8qGLwmFMa6KBuQriOa8dKYMjs784Ov+5/zmajulNAXD8QvGg\r\ndWuYwJ6janhKM5hhEHokaOziKBFa/YYZg0U1U66FZKhTCIiFiqUF2TvWZ5sC\r\n8hKwzVJ/Mk2cm+RcMtPpgzC4adW6rEjU5A2zpCeu8r7KGaXCeddy3Sxyh9Uy\r\npQ+cptEeVkGKKmnB9+g7HSBfv0XEbDb444atTTMrYZF8z/aRs8VgK8H3bTJC\r\nUd+4XP4HDUHGkzxuzJyM2b63ASebbS24HjM=\r\n=knOH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/index.min.js","_from":"file:D:\\a\\r1\\a\\artifacts\\packages\\azure-video-indexer-widgets-1.0.0.tgz","scripts":{"lint":"npx eslint . --ext .js,.jsx,.ts,.tsx","test":"tsc --p tsconfig.spec.json && wtr --node-resolve","build":"webpack --mode=development","start":"webpack -w","feed:auth":"npx vsts-npm-auth -config .npmrc","build:prod":"webpack --mode=production","test:watch":"npm run test -- --watch --preserveWatchOutput","bump-version":"npm version patch","test:coverage":"npm run test -- --coverage","update-version":"npm version","schema:vi-insights-widget":"typescript-json-schema .\\src\\widgets\\insights\\vi-insights\\definitions\\vi-widget-config.definitions.ts IInsightsWidgetConfig -o .\\src\\assets\\vi-widget-config.schema.json --required --refs=false","schema:custom-insights-widget":"typescript-json-schema .\\src\\widgets\\insights\\custom-insights\\definitions\\custom-insights-config.definitions.ts ICustomInsightsWidgetConfig -o .\\src\\assets\\custom-insights-config.schema.json --required --refs=false"},"typings":"./dist/npm.definitions.d.ts","_npmUser":{"name":"azure-sdk","email":"azure-sdk-npmjs@microsoft.com"},"_resolved":"D:\\a\\r1\\a\\artifacts\\packages\\azure-video-indexer-widgets-1.0.0.tgz","_integrity":"sha512-Ua+GMz/kCmBY2RNkDHAZG9ghkorzyEBWclafnXbMg9Jl5qLgofw7Okqo/DdyD0Xu9+OLh784h7UTuZwPf3nrqw==","repository":{"url":"https://github.com/Azure-Samples/media-services-video-indexer.git","type":"git"},"_npmVersion":"8.5.0","description":"A package by Video Indexer in order to embed Video Indexer insights widget in the customer service and customize it's style and data.","directories":{},"sideEffects":false,"_nodeVersion":"16.14.2","dependencies":{"playwright":"^1.21.1"},"_hasShrinkwrap":false,"devDependencies":{"node":"^16.6.1","eslint":"^7.32.0","tslint":"^6.1.3","webpack":"^5.5.1","ts-loader":"^8.0.11","typescript":"^4.0.5","webpack-cli":"^4.2.0","@types/eslint":"^7.28.0","@types/estree":"0.0.50","tslint-loader":"^3.5.4","webpack-merge":"^5.8.0","@open-wc/testing":"^3.0.0-next.2","@web/test-runner":"^0.13.16","copy-webpack-plugin":"^9.0.1","eslint-webpack-plugin":"^3.0.1","eslint-plugin-security":"^1.4.0","typescript-json-schema":"^0.48.0","@typescript-eslint/parser":"^4.29.1","@web/test-runner-playwright":"^0.8.8","@typescript-eslint/eslint-plugin":"^4.29.1"},"_npmOperationalInternal":{"tmp":"tmp/video-indexer-widgets_1.0.0_1650970327034_0.07799472295445908","host":"s3://npm-registry-packages"}},"1.0.5":{"name":"@azure/video-indexer-widgets","version":"1.0.5","keywords":["Video Indexer","widgets","azure","video analyzer","media"],"author":{"name":"Microsoft Azure"},"license":"MIT","_id":"@azure/video-indexer-widgets@1.0.5","maintainers":[{"name":"azure-sdk","email":"azure-sdk-npmjs@microsoft.com"}],"homepage":"https://www.videoindexer.ai","bugs":{"url":"https://github.com/Azure-Samples/media-services-video-indexer/issues"},"dist":{"shasum":"cf0a2d69749f9f6049906d7175723e09adcde633","tarball":"https://registry.npmjs.org/@azure/video-indexer-widgets/-/video-indexer-widgets-1.0.5.tgz","fileCount":32,"integrity":"sha512-9u0oAEgyzqeqPuu6m3Dhn04hXUENvvFeAZf95M69H0Rnu9U1gLQM1M6utsdExy4qj+/FWAcbjYN4bv2eXWY1rg==","signatures":[{"sig":"MEYCIQD5Vg5wBINWafMjQRggEOAoqAZsY0YhTY9u2v/Y4b+8JwIhAINDO6adESVAO0hWaHvSKBNKAbTGlfdTexLpaG8mn9hY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182204},"main":"./dist/index.min.js","_from":"file:D:\\a\\r1\\a\\artifacts\\packages\\azure-video-indexer-widgets-1.0.5.tgz","scripts":{"lint":"npx eslint . --ext .js,.jsx,.ts,.tsx","test":"tsc --p tsconfig.spec.json && wtr --node-resolve","build":"webpack --mode=development","start":"webpack -w","feed:auth":"npx vsts-npm-auth -config .npmrc","build:prod":"webpack --mode=production","test:watch":"npm run test -- --watch --preserveWatchOutput","bump-version":"npm version patch","test:coverage":"npm run test -- --coverage","update-version":"npm version","schema:vi-insights-widget":"typescript-json-schema .\\src\\widgets\\insights\\vi-insights\\definitions\\vi-widget-config.definitions.ts IInsightsWidgetConfig -o .\\src\\assets\\vi-widget-config.schema.json --required --refs=false","schema:custom-insights-widget":"typescript-json-schema .\\src\\widgets\\insights\\custom-insights\\definitions\\custom-insights-config.definitions.ts ICustomInsightsWidgetConfig -o .\\src\\assets\\custom-insights-config.schema.json --required --refs=false"},"typings":"./dist/npm.definitions.d.ts","_npmUser":{"name":"azure-sdk","email":"azure-sdk-npmjs@microsoft.com"},"_resolved":"D:\\a\\r1\\a\\artifacts\\packages\\azure-video-indexer-widgets-1.0.5.tgz","_integrity":"sha512-9u0oAEgyzqeqPuu6m3Dhn04hXUENvvFeAZf95M69H0Rnu9U1gLQM1M6utsdExy4qj+/FWAcbjYN4bv2eXWY1rg==","repository":{"url":"git+https://github.com/Azure-Samples/media-services-video-indexer.git","type":"git"},"_npmVersion":"9.8.1","description":"A package by Video Indexer in order to embed Video Indexer insights widget in the customer service and customize it's style and data.","directories":{},"sideEffects":false,"_nodeVersion":"18.18.2","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^7.32.0","tslint":"^6.1.3","webpack":"^5.5.1","ts-loader":"^8.0.11","typescript":"^4.0.5","webpack-cli":"^4.2.0","@types/eslint":"^7.28.0","@types/estree":"0.0.50","tslint-loader":"^3.5.4","webpack-merge":"^5.8.0","@open-wc/testing":"^3.0.0-next.2","@web/test-runner":"^0.13.16","copy-webpack-plugin":"^9.0.1","eslint-webpack-plugin":"^3.0.1","eslint-plugin-security":"^1.4.0","typescript-json-schema":"^0.48.0","@typescript-eslint/parser":"^4.29.1","@web/test-runner-playwright":"^0.8.8","@typescript-eslint/eslint-plugin":"^4.29.1"},"_npmOperationalInternal":{"tmp":"tmp/video-indexer-widgets_1.0.5_1709123376414_0.5635521364309533","host":"s3://npm-registry-packages"}}},"time":{"created":"2022-04-26T10:52:06.966Z","modified":"2026-03-19T19:53:38.175Z","1.0.0":"2022-04-26T10:52:07.232Z","1.0.5":"2024-02-28T12:29:36.647Z"},"bugs":{"url":"https://github.com/Azure-Samples/media-services-video-indexer/issues"},"author":{"name":"Microsoft Azure"},"license":"MIT","homepage":"https://www.videoindexer.ai","keywords":["Video Indexer","widgets","azure","video analyzer","media"],"repository":{"url":"git+https://github.com/Azure-Samples/media-services-video-indexer.git","type":"git"},"description":"A package by Video Indexer in order to embed Video Indexer insights widget in the customer service and customize it's style and data.","maintainers":[{"email":"azure-sdk-npmjs@microsoft.com","name":"azure-sdk"},{"email":"npmjs@microsoft.com","name":"microsoft1es"},{"email":"microsoft-oss-publishing@microsoft.com","name":"microsoft-oss-releases"}],"readme":"\r\n# Video Indexer widgets\r\n\r\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\r\n[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](https://www.typescriptlang.org/)\r\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-f8bc45.svg)](https://github.com/prettier/prettier)\r\n\r\n![vi_widgets_banner_github.png](https://user-images.githubusercontent.com/51399662/135491488-10ec3d7a-e573-4ddf-898a-337412a63150.gif)\r\n\r\nThis repo contains the Video Indexer widgets package. Below you can find documentation and examples on how to use these pieces.\r\n\r\n## Introduction\r\n\r\n[Azure AI Video Indexer](https://aka.ms/vi-about-doc) is a cloud application, part of Azure AI services, built on Azure AI services (such as the Face, Translator, Azure AI Vision, and Speech). It enables you to extract the insights from your videos using Azure AI Video Indexer video and audio models.\r\n\r\nThe material in this repository is designed to help in embedding Video Indexer widgets in your own service and customize its style and data.\r\n\r\nThe package supports two types of insights widgets:\r\n\r\n- Standard Video Indexer widget\r\n- Customizable insights widget - allowing you full flexibility and customization to meet your business needs.\r\n\r\nBelow you'll find sections on:\r\n\r\n- [Installing the Video Indexer widgets package](#installing-the-video-indexer-widgets-package)\r\n- [Embed standard Video Indexer insights widget](#embed-standard-video-indexer-insights-widget)\r\n- [Embed Video Indexer customizable insights widget](#embed-video-indexer-customizable-insights-widget)\r\n- [Enable custom styling to meet your application look and feel](#enable-custom-styling-to-meet-your-application-look-and-feel)\r\n\r\nWe also have samples & implementation details located in our [official GitHub](https://github.com/Azure-Samples/media-services-video-indexer/tree/master/Embedding%20widgets/widget-customization).\r\n\r\n\r\n## Installing the Video Indexer widgets package\r\n\r\nThe widgets are distributed as an NPM package. There are a couple ways to install the library:\r\n\r\n- **Installation using NPM** - For consuming the NPM package directly, you can install it using the npm command.\r\n ```\r\n npm install @azure/video-indexer-widgets\r\n ```\r\n- **Importing using CDN** - You can import the latest version of the widget directly into your HTML file by using following snipper -\r\n\r\n ```html\r\n ...\r\n \r\n \r\n \r\n ```\r\n\r\n- If you want expose the widget code on the window, you can import the latest version by using the following snippet -\r\n ```html\r\n ...\r\n \r\n \r\n \r\n ```\r\n\r\n
\r\n\r\n## Embed standard Video Indexer insights widget\r\n\r\nInstead of adding an iframe element to embed the insight widget, this package allows you to embed using JS code. The section below details:\r\n\r\n- How to add a insight widget to your application\r\n- Samples showing use of the widget\r\n\r\n### Creating the insights widget\r\n\r\nThe insight widget is created at runtime. The widget will be created based on a container you provide.\r\n\r\nCreating at runtime using the package:\r\n ```typescript\r\n const widget = new window.vi.widgets.Insights(\r\n '',\r\n ,\r\n \r\n );\r\n```\r\n\r\nPlease review our [official GitHub](https://github.com/Azure-Samples/media-services-video-indexer/tree/master/Embedding%20widgets/widget-customization#creating-the-insights-widget) to find more information about the interfaces and classes involved. \r\n\r\n### Code samples\r\n\r\nThis code shows how to create a widget at runtime with Javascript code.\r\n\r\n```html\r\n\r\n\r\n\r\n
\r\n\r\n```\r\n\r\n#### Typescript example -\r\n\r\nIn the following example, we create an insight widget, with Spanish localization. The selected tab is the timeline, and the selected components are emotions, sentiments, transcript and keywords. The initial search param is 'hello'.\r\n\r\n```typescript\r\n import {\r\n IInsightsWidgetConfig,\r\n InsightsWidget\r\n } from '@azure/video-indexer-widgets';\r\n\r\n const config: IInsightsWidgetConfig = {\r\n accountId: '',\r\n videoId: '',\r\n accessToken: '',\r\n locale: 'es-es',\r\n tab: 'timeline',\r\n search: 'hello',\r\n components: ['emotions', 'sentiments', 'transcript', 'keywords']\r\n };\r\n\r\n const insightsWidget = new InsightsWidget(\r\n 'container',\r\n {\r\n height: 780,\r\n width: 580\r\n },\r\n config\r\n );\r\n\r\n insightsWidget.render();\r\n```\r\n\r\n## Embed Video Indexer customizable insights widget\r\n\r\nEmbed Video Indexer insights widget with original data from the embedded video, combined with your own custom data and raw Video Indexer data.\r\nThe below section shows a few details:\r\n\r\n- How to add a custom insight widget to your application\r\n- Samples showing use of the widget\r\n\r\n
\r\n\r\n### Creating the custom insight widget\r\n\r\nThe custom insight widget is created at runtime.\r\n\r\nCreating at runtime using the package:\r\n ```typescript\r\n const widget = new window.vi.widgets.CustomInsights(\r\n '',\r\n ,\r\n \r\n );\r\n```\r\n\r\nPlease review our [official GitHub](https://github.com/Azure-Samples/media-services-video-indexer/tree/master/Embedding%20widgets/widget-customization#creating-the-custom-insight-widget) to find more information about the interfaces and classes involved. \r\n\r\n### Code samples:\r\n\r\nThis code shows how to create a generic custom insight widget at runtime with JavaScript code:\r\n\r\n```html\r\n\r\n\r\n\r\n
\r\n\r\n```\r\n\r\n#### Typescript example:\r\n\r\nThis code shows how to create a custom insight widget at runtime with typescript code.\r\n\r\nIn the following example, we create a custom insight widget at runtime using all the data types the widget supports.\r\n\r\n1. Video duration is 634 seconds\r\n2. The widget will show brands, keywords, scenes and blocks provided from Video Indexer video (according to the account + video id provided). Video is public since no access token is provided.\r\n3. The widget will have 2 raw insights data. emotions and topics.\r\n4. Widget will have 2 custom data components. One as capsule and the other color map.\r\n\r\n\r\n```typescript\r\n import {\r\n ICustomInsightsWidgetConfig,\r\n CustomInsightsWidget,\r\n VIInsightsKey,\r\n IEmotion,\r\n ITopic,\r\n IVRawIInsightsData,\r\n ICustomElement,\r\n ICustomData,\r\n ICustomColorElement\r\n } from '@azure/video-indexer-widgets';\r\n\r\n /**\r\n * Using data from Video Indexer video parameters\r\n **/\r\n // VI account ID\r\n const viAccountID = '00000000-0000-0000-0000-000000000000'\r\n // VI video ID\r\n const viVideoID = 'd9d4860279'\r\n // VI insights key list.\r\n const viInsightsKeys : VIInsightsKey[] = ['brands', 'keywords', 'scenes', 'blocks'];\r\n\r\n\r\n /**\r\n * Using raw Video Indexer insights parameters\r\n **/\r\n // Using raw emotions data, with two emotions - one is Joy and other is Sad.\r\n const emotionsList: IEmotion[] [\r\n {\r\n id: 1,\r\n type: 'Joy',\r\n instances: [\r\n {\r\n adjustedEnd: '0:06:46.15',\r\n adjustedStart: '0:06:42.086',\r\n confidence: 0.6808,\r\n end: '0:06:46.15',\r\n start: '0:06:42.086'\r\n }\r\n ]\r\n },\r\n {\r\n id: 2,\r\n type: 'Sad',\r\n instances: [\r\n {\r\n adjustedEnd: '0:10:18.957',\r\n adjustedStart: '0:09:59.306',\r\n confidence: 0.8383,\r\n end: '0:10:18.957',\r\n start: '0:09:59.306'\r\n }\r\n ]\r\n }\r\n ];\r\n\r\n // Using raw topics data, with 3 topics.\r\n const topicsList: ITopic[] = [\r\n {\r\n confidence: 0.7577,\r\n id: 1,\r\n name: 'Brand Audit',\r\n referenceId: 'Brand Audit',\r\n language: 'en-US',\r\n instances: [\r\n {\r\n adjustedEnd: '0:01:52.838',\r\n adjustedStart: '0:00:13.712',\r\n end: '0:01:52.838',\r\n start: '0:00:13.712'\r\n },\r\n {\r\n adjustedEnd: '0:03:16.21',\r\n adjustedStart: '0:02:08.093',\r\n end: '0:03:16.21',\r\n start: '0:02:08.093'\r\n }\r\n ]\r\n },\r\n {\r\n confidence: 0.4893,\r\n iabName: 'News and Politics',\r\n id: 23,\r\n instances: [\r\n {\r\n adjustedEnd: '0:02:59.015',\r\n adjustedStart: '0:00:08.421',\r\n end: '0:02:59.015',\r\n start: '0:00:08.421'\r\n }\r\n ],\r\n iptcName: 'Politics/election',\r\n language: 'en-US',\r\n name: 'Political Campaigns and Elections',\r\n referenceId: 'Politics and Government/Political Campaigns and Elections',\r\n referenceType: 'VideoIndexer'\r\n },\r\n {\r\n confidence: 0.6453,\r\n iabName: 'Business and Finance',\r\n id: 14,\r\n instances: [\r\n {\r\n adjustedEnd: '0:02:37.644',\r\n adjustedStart: '0:00:00',\r\n end: '0:02:37.644',\r\n start: '0:00:00'\r\n },\r\n {\r\n adjustedEnd: '0:04:01.497',\r\n adjustedStart: '0:03:39.322',\r\n end: '0:04:01.497',\r\n start: '0:03:39.322'\r\n },\r\n {\r\n adjustedEnd: '0:05:00.968',\r\n adjustedStart: '0:04:36.6',\r\n end: '0:05:00.968',\r\n start: '0:04:36.6'\r\n }\r\n ],\r\n iptcName: 'Economy, Business and Finance/business (general)',\r\n language: 'en-US',\r\n name: 'Brand Strategy',\r\n referenceId: 'Business/Product Development/Brand Strategy',\r\n referenceType: 'VideoIndexer'\r\n }\r\n ];\r\n\r\n // Raw VI insights array.\r\n const rawInsightsData: IVRawIInsightsData[] = [\r\n {\r\n rawInsightsKey: 'emotions',\r\n insightsItems: emotionsList\r\n },\r\n {\r\n rawInsightsKey: 'topics',\r\n insightsItems: topicsList\r\n }\r\n ];\r\n\r\n /**\r\n * Using custom insights data\r\n **/\r\n // Create a custom data with UI as a capsule.\r\n\r\n // Create a custom element with name 'custom element 2', that has 4 instances. \r\n const customElement2 : ICustomElement = {\r\n id: 1,\r\n text: 'Custom element 2',\r\n instances: [\r\n {\r\n adjustedEnd: '0:00:12.44',\r\n adjustedStart: '0:00:11.54',\r\n end: '0:00:12.44',\r\n start: '0:00:11.54'\r\n },\r\n {\r\n adjustedEnd: '0:05:27.96',\r\n adjustedStart: '0:05:19.89',\r\n end: '0:05:27.96',\r\n start: '0:05:19.89'\r\n },\r\n {\r\n adjustedEnd: '0:02:06.443',\r\n adjustedStart: '0:02:00.83',\r\n end: '0:02:06.443',\r\n start: '0:02:00.83'\r\n },\r\n {\r\n adjustedEnd: '0:03:45.44',\r\n adjustedStart: '0:03:43.21',\r\n end: '0:03:45.44',\r\n start: '0:03:43.21'\r\n }\r\n ]\r\n };\r\n\r\n // Create a custom element with name 'custom element 1', that has 3 instances. \r\n const customElement1 : ICustomElement = {\r\n id: 1,\r\n text: 'Custom Element 1',\r\n instances: [\r\n {\r\n adjustedEnd: '0:02:37.644',\r\n adjustedStart: '0:00:00',\r\n end: '0:02:37.644',\r\n start: '0:00:00'\r\n },\r\n {\r\n adjustedEnd: '0:04:01.497',\r\n adjustedStart: '0:03:39.322',\r\n end: '0:04:01.497',\r\n start: '0:03:39.322'\r\n },\r\n {\r\n adjustedEnd: '0:05:00.968',\r\n adjustedStart: '0:04:36.6',\r\n end: '0:05:00.968',\r\n start: '0:04:36.6'\r\n }\r\n ]\r\n };\r\n\r\n // Create the custom data element, with title 'My data', controlled by all and captioning presets, from type capsule, with 2 elements.\r\n const customCapsuleData: ICustomData = {\r\n title: 'My Data',\r\n key: 'myData',\r\n presets: ['all', 'captioning'],\r\n type: 'capsule',\r\n items: [customElement, customElement2]\r\n };\r\n\r\n // Create custom color element, with text 'My Custom color Element!', with blue color and 3 instances.\r\n const customColorElement : ICustomColorElement = {\r\n id: 1,\r\n text: 'My Custom color Element!',\r\n color: 'blue',\r\n instances: [\r\n {\r\n adjustedEnd: '0:02:37.644',\r\n adjustedStart: '0:00:00',\r\n end: '0:02:37.644',\r\n start: '0:00:00'\r\n },\r\n {\r\n adjustedEnd: '0:04:01.497',\r\n adjustedStart: '0:03:39.322',\r\n end: '0:04:01.497',\r\n start: '0:03:39.322'\r\n },\r\n {\r\n adjustedEnd: '0:05:00.968',\r\n adjustedStart: '0:04:36.6',\r\n end: '0:05:00.968',\r\n start: '0:04:36.6'\r\n }\r\n ]\r\n };\r\n\r\n // Create custom color element, with text 'Second custom Color Element', with darkmagenta color and 1 instance.\r\n const customColorElement2 : ICustomColorElement = {\r\n id: 2,\r\n text: 'Second custom Color Element',\r\n color: 'darkmagenta',\r\n instances: [\r\n {\r\n adjustedEnd: '0:06:46.15',\r\n adjustedStart: '0:06:42.086',\r\n end: '0:06:46.15',\r\n start: '0:06:42.086'\r\n }\r\n ]\r\n };\r\n\r\n // Create custom color element, with text 'customColorElement3', with #FFFFF color and 1 instance.\r\n const customColorElement3 : ICustomColorElement = {\r\n id: 3,\r\n text: 'customColorElement3',\r\n color: '#FFFFF',\r\n instances: [\r\n {\r\n adjustedEnd: '0:10:18.957',\r\n adjustedStart: '0:09:59.306',\r\n confidence: 0.8383,\r\n end: '0:10:18.957',\r\n start: '0:09:59.306'\r\n }\r\n ]\r\n };\r\n\r\n // Create the custom data element, with title 'My color', controlled by all and accessibility presets, from type color-map, with 3 elements.\r\n // The custom data element will be sorted by the provided name, desc. \r\n const customColorData : ICustomData = {\r\n title: 'My Color',\r\n key: 'myColor',\r\n presets: ['all', 'accessibility'],\r\n type: 'color-map',\r\n sortedBy: {\r\n order: 'desc',\r\n property: 'name'\r\n },\r\n items: [customColorElement, customColorElement2, customColorElement3]\r\n };\r\n\r\n const customDataList : ICustomData[] = [customCapsuleData, customColorData];\r\n\r\n const config : ICustomInsightsWidgetConfig = {\r\n duration: 634, // Video duration - mandatory parameter\r\n accountId: viAccountID, // VI account ID. Should be provided only if using data from VI.\r\n videoId: viVideoID, // VI video ID. Should be provided only if using data from VI.\r\n viInsightsKeys: viInsightsKeys, // VI insights key list. Mandatory parameter. If you don't want to use data from VI, send an empty array.\r\n rawInsightsData: rawInsightsData, // raw VI insights array. Mandatory parameter. If you don't want to use raw data, send an empty array.\r\n customData: customDataList, // custom data array. Mandatory parameter. If you don't want to use custom data, send an empty array.\r\n preset: 'all' // select preset 'All'\r\n };\r\n\r\n this.customInsightsWidget = new CustomInsightsWidget(\r\n 'container',\r\n {\r\n width: 800,\r\n height: 1800\r\n },\r\n config\r\n );\r\n\r\n this.customInsightsWidget.render();\r\n```\r\n\r\nThe final insight will be look like this:\r\n
\r\n![vi_widgets_custom_widget.png](https://user-images.githubusercontent.com/51399662/135498863-4ae5b4ed-ba4a-462e-9805-70adbe178b6b.png)\r\n\r\n\r\nYou can find more examples in our [official GitHub](https://github.com/Azure-Samples/media-services-video-indexer/tree/master/Embedding%20widgets/widget-customization).\r\n\r\n
\r\n\r\n## Enable custom styling to meet your application look and feel\r\n\r\n![vi_widgets_custom_color.png](https://user-images.githubusercontent.com/51399662/135491477-f9d5ee1d-803b-4693-873b-0a003c3a0a13.jpg)\r\n\r\nBoth widgets supports customizing the UI color.\r\nYou can send your own color palette, select one of VI theme, or select a default theme and customize part of the colors.\r\n\r\nTo implement that you should send as part of the configuration object a ```style``` object of type ```IInsightsStyle```.\r\n\r\nPlease review our [official GitHub](https://github.com/Azure-Samples/media-services-video-indexer/tree/master/Embedding%20widgets/widget-customization#enable-custom-styling-to-meet-your-application-look-and-feel) to find more information about the interfaces and classes involved.\r\n\r\n### Code sample:\r\nThe following typescript example creates a insight widget with 'Dark' theme, and changes two colors. \r\n\r\n```typescript\r\n import {\r\n IInsightsWidgetConfig,\r\n InsightsWidget,\r\n IBaseStyleConfig,\r\n IWidgetStyle\r\n } from '@azure/video-indexer-widgets';\r\n\r\n // Change two colors of the base style config\r\n const insightsStyleConfig : IBaseStyleConfig = {\r\n primary: 'yellow',\r\n dividers: 'rgba(134,28,173,1)'\r\n };\r\n\r\n // Select dark mode theme and send new style\r\n const style: IWidgetStyle = {\r\n customStyle: insightsStyleConfig,\r\n theme: 'Dark'\r\n };\r\n const config: IVIInsightsWidgetConfig = {\r\n accountId: '',\r\n videoId: '',\r\n accessToken: '',\r\n style: style\r\n };\r\n\r\n this.insightsWidget = new InsightsWidget(\r\n 'container',\r\n {\r\n height: 780,\r\n width: 580\r\n },\r\n config\r\n );\r\n\r\n this.insightsWidget.render();\r\n```\r\n\r\n## Trademarks\r\n\r\nThis project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft \r\ntrademarks or logos is subject to and must follow \r\n[Microsoft's Trademark & Brand Guidelines](https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks/usage/general).\r\nUse of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship.\r\nAny use of third-party trademarks or logos are subject to those third-party's policies.\r\n\r\n## Code of Conduct\r\n\r\nThis project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).\r\nFor more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or\r\ncontact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.","readmeFilename":"README.md"}