Bagaimana Jika Kita Dapat Mencari Kata Kunci Apapun dari Video YouTube Manapun Melalui Captionnya?

const const ccUrl: "https://www.youtube.com/api/timedtext?v=CWu29PRCUvQ&asr_langs=de%2Cen%2Ces%2Cfr%2Cit%2Cja%2Cko%2Cnl%2Cpt%2Cru&caps=asr&exp=xftt&xorp=true&xoaf=5&hl=en&ip=0.0.0.0&ipbits=0&expire=1612625982&sparams=ip%2Cipbits%2Cexpire%2Cv%2Casr_langs%2Ccaps%2Cexp%2Cxorp%2Cxoaf&signature=CC705091625358E3A3883C981A21BFC4F6E35569.77DAB826C17A839CEE703DB894D73D8AECCA0AE2&key=yt8&lang=en-GB&fmt=json3&xorb=2&xobt=3&xovt=3"ccUrl = 'https://www.youtube.com/api/timedtext?v=CWu29PRCUvQ&asr_langs=de%2Cen%2Ces%2Cfr%2Cit%2Cja%2Cko%2Cnl%2Cpt%2Cru&caps=asr&exp=xftt&xorp=true&xoaf=5&hl=en&ip=0.0.0.0&ipbits=0&expire=1612625982&sparams=ip%2Cipbits%2Cexpire%2Cv%2Casr_langs%2Ccaps%2Cexp%2Cxorp%2Cxoaf&signature=CC705091625358E3A3883C981A21BFC4F6E35569.77DAB826C17A839CEE703DB894D73D8AECCA0AE2&key=yt8&lang=en-GB&fmt=json3&xorb=2&xobt=3&xovt=3'

{
  "v": "CWu29PRCUvQ",
  "asr_langs": "de,en,es,fr,it,ja,ko,nl,pt,ru",
  "caps": "asr",
  "exp": "xftt",
  "xorp": "true",
  "xoaf": "5",
  "hl": "en",
  "ip": "0.0.0.0",
  "ipbits": "0",
  "expire": "1612625982",
  "sparams": "ip,ipbits,expire,v,asr_langs,caps,exp,xorp,xoaf",
  "signature": "CC705091625358E3A3883C981A21BFC4F6E35569.77DAB826C17A839CEE703DB894D73D8AECCA0AE2",
  "key": "yt8",
  "lang": "en-GB",
  "fmt": "json3",
  "xorb": "2",
  "xobt": "3",
  "xovt": "3"
}

WEBVTT
Kind: captions
Language: en

00:00:00.357 --> 00:00:01.822
- [Narrator] There is
a growing feeling today

00:00:01.822 --> 00:00:04.699
that something is wrong with
our system of education.

WEBVTT
Kind: captions
Language: en

00:00:00.357 --> 00:00:01.822
- [Narrator] There is
a growing feeling today

00:00:01.822 --> 00:00:04.699
that something is wrong with
our system of education.

import import joijoi from 'joi'

const const indexQuery: anyindexQuery = import joijoi.object({
  url: anyurl: import joijoi.string().required(),
  page: anypage: import joijoi.string().optional(),
  size: anysize: import joijoi.string().optional(),
  paginated: anypaginated: import joijoi.number().integer().allow(0, 1).optional()
})

const const searchQuery: anysearchQuery = const indexQuery: anyindexQuery.keys({
  q: anyq: import joijoi.string().min(3).required(),
  marked: anymarked: import joijoi.number().integer().allow(0, 1).optional()
})

const const youtubeUrl: "https://www.youtube.com/watch?v=okpg-lVWLbE"youtubeUrl = 'https://www.youtube.com/watch?v=okpg-lVWLbE'
const const result: RegExpExecArray | nullresult = /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/gi
  .RegExp.exec(string: string): RegExpExecArray | null
Executes a search on a string using a regular expression pattern, and returns an array containing the results of that search.
@paramstring The String object or string literal on which to perform the search.exec(const youtubeUrl: "https://www.youtube.com/watch?v=okpg-lVWLbE"youtubeUrl)

let let id: stringid = ''

