cherrypick/packages/frontend/src/widgets/WidgetPhotos.vue
tamaina 88e3d3e8cb
enhance(server): 画像圧縮周り(主にサムネイルの仕様)の変更 (#10287)
* DriveService, is-mime-image

* static, previewをavifに, アニメーション画像でもthumbnailを生成

* fallback

* animated: true

* fix

* avatarはwebp

* revert ?? file.url

---------

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
2023-03-11 14:11:40 +09:00

125 lines
2.9 KiB
Vue

<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>