ngthanhvu/kr-phim
1
0
Fork 0
mirror of https://github.com/ngthanhvu/kr-phim.git synced 2026-08-10 16:47:46 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add gif component section

Browse Source
This commit is contained in:
ngthanhvu
2026-07-25 11:42:32 -04:00
parent 6c1dd39935
commit ee698c6acd
7 changed files with 245 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/CommentReplies.vue
+13 -5
View File
@@ -8,6 +8,7 @@ const props = defineProps<{
replyContent: Record<number, string>
isReplyAnonymous: Record<number, boolean>
isSubmittingReply?: Record<number, boolean>
openGifPicker?: (id: number) => void
}>()
const emit = defineEmits<{
@@ -27,7 +28,9 @@ function handleVote(replyId: number, vote: number) {
}
function formatMentions(content: string) {
return content.replace(/@(\S+)/g, '<span class="text-cinek-400 font-medium">@$1</span>')
let html = content.replace(/@(\S+)/g, '<span class="text-cinek-400 font-medium">@$1</span>')
html = html.replace(/!\[GIF\]\((https?:\/\/[^\s)]+)\)/g, '<img src="$1" alt="GIF" class="max-w-[150px] rounded-lg mt-1" loading="lazy" />')
return html
}
</script>
@@ -100,9 +103,13 @@ function formatMentions(content: string) {
</button>
<span class="text-xs text-slate-500">Tiết lộ</span>
</div>
<button type="button" class="flex items-center gap-1.5 text-xs text-slate-500 hover:text-slate-300 transition">
<AppIcon name="image" class="size-4" /><span>GIF</span>
</button>
<div class="relative">
<button type="button" @click="openGifPicker?.(reply.id)"
class="reply-gif-btn flex items-center gap-1.5 text-xs text-slate-500 hover:text-slate-300 transition"
:class="'reply-gif-btn-' + reply.id">
<AppIcon name="image" class="size-4" /><span>GIF</span>
</button>
</div>
</div>
<div class="flex items-center gap-3">
<span class="text-xs text-white/30">{{ (replyContent[reply.id] || '').length }} / 1000</span>
@@ -124,11 +131,12 @@ function formatMentions(content: string) {
<div v-if="reply.replies?.length" class="mt-3 pl-4 border-l-2 border-white/10">
<CommentReplies :replies="reply.replies" :depth="depth + 1" :user="user" :parent-id="reply.id"
:is-replying-to="isReplyingTo" :reply-content="replyContent" :is-reply-anonymous="isReplyAnonymous"
:is-submitting-reply="isSubmittingReply" :open-gif-picker="openGifPicker"
@start-reply="emit('start-reply', $event)" @cancel-reply="emit('cancel-reply', $event)"
@submit-reply="emit('submit-reply', $event)" @vote="emit('vote', $event)" @delete="emit('delete', $event)" />
</div>
</div>
</div>
</div>
</TransitionGroup>
</template>