HAM!DREZA
701 lines
26 KiB
Vue
701 lines
26 KiB
Vue
<template>
|
|
<div class="flex items-center flex-col pb-[25vw] md:pb-[6vw]">
|
|
<div
|
|
class="flex flex-col flex-col-reverse md:flex-row justify-between w-[87.69%] md:w-[81.04%] mt-[8.2vw]"
|
|
>
|
|
<div
|
|
class="w-full md:w-[56.354vw] text-[#383E43] text-[1.055vw] leading-[1.582vw]"
|
|
>
|
|
<!-- video -->
|
|
<div
|
|
class="absolute top-[5vw] md:top-0 right-0 px-[3vw] md:px-0 md:relative"
|
|
>
|
|
<div class="flex items-center gap-[3vw] md:gap-[0.7vw]">
|
|
<svg
|
|
class="w-[1.538vw] md:w-[0.521vw] h-[8.462vw] md:h-[2.76vw]"
|
|
viewBox="0 0 10 53"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M0 5C0 2.23858 2.23858 0 5 0H10V53H5C2.23858 53 0 50.7614 0 48V5Z"
|
|
fill="#0D3F40"
|
|
/>
|
|
</svg>
|
|
<h1
|
|
class="text-[4.544vw] md:text-[1.69vw] text-[#383E43] font-bold -tracking-[0.05vw]"
|
|
>
|
|
{{ activeHead?.headline }}
|
|
</h1>
|
|
</div>
|
|
|
|
<video
|
|
@ended="handleVideoEnded"
|
|
id="myVideo"
|
|
ref="video"
|
|
controls
|
|
class="mt-[4vw] md:mt-[1.8vw] w-full"
|
|
>
|
|
<source :src="url" type="video/mp4" />
|
|
</video>
|
|
<div
|
|
class="relative flex items-center text-[4.038vw] md:text-[1.502vw] mt-[6vw] md:mt-[1.6vw] font-semibold"
|
|
>
|
|
<div class="w-full flex justify-between">
|
|
<h1>{{ activeHead?.description }}</h1>
|
|
<p
|
|
@click="nextHandler(item)"
|
|
class="hidden animate-bounce next text-[2.5vw] absolute md:top-0 left-0 top-[7vw] md:text-[0.75vw] cursor-pointer flex items-center gap-[0.3vw] md:pe-[1vw]"
|
|
>
|
|
مشاهده قسمت بعد
|
|
<img
|
|
src="/public/images/next-svgrepo-com.svg"
|
|
alt=""
|
|
class="h-[3vw] md:h-[0.8vw] rotate-180"
|
|
/>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="absolute gap-[2vw] flex md:hidden left-0">
|
|
<svg
|
|
@click="copyUrl"
|
|
class="h-[5.641vw] w-[5.641vw]"
|
|
viewBox="0 0 24 22"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<g clip-path="url(#clip0_1_6600)">
|
|
<path
|
|
d="M16.96 5.65576C18.96 6.92993 20.34 8.95576 20.62 11.2933"
|
|
stroke="#878787"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M3.48999 11.3392C3.74999 9.01083 5.10999 6.98499 7.08999 5.70166"
|
|
stroke="#878787"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M8.19 19.1951C9.35 19.7359 10.67 20.0384 12.06 20.0384C13.4 20.0384 14.66 19.7634 15.79 19.2592"
|
|
stroke="#878787"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M12.06 7.05834C13.5954 7.05834 14.84 5.91741 14.84 4.51C14.84 3.1026 13.5954 1.96167 12.06 1.96167C10.5247 1.96167 9.28003 3.1026 9.28003 4.51C9.28003 5.91741 10.5247 7.05834 12.06 7.05834Z"
|
|
stroke="#878787"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M4.82999 18.26C6.36534 18.26 7.60999 17.1191 7.60999 15.7117C7.60999 14.3043 6.36534 13.1633 4.82999 13.1633C3.29464 13.1633 2.04999 14.3043 2.04999 15.7117C2.04999 17.1191 3.29464 18.26 4.82999 18.26Z"
|
|
stroke="#878787"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M19.17 18.26C20.7054 18.26 21.95 17.1191 21.95 15.7117C21.95 14.3043 20.7054 13.1633 19.17 13.1633C17.6347 13.1633 16.39 14.3043 16.39 15.7117C16.39 17.1191 17.6347 18.26 19.17 18.26Z"
|
|
stroke="#878787"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0_1_6600">
|
|
<rect width="24" height="22" fill="white" />
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
<a :href="url" class="h-[5.641vw] w-[5.641vw]">
|
|
<svg
|
|
|
|
class="h-[5.641vw] w-[5.641vw]"
|
|
viewBox="0 0 22 22"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<g clip-path="url(#clip0_1_6599)">
|
|
<path
|
|
d="M8.54333 10.7068L10.89 13.0535L13.2367 10.7068"
|
|
stroke="#383E43"
|
|
stroke-width="1.5"
|
|
stroke-miterlimit="10"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M10.89 3.66675V12.9892"
|
|
stroke="#383E43"
|
|
stroke-width="1.5"
|
|
stroke-miterlimit="10"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M18.3334 11.165C18.3334 15.2167 15.5834 18.4984 11 18.4984C6.41669 18.4984 3.66669 15.2167 3.66669 11.165"
|
|
stroke="#383E43"
|
|
stroke-width="1.5"
|
|
stroke-miterlimit="10"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0_1_6599">
|
|
<rect width="22" height="22" fill="white" />
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- downloadBox -->
|
|
<div class="hidden md:flex justify-between items-center mt-[3.3vw]">
|
|
<a
|
|
:href="url"
|
|
class="greenButton flexBox p-0 w-[8.177vw] h-[2.656vw] rounded-[0.521vw] text-[0.938vw]"
|
|
>
|
|
دانلود
|
|
<svg
|
|
class="w-[1.25vw] h-[1.302vw]"
|
|
viewBox="0 0 24 25"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M9.32007 12.18L11.8801 14.74L14.4401 12.18"
|
|
stroke="white"
|
|
stroke-width="1.5"
|
|
stroke-miterlimit="10"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M11.8799 4.5V14.67"
|
|
stroke="white"
|
|
stroke-width="1.5"
|
|
stroke-miterlimit="10"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M20 12.68C20 17.1 17 20.68 12 20.68C7 20.68 4 17.1 4 12.68"
|
|
stroke="white"
|
|
stroke-width="1.5"
|
|
stroke-miterlimit="10"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
<div class="flexBox text-[#878787] text-[0.833vw] gap-[1vw]">
|
|
<span>اشتراک گذاری :</span>
|
|
<a href="https://telegram.me/share/url?url=<url>&text=<TEXT>">
|
|
<svg
|
|
class="w-[1.25vw] h-[1.042vw]"
|
|
viewBox="0 0 24 20"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M1.64987 8.56244C8.09231 5.75558 12.3883 3.90512 14.5378 3.01107C20.675 0.45837 21.9503 0.0149404 22.7815 0.000141954C22.9643 -0.00292234 23.3731 0.0423843 23.6379 0.257234C23.8614 0.438648 23.9229 0.683713 23.9524 0.855714C23.9818 1.02771 24.0185 1.41954 23.9893 1.7257C23.6567 5.22014 22.2177 13.7002 21.4856 17.6141C21.1758 19.2702 20.5658 19.8254 19.9753 19.8798C18.6919 19.9979 17.7174 19.0317 16.4744 18.2169C14.5294 16.9419 13.4305 16.1482 11.5425 14.904C9.36064 13.4662 10.7751 12.6759 12.0185 11.3844C12.344 11.0464 17.9985 5.90319 18.1079 5.43662C18.1216 5.37827 18.1343 5.16076 18.0051 5.04591C17.8759 4.93105 17.6851 4.97033 17.5475 5.00156C17.3524 5.04584 14.2452 7.0996 8.22584 11.1628C7.34386 11.7685 6.54499 12.0636 5.82924 12.0481C5.04017 12.0311 3.52233 11.602 2.39397 11.2352C1.00999 10.7853 -0.0899675 10.5474 0.00581422 9.7834C0.0557033 9.38545 0.603724 8.97846 1.64987 8.56244Z"
|
|
fill="#878787"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
<a href="https://twitter.com/share?text=<text>&url=<url>">
|
|
<svg
|
|
class="h-[1.25vw] w-[1.25vw]"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M12 2.16867C15.1807 2.16867 15.6145 2.16867 16.9157 2.16867C18.0723 2.16867 18.6506 2.45783 19.0843 2.60241C19.6627 2.89157 20.0964 3.03615 20.5301 3.46988C20.9639 3.90362 21.253 4.33735 21.3976 4.91566C21.5422 5.3494 21.6867 5.92771 21.8313 7.08434C21.8313 8.38554 21.8313 8.6747 21.8313 12C21.8313 15.3253 21.8313 15.6145 21.8313 16.9157C21.8313 18.0723 21.5422 18.6506 21.3976 19.0843C21.1084 19.6627 20.9639 20.0964 20.5301 20.5301C20.0964 20.9639 19.6627 21.253 19.0843 21.3976C18.6506 21.5422 18.0723 21.6867 16.9157 21.8313C15.6145 21.8313 15.3253 21.8313 12 21.8313C8.6747 21.8313 8.38554 21.8313 7.08434 21.8313C5.92771 21.8313 5.3494 21.5422 4.91566 21.3976C4.33735 21.1084 3.90362 20.9639 3.46988 20.5301C3.03615 20.0964 2.74699 19.6627 2.60241 19.0843C2.45783 18.6506 2.31325 18.0723 2.16867 16.9157C2.16867 15.6145 2.16867 15.3253 2.16867 12C2.16867 8.6747 2.16867 8.38554 2.16867 7.08434C2.16867 5.92771 2.45783 5.3494 2.60241 4.91566C2.89157 4.33735 3.03615 3.90362 3.46988 3.46988C3.90362 3.03615 4.33735 2.74699 4.91566 2.60241C5.3494 2.45783 5.92771 2.31325 7.08434 2.16867C8.38554 2.16867 8.81928 2.16867 12 2.16867ZM12 0C8.6747 0 8.38554 0 7.08434 0C5.78313 0 4.91566 0.289157 4.19277 0.578314C3.46988 0.867471 2.74699 1.30121 2.0241 2.0241C1.30121 2.74699 1.01205 3.3253 0.578314 4.19277C0.289157 4.91566 0.144578 5.78313 0 7.08434C0 8.38554 0 8.81928 0 12C0 15.3253 0 15.6145 0 16.9157C0 18.2169 0.289157 19.0843 0.578314 19.8072C0.867471 20.5301 1.30121 21.253 2.0241 21.9759C2.74699 22.6988 3.3253 22.988 4.19277 23.4217C4.91566 23.7108 5.78313 23.8554 7.08434 24C8.38554 24 8.81928 24 12 24C15.1807 24 15.6145 24 16.9157 24C18.2169 24 19.0843 23.7108 19.8072 23.4217C20.5301 23.1325 21.253 22.6988 21.9759 21.9759C22.6988 21.253 22.988 20.6747 23.4217 19.8072C23.7108 19.0843 23.8554 18.2169 24 16.9157C24 15.6145 24 15.1807 24 12C24 8.81928 24 8.38554 24 7.08434C24 5.78313 23.7108 4.91566 23.4217 4.19277C23.1325 3.46988 22.6988 2.74699 21.9759 2.0241C21.253 1.30121 20.6747 1.01205 19.8072 0.578314C19.0843 0.289157 18.2169 0.144578 16.9157 0C15.6145 0 15.3253 0 12 0Z"
|
|
fill="#878787"
|
|
/>
|
|
<path
|
|
d="M12 5.78313C8.53012 5.78313 5.78313 8.53012 5.78313 12C5.78313 15.4699 8.53012 18.2169 12 18.2169C15.4699 18.2169 18.2169 15.4699 18.2169 12C18.2169 8.53012 15.4699 5.78313 12 5.78313ZM12 16.0482C9.83133 16.0482 7.95181 14.3133 7.95181 12C7.95181 9.83133 9.68675 7.95181 12 7.95181C14.1687 7.95181 16.0482 9.68675 16.0482 12C16.0482 14.1687 14.1687 16.0482 12 16.0482Z"
|
|
fill="#878787"
|
|
/>
|
|
<path
|
|
d="M18.3614 7.08434C19.1599 7.08434 19.8072 6.43704 19.8072 5.63856C19.8072 4.84007 19.1599 4.19277 18.3614 4.19277C17.563 4.19277 16.9157 4.84007 16.9157 5.63856C16.9157 6.43704 17.563 7.08434 18.3614 7.08434Z"
|
|
fill="#878787"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
|
|
<svg
|
|
@click="copyUrl"
|
|
class="cursor-pointer h-[1.25vw] w-[1.25vw]"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M16 12.9V17.1C16 20.6 14.6 22 11.1 22H6.9C3.4 22 2 20.6 2 17.1V12.9C2 9.4 3.4 8 6.9 8H11.1C14.6 8 16 9.4 16 12.9Z"
|
|
fill="#878787"
|
|
/>
|
|
<path
|
|
d="M17.1 2H12.9C9.81693 2 8.37099 3.09409 8.06975 5.73901C8.00673 6.29235 8.465 6.75 9.02191 6.75H11.1C15.3 6.75 17.25 8.7 17.25 12.9V14.9781C17.25 15.535 17.7077 15.9933 18.261 15.9303C20.9059 15.629 22 14.1831 22 11.1V6.9C22 3.4 20.6 2 17.1 2Z"
|
|
fill="#878787"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- comments -->
|
|
|
|
<div
|
|
class="flex items-center gap-[3vw] md:gap-[0.7vw] mt-[15vw] md:mt-[7vw]"
|
|
>
|
|
<svg
|
|
class="w-[1.538vw] md:w-[0.521vw] h-[8.462vw] md:h-[2.76vw]"
|
|
viewBox="0 0 10 53"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M0 5C0 2.23858 2.23858 0 5 0H10V53H5C2.23858 53 0 50.7614 0 48V5Z"
|
|
fill="#0D3F40"
|
|
/>
|
|
</svg>
|
|
<span class="text-[4.544vw] md:text-[1.481vw] font-semibold"
|
|
>پرسش و پاسخ</span
|
|
>
|
|
</div>
|
|
<div
|
|
v-for="item in activeHead?.Comment"
|
|
:key="item?.id"
|
|
class="mt-[1vw] relative bg-[#F8F8F8] rounded-[3.846vw] md:rounded-[0.781vw] flex justify-between p-[4vw] md:p-[1.55vw]"
|
|
>
|
|
<img
|
|
v-if="item?.user?.avatarMedia"
|
|
:src="item?.user?.avatarMedia"
|
|
alt="profile"
|
|
class="w-[10.256vw] md:w-[3.958vw] h-[10.256vw] md:h-[3.958vw] rounded-[50%]"
|
|
/>
|
|
|
|
<img
|
|
v-else
|
|
src="/public/images/alt.png"
|
|
alt="profile"
|
|
class="w-[10.256vw] md:w-[3.958vw] h-[10.256vw] md:h-[3.958vw] rounded-[50%]"
|
|
/>
|
|
|
|
<div class="ps-[3vw] md:ps-[1vw] w-full">
|
|
<p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
|
|
{{ item?.user?.name ? item?.user?.name : "کاربر مهمان" }}
|
|
</p>
|
|
<div class="thin mt-[4vw] md:mt-0">
|
|
<p class="text-[2.836vw] md:text-[0.741vw] text-[#878787]">
|
|
|
|
</p>
|
|
<p
|
|
class="w-[98%] text-[3.19vw] md:text-[0.833vw] text-[#383E43] leading-[4.785vw] md:leading-[1.25vw] mt-[2vw] md:mt-[0.5vw]"
|
|
>
|
|
{{ item?.text }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <svg
|
|
@click="reply(item.id)"
|
|
class="cursor-pointer absolute md:left-[2vw] left-[5vw] h-[4.615vw] w-[4.615vw] md:h-[1.25vw] md:w-[1.25vw]"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M7.12988 18.3101H15.1299C17.8899 18.3101 20.1299 16.0701 20.1299 13.3101C20.1299 10.5501 17.8899 8.31006 15.1299 8.31006H4.12988"
|
|
stroke="#383E43"
|
|
stroke-width="1.5"
|
|
stroke-miterlimit="10"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M6.43012 10.8099L3.87012 8.24994L6.43012 5.68994"
|
|
stroke="#383E43"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg> -->
|
|
</div>
|
|
<div
|
|
class="bg-[#F8F8F8] p-[4vw] md:p-[1vw] rounded-[3.846vw] md:rounded-[0.781vw] mt-[6vw] md:mt-[2vw]"
|
|
>
|
|
<div class="space-y-[5vw] md:space-y-[1vw]">
|
|
<div class="flex gap-[1vw]">
|
|
<img
|
|
v-if="authUser?.user?.avatarMedia"
|
|
:src="authUser?.user?.avatarMedia"
|
|
alt=""
|
|
class="h-[10.256vw0] md:h-[3.385vw] w-[10.256vw] md:w-[3.385vw] rounded-[50%]"
|
|
/>
|
|
<img
|
|
v-else
|
|
src="/public/images/alt.png"
|
|
alt=""
|
|
class="h-[10.256vw0] md:h-[3.385vw] w-[10.256vw] md:w-[3.385vw] rounded-[50%]"
|
|
/>
|
|
<div
|
|
class="space-y-[4vw] mt-[1vw] md:mt-0 ms-[1vw] md:ms-0 md:space-y-0"
|
|
>
|
|
<p class="text-[3.59vw] md:text-[0.938vw]">
|
|
{{ authUser?.user?.name ? authUser?.user?.name : "کاربر مهمان" }}
|
|
</p>
|
|
<p class="text-[2.836vw] md:text-[0.741vw] text-[#878787]">
|
|
پرسش جدید
|
|
</p>
|
|
{{ replyId }}
|
|
</div>
|
|
</div>
|
|
<textarea
|
|
v-model="comment"
|
|
class="h-[50vw] md:h-[18vw] w-full rounded-[3.846vw] md:rounded-[0.781vw] p-[1vw]"
|
|
name=""
|
|
id=""
|
|
cols="30"
|
|
rows="10"
|
|
></textarea>
|
|
<div
|
|
class="flex justify-end gap-[1vw] text-[3.19vw] md:text-[0.833vw] text-white"
|
|
>
|
|
<button
|
|
@click="replyId = null"
|
|
class="h-[8.974vw] md:h-[2.292vw] w-[20.769vw] md:w-[5.573vw] rounded-[2.051vw] md:rounded-[0.521vw] bg-[#5A6268]"
|
|
>
|
|
حذف
|
|
</button>
|
|
<button
|
|
@click="sendComment"
|
|
class="h-[8.974vw] md:h-[2.292vw] w-[20.769vw] md:w-[5.573vw] rounded-[2.051vw] md:rounded-[0.521vw] bg-primaryGreen"
|
|
>
|
|
ثبت
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full md:w-[23.438vw]">
|
|
<!-- headlines -->
|
|
<div
|
|
class="mt-[82vw] md:mt-[4.6vw] min-h-[87.692vw] md:min-h-[29.635vw] rounded-[3.846vw] md:rounded-[0.781vw] bg-[#F8F8F8] pinkShadow space-y-[2vw] thin"
|
|
>
|
|
<div class="flexBox w-full flex-col text-[0.938vw] text-[#878787]">
|
|
<label
|
|
v-for="item in data"
|
|
:key="item.id"
|
|
class="cursor-pointer text-[#383E43] h-[14.615vw] md:h-[3.125vw] px-[3vw] md:px-[1.25vw] text-[3.59vw] md:text-[0.833vw] w-full flex justify-between"
|
|
>
|
|
<div class="flexBox gap-[1vw] md:gap-[0.3vw]">
|
|
<input
|
|
type="radio"
|
|
@click="chengeVideo(item)"
|
|
:checked="item?.headline === activeHead?.headline"
|
|
class="accent-primaryGreen"
|
|
/>
|
|
{{ item?.headline }}
|
|
</div>
|
|
<div class="flexBox gap-[1vw] md:gap-[0.3vw]">
|
|
{{ convertStoMs(item?.time) }}
|
|
<svg
|
|
class="h-[4.359vw] w-[4.359vw] md:h-[0.99vw] md:w-[0.99vw]"
|
|
viewBox="0 0 19 20"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<g clip-path="url(#clip0_1_896)">
|
|
<path
|
|
d="M17.4166 10C17.4166 14.37 13.8699 17.9167 9.49992 17.9167C5.12992 17.9167 1.58325 14.37 1.58325 10C1.58325 5.63001 5.12992 2.08334 9.49992 2.08334C13.8699 2.08334 17.4166 5.63001 17.4166 10Z"
|
|
stroke="#383E43"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M12.437 12.5175L9.98286 11.0529C9.55536 10.7996 9.20703 10.19 9.20703 9.69124V6.4454"
|
|
stroke="#383E43"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0_1_896">
|
|
<rect
|
|
width="19"
|
|
height="19"
|
|
fill="white"
|
|
transform="translate(0 0.5)"
|
|
/>
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<!-- <product-page-attended-coursesProgress-bar /> -->
|
|
|
|
<div
|
|
class="mt-[5vw] rounded-[3.846vw] md:rounded-[0.781vw] bg-[#F8F8F8] pinkShadow p-[4vw] md:p-[1vw] space-y-[6vw] md:space-y-[2vw] md:mt-[1vw] text-[#383E43]"
|
|
>
|
|
<div
|
|
class="flex justify-between text-[3.19vw] md:text-[0.833vw] font-semibold text-[#383E43]"
|
|
>
|
|
<span class="text-[3.59vw] md:text-[0.938vw]">پیشرفت شما</span>
|
|
<span>{{ Math.floor(progress?.completionPercentage) }}%</span>
|
|
</div>
|
|
<div
|
|
id="progressbar"
|
|
class="test mt-[3vw] md:mt-[0.7vw] h-[2.051vw] md:h-[0.521vw] rounded-[2vw] md:rounded-[0.521vw]"
|
|
>
|
|
<div
|
|
:style="{ width: activeClass + '%' }"
|
|
class="bg-[#0d3f40] float-end prog rounded-[2vw] md:rounded-[0.521vw] h-[2.051vw] md:h-[0.521vw]"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
watchEffect(() =>{
|
|
if (process.client) {
|
|
window.scrollTo({
|
|
top: 0,
|
|
});
|
|
}
|
|
|
|
})
|
|
import { useToast } from "vue-toastification";
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const activeHead = ref(null);
|
|
const video = ref(null);
|
|
const url = ref(null);
|
|
const query = ref({});
|
|
const toast = useToast();
|
|
const comment = ref(null);
|
|
const index = ref(0);
|
|
query.value = route.query;
|
|
const episodeId = ref(null)
|
|
const { data, refresh } = await useFetch("/api/courseHeadlines", {
|
|
query: {
|
|
id: route.params.product,
|
|
},
|
|
});
|
|
const { authUser } = useAuth();
|
|
async function addToProgress() {
|
|
await $fetch("/api/progressCounter", {
|
|
method: "POST",
|
|
body: {
|
|
id: episodeId.value,
|
|
},
|
|
});
|
|
}
|
|
watchEffect(() =>{
|
|
if (route.query.episode === undefined) {
|
|
episodeId.value = data.value[0].id
|
|
}else{
|
|
episodeId.value = route.query.episode
|
|
}
|
|
|
|
})
|
|
|
|
console.log('route', episodeId.value);
|
|
console.log(data.value[0].id);
|
|
const { data: progress, refresh: reload } = await useFetch("/api/progress", {
|
|
query: {
|
|
id: route.params.product,
|
|
userId: authUser.value.user.id,
|
|
},
|
|
});
|
|
|
|
|
|
const activeClass = ref(progress.value.completionPercentage);
|
|
watchEffect(()=>{
|
|
activeClass.value = progress.value.completionPercentage;
|
|
})
|
|
|
|
function convertStoMs(seconds) {
|
|
let minutes = Math.floor(seconds / 60);
|
|
let extraSeconds = seconds % 60;
|
|
minutes = minutes < 10 ? "0" + minutes : minutes;
|
|
return (
|
|
minutes +
|
|
":" +
|
|
(extraSeconds < 10
|
|
? "0" + Math.floor(extraSeconds)
|
|
: Math.floor(extraSeconds))
|
|
);
|
|
}
|
|
|
|
import progressAlert from "@/components/progressAlert.vue";
|
|
const handleVideoEnded = async () => {
|
|
activeClass.value = progress.value.completionPercentage;
|
|
addToProgress();
|
|
reload();
|
|
refresh();
|
|
|
|
if (process.client) {
|
|
document.querySelector(".next").classList.remove("hidden");
|
|
}
|
|
toast.success("ویدیو به پایان رسید");
|
|
};
|
|
|
|
const sendComment = async () => {
|
|
if (comment.value === "" || comment.value === null) {
|
|
return toast.error("متن خود را وارد کنید");
|
|
}
|
|
if (replyId.value === null) {
|
|
const commentss = await $fetch("/api/comments/courseHeadline", {
|
|
method: "POST",
|
|
body: {
|
|
id: activeHead.value.id,
|
|
text: comment.value,
|
|
},
|
|
});
|
|
refresh();
|
|
toast.success("نظر شما با موفقیت ثبت شد");
|
|
comment.value = "";
|
|
} else {
|
|
await $fetch("/api/comments/courseHeadlineReply", {
|
|
method: "POST",
|
|
body: {
|
|
id: replyId,
|
|
text: comment.value,
|
|
},
|
|
});
|
|
refresh();
|
|
toast.success("نظر شما با موفقیت ثبت شد");
|
|
comment.value = "";
|
|
}
|
|
};
|
|
|
|
const replyId = ref(null);
|
|
const reply = async (id) => {
|
|
replyId.value = id;
|
|
};
|
|
|
|
function copyUrl() {
|
|
navigator.clipboard.writeText(window.location.href);
|
|
toast.success("آدرس صفحه کپی شد");
|
|
}
|
|
|
|
if (query.value.hasOwnProperty("episode")) {
|
|
const fimd = data.value.find((items) => items.id === query.value.episode);
|
|
activeHead.value = fimd;
|
|
const getUrl = await useFetch("/api/checkMedia", {
|
|
query: {
|
|
fileName: fimd.videoUrl,
|
|
},
|
|
});
|
|
url.value = getUrl.data.value.url;
|
|
index.value = data.value.indexOf(fimd);
|
|
refresh();
|
|
} else {
|
|
activeHead.value = data.value[0];
|
|
const getUrl = await useFetch("/api/checkMedia", {
|
|
query: {
|
|
fileName: data.value[0].videoUrl,
|
|
},
|
|
});
|
|
url.value = getUrl.data.value.url;
|
|
index.value = 0;
|
|
}
|
|
|
|
async function chengeVideo(item) {
|
|
if (process.client) {
|
|
document.querySelector(".next").classList.add("hidden");
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: "smooth",
|
|
});
|
|
}
|
|
query.value = { ...route.query, episode: item.id };
|
|
activeHead.value = item;
|
|
const getUrl = await useFetch("/api/checkMedia", {
|
|
query: {
|
|
fileName: item.videoUrl,
|
|
},
|
|
});
|
|
url.value = getUrl.data.value.url;
|
|
index.value = data.value.indexOf(item);
|
|
video.value.load();
|
|
router.push({
|
|
query: query.value,
|
|
});
|
|
|
|
await refresh();
|
|
}
|
|
|
|
async function nextHandler() {
|
|
addToProgress();
|
|
if (process.client) {
|
|
document.querySelector(".next").classList.add("hidden");
|
|
}
|
|
query.value = { ...route.query, episode: data.value[index.value + 1].id };
|
|
index.value = index.value + 1;
|
|
|
|
// const addToProgress = await $fetch("/api/progressCounter", {
|
|
// method: "POST",
|
|
// body: {
|
|
// id: route.query.episode,
|
|
// },
|
|
// });
|
|
|
|
activeHead.value = data.value[index.value];
|
|
const getUrl = await useFetch("/api/checkMedia", {
|
|
query: {
|
|
fileName: data.value[index.value].videoUrl,
|
|
},
|
|
});
|
|
url.value = getUrl.data.value.url;
|
|
video.value.load();
|
|
// activeClass.value = progress.value.completionPercentage;
|
|
refresh();
|
|
reload();
|
|
router.push({
|
|
query: query.value,
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
video {
|
|
border-radius: 0.781vw;
|
|
}
|
|
@media (max-width: 768px) {
|
|
video {
|
|
border-radius: 3.846vw;
|
|
}
|
|
}
|
|
#progressbar {
|
|
background-color: #e5e5e5;
|
|
|
|
width: 100%;
|
|
}
|
|
#progressbar > div {
|
|
background-color: #0d3f40;
|
|
float: left I !important;
|
|
|
|
left: 0;
|
|
}
|
|
</style> |