if (var Array: ArrayConstructorArray.ArrayConstructor.isArray(arg: any): arg is any[]isArray(const result: RegExpExecArray | nullresult) && const result: RegExpExecArrayresult.Array<string>.length: number
Gets or sets the length of the array. This is a number one higher than the highest index in the array.length > 0) {
  let id: stringid = const result: RegExpExecArrayresult[1]
}

// previous code

const const youtubeEmbedUrl: stringyoutubeEmbedUrl = `https://www.youtube.com/embed/${const id: stringid}?hl=en&cc_lang_pref=en&cc_load_policy=1&autoplay=1`

import import chromechrome from 'chrome-aws-lambda'
import import puppeteerpuppeteer from 'puppeteer-core'

async function function getYoutubeCC(url: string): Promise<string>getYoutubeCC(url: stringurl: string) {
  const const browser: anybrowser = await import puppeteerpuppeteer.launch({
    args: anyargs: import chromechrome.args,
    executablePath: anyexecutablePath: await import chromechrome.executablePath,
    headless: anyheadless: import chromechrome.headless
  })

  const const page: anypage = await const browser: anybrowser.newPage()

  await const page: anypage.setRequestInterception(true)

  let let ccUrl: stringccUrl = ''

  const page: anypage.on('request', (request: anyrequest) => {
    if (request: anyrequest.resourceType() === 'xhr') {
      const const _ccUrl: any_ccUrl = request: anyrequest.url()
      if (const _ccUrl: any_ccUrl.includes('https://www.youtube.com/api/timedtext')) {
        let ccUrl: stringccUrl = const _ccUrl: any_ccUrl.replace('json3', 'vtt')
      }
    }
    request: anyrequest.continue()
  })

  await const page: anypage.goto(url: stringurl, {
    waitUntil: stringwaitUntil: 'networkidle0'
  })

  return let ccUrl: stringccUrl
}

(async () => {
  const const ccUrl: stringccUrl = await function getYoutubeCC(url: string): Promise<string>getYoutubeCC(const youtubeEmbedUrl: stringyoutubeEmbedUrl)
})()

(async () => {
  // previous code

  const const data: Vtt[]data: 
type Vtt = {
    id?: number;
    start: number;
    end: number;
    text: string;
}Vtt[] = await function fetch(input: RequestInfo | URL, init?: RequestInit): Promise<Response>
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/fetch)fetch(const ccUrl: stringccUrl)
    .Promise<Response>.then<string, never>(onfulfilled?: ((value: Response) => string | PromiseLike<string>) | null | undefined, onrejected?: ((reason: any) => PromiseLike<never>) | null | undefined): Promise<string>
Attaches callbacks for the resolution and/or rejection of the Promise.
@paramonfulfilled The callback to execute when the Promise is resolved.@paramonrejected The callback to execute when the Promise is rejected.@returnsA Promise for the completion of which ever callback is executed.then((ccResponse: ResponseccResponse) => {
      if (ccResponse: ResponseccResponse.Response.ok: boolean
The **`ok`** read-only property of the Response interface contains a Boolean stating whether the response was successful (status in the range 200-299) or not.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Response/ok)ok) {
        return ccResponse: ResponseccResponse.Body.text(): Promise<string>
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Request/text)text()
      }
      return ''
    })
    .Promise<string>.then<Vtt[], Vtt[]>(onfulfilled?: ((value: string) => Vtt[] | PromiseLike<Vtt[]>) | null | undefined, onrejected?: ((reason: any) => Vtt[] | PromiseLike<Vtt[]>) | null | undefined): Promise<Vtt[]>
Attaches callbacks for the resolution and/or rejection of the Promise.
@paramonfulfilled The callback to execute when the Promise is resolved.@paramonrejected The callback to execute when the Promise is rejected.@returnsA Promise for the completion of which ever callback is executed.then((ccText: stringccText) => {
      const const ccStriped: stringccStriped = function stripHtml(string: string): stringstripHtml(ccText: stringccText)
      const const ccJson: CCNodeListccJson = function vttToJson(vtt: string): CCNodeListvttToJson(const ccStriped: stringccStriped)

      const const ccData: Vtt[]ccData = const ccJson: CCNodeListccJson
        .Array<CCNode>.filter(predicate: (value: CCNode, index: number, array: CCNode[]) => unknown, thisArg?: any): CCNode[] (+1 overload)
Returns the elements of an array that meet the condition specified in a callback function.
@parampredicate A function that accepts up to three arguments. The filter method calls the predicate function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the predicate function. If thisArg is omitted, undefined is used as the this value.filter((item: CCNodeitem) => {
          return item: CCNodeitem.type: "cue"type === 'cue'
        })
        .
Array<CCNode>.map<{
    start: number;
    end: number;
    text: string;
}>(callbackfn: (value: CCNode, index: number, array: CCNode[]) => {
    start: number;
    end: number;
    text: string;
}, thisArg?: any): {
    start: number;
    end: number;
    text: string;
}[]
Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((item: CCNodeitem) => {
          return {
            start: numberstart: function toSecond(timestamp: number): numbertoSecond((item: CCNodeitem as 
type CCNode = {
    type: "cue";
    data: {
        start: number;
        end: number;
        text: string;
        settings?: string;
    };
}CCNode).
data: {
    start: number;
    end: number;
    text: string;
    settings?: string;
}data.start: numberstart || 0),
            end: numberend: function toSecond(timestamp: number): numbertoSecond((item: CCNodeitem as 
type CCNode = {
    type: "cue";
    data: {
        start: number;
        end: number;
        text: string;
        settings?: string;
    };
}CCNode).
data: {
    start: number;
    end: number;
    text: string;
    settings?: string;
}data.end: numberend || 0),
            text: stringtext: function stripWhitespaceNewLine(string: string): stringstripWhitespaceNewLine((item: CCNodeitem as 
type CCNode = {
    type: "cue";
    data: {
        start: number;
        end: number;
        text: string;
        settings?: string;
    };
}CCNode).
data: {
    start: number;
    end: number;
    text: string;
    settings?: string;
}data.text: stringtext)
          }
        }) as 
type Vtt = {
    id?: number;
    start: number;
    end: number;
    text: string;
}Vtt[]

      return const ccData: Vtt[]ccData
    })
})()

(async () => {
  // previous code

  const const indexEndpoint: stringindexEndpoint = `https://cari-teks-video-api.vercel.app/api/?url=${const youtubeUrl: stringyoutubeUrl}&paginated=0`

  const const list: FetcherReturnTypelist: 
type FetcherReturnType = {
    data: Vtt[];
}FetcherReturnType = await function fetch(input: RequestInfo | URL, init?: RequestInit): Promise<Response>
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/fetch)fetch(const indexEndpoint: stringindexEndpoint)
    .Promise<Response>.then<any, never>(onfulfilled?: ((value: Response) => any) | null | undefined, onrejected?: ((reason: any) => PromiseLike<never>) | null | undefined): Promise<any>
Attaches callbacks for the resolution and/or rejection of the Promise.
@paramonfulfilled The callback to execute when the Promise is resolved.@paramonrejected The callback to execute when the Promise is rejected.@returnsA Promise for the completion of which ever callback is executed.then((response: Responseresponse) => {
      if (response: Responseresponse.Response.ok: boolean
The **`ok`** read-only property of the Response interface contains a Boolean stating whether the response was successful (status in the range 200-299) or not.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Response/ok)ok) {
        return response: Responseresponse.Body.json(): Promise<any>
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Request/json)json()
      }
      return []
    })
    .
Promise<any>.then<{
    data: Vtt[];
}, FetcherReturnType>(onfulfilled?: ((value: any) => {
    data: Vtt[];
} | PromiseLike<{
    data: Vtt[];
}>) | null | undefined, onrejected?: ((reason: any) => FetcherReturnType | PromiseLike<FetcherReturnType>) | null | undefined): Promise<FetcherReturnType | {
    data: Vtt[];
}>
Attaches callbacks for the resolution and/or rejection of the Promise.
@paramonfulfilled The callback to execute when the Promise is resolved.@paramonrejected The callback to execute when the Promise is rejected.@returnsA Promise for the completion of which ever callback is executed.then((data: Vtt[]data: 
type Vtt = {
    id?: number;
    start: number;
    end: number;
    text: string;
}Vtt[]) => {
      return {
        data: Vtt[]data
      }
    })
})()

