\n \n \n \n \n \n \n\n\n\n","import type { Video } from '@design-system/components/UI/UIMedia.props'\nimport { joinURL } from 'ufo'\n\n/**\n * Get the full video URL.\n *\n * This function constructs the full URL for the video source. It supports both\n * absolute URLs (starting with 'http') and relative URLs by joining them with\n * the base Cloudinary URL from runtime config.\n *\n * @param {string} src - The source of the video (either absolute or relative).\n *\n * @returns {string} The full URL of the video.\n */\nexport const getVideo = (src: string): string => {\n // Support runtime config for base Cloudinary URL\n const baseURL: string = useRuntimeConfig().public.cloudinary\n return src.startsWith('http') ? src : joinURL(baseURL, src)\n}\n\n/**\n * Get the optimized video source URL.\n *\n * This function optimizes the video URL using Cloudinary transformations.\n *\n * @param {Video} video - The video object containing the source URL.\n * @param {string} format - The desired video format (e.g., 'mp4', 'webm').\n * @param {string} [aspectRatio] - Optional aspect ratio for video optimization.\n *\n * @returns {string} The optimized video URL.\n */\nexport const getVideoScr = (\n video: Video,\n format: string,\n aspectRatio?: string\n): string =>\n optimizeVideo(\n getVideo(video?.srcVideo?.public_id ?? video?.srcVideo?.secure_url ?? '#'),\n video.quality ?? 'best',\n aspectRatio,\n format\n )\n\n/**\n * Format time from seconds to mm:ss format.\n *\n * This function takes a number of seconds and formats it into a more human-readable\n * \"minutes:seconds\" format (e.g., 90 seconds becomes '1:30').\n *\n * @param {number} seconds - The time in seconds.\n *\n * @returns {string} The formatted time in mm:ss.\n */\nexport const formatTime = (seconds: number): string => {\n const mins = Math.floor(seconds / 60)\n const secs = Math.floor(seconds % 60)\n return `${mins}:${secs < 10 ? '0' : ''}${secs}` // Pad single-digit seconds with a zero\n}\n","import type {\n UIMediaProps,\n Video,\n} from '@design-system/components/UI/UIMedia.props'\n\ndeclare global {\n interface HTMLVideoElement {\n webkitEnterFullscreen?: () => Promise\n mozRequestFullScreen?: () => Promise\n msRequestFullscreen?: () => Promise\n }\n}\n\nexport const useVideo = (\n video: UIMediaProps,\n videoRef: Ref\n) => {\n const mediaVideo = video.media as Video\n\n // Determine if the video is of 'standard' or 'loop' type\n const isStandardVideo = mediaVideo.anatomy === 'standard'\n const isLoopVideo = mediaVideo.anatomy === 'loop' || !isStandardVideo\n\n // States for playback control\n const isPlaying = ref(mediaVideo.autoplay)\n const isMuted = ref(mediaVideo.muted)\n\n // Time-related states\n const currentTime = ref('0:00')\n const duration = ref('0:00')\n const currentSeconds = ref(0)\n const videoDuration = ref(0)\n\n // Computed properties for video sources in different formats\n const srcVideo = computed(() =>\n getVideoScr(mediaVideo, 'webm', video.aspectRatio)\n )\n\n const srcVideoMp4 = computed(() =>\n getVideoScr(mediaVideo, 'mp4', video.aspectRatio)\n )\n\n // Check if Picture-in-Picture (PiP) is supported by the browser\n const isPipSupported = computed(\n () => videoRef.value && 'requestPictureInPicture' in videoRef.value\n )\n\n // Executes a given function if the video is a 'standard' video and the videoRef exists\n const executeIfStandardVideo = (fn: () => void) => {\n if (isStandardVideo && videoRef.value) {\n fn()\n }\n }\n\n // Toggle play/pause state of the video\n const togglePlay = async () => {\n if (!videoRef.value) return\n try {\n isPlaying.value ? videoRef.value.pause() : await videoRef.value.play()\n isPlaying.value = !isPlaying.value\n } catch (error) {\n console.log(error)\n }\n }\n\n // Toggle mute/unmute state of the video\n const toggleMute = () => {\n if (!videoRef.value) return\n\n videoRef.value.muted = !videoRef.value.muted\n isMuted.value = videoRef.value.muted\n }\n\n // Enable Picture-in-Picture mode (if supported)\n const enablePip = () =>\n executeIfStandardVideo(async () => {\n try {\n await videoRef?.value?.requestPictureInPicture()\n } catch (error) {\n console.error('Error entering PiP:', error)\n }\n })\n\n // Toggle fullscreen mode for the video\n const toggleFullScreen = () =>\n executeIfStandardVideo(() => {\n if (videoRef?.value?.requestFullscreen) {\n videoRef.value.requestFullscreen()\n } else if (videoRef?.value?.webkitEnterFullscreen) {\n videoRef.value.webkitEnterFullscreen()\n } else if (videoRef?.value?.mozRequestFullScreen) {\n videoRef.value.mozRequestFullScreen()\n } else if (videoRef?.value?.msRequestFullscreen) {\n videoRef.value.msRequestFullscreen()\n }\n })\n\n // Seek the video to a specific time (based on the range input)\n const onSeek = (event: Event) => {\n executeIfStandardVideo(() => {\n const input = event.target as HTMLInputElement\n videoRef.value!.currentTime = Number(input.value)\n })\n }\n\n // Update the current time and total duration of the video, triggered by 'timeupdate' event\n const onTimeUpdate = () => {\n executeIfStandardVideo(() => {\n const current = videoRef.value!.currentTime\n const total = videoRef.value!.duration\n\n currentTime.value = formatTime(current)\n duration.value = formatTime(total)\n currentSeconds.value = current\n videoDuration.value = total\n })\n }\n\n // Get the position of the video commands (play, pause, etc.) based on the type of video (standard or loop).\n const getCommandsPosition = () => {\n if (isStandardVideo) {\n return 'bottom-0 left-0 right-0'\n } else {\n const loopCommandPositionOptions = {\n 'top-left': 'top-0 left-0',\n 'bottom-right': 'bottom-0 right-0',\n }\n return loopCommandPositionOptions[\n mediaVideo.commandsPosition ?? 'bottom-right'\n ]\n }\n }\n\n return {\n isStandardVideo,\n isLoopVideo,\n isPlaying,\n isMuted,\n currentTime,\n duration,\n currentSeconds,\n videoDuration,\n srcVideo,\n srcVideoMp4,\n isPipSupported,\n togglePlay,\n toggleMute,\n enablePip,\n toggleFullScreen,\n onSeek,\n onTimeUpdate,\n getCommandsPosition,\n }\n}\n","\n\n\n
\n \n \n \n \n \n \n \n \n \n \n \n\n\n\n","// Unique ID creation requires a high quality random # generator. In the browser we therefore\n// require the crypto API and do not support built-in fallback to lower quality random number\n// generators (like Math.random()).\nlet getRandomValues;\nconst rnds8 = new Uint8Array(16);\nexport default function rng() {\n // lazy load so that environments that need to polyfill have a chance to do so\n if (!getRandomValues) {\n // getRandomValues needs to be invoked in a context where \"this\" is a Crypto implementation.\n getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);\n\n if (!getRandomValues) {\n throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');\n }\n }\n\n return getRandomValues(rnds8);\n}","import validate from './validate.js';\n/**\n * Convert array of 16 byte values to UUID string format of the form:\n * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX\n */\n\nconst byteToHex = [];\n\nfor (let i = 0; i < 256; ++i) {\n byteToHex.push((i + 0x100).toString(16).slice(1));\n}\n\nexport function unsafeStringify(arr, offset = 0) {\n // Note: Be careful editing this code! It's been tuned for performance\n // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434\n return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]];\n}\n\nfunction stringify(arr, offset = 0) {\n const uuid = unsafeStringify(arr, offset); // Consistency check for valid UUID. If this throws, it's likely due to one\n // of the following:\n // - One or more input array values don't map to a hex octet (leading to\n // \"undefined\" in the uuid)\n // - Invalid input values for the RFC `version` or `variant` fields\n\n if (!validate(uuid)) {\n throw TypeError('Stringified UUID is invalid');\n }\n\n return uuid;\n}\n\nexport default stringify;","const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);\nexport default {\n randomUUID\n};","import native from './native.js';\nimport rng from './rng.js';\nimport { unsafeStringify } from './stringify.js';\n\nfunction v4(options, buf, offset) {\n if (native.randomUUID && !buf && !options) {\n return native.randomUUID();\n }\n\n options = options || {};\n const rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`\n\n rnds[6] = rnds[6] & 0x0f | 0x40;\n rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided\n\n if (buf) {\n offset = offset || 0;\n\n for (let i = 0; i < 16; ++i) {\n buf[offset + i] = rnds[i];\n }\n\n return buf;\n }\n\n return unsafeStringify(rnds);\n}\n\nexport default v4;","\n\n\n