<template> <MkContainer :show-header="widgetProps.showHeader" :naked="widgetProps.transparent" :class="$style.root" :data-transparent="widgetProps.transparent ? true : null" data-cy-mkw-photos class="mkw-photos"> <template #icon><i class="ti ti-camera"></i></template> <template #header>{{ i18n.ts._widgets.photos }}</template> <div class=""> <MkLoading v-if="fetching"/> <div v-else :class="$style.stream"> <div v-for="(image, i) in images" :key="i" :class="$style.img" :style="`background-image: url(${thumbnail(image)})`" ></div> </div> </div> </MkContainer> </template> <script lang="ts" setup> import { onUnmounted, ref } from 'vue'; import { useWidgetPropsManager, Widget, WidgetComponentExpose } from './widget'; import { GetFormResultType } from '@/scripts/form'; import { stream } from '@/stream'; import { getStaticImageUrl } from '@/scripts/media-proxy'; import * as os from '@/os'; import MkContainer from '@/components/MkContainer.vue'; import { defaultStore } from '@/store'; import { i18n } from '@/i18n'; const name = 'photos'; const widgetPropsDef = { showHeader: { type: 'boolean' as const, default: true, }, transparent: { type: 'boolean' as const, default: false, }, }; type WidgetProps = GetFormResultType<typeof widgetPropsDef>; // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない //const props = defineProps<WidgetComponentProps<WidgetProps>>(); //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>(); const props = defineProps<{ widget?: Widget<WidgetProps>; }>(); const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>(); const { widgetProps, configure } = useWidgetPropsManager(name, widgetPropsDef, props, emit, ); const connection = stream.useChannel('main'); const images = ref([]); const fetching = ref(true); const onDriveFileCreated = (file) => { if (/^image\/.+$/.test(file.type)) { images.value.unshift(file); if (images.value.length > 9) images.value.pop(); } }; const thumbnail = (image: any): string => { return defaultStore.state.disableShowingAnimatedImages ? getStaticImageUrl(image.url) : image.thumbnailUrl; }; os.api('drive/stream', { type: 'image/*', limit: 9, }).then(res => { images.value = res; fetching.value = false; }); connection.on('driveFileCreated', onDriveFileCreated); onUnmounted(() => { connection.dispose(); }); defineExpose<WidgetComponentExpose>({ name, configure, id: props.widget ? props.widget.id : null, }); </script> <style lang="scss" module> .root[data-transparent] { .stream { padding: 0; } .img { border: solid 4px transparent; border-radius: 8px; } } .stream { display: flex; justify-content: center; flex-wrap: wrap; padding: 8px; .img { flex: 1 1 33%; width: 33%; height: 80px; box-sizing: border-box; background-position: center center; background-size: cover; background-clip: content-box; border: solid 2px transparent; border-radius: 4px; } } </style>