fix(YouTube): broken api types

Author: harlan-zw

src/runtime/components/ScriptYouTubePlayer.vue

@@ -59,7 +59,7 @@ if (props.trigger === 'mousedown' && trigger instanceof Promise) {
 }
 onMounted(() => {
   onLoaded(async (instance) => {
-    const YouTube: typeof YT & { ready: (fn: () => void) => void } = await instance.YT
+    const YouTube = instance.YT instanceof Promise ? await instance.YT : instance.YT
     await new Promise<void>((resolve) => {
       if (typeof YT.Player === 'undefined')
         YouTube.ready(resolve)

src/runtime/registry/youtube-player.ts

@@ -1,11 +1,32 @@
 /// <reference types="youtube" />
 import { watch } from 'vue'
+import type { UseScriptContext } from '@unhead/vue'
+import type { MaybePromise } from '../utils'
 import { useRegistryScript } from '../utils'
 import { useHead } from '#imports'
 import type { RegistryScriptInput } from '#nuxt-scripts'
 
 export interface YouTubePlayerApi {
-  YT: typeof YT & { ready: (fn: () => void) => void }
+  YT: MaybePromise<{
+    Player: YT.Player
+    PlayerState: YT.PlayerState
+    get(k: string): any
+    loaded: 0 | 1
+    loading: 0 | 1
+    ready(f: () => void): void
+    scan(): void
+    setConfig(config: YT.PlayerOptions): void
+    subscribe<EventName extends keyof YT.Events>(
+      event: EventName,
+      listener: YT.Events[EventName],
+      context?: any
+    ): void
+    unsubscribe<EventName extends keyof YT.Events>(
+      event: EventName,
+      listener: YT.Events[EventName],
+      context?: any
+    ): void
+  }>
 }
 
 declare global {
@@ -16,7 +37,7 @@ declare global {
 
 export type YouTubePlayerInput = RegistryScriptInput
 
-export function useScriptYouTubePlayer<T extends YouTubePlayerApi>(_options: YouTubePlayerInput) {
+export function useScriptYouTubePlayer<T extends YouTubePlayerApi>(_options: YouTubePlayerInput): UseScriptContext<T> {
   let readyPromise: Promise<void> = Promise.resolve()
   const instance = useRegistryScript<T>('youtubePlayer', () => ({
     scriptInput: {
@@ -26,7 +47,7 @@ export function useScriptYouTubePlayer<T extends YouTubePlayerApi>(_options: You
     scriptOptions: {
       use() {
         return {
-          YT: readyPromise.then(() => {
+          YT: window.YT || readyPromise.then(() => {
             return window.YT
           }),
         }

src/runtime/utils.ts

@@ -11,6 +11,8 @@ import type {
   ScriptRegistry,
 } from '#nuxt-scripts'
 
+export type MaybePromise<T> = Promise<T> | T
+
 function validateScriptInputSchema<T extends GenericSchema>(key: string, schema: T, options?: InferInput<T>) {
   if (import.meta.dev) {
     try {