import config from 'config'; import { createApp } from 'vue'; import dayjs from 'dayjs'; import mitt from 'mitt'; import tippy from 'tippy.js'; import router from './router'; import initStore from './store'; import initUiObservers from './ui/observers'; import initAuthObservers from './auth/observers'; import { formatDate, formatDuration } from './format'; import '../css/style.scss'; import 'tippy.js/dist/tippy.css'; import Container from '../components/container/container.vue'; import Icon from '../components/icon/icon.vue'; import Footer from '../components/footer/footer.vue'; import Tooltip from '../components/tooltip/tooltip.vue'; import Dialog from '../components/dialog/dialog.vue'; async function init() { let uid = 0; const store = initStore(router); const app = createApp(Container); const events = mitt(); function getBasePath(media, type, options) { if (store.state.ui.sfw) { return config.media.assetPath; } if (media.isS3) { return config.media.s3Path; } if (options?.local) { return config.media.assetPath; } return config.media.mediaPath; } function getFilename(media, type, options) { if (store.state.ui.sfw && type && !options?.original) { return media.sfw[type]; } if (store.state.ui.sfw) { return media.sfw.path; } if (type && !options?.original) { return media[type]; } return media.path; } function getPath(media, type, options) { if (!media) { return null; } const path = getBasePath(media, type, options); const filename = getFilename(media, type, options); return `${path}/${filename}`; } await initAuthObservers(store, router); await initUiObservers(store, router); if (window.env.sfw) { store.dispatch('setSfw', true); } app.use(store); app.use(router); await router.isReady(); app.mixin({ components: { Icon, Footer, Tooltip, 'v-popover': Tooltip, Dialog, }, data() { return { events, config, }; }, computed: { theme() { return this.$store.state.ui.theme; }, }, watch: { pageTitle(title) { if (title) { document.title = `traxxx - ${title}`; return; } document.title = 'traxxx'; }, }, methods: { formatDate, formatDuration, isAfter: (dateA, dateB) => dayjs(dateA).isAfter(dateB), isBefore: (dateA, dateB) => dayjs(dateA).isBefore(dateB), getPath, getBgPath: (media, type) => `url(${getPath(media, type)})`, }, beforeCreate() { this.uid = uid; uid += 1; }, }); app.directive('tooltip', { beforeMount(el, binding) { // don't include HTML in native title attribute const textEl = document.createElement('div'); textEl.innerHTML = binding.value; el.title = textEl.textContent; // eslint-disable-line no-param-reassign tippy(el, { content: binding.value, allowHTML: true, duration: [0, 0], }); }, }); app.mount('#container'); } init();