Leverage the VTTCue Object in an Angular2 project using Typescript

I am looking to dynamically load subtitles onto a video.

    let subs:TextTrack = video.addTextTrack('subtitles');

    for (let dataSrt of dataSrts) {
        let cue: any = new VTTCue(
            dataSrt['startTime'],
            dataSrt['endTime'],
            dataSrt['text']
        );

        subs.addCue(cue);
    }

    subs.mode = "showing";

While this method works smoothly, the compiler seems to have trouble recognizing the VTTCue Object.

Although there is a TextTrackCue Object available, it currently does not function properly on any browser.

The issue arises when I start the server with npm start, an error prevents the launch process. However, if I make changes to the code after launching, everything runs perfectly fine.

I attempted to add an empty VTTCue class in C++ style, but TypeScript did not approve of it.

Thank you in advance.

angulartypescriptnpm

Answer №1

To prevent Typescript from flagging the existence of properties when using an object, you can simply cast it as any. Since VTTCue is expected to be available on the window object, you can achieve this by:

let cue: any = new (<any>window).VTTCue(...);

Alternatively, in TSX syntax (since <> is now reserved for JSX), you can use:

let cue: any = new (window as any).VTTCue(...);

Answer №2

Based on a demonstration from videogular2's showcase, we have the capability to:

let VTTCue;

I successfully implemented this feature in one of my recent projects. The only limitation is that I cannot utilize this variable when specifying member types, but I can still use the constructor VTTCue(...).

Answer №3

Why not transform the VTTCue class into a VTTCue interface? Here's an example of how it can be implemented:

interface VTTCue {
  create(start: number, end: number, text: string): VTTCue
}

Answer №4

This is the approach I took using TypeScript version 2.32:

const myVTTCue: {
  prototype: TextTrackCue;
  new(startTime: number, endTime: number, text: string): TextTrackCue;
} = VTTCue;

For this solution, I utilized the TextTrackCue definition available at the following link and made a slight alteration in naming. https://github.com/Microsoft/TypeScript/blob/master/src/lib/dom.generated.d.ts

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Best Practices for Integrating Angular with Your Custom JavaScript Library

Imagine needing to create a TypeScript function that can be utilized across various components, services, or modules. For example, let's say you want an alert wrapper like this: my_alert(msg); // function my_alert(msg) { alert(msg); } You might hav ...

angulartypescript

Ways to resolve discrepancies between Bootstrap-3 and Bootstrap-4 versions

I am currently learning Angular through an older tutorial that uses Bootstrap 3.3.7. However, I have downloaded the latest version of Bootstrap, 4.4.1, which is causing some issues as I cannot follow along with the instructor and utilize certain features l ...

angularbootstrap-4

Building an Event Scheduler in Outlook Calendar with Angular 5

Currently, I am utilizing Angular version 5.2 for a room booking portal project. One of the requirements entails adding an event to the Outlook calendar on the day a room is booked. The system includes a table listing all bookings, with a button in each ro ...

angulartypescriptoutlook

Is there a method of converting React components into strings for manipulation?

In my React TypeScript project, I am utilizing a crucial library that contains a component which transforms text into SVG. Let's refer to this library component as <LibraryRenderer />. To enhance the functionality, I have enclosed this componen ...

reactjsstringtypescript

Convert parameterized lambdas for success and failure into an observable using RxJS

