HyperNet/Interactive
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨ Better attachment displaying

Browse Source 
✨ Audio file support
This commit is contained in:
LittleSheep 2024-03-24 17:19:22 +08:00
parent 19be4e2a67
commit bdfd74eaf4
3 changed files with 13 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
pkg/views/src/components/posts/PostAttachment.vue
View File

@ -3,21 +3,18 @@
Attached {{ props.attachments.length }} attachment(s) Attached {{ props.attachments.length }} attachment(s)
</v-chip> </v-chip>
<v-card v-else variant="outlined" class="max-w-[540px]" :ripple="canLightbox" @click="openLightbox"> <v-card v-else variant="outlined" class="max-w-[540px]">
<div class="content"> <v-carousel hide-delimiters progress="primary" show-arrows="hover" height="100%">
<img v-if="current.type === 1" :src="getUrl(current)" /> <v-carousel-item v-for="item in attachments">
<video v-if="current.type === 2" controls class="w-full"> <img v-if="item.type === 1" :src="getUrl(item)" class="cursor-zoom-in" @click="openLightbox" />
<source :src="getUrl(current)" /> <video v-if="item.type === 2" controls class="w-full">
<source :src="getUrl(item)" />
</video> </video>
<div v-if="item.type === 3" class="w-full px-7 py-12">
<audio controls :src="getUrl(item)" class="mx-auto"></audio>
</div> </div>
</v-carousel-item>
<div v-if="props.attachments.length > 1" class="switcher flex justify-between items-center px-5 py-2"> </v-carousel>
<div>{{ focus + 1 }} of {{ props.attachments.length }}</div>
<div>
<v-btn icon="mdi-arrow-left" variant="text" size="small" @click.stop="focusPrev" />
<v-btn icon="mdi-arrow-right" variant="text" size="small" @click.stop="focusNext" />
</div>
</div>
<vue-easy-lightbox teleport="#app" :visible="lightbox" :imgs="[getUrl(current)]" @hide="lightbox = false"> <vue-easy-lightbox teleport="#app" :visible="lightbox" :imgs="[getUrl(current)]" @hide="lightbox = false">
<template v-slot:close-btn="{ close }"> <template v-slot:close-btn="{ close }">
@ -48,18 +45,6 @@ function openLightbox() {
lightbox.value = true lightbox.value = true
} }
} }
function focusNext() {
if (focus.value + 1 < props.attachments.length) {
focus.value++
}
}
function focusPrev() {
if (focus.value - 1 >= 0) {
focus.value--
}
}
</script> </script>
<style> <style>

3
pkg/views/src/components/posts/PostItem.vue
View File

@ -46,7 +46,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { type Component } from "vue" import { type Component } from "vue"
import { useUserinfo } from "@/stores/userinfo"
import ArticleContent from "@/components/posts/ArticleContent.vue" import ArticleContent from "@/components/posts/ArticleContent.vue"
import MomentContent from "@/components/posts/MomentContent.vue" import MomentContent from "@/components/posts/MomentContent.vue"
import CommentContent from "@/components/posts/CommentContent.vue" import CommentContent from "@/components/posts/CommentContent.vue"
@ -54,8 +53,6 @@ import PostAttachment from "@/components/posts/PostAttachment.vue"
import PostReaction from "@/components/posts/PostReaction.vue" import PostReaction from "@/components/posts/PostReaction.vue"
import PostAction from "@/components/posts/PostAction.vue" import PostAction from "@/components/posts/PostAction.vue"
const id = useUserinfo()
const props = defineProps<{ item: any; brief?: boolean }>() const props = defineProps<{ item: any; brief?: boolean }>()
const emits = defineEmits(["update:item"]) const emits = defineEmits(["update:item"])

2
pkg/views/src/components/publish/parts/Media.vue
View File

@ -13,7 +13,7 @@
variant="solo-filled" variant="solo-filled"
label="File Picker" label="File Picker"
v-model="picked" v-model="picked"
:accept="['image/*', 'video/*']" :accept="['image/*', 'video/*', 'audio/*']"
:loading="props.uploading" :loading="props.uploading"
@click:append="upload()" @click:append="upload()"
/> />