@nuxt/scripts 0.11.5 → 0.11.6

package/dist/runtime/components/ScriptVimeoPlayer.vue.d.ts

@@ -0,0 +1,233 @@
+import type { HTMLAttributes, ImgHTMLAttributes } from 'vue';
+import type { ElementScriptTrigger } from '../types.js';
+import ScriptAriaLoadingIndicator from './ScriptAriaLoadingIndicator.vue.js';
+interface VimeoOptions {
+    id?: number | undefined;
+    url?: string | undefined;
+    autopause?: boolean | undefined;
+    autoplay?: boolean | undefined;
+    background?: boolean | undefined;
+    byline?: boolean | undefined;
+    color?: string | undefined;
+    controls?: boolean | undefined;
+    dnt?: boolean | undefined;
+    height?: number | undefined;
+    interactive_params?: string | undefined;
+    keyboard?: boolean | undefined;
+    loop?: boolean | undefined;
+    maxheight?: number | undefined;
+    maxwidth?: number | undefined;
+    muted?: boolean | undefined;
+    pip?: boolean | undefined;
+    playsinline?: boolean | undefined;
+    portrait?: boolean | undefined;
+    responsive?: boolean | undefined;
+    speed?: boolean | undefined;
+    quality?: Vimeo.VimeoVideoQuality | undefined;
+    texttrack?: string | undefined;
+    title?: boolean | undefined;
+    transparent?: boolean | undefined;
+    width?: number | undefined;
+}
+type __VLS_Props = {
+    trigger?: ElementScriptTrigger;
+    placeholderAttrs?: ImgHTMLAttributes;
+    rootAttrs?: HTMLAttributes;
+    aboveTheFold?: boolean;
+    vimeoOptions?: VimeoOptions;
+    id?: number | undefined;
+    url?: string | undefined;
+};
+declare const elVimeo: import("vue").Ref<any, any>;
+declare const rootEl: import("vue").Ref<any, any>;
+declare const ready: import("vue").Ref<boolean, boolean>;
+declare const status: import("vue").Ref<import("@unhead/vue").UseScriptStatus, import("@unhead/vue").UseScriptStatus>;
+declare const payload: import("vue").Ref<any, any>;
+declare const placeholder: import("vue").ComputedRef<any>;
+declare const rootAttrs: import("vue").ComputedRef<HTMLAttributes>;
+declare const placeholderAttrs: import("vue").ComputedRef<Omit<ImgHTMLAttributes, "style" | "src" | "loading" | "alt"> & Omit<{
+    src: any;
+    alt: string;
+    loading: "eager" | "lazy";
+    fetchpriority: string | undefined;
+    style: {
+        cursor: "pointer";
+        width: string;
+        objectFit: "contain";
+        height: string;
+    };
+}, "style" | "src" | "loading" | "alt"> & {
+    style: string | false | import("vue").StyleValue[] | {
+        cursor: "pointer";
+        width: string;
+        objectFit: "contain";
+        height: string;
+    } | (Omit<import("vue").CSSProperties, "width" | "height" | "cursor" | "objectFit"> & Omit<{
+        cursor: "pointer";
+        width: string;
+        objectFit: "contain";
+        height: string;
+    }, "width" | "height" | "cursor" | "objectFit"> & {
+        width: string | number | (string & {});
+        height: string | number | (string & {});
+        cursor: "alias" | "default" | "auto" | "help" | "copy" | "progress" | "none" | "text" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "-moz-grab" | "-webkit-grab" | "all-scroll" | "cell" | "col-resize" | "context-menu" | "crosshair" | "e-resize" | "ew-resize" | "grab" | "grabbing" | "move" | "n-resize" | "ne-resize" | "nesw-resize" | "no-drop" | "not-allowed" | "ns-resize" | "nw-resize" | "nwse-resize" | "pointer" | "row-resize" | "s-resize" | "se-resize" | "sw-resize" | "vertical-text" | "w-resize" | "wait" | "zoom-in" | "zoom-out";
+        objectFit: "fill" | "none" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "contain" | "cover" | "scale-down";
+    });
+    src: any;
+    loading: "eager" | "lazy";
+    alt: string;
+}>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_1: any, __VLS_3: {}, __VLS_8: {}, __VLS_10: {}, __VLS_12: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    placeholder?: (props: typeof __VLS_1) => any;
+} & {
+    loading?: (props: typeof __VLS_3) => any;
+} & {
+    awaitingLoad?: (props: typeof __VLS_8) => any;
+} & {
+    error?: (props: typeof __VLS_10) => any;
+} & {
+    default?: (props: typeof __VLS_12) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
+    ScriptAriaLoadingIndicator: typeof ScriptAriaLoadingIndicator;
+    elVimeo: typeof elVimeo;
+    rootEl: typeof rootEl;
+    ready: typeof ready;
+    status: typeof status;
+    payload: typeof payload;
+    placeholder: typeof placeholder;
+    rootAttrs: typeof rootAttrs;
+    placeholderAttrs: typeof placeholderAttrs;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    loaded: (event: import("@vimeo/player").LoadedEvent, player: Vimeo.Player) => any;
+    error: (event: import("@vimeo/player").Error, player: Vimeo.Player) => any;
+    cuechange: (event: import("@vimeo/player").CueChangeEvent, player: Vimeo.Player) => any;
+    durationchange: (event: import("@vimeo/player").DurationChangeEvent, player: Vimeo.Player) => any;
+    ended: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
+    pause: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
+    play: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
+    playing: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
+    progress: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
+    resize: (event: import("@vimeo/player").ResizeEvent, player: Vimeo.Player) => any;
+    seeked: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
+    seeking: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
+    timeupdate: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
+    volumechange: (event: import("@vimeo/player").VolumeChangeEvent, player: Vimeo.Player) => any;
+    fullscreenchange: (event: import("@vimeo/player").FullScreenChangeEvent, player: Vimeo.Player) => any;
+    texttrackchange: (event: import("@vimeo/player").TextTrackChangeEvent, player: Vimeo.Player) => any;
+    chapterchange: (event: import("@vimeo/player").VimeoChapter, player: Vimeo.Player) => any;
+    cuepoint: (event: import("@vimeo/player").CuePointEvent, player: Vimeo.Player) => any;
+    playbackratechange: (event: import("@vimeo/player").PlaybackRateEvent, player: Vimeo.Player) => any;
+    bufferstart: (event: never, player: Vimeo.Player) => any;
+    bufferend: (event: never, player: Vimeo.Player) => any;
+    qualitychange: (event: import("@vimeo/player").QualityChangeEvent, player: Vimeo.Player) => any;
+    camerachange: (event: import("@vimeo/player").VimeoCameraProps, player: Vimeo.Player) => any;
+    enterpictureinpicture: (event: never, player: Vimeo.Player) => any;
+    leavepictureinpicture: (event: never, player: Vimeo.Player) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onLoaded?: ((event: import("@vimeo/player").LoadedEvent, player: Vimeo.Player) => any) | undefined;
+    onError?: ((event: import("@vimeo/player").Error, player: Vimeo.Player) => any) | undefined;
+    onCuechange?: ((event: import("@vimeo/player").CueChangeEvent, player: Vimeo.Player) => any) | undefined;
+    onDurationchange?: ((event: import("@vimeo/player").DurationChangeEvent, player: Vimeo.Player) => any) | undefined;
+    onEnded?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;
+    onPause?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;
+    onPlay?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;
+    onPlaying?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;
+    onProgress?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;
+    onResize?: ((event: import("@vimeo/player").ResizeEvent, player: Vimeo.Player) => any) | undefined;
+    onSeeked?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;
+    onSeeking?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;
+    onTimeupdate?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;
+    onVolumechange?: ((event: import("@vimeo/player").VolumeChangeEvent, player: Vimeo.Player) => any) | undefined;
+    onFullscreenchange?: ((event: import("@vimeo/player").FullScreenChangeEvent, player: Vimeo.Player) => any) | undefined;
+    onTexttrackchange?: ((event: import("@vimeo/player").TextTrackChangeEvent, player: Vimeo.Player) => any) | undefined;
+    onChapterchange?: ((event: import("@vimeo/player").VimeoChapter, player: Vimeo.Player) => any) | undefined;
+    onCuepoint?: ((event: import("@vimeo/player").CuePointEvent, player: Vimeo.Player) => any) | undefined;
+    onPlaybackratechange?: ((event: import("@vimeo/player").PlaybackRateEvent, player: Vimeo.Player) => any) | undefined;
+    onBufferstart?: ((event: never, player: Vimeo.Player) => any) | undefined;
+    onBufferend?: ((event: never, player: Vimeo.Player) => any) | undefined;
+    onQualitychange?: ((event: import("@vimeo/player").QualityChangeEvent, player: Vimeo.Player) => any) | undefined;
+    onCamerachange?: ((event: import("@vimeo/player").VimeoCameraProps, player: Vimeo.Player) => any) | undefined;
+    onEnterpictureinpicture?: ((event: never, player: Vimeo.Player) => any) | undefined;
+    onLeavepictureinpicture?: ((event: never, player: Vimeo.Player) => any) | undefined;
+}>, {
+    trigger: ElementScriptTrigger;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    play: () => Promise<void> | undefined;
+    pause: () => Promise<void> | undefined;
+    getDuration: () => Promise<number> | undefined;
+    getCurrentTime: () => Promise<number> | undefined;
+    setCurrentTime: (time: number) => Promise<number> | undefined;
+    getVolume: () => Promise<number> | undefined;
+    setVolume: (volume: number) => Promise<number> | undefined;
+    getPaused: () => Promise<boolean> | undefined;
+    getEnded: () => Promise<boolean> | undefined;
+    getLoop: () => Promise<boolean> | undefined;
+    setLoop: (loop: boolean) => Promise<boolean> | undefined;
+    getPlaybackRate: () => Promise<number> | undefined;
+    setPlaybackRate: (rate: number) => Promise<number> | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    loaded: (event: import("@vimeo/player").LoadedEvent, player: Vimeo.Player) => any;
+    error: (event: import("@vimeo/player").Error, player: Vimeo.Player) => any;
+    cuechange: (event: import("@vimeo/player").CueChangeEvent, player: Vimeo.Player) => any;
+    durationchange: (event: import("@vimeo/player").DurationChangeEvent, player: Vimeo.Player) => any;
+    ended: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
+    pause: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
+    play: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
+    playing: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
+    progress: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
+    resize: (event: import("@vimeo/player").ResizeEvent, player: Vimeo.Player) => any;
+    seeked: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
+    seeking: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
+    timeupdate: (event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any;
+    volumechange: (event: import("@vimeo/player").VolumeChangeEvent, player: Vimeo.Player) => any;
+    fullscreenchange: (event: import("@vimeo/player").FullScreenChangeEvent, player: Vimeo.Player) => any;
+    texttrackchange: (event: import("@vimeo/player").TextTrackChangeEvent, player: Vimeo.Player) => any;
+    chapterchange: (event: import("@vimeo/player").VimeoChapter, player: Vimeo.Player) => any;
+    cuepoint: (event: import("@vimeo/player").CuePointEvent, player: Vimeo.Player) => any;
+    playbackratechange: (event: import("@vimeo/player").PlaybackRateEvent, player: Vimeo.Player) => any;
+    bufferstart: (event: never, player: Vimeo.Player) => any;
+    bufferend: (event: never, player: Vimeo.Player) => any;
+    qualitychange: (event: import("@vimeo/player").QualityChangeEvent, player: Vimeo.Player) => any;
+    camerachange: (event: import("@vimeo/player").VimeoCameraProps, player: Vimeo.Player) => any;
+    enterpictureinpicture: (event: never, player: Vimeo.Player) => any;
+    leavepictureinpicture: (event: never, player: Vimeo.Player) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onLoaded?: ((event: import("@vimeo/player").LoadedEvent, player: Vimeo.Player) => any) | undefined;
+    onError?: ((event: import("@vimeo/player").Error, player: Vimeo.Player) => any) | undefined;
+    onCuechange?: ((event: import("@vimeo/player").CueChangeEvent, player: Vimeo.Player) => any) | undefined;
+    onDurationchange?: ((event: import("@vimeo/player").DurationChangeEvent, player: Vimeo.Player) => any) | undefined;
+    onEnded?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;
+    onPause?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;
+    onPlay?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;
+    onPlaying?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;
+    onProgress?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;
+    onResize?: ((event: import("@vimeo/player").ResizeEvent, player: Vimeo.Player) => any) | undefined;
+    onSeeked?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;
+    onSeeking?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;
+    onTimeupdate?: ((event: import("@vimeo/player").TimeEvent, player: Vimeo.Player) => any) | undefined;
+    onVolumechange?: ((event: import("@vimeo/player").VolumeChangeEvent, player: Vimeo.Player) => any) | undefined;
+    onFullscreenchange?: ((event: import("@vimeo/player").FullScreenChangeEvent, player: Vimeo.Player) => any) | undefined;
+    onTexttrackchange?: ((event: import("@vimeo/player").TextTrackChangeEvent, player: Vimeo.Player) => any) | undefined;
+    onChapterchange?: ((event: import("@vimeo/player").VimeoChapter, player: Vimeo.Player) => any) | undefined;
+    onCuepoint?: ((event: import("@vimeo/player").CuePointEvent, player: Vimeo.Player) => any) | undefined;
+    onPlaybackratechange?: ((event: import("@vimeo/player").PlaybackRateEvent, player: Vimeo.Player) => any) | undefined;
+    onBufferstart?: ((event: never, player: Vimeo.Player) => any) | undefined;
+    onBufferend?: ((event: never, player: Vimeo.Player) => any) | undefined;
+    onQualitychange?: ((event: import("@vimeo/player").QualityChangeEvent, player: Vimeo.Player) => any) | undefined;
+    onCamerachange?: ((event: import("@vimeo/player").VimeoCameraProps, player: Vimeo.Player) => any) | undefined;
+    onEnterpictureinpicture?: ((event: never, player: Vimeo.Player) => any) | undefined;
+    onLeavepictureinpicture?: ((event: never, player: Vimeo.Player) => any) | undefined;
+}>, {
+    trigger: ElementScriptTrigger;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ScriptYouTubePlayer.vue

@@ -1,202 +1,144 @@
-<script setup lang="ts">
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-
-/// <reference types="youtube" />
-import { computed, onMounted, ref, watch } from 'vue'
-import type { HTMLAttributes, ImgHTMLAttributes, Ref } from 'vue'
-import { defu } from 'defu'
-import { useHead } from 'nuxt/app'
-import type { ElementScriptTrigger } from '../types'
-import { useScriptTriggerElement } from '../composables/useScriptTriggerElement'
-import { useScriptYouTubePlayer } from '../registry/youtube-player'
-import ScriptAriaLoadingIndicator from './ScriptAriaLoadingIndicator.vue'
-
-export type YoutubeThumbnailSize =
-// 120x90
-  '1' | '2' | '3' | 'default' |
-  // 320x180
-  'mq1' | 'mq2' | 'mq3' | 'mqdefault' |
-  // 480x360
-  '0' | 'hq1' | 'hq2' | 'hq3' | 'hqdefault' |
-  // 640x480
-  'sd1' | 'sd2' | 'sd3' | 'sddefault' |
-  // 1280x720
-  'hq720' |
-  // 1920x1080
-  'maxresdefault'
-
-const props = withDefaults(defineProps<{
-  placeholderAttrs?: ImgHTMLAttributes
-  rootAttrs?: HTMLAttributes
-  aboveTheFold?: boolean
-  trigger?: ElementScriptTrigger
-  videoId: string
-  playerVars?: YT.PlayerVars
-  width?: number
-  height?: number
-  /**
-   * Whether to use youtube-nocookie.com for embedding.
-   *
-   * @default false
-   */
-  cookies?: boolean
-  playerOptions?: YT.PlayerOptions
-  thumbnailSize?: YoutubeThumbnailSize
-  webp?: boolean
-}>(), {
-  cookies: false,
-  trigger: 'mousedown',
-  thumbnailSize: 'hq720',
-  webp: true,
-  // @ts-expect-error untyped
-  playerVars: { autoplay: 0, playsinline: 1 },
-  width: 640,
-  height: 360,
-})
-
-const emits = defineEmits<{
-  'ready': [e: YT.PlayerEvent]
-  'state-change': [e: YT.OnStateChangeEvent, target: YT.Player]
-  'playback-quality-change': [e: YT.OnPlaybackQualityChangeEvent, target: YT.Player]
-  'playback-rate-change': [e: YT.OnPlaybackRateChangeEvent, target: YT.Player]
-  'error': [e: YT.OnErrorEvent, target: YT.Player]
-}>()
-const events: (keyof YT.Events)[] = [
-  'onReady',
-  'onStateChange',
-  'onPlaybackQualityChange',
-  'onPlaybackRateChange',
-  'onError',
-  'onApiChange',
-]
-const rootEl = ref()
-const youtubeEl = ref()
-const ready = ref(false)
-const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl })
+<script setup>
+import { computed, onMounted, ref, watch } from "vue";
+import { defu } from "defu";
+import { useHead } from "nuxt/app";
+import { useScriptTriggerElement } from "../composables/useScriptTriggerElement";
+import { useScriptYouTubePlayer } from "../registry/youtube-player";
+import ScriptAriaLoadingIndicator from "./ScriptAriaLoadingIndicator.vue";
+const props = defineProps({
+  placeholderAttrs: { type: Object, required: false },
+  rootAttrs: { type: Object, required: false },
+  aboveTheFold: { type: Boolean, required: false },
+  trigger: { type: [String, Array, Boolean], required: false, default: "mousedown" },
+  videoId: { type: String, required: true },
+  playerVars: { type: null, required: false, default: { autoplay: 0, playsinline: 1 } },
+  width: { type: Number, required: false, default: 640 },
+  height: { type: Number, required: false, default: 360 },
+  cookies: { type: Boolean, required: false, default: false },
+  playerOptions: { type: null, required: false },
+  thumbnailSize: { type: String, required: false, default: "hq720" },
+  webp: { type: Boolean, required: false, default: true }
+});
+const emits = defineEmits(["ready", "state-change", "playback-quality-change", "playback-rate-change", "error"]);
+const events = [
+  "onReady",
+  "onStateChange",
+  "onPlaybackQualityChange",
+  "onPlaybackRateChange",
+  "onError",
+  "onApiChange"
+];
+const rootEl = ref();
+const youtubeEl = ref();
+const ready = ref(false);
+const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl });
 const script = useScriptYouTubePlayer({
   scriptOptions: {
-    trigger,
-  },
-})
-const { onLoaded, status } = script
-
-const player: Ref<YT.Player | undefined> = ref()
-let clickTriggered = false
-if (props.trigger === 'mousedown' && trigger instanceof Promise) {
+    trigger
+  }
+});
+const { onLoaded, status } = script;
+const player = ref();
+let clickTriggered = false;
+if (props.trigger === "mousedown" && trigger instanceof Promise) {
   trigger.then((triggered) => {
     if (triggered) {
-      clickTriggered = true
+      clickTriggered = true;
     }
-  })
+  });
 }
 onMounted(() => {
   onLoaded(async (instance) => {
-    const YouTube = instance.YT instanceof Promise ? await instance.YT : instance.YT
-    await new Promise<void>((resolve) => {
-      if (typeof YT.Player === 'undefined')
-        YouTube.ready(resolve)
+    const YouTube = instance.YT instanceof Promise ? await instance.YT : instance.YT;
+    await new Promise((resolve) => {
+      if (typeof YT.Player === "undefined")
+        YouTube.ready(resolve);
       else
-        resolve()
-    })
+        resolve();
+    });
     player.value = new YT.Player(youtubeEl.value, {
-      host: !props.cookies ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com',
+      host: !props.cookies ? "https://www.youtube-nocookie.com" : "https://www.youtube.com",
       ...props,
       ...props.playerOptions,
-      events: Object.fromEntries(events.map(event => [event, (e: any) => {
-        const emitEventName = event.replace(/([A-Z])/g, '-$1').replace('on-', '').toLowerCase()
-        // @ts-expect-error untyped
-        emits(emitEventName, e)
-        if (event === 'onReady') {
-          ready.value = true
+      events: Object.fromEntries(events.map((event) => [event, (e) => {
+        const emitEventName = event.replace(/([A-Z])/g, "-$1").replace("on-", "").toLowerCase();
+        emits(emitEventName, e);
+        if (event === "onReady") {
+          ready.value = true;
           if (clickTriggered) {
-            player.value?.playVideo()
-            clickTriggered = false
+            player.value?.playVideo();
+            clickTriggered = false;
           }
           watch(() => props.videoId, () => {
-            player.value?.loadVideoById(props.videoId)
-          })
+            player.value?.loadVideoById(props.videoId);
+          });
         }
-      }])),
-    })
-  })
-  watch(status, (status) => {
-    if (status === 'error') {
-      // @ts-expect-error untyped
-      emits('error')
+      }]))
+    });
+  });
+  watch(status, (status2) => {
+    if (status2 === "error") {
+      emits("error");
     }
-  })
-})
-
+  });
+});
 defineExpose({
-  player,
-})
-
+  player
+});
 const rootAttrs = computed(() => {
   return defu(props.rootAttrs, {
-    'aria-busy': status.value === 'loading',
-    'aria-label': status.value === 'awaitingLoad'
-      ? 'YouTube Player - Placeholder'
-      : status.value === 'loading'
-        ? 'YouTube Player - Loading'
-        : 'YouTube Player - Loaded',
-    'aria-live': 'polite',
-    'role': 'application',
-    'style': {
-      cursor: 'pointer',
-      position: 'relative',
-      backgroundColor: 'black',
-      width: '100%',
-      aspectRatio: `${props.width}/${props.height}`,
+    "aria-busy": status.value === "loading",
+    "aria-label": status.value === "awaitingLoad" ? "YouTube Player - Placeholder" : status.value === "loading" ? "YouTube Player - Loading" : "YouTube Player - Loaded",
+    "aria-live": "polite",
+    "role": "application",
+    "style": {
+      cursor: "pointer",
+      position: "relative",
+      backgroundColor: "black",
+      width: "100%",
+      aspectRatio: `${props.width}/${props.height}`
     },
-    ...(trigger instanceof Promise ? trigger.ssrAttrs || {} : {}),
-  }) as HTMLAttributes
-})
-
-const fallbackPlaceHolder = computed(() => `https://i.ytimg.com/vi/${props.videoId}/hqdefault.jpg`)
-const placeholder = computed(() => `https://i.ytimg.com/${props.webp ? 'vi_webp' : 'vi'}/${props.videoId}/${props.thumbnailSize}.${props.webp ? 'webp' : 'jpg'}`)
-const isFallbackPlaceHolder = ref(false)
-
+    ...trigger instanceof Promise ? trigger.ssrAttrs || {} : {}
+  });
+});
+const fallbackPlaceHolder = computed(() => `https://i.ytimg.com/vi/${props.videoId}/hqdefault.jpg`);
+const placeholder = computed(() => `https://i.ytimg.com/${props.webp ? "vi_webp" : "vi"}/${props.videoId}/${props.thumbnailSize}.${props.webp ? "webp" : "jpg"}`);
+const isFallbackPlaceHolder = ref(false);
 if (import.meta.server) {
-  // dns-prefetch https://i.vimeocdn.com
   useHead({
     link: [
       {
         key: `nuxt-script-youtube-img`,
-        rel: props.aboveTheFold ? 'preconnect' : 'dns-prefetch',
-        href: 'https://i.ytimg.com',
+        rel: props.aboveTheFold ? "preconnect" : "dns-prefetch",
+        href: "https://i.ytimg.com"
       },
-      props.aboveTheFold
-        // we can preload the placeholder image
-        ? {
-            key: `nuxt-script-youtube-img`,
-            rel: 'preload',
-            as: 'image',
-            href: placeholder.value,
-          }
-        : {},
-    ],
-  })
+      props.aboveTheFold ? {
+        key: `nuxt-script-youtube-img`,
+        rel: "preload",
+        as: "image",
+        href: placeholder.value
+      } : {}
+    ]
+  });
 }
-
 const placeholderAttrs = computed(() => {
   return defu(props.placeholderAttrs, {
     src: isFallbackPlaceHolder.value ? fallbackPlaceHolder.value : placeholder.value,
-    alt: '',
-    loading: props.aboveTheFold ? 'eager' : 'lazy',
+    alt: "",
+    loading: props.aboveTheFold ? "eager" : "lazy",
     style: {
-      width: '100%',
-      objectFit: 'contain',
-      height: '100%',
+      width: "100%",
+      objectFit: "contain",
+      height: "100%"
     },
     onLoad(payload) {
-      const img = payload.target as HTMLImageElement
+      const img = payload.target;
       if (img.naturalWidth === 120 && img.naturalHeight === 90) {
-        isFallbackPlaceHolder.value = true
+        isFallbackPlaceHolder.value = true;
       }
-    },
-  } satisfies ImgHTMLAttributes)
-})
+    }
+  });
+});
 </script>
 
 <template>