amechama/sharkey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(client): use composition api

Browse Source
This commit is contained in:
syuilo 2022-01-28 00:52:05 +09:00
parent 2a4f2fba09
commit a9960ac63a
1 changed files with 69 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
packages/client/src/components/media-list.vue
View File

@ -12,8 +12,8 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, onMounted, PropType, ref } from 'vue'; import { onMounted, ref } from 'vue';
import * as misskey from 'misskey-js'; import * as misskey from 'misskey-js';
import PhotoSwipeLightbox from 'photoswipe/dist/photoswipe-lightbox.esm.js'; import PhotoSwipeLightbox from 'photoswipe/dist/photoswipe-lightbox.esm.js';
import PhotoSwipe from 'photoswipe/dist/photoswipe.esm.js'; import PhotoSwipe from 'photoswipe/dist/photoswipe.esm.js';
@ -25,25 +25,15 @@ import * as os from '@/os';
import { FILE_TYPE_BROWSERSAFE } from '@/const'; import { FILE_TYPE_BROWSERSAFE } from '@/const';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
export default defineComponent({ const props = defineProps<{
components: { mediaList: misskey.entities.DriveFile[];
XBanner, raw?: boolean;
XImage, }>();
XVideo,
},
props: {
mediaList: {
type: Array as PropType<misskey.entities.DriveFile[]>,
required: true,
},
raw: {
default: false
},
},
setup(props) {
const gallery = ref(null);
onMounted(() => { const gallery = ref(null);
const pswpZIndex = os.claimZIndex('middle');
onMounted(() => {
const lightbox = new PhotoSwipeLightbox({ const lightbox = new PhotoSwipeLightbox({
dataSource: props.mediaList dataSource: props.mediaList
.filter(media => { .filter(media => {
@ -82,8 +72,8 @@ export default defineComponent({
pswpModule: PhotoSwipe, pswpModule: PhotoSwipe,
}); });
lightbox.on('itemData', (e) => { lightbox.on('itemData', (ev) => {
const { itemData } = e; const { itemData } = ev;
// element is children // element is children
const { element } = itemData; const { element } = itemData;
@ -102,21 +92,13 @@ export default defineComponent({
}); });
lightbox.init(); lightbox.init();
}); });
const previewable = (file: misskey.entities.DriveFile): boolean => { const previewable = (file: misskey.entities.DriveFile): boolean => {
if (file.type === 'image/svg+xml') return true; // svgのwebpublic/thumbnailはpngなのでtrue if (file.type === 'image/svg+xml') return true; // svgのwebpublic/thumbnailはpngなのでtrue
// FILE_TYPE_BROWSERSAFEに適合しないものはブラウザで表示するのに不適切 // FILE_TYPE_BROWSERSAFEに適合しないものはブラウザで表示するのに不適切
return (file.type.startsWith('video') || file.type.startsWith('image')) && FILE_TYPE_BROWSERSAFE.includes(file.type); return (file.type.startsWith('video') || file.type.startsWith('image')) && FILE_TYPE_BROWSERSAFE.includes(file.type);
}; };
return {
previewable,
gallery,
pswpZIndex: os.claimZIndex('middle'),
};
},
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>