From 3e3eac8aa84796e9678466de160ed7aec761c4b5 Mon Sep 17 00:00:00 2001
From: Shubham Kukreti <57281769+KukretiShubham@users.noreply.github.com>
Date: Tue, 24 Dec 2024 18:44:26 +0530
Subject: [PATCH 01/13] add: mp4box based videoFetch.vue

---
 package.json                            |   3 +-
 src/ui/components/Checkout/Checkout.vue |   9 +-
 src/ui/components/Checkout/Result.vue   |  13 +-
 src/ui/vue/VideoFetch.vue               | 228 ++++++++++++++++++++++++
 yarn.lock                               |   8 +
 5 files changed, 248 insertions(+), 13 deletions(-)
 create mode 100644 src/ui/vue/VideoFetch.vue

diff --git a/package.json b/package.json
index 88308ee3d..7a60172b6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@devprotocol/clubs-core",
-	"version": "3.22.9",
+	"version": "3.22.10",
 	"description": "Core library for Clubs",
 	"main": "dist/index.mjs",
 	"exports": {
@@ -106,6 +106,7 @@
 		"js-base64": "^3.7.2",
 		"lit": "^3.0.0",
 		"marked": "^10.0.0",
+		"mp4box": "^0.5.3",
 		"p-queue": "^8.0.1",
 		"ramda": "^0.30.0",
 		"rxjs": "^7.8.1",
diff --git a/src/ui/components/Checkout/Checkout.vue b/src/ui/components/Checkout/Checkout.vue
index 9ff1e7d77..15ad06404 100644
--- a/src/ui/components/Checkout/Checkout.vue
+++ b/src/ui/components/Checkout/Checkout.vue
@@ -41,6 +41,7 @@ import { fetchProfile } from '../../../profile'
 import IconSpinner from '../../vue/IconSpinner.vue'
 import IconInfo from '../../vue/IconInfo.vue'
 import IconCheckCircle from '../../vue/IconCheckCircle.vue'
+import VideoFetch from '../../vue/VideoFetch.vue'
 import IconBouncingArrowRight from '../../vue/IconBouncingArrowRight.vue'
 
 let providerPool: UndefinedOr<ContractRunner>
@@ -566,10 +567,10 @@ onUnmounted(() => {
 						v-if="!previewImageSrc && previewVideoSrc"
 						class="w-36 rounded-lg border border-black/20 bg-black/10 p-1"
 					>
-						<video class="w-full rounded-lg" autoplay muted>
-							<source :src="previewVideoSrc" type="video/mp4" />
-							Your browser does not support the video tag.
-						</video>
+						<VideoFetch
+						:url="previewVideoSrc"
+						:videoClass="`w-full rounded-lg`"
+						/>
 					</span>
 
 					<span
diff --git a/src/ui/components/Checkout/Result.vue b/src/ui/components/Checkout/Result.vue
index 21b6f0283..bc759e02c 100644
--- a/src/ui/components/Checkout/Result.vue
+++ b/src/ui/components/Checkout/Result.vue
@@ -10,6 +10,7 @@ import { i18nFactory } from '../../../i18n'
 import { markdownToHtml } from '../../../markdown'
 import Modal from '../Modal.vue'
 import ModalCheckout from './ModalCheckout.vue'
+import VideoFetch from '../../vue/VideoFetch.vue'
 
 const i18nBase = i18nFactory(Strings)
 let i18n = i18nBase(['en'])
@@ -117,15 +118,11 @@ onMounted(async () => {
 							class="h-auto w-full rounded object-cover object-center sm:h-full sm:w-full"
 						/>
 						<!-- video -->
-						<video
+						<VideoFetch
 							v-if="!imageSrc && videoSrc"
-							class="w-full rounded"
-							autoplay
-							muted
-						>
-							<source :src="videoSrc" type="video/mp4" />
-							Your browser does not support the video tag.
-						</video>
+							:url="videoSrc"
+							:videoClass="`w-full rounded`"
+						/>
 					</div>
 					<span>
 						<h3 class="break-all text-sm text-black/50">
diff --git a/src/ui/vue/VideoFetch.vue b/src/ui/vue/VideoFetch.vue
new file mode 100644
index 000000000..91c0f4ac2
--- /dev/null
+++ b/src/ui/vue/VideoFetch.vue
@@ -0,0 +1,228 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import MP4Box from 'mp4box'
+
+const props = defineProps({
+  url: {
+    type: String,
+    required: true,
+  },
+  posterUrl: {
+    type: String,
+    default: '',
+  },
+  videoClass: {
+    type: String,
+    default: '',
+  },
+})
+
+// Refs and variables
+const videoElement = ref(null)
+let mediaSource = null
+let sourceBuffers = {}
+let mp4boxfile = null
+let pendingSegments = {}
+
+// Configure chunk size (1MB). Adjust if needed.
+const CHUNK_SIZE = 1_000_000
+let nextRangeStart = 0
+let totalFileSize = 0
+let isDownloading = false
+
+onMounted(() => {
+  if (!props.url) return
+
+  mediaSource = new MediaSource()
+  videoElement.value.src = URL.createObjectURL(mediaSource)
+  mediaSource.addEventListener('sourceopen', onSourceOpen)
+
+  setupMp4Box()
+  startDownload()
+})
+
+function onSourceOpen() {
+  // MediaSource is ready to accept SourceBuffers
+  // console.log('MediaSource opened') // Uncomment for debugging
+}
+
+function setupMp4Box() {
+  mp4boxfile = MP4Box.createFile()
+
+  // Fired when MP4Box starts parsing the "moov" box (movie metadata)
+  mp4boxfile.onMoovStart = function () {
+    // console.log('Parsing movie information...')
+  }
+
+  // Fired when MP4Box has the "moov" box and all track info ready
+  mp4boxfile.onReady = function (info) {
+    // Instead of manually setting mediaSource.duration, rely on segment-based approach
+    initializeTracksAndBuffers(info)
+    const initSegs = mp4boxfile.initializeSegmentation()
+
+    // Create and append initial SourceBuffers based on track information
+    initSegs.forEach((seg) => {
+      const trackInfo = info.tracks.find((t) => t.id === seg.id)
+      const codec = seg.codec || trackInfo?.codec
+      if (!codec) {
+        console.error(`Codec undefined for track ID: ${seg.id}`)
+        return
+      }
+
+      const mime = `video/mp4; codecs="${codec}"`
+      if (MediaSource.isTypeSupported(mime)) {
+        const sb = mediaSource.addSourceBuffer(mime)
+        sourceBuffers[seg.id] = sb
+
+        // Handle subsequent segment appending after one finishes
+        sb.addEventListener('updateend', () => onUpdateEnd(seg.id))
+
+        // Append the initialization segment
+        sb.appendBuffer(seg.buffer)
+        // console.log(`SourceBuffer added with mime: ${mime}`)
+      } else {
+        console.error(`Unsupported MIME type: ${mime}`)
+      }
+    })
+
+    // Start MP4Box file processing
+    mp4boxfile.start()
+    videoElement.value?.play().catch((e) => console.error('Play error:', e))
+  }
+
+  // Fired when a media segment is ready
+  mp4boxfile.onSegment = function (trackId, user, buffer, sampleNum, is_last) {
+    // If the corresponding SourceBuffer is ready, append immediately
+    // Otherwise, queue it up in pendingSegments
+    if (sourceBuffers[trackId] && !sourceBuffers[trackId].updating) {
+      sourceBuffers[trackId].appendBuffer(buffer)
+    } else {
+      pendingSegments[trackId]?.push(buffer)
+    }
+  }
+}
+
+function initializeTracksAndBuffers(info) {
+  info.tracks.forEach((track) => {
+    // Define segmentation options: smaller durations lead to more frequent, smaller segments.
+    mp4boxfile.setSegmentOptions(track.id, { duration: 2 })
+    pendingSegments[track.id] = [] // Initialize each track's queue
+  })
+}
+
+function onUpdateEnd(trackId) {
+  // After finishing appending to a SourceBuffer,
+  // check if there are pending segments and append the next one if available.
+  if (
+    pendingSegments[trackId]?.length > 0 &&
+    !sourceBuffers[trackId].updating
+  ) {
+    const nextBuffer = pendingSegments[trackId].shift()
+    sourceBuffers[trackId].appendBuffer(nextBuffer)
+  }
+
+  // Check if the entire stream can now be ended.
+  maybeEndOfStream()
+}
+
+async function startDownload() {
+  isDownloading = true
+  try {
+    totalFileSize = await fetchFileSize()
+    downloadChunk()
+  } catch (err) {
+    console.error('Could not fetch file size:', err)
+  }
+}
+
+function fetchFileSize() {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest()
+    xhr.open('HEAD', props.url, true)
+    xhr.onload = () => {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        const length = parseInt(
+          xhr.getResponseHeader('Content-Length') || '0',
+          10,
+        )
+        resolve(length)
+      } else {
+        reject(new Error(`HEAD request failed with status ${xhr.status}`))
+      }
+    }
+    xhr.onerror = () => reject(new Error('Network error during HEAD request'))
+    xhr.send()
+  })
+}
+
+function downloadChunk() {
+  if (!isDownloading) return
+
+  // If we've downloaded the entire file, flush MP4Box and possibly end the stream
+  if (nextRangeStart >= totalFileSize) {
+    mp4boxfile.flush()
+    maybeEndOfStream()
+    // Start playback after all data is processed
+    videoElement.value?.play().catch((e) => console.error('Play error:', e))
+    return
+  }
+
+  const end = Math.min(nextRangeStart + CHUNK_SIZE - 1, totalFileSize - 1)
+  const xhr = new XMLHttpRequest()
+  xhr.open('GET', props.url, true)
+  xhr.responseType = 'arraybuffer'
+  xhr.setRequestHeader('Range', `bytes=${nextRangeStart}-${end}`)
+
+  xhr.onload = function () {
+    if (xhr.status >= 200 && xhr.status < 300) {
+      const buffer = xhr.response
+      // MP4Box requires `fileStart` to know where this chunk fits in the file
+      buffer.fileStart = nextRangeStart
+      nextRangeStart = end + 1
+
+      const next = mp4boxfile.appendBuffer(buffer)
+      if (next) {
+        // Giving some delay before requesting the next chunk can help throttle bandwidth
+        setTimeout(downloadChunk, 100)
+      }
+    } else {
+      console.error('Error downloading chunk. Status:', xhr.status)
+    }
+  }
+
+  xhr.onerror = function (e) {
+    console.error('XHR error during chunk download:', e)
+  }
+  xhr.send()
+}
+
+function maybeEndOfStream() {
+  // Check if all data is downloaded
+  if (nextRangeStart >= totalFileSize) {
+    // Verify no pending segments and no buffers updating
+    const noPending = Object.values(pendingSegments).every(
+      (arr) => arr.length === 0,
+    )
+    const noUpdating = Object.values(sourceBuffers).every((sb) => !sb.updating)
+
+    if (noPending && noUpdating && mediaSource.readyState === 'open') {
+      // All segments have been appended successfully
+      mediaSource.endOfStream()
+    }
+  }
+}
+</script>
+
+<template>
+  <video
+    ref="videoElement"
+    controlsList="nodownload"
+    autoplay
+    muted
+    loop
+    :poster="posterUrl"
+    :class="videoClass"
+  >
+    <track kind="captions" />
+  </video>
+</template>
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index a9c0b0d9c..d68aa068e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -825,6 +825,7 @@ __metadata:
     jsdom: "npm:^25.0.0"
     lit: "npm:^3.0.0"
     marked: "npm:^10.0.0"
+    mp4box: "npm:^0.5.3"
     npm-run-all2: "npm:7.0.1"
     open-cli: "npm:^8.0.0"
     p-queue: "npm:^8.0.1"
@@ -7196,6 +7197,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mp4box@npm:^0.5.3":
+  version: 0.5.3
+  resolution: "mp4box@npm:0.5.3"
+  checksum: 10c0/901d39813b3ea792bce34b7c111013304de4ea14376d4e42f70a96659e94a4eb00f22923619d045c96c6d27336f107456f00b2bfb05db015b872c7db0aecf53f
+  languageName: node
+  linkType: hard
+
 "mri@npm:^1.1.0":
   version: 1.2.0
   resolution: "mri@npm:1.2.0"

From 68ade410b84e7e3a1cad572b39ae21f7b6df4394 Mon Sep 17 00:00:00 2001
From: Shubham Kukreti <57281769+KukretiShubham@users.noreply.github.com>
Date: Tue, 24 Dec 2024 18:44:55 +0530
Subject: [PATCH 02/13] lint

---
 src/ui/components/Checkout/Checkout.vue      |  16 +-
 src/ui/components/Checkout/ModalCheckout.vue |  20 +-
 src/ui/vue/VideoFetch.vue                    | 354 +++++++++----------
 3 files changed, 195 insertions(+), 195 deletions(-)

diff --git a/src/ui/components/Checkout/Checkout.vue b/src/ui/components/Checkout/Checkout.vue
index 15ad06404..5f0f01d6e 100644
--- a/src/ui/components/Checkout/Checkout.vue
+++ b/src/ui/components/Checkout/Checkout.vue
@@ -568,8 +568,8 @@ onUnmounted(() => {
 						class="w-36 rounded-lg border border-black/20 bg-black/10 p-1"
 					>
 						<VideoFetch
-						:url="previewVideoSrc"
-						:videoClass="`w-full rounded-lg`"
+							:url="previewVideoSrc"
+							:videoClass="`w-full rounded-lg`"
 						/>
 					</span>
 
@@ -618,12 +618,12 @@ onUnmounted(() => {
 				}}</span>
 				<button
 					v-if="clubsProfile === undefined"
-					class="hs-button is-large is-filled relative flex w-full items-center gap-2 rounded-md @container/clb_checkout_signin_button"
+					class="hs-button is-large is-filled @container/clb_checkout_signin_button relative flex w-full items-center gap-2 rounded-md"
 					@click="signIn"
 				>
 					<IconBouncingArrowRight
 						v-if="account === undefined"
-						class="absolute -left-2 @xs/clb_checkout_signin_button:left-5"
+						class="@xs/clb_checkout_signin_button:left-5 absolute -left-2"
 					/>
 					<IconSpinner v-else class="absolute left-5 size-5" />
 					<span class="font-bold">{{ i18n('SignIn') }}</span>
@@ -731,7 +731,7 @@ onUnmounted(() => {
 						"
 						:data-is-approving="isApproving"
 						:data-is-fetching="isFetchingApproval === 'progress'"
-						class="hs-button is-large is-fullwidth group relative @container/clb_checkout_approval_button"
+						class="hs-button is-large is-fullwidth @container/clb_checkout_approval_button group relative"
 						:class="
 							approveNeeded === false ? 'is-outlined border-[1px]' : 'is-filled'
 						"
@@ -749,7 +749,7 @@ onUnmounted(() => {
 							type="solid"
 						/>
 						<IconBouncingArrowRight
-							class="absolute -left-2 group-disabled:hidden @xs/clb_checkout_approval_button:left-5"
+							class="@xs/clb_checkout_approval_button:left-5 absolute -left-2 group-disabled:hidden"
 						/>
 
 						{{
@@ -787,7 +787,7 @@ onUnmounted(() => {
 							"
 							:data-is-staking="isStaking"
 							:data-is-fetching="isFetchingFunds === 'progress'"
-							class="hs-button is-large is-filled group relative @container/clb_checkout_pay_button"
+							class="hs-button is-large is-filled @container/clb_checkout_pay_button group relative"
 							:class="insufficientFunds ? 'bg-red-600' : ''"
 						>
 							<IconSpinner
@@ -795,7 +795,7 @@ onUnmounted(() => {
 								class="absolute left-5 size-5"
 							/>
 							<IconBouncingArrowRight
-								class="absolute -left-2 group-disabled:hidden @xs/clb_checkout_pay_button:left-5"
+								class="@xs/clb_checkout_pay_button:left-5 absolute -left-2 group-disabled:hidden"
 							/>
 
 							{{ i18n('PayWith', [verifiedPropsCurrency.toUpperCase()]) }}
diff --git a/src/ui/components/Checkout/ModalCheckout.vue b/src/ui/components/Checkout/ModalCheckout.vue
index 1d93a59c8..70e566992 100644
--- a/src/ui/components/Checkout/ModalCheckout.vue
+++ b/src/ui/components/Checkout/ModalCheckout.vue
@@ -123,10 +123,10 @@ onMounted(async () => {
 
 <template>
 	<div
-		class="m-auto w-full max-w-screen-lg rounded-xl bg-white p-4 text-black shadow @container/clb_result_modal"
+		class="@container/clb_result_modal m-auto w-full max-w-screen-lg rounded-xl bg-white p-4 text-black shadow"
 	>
 		<div
-			class="bg-color-navy relative mb-6 flex h-auto min-h-52 w-full flex-col items-center justify-center overflow-hidden rounded-md border border-black p-2 @xl/clb_result_modal:h-96 @xl/clb_result_modal:min-h-0 @xl/clb_result_modal:p-8"
+			class="bg-color-navy @xl/clb_result_modal:h-96 @xl/clb_result_modal:min-h-0 @xl/clb_result_modal:p-8 relative mb-6 flex h-auto min-h-52 w-full flex-col items-center justify-center overflow-hidden rounded-md border border-black p-2"
 		>
 			<div
 				class="w-h-screen bg-focus-lines origin-zero animate-spin-slow mask absolute inset-2/4 -translate-x-1/2 -translate-y-1/2 bg-center bg-no-repeat"
@@ -134,7 +134,7 @@ onMounted(async () => {
 			<h3 class="mb-1 text-white">
 				<span
 					v-if="name"
-					class="text-xl italic @xl/clb_result_modal:text-3xl"
+					class="@xl/clb_result_modal:text-3xl text-xl italic"
 					>{{ name }}</span
 				>
 			</h3>
@@ -142,7 +142,7 @@ onMounted(async () => {
 			<img
 				v-if="imageSrc"
 				:src="imageSrc"
-				class="z-10 max-h-60 min-h-full max-w-60 object-contain @xl/clb_result_modal:max-h-none @xl/clb_result_modal:max-w-xl"
+				class="@xl/clb_result_modal:max-h-none @xl/clb_result_modal:max-w-xl z-10 max-h-60 min-h-full max-w-60 object-contain"
 			/>
 			<!-- video -->
 			<video
@@ -155,7 +155,7 @@ onMounted(async () => {
 				Your browser does not support the video tag.
 			</video>
 		</div>
-		<div class="flex flex-col gap-6 px-0 @4xl/clb_result_modal:px-52">
+		<div class="@4xl/clb_result_modal:px-52 flex flex-col gap-6 px-0">
 			<!-- description -->
 			<aside
 				v-if="description"
@@ -172,12 +172,12 @@ onMounted(async () => {
 			<slot name="after:description" />
 
 			<div
-				class="flex w-full flex-col gap-4 @4xl/clb_result_modal:flex-row @4xl/clb_result_modal:justify-between @4xl/clb_result_modal:gap-0"
+				class="@4xl/clb_result_modal:flex-row @4xl/clb_result_modal:justify-between @4xl/clb_result_modal:gap-0 flex w-full flex-col gap-4"
 			>
 				<a
 					v-if="cronFinished"
 					:href="passportPageUrl"
-					class="hs-button is-filled rounded-lg border px-0 py-4 text-base @4xl/clb_result_modal:px-12 @4xl/clb_result_modal:py-6"
+					class="hs-button is-filled @4xl/clb_result_modal:px-12 @4xl/clb_result_modal:py-6 rounded-lg border px-0 py-4 text-base"
 				>
 					{{ i18n('Passport') }}
 				</a>
@@ -185,21 +185,21 @@ onMounted(async () => {
 					v-if="!cronFinished"
 					@click="onClickPassport"
 					:disabled="clicked"
-					class="hs-button is-filled items-center justify-center gap-2 rounded-lg border px-0 py-4 text-base disabled:animate-pulse disabled:bg-blue-600 @4xl/clb_result_modal:px-12 @4xl/clb_result_modal:py-6"
+					class="hs-button is-filled @4xl/clb_result_modal:px-12 @4xl/clb_result_modal:py-6 items-center justify-center gap-2 rounded-lg border px-0 py-4 text-base disabled:animate-pulse disabled:bg-blue-600"
 				>
 					{{ i18n('Passport') }}
 					<Spinner v-if="clicked" />
 				</button>
 				<a
 					href="/"
-					class="hs-button is-filled rounded-lg border px-12 py-4 text-base @4xl/clb_result_modal:py-6"
+					class="hs-button is-filled @4xl/clb_result_modal:py-6 rounded-lg border px-12 py-4 text-base"
 				>
 					{{ i18n('Home') }}
 				</a>
 				<button
 					v-if="false /* HIDDEN FOR NOW */"
 					@click="modalClose"
-					class="hs-button is-filled rounded-lg border px-12 py-4 text-base @4xl/clb_result_modal:py-6"
+					class="hs-button is-filled @4xl/clb_result_modal:py-6 rounded-lg border px-12 py-4 text-base"
 				>
 					{{ i18n('Close') }}
 				</button>
diff --git a/src/ui/vue/VideoFetch.vue b/src/ui/vue/VideoFetch.vue
index 91c0f4ac2..9724b0706 100644
--- a/src/ui/vue/VideoFetch.vue
+++ b/src/ui/vue/VideoFetch.vue
@@ -3,18 +3,18 @@ import { onMounted, ref } from 'vue'
 import MP4Box from 'mp4box'
 
 const props = defineProps({
-  url: {
-    type: String,
-    required: true,
-  },
-  posterUrl: {
-    type: String,
-    default: '',
-  },
-  videoClass: {
-    type: String,
-    default: '',
-  },
+	url: {
+		type: String,
+		required: true,
+	},
+	posterUrl: {
+		type: String,
+		default: '',
+	},
+	videoClass: {
+		type: String,
+		default: '',
+	},
 })
 
 // Refs and variables
@@ -31,198 +31,198 @@ let totalFileSize = 0
 let isDownloading = false
 
 onMounted(() => {
-  if (!props.url) return
+	if (!props.url) return
 
-  mediaSource = new MediaSource()
-  videoElement.value.src = URL.createObjectURL(mediaSource)
-  mediaSource.addEventListener('sourceopen', onSourceOpen)
+	mediaSource = new MediaSource()
+	videoElement.value.src = URL.createObjectURL(mediaSource)
+	mediaSource.addEventListener('sourceopen', onSourceOpen)
 
-  setupMp4Box()
-  startDownload()
+	setupMp4Box()
+	startDownload()
 })
 
 function onSourceOpen() {
-  // MediaSource is ready to accept SourceBuffers
-  // console.log('MediaSource opened') // Uncomment for debugging
+	// MediaSource is ready to accept SourceBuffers
+	// console.log('MediaSource opened') // Uncomment for debugging
 }
 
 function setupMp4Box() {
-  mp4boxfile = MP4Box.createFile()
-
-  // Fired when MP4Box starts parsing the "moov" box (movie metadata)
-  mp4boxfile.onMoovStart = function () {
-    // console.log('Parsing movie information...')
-  }
-
-  // Fired when MP4Box has the "moov" box and all track info ready
-  mp4boxfile.onReady = function (info) {
-    // Instead of manually setting mediaSource.duration, rely on segment-based approach
-    initializeTracksAndBuffers(info)
-    const initSegs = mp4boxfile.initializeSegmentation()
-
-    // Create and append initial SourceBuffers based on track information
-    initSegs.forEach((seg) => {
-      const trackInfo = info.tracks.find((t) => t.id === seg.id)
-      const codec = seg.codec || trackInfo?.codec
-      if (!codec) {
-        console.error(`Codec undefined for track ID: ${seg.id}`)
-        return
-      }
-
-      const mime = `video/mp4; codecs="${codec}"`
-      if (MediaSource.isTypeSupported(mime)) {
-        const sb = mediaSource.addSourceBuffer(mime)
-        sourceBuffers[seg.id] = sb
-
-        // Handle subsequent segment appending after one finishes
-        sb.addEventListener('updateend', () => onUpdateEnd(seg.id))
-
-        // Append the initialization segment
-        sb.appendBuffer(seg.buffer)
-        // console.log(`SourceBuffer added with mime: ${mime}`)
-      } else {
-        console.error(`Unsupported MIME type: ${mime}`)
-      }
-    })
-
-    // Start MP4Box file processing
-    mp4boxfile.start()
-    videoElement.value?.play().catch((e) => console.error('Play error:', e))
-  }
-
-  // Fired when a media segment is ready
-  mp4boxfile.onSegment = function (trackId, user, buffer, sampleNum, is_last) {
-    // If the corresponding SourceBuffer is ready, append immediately
-    // Otherwise, queue it up in pendingSegments
-    if (sourceBuffers[trackId] && !sourceBuffers[trackId].updating) {
-      sourceBuffers[trackId].appendBuffer(buffer)
-    } else {
-      pendingSegments[trackId]?.push(buffer)
-    }
-  }
+	mp4boxfile = MP4Box.createFile()
+
+	// Fired when MP4Box starts parsing the "moov" box (movie metadata)
+	mp4boxfile.onMoovStart = function () {
+		// console.log('Parsing movie information...')
+	}
+
+	// Fired when MP4Box has the "moov" box and all track info ready
+	mp4boxfile.onReady = function (info) {
+		// Instead of manually setting mediaSource.duration, rely on segment-based approach
+		initializeTracksAndBuffers(info)
+		const initSegs = mp4boxfile.initializeSegmentation()
+
+		// Create and append initial SourceBuffers based on track information
+		initSegs.forEach((seg) => {
+			const trackInfo = info.tracks.find((t) => t.id === seg.id)
+			const codec = seg.codec || trackInfo?.codec
+			if (!codec) {
+				console.error(`Codec undefined for track ID: ${seg.id}`)
+				return
+			}
+
+			const mime = `video/mp4; codecs="${codec}"`
+			if (MediaSource.isTypeSupported(mime)) {
+				const sb = mediaSource.addSourceBuffer(mime)
+				sourceBuffers[seg.id] = sb
+
+				// Handle subsequent segment appending after one finishes
+				sb.addEventListener('updateend', () => onUpdateEnd(seg.id))
+
+				// Append the initialization segment
+				sb.appendBuffer(seg.buffer)
+				// console.log(`SourceBuffer added with mime: ${mime}`)
+			} else {
+				console.error(`Unsupported MIME type: ${mime}`)
+			}
+		})
+
+		// Start MP4Box file processing
+		mp4boxfile.start()
+		videoElement.value?.play().catch((e) => console.error('Play error:', e))
+	}
+
+	// Fired when a media segment is ready
+	mp4boxfile.onSegment = function (trackId, user, buffer, sampleNum, is_last) {
+		// If the corresponding SourceBuffer is ready, append immediately
+		// Otherwise, queue it up in pendingSegments
+		if (sourceBuffers[trackId] && !sourceBuffers[trackId].updating) {
+			sourceBuffers[trackId].appendBuffer(buffer)
+		} else {
+			pendingSegments[trackId]?.push(buffer)
+		}
+	}
 }
 
 function initializeTracksAndBuffers(info) {
-  info.tracks.forEach((track) => {
-    // Define segmentation options: smaller durations lead to more frequent, smaller segments.
-    mp4boxfile.setSegmentOptions(track.id, { duration: 2 })
-    pendingSegments[track.id] = [] // Initialize each track's queue
-  })
+	info.tracks.forEach((track) => {
+		// Define segmentation options: smaller durations lead to more frequent, smaller segments.
+		mp4boxfile.setSegmentOptions(track.id, { duration: 2 })
+		pendingSegments[track.id] = [] // Initialize each track's queue
+	})
 }
 
 function onUpdateEnd(trackId) {
-  // After finishing appending to a SourceBuffer,
-  // check if there are pending segments and append the next one if available.
-  if (
-    pendingSegments[trackId]?.length > 0 &&
-    !sourceBuffers[trackId].updating
-  ) {
-    const nextBuffer = pendingSegments[trackId].shift()
-    sourceBuffers[trackId].appendBuffer(nextBuffer)
-  }
-
-  // Check if the entire stream can now be ended.
-  maybeEndOfStream()
+	// After finishing appending to a SourceBuffer,
+	// check if there are pending segments and append the next one if available.
+	if (
+		pendingSegments[trackId]?.length > 0 &&
+		!sourceBuffers[trackId].updating
+	) {
+		const nextBuffer = pendingSegments[trackId].shift()
+		sourceBuffers[trackId].appendBuffer(nextBuffer)
+	}
+
+	// Check if the entire stream can now be ended.
+	maybeEndOfStream()
 }
 
 async function startDownload() {
-  isDownloading = true
-  try {
-    totalFileSize = await fetchFileSize()
-    downloadChunk()
-  } catch (err) {
-    console.error('Could not fetch file size:', err)
-  }
+	isDownloading = true
+	try {
+		totalFileSize = await fetchFileSize()
+		downloadChunk()
+	} catch (err) {
+		console.error('Could not fetch file size:', err)
+	}
 }
 
 function fetchFileSize() {
-  return new Promise((resolve, reject) => {
-    const xhr = new XMLHttpRequest()
-    xhr.open('HEAD', props.url, true)
-    xhr.onload = () => {
-      if (xhr.status >= 200 && xhr.status < 300) {
-        const length = parseInt(
-          xhr.getResponseHeader('Content-Length') || '0',
-          10,
-        )
-        resolve(length)
-      } else {
-        reject(new Error(`HEAD request failed with status ${xhr.status}`))
-      }
-    }
-    xhr.onerror = () => reject(new Error('Network error during HEAD request'))
-    xhr.send()
-  })
+	return new Promise((resolve, reject) => {
+		const xhr = new XMLHttpRequest()
+		xhr.open('HEAD', props.url, true)
+		xhr.onload = () => {
+			if (xhr.status >= 200 && xhr.status < 300) {
+				const length = parseInt(
+					xhr.getResponseHeader('Content-Length') || '0',
+					10
+				)
+				resolve(length)
+			} else {
+				reject(new Error(`HEAD request failed with status ${xhr.status}`))
+			}
+		}
+		xhr.onerror = () => reject(new Error('Network error during HEAD request'))
+		xhr.send()
+	})
 }
 
 function downloadChunk() {
-  if (!isDownloading) return
-
-  // If we've downloaded the entire file, flush MP4Box and possibly end the stream
-  if (nextRangeStart >= totalFileSize) {
-    mp4boxfile.flush()
-    maybeEndOfStream()
-    // Start playback after all data is processed
-    videoElement.value?.play().catch((e) => console.error('Play error:', e))
-    return
-  }
-
-  const end = Math.min(nextRangeStart + CHUNK_SIZE - 1, totalFileSize - 1)
-  const xhr = new XMLHttpRequest()
-  xhr.open('GET', props.url, true)
-  xhr.responseType = 'arraybuffer'
-  xhr.setRequestHeader('Range', `bytes=${nextRangeStart}-${end}`)
-
-  xhr.onload = function () {
-    if (xhr.status >= 200 && xhr.status < 300) {
-      const buffer = xhr.response
-      // MP4Box requires `fileStart` to know where this chunk fits in the file
-      buffer.fileStart = nextRangeStart
-      nextRangeStart = end + 1
-
-      const next = mp4boxfile.appendBuffer(buffer)
-      if (next) {
-        // Giving some delay before requesting the next chunk can help throttle bandwidth
-        setTimeout(downloadChunk, 100)
-      }
-    } else {
-      console.error('Error downloading chunk. Status:', xhr.status)
-    }
-  }
-
-  xhr.onerror = function (e) {
-    console.error('XHR error during chunk download:', e)
-  }
-  xhr.send()
+	if (!isDownloading) return
+
+	// If we've downloaded the entire file, flush MP4Box and possibly end the stream
+	if (nextRangeStart >= totalFileSize) {
+		mp4boxfile.flush()
+		maybeEndOfStream()
+		// Start playback after all data is processed
+		videoElement.value?.play().catch((e) => console.error('Play error:', e))
+		return
+	}
+
+	const end = Math.min(nextRangeStart + CHUNK_SIZE - 1, totalFileSize - 1)
+	const xhr = new XMLHttpRequest()
+	xhr.open('GET', props.url, true)
+	xhr.responseType = 'arraybuffer'
+	xhr.setRequestHeader('Range', `bytes=${nextRangeStart}-${end}`)
+
+	xhr.onload = function () {
+		if (xhr.status >= 200 && xhr.status < 300) {
+			const buffer = xhr.response
+			// MP4Box requires `fileStart` to know where this chunk fits in the file
+			buffer.fileStart = nextRangeStart
+			nextRangeStart = end + 1
+
+			const next = mp4boxfile.appendBuffer(buffer)
+			if (next) {
+				// Giving some delay before requesting the next chunk can help throttle bandwidth
+				setTimeout(downloadChunk, 100)
+			}
+		} else {
+			console.error('Error downloading chunk. Status:', xhr.status)
+		}
+	}
+
+	xhr.onerror = function (e) {
+		console.error('XHR error during chunk download:', e)
+	}
+	xhr.send()
 }
 
 function maybeEndOfStream() {
-  // Check if all data is downloaded
-  if (nextRangeStart >= totalFileSize) {
-    // Verify no pending segments and no buffers updating
-    const noPending = Object.values(pendingSegments).every(
-      (arr) => arr.length === 0,
-    )
-    const noUpdating = Object.values(sourceBuffers).every((sb) => !sb.updating)
-
-    if (noPending && noUpdating && mediaSource.readyState === 'open') {
-      // All segments have been appended successfully
-      mediaSource.endOfStream()
-    }
-  }
+	// Check if all data is downloaded
+	if (nextRangeStart >= totalFileSize) {
+		// Verify no pending segments and no buffers updating
+		const noPending = Object.values(pendingSegments).every(
+			(arr) => arr.length === 0
+		)
+		const noUpdating = Object.values(sourceBuffers).every((sb) => !sb.updating)
+
+		if (noPending && noUpdating && mediaSource.readyState === 'open') {
+			// All segments have been appended successfully
+			mediaSource.endOfStream()
+		}
+	}
 }
 </script>
 
 <template>
-  <video
-    ref="videoElement"
-    controlsList="nodownload"
-    autoplay
-    muted
-    loop
-    :poster="posterUrl"
-    :class="videoClass"
-  >
-    <track kind="captions" />
-  </video>
-</template>
\ No newline at end of file
+	<video
+		ref="videoElement"
+		controlsList="nodownload"
+		autoplay
+		muted
+		loop
+		:poster="posterUrl"
+		:class="videoClass"
+	>
+		<track kind="captions" />
+	</video>
+</template>

From bfdb9145e3c039cd9ac7a291728146d6a23cfc3a Mon Sep 17 00:00:00 2001
From: Shubham Kukreti <57281769+KukretiShubham@users.noreply.github.com>
Date: Wed, 25 Dec 2024 15:03:34 +0530
Subject: [PATCH 03/13] silence types: for mp4box based VideoFetch.vue

---
 src/ui/components/Checkout/Checkout.vue | 1 +
 src/ui/components/Checkout/Result.vue   | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/ui/components/Checkout/Checkout.vue b/src/ui/components/Checkout/Checkout.vue
index 5f0f01d6e..128335cc6 100644
--- a/src/ui/components/Checkout/Checkout.vue
+++ b/src/ui/components/Checkout/Checkout.vue
@@ -41,6 +41,7 @@ import { fetchProfile } from '../../../profile'
 import IconSpinner from '../../vue/IconSpinner.vue'
 import IconInfo from '../../vue/IconInfo.vue'
 import IconCheckCircle from '../../vue/IconCheckCircle.vue'
+// @ts-ignore
 import VideoFetch from '../../vue/VideoFetch.vue'
 import IconBouncingArrowRight from '../../vue/IconBouncingArrowRight.vue'
 
diff --git a/src/ui/components/Checkout/Result.vue b/src/ui/components/Checkout/Result.vue
index bc759e02c..ef7c5ccb6 100644
--- a/src/ui/components/Checkout/Result.vue
+++ b/src/ui/components/Checkout/Result.vue
@@ -10,6 +10,7 @@ import { i18nFactory } from '../../../i18n'
 import { markdownToHtml } from '../../../markdown'
 import Modal from '../Modal.vue'
 import ModalCheckout from './ModalCheckout.vue'
+// @ts-ignore
 import VideoFetch from '../../vue/VideoFetch.vue'
 
 const i18nBase = i18nFactory(Strings)

From dd67d873576292eefe1323e05361eaa02446ca24 Mon Sep 17 00:00:00 2001
From: Shubham Kukreti <57281769+KukretiShubham@users.noreply.github.com>
Date: Wed, 25 Dec 2024 15:03:53 +0530
Subject: [PATCH 04/13] lint

---
 src/ui/components/Checkout/Checkout.vue      | 12 ++++++------
 src/ui/components/Checkout/ModalCheckout.vue | 20 ++++++++++----------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/ui/components/Checkout/Checkout.vue b/src/ui/components/Checkout/Checkout.vue
index 128335cc6..19f2ae9a7 100644
--- a/src/ui/components/Checkout/Checkout.vue
+++ b/src/ui/components/Checkout/Checkout.vue
@@ -619,12 +619,12 @@ onUnmounted(() => {
 				}}</span>
 				<button
 					v-if="clubsProfile === undefined"
-					class="hs-button is-large is-filled @container/clb_checkout_signin_button relative flex w-full items-center gap-2 rounded-md"
+					class="hs-button is-large is-filled relative flex w-full items-center gap-2 rounded-md @container/clb_checkout_signin_button"
 					@click="signIn"
 				>
 					<IconBouncingArrowRight
 						v-if="account === undefined"
-						class="@xs/clb_checkout_signin_button:left-5 absolute -left-2"
+						class="absolute -left-2 @xs/clb_checkout_signin_button:left-5"
 					/>
 					<IconSpinner v-else class="absolute left-5 size-5" />
 					<span class="font-bold">{{ i18n('SignIn') }}</span>
@@ -732,7 +732,7 @@ onUnmounted(() => {
 						"
 						:data-is-approving="isApproving"
 						:data-is-fetching="isFetchingApproval === 'progress'"
-						class="hs-button is-large is-fullwidth @container/clb_checkout_approval_button group relative"
+						class="hs-button is-large is-fullwidth group relative @container/clb_checkout_approval_button"
 						:class="
 							approveNeeded === false ? 'is-outlined border-[1px]' : 'is-filled'
 						"
@@ -750,7 +750,7 @@ onUnmounted(() => {
 							type="solid"
 						/>
 						<IconBouncingArrowRight
-							class="@xs/clb_checkout_approval_button:left-5 absolute -left-2 group-disabled:hidden"
+							class="absolute -left-2 group-disabled:hidden @xs/clb_checkout_approval_button:left-5"
 						/>
 
 						{{
@@ -788,7 +788,7 @@ onUnmounted(() => {
 							"
 							:data-is-staking="isStaking"
 							:data-is-fetching="isFetchingFunds === 'progress'"
-							class="hs-button is-large is-filled @container/clb_checkout_pay_button group relative"
+							class="hs-button is-large is-filled group relative @container/clb_checkout_pay_button"
 							:class="insufficientFunds ? 'bg-red-600' : ''"
 						>
 							<IconSpinner
@@ -796,7 +796,7 @@ onUnmounted(() => {
 								class="absolute left-5 size-5"
 							/>
 							<IconBouncingArrowRight
-								class="@xs/clb_checkout_pay_button:left-5 absolute -left-2 group-disabled:hidden"
+								class="absolute -left-2 group-disabled:hidden @xs/clb_checkout_pay_button:left-5"
 							/>
 
 							{{ i18n('PayWith', [verifiedPropsCurrency.toUpperCase()]) }}
diff --git a/src/ui/components/Checkout/ModalCheckout.vue b/src/ui/components/Checkout/ModalCheckout.vue
index 70e566992..1d93a59c8 100644
--- a/src/ui/components/Checkout/ModalCheckout.vue
+++ b/src/ui/components/Checkout/ModalCheckout.vue
@@ -123,10 +123,10 @@ onMounted(async () => {
 
 <template>
 	<div
-		class="@container/clb_result_modal m-auto w-full max-w-screen-lg rounded-xl bg-white p-4 text-black shadow"
+		class="m-auto w-full max-w-screen-lg rounded-xl bg-white p-4 text-black shadow @container/clb_result_modal"
 	>
 		<div
-			class="bg-color-navy @xl/clb_result_modal:h-96 @xl/clb_result_modal:min-h-0 @xl/clb_result_modal:p-8 relative mb-6 flex h-auto min-h-52 w-full flex-col items-center justify-center overflow-hidden rounded-md border border-black p-2"
+			class="bg-color-navy relative mb-6 flex h-auto min-h-52 w-full flex-col items-center justify-center overflow-hidden rounded-md border border-black p-2 @xl/clb_result_modal:h-96 @xl/clb_result_modal:min-h-0 @xl/clb_result_modal:p-8"
 		>
 			<div
 				class="w-h-screen bg-focus-lines origin-zero animate-spin-slow mask absolute inset-2/4 -translate-x-1/2 -translate-y-1/2 bg-center bg-no-repeat"
@@ -134,7 +134,7 @@ onMounted(async () => {
 			<h3 class="mb-1 text-white">
 				<span
 					v-if="name"
-					class="@xl/clb_result_modal:text-3xl text-xl italic"
+					class="text-xl italic @xl/clb_result_modal:text-3xl"
 					>{{ name }}</span
 				>
 			</h3>
@@ -142,7 +142,7 @@ onMounted(async () => {
 			<img
 				v-if="imageSrc"
 				:src="imageSrc"
-				class="@xl/clb_result_modal:max-h-none @xl/clb_result_modal:max-w-xl z-10 max-h-60 min-h-full max-w-60 object-contain"
+				class="z-10 max-h-60 min-h-full max-w-60 object-contain @xl/clb_result_modal:max-h-none @xl/clb_result_modal:max-w-xl"
 			/>
 			<!-- video -->
 			<video
@@ -155,7 +155,7 @@ onMounted(async () => {
 				Your browser does not support the video tag.
 			</video>
 		</div>
-		<div class="@4xl/clb_result_modal:px-52 flex flex-col gap-6 px-0">
+		<div class="flex flex-col gap-6 px-0 @4xl/clb_result_modal:px-52">
 			<!-- description -->
 			<aside
 				v-if="description"
@@ -172,12 +172,12 @@ onMounted(async () => {
 			<slot name="after:description" />
 
 			<div
-				class="@4xl/clb_result_modal:flex-row @4xl/clb_result_modal:justify-between @4xl/clb_result_modal:gap-0 flex w-full flex-col gap-4"
+				class="flex w-full flex-col gap-4 @4xl/clb_result_modal:flex-row @4xl/clb_result_modal:justify-between @4xl/clb_result_modal:gap-0"
 			>
 				<a
 					v-if="cronFinished"
 					:href="passportPageUrl"
-					class="hs-button is-filled @4xl/clb_result_modal:px-12 @4xl/clb_result_modal:py-6 rounded-lg border px-0 py-4 text-base"
+					class="hs-button is-filled rounded-lg border px-0 py-4 text-base @4xl/clb_result_modal:px-12 @4xl/clb_result_modal:py-6"
 				>
 					{{ i18n('Passport') }}
 				</a>
@@ -185,21 +185,21 @@ onMounted(async () => {
 					v-if="!cronFinished"
 					@click="onClickPassport"
 					:disabled="clicked"
-					class="hs-button is-filled @4xl/clb_result_modal:px-12 @4xl/clb_result_modal:py-6 items-center justify-center gap-2 rounded-lg border px-0 py-4 text-base disabled:animate-pulse disabled:bg-blue-600"
+					class="hs-button is-filled items-center justify-center gap-2 rounded-lg border px-0 py-4 text-base disabled:animate-pulse disabled:bg-blue-600 @4xl/clb_result_modal:px-12 @4xl/clb_result_modal:py-6"
 				>
 					{{ i18n('Passport') }}
 					<Spinner v-if="clicked" />
 				</button>
 				<a
 					href="/"
-					class="hs-button is-filled @4xl/clb_result_modal:py-6 rounded-lg border px-12 py-4 text-base"
+					class="hs-button is-filled rounded-lg border px-12 py-4 text-base @4xl/clb_result_modal:py-6"
 				>
 					{{ i18n('Home') }}
 				</a>
 				<button
 					v-if="false /* HIDDEN FOR NOW */"
 					@click="modalClose"
-					class="hs-button is-filled @4xl/clb_result_modal:py-6 rounded-lg border px-12 py-4 text-base"
+					class="hs-button is-filled rounded-lg border px-12 py-4 text-base @4xl/clb_result_modal:py-6"
 				>
 					{{ i18n('Close') }}
 				</button>

From 53339095fb7f7eebc0a33a76d962476b52b53b3e Mon Sep 17 00:00:00 2001
From: Shubham Kukreti <57281769+KukretiShubham@users.noreply.github.com>
Date: Wed, 25 Dec 2024 15:07:10 +0530
Subject: [PATCH 05/13] export: VideoFetch.vue

---
 src/ui/vue/index.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/ui/vue/index.ts b/src/ui/vue/index.ts
index e9a217eda..aa2e051f0 100644
--- a/src/ui/vue/index.ts
+++ b/src/ui/vue/index.ts
@@ -16,6 +16,7 @@ import IconMoon from './IconMoon.vue'
 import IconPhone from './IconPhone.vue'
 import IconSpinner from './IconSpinner.vue'
 import IconSun from './IconSun.vue'
+import VideoFetch from './VideoFetch.vue'
 
 import Checkout from '../components/Checkout/Checkout.vue'
 import Result from '../components/Checkout/Result.vue'
@@ -39,6 +40,7 @@ export {
 	IconPhone,
 	IconSpinner,
 	IconSun,
+	VideoFetch,
 	Checkout,
 	Result,
 }

From 3f4991e162c88b8e22339308a9ed01b621c82bcf Mon Sep 17 00:00:00 2001
From: Shubham Kukreti <57281769+KukretiShubham@users.noreply.github.com>
Date: Wed, 25 Dec 2024 18:44:31 +0530
Subject: [PATCH 06/13] 3.22.11

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 7a60172b6..1f738bd46 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@devprotocol/clubs-core",
-	"version": "3.22.10",
+	"version": "3.22.11",
 	"description": "Core library for Clubs",
 	"main": "dist/index.mjs",
 	"exports": {

From e571680c83e044981c7227e2158f7a03cbd275e7 Mon Sep 17 00:00:00 2001
From: Shubham Kukreti <57281769+KukretiShubham@users.noreply.github.com>
Date: Thu, 26 Dec 2024 12:36:16 +0530
Subject: [PATCH 07/13] add: VideoFetch.svelte

---
 src/ui/svelte/VideoFetch.svelte | 223 ++++++++++++++++++++++++++++++++
 src/ui/svelte/index.ts          |   2 +
 2 files changed, 225 insertions(+)
 create mode 100644 src/ui/svelte/VideoFetch.svelte

diff --git a/src/ui/svelte/VideoFetch.svelte b/src/ui/svelte/VideoFetch.svelte
new file mode 100644
index 000000000..60acf4511
--- /dev/null
+++ b/src/ui/svelte/VideoFetch.svelte
@@ -0,0 +1,223 @@
+<script>
+	// Not using types in file as mp4box doesn't export type modules
+	import { onMount } from 'svelte'
+	import MP4Box from 'mp4box'
+
+	export let url
+	export let posterUrl
+	export let videoClass
+
+	let videoElement
+	let mediaSource
+	let sourceBuffers = {}
+	let mp4boxfile
+	let pendingSegments = {}
+
+	// Configure chunk size (1MB). Adjust if needed for performance or latency.
+	const CHUNK_SIZE = 1_000_000
+	let nextRangeStart = 0
+	let totalFileSize = 0
+	let isDownloading = false
+
+	onMount(() => {
+		if (!url) return
+
+		mediaSource = new MediaSource()
+		videoElement.src = URL.createObjectURL(mediaSource)
+		mediaSource.addEventListener('sourceopen', onSourceOpen)
+
+		setupMp4Box()
+		startDownload()
+	})
+
+	function onSourceOpen() {
+		// MediaSource is ready to accept SourceBuffers
+		// console.log('MediaSource opened') // Uncomment for debugging
+	}
+
+	function setupMp4Box() {
+		mp4boxfile = MP4Box.createFile()
+
+		// Fired when MP4Box starts parsing the "moov" box (movie metadata)
+		mp4boxfile.onMoovStart = function () {
+			// console.log('Parsing movie information...')
+		}
+
+		// Fired when MP4Box has the "moov" box and all track info ready
+		mp4boxfile.onReady = function (info) {
+			// Instead of manually setting mediaSource.duration, rely on segment-based approach
+			initializeTracksAndBuffers(info)
+			const initSegs = mp4boxfile.initializeSegmentation()
+
+			// Create and append initial SourceBuffers based on track information
+			initSegs.forEach((seg) => {
+				const trackInfo = info.tracks.find((t) => t.id === seg.id)
+				const codec = seg.codec || trackInfo?.codec
+				if (!codec) {
+					console.error(`Codec undefined for track ID: ${seg.id}`)
+					return
+				}
+
+				const mime = `video/mp4; codecs="${codec}"`
+				if (MediaSource.isTypeSupported(mime)) {
+					const sb = mediaSource.addSourceBuffer(mime)
+					sourceBuffers[seg.id] = sb
+
+					// Handle subsequent segment appending after one finishes
+					sb.addEventListener('updateend', () => onUpdateEnd(seg.id))
+
+					// Append the initialization segment
+					sb.appendBuffer(seg.buffer)
+					// console.log(`SourceBuffer added with mime: ${mime}`)
+				} else {
+					console.error(`Unsupported MIME type: ${mime}`)
+				}
+			})
+
+			// Start MP4Box file processing
+			mp4boxfile.start()
+			videoElement.value?.play().catch((e) => console.error('Play error:', e))
+		}
+
+		// Fired when a media segment is ready
+		mp4boxfile.onSegment = function (
+			trackId,
+			user,
+			buffer,
+			sampleNum,
+			is_last
+		) {
+			// If the corresponding SourceBuffer is ready, append immediately
+			// Otherwise, queue it up in pendingSegments
+			if (sourceBuffers[trackId] && !sourceBuffers[trackId].updating) {
+				sourceBuffers[trackId].appendBuffer(buffer)
+			} else {
+				pendingSegments[trackId]?.push(buffer)
+			}
+		}
+	}
+
+	function initializeTracksAndBuffers(info) {
+		info.tracks.forEach((track) => {
+			// Define segmentation options: smaller durations lead to more frequent, smaller segments.
+			mp4boxfile.setSegmentOptions(track.id, { duration: 2 })
+			pendingSegments[track.id] = [] // Initialize each track's queue
+		})
+	}
+
+	function onUpdateEnd(trackId) {
+		// After finishing appending to a SourceBuffer,
+		// check if there are pending segments and append the next one if available.
+		if (
+			pendingSegments[trackId]?.length > 0 &&
+			!sourceBuffers[trackId].updating
+		) {
+			const nextBuffer = pendingSegments[trackId].shift()
+			sourceBuffers[trackId].appendBuffer(nextBuffer)
+		}
+
+		// Check if the entire stream can now be ended.
+		maybeEndOfStream()
+	}
+
+	async function startDownload() {
+		isDownloading = true
+		try {
+			totalFileSize = await fetchFileSize()
+			downloadChunk()
+		} catch (err) {
+			console.error('Could not fetch file size:', err)
+		}
+	}
+
+	function fetchFileSize() {
+		return new Promise((resolve, reject) => {
+			const xhr = new XMLHttpRequest()
+			xhr.open('HEAD', url, true)
+			xhr.onload = () => {
+				if (xhr.status >= 200 && xhr.status < 300) {
+					const length = parseInt(
+						xhr.getResponseHeader('Content-Length') || '0',
+						10
+					)
+					resolve(length)
+				} else {
+					reject(new Error(`HEAD request failed with status ${xhr.status}`))
+				}
+			}
+			xhr.onerror = () => reject(new Error('Network error during HEAD request'))
+			xhr.send()
+		})
+	}
+
+	function downloadChunk() {
+		if (!isDownloading) return
+
+		// If we've downloaded the entire file, flush MP4Box and possibly end the stream
+		if (nextRangeStart >= totalFileSize) {
+			mp4boxfile.flush()
+			maybeEndOfStream()
+			// Start playback after all data is processed
+			videoElement.play().catch((e) => console.error('Play error:', e))
+			return
+		}
+
+		const end = Math.min(nextRangeStart + CHUNK_SIZE - 1, totalFileSize - 1)
+		const xhr = new XMLHttpRequest()
+		xhr.open('GET', url, true)
+		xhr.responseType = 'arraybuffer'
+		xhr.setRequestHeader('Range', `bytes=${nextRangeStart}-${end}`)
+
+		xhr.onload = function () {
+			if (xhr.status >= 200 && xhr.status < 300) {
+				const buffer = xhr.response
+				// MP4Box requires `fileStart` to know where this chunk fits in the file
+				buffer.fileStart = nextRangeStart
+				nextRangeStart = end + 1
+
+				const next = mp4boxfile.appendBuffer(buffer)
+				if (next) {
+					// Giving some delay before requesting the next chunk can help throttle bandwidth
+					setTimeout(downloadChunk, 100)
+				}
+			} else {
+				console.error('Error downloading chunk. Status:', xhr.status)
+			}
+		}
+
+		xhr.onerror = function (e) {
+			console.error('XHR error during chunk download:', e)
+		}
+		xhr.send()
+	}
+
+	function maybeEndOfStream() {
+		// Check if all data is downloaded
+		if (nextRangeStart >= totalFileSize) {
+			// Verify no pending segments and no buffers updating
+			const noPending = Object.values(pendingSegments).every(
+				(arr) => arr.length === 0
+			)
+			const noUpdating = Object.values(sourceBuffers).every(
+				(sb) => !sb.updating
+			)
+
+			if (noPending && noUpdating && mediaSource.readyState === 'open') {
+				// All segments have been appended successfully
+				mediaSource.endOfStream()
+			}
+		}
+	}
+</script>
+
+<video
+	bind:this={videoElement}
+	controlsList="nodownload"
+	loop
+	autoplay
+	muted
+	poster={posterUrl}
+	class={videoClass}
+>
+	<track kind="captions" />
+</video>
diff --git a/src/ui/svelte/index.ts b/src/ui/svelte/index.ts
index b1dfeabd8..5191f611f 100644
--- a/src/ui/svelte/index.ts
+++ b/src/ui/svelte/index.ts
@@ -15,6 +15,7 @@ import IconMoon from './IconMoon.svelte'
 import IconPhone from './IconPhone.svelte'
 import IconSpinner from './IconSpinner.svelte'
 import IconSun from './IconSun.svelte'
+import VideoFetch from './VideoFetch.svelte'
 
 export {
 	IconArrowRight,
@@ -25,4 +26,5 @@ export {
 	IconPhone,
 	IconSpinner,
 	IconSun,
+	VideoFetch,
 }

From ad1d31b68f7f3840d6fa028fbb8e7b3c56832d0b Mon Sep 17 00:00:00 2001
From: Shubham Kukreti <57281769+KukretiShubham@users.noreply.github.com>
Date: Thu, 26 Dec 2024 12:36:43 +0530
Subject: [PATCH 08/13] 3.22.12

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 1f738bd46..89759858d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@devprotocol/clubs-core",
-	"version": "3.22.11",
+	"version": "3.22.12",
 	"description": "Core library for Clubs",
 	"main": "dist/index.mjs",
 	"exports": {

From 3e54640ede220b2cd4e78c47c0821cdd3f232ddd Mon Sep 17 00:00:00 2001
From: Shubham Kukreti <57281769+KukretiShubham@users.noreply.github.com>
Date: Thu, 26 Dec 2024 14:43:04 +0530
Subject: [PATCH 09/13] add: image blob to checkout & result

---
 src/ui/components/Checkout/Checkout.vue | 14 +++++++++++++-
 src/ui/components/Checkout/Result.vue   | 15 ++++++++++++++-
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/ui/components/Checkout/Checkout.vue b/src/ui/components/Checkout/Checkout.vue
index 19f2ae9a7..e3dd510ff 100644
--- a/src/ui/components/Checkout/Checkout.vue
+++ b/src/ui/components/Checkout/Checkout.vue
@@ -53,6 +53,8 @@ const REGEX_DESC_EMAIL = /{EMAIL}/g
 const i18nBase = i18nFactory(Strings)
 let i18n = ref<ReturnType<typeof i18nBase>>(i18nBase(['en']))
 
+const imageRef = ref<HTMLImageElement | null>(null)
+
 type Props = {
 	amount?: number
 	destination?: string
@@ -539,6 +541,16 @@ onMounted(async () => {
 			previewName.value = sTokens?.name
 		}
 	)
+	try {
+		if (previewImageSrc.value && imageRef.value) {
+			const response = await fetch(previewImageSrc.value)
+			const blob = await response.blob()
+			const blobDataUrl = URL.createObjectURL(blob)
+			imageRef.value.src = blobDataUrl
+		}
+	} catch (error) {
+		console.error('Error loading image:', error)
+	}
 })
 
 onUnmounted(() => {
@@ -580,7 +592,7 @@ onUnmounted(() => {
 					>
 						<img
 							v-if="previewImageSrc"
-							:src="previewImageSrc"
+							ref="imageRef"
 							class="h-auto w-full rounded-lg object-cover object-center"
 						/>
 						<Skeleton
diff --git a/src/ui/components/Checkout/Result.vue b/src/ui/components/Checkout/Result.vue
index ef7c5ccb6..39548b932 100644
--- a/src/ui/components/Checkout/Result.vue
+++ b/src/ui/components/Checkout/Result.vue
@@ -16,6 +16,8 @@ import VideoFetch from '../../vue/VideoFetch.vue'
 const i18nBase = i18nFactory(Strings)
 let i18n = i18nBase(['en'])
 
+const imageRef = ref<HTMLImageElement | null>(null)
+
 type Props = {
 	eoa?: string
 	id?: number | string
@@ -83,6 +85,17 @@ onMounted(async () => {
 
 	// Modal Open
 	modalOpen()
+
+	try {
+		if (props?.imageSrc && imageRef.value) {
+			const response = await fetch(props?.imageSrc)
+			const blob = await response.blob()
+			const blobDataUrl = URL.createObjectURL(blob)
+			imageRef.value.src = blobDataUrl
+		}
+	} catch (error) {
+		console.error('Error loading image:', error)
+	}
 })
 </script>
 
@@ -115,7 +128,7 @@ onMounted(async () => {
 					<div class="rounded-lg border border-black/20 bg-black/10 p-4">
 						<img
 							v-if="imageSrc"
-							:src="imageSrc"
+							ref="imageRef"
 							class="h-auto w-full rounded object-cover object-center sm:h-full sm:w-full"
 						/>
 						<!-- video -->

From 368b388e824d751e304c68a98d4d6840d1b1310a Mon Sep 17 00:00:00 2001
From: Shubham Kukreti <57281769+KukretiShubham@users.noreply.github.com>
Date: Thu, 26 Dec 2024 14:57:54 +0530
Subject: [PATCH 10/13] 3.22.14

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 89759858d..07607f23a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@devprotocol/clubs-core",
-	"version": "3.22.12",
+	"version": "3.22.14",
 	"description": "Core library for Clubs",
 	"main": "dist/index.mjs",
 	"exports": {

From edf581dc97490db47f79dca4dcc858031ba746e5 Mon Sep 17 00:00:00 2001
From: Shubham Kukreti <57281769+KukretiShubham@users.noreply.github.com>
Date: Thu, 26 Dec 2024 19:46:53 +0530
Subject: [PATCH 11/13] use useTemplateRef instead of ref

---
 src/ui/components/Checkout/Checkout.vue | 4 ++--
 src/ui/components/Checkout/Result.vue   | 4 ++--
 src/ui/vue/VideoFetch.vue               | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/ui/components/Checkout/Checkout.vue b/src/ui/components/Checkout/Checkout.vue
index e3dd510ff..90b84343b 100644
--- a/src/ui/components/Checkout/Checkout.vue
+++ b/src/ui/components/Checkout/Checkout.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, type ComputedRef, computed } from 'vue'
+import { onMounted, onUnmounted, ref, useTemplateRef, type ComputedRef, computed } from 'vue'
 import { createErc20Contract } from '@devprotocol/dev-kit'
 import {
 	positionsCreate,
@@ -53,7 +53,7 @@ const REGEX_DESC_EMAIL = /{EMAIL}/g
 const i18nBase = i18nFactory(Strings)
 let i18n = ref<ReturnType<typeof i18nBase>>(i18nBase(['en']))
 
-const imageRef = ref<HTMLImageElement | null>(null)
+const imageRef = useTemplateRef(`imageRef`)
 
 type Props = {
 	amount?: number
diff --git a/src/ui/components/Checkout/Result.vue b/src/ui/components/Checkout/Result.vue
index 39548b932..a1e530fd9 100644
--- a/src/ui/components/Checkout/Result.vue
+++ b/src/ui/components/Checkout/Result.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { onMounted, ref, type ComputedRef, computed } from 'vue'
+import { onMounted, ref, useTemplateRef, type ComputedRef, computed } from 'vue'
 import { type UndefinedOr, whenDefinedAll } from '@devprotocol/util-ts'
 import { JsonRpcProvider } from 'ethers'
 import Skeleton from '../Skeleton/Skeleton.vue'
@@ -16,7 +16,7 @@ import VideoFetch from '../../vue/VideoFetch.vue'
 const i18nBase = i18nFactory(Strings)
 let i18n = i18nBase(['en'])
 
-const imageRef = ref<HTMLImageElement | null>(null)
+const imageRef = useTemplateRef(`imageRef`)
 
 type Props = {
 	eoa?: string
diff --git a/src/ui/vue/VideoFetch.vue b/src/ui/vue/VideoFetch.vue
index 9724b0706..57b1be16b 100644
--- a/src/ui/vue/VideoFetch.vue
+++ b/src/ui/vue/VideoFetch.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref } from 'vue'
+import { onMounted, useTemplateRef } from 'vue'
 import MP4Box from 'mp4box'
 
 const props = defineProps({
@@ -18,7 +18,7 @@ const props = defineProps({
 })
 
 // Refs and variables
-const videoElement = ref(null)
+const videoElement = useTemplateRef(`videoElement`)
 let mediaSource = null
 let sourceBuffers = {}
 let mp4boxfile = null

From 7be1037e2c0a2a1a041c9e8abd7a2792438d9168 Mon Sep 17 00:00:00 2001
From: Shubham Kukreti <57281769+KukretiShubham@users.noreply.github.com>
Date: Thu, 26 Dec 2024 19:47:10 +0530
Subject: [PATCH 12/13] lint

---
 src/ui/components/Checkout/Checkout.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/ui/components/Checkout/Checkout.vue b/src/ui/components/Checkout/Checkout.vue
index 90b84343b..d0e3780a0 100644
--- a/src/ui/components/Checkout/Checkout.vue
+++ b/src/ui/components/Checkout/Checkout.vue
@@ -1,5 +1,12 @@
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, useTemplateRef, type ComputedRef, computed } from 'vue'
+import {
+	onMounted,
+	onUnmounted,
+	ref,
+	useTemplateRef,
+	type ComputedRef,
+	computed,
+} from 'vue'
 import { createErc20Contract } from '@devprotocol/dev-kit'
 import {
 	positionsCreate,

From c6b8e527dcdc7f3cf383a2127d70411043734cb5 Mon Sep 17 00:00:00 2001
From: Shubham Kukreti <57281769+KukretiShubham@users.noreply.github.com>
Date: Thu, 26 Dec 2024 20:54:44 +0530
Subject: [PATCH 13/13] 3.22.15

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 07607f23a..88e6b9a25 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@devprotocol/clubs-core",
-	"version": "3.22.14",
+	"version": "3.22.15",
 	"description": "Core library for Clubs",
 	"main": "dist/index.mjs",
 	"exports": {