(async () => {
  // previous code

  const 
const generatedIdList: {
    id: number;
    start: number;
    end: number;
    text: string;
}[]generatedIdList = const list: Vtt[]list.
Array<Vtt>.map<{
    id: number;
    start: number;
    end: number;
    text: string;
}>(callbackfn: (value: Vtt, index: number, array: Vtt[]) => {
    id: number;
    start: number;
    end: number;
    text: string;
}, thisArg?: any): {
    id: number;
    start: number;
    end: number;
    text: string;
}[]
Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((item: Vttitem, id: numberid) => {
    return {
      ...item: Vttitem,
      id: numberid
    }
  })
})()

import import FlexsearchFlexsearch from 'flexsearch'

(async () => {
  // previous code

  const const index: anyindex = import FlexsearchFlexsearch.create<
type Vtt = {
    id?: number;
    start: number;
    end: number;
    text: string;
}Vtt>({
    
doc: {
    id: string;
    field: string[];
}doc: {
      id: stringid: 'id',
      field: string[]field: ['text']
    }
  })
  const generatedIdList: Vtt[]generatedIdList.Array<Vtt>.forEach(callbackfn: (value: Vtt, index: number, array: Vtt[]) => void, thisArg?: any): void
Performs the specified action for each element in an array.
@paramcallbackfn A function that accepts up to three arguments. forEach calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.forEach((item: Vttitem) => {
    const index: anyindex.add(item: Vttitem)
  })

  const const keyword: "education"keyword = 'education'
  const const resultList: anyresultList = await const index: anyindex.search(const keyword: "education"keyword)
})()

(async () => {
  // previous code

  function function (local function) replacer(match: string): stringreplacer(match: stringmatch: string) {
    return `<mark class="cvt-highlight">${match: stringmatch}</mark>`
  }

  const const highlightedList: Vtt[]highlightedList: 
type Vtt = {
    id?: number;
    start: number;
    end: number;
    text: string;
}Vtt[] = const resultList: Vtt[]resultList.
Array<Vtt>.map<{
    text: string;
    id?: number;
    start: number;
    end: number;
}>(callbackfn: (value: Vtt, index: number, array: Vtt[]) => {
    text: string;
    id?: number;
    start: number;
    end: number;
}, thisArg?: any): {
    text: string;
    id?: number;
    start: number;
    end: number;
}[]
Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((item: Vttitem) => {
    let let text: stringtext = ''
    if (item: Vttitem.text: stringtext.String.includes(searchString: string, position?: number): boolean
Returns true if searchString appears as a substring of the result of converting this
object to a String, at one or more positions that are
greater than or equal to position; otherwise, returns false.
@paramsearchString search string@paramposition If position is undefined, 0 is assumed, so as to search all of the String.includes(const keyword: stringkeyword)) {
      let text: stringtext = `${item: Vttitem.text: stringtext}`.
String.replace(searchValue: {
    [Symbol.replace](string: string, replacer: (substring: string, ...args: any[]) => string): string;
}, replacer: (substring: string, ...args: any[]) => string): string (+3 overloads)
Replaces text in a string, using an object that supports replacement within a string.
@paramsearchValue A object can search for and replace matches within a string.@paramreplacer A function that returns the replacement text.replace(new 
var RegExp: RegExpConstructor
new (pattern: RegExp | string, flags?: string) => RegExp (+2 overloads)RegExp(`${const keyword: stringkeyword}`, 'gi'), function (local function) replacer(match: string): stringreplacer)
    } else {
      const const multipleWords: RegExpMatchArray | nullmultipleWords = const keyword: stringkeyword.
String.match(matcher: {
    [Symbol.match](string: string): RegExpMatchArray | null;
}): RegExpMatchArray | null (+1 overload)
Matches a string or an object that supports being matched against, and returns an array
containing the results of that search, or null if no matches are found.
@parammatcher An object that supports being matched against.match(/\S+/g)
      if (const multipleWords: RegExpMatchArray | nullmultipleWords) {
        let text: stringtext = `${item: Vttitem.text: stringtext}`.
String.replace(searchValue: {
    [Symbol.replace](string: string, replacer: (substring: string, ...args: any[]) => string): string;
}, replacer: (substring: string, ...args: any[]) => string): string (+3 overloads)
Replaces text in a string, using an object that supports replacement within a string.
@paramsearchValue A object can search for and replace matches within a string.@paramreplacer A function that returns the replacement text.replace(
          new 
var RegExp: RegExpConstructor
new (pattern: RegExp | string, flags?: string) => RegExp (+2 overloads)RegExp(`${const multipleWords: RegExpMatchArraymultipleWords.Array<string>.join(separator?: string): string
Adds all the elements of an array into a string, separated by the specified separator string.
@paramseparator A string used to separate one element of the array from the next in the resulting string. If omitted, the array elements are separated with a comma.join('|')}`, 'gi'),
          function (local function) replacer(match: string): stringreplacer
        )
      }
    }

    return {
      ...item: Vttitem,
      text: stringtext
    }
  })
})()

