{"id":19177792,"url":"https://github.com/eyevinn/csai-manager","last_synced_at":"2025-06-19T09:34:45.642Z","repository":{"id":55989707,"uuid":"488928265","full_name":"Eyevinn/csai-manager","owner":"Eyevinn","description":"Simple class to conduct and manage the relation between content playback and an ad experience applied on top - client side.","archived":false,"fork":false,"pushed_at":"2024-03-08T13:57:06.000Z","size":289,"stargazers_count":3,"open_issues_count":1,"forks_count":2,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-06-10T03:33:22.992Z","etag":null,"topics":["library"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Eyevinn.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2022-05-05T10:31:14.000Z","updated_at":"2023-05-03T00:34:47.000Z","dependencies_parsed_at":"2024-03-30T23:32:27.165Z","dependency_job_id":"ff977940-cdfb-46ab-a5fc-6da8e9be4bec","html_url":"https://github.com/Eyevinn/csai-manager","commit_stats":{"total_commits":10,"total_committers":3,"mean_commits":"3.3333333333333335","dds":"0.19999999999999996","last_synced_commit":"301a18c669bd135b4bc2fb9928543a07e62eaf0a"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/Eyevinn/csai-manager","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Eyevinn%2Fcsai-manager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Eyevinn%2Fcsai-manager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Eyevinn%2Fcsai-manager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Eyevinn%2Fcsai-manager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Eyevinn","download_url":"https://codeload.github.com/Eyevinn/csai-manager/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Eyevinn%2Fcsai-manager/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260724839,"owners_count":23052821,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["library"],"created_at":"2024-11-09T10:35:10.509Z","updated_at":"2025-06-19T09:34:40.628Z","avatar_url":"https://github.com/Eyevinn.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"CSAI Manager\n===\n\nSimple class to conduct and manage the relation between content playback and an ad experience applied on top - client side.\n\n## Installation\n\n`npm install @eyevinn/csai-manager`\n\n## Basic Usage\n\n```js\nconst videoElement = document.querySelector(\"video\");\nnew CSAIManager({\n  contentVideoElement: videoElement,\n  adBreakVASTList: [\n    {\n      timeOffset: 0,\n      vastUrl:\n        \"https://eyevinn.adtest.eyevinn.technology/api/v1/vast?dur=30\",\n    },\n  ],\n});\n\nvideoElement.addEventListener(\"ended\", () =\u003e {\n  csaiManager.destroy();\n});\n```\n\nIf you *do not* send in an already created ad video element (through the available option listed below), but let the library create the element, you will need to set the container to `position: relative;` as the CSAI Manager will try to position the new element absolute edge to edge of the container.\n\n### Available Options\n\n```ts\nexport interface ICSAIManagerOptions {\n  debug?: boolean;\n\n  contentVideoElement: HTMLVideoElement;\n  autoManagePlayback?: boolean; // default true; whether you want the manager to pause/play the content, or if you want to act on the events\n  isLive?: boolean; // default false; will adjust the validation to not require vast or vmap url etc\n  autoplay?: boolean; // default false\n\n  // Whether you have created a video element for the ads on beforehand, or would want to render it in a div. As fallback it finds the parent of the contentVideoElement\n  container?: HTMLElement;\n  adVideoElement?: HTMLVideoElement;\n\n  // For fetching ads - either provide a vmap url, or a list of time offsets and vast url's\n  vmapUrl?: string;\n  adBreakVASTList?: IAdBreakVASTItem[];\n}\n\nexport interface IAdBreakVASTItem {\n  timeOffset: number;\n  vastUrl: string;\n}\n```\n\n### Events\n\nYou may listen to events exposed by the ad manager, to for instance handle the pause and play of your content yourself.\n\n```js\nconst videoElement = document.querySelector(\"video\");\nconst csaiManager = new CSAIManager({\n  contentVideoElement: videoElement,\n  adBreakVASTList: [\n    {\n      timeOffset: 0,\n      vastUrl:\n        \"https://eyevinn.adtest.eyevinn.technology/api/v1/vast?dur=30\",\n    },\n  ],\n});\n\ncsaiManager.on(\"*\", (event, data) =\u003e {\n\n  console.log(\"DEBUG EVENT\", event, data);\n\n  if (event === \"breakStart\") {\n    videoElement.pause();\n  }\n  if (event === \"breakEnd\") {\n    videoElement.play();\n  }\n});\n```\n\nThe events exposed are matching the VAST tracking - i.e. IAB events\n\n```ts\nexport enum AdTrackingEvent {\n  START = \"start\",\n  IMPRESSION = \"impression\",\n  EXPAND = \"expand\",\n  MUTE = \"mute\",\n  UNMUTE = \"unmute\",\n  PAUSE = \"pause\",\n  RESUME = \"resume\",\n  REWIND = \"rewind\",\n  CLOSE = \"close\",\n  COMPLETE = \"complete\",\n\n  FIRST_QUARTILE = \"firstQuartile\",\n  MIDPOINT = \"midpoint\",\n  THIRD_QUARTILE = \"thirdQuartile\",\n\n  CLICK_THROUGH = \"clickThrough\",\n\n  ERROR = \"error\",\n}\n\nexport enum AdBreakTrackingEvent {\n  BREAK_START = \"breakStart\",\n  BREAK_END = \"breakEnd\",\n}\n```\n\n### Methods\n\n- `play()` to trigger play when autoplay isn't set to true or play when paused\n- `pause()` to pause the ad video playback\n\nThese methods are specifically to be used for live\n(remember to set the initOption `autoManagePlayback` to `false` to not pause the live stream)\n\n- `fetchAdBreak(vastUrl: string): Promise\u003cvoid\u003e`\n- `triggerAdBreak(): Promise\u003cvoid\u003e`\n\n### Example usage with custom skin\n\n```js\nconst videoElement = document.querySelector(\"video\");\nconst csaiManager = new CSAIManager(opts);\n\n// dummy elements\nconst playButton = document.querySelector(\"button#play\");\nconst pauseButton = document.querySelector(\"button#pause\");\n// example of keeping the state of media playing, in your code\nlet mediaPlaying = \"content\";\n\ncsaiManager.on(\"*\", (event, data) =\u003e {\n  // we switch content type based on the knowledge of when the ad break starts and ends\n  if (event === \"breakStart\") {\n    mediaPlaying = \"ads\";\n  }\n  if (event === \"breakEnd\") {\n    mediaPlaying = \"content\";\n  }\n});\n\nplayButton.addEventListener(\"click\", () =\u003e {\n  // if content - interact with your standard content player\n  if (mediaPlaying === \"content\") {\n      videoElement.play()    \n  }\n  // if ads - interact with the CSAI manager\n  if (mediaPlaying === \"ads\") {\n    csaiManager.play();\n  }\n});\npauseButton.addEventListener(\"click\", () =\u003e {\n  // if content - interact with your standard content player\n  if (mediaPlaying === \"content\") {\n      videoElement.pause()    \n  }\n  // if ads - interact with the CSAI manager\n  if (mediaPlaying === \"ads\") {\n    csaiManager.pause();\n  }\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feyevinn%2Fcsai-manager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feyevinn%2Fcsai-manager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feyevinn%2Fcsai-manager/lists"}