feat: add useScriptVimeo + Vimeo component (#8)

Co-authored-by: Harlan Wilton <[email protected]>

Author: darioferderber

playground/pages/index.vue

@@ -34,6 +34,14 @@ const thirdParties = [
     name: 'Segment',
     path: '/third-parties/segment',
   },
+  {
+    name: 'Vimeo',
+    path: '/third-parties/vimeo',
+  },
+  {
+    name: 'Vimeo component',
+    path: '/third-parties/vimeo-component',
+  },
 ]
 
 const features = [

playground/pages/third-parties/vimeo-component.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { useHead } from '#imports'
+import { VimeoEmbed } from '#components'
+
+useHead({
+  title: 'Vimeo component',
+})
+
+function handlePlay() {
+  console.log('Playing')
+}
+</script>
+
+<template>
+  <VimeoEmbed video-id="76979871" width="640" height="400" :loop="true" @play="handlePlay" />
+</template>

playground/pages/third-parties/vimeo.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import { onMounted, useHead, useScriptVimeo } from '#imports'
+
+useHead({
+  title: 'Vimeo',
+})
+
+onMounted(() => {
+  const { Player } = useScriptVimeo()
+  Player('player', {
+    id: 76979871,
+    width: 400,
+    height: 400
+  })
+})
+</script>
+
+<template>
+  <div id="player"></div>
+</template>

src/module.ts

@@ -1,5 +1,6 @@
 import {
   addBuildPlugin,
+  addComponentsDir,
   addImports,
   addImportsDir,
   addPlugin,
@@ -106,6 +107,10 @@ export default defineNuxtModule<ModuleOptions>({
       resolve('./runtime/composables'),
     ])
 
+    addComponentsDir({
+      path: resolve('./runtime/components')
+    })
+
     nuxt.hooks.hook('modules:done', async () => {
       let registry: RegistryScripts = [
         {
@@ -148,6 +153,11 @@ export default defineNuxtModule<ModuleOptions>({
             })
           },
         },
+        {
+          name: 'useScriptVimeo',
+          from: resolve('./runtime/registry/vimeo'),
+          key: 'vimeo',
+        },
         {
           name: 'useScriptIntercom',
           from: resolve('./runtime/registry/intercom'),

src/runtime/components/VimeoEmbed.vue

@@ -0,0 +1,162 @@
+<template>
+  <div ref="root" :id="id">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useIntersectionObserver } from "@vueuse/core";
+import { ref, onBeforeUnmount, useId, useScriptVimeo } from "#imports";
+
+const props = withDefaults(
+  defineProps<{
+    videoId: string;
+    lazy?: boolean;
+    rootMargin?: string;
+    width?: string | number;
+    height?: string | number;
+    options?: Object;
+    loop?: boolean;
+    autoplay?: boolean;
+    controls?: boolean;
+  }>(),
+  {
+    lazy: true,
+    rootMargin: "50px 50px 50px 50px",
+    width: "640",
+    height: "360",
+    options: () => ({}),
+    loop: false,
+    autoplay: false,
+    controls: true,
+  }
+);
+
+// TODO: put events in <script> - after build it doesn't work for some reason
+// error: "both scripts must have same language type" even if they're both written in ts
+const events: string[] = [
+  "play",
+  "playing",
+  "pause",
+  "ended",
+  "timeupdate",
+  "progress",
+  "seeking",
+  "seeked",
+  "texttrackchange",
+  "chapterchange",
+  "cuechange",
+  "cuepoint",
+  "volumechange",
+  "playbackratechange",
+  "bufferstart",
+  "bufferend",
+  "error",
+  "loaded",
+  "durationchange",
+  "fullscreenchange",
+  "qualitychange",
+  "camerachange",
+  "resize",
+];
+
+const emit = defineEmits([
+  "play",
+  "playing",
+  "pause",
+  "ended",
+  "timeupdate",
+  "progress",
+  "seeking",
+  "seeked",
+  "texttrackchange",
+  "chapterchange",
+  "cuechange",
+  "cuepoint",
+  "volumechange",
+  "playbackratechange",
+  "bufferstart",
+  "bufferend",
+  "error",
+  "loaded",
+  "durationchange",
+  "fullscreenchange",
+  "qualitychange",
+  "camerachange",
+  "resize",
+]);
+
+const _id = useId();
+const id = _id.replace("-", "").replace("_", "");
+
+const status: Ref<string | null> = ref(null);
+
+const root = ref(null);
+
+const { Player, $script } = useScriptVimeo({
+  trigger: props.lazy ? "manual" : undefined,
+});
+
+let player: any;
+
+if (!props.lazy) $script.then(init);
+else {
+  const { stop: stopIntersectionObserver } = useIntersectionObserver(
+    root,
+    ([{ isIntersecting }]) => {
+      if (isIntersecting && !$script.loaded) {
+        $script.load().then(() => {
+          init();
+          stopIntersectionObserver();
+        });
+      }
+    },
+    { rootMargin: props.rootMargin }
+  );
+}
+
+onBeforeUnmount(() => player?.unload());
+
+function init() {
+  player = Player(id, {
+    id: props.videoId,
+    width: props.width,
+    height: props.height,
+    loop: props.loop,
+    autoplay: props.autoplay,
+    controls: props.controls,
+    ...props.options,
+  });
+
+  for (const event of events) {
+    player?.on(event, (e: any) => {
+      emit(event as keyof typeof emit, e, player);
+      status.value = event;
+    });
+  }
+}
+
+function play() {
+  player?.play();
+}
+
+function pause() {
+  player?.pause();
+}
+
+function mute() {
+  player?.setVolume(0);
+}
+
+function unmute(volume: number = 1) {
+  player?.setVolume(volume);
+}
+
+defineExpose({
+  play,
+  pause,
+  mute,
+  unmute,
+  status,
+});
+</script>

src/runtime/registry/vimeo.ts

@@ -0,0 +1,40 @@
+import { type Input, object, string } from 'valibot'
+import { useScript } from '#imports'
+import type { NuxtUseScriptOptions } from '#nuxt-scripts'
+
+export interface VimeoScriptApi {
+  Player: any
+}
+
+export const VimeoScriptOptions = object({})
+
+export type VimeoPlayer = ((...params: any[]) => void) | undefined
+
+export type VimeoScriptInput = Input<typeof VimeoScriptOptions>
+
+declare global {
+  interface Window {
+    Vimeo: VimeoScriptApi
+  }
+}
+
+export function useScriptVimeo<T>(options?: VimeoScriptInput, _scriptOptions?: Omit<NuxtUseScriptOptions<T>, 'beforeInit' | 'use'>) {
+  const scriptOptions: NuxtUseScriptOptions<T> = _scriptOptions || {}
+
+  return useScript<VimeoScriptApi>({
+    key: 'vimeo',
+    src: 'https://player.vimeo.com/api/player.js',
+    ...options,
+  }, {
+    ...scriptOptions,
+    use: () => {
+      let Player: VimeoPlayer
+      if (import.meta.client) {
+        Player = function (...params: any[]) {
+          return new window.Vimeo.Player(...params)
+        }
+      }
+      return { Player }
+    },
+  })
+}