Composables

utils-2.ts

import LANGUAGES from '~/constants/languages'

export function formatDate(string: string) {
  const dateArray = string.split('-')
  const date = dateArray[2].slice(0, 1) === '0' ? dateArray[2].slice(1, 1) : dateArray[2]
  const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']

  return `${date} ${months[+dateArray[1] - 1]} ${dateArray[0]}`
}

/**
 * Format minutes into hours and mins
 */
export function formatTime(minutes: number) {
  // seconds
  const seconds = minutes * 60
  let secondsLeft = seconds

  // hours
  const hours = Math.floor(secondsLeft / 3600)
  secondsLeft = secondsLeft % 3600

  // mins
  const mins = Math.floor(secondsLeft / 60)
  secondsLeft = secondsLeft % 60

  return `${hours ? `${hours}h` : ''} ${mins}min`
}

export function numberWithCommas(number: number) {
  return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}

export function formatLang(iso: string) {
  const fullLang = LANGUAGES.find(lang => lang.iso_639_1 === iso)

  if (fullLang)
    return fullLang.english_name

  return iso
}

export function useSingleton<T>() {
  const key = Symbol('singleton')
  return [
    function provide(v: T) {
      const vm = getCurrentInstance()
      vm?.appContext.app.provide(key, v)
    },
    function use(fallback?: T) {
      return inject(key, fallback) as T
    },
  ] as const
}

import { useSingleton } from './utils'
import type { Image, Media, Video } from '~/types'

export function getTrailer(item: Media) {
  const trailer = item.videos?.results?.find(video => video.type === 'Trailer')
  return getVideoLink(trailer)
}

export function getVideoLink(item?: Video) {
  if (!item?.key)
    return null
  return `https://www.youtube.com/embed/${item.key}?rel=0&showinfo=0&autoplay=0`
}

const [
  provideIframeModal,
  useIframeModal,
] = useSingleton<(url: string) => void>()

const [
  provideImageModal,
  useImageModal,
] = useSingleton<(photos: Image[], index: number) => void>()

export {
  useIframeModal,
  provideIframeModal,
  useImageModal,
  provideImageModal,
}

utils.ts

export function numberWithCommas(number: number) {
  return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}

viewerjs-vue.ts

import { h, render } from 'vue'
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'

// https://github.com/mirari/v-viewer/blob/master/src/api.js
export interface ViewerApiOptions {
  images: Array<string | object>
  options?: Viewer.Options
}

// https://fengyuanchen.github.io/viewerjs/
export const viewImages = ({ images = [], options }: ViewerApiOptions) => {
  options = {
    navbar: false,
    toolbar: false,
    title: false,
    ...options,
    inline: false,
  } as Viewer.Options
  const token = document.createElement('div')
  const ViewerToken = h(
    'div',
    {
      style: {
        display: 'none',
      },
      class: ['__viewer-token'],
    },
    images.map((attr) => {
      return h(
        'img',
        typeof attr === 'string' ? { src: attr } : attr,
      )
    }),
  )

  render(ViewerToken, token)
  const tokenElement = token.firstElementChild as HTMLElement
  document.body.appendChild(tokenElement)

  // init viewer
  const $viewerJs = new Viewer(tokenElement, options)
  const $destroy = $viewerJs.destroy.bind($viewerJs)
  $viewerJs.destroy = function(): Viewer {
    $destroy()
    render(null, token)
    return $viewerJs
  }
  $viewerJs.show()

  tokenElement.addEventListener('hidden', function(this: HTMLElement) {
    // @ts-ignore
    if (this.viewer === $viewerJs)
      $viewerJs.destroy()
  })

  return $viewerJs
}

/**
 * Open preview for image
 */
export const viewImage = (image: string | object, options?: Viewer.Options) => {
  return viewImages({ images: [image], options })
}