Starlight_Lancher/apps/app-frontend/src/components/ui/SkinSiteFrame.vue

<script setup lang="ts">
import { defineMessages, useVIntl } from '@modrinth/ui'
import { onMounted, onUnmounted, ref } from 'vue'

import {
	receiveSkinSiteMessage,
	resetSkinSiteSession,
	setSkinSiteFrame,
	SKIN_SITE_ORIGIN,
	skinSiteFrameUrl,
} from '@/composables/skin-site-session'

const { formatMessage } = useVIntl()
const messages = defineMessages({
	frameTitle: {
		id: 'app.starlight-skin.frame-title',
		defaultMessage: 'StarLight Skin Site',
	},
})

const frame = ref<HTMLIFrameElement>()
let lastMessage = 0
let expiryTimer: ReturnType<typeof setInterval> | undefined

function connect() {
	const contentWindow = frame.value?.contentWindow ?? null
	setSkinSiteFrame(contentWindow)
	contentWindow?.postMessage({ type: 'starlight-skin-session-connect' }, SKIN_SITE_ORIGIN)
}

function receive(event: MessageEvent) {
	if (receiveSkinSiteMessage(event, frame.value?.contentWindow ?? null)) lastMessage = Date.now()
}

onMounted(() => {
	window.addEventListener('message', receive)
	connect()
	expiryTimer = setInterval(() => {
		if (lastMessage && Date.now() - lastMessage > 90_000) resetSkinSiteSession()
	}, 10_000)
})

onUnmounted(() => {
	window.removeEventListener('message', receive)
	clearInterval(expiryTimer)
	setSkinSiteFrame(null)
	resetSkinSiteSession()
})
</script>

<template>
	<iframe
		ref="frame"
		:src="skinSiteFrameUrl"
		:title="formatMessage(messages.frameTitle)"
		class="block h-full min-h-0 w-full border-0"
		@load="connect"
	/>
</template>