vue-lite-youtube-embed/dist/index.cjs.map

A private by default, faster and cleaner YouTube embed component for Vue applications.

{"version":3,"sources":["../src/index.ts","../src/LiteYouTubeEmbed.ts","../src/utils.ts"],"sourcesContent":["import LiteYouTubeEmbed from './LiteYouTubeEmbed'\n\nexport default LiteYouTubeEmbed\n","/*!\n * Original code by Ibrahim Cesar\n * MIT Licensed, Copyright 2022 Ibrahim Cesar, see https://github.com/ibrahimcesar/react-lite-youtube-embed/blob/main/LICENSE for details\n *\n * Credits to the team:\n * https://github.com/ibrahimcesar/react-lite-youtube-embed/blob/main/src/lib/index.tsx\n */\nimport type { PropType } from 'vue-demi'\nimport { computed, defineComponent, isVue2, ref } from 'vue-demi'\nimport h from './utils'\nimport './style.css'\n\nexport type ImageResolution =\n  | 'default'\n  | 'mqdefault'\n  | 'hqdefault'\n  | 'sddefault'\n  | 'maxresdefault'\n\nfunction runCommand(iframe: HTMLIFrameElement | null, func: 'stopVideo' | 'pauseVideo' | 'playVideo') {\n  if (iframe === null)\n    throw new Error('iframe element not instantiated.')\n\n  iframe.contentWindow?.postMessage(`{\"event\":\"command\",\"func\":\"${func}\",\"args\":\"\"}`, '*')\n}\n\nfunction linkPreconnect(href: string) {\n  return h('link', {\n    attrs: { rel: 'preconnect', href },\n  })\n}\n\nexport default defineComponent({\n  props: {\n    announce: {\n      type: String,\n      required: false,\n      default: 'Watch',\n    },\n    id: {\n      type: String,\n      required: true,\n    },\n    title: {\n      type: String,\n      required: true,\n    },\n    activatedClass: {\n      type: String,\n      required: false,\n      default: 'lyt-activated',\n    },\n    adNetwork: {\n      type: Boolean,\n      required: false,\n      default: true,\n    },\n    iframeClass: {\n      type: String,\n      required: false,\n      default: '',\n    },\n    cookie: {\n      type: Boolean,\n      required: false,\n      default: false,\n    },\n    params: {\n      type: String,\n      required: false,\n      default: '',\n    },\n    playerClass: {\n      type: String,\n      required: false,\n      default: 'lty-playbtn',\n    },\n    playlist: {\n      type: Boolean,\n      required: false,\n      default: false,\n    },\n    playlistCoverId: {\n      type: String,\n      required: false,\n      default: '',\n    },\n    poster: {\n      type: String as PropType<ImageResolution>,\n      required: false,\n      default: 'hqdefault',\n    },\n    wrapperClass: {\n      type: String,\n      required: false,\n      default: 'yt-lite',\n    },\n    muted: {\n      type: Boolean,\n      required: false,\n      default: false,\n    },\n    thumbnail: {\n      type: String,\n      required: false,\n    },\n    webp: {\n      type: Boolean,\n      required: false,\n      default: false,\n    },\n    rel: {\n      type: String as PropType<'prefetch' | 'preload'>,\n      required: false,\n      default: 'preload',\n    },\n    aspectHeight: {\n      type: Number,\n      required: false,\n      default: 9,\n    },\n    aspectWidth: {\n      type: Number,\n      required: false,\n      default: 16,\n    },\n  },\n  emits: ['iframeAdded'],\n  setup(props, { emit, expose }) {\n    const preconnected = ref(false)\n    const iframe = ref(false)\n    const iframeElement = ref<HTMLIFrameElement | null>(null)\n\n    const videoId = computed(() => encodeURIComponent(props.id))\n    const paramsImp = computed(() => `&${props.params}` || '')\n    const mutedImp = computed(() => props.muted ? '&mute=1' : '')\n    const format = computed(() => props.webp ? 'webp' : 'jpg')\n    const vi = computed(() => props.webp ? 'vi_webp' : 'vi')\n    const videoPlaylistCoverId = computed(() => typeof props.playlistCoverId === 'string' ? encodeURIComponent(props.playlistCoverId) : null)\n\n    const posterUrl = computed(() => {\n      return props.thumbnail || (!props.playlist\n        ? `https://i.ytimg.com/${vi.value}/${videoId.value}/${props.poster}.${format.value}`\n        : `https://i.ytimg.com/${vi.value}/${videoPlaylistCoverId.value}/${props.poster}.${format.value}`)\n    })\n\n    const ytUrl = computed(() => props.cookie\n      ? 'https://www.youtube.com'\n      : 'https://www.youtube-nocookie.com')\n    const iframeSrc = computed(() => !props.playlist\n      ? `${ytUrl.value}/embed/${videoId.value}?autoplay=1&enablejsapi=1&state=1${mutedImp.value}${paramsImp.value}`\n      : `${ytUrl.value}/embed/videoseries?autoplay=1&enablejsapi=1&list=${videoId.value}${mutedImp.value}${paramsImp.value}`)\n\n    function addIframe() {\n      if (iframe.value)\n        return\n      iframe.value = true\n      emit('iframeAdded')\n    }\n\n    function warmConnections() {\n      if (preconnected.value)\n        return\n      preconnected.value = true\n    }\n\n    expose({\n      getPlayerInstance() {\n        return iframeElement.value\n      },\n      stopVideo() {\n        runCommand(iframeElement.value, 'stopVideo')\n      },\n      pauseVideo() {\n        runCommand(iframeElement.value, 'pauseVideo')\n      },\n      playVideo() {\n        runCommand(iframeElement.value, 'playVideo')\n      },\n      warmConnections,\n      addIframe,\n    })\n\n    const vnodeList = (): any[] => [\n      h('link', {\n        attrs: {\n          rel: props.rel,\n          href: posterUrl.value,\n          as: 'image',\n        },\n      }),\n      preconnected.value ? linkPreconnect(ytUrl.value) : null,\n      preconnected.value ? linkPreconnect('https://www.google.com') : null,\n      props.adNetwork ? linkPreconnect('https://static.doubleclick.net') : null,\n      props.adNetwork\n        ? linkPreconnect('https://googleads.g.doubleclick.net')\n        : null,\n      h(\n        'article',\n        {\n          on: {\n            pointerover: warmConnections,\n            click: addIframe,\n          },\n          class: `${props.wrapperClass} ${iframe.value ? props.activatedClass : ''}`,\n          attrs: { 'data-title': props.title },\n          style: {\n            'backgroundImage': `url(${posterUrl.value})`,\n            '--aspect-ratio': `${(props.aspectHeight / props.aspectWidth) * 100}%`,\n          },\n        },\n        [\n          // Play button\n          h('button', {\n            class: props.playerClass,\n            attrs: {\n              'type': 'button',\n              'aria-label': `${props.announce} ${props.title}`,\n            },\n          }),\n          // Iframe\n          iframe.value\n            ? h('iframe', {\n              ref: iframeElement,\n              class: props.iframeClass,\n              attrs: {\n                title: props.title,\n                width: 560,\n                height: 315,\n                frameborder: 0,\n                allow:\n                    'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture',\n                allowfullscreen: true,\n                src: iframeSrc.value,\n              },\n            })\n            : null,\n        ],\n      ),\n    ]\n\n    if (isVue2)\n      return () => h('Fragment', {}, vnodeList())\n\n    return () => vnodeList()\n  },\n})\n","import { h as hDemi, isVue2 } from 'vue-demi'\n\ninterface Options {\n  props?: Record<any, any>\n  domProps?: Record<any, any>\n  attrs?: Record<any, any>\n  on?: Record<any, any>\n}\n\nfunction adaptOnsV3(ons: Record<string, unknown>) {\n  if (!ons)\n    return null\n  return Object.entries(ons).reduce((ret, [key, handler]) => {\n    key = key.charAt(0).toUpperCase() + key.slice(1)\n    key = `on${key}`\n    return { ...ret, [key]: handler }\n  }, {})\n}\n\nfunction h(type: string | Record<string, unknown>, options: Options & any = {}, children?: any) {\n  if (isVue2)\n    return hDemi(type, options, children)\n\n  const { props, domProps, on, attrs, ...extraOptions } = options\n  const ons = adaptOnsV3(on)\n  const params = { ...extraOptions, ...props, ...domProps, ...ons, ...attrs }\n  return hDemi(type, params, children)\n}\n\nexport default h\n"],"mappings":"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","names":["import_vue_demi","hDemi"]}