FoundKeyGang/FoundKey
FoundKeyGang/FoundKey
7
19
Fork 22
Code Issues 37 Pull requests 4 Releases Activity

Resolve #6811

Browse source
This commit is contained in:
syuilo 2021-07-12 02:56:33 +09:00
parent e24c8b6878
commit 558d288e7b
1 changed files with 4 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
src/client/components/media-list.vue
View file

@ -1,8 +1,8 @@
<template> <template>
<div class="mk-media-list"> <div class="hoawjimk">
<XBanner v-for="media in mediaList.filter(media => !previewable(media))" :media="media" :key="media.id"/> <XBanner v-for="media in mediaList.filter(media => !previewable(media))" :media="media" :key="media.id"/>
<div v-if="mediaList.filter(media => previewable(media)).length > 0" class="gird-container" ref="gridOuter"> <div v-if="mediaList.filter(media => previewable(media)).length > 0" class="gird-container">
<div :data-count="mediaList.filter(media => previewable(media)).length" :style="gridInnerStyle"> <div :data-count="mediaList.filter(media => previewable(media)).length">
<template v-for="media in mediaList"> <template v-for="media in mediaList">
<XVideo :video="media" :key="media.id" v-if="media.type.startsWith('video')"/> <XVideo :video="media" :key="media.id" v-if="media.type.startsWith('video')"/>
<XImage :image="media" :key="media.id" v-else-if="media.type.startsWith('image')" :raw="raw"/> <XImage :image="media" :key="media.id" v-else-if="media.type.startsWith('image')" :raw="raw"/>
@ -33,57 +33,16 @@ export default defineComponent({
default: false default: false
}, },
}, },
data() {
return {
gridInnerStyle: {},
sizeWaiting: false
}
},
mounted() {
this.size();
window.addEventListener('resize', this.size);
},
beforeUnmount() {
window.removeEventListener('resize', this.size);
},
activated() {
this.size();
},
methods: { methods: {
previewable(file) { previewable(file) {
return file.type.startsWith('video') || file.type.startsWith('image'); return file.type.startsWith('video') || file.type.startsWith('image');
}, },
size() {
// for Safari bug
if (this.sizeWaiting) return;
this.sizeWaiting = true;
window.requestAnimationFrame(() => {
this.sizeWaiting = false;
if (this.$refs.gridOuter) {
let height = 287;
const parent = this.$parent.$el;
if (this.$refs.gridOuter.clientHeight) {
height = this.$refs.gridOuter.clientHeight;
} else if (parent) {
height = parent.getBoundingClientRect().width * 9 / 16;
}
this.gridInnerStyle = { height: `${height}px` };
} else {
this.gridInnerStyle = {};
}
});
}
}, },
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.mk-media-list { .hoawjimk {
> .gird-container { > .gird-container {
position: relative; position: relative;
width: 100%; width: 100%;