Last active
October 19, 2022 07:58
-
-
Save MichaelGitArt/ba6bc94e592e1fd5e16c045be71292b5 to your computer and use it in GitHub Desktop.
Composables
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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, | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export function numberWithCommas(number: number) { | |
| return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 }) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment