Rotimi Best
52d9bf18c3
Gate student content by completion order, track per-video watch progress with seek enforcement, and auto-complete lessons at the configured threshold. Show ring progress in the lesson header, keep watch progress on rewatch, and sync progression locks client-side so the next item unlocks after completion.
40 lines
787 B
Svelte
40 lines
787 B
Svelte
<script lang="ts">
|
|
import Button, { type ButtonElementProps } from '../../base/button/button.svelte';
|
|
import { useImageCropperUseOriginal } from './image-cropper-context.svelte';
|
|
import ImageIcon from '@lucide/svelte/icons/image';
|
|
|
|
let {
|
|
ref = $bindable(null),
|
|
variant = 'outline',
|
|
size = 'sm',
|
|
onclick,
|
|
children,
|
|
...rest
|
|
}: ButtonElementProps = $props();
|
|
|
|
const useOriginalState = useImageCropperUseOriginal();
|
|
</script>
|
|
|
|
<Button
|
|
{...rest}
|
|
bind:ref
|
|
{size}
|
|
{variant}
|
|
onclick={(
|
|
e: MouseEvent & {
|
|
currentTarget: EventTarget & HTMLButtonElement;
|
|
}
|
|
) => {
|
|
onclick?.(e);
|
|
|
|
useOriginalState.onclick();
|
|
}}
|
|
>
|
|
<ImageIcon />
|
|
{#if children}
|
|
{@render children()}
|
|
{:else}
|
|
<span>Don't Crop</span>
|
|
{/if}
|
|
</Button>
|