310 lines
15 KiB
JavaScript
310 lines
15 KiB
JavaScript
import { defineComponent, ref, reactive, mergeProps, unref, withCtx, createVNode, resolveDirective, openBlock, createBlock, withDirectives, Fragment, renderList, useSSRContext } from 'vue';
|
|
import { ssrRenderAttrs, ssrRenderComponent, ssrRenderAttr, ssrGetDirectiveProps, ssrInterpolate, ssrRenderList, ssrRenderClass } from 'vue/server-renderer';
|
|
import { e as empty_user } from './empty_user-DSxcM_ac.mjs';
|
|
import { f as formatTime } from './useDateTime-iTLoRLEX.mjs';
|
|
import { Swiper, SwiperSlide } from 'swiper/vue';
|
|
import { Pagination } from 'swiper/modules';
|
|
import { i as img_gif } from './post_loading-CMOcYm9B.mjs';
|
|
import { q as useElementSize, u as useRouter$1, a as useConfigStore, b as useUserStore } from './server.mjs';
|
|
import { B as BasicIconOld } from './BasicIconOld-Booq7UXp.mjs';
|
|
import { _ as _export_sfc } from './_plugin-vue_export-helper-1tPrXgE0.mjs';
|
|
import { _ as _sfc_main$3 } from './like-D4L8S2C_.mjs';
|
|
import { b as _sfc_main$7, a as _sfc_main$5, e as _sfc_main$6 } from './moreOptionProduct-C93aAhOp.mjs';
|
|
import { ContentLoader } from 'vue-content-loader';
|
|
|
|
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
__name: "Content",
|
|
__ssrInlineRender: true,
|
|
props: {
|
|
media: {},
|
|
name: {},
|
|
id: {},
|
|
scrollSave: {}
|
|
},
|
|
setup(__props) {
|
|
useRouter$1();
|
|
const config = useConfigStore();
|
|
const videos = ref([]);
|
|
const modules = [Pagination];
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
const _directive_lazy = resolveDirective("lazy");
|
|
let _temp0;
|
|
_push(`<div${ssrRenderAttrs(mergeProps({ class: "mt-.5rem" }, _attrs))} data-v-59d99514>`);
|
|
_push(ssrRenderComponent(unref(Swiper), {
|
|
pagination: true,
|
|
modules,
|
|
class: ["postConfig !m-unset !w-full", _ctx.media.length > 1 ? "!aspect-square !h-unset" : "!h-fit"]
|
|
}, {
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(`<!--[-->`);
|
|
ssrRenderList(_ctx.media, (slide) => {
|
|
_push2(ssrRenderComponent(unref(SwiperSlide), {
|
|
class: ["!w-full", _ctx.media.length > 1 ? "!aspect-square !h-unset" : "!h-fit"]
|
|
}, {
|
|
default: withCtx((_2, _push3, _parent3, _scopeId2) => {
|
|
if (_push3) {
|
|
if (slide.type === "video") {
|
|
_push3(`<div class="video-container" data-v-59d99514${_scopeId2}><video${ssrRenderAttr("src", unref(config).useDataStorage(slide.url))} playsinline muted loop class="video" data-v-59d99514${_scopeId2}></video></div>`);
|
|
} else {
|
|
_push3(`<div class="${ssrRenderClass([_ctx.media.length > 1 ? "aspect-square" : "", "w-full flex items-center"])}" data-v-59d99514${_scopeId2}><img${ssrRenderAttrs(_temp0 = mergeProps({
|
|
alt: unref(config).appName.en,
|
|
class: "w-full"
|
|
}, ssrGetDirectiveProps(_ctx, _directive_lazy, { src: unref(config).useDataStorage(slide.url), loading: unref(img_gif), error: unref(img_gif) })))} data-v-59d99514${_scopeId2}>${"textContent" in _temp0 ? ssrInterpolate(_temp0.textContent) : _temp0.innerHTML ?? ""}</div>`);
|
|
}
|
|
} else {
|
|
return [
|
|
slide.type === "video" ? (openBlock(), createBlock("div", {
|
|
key: 0,
|
|
class: "video-container"
|
|
}, [
|
|
createVNode("video", {
|
|
ref_for: true,
|
|
ref_key: "videos",
|
|
ref: videos,
|
|
src: unref(config).useDataStorage(slide.url),
|
|
playsinline: "",
|
|
muted: "",
|
|
loop: "",
|
|
class: "video"
|
|
}, null, 8, ["src"])
|
|
])) : (openBlock(), createBlock("div", {
|
|
key: 1,
|
|
class: ["w-full flex items-center", _ctx.media.length > 1 ? "aspect-square" : ""]
|
|
}, [
|
|
withDirectives(createVNode("img", {
|
|
alt: unref(config).appName.en,
|
|
class: "w-full"
|
|
}, null, 8, ["alt"]), [
|
|
[_directive_lazy, { src: unref(config).useDataStorage(slide.url), loading: unref(img_gif), error: unref(img_gif) }]
|
|
])
|
|
], 2))
|
|
];
|
|
}
|
|
}),
|
|
_: 2
|
|
}, _parent2, _scopeId));
|
|
});
|
|
_push2(`<!--]-->`);
|
|
} else {
|
|
return [
|
|
(openBlock(true), createBlock(Fragment, null, renderList(_ctx.media, (slide) => {
|
|
return openBlock(), createBlock(unref(SwiperSlide), {
|
|
class: ["!w-full", _ctx.media.length > 1 ? "!aspect-square !h-unset" : "!h-fit"]
|
|
}, {
|
|
default: withCtx(() => [
|
|
slide.type === "video" ? (openBlock(), createBlock("div", {
|
|
key: 0,
|
|
class: "video-container"
|
|
}, [
|
|
createVNode("video", {
|
|
ref_for: true,
|
|
ref_key: "videos",
|
|
ref: videos,
|
|
src: unref(config).useDataStorage(slide.url),
|
|
playsinline: "",
|
|
muted: "",
|
|
loop: "",
|
|
class: "video"
|
|
}, null, 8, ["src"])
|
|
])) : (openBlock(), createBlock("div", {
|
|
key: 1,
|
|
class: ["w-full flex items-center", _ctx.media.length > 1 ? "aspect-square" : ""]
|
|
}, [
|
|
withDirectives(createVNode("img", {
|
|
alt: unref(config).appName.en,
|
|
class: "w-full"
|
|
}, null, 8, ["alt"]), [
|
|
[_directive_lazy, { src: unref(config).useDataStorage(slide.url), loading: unref(img_gif), error: unref(img_gif) }]
|
|
])
|
|
], 2))
|
|
]),
|
|
_: 2
|
|
}, 1032, ["class"]);
|
|
}), 256))
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
_push(`<div class="flex bg-[#0195f7] text-white px-3 py-3 items-center justify-between cursor-pointer" data-v-59d99514><div class="font-semibold text-xs" data-v-59d99514>${ssrInterpolate(_ctx.name)}</div><div class="flex items-center" data-v-59d99514><div class="text-xs" data-v-59d99514>${ssrInterpolate(unref(config).useString("viewProduct"))}</div>`);
|
|
_push(ssrRenderComponent(BasicIconOld, {
|
|
icon: unref(config).isRTL ? "vuesax-linear:arrow-left-1" : "vuesax-linear:arrow-right-1",
|
|
size: "16"
|
|
}, null, _parent));
|
|
_push(`</div></div></div>`);
|
|
};
|
|
}
|
|
});
|
|
const _sfc_setup$2 = _sfc_main$2.setup;
|
|
_sfc_main$2.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("views/base/pages/home/components/Content.vue");
|
|
return _sfc_setup$2 ? _sfc_setup$2(props, ctx) : void 0;
|
|
};
|
|
const Content = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-59d99514"]]);
|
|
const maxLength = 100;
|
|
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
__name: "Post",
|
|
__ssrInlineRender: true,
|
|
props: {
|
|
post: {},
|
|
index: {},
|
|
scrollSave: {},
|
|
addLikeLoading: { type: Boolean }
|
|
},
|
|
emits: ["openOption", "openComment", "handleLike", "handleSave"],
|
|
setup(__props, { emit: __emit }) {
|
|
useRouter$1();
|
|
const emits = __emit;
|
|
const config = useConfigStore();
|
|
const expandedPosts = ref({});
|
|
const user = useUserStore();
|
|
const shouldShowMore = (caption) => caption?.length > maxLength;
|
|
function openOption(id) {
|
|
emits("openOption", id);
|
|
}
|
|
const truncatedCaption = (caption) => {
|
|
return shouldShowMore(caption) ? caption?.slice(0, maxLength) + "..." : caption;
|
|
};
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
const _directive_lazy = resolveDirective("lazy");
|
|
let _temp0;
|
|
_push(`<div${ssrRenderAttrs(mergeProps({
|
|
class: "w-full mb-2",
|
|
id: "post-" + _ctx.post.id
|
|
}, _attrs))}><div class="flex px-3 items-center justify-between"><div class="flex items-center"><img${ssrRenderAttrs(_temp0 = mergeProps({
|
|
alt: "instagram",
|
|
class: "w-2rem h-2rem rounded-full"
|
|
}, ssrGetDirectiveProps(_ctx, _directive_lazy, { src: unref(config).useDataStorage(_ctx.post?.users?.avatar), loading: unref(empty_user), error: unref(empty_user) })))}>${"textContent" in _temp0 ? ssrInterpolate(_temp0.textContent) : _temp0.innerHTML ?? ""}<div class="ms-2"><div class="text-sm font-semibold">${ssrInterpolate(_ctx.post?.users?.username)}</div></div></div>`);
|
|
if (_ctx.post?.users?.id === unref(user).user?.id) {
|
|
_push(`<div>`);
|
|
_push(ssrRenderComponent(BasicIconOld, {
|
|
icon: "vuesax-linear:more",
|
|
class: "rotate-90",
|
|
size: "18",
|
|
onClick: ($event) => openOption(_ctx.post.id)
|
|
}, null, _parent));
|
|
_push(`</div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`</div>`);
|
|
_push(ssrRenderComponent(Content, {
|
|
media: _ctx.post?.files,
|
|
name: _ctx.post.title_fa,
|
|
id: _ctx.post.id,
|
|
scrollSave: _ctx.scrollSave
|
|
}, null, _parent));
|
|
_push(`<div class="p-4"><div class="flex gap-4 items-center justify-between"><div class="flex items-center gap-4"><div class="flex items-center gap-1"${ssrRenderAttr("aria-disabled", _ctx.addLikeLoading)}>`);
|
|
_push(ssrRenderComponent(_sfc_main$3, {
|
|
"is-liked": _ctx.post.likes?.some((x) => x.user_id === unref(user).user?.id)
|
|
}, null, _parent));
|
|
_push(` ${ssrInterpolate(_ctx.post?.likes?.length ?? 0)}</div><div class="flex items-center gap-1">`);
|
|
_push(ssrRenderComponent(_sfc_main$7, null, null, _parent));
|
|
_push(` ${ssrInterpolate(_ctx.post?.comments?.length ?? 0)}</div><div class="flex items-center gap-1">`);
|
|
_push(ssrRenderComponent(_sfc_main$5, null, null, _parent));
|
|
_push(`</div></div><div>`);
|
|
_push(ssrRenderComponent(_sfc_main$6, {
|
|
"is-saved": _ctx.post.saved?.some((x) => x.user_id === unref(user).user?.id)
|
|
}, null, _parent));
|
|
_push(`</div></div><div class="mt-2 text-sm"><span class="font-semibold text-sm ms1">${ssrInterpolate(_ctx.post?.users?.username)}</span><span class="ms-2 text-caption whitespace-pre-line">${ssrInterpolate(expandedPosts.value[_ctx.index] ? _ctx.post?.description : truncatedCaption(_ctx.post?.description))}</span>`);
|
|
if (shouldShowMore(_ctx.post?.description)) {
|
|
_push(`<span class="text-gray cursor-pointer ms-1 whitespace-pre-line">${ssrInterpolate(expandedPosts.value[_ctx.index] ? unref(config).useString("less") : unref(config).useString("more"))}</span>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`<div class="text-xs mt-1 text-gray-500">${ssrInterpolate(unref(formatTime)(_ctx.post?.created_at))}</div></div></div></div>`);
|
|
};
|
|
}
|
|
});
|
|
const _sfc_setup$1 = _sfc_main$1.setup;
|
|
_sfc_main$1.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/Post.vue");
|
|
return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
|
|
};
|
|
const Post = Object.assign(_sfc_main$1, { __name: "Post" });
|
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
__name: "PostCardSkeleton",
|
|
__ssrInlineRender: true,
|
|
setup(__props) {
|
|
const isLoaded = ref(false);
|
|
const skeletonRatio = ref(null);
|
|
const skeletonSize = reactive(
|
|
useElementSize(skeletonRatio, { width: 0, height: 0 }, { box: "border-box" })
|
|
);
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
if (isLoaded.value) {
|
|
_push(`<div${ssrRenderAttrs(mergeProps({
|
|
ref_key: "skeletonRatio",
|
|
ref: skeletonRatio,
|
|
class: "h-fit"
|
|
}, _attrs))}>`);
|
|
_push(ssrRenderComponent(unref(ContentLoader), {
|
|
width: skeletonSize.width,
|
|
height: "800"
|
|
}, {
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(`<circle${ssrRenderAttr("cx", 30)} cy="30" r="20"${_scopeId}></circle><rect x="60" y="25" rx="3" ry="3" width="100" height="10"${_scopeId}></rect><rect x="0" y="60" rx="0" ry="0"${ssrRenderAttr("width", Math.max(100, skeletonSize.width))}${ssrRenderAttr("height", Math.max(0, skeletonSize.width - 100))}${_scopeId}></rect><rect x="20"${ssrRenderAttr("y", Math.max(0, skeletonSize.width - 10))} rx="0" ry="0"${ssrRenderAttr("width", 300)}${ssrRenderAttr("height", 10)}${_scopeId}></rect><rect x="20"${ssrRenderAttr("y", Math.max(0, skeletonSize.width + 10))} rx="0" ry="0"${ssrRenderAttr("width", 300)}${ssrRenderAttr("height", 8)}${_scopeId}></rect>`);
|
|
} else {
|
|
return [
|
|
createVNode("circle", {
|
|
cx: 30,
|
|
cy: "30",
|
|
r: "20"
|
|
}),
|
|
createVNode("rect", {
|
|
x: "60",
|
|
y: "25",
|
|
rx: "3",
|
|
ry: "3",
|
|
width: "100",
|
|
height: "10"
|
|
}),
|
|
createVNode("rect", {
|
|
x: "0",
|
|
y: "60",
|
|
rx: "0",
|
|
ry: "0",
|
|
width: Math.max(100, skeletonSize.width),
|
|
height: Math.max(0, skeletonSize.width - 100)
|
|
}, null, 8, ["width", "height"]),
|
|
createVNode("rect", {
|
|
x: "20",
|
|
y: Math.max(0, skeletonSize.width - 10),
|
|
rx: "0",
|
|
ry: "0",
|
|
width: 300,
|
|
height: 10
|
|
}, null, 8, ["y"]),
|
|
createVNode("rect", {
|
|
x: "20",
|
|
y: Math.max(0, skeletonSize.width + 10),
|
|
rx: "0",
|
|
ry: "0",
|
|
width: 300,
|
|
height: 8
|
|
}, null, 8, ["y"])
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
_push(`</div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
};
|
|
}
|
|
});
|
|
const _sfc_setup = _sfc_main.setup;
|
|
_sfc_main.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("views/base/pages/home/components/PostCardSkeleton.vue");
|
|
return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
|
|
};
|
|
|
|
export { Post as P, _sfc_main as _ };
|