2024-04-21 12:14:54 -07:00
|
|
|
<script lang="ts">
|
|
|
|
import { ProjectionType } from '$lib/constants';
|
|
|
|
import VideoNativeViewer from '$lib/components/asset-viewer/video-native-viewer.svelte';
|
2024-11-15 23:30:38 +01:00
|
|
|
import VideoPanoramaViewer from '$lib/components/asset-viewer/video-panorama-viewer.svelte';
|
2024-04-21 12:14:54 -07:00
|
|
|
|
2024-11-14 08:43:25 -06:00
|
|
|
interface Props {
|
|
|
|
assetId: string;
|
|
|
|
projectionType: string | null | undefined;
|
|
|
|
checksum: string;
|
|
|
|
loopVideo: boolean;
|
|
|
|
onClose?: () => void;
|
|
|
|
onPreviousAsset?: () => void;
|
|
|
|
onNextAsset?: () => void;
|
|
|
|
onVideoEnded?: () => void;
|
|
|
|
onVideoStarted?: () => void;
|
|
|
|
}
|
|
|
|
|
|
|
|
let {
|
|
|
|
assetId,
|
|
|
|
projectionType,
|
|
|
|
checksum,
|
|
|
|
loopVideo,
|
|
|
|
onPreviousAsset,
|
|
|
|
onClose,
|
|
|
|
onNextAsset,
|
|
|
|
onVideoEnded,
|
|
|
|
onVideoStarted,
|
|
|
|
}: Props = $props();
|
2024-04-21 12:14:54 -07:00
|
|
|
</script>
|
|
|
|
|
|
|
|
{#if projectionType === ProjectionType.EQUIRECTANGULAR}
|
2024-11-15 23:30:38 +01:00
|
|
|
<VideoPanoramaViewer {assetId} />
|
2024-04-21 12:14:54 -07:00
|
|
|
{:else}
|
2024-09-21 00:24:46 +02:00
|
|
|
<VideoNativeViewer
|
|
|
|
{loopVideo}
|
|
|
|
{checksum}
|
|
|
|
{assetId}
|
|
|
|
{onPreviousAsset}
|
|
|
|
{onNextAsset}
|
2024-11-14 08:43:25 -06:00
|
|
|
{onVideoEnded}
|
|
|
|
{onVideoStarted}
|
|
|
|
{onClose}
|
2024-09-21 00:24:46 +02:00
|
|
|
/>
|
2024-04-21 12:14:54 -07:00
|
|
|
{/if}
|