Files
appco_dist/.output/server/chunks/build/FullScreenStories-BJPLTwoO.mjs
T
2025-07-24 21:23:30 +03:30

386 lines
22 KiB
JavaScript

import { b as buildAssetsURL } from '../_/nitro.mjs';
import { defineComponent, ref, computed, watchEffect, watch, nextTick, resolveDirective, mergeProps, unref, withCtx, createVNode, withDirectives, createBlock, openBlock, withModifiers, Fragment, renderList, useSSRContext } from 'vue';
import { ssrRenderAttrs, ssrRenderList, ssrRenderComponent, ssrInterpolate, ssrGetDirectiveProps, ssrRenderAttr } from 'vue/server-renderer';
import { _ as _sfc_main$2 } from './BasicInput-BEP6ZgUl.mjs';
import { u as useRouter, a as useConfigStore, az as useSwipe, b as useUserStore, t as reactiveProjectName, x as getSupabaseStorageUrl, z as useElementSize } from './server.mjs';
import { _ as _sfc_main$3 } from './like-BhIOg3YL.mjs';
import { _ as _export_sfc } from './_plugin-vue_export-helper-1tPrXgE0.mjs';
import { _ as _sfc_main$4 } from './BasicButton-B-4QDu9v.mjs';
import { B as BasicIconOld } from './BasicIconOld-I4c2ShMu.mjs';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { EffectCreative } from 'swiper/modules';
import { u as useMediaStore } from './media-kxpEX2xr.mjs';
import { e as empty_user } from './empty_user-BaUNCdgf.mjs';
import { u as userViewStory, s as setStorySeenLocal } from './media-BbtM6xvT.mjs';
const intervalError = "[nuxt] `setInterval` should not be used on the server. Consider wrapping it with an `onNuxtReady`, `onBeforeMount` or `onMounted` lifecycle hook, or ensure you only call it in the browser by checking `false`.";
const setInterval = () => {
console.error(intervalError);
};
const _imports_0 = "data:image/svg+xml,%3c?xml%20version='1.0'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20fill='%233797EF'%20viewBox='0%200%2024%2024'%20width='24px'%20height='24px'%3e%3cpath%20d='M12,2C6.477,2,2,6.477,2,12s4.477,10,10,10s10-4.477,10-10S17.523,2,12,2z%20M16,13h-3v3c0,0.552-0.448,1-1,1h0%20c-0.552,0-1-0.448-1-1v-3H8c-0.552,0-1-0.448-1-1v0c0-0.552,0.448-1,1-1h3V8c0-0.552,0.448-1,1-1h0c0.552,0,1,0.448,1,1v3h3%20c0.552,0,1,0.448,1,1v0C17,12.552,16.552,13,16,13z'/%3e%3c/svg%3e";
const _imports_1 = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20fill='none'%20viewBox='0%200%2024%2024'%20id='instagram-highlight-story'%3e%3cpath%20fill='%23fff'%20fill-rule='evenodd'%20d='M12.1213%207.40686C10.6607%206.40269%208.64684%206.54986%207.34835%207.84835%205.88388%209.31282%205.88388%2011.6872%207.34835%2013.1517L11.591%2017.3943C11.7316%2017.5349%2011.9224%2017.614%2012.1213%2017.614%2012.3202%2017.614%2012.511%2017.5349%2012.6517%2017.3943L16.8943%2013.1517C18.3588%2011.6872%2018.3588%209.31282%2016.8943%207.84835%2015.5958%206.54986%2013.582%206.40269%2012.1213%207.40686zM11.591%208.90901C10.7123%208.03033%209.28769%208.03033%208.40901%208.90901%207.53033%209.78769%207.53033%2011.2123%208.40901%2012.091L12.1213%2015.8033%2015.8336%2012.091C16.7123%2011.2123%2016.7123%209.78769%2015.8336%208.90901%2014.955%208.03033%2013.5303%208.03033%2012.6517%208.90901%2012.3588%209.2019%2011.8839%209.2019%2011.591%208.90901zM10.2263%202.128C10.3296%202.52914%2010.0881%202.93802%209.68694%203.04127%209.19056%203.16903%208.7103%203.33698%208.24979%203.54149%207.87123%203.7096%207.42806%203.539%207.25994%203.16044%207.09183%202.78187%207.26243%202.3387%207.64099%202.17059%208.17667%201.9327%208.73547%201.73727%209.31306%201.58861%209.7142%201.48537%2010.1231%201.72686%2010.2263%202.128zM5.75633%204.15238C6.03781%204.45625%206.01966%204.93078%205.71579%205.21226%204.97148%205.90172%204.34093%206.71184%203.85525%207.61113%203.65841%207.97559%203.2034%208.11148%202.83894%207.91464%202.47448%207.71781%202.33859%207.26279%202.53543%206.89834%203.1%205.85298%203.83243%204.91218%204.69645%204.11183%205.00032%203.83035%205.47485%203.8485%205.75633%204.15238zM2.25612%209.61903C2.66481%209.6865%202.94142%2010.0725%202.87396%2010.4812%202.79247%2010.9748%202.75%2011.4821%202.75%2011.9999%202.75%2012.5177%202.79247%2013.025%202.87396%2013.5186%202.94142%2013.9273%202.66481%2014.3133%202.25612%2014.3808%201.84744%2014.4482%201.46145%2014.1716%201.39399%2013.7629%201.29922%2013.1888%201.25%2012.5998%201.25%2011.9999%201.25%2011.4%201.29922%2010.811%201.39399%2010.2369%201.46145%209.82819%201.84744%209.55157%202.25612%209.61903zM2.83894%2016.0851C3.2034%2015.8883%203.65841%2016.0242%203.85525%2016.3887%204.34093%2017.288%204.97147%2018.0981%205.71578%2018.7875%206.01966%2019.069%206.03781%2019.5435%205.75633%2019.8474%205.47485%2020.1513%205.00032%2020.1694%204.69644%2019.888%203.83243%2019.0876%203.1%2018.1468%202.53543%2017.1015%202.33859%2016.737%202.47448%2016.282%202.83894%2016.0851zM7.25994%2020.8394C7.42805%2020.4608%207.87122%2020.2902%208.24979%2020.4583%208.7103%2020.6628%209.19056%2020.8308%209.68694%2020.9585%2010.0881%2021.0618%2010.3296%2021.4707%2010.2263%2021.8718%2010.1231%2022.2729%209.7142%2022.5144%209.31306%2022.4112%208.73547%2022.2625%208.17667%2022.0671%207.64099%2021.8292%207.26243%2021.6611%207.09183%2021.2179%207.25994%2020.8394z'%20clip-rule='evenodd'%3e%3c/path%3e%3cpath%20fill='%23fff'%20fill-rule='evenodd'%20d='M11.25%202C11.25%201.58579%2011.5858%201.25%2012%201.25C17.9371%201.25%2022.75%206.06294%2022.75%2012C22.75%2012.4142%2022.4142%2012.75%2022%2012.75C21.5858%2012.75%2021.25%2012.4142%2021.25%2012C21.25%206.89137%2017.1086%202.75%2012%202.75C11.5858%202.75%2011.25%202.41421%2011.25%202ZM21.4682%2015.3127C21.8478%2015.4786%2022.021%2015.9207%2021.8552%2016.3003C20.197%2020.0954%2016.4094%2022.75%2012%2022.75C11.5858%2022.75%2011.25%2022.4142%2011.25%2022C11.25%2021.5858%2011.5858%2021.25%2012%2021.25C15.7919%2021.25%2019.0526%2018.9682%2020.4806%2015.6997C20.6465%2015.3202%2021.0886%2015.1469%2021.4682%2015.3127Z'%20clip-rule='evenodd'%3e%3c/path%3e%3c/svg%3e";
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
__name: "CustomProgressBar",
__ssrInlineRender: true,
props: {
percent: { type: Number, required: true },
barHeight: { type: Number, default: 2 }
},
setup(__props) {
const el = ref(null);
const { width } = useElementSize(el);
const props = __props;
const containerWidth = ref(0);
watchEffect(() => {
if (width.value > 0) {
containerWidth.value = width.value;
}
});
const key = ref(0);
const progressWidth = computed(() => containerWidth.value * props.percent / 100);
watch(progressWidth, () => {
if (props.percent === 100 || props.percent === 0) {
key.value++;
}
});
return (_ctx, _push, _parent, _attrs) => {
_push(`<div${ssrRenderAttrs(mergeProps({
ref_key: "el",
ref: el,
class: "progress-container"
}, _attrs))} data-v-9bef4aaa>`);
if (containerWidth.value > 0) {
_push(`<svg${ssrRenderAttr("width", containerWidth.value)}${ssrRenderAttr("height", __props.barHeight)}${ssrRenderAttr("viewBox", `0 0 ${containerWidth.value} ${__props.barHeight}`)} class="progress-bar" data-v-9bef4aaa><rect x="0" y="0"${ssrRenderAttr("width", containerWidth.value)}${ssrRenderAttr("height", __props.barHeight)} fill="rgba(255, 255, 255, 0.3)" rx="1" ry="1" data-v-9bef4aaa></rect><rect x="0" y="0"${ssrRenderAttr("width", progressWidth.value)}${ssrRenderAttr("height", __props.barHeight)} fill="white" rx="1" ry="1" class="progress-fill" data-v-9bef4aaa></rect></svg>`);
} else {
_push(`<!---->`);
}
_push(`</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("views/base/pages/home/components/CustomProgressBar.vue");
return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
};
const CustomProgressBar = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-9bef4aaa"]]);
const img_gif = "" + buildAssetsURL("story_loading.Cuvmkir-.gif");
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "FullScreenStories",
__ssrInlineRender: true,
props: {
id: {},
specifyId: { type: Boolean, default: false }
},
emits: ["update:id"],
setup(__props, { emit: __emit }) {
useRouter();
const swiperRef = ref(null);
const modules = [EffectCreative];
const indexStory = ref(0);
const playingSlide = ref(0);
const storySlides = ref(0);
const message = ref("");
const config = useConfigStore();
const props = __props;
const emits = __emit;
const progress = ref([]);
const target = ref(null);
const { direction, isSwiping } = useSwipe(target);
const sendMessageState = ref(false);
const userStory = computed(() => {
console.log("mediaStore.users ===>", mediaStore.users);
console.log("props.id ===>", props.id);
if (props.specifyId) {
return mediaStore.users.find((x) => x.id === props.id);
} else {
return mediaStore.users[indexStory.value];
}
});
let interval = void 0;
const mediaStore = useMediaStore();
const userStore = useUserStore();
const isPaused = ref(false);
const storyOwner = computed(() => {
var _a, _b;
return config.isSeller && ((_a = userStore.user) == null ? void 0 : _a.id) === ((_b = userStory.value) == null ? void 0 : _b.id);
});
watchEffect(() => {
if (isSwiping.value && direction.value === "down") {
emits("update:id", void 0);
}
});
watch(indexStory, async (n) => {
await indexHandle();
});
async function indexHandle() {
var _a;
storySlides.value = (_a = userStory.value) == null ? void 0 : _a.stories.length;
progress.value = [];
await nextTick();
if (swiperRef.value) swiperRef.value.activeIndex = indexStory.value;
for (let i = 0; i < storySlides.value; i++) {
progress.value.push(0);
}
startOver();
}
const onSwiper = (swiper) => {
swiperRef.value = swiper;
};
const onSlideChange = (val) => {
playingSlide.value = 0;
stopInterval();
indexStory.value = val.activeIndex;
};
function focusMessage(val) {
if (val !== "") sendMessageState.value = true;
else sendMessageState.value = false;
}
function startOver() {
interval = setInterval();
}
function stopInterval() {
clearInterval(interval);
interval = void 0;
}
watch([playingSlide, indexStory], async () => {
var _a2;
var _a, _b, _c, _d;
const story = (_a = userStory.value) == null ? void 0 : _a.stories[playingSlide.value];
const item = story.storyviews.find((item2) => {
var _a22;
return item2.user_id === (((_a22 = userStore.user) == null ? void 0 : _a22.id) || "me");
});
if ((_b = userStore.user) == null ? void 0 : _b.id) {
if (!item) await userViewStory((_c = userStore.user) == null ? void 0 : _c.id, story.id);
} else {
setStorySeenLocal(story.id);
}
if (!item) {
Object.assign(story, {
storyviews: [...(_a2 = item == null ? void 0 : item.storyviews) != null ? _a2 : [], { user_id: ((_d = userStore.user) == null ? void 0 : _d.id) || "me", story_id: story.id }]
});
}
}, { deep: true, immediate: true });
return (_ctx, _push, _parent, _attrs) => {
var _a2;
var _a, _b;
const _directive_lazy = resolveDirective("lazy");
let _temp0, _temp1, _temp2;
_push(`<div${ssrRenderAttrs(mergeProps({
class: "flex full_story z-400 justify-center",
dir: "ltr"
}, _attrs))}><div class="relative w-full md:w-426px bg-black flex items-center pb-5rem">`);
if (!isPaused.value) {
_push(`<div class="absolute w-full top-0 right-0 left-0 z-1000 blurred-gradient-bg"><div class="flex gap-2px shadow-xl"><!--[-->`);
ssrRenderList(userStory.value.stories, (story, index) => {
_push(ssrRenderComponent(CustomProgressBar, {
key: index,
percent: progress.value[index]
}, null, _parent));
});
_push(`<!--]--></div><div class="p-2 flex items-center gap-2 account-detail-area"><div class="relative"><img${ssrRenderAttrs(_temp0 = mergeProps({
class: "w-2.5rem h-2.5rem rounded-full",
alt: unref(reactiveProjectName)
}, ssrGetDirectiveProps(_ctx, _directive_lazy, { src: unref(getSupabaseStorageUrl)((_a = userStory.value) == null ? void 0 : _a.avatar), loading: unref(empty_user), error: unref(empty_user) })))}>${"textContent" in _temp0 ? ssrInterpolate(_temp0.textContent) : (_a2 = _temp0.innerHTML) != null ? _a2 : ""}`);
if (storyOwner.value) {
_push(`<img${ssrRenderAttr("src", _imports_0)}${ssrRenderAttr("alt", unref(reactiveProjectName))} class="w-15px absolute right-0 bottom-0 bg-white rounded-full">`);
} else {
_push(`<!---->`);
}
_push(`</div><p class="text-white">${ssrInterpolate((_b = userStory.value) == null ? void 0 : _b.name)}</p></div></div>`);
} else {
_push(`<!---->`);
}
if (!isPaused.value) {
_push(`<div class="absolute w-full bottom-0 right-0 left-0 blurred-gradient-bg z-2000 functions-area">`);
if (!storyOwner.value) {
_push(`<div class="flex gap-5 p-5 items-center">`);
_push(ssrRenderComponent(_sfc_main$2, {
value: message.value,
"onUpdate:value": ($event) => message.value = $event,
"place-holder": unref(config).useString("sendMessage"),
onOnchange: focusMessage,
class: "story_input flex-1"
}, null, _parent));
_push(`<div class="flex w-1.5rem justify-end items-center">`);
if (!sendMessageState.value) {
_push(ssrRenderComponent(_sfc_main$3, {
mode: "night",
class: "w-1.5rem"
}, null, _parent));
} else {
_push(ssrRenderComponent(_sfc_main$4, {
size: "small",
shape: "circle",
class: "w-2.2rem !h-2.2rem",
type: "primary"
}, {
default: withCtx((_, _push2, _parent2, _scopeId) => {
if (_push2) {
_push2(ssrRenderComponent(BasicIconOld, { icon: "vuesax-linear:send-1" }, null, _parent2, _scopeId));
} else {
return [
createVNode(BasicIconOld, { icon: "vuesax-linear:send-1" })
];
}
}),
_: 1
}, _parent));
}
_push(`</div></div>`);
} else {
_push(`<div class="flex gap-5 p-5 items-center mx4" dir="rtl"><div class="flex flex-col items-center gap-3 text-white">`);
_push(ssrRenderComponent(BasicIconOld, {
icon: "vuesax-linear:trash",
size: "22"
}, null, _parent));
_push(`<div class="text-xs">${ssrInterpolate(unref(config).useString("delete"))}</div></div><div class="flex flex-col items-center gap-3 text-white"><img${ssrRenderAttr("src", _imports_1)}${ssrRenderAttr("alt", unref(reactiveProjectName))}><div class="text-xs">${ssrInterpolate(unref(config).useString("highlight"))}</div></div></div>`);
}
_push(`</div>`);
} else {
_push(`<!---->`);
}
_push(`<div class="w-full">`);
_push(ssrRenderComponent(unref(Swiper), {
key: indexStory.value,
ref_key: "swiperRef",
ref: swiperRef,
onSwiper,
onSlideChange,
initialSlide: indexStory.value,
grabCursor: true,
effect: "creative",
creativeEffect: {
prev: { shadow: true, origin: "left center", translate: ["-5%", 0, -200], rotate: [0, 100, 0] },
next: { origin: "right center", translate: ["5%", 0, -200], rotate: [0, -100, 0] }
},
modules,
class: "mySwiper6"
}, {
default: withCtx((_, _push2, _parent2, _scopeId) => {
if (_push2) {
if (!_ctx.specifyId) {
_push2(`<!--[-->`);
ssrRenderList(unref(mediaStore).users, (story, i) => {
_push2(ssrRenderComponent(unref(SwiperSlide), {
key: i,
class: "self-center"
}, {
default: withCtx((_2, _push3, _parent3, _scopeId2) => {
var _a3;
var _a22, _b2;
if (_push3) {
_push3(`<img${ssrRenderAttrs(_temp1 = mergeProps({
alt: unref(reactiveProjectName),
class: "w-full bg-black select-none pointer-events-none",
key: i,
draggable: "false"
}, ssrGetDirectiveProps(_ctx, _directive_lazy, { src: unref(getSupabaseStorageUrl)((_a22 = story.stories[playingSlide.value]) == null ? void 0 : _a22.url), loading: unref(img_gif), error: unref(img_gif) })))}${_scopeId2}>${"textContent" in _temp1 ? ssrInterpolate(_temp1.textContent) : (_a3 = _temp1.innerHTML) != null ? _a3 : ""}`);
} else {
return [
withDirectives((openBlock(), createBlock("img", {
alt: unref(reactiveProjectName),
class: "w-full bg-black select-none pointer-events-none",
key: i,
onContextmenu: withModifiers(() => {
}, ["prevent"]),
draggable: "false"
}, null, 40, ["alt", "onContextmenu"])), [
[_directive_lazy, { src: unref(getSupabaseStorageUrl)((_b2 = story.stories[playingSlide.value]) == null ? void 0 : _b2.url), loading: unref(img_gif), error: unref(img_gif) }]
])
];
}
}),
_: 2
}, _parent2, _scopeId));
});
_push2(`<!--]-->`);
} else {
_push2(ssrRenderComponent(unref(SwiperSlide), { class: "self-center" }, {
default: withCtx((_2, _push3, _parent3, _scopeId2) => {
var _a3;
var _a22, _b2;
if (_push3) {
_push3(`<img${ssrRenderAttrs(_temp2 = mergeProps({
alt: unref(reactiveProjectName),
class: "w-full bg-black select-none pointer-events-none",
key: _ctx.i
}, ssrGetDirectiveProps(_ctx, _directive_lazy, { src: unref(getSupabaseStorageUrl)((_a22 = userStory.value.stories[playingSlide.value]) == null ? void 0 : _a22.url), loading: unref(img_gif), error: unref(img_gif) })))}${_scopeId2}>${"textContent" in _temp2 ? ssrInterpolate(_temp2.textContent) : (_a3 = _temp2.innerHTML) != null ? _a3 : ""}`);
} else {
return [
withDirectives((openBlock(), createBlock("img", {
alt: unref(reactiveProjectName),
class: "w-full bg-black select-none pointer-events-none",
key: _ctx.i
}, null, 8, ["alt"])), [
[_directive_lazy, { src: unref(getSupabaseStorageUrl)((_b2 = userStory.value.stories[playingSlide.value]) == null ? void 0 : _b2.url), loading: unref(img_gif), error: unref(img_gif) }]
])
];
}
}),
_: 1
}, _parent2, _scopeId));
}
} else {
return [
!_ctx.specifyId ? (openBlock(true), createBlock(Fragment, { key: 0 }, renderList(unref(mediaStore).users, (story, i) => {
return openBlock(), createBlock(unref(SwiperSlide), {
key: i,
class: "self-center"
}, {
default: withCtx(() => {
var _a22;
return [
withDirectives((openBlock(), createBlock("img", {
alt: unref(reactiveProjectName),
class: "w-full bg-black select-none pointer-events-none",
key: i,
onContextmenu: withModifiers(() => {
}, ["prevent"]),
draggable: "false"
}, null, 40, ["alt", "onContextmenu"])), [
[_directive_lazy, { src: unref(getSupabaseStorageUrl)((_a22 = story.stories[playingSlide.value]) == null ? void 0 : _a22.url), loading: unref(img_gif), error: unref(img_gif) }]
])
];
}),
_: 2
}, 1024);
}), 128)) : (openBlock(), createBlock(unref(SwiperSlide), {
key: 1,
class: "self-center"
}, {
default: withCtx(() => {
var _a22;
return [
withDirectives((openBlock(), createBlock("img", {
alt: unref(reactiveProjectName),
class: "w-full bg-black select-none pointer-events-none",
key: _ctx.i
}, null, 8, ["alt"])), [
[_directive_lazy, { src: unref(getSupabaseStorageUrl)((_a22 = userStory.value.stories[playingSlide.value]) == null ? void 0 : _a22.url), loading: unref(img_gif), error: unref(img_gif) }]
])
];
}),
_: 1
}))
];
}
}),
_: 1
}, _parent));
_push(`</div></div></div>`);
};
}
});
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/FullScreenStories.vue");
return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
};
export { CustomProgressBar as C, _sfc_main as _, _imports_0 as a, img_gif as i, setInterval as s };
//# sourceMappingURL=FullScreenStories-BJPLTwoO.mjs.map