danak/dlearn-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

publication v-1

Browse Source
This commit is contained in:
HAM!DREZA
2024-07-03 14:34:21 +03:30
parent d2f71b6b14
commit 1518075cc6
21 changed files with 247 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/product-page/Attended-course.vue
+103 -70
View File
@@ -45,19 +45,20 @@
<h1>{{ activeHead?.description }}</h1>
<p
@click="nextHandler(item)"
class="hidden animate-bounce next text-[0.75vw] cursor-pointer flex items-center gap-[0.3vw] pe-[1vw]"
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-[0.8vw] rotate-180"
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"
@@ -113,45 +114,47 @@
</clipPath>
</defs>
</svg>
<a :href="url" class="h-[5.641vw] w-[5.641vw]">
<svg
<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>
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>
@@ -273,9 +276,8 @@
</div>
<div
v-for="item in activeHead.Comment"
v-show="item.status === 'Active'"
: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]"
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"
@@ -295,9 +297,9 @@
<p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
{{ item.user.name ? item.user.name : "کاربر مهمان" }}
</p>
<div class="thin">
<div class="thin mt-[4vw] md:mt-0">
<p class="text-[2.836vw] md:text-[0.741vw] text-[#878787]">
{{ jDate(item.createdAt) }}
</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]"
@@ -307,7 +309,7 @@
</div>
</div>
<svg
<!-- <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"
@@ -329,7 +331,7 @@
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</svg> -->
</div>
<div
class="bg-[#F8F8F8] p-[4vw] md:p-[1vw] rounded-[3.846vw] md:rounded-[0.781vw] mt-[6vw] md:mt-[2vw]"
@@ -337,8 +339,8 @@
<div class="space-y-[5vw] md:space-y-[1vw]">
<div class="flex gap-[1vw]">
<img
v-if="authUser.avatarMedia"
:src="authUser.avatarMedia"
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%]"
/>
@@ -352,7 +354,7 @@
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?.name ? authUser.name : "کاربر مهمان" }}
{{ authUser?.user.name ? authUser.user.name : "کاربر مهمان" }}
</p>
<p class="text-[2.836vw] md:text-[0.741vw] text-[#878787]">
پرسش جدید
@@ -474,6 +476,14 @@
</template>
<script setup>
watchEffect(() =>{
if (process.client) {
window.scrollTo({
top: 0,
});
}
})
import { useToast } from "vue-toastification";
const route = useRoute();
const router = useRouter();
@@ -485,21 +495,45 @@ const toast = useToast();
const comment = ref(null);
const index = ref(0);
query.value = route.query;
const { authUser } = useAuth();
const { data: progress, refresh: reload } = await useFetch("/api/progress", {
method: "POST",
body: {
id: route.params.product,
userId: authUser.value.id,
},
});
const activeClass = ref(progress.value.completionPercentage);
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;
@@ -513,19 +547,13 @@ function convertStoMs(seconds) {
);
}
async function addToProgress() {
await $fetch("/api/progressCounter", {
method: "POST",
body: {
id: route.query.episode,
},
});
}
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");
}
@@ -596,6 +624,10 @@ if (query.value.hasOwnProperty("episode")) {
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;
@@ -615,6 +647,7 @@ async function chengeVideo(item) {
}
async function nextHandler() {
addToProgress();
if (process.client) {
document.querySelector(".next").classList.add("hidden");
}
@@ -627,7 +660,7 @@ async function nextHandler() {
// id: route.query.episode,
// },
// });
addToProgress();
activeHead.value = data.value[index.value];
const getUrl = await useFetch("/api/checkMedia", {
query: {
@@ -636,7 +669,7 @@ async function nextHandler() {
});
url.value = getUrl.data.value.url;
video.value.load();
activeClass.value = progress.value.completionPercentage;
// activeClass.value = progress.value.completionPercentage;
refresh();
reload();
router.push({