There is a function exported by a library that I am currently using: export function read( urlOrRequest: any, success?: (data: any, response: any) => void, error?: (error: Object) => void, handler?: Handler, httpClient?: Object, ...

typescriptrxjs

Issue with unapplied nullable type during export操作

I'm struggling to understand why my nullable type isn't being applied properly Here's an illustration interface Book { name: string; author: string; reference: string; category: string; } async function handleFetch<T>(endpoin ...

javascripttypescript

Unable to globally override the default font in MUI theme

Objective: My goal is to customize the default font in MUI themes. Issue: Despite reviewing MUI documentation and conducting research on Stack Overflow, I am facing difficulty overriding a custom font globally across my theme. Theme setup: import { creat ...

typescriptmaterial-ui

How can you debug a Node.js CLI tool using WebStorm?

Struggling to develop a CLI tool using TypeScript within WebStorm as my IDE. No matter what I try, debugging just won't work for me. My journey in Node.js CLI programming started with this tutorial. Successfully transpiling the TS source with npx tsc, ...

typescriptdebuggingwebstorm

Having trouble with installing angular cli because 'lchown' not located

I've been attempting to set up Angular CLI on macOS Big Sur v11.6 with npm version 8.1, following the instructions from the official Angular documentation. sudo npm install -g @angular/cli Despite logging in as root, I keep encountering this error: n ...

npmangular-clinpm-install

Balanced-JS encounters a 404 error

I am currently testing out the code sample provided in the following link: https://github.com/balanced/balanced-js After following the README instructions, I was able to get my local server up and running. However, when I visit the website and try to tok ...

javascriptnode.jsnpmgruntjsbalanced-payments

Discovering all subclasses of a base class in AngularWould you like to learn how

abstract class Item { private name: string; private description: string; constructor(name: string,description:string) { this.name = name; this.description = description; } } class Car extends Item { constructor(name: string,descri ...

angularoopdata-structuresabstract-classsubclass

Encountering an [ERR_INVALID_URL] while attempting to deploy Strapi.io on Heroku

Struggling to deploy my strapi application on Heroku due to an invalid URL error, even after following the guidelines provided by strapi.io Below are the logs I received: 2020-01-29T15:32:54.185547+00:00 heroku[web.1]: Starting process with command `npm ...

mysqlnode.jsherokunpmstrapi

How to handle multiple formData input in NestJS controller

How can I create a controller in Nest.js that accepts two form-data inputs? Here is my Angular service code: public importSchema(file: File, importConfig: PreviewImportConfig): Observable<HttpEvent<SchemaParseResponse>> { const formData = ...

javascriptangulartypescriptnestjs

How to utilize the CSS hover feature within an Angular directive?

Presented here is the default directive. import { Directive, Input, Renderer2, ElementRef } from '@angular/core'; @Directive({ selector: '[newBox]' }) export class BoxDirective { @Input() backgroundColor = '#fff'; con ...

cssangularangular2-directivesangular-directive

Utilize the object's ID to filter and display data based on specified criteria

I retrieved an array of objects from a database and am seeking to narrow down the results based on specific criteria. For instance, I want to display results only if a user's id matches the page's correct id. TS - async getResultsForId() { ...

htmlangulartypescript

What occurs when the version in package.json is not the latest while using 'npx react-native' in React Native?

Currently in my React Native project, I am utilizing npx react-native run-ios, which is configured to use the latest version of react-native. However, the version specified in my package.json file is 0.62.0, while the latest available version is 0.63.4. Q ...

reactjsreact-nativenpmpackage.jsonnpx

What is the best way to integrate NPM modules with Django in an application?

I am working on a Django project that consists of 2 apps. I need to incorporate the Notion API into one of the apps, which requires me to install its NPM module. The challenge is that I have no experience with NPM or bundlers (which I understand are needed ...

node.jsdjangonpmwebpack

Creating an Array in TypeScript

Is it possible to declare a global array in Typescript so that it can be accessed using "this" from any part of the code? In javascript, I would typically declare it as "var anArray=[]". What is the equivalent way of doing this in Typescript? Using anArra ...

typescript

The TypeScript, NextJS project is encountering an issue where it is unable to read the property 'cwd' due to a TypeError

I've noticed this particular error popping up frequently online, but it's not quite matching the issue I'm facing. Every time I execute yarn dev, I encounter the following error: next-dev.js?53bc:89 Error was not caught TypeError: Cannot re ...

javascripttypescriptjestjsbabeljsnext.js

Limit the typescript generic type to only a singular string literal value, preventing the use of unions

Within my project, I have introduced a generic entity type that utilizes a generic to determine a field type based on a specific set of string literals: type EntityTypes = 'foo' | 'bar' | 'baz'; type EntityMappings = { foo: ...

typescripttypescript-generics