Light

alugha / typed-ima-sdk Goto Github PK

View Code? Open in Web Editor NEW

29.0 4.0 13.0 399 KB

A library for asynchronously loading the Google IMA SDK with static typing

License: MIT License

TypeScript 100.00%

typescript typescript-definitions typescript2 typescript-library ima-sdk google-ima-html5 google-ima video-ads asynchronous async

typed-ima-sdk's Introduction

Typed Google IMA SDK

A library without runtime dependencies for asynchronously loading the Google IMA SDK, including TypeScript type definitions for the SDK itself.

For information on the Google IMA SDK itself, please visit Google's official documentation.

Installation

yarn add @alugha/ima or npm install --save @alugha/ima

Usage

TypeScript with async loading

With promises and CommonJS modules:

const { loadImaSdk, google } = require("@alugha/ima");

loadImaSdk()
  .then(ima => {
    // Use the IMA SDK like any other typed module
    const adDisplayContainer: google.ima.AdDisplayContainer = new ima.AdDisplayContainer(
      document.getElementById("ad-container")
    );
    adDisplayContainer.initialize();
  })
  .catch(() => {
    console.log("SDK could not be loaded. Check your ad blocker!");
  });

With async / await and ES2015 modules:

import { loadImaSdk, google } from "@alugha/ima";

const example = async () => {
  try {
    const ima = await loadImaSdk();
    // Use the IMA SDK like any other typed module
    const adDisplayContainer: google.ima.AdDisplayContainer = new ima.AdDisplayContainer(
      document.getElementById("ad-container")
    );
    adDisplayContainer.initialize();
  } catch (e) {
    console.log("SDK could not be loaded. Check your ad blocker!");
  }
};

TypeScript without async loading

If you prefer to directly load the SDK using a script tag, you can still make use of the included type definitions in types/ima.d.ts.

Disclaimer

We are not involved in the development of the Google IMA SDK itself. This library is not connected to Google in any way either.

typed-ima-sdk's People

Contributors

Stargazers

Watchers

Forkers

schrobak bechtold klipstein go-gunji subgression daremes shenglongy achavesm justicointeractive flowplayer dianomi-cjas jiroor

typed-ima-sdk's Issues

nearMatchPercent Type misspelled

I have found an error where the Type nearMatchParent doesn't exist in the Google IMA SDK. Reading the docs I've seen that it should be nearMatchPercent.

Update IMA types

Hi,
there has been no update since March 2018. Is there any chance you would be upgrading the lib?

ima sdk vesrion

hi guys,
how can I check which version of ima sdk is used ?

Not work with ReactJs

Hi supporters,
I installed this newest library on my React Js project, but got a the error message:

Attempted import error: 'google' is not exported from '@alugha/ima'.

Here is my code:

`
import React, {Component} from "react";
import { loadImaSdk, google } from "@alugha/ima";

class AdsVideo extends Component<any, any> {
public readonly width = 320;
public readonly height = 180;

private adsManager: google.ima.AdsManager | undefined;
private adsLoader: google.ima.AdsLoader | undefined;
private adDisplayContainer: google.ima.AdDisplayContainer | undefined;
private videoContent: HTMLVideoElement | undefined;
private ima: any;

async componentDidMount() {
    try{
        this.ima = await loadImaSdk()
        this.initData(this.ima)
    } catch (e) {
        console.log("SDK could not be loaded. Check your ad blocker!")
    }
}


initData(ima: any) {
    this.videoContent = document.getElementById("ads-video--content-element") as HTMLVideoElement
    this.requestAds(ima)
}

}`

Dependencies:
"@alugha/ima": "^2.0.3",
"react": "^16.12.0",
"typescript": "^3.7.5",
...

Please check this issue. Thanks

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.