exarcheia-vue-silentbox/src/mixins/item.js

A simple lightbox inspired Vue.js component.

import VideoUrlDecoderMixin from './videoUrlDecoder'

export default {
  mixins: [VideoUrlDecoderMixin],
  data: () => ({
    sizeVideoYoutube: 'maxresdefault',
    sizesYoutube: ['maxresdefault', 'sddefault', 'hqdefault'],
    youtubeDomain: '//img.youtube.com/vi',
    vimeoDomain: '//vimeo.com/api/v2/video',
  }),
  methods: {
    isEmbedVideo(itemSrc) {
      const supportedVideoServices = ['youtube.com', 'youtu.be', 'vimeo.com']

      return supportedVideoServices.some((service) => {
        return itemSrc.includes(service)
      })
    },
    isLocalVideo(itemSrc) {
      const supportedVideoServices = [
        '.mp4',
        '.ogg',
        '.webm',
        '.mov',
        '.flv',
        '.wmv',
        '.mkv',
      ]

      return supportedVideoServices.some((service) => {
        return itemSrc.includes(service)
      })
    },
    async getYoutubeThumbnail(videoId) {
      for (const size of this.sizesYoutube) {
        const url = await new Promise((resolve) => {
          try {
            const image = new Image()

            image.src = `${location.protocol}${this.youtubeDomain}/${videoId}/${size}.jpg`

            image.onload = ({ target }) => {
              resolve(target.width !== 120 ? target.src : false)
            }
            image.onerror = () => resolve(false)
          } catch (e) {
            return false
          }
        })

        if (url) {
          return url
        }
      }
    },
    async getThumbnail(src) {
      if (src.includes('youtube.com') || src.includes('youtu.be')) {
        return await this.getYoutubeThumbnail(this.getYoutubeVideoId(src))
      } else if (src.includes('vimeo.com')) {
        const videoId = this.getVimeoVideoId(src)

        const videoDetails = await this.httpGet(
          `${location.protocol}${this.vimeoDomain}/${videoId}.json`
        )
        return videoDetails[0].thumbnail_large
      } else {
        return src
      }
    },
    async httpGet(url) {
      const result = await fetch(url)

      return await result.json()
    },
  },
}