@nuxt/scripts 0.11.5 → 0.11.7

package/dist/runtime/components/ScriptVimeoPlayer.vue

@@ -1,273 +1,176 @@
-<script setup lang="ts">
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-
-/// <reference types="vimeo__player" />
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import type { HTMLAttributes, ImgHTMLAttributes } from 'vue'
-import { defu } from 'defu'
-import { useAsyncData, useHead } from 'nuxt/app'
-import type { ElementScriptTrigger } from '../types'
-import { useScriptTriggerElement } from '../composables/useScriptTriggerElement'
-import { useScriptVimeoPlayer } from '../registry/vimeo-player'
-import ScriptAriaLoadingIndicator from './ScriptAriaLoadingIndicator.vue'
-
-interface VimeoOptions {
-  // copied from @types/vimeo__player
-  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
-}
-
-const props = withDefaults(defineProps<{
-  // custom
-  trigger?: ElementScriptTrigger
-  placeholderAttrs?: ImgHTMLAttributes
-  rootAttrs?: HTMLAttributes
-  aboveTheFold?: boolean
-  vimeoOptions?: VimeoOptions
-  id?: number | undefined
-  url?: string | undefined
-}>(), {
-  trigger: 'mousedown',
-})
-
-const emits = defineEmits<TEmits>()
-
-type EventMap<E extends keyof Vimeo.EventMap> = [event: Vimeo.EventMap[E], player: Vimeo]
-
-// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
-type TEmits = {
-  play: EventMap<'play'>
-  playing: EventMap<'playing'>
-  pause: EventMap<'pause'>
-  ended: EventMap<'ended'>
-  timeupdate: EventMap<'timeupdate'>
-  progress: EventMap<'progress'>
-  seeking: EventMap<'seeking'>
-  seeked: EventMap<'seeked'>
-  texttrackchange: EventMap<'texttrackchange'>
-  chapterchange: EventMap<'chapterchange'>
-  cuechange: EventMap<'cuechange'>
-  cuepoint: EventMap<'cuepoint'>
-  volumechange: EventMap<'volumechange'>
-  playbackratechange: EventMap<'playbackratechange'>
-  bufferstart: EventMap<'bufferstart'>
-  bufferend: EventMap<'bufferend'>
-  error: EventMap<'error'>
-  loaded: EventMap<'loaded'>
-  durationchange: EventMap<'durationchange'>
-  fullscreenchange: EventMap<'fullscreenchange'>
-  qualitychange: EventMap<'qualitychange'>
-  camerachange: EventMap<'camerachange'>
-  resize: EventMap<'resize'>
-  enterpictureinpicture: EventMap<'enterpictureinpicture'>
-  leavepictureinpicture: EventMap<'leavepictureinpicture'>
-}
-
-const events: (keyof TEmits)[] = [
-  'play',
-  'playing',
-  'pause',
-  'ended',
-  'timeupdate',
-  'progress',
-  'seeking',
-  'seeked',
-  'texttrackchange',
-  'chapterchange',
-  'cuechange',
-  'cuepoint',
-  'volumechange',
-  'playbackratechange',
-  'bufferstart',
-  'bufferend',
-  'error',
-  'loaded',
-  'durationchange',
-  'fullscreenchange',
-  'qualitychange',
-  'camerachange',
-  'resize',
-  'enterpictureinpicture',
-  'leavepictureinpicture',
-]
-
-const elVimeo = ref()
-const rootEl = ref()
-
-const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl })
-let clickTriggered = false
-if (props.trigger === 'mousedown' && trigger instanceof Promise) {
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { defu } from "defu";
+import { useAsyncData, useHead } from "nuxt/app";
+import { useScriptTriggerElement } from "../composables/useScriptTriggerElement";
+import { useScriptVimeoPlayer } from "../registry/vimeo-player";
+import ScriptAriaLoadingIndicator from "./ScriptAriaLoadingIndicator.vue";
+const props = defineProps({
+  trigger: { type: [String, Array, Boolean], required: false, default: "mousedown" },
+  placeholderAttrs: { type: Object, required: false },
+  rootAttrs: { type: Object, required: false },
+  aboveTheFold: { type: Boolean, required: false },
+  vimeoOptions: { type: Object, required: false },
+  id: { type: null, required: false },
+  url: { type: null, required: false }
+});
+const emits = defineEmits(["play", "playing", "pause", "ended", "timeupdate", "progress", "seeking", "seeked", "texttrackchange", "chapterchange", "cuechange", "cuepoint", "volumechange", "playbackratechange", "bufferstart", "bufferend", "error", "loaded", "durationchange", "fullscreenchange", "qualitychange", "camerachange", "resize", "enterpictureinpicture", "leavepictureinpicture"]);
+const events = [
+  "play",
+  "playing",
+  "pause",
+  "ended",
+  "timeupdate",
+  "progress",
+  "seeking",
+  "seeked",
+  "texttrackchange",
+  "chapterchange",
+  "cuechange",
+  "cuepoint",
+  "volumechange",
+  "playbackratechange",
+  "bufferstart",
+  "bufferend",
+  "error",
+  "loaded",
+  "durationchange",
+  "fullscreenchange",
+  "qualitychange",
+  "camerachange",
+  "resize",
+  "enterpictureinpicture",
+  "leavepictureinpicture"
+];
+const elVimeo = ref();
+const rootEl = ref();
+const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl });
+let clickTriggered = false;
+if (props.trigger === "mousedown" && trigger instanceof Promise) {
   trigger.then((val) => {
     if (val) {
-      clickTriggered = true
+      clickTriggered = true;
     }
-  })
+  });
 }
