import config from 'config'; import { createApp } from 'vue'; import dayjs from 'dayjs'; import mitt from 'mitt'; import router from './router'; import initStore from './store'; import initUiObservers from './ui/observers'; import { formatDate, formatDuration } from './format'; import '../css/style.scss'; 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 getPath(media, type, options) { const path = (store.state.ui.sfw && media.assetPath) || (media.isS3 && config.media.s3Path) || (options?.local && config.media.assetPath) || config.media.mediaPath; const filename = type && !options?.original ? media[type] : media.path; return `${path}/${filename}`; } 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, }; }, 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) { // console.log(binding.modifiers); el.title = binding.value; // eslint-disable-line no-param-reassign }, }); app.mount('#container'); } init();