fx: restart prompt & vid replacement (#27)

* fx: callback isFixed issue

* fx: autoplay in batterysaver mode

* up: vue

* msc: ipx routes not working

* fx: prerendering issue

* fx: nuxt image route detection (prerender)

* fx: contact btn scaling issue

components/Rotor/index.vue

@@ -36,7 +36,7 @@ const blocker = new BlockExceptionHandler('rotor-component')
 let pendingAlign: NodeJS.Timeout | null = null
 
 //
-onBeforeUnmount(() => {
+onUnmounted(() => {
 	exit()
 })
 
@@ -49,8 +49,6 @@ function enter(alignDelay = 800) {
 	if (pendingAlign) clearTimeout(pendingAlign)
 	pendingAlign = setTimeout(() => {
 		alignSwiper()
-		window.addEventListener('touchend', alignSwiper, { passive: false })
-		window.addEventListener('wheel', alignSwiper, { passive: false })
 		pendingAlign = null
 	}, alignDelay) // delay to prevent scroll jump on scroll stop
 
@@ -59,29 +57,37 @@ function enter(alignDelay = 800) {
 defineExpose({ enter })
 
 function exit() {
+	if (pendingAlign) clearTimeout(pendingAlign)
+	pendingAlign = null
+	exitScrollToCb()
+
+	isFixed.value = false
+
 	blocker.detachEvent('wheel', window)
 	blocker.detachEvent('touchstart', window)
 	rotorWrap.value?.classList.remove('block-touch-actions')
 
-	window.removeEventListener('touchend', alignSwiper)
-	window.removeEventListener('wheel', alignSwiper)
-
-	isFixed.value = false
 	props.exitCallback?.()
 }
 
 //
-const { scrollToCb } = useScrollCallback()
+const { scrollToCb, exitScrollToCb } = useScrollCallback()
 const rotorBottom = computed(() => {
 	if (!rotorWrap.value) return 0
 	return rotorWrap.value?.offsetTop + rotorWrap.value?.offsetHeight
 })
 function alignSwiper() {
 	scrollToCb(rotorBottom.value - window.innerHeight, () => {
 		isFixed.value = true
+		// console.log('log, scrollToCb -> callback', 'isFixed:', isFixed.value)
 	})
 }
 
+//
+// watchImmediate(isFixed, (val) => {
+// 	console.log('log, isFixed:', val)
+// })
+
 //
 store.addSegmentCallback('getRotorButtons', () => {
 	if (store.activeSegment.buttons?.length == 0) return

components/Video.vue

@@ -1,7 +1,7 @@
 <template>
 	<video
-		v-if="props.src && !error"
-		autoplay
+		ref="video"
+		v-if="props.src && !showPoster"
 		muted
 		loop
 		playsinline
@@ -12,17 +12,19 @@
 			:src="props.src"
 			type="video/mp4"
 			class="hidden"
-			:onerror="fallback"
+			:onerror="
+				() => {
+					showPoster = true
+				}
+			"
 		/>
 	</video>
 	<Image v-else :src="props.poster" />
 </template>
 
 <script setup lang="ts">
-const error = ref(false)
-function fallback() {
-	error.value = true
-}
+const video = ref<HTMLVideoElement>()
+const showPoster = ref(false)
 const props = defineProps({
 	src: {
 		type: String,
@@ -34,4 +36,15 @@ const props = defineProps({
 		default: '',
 	},
 })
+
+// allows nuxt image to find poster for prerendering
+if (process.env.NODE_ENV === 'prerender') {
+	showPoster.value = true
+}
+
+onMounted(() => {
+	video.value?.play().catch((e) => {
+		showPoster.value = true
+	})
+})
 </script>

composables/useScrollCallback.ts

@@ -13,6 +13,7 @@ export const useScrollCallback = () => {
 	let cb: () => void
 
 	function scrollToCb(top: number, callback: () => void) {
+		// console.log('log, enter scrollToCb')
 		cb = callback
 		topRound = Math.round(top)
 
@@ -30,10 +31,18 @@ export const useScrollCallback = () => {
 		onScroll()
 	}
 
+	function exitScrollToCb() {
+		win.removeEventListener('scroll', onScroll)
+		if (scrollToInterval) clearInterval(scrollToInterval)
+		scrollToInterval = null
+		cb = () => {}
+		// console.log('log, exitScrollToCb')s
+	}
+
 	function onScroll() {
 		if (Math.round(win.scrollY) === topRound) {
 			win.removeEventListener('scroll', onScroll)
-			if (scrollToInterval) clearTimeout(scrollToInterval)
+			if (scrollToInterval) clearInterval(scrollToInterval)
 			scrollToInterval = null
 			cb()
 		}
@@ -44,11 +53,8 @@ export const useScrollCallback = () => {
 	})
 
 	onUnmounted(() => {
-		if (scrollToInterval) clearInterval(scrollToInterval)
-		scrollToInterval = null
-		win.removeEventListener('scroll', onScroll)
-		cb = () => {}
+		exitScrollToCb()
 	})
 
-	return { scrollToCb }
+	return { scrollToCb, exitScrollToCb }
 }