-const ready = ref(false)
+const ready = ref(false);
 const { onLoaded, status } = useScriptVimeoPlayer({
   scriptOptions: {
-    trigger,
-  },
-})
-
+    trigger
+  }
+});
 if (import.meta.server) {
-  // dns-prefetch https://i.vimeocdn.com
   useHead({
     link: [
       {
-        rel: props.aboveTheFold ? 'preconnect' : 'dns-prefetch',
-        href: 'https://i.vimeocdn.com',
-      },
-    ],
-  })
+        rel: props.aboveTheFold ? "preconnect" : "dns-prefetch",
+        href: "https://i.vimeocdn.com"
+      }
+    ]
+  });
 }
-
 const id = computed(() => {
-  return props.vimeoOptions?.id || props.id
-})
-
+  return props.vimeoOptions?.id || props.id;
+});
 const { data: payload } = useAsyncData(
   `vimeo-embed:${id.value}`,
   // TODO ideally we cache this
-  () => $fetch(`https://vimeo.com/api/v2/video/${id.value}.json`).then(res => (res as any)[0]),
+  () => $fetch(`https://vimeo.com/api/v2/video/${id.value}.json`).then((res) => res[0]),
   {
-    watch: [id],
-  },
-)
-
-const placeholder = computed(() => payload.value?.thumbnail_large)
-
-let player: Vimeo | undefined
-// we can't directly expose the player as vue will break the proxy
+    watch: [id]
+  }
+);
+const placeholder = computed(() => payload.value?.thumbnail_large);
+let player;
 defineExpose({
   play: () => player?.play(),
   pause: () => player?.pause(),
   getDuration: () => player?.getDuration(),
   getCurrentTime: () => player?.getCurrentTime(),
-  setCurrentTime: (time: number) => player?.setCurrentTime(time),
+  setCurrentTime: (time) => player?.setCurrentTime(time),
   getVolume: () => player?.getVolume(),
-  setVolume: (volume: number) => player?.setVolume(volume),
+  setVolume: (volume) => player?.setVolume(volume),
   getPaused: () => player?.getPaused(),
   getEnded: () => player?.getEnded(),
   getLoop: () => player?.getLoop(),
-  setLoop: (loop: boolean) => player?.setLoop(loop),
+  setLoop: (loop) => player?.setLoop(loop),
   getPlaybackRate: () => player?.getPlaybackRate(),
-  setPlaybackRate: (rate: number) => player?.setPlaybackRate(rate),
-})
-
+  setPlaybackRate: (rate) => player?.setPlaybackRate(rate)
+});
 const width = computed(() => {
-  return props.vimeoOptions?.width || elVimeo.value?.parentNode?.offsetWidth || 640
-})
-
+  return props.vimeoOptions?.width || elVimeo.value?.parentNode?.offsetWidth || 640;
+});
 const height = computed(() => {
-  return props.vimeoOptions?.height || elVimeo.value?.parentNode?.offsetHeight || 480
-})
-
+  return props.vimeoOptions?.height || elVimeo.value?.parentNode?.offsetHeight || 480;
+});
 onMounted(() => {
-  // @ts-ignore failing for end users
   onLoaded(async ({ Vimeo }) => {
-    const vimeoOptions = props.vimeoOptions || {}
+    const vimeoOptions = props.vimeoOptions || {};
     if (!vimeoOptions.id && props.id) {
-      vimeoOptions.id = props.id
+      vimeoOptions.id = props.id;
     }
     if (!vimeoOptions.url && props.url) {
-      vimeoOptions.url = props.url
+      vimeoOptions.url = props.url;
     }
-    vimeoOptions.width = width.value
-    vimeoOptions.height = height.value
-    player = new Vimeo.Player(elVimeo.value, vimeoOptions)
+    vimeoOptions.width = width.value;
+    vimeoOptions.height = height.value;
+    player = new Vimeo.Player(elVimeo.value, vimeoOptions);
     if (clickTriggered) {
-      player!.play()
-      clickTriggered = false
+      player.play();
+      clickTriggered = false;
     }
     for (const event of events) {
-      player!.on(event, (e: EventMap<typeof event>) => {
-        // @ts-expect-error ts isn't able to infer the correct event type
-        emits(event, e, player)
-        if (event === 'loaded')
-          ready.value = true
-      })
+      player.on(event, (e) => {
+        emits(event, e, player);
+        if (event === "loaded")
+          ready.value = true;
+      });
     }
-  })
-})
-
+  });
+});
 watch(() => props.id, (v) => {
   if (v) {
-    player?.loadVideo(Number(v))
+    player?.loadVideo(Number(v));
   }
-})
-watch(status, (status) => {
-  if (status === 'error') {
-    // @ts-expect-error untyped
-    emits('error')
+});
+watch(status, (status2) => {
+  if (status2 === "error") {
+    emits("error");
   }
-})
-
+});
 const rootAttrs = computed(() => {
   return defu(props.rootAttrs, {
-    'aria-busy': status.value === 'loading',
-    'aria-label': status.value === 'awaitingLoad'
-      ? 'Vimeo Player - Placeholder'
-      : status.value === 'loading'
-        ? 'Vimeo Player - Loading'
-        : 'Vimeo Player - Loaded',
-    'aria-live': 'polite',
-    'role': 'application',
-    'style': {
-      maxWidth: '100%',
+    "aria-busy": status.value === "loading",
+    "aria-label": status.value === "awaitingLoad" ? "Vimeo Player - Placeholder" : status.value === "loading" ? "Vimeo Player - Loading" : "Vimeo Player - Loaded",
+    "aria-live": "polite",
+    "role": "application",
+    "style": {
+      maxWidth: "100%",
       width: `auto`,
-      height: 'auto',
+      height: "auto",
       aspectRatio: `16/9`,
-      position: 'relative',
-      backgroundColor: 'black',
+      position: "relative",
+      backgroundColor: "black"
     },
-    ...(trigger instanceof Promise ? trigger.ssrAttrs || {} : {}),
-  }) as HTMLAttributes
-})
-
+    ...trigger instanceof Promise ? trigger.ssrAttrs || {} : {}
+  });
+});
 const placeholderAttrs = computed(() => {
   return defu(props.placeholderAttrs, {
     src: placeholder.value,
-    alt: '',
-    loading: props.aboveTheFold ? 'eager' : 'lazy',
+    alt: "",
+    loading: props.aboveTheFold ? "eager" : "lazy",
     // @ts-expect-error untyped
-    fetchpriority: props.aboveTheFold ? 'high' : undefined,
+    fetchpriority: props.aboveTheFold ? "high" : void 0,
     style: {
-      cursor: 'pointer',
-      width: '100%',
-      objectFit: 'contain',
-      height: '100%',
-    },
-  } satisfies ImgHTMLAttributes)
-})
-
-onBeforeUnmount(() => player?.unload())
+      cursor: "pointer",
+      width: "100%",
+      objectFit: "contain",
+      height: "100%"
+    }
+  });
+});
+onBeforeUnmount(() => player?.unload());
 </script>
 
 <template>

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

@@ -0,0 +1,127 @@
+import type { HTMLAttributes, ImgHTMLAttributes } from 'vue';
+import type { ElementScriptTrigger } from '../types.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 var __VLS_1: any, __VLS_3: {}, __VLS_8: {}, __VLS_10: {}, __VLS_12: {};
+type __VLS_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_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;
+    };
+};