fix discount bug + font dif on lesson page
This commit is contained in:
Rotimi Best
+2
-2
@@ -16,7 +16,7 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if !isNoteEmpty($lesson.materials?.note)}
|
{#if !isNoteEmpty($lesson.materials?.note)}
|
||||||
<article class="preview prose prose-sm sm:prose p-2">
|
<div>
|
||||||
{@html $lesson.materials.note}
|
{@html $lesson.materials.note}
|
||||||
</article>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
@@ -34,6 +34,7 @@
|
|||||||
import ComponentNote from './components/ComponentNote.svelte';
|
import ComponentNote from './components/ComponentNote.svelte';
|
||||||
import ComponentSlide from './components/ComponentSlide.svelte';
|
import ComponentSlide from './components/ComponentSlide.svelte';
|
||||||
import ComponentVideo from './components/ComponentVideo.svelte';
|
import ComponentVideo from './components/ComponentVideo.svelte';
|
||||||
|
import HtmlRender from '$lib/components/HTMLRender/HTMLRender.svelte';
|
||||||
|
|
||||||
export let mode = MODES.view;
|
export let mode = MODES.view;
|
||||||
export let prevMode = '';
|
export let prevMode = '';
|
||||||
@@ -234,144 +235,148 @@
|
|||||||
<VideoUploader {lessonId} />
|
<VideoUploader {lessonId} />
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|
||||||
<h1 class="text-4xl mt-0 capitalize">
|
<HtmlRender>
|
||||||
{lessonTitle}
|
<svelte:fragment slot="content">
|
||||||
</h1>
|
<h1 class="text-4xl mt-0 capitalize">
|
||||||
|
{lessonTitle}
|
||||||
|
</h1>
|
||||||
|
|
||||||
{#if mode === MODES.edit}
|
{#if mode === MODES.edit}
|
||||||
<Tabs {tabs} {currentTab} {onChange}>
|
<Tabs {tabs} {currentTab} {onChange}>
|
||||||
<slot:fragment slot="content">
|
<slot:fragment slot="content">
|
||||||
<TabContent value={getValue('Note')} index={currentTab}>
|
<TabContent value={getValue('Note')} index={currentTab}>
|
||||||
<div bind:this={aiButtonRef} class="w-full flex flex-row-reverse">
|
<div bind:this={aiButtonRef} class="w-full flex flex-row-reverse">
|
||||||
<PrimaryButton
|
<PrimaryButton
|
||||||
className="flex items-center relative"
|
className="flex items-center relative"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
openPopover = !openPopover;
|
openPopover = !openPopover;
|
||||||
}}
|
}}
|
||||||
isLoading={$isLoading}
|
isLoading={$isLoading}
|
||||||
isDisabled={$isLoading}
|
isDisabled={$isLoading}
|
||||||
variant={VARIANTS.OUTLINED}
|
variant={VARIANTS.OUTLINED}
|
||||||
>
|
>
|
||||||
<MagicWandFilled size={20} class="carbon-icon mr-3" />
|
<MagicWandFilled size={20} class="carbon-icon mr-3" />
|
||||||
AI
|
AI
|
||||||
<Popover
|
<Popover
|
||||||
caret
|
caret
|
||||||
align="left"
|
align="left"
|
||||||
bind:open={openPopover}
|
bind:open={openPopover}
|
||||||
on:click:outside={({ detail }) => {
|
on:click:outside={({ detail }) => {
|
||||||
openPopover = aiButtonRef?.contains(detail.target);
|
openPopover = aiButtonRef?.contains(detail.target);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div class="p-2">
|
<div class="p-2">
|
||||||
<button class={aiButtonClass} on:click={() => callAI('outline')}>
|
<button class={aiButtonClass} on:click={() => callAI('outline')}>
|
||||||
<ListIcon class="carbon-icon mr-2" />
|
<ListIcon class="carbon-icon mr-2" />
|
||||||
Generate Lesson Outline
|
Generate Lesson Outline
|
||||||
</button>
|
</button>
|
||||||
<button class={aiButtonClass} on:click={() => callAI('note')}>
|
<button class={aiButtonClass} on:click={() => callAI('note')}>
|
||||||
<AlignBoxTopLeftIcon class="carbon-icon mr-2" />
|
<AlignBoxTopLeftIcon class="carbon-icon mr-2" />
|
||||||
Generate Lesson Note
|
Generate Lesson Note
|
||||||
</button>
|
</button>
|
||||||
<button class={aiButtonClass} on:click={() => callAI('activities')}>
|
<button class={aiButtonClass} on:click={() => callAI('activities')}>
|
||||||
<IbmWatsonKnowledgeStudioIcon class="carbon-icon mr-2" />
|
<IbmWatsonKnowledgeStudioIcon class="carbon-icon mr-2" />
|
||||||
Generate Lesson Activities
|
Generate Lesson Activities
|
||||||
</button>
|
</button>
|
||||||
</div>
|
|
||||||
</Popover>
|
|
||||||
</PrimaryButton>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="h-[60vh] mt-5">
|
|
||||||
<TextEditor
|
|
||||||
id={lessonId}
|
|
||||||
bind:editorWindowRef
|
|
||||||
value={$lesson.materials.note}
|
|
||||||
onChange={(html) => ($lesson.materials.note = html)}
|
|
||||||
placeholder="Write your lesson note here"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</TabContent>
|
|
||||||
|
|
||||||
<TabContent value={getValue('Slide')} index={currentTab}>
|
|
||||||
{#if mode === MODES.edit}
|
|
||||||
<TextField
|
|
||||||
label="Slide link"
|
|
||||||
bind:value={$lesson.materials.slide_url}
|
|
||||||
onInputChange={handleInputChange}
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
</TabContent>
|
|
||||||
<TabContent value={getValue('Video')} index={currentTab}>
|
|
||||||
<PrimaryButton label="Add/Edit Video(s)" onClick={openAddVideoModal} className="mb-2" />
|
|
||||||
{#if $lesson.materials.videos.length}
|
|
||||||
<div class="flex flex-col items-start w-full h-full">
|
|
||||||
{#each $lesson.materials.videos as video, index}
|
|
||||||
{#if mode === MODES.edit}
|
|
||||||
<div class="ml-auto">
|
|
||||||
<IconButton
|
|
||||||
value="delete-video"
|
|
||||||
contained={true}
|
|
||||||
onClick={() => deleteLessonVideo(index)}
|
|
||||||
>
|
|
||||||
<TrashCanIcon size={20} class="carbon-icon dark:text-white" />
|
|
||||||
</IconButton>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
<div class="w-full h-full flex flex-col gap-2 overflow-hidden">
|
|
||||||
{#key video.link}
|
|
||||||
<div class="mb-5">
|
|
||||||
{#if video.type === 'youtube'}
|
|
||||||
<iframe
|
|
||||||
width="100%"
|
|
||||||
height="569"
|
|
||||||
class="iframe"
|
|
||||||
src={formatYoutubeVideo(video.link, errors)}
|
|
||||||
title="YouTube video player"
|
|
||||||
frameborder="0"
|
|
||||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
||||||
allowfullscreen
|
|
||||||
/>
|
|
||||||
{:else if video.metadata?.svid}
|
|
||||||
<div style="position:relative;padding-bottom:51.416579%">
|
|
||||||
<iframe
|
|
||||||
src="https://muse.ai/embed/{video.metadata
|
|
||||||
?.svid}?logo=https://app.classroomio.com/logo-512.png&subtitles=auto&cover_play_position=center"
|
|
||||||
style="width:100%;height:100%;position:absolute;left:0;top:0"
|
|
||||||
frameborder="0"
|
|
||||||
allowfullscreen
|
|
||||||
title="Muse AI Video Embed"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<video bind:this={player} class="plyr-video-trigger" playsinline controls>
|
|
||||||
<source src={video.link} type="video/mp4" />
|
|
||||||
<track kind="captions" />
|
|
||||||
</video>
|
|
||||||
{/if}
|
|
||||||
</div>
|
</div>
|
||||||
{/key}
|
</Popover>
|
||||||
|
</PrimaryButton>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="h-[60vh] mt-5">
|
||||||
|
<TextEditor
|
||||||
|
id={lessonId}
|
||||||
|
bind:editorWindowRef
|
||||||
|
value={$lesson.materials.note}
|
||||||
|
onChange={(html) => ($lesson.materials.note = html)}
|
||||||
|
placeholder="Write your lesson note here"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</TabContent>
|
||||||
|
|
||||||
|
<TabContent value={getValue('Slide')} index={currentTab}>
|
||||||
|
{#if mode === MODES.edit}
|
||||||
|
<TextField
|
||||||
|
label="Slide link"
|
||||||
|
bind:value={$lesson.materials.slide_url}
|
||||||
|
onInputChange={handleInputChange}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
</TabContent>
|
||||||
|
<TabContent value={getValue('Video')} index={currentTab}>
|
||||||
|
<PrimaryButton label="Add/Edit Video(s)" onClick={openAddVideoModal} className="mb-2" />
|
||||||
|
{#if $lesson.materials.videos.length}
|
||||||
|
<div class="flex flex-col items-start w-full h-full">
|
||||||
|
{#each $lesson.materials.videos as video, index}
|
||||||
|
{#if mode === MODES.edit}
|
||||||
|
<div class="ml-auto">
|
||||||
|
<IconButton
|
||||||
|
value="delete-video"
|
||||||
|
contained={true}
|
||||||
|
onClick={() => deleteLessonVideo(index)}
|
||||||
|
>
|
||||||
|
<TrashCanIcon size={20} class="carbon-icon dark:text-white" />
|
||||||
|
</IconButton>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
<div class="w-full h-full flex flex-col gap-2 overflow-hidden">
|
||||||
|
{#key video.link}
|
||||||
|
<div class="mb-5">
|
||||||
|
{#if video.type === 'youtube'}
|
||||||
|
<iframe
|
||||||
|
width="100%"
|
||||||
|
height="569"
|
||||||
|
class="iframe"
|
||||||
|
src={formatYoutubeVideo(video.link, errors)}
|
||||||
|
title="YouTube video player"
|
||||||
|
frameborder="0"
|
||||||
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||||
|
allowfullscreen
|
||||||
|
/>
|
||||||
|
{:else if video.metadata?.svid}
|
||||||
|
<div style="position:relative;padding-bottom:51.416579%">
|
||||||
|
<iframe
|
||||||
|
src="https://muse.ai/embed/{video.metadata
|
||||||
|
?.svid}?logo=https://app.classroomio.com/logo-512.png&subtitles=auto&cover_play_position=center"
|
||||||
|
style="width:100%;height:100%;position:absolute;left:0;top:0"
|
||||||
|
frameborder="0"
|
||||||
|
allowfullscreen
|
||||||
|
title="Muse AI Video Embed"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<video bind:this={player} class="plyr-video-trigger" playsinline controls>
|
||||||
|
<source src={video.link} type="video/mp4" />
|
||||||
|
<track kind="captions" />
|
||||||
|
</video>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/key}
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/if}
|
||||||
</div>
|
</TabContent>
|
||||||
{/if}
|
</slot:fragment>
|
||||||
</TabContent>
|
</Tabs>
|
||||||
</slot:fragment>
|
{:else if !isMaterialsEmpty($lesson.materials)}
|
||||||
</Tabs>
|
<div class="w-full">
|
||||||
{:else if !isMaterialsEmpty($lesson.materials)}
|
{#each componentsToRender as Component, index}
|
||||||
<div class="w-full">
|
<svelte:component this={Component} key={index} />
|
||||||
{#each componentsToRender as Component, index}
|
{/each}
|
||||||
<svelte:component this={Component} key={index} />
|
</div>
|
||||||
{/each}
|
{:else}
|
||||||
</div>
|
<Box className="text-center">
|
||||||
{:else}
|
<img src="/no-video.svg" alt="Video not found" />
|
||||||
<Box className="text-center">
|
<h3 class="text-xl font-normal dark:text-white py-2">
|
||||||
<img src="/no-video.svg" alt="Video not found" />
|
No note, video or slide added for this lesson yet
|
||||||
<h3 class="text-xl font-normal dark:text-white py-2">
|
</h3>
|
||||||
No note, video or slide added for this lesson yet
|
<p class="text-sm text-center font-normal py-2">
|
||||||
</h3>
|
Share your knowledge with your students by creating engaging content<br />
|
||||||
<p class="text-sm text-center font-normal py-2">
|
Start by clicking on <strong>Get started</strong> button.
|
||||||
Share your knowledge with your students by creating engaging content<br />
|
</p>
|
||||||
Start by clicking on <strong>Get started</strong> button.
|
<PrimaryButton label="Get started" className="rounded-md" onClick={toggleMode} />
|
||||||
</p>
|
</Box>
|
||||||
<PrimaryButton label="Get started" className="rounded-md" onClick={toggleMode} />
|
{/if}
|
||||||
</Box>
|
</svelte:fragment>
|
||||||
{/if}
|
</HtmlRender>
|
||||||
|
|||||||
@@ -21,8 +21,8 @@
|
|||||||
let formatter: Intl.NumberFormat | undefined;
|
let formatter: Intl.NumberFormat | undefined;
|
||||||
let isFree = false;
|
let isFree = false;
|
||||||
|
|
||||||
function calcDisc(percent: number, cost: number) {
|
function calcDisc(percent: number, cost: number, showDiscount: boolean) {
|
||||||
if (!percent) return cost;
|
if (!percent || !showDiscount) return cost;
|
||||||
const discountAmount = (percent / 100) * cost;
|
const discountAmount = (percent / 100) * cost;
|
||||||
const discountedPrice = cost - discountAmount;
|
const discountedPrice = cost - discountAmount;
|
||||||
return Math.round(discountedPrice);
|
return Math.round(discountedPrice);
|
||||||
@@ -51,8 +51,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
$: setFormatter(courseData.currency);
|
$: setFormatter(courseData.currency);
|
||||||
|
|
||||||
$: discount = get(courseData, 'metadata.discount', 0);
|
$: discount = get(courseData, 'metadata.discount', 0);
|
||||||
$: calculatedCost = calcDisc(discount, courseData.cost || 0);
|
$: calculatedCost = calcDisc(discount, courseData.cost || 0, courseData.metadata.showDiscount);
|
||||||
$: isFree = isCourseFree(calculatedCost);
|
$: isFree = isCourseFree(calculatedCost);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -6,5 +6,9 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<article class="preview prose prose-sm sm:prose {className}">
|
<article class="preview prose prose-sm sm:prose {className}">
|
||||||
{@html marked(content, { breaks: true, gfm: true })}
|
{#if $$slots.content}
|
||||||
|
<slot name="content" />
|
||||||
|
{:else}
|
||||||
|
{@html marked(content, { breaks: true, gfm: true })}
|
||||||
|
{/if}
|
||||||
</article>
|
</article>
|
||||||
|
|||||||
Reference in New Issue
Block a user