(async () => {
  // previous code

  const const pageNumber: 1pageNumber = 1
  const const pageSize: 10pageSize = 10

  const const paginatedList: Vtt[]paginatedList = const highlightedList: Vtt[]highlightedList
    .Array<Vtt>.slice(start?: number, end?: number): Vtt[]
Returns a copy of a section of an array.
For both start and end, a negative index can be used to indicate an offset from the end of the array.
For example, -2 refers to the second to last element of the array.
@paramstart The beginning index of the specified portion of the array.
If start is undefined, then the slice begins at index 0.@paramend The end index of the specified portion of the array. This is exclusive of the element at the index 'end'.
If end is undefined, then the slice extends to the end of the array.slice((const pageNumber: 1pageNumber - 1) * const pageSize: 10pageSize, const pageNumber: 1pageNumber * const pageSize: 10pageSize)
})()

(async () => {
  // previous code

  const const removedIdList: Vtt[]removedIdList = const paginatedList: Vtt[]paginatedList.Array<Vtt>.map<Vtt>(callbackfn: (value: Vtt, index: number, array: Vtt[]) => Vtt, thisArg?: any): Vtt[]
Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((item: Vttitem) => {
    delete item: Vttitem.id?: number | undefinedid
    return item: Vttitem
  })
})()

(async () => {
  // previous code

  const const options: FormatterOptionsoptions: 
type FormatterOptions = {
    reqUrl: string;
    page: number;
    size: number;
    dataLength: number;
}FormatterOptions = {
    reqUrl: stringreqUrl: 'https://cari-teks-video-api.vercel.app/api',
    page: numberpage: const pageNumber: numberpageNumber,
    size: numbersize: const pageSize: numberpageSize,
    dataLength: numberdataLength: const removedIdList: Vtt[]removedIdList.Array<Vtt>.length: number
Gets or sets the length of the array. This is a number one higher than the highest index in the array.length
  }

  const const response: FormatterReturnTyperesponse: 
type FormatterReturnType = {
    first: string;
    last: string;
    prev: string;
    next: string;
    total: number;
    page: number;
    data: Vtt[];
}FormatterReturnType = {
    first: stringfirst: function getPaginationUrl(type: PaginationUrlType, options: FormatterOptions): stringgetPaginationUrl(enum PaginationUrlTypePaginationUrlType.function (enum member) PaginationUrlType.FirstFirst, const options: FormatterOptionsoptions),
    last: stringlast: function getPaginationUrl(type: PaginationUrlType, options: FormatterOptions): stringgetPaginationUrl(enum PaginationUrlTypePaginationUrlType.function (enum member) PaginationUrlType.LastLast, const options: FormatterOptionsoptions),
    prev: stringprev: function getPaginationUrl(type: PaginationUrlType, options: FormatterOptions): stringgetPaginationUrl(enum PaginationUrlTypePaginationUrlType.function (enum member) PaginationUrlType.PrevPrev, const options: FormatterOptionsoptions),
    next: stringnext: function getPaginationUrl(type: PaginationUrlType, options: FormatterOptions): stringgetPaginationUrl(enum PaginationUrlTypePaginationUrlType.function (enum member) PaginationUrlType.NextNext, const options: FormatterOptionsoptions),
    total: numbertotal: const options: FormatterOptionsoptions.dataLength: numberdataLength,
    page: numberpage: const options: FormatterOptionsoptions.page: numberpage,
    data: Vtt[]data: const removedIdList: Vtt[]removedIdList
  }
})()