@playpilot/tpi 8.36.3 → 8.37.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "8.36.3",
+	"version": "8.37.1",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

package/src/lib/modal.ts

@@ -20,6 +20,8 @@ type Modal = {
   type: ModalType
   data: TitleData | TitleData[] | ParticipantData | null
   scrollPosition?: number
+  initialIndex?: number
+  props?: Record<string, any>
 }
 
 const modals: Modal[] = []
@@ -105,14 +107,14 @@ export function getAllModals(): Modal[] {
 }
 
 function saveCurrentModalScrollPosition(): void {
-  // The scrollable element differs on mobile and desktop.
-  // On desktop you scroll the entire parent but on mobile you scroll the dialog itself.
-  const selector = `[data-playpilot-link-injections] ${window.innerWidth > mobileBreakpoint ? '.modal' : '.dialog'}`
-  const element = document.querySelector(selector)
+  // Some modals have their own scroll target which can be set with the corresponding data attribute
+  const selector = window.innerWidth > mobileBreakpoint ? '.modal' : '.dialog'
+  const element = getPlayPilotWrapperElement().querySelector('[data-modal-scroll-target]') || getPlayPilotWrapperElement().querySelector(selector)
 
   if (!element?.scrollTop) return
 
   modals[modals.length - 1].scrollPosition = element.scrollTop
+  modals[modals.length - 1].props = { initialIndex: parseInt(getPlayPilotWrapperElement().querySelector<HTMLElement>('[data-active-index]')?.dataset.activeIndex || '0') }
 }
 
 export function openModalForInjectedLink(event: MouseEvent, injections: LinkInjection[]): void {

package/src/routes/components/Explore/Routes/ExploreModal.svelte

@@ -38,14 +38,13 @@
       data,
       props: {
         onclose: () => navigate('home'),
-        pushState: false,
       },
     })
   }
 </script>
 
 {#await openModalViaRoute()}
-  <Modal blur pushState={false}>
+  <Modal blur>
     {#snippet dialog()}
       <div class="loading">
         <div class="bar"></div>
@@ -55,7 +54,7 @@
     {/snippet}
   </Modal>
 {:catch}
-  <Modal blur onclose={() => navigate('home')} pushState={false}>
+  <Modal blur onclose={() => navigate('home')}>
     <div class="error">
       {t('An Error Occurred')}
     </div>

package/src/routes/components/Modals/Modal.svelte

@@ -10,6 +10,7 @@
   import { destroyAllModals, getPreviousModal, goBackToPreviousModal } from '$lib/modal'
   import { focustrap } from '$lib/actions/focustrap'
   import { getScrollRoot } from '$lib/scroll'
+  import { getPlayPilotWrapperElement } from '$lib/injection'
 
   interface Props {
     children?: Snippet
@@ -21,7 +22,6 @@
     blur?: boolean
     closeButtonStyle?: 'shadow' | 'flat'
     initialScrollPosition?: number
-    pushState?: boolean
     onscroll?: () => void
     onclose?: () => void
   }
@@ -36,7 +36,6 @@
     blur = false,
     closeButtonStyle = 'shadow',
     initialScrollPosition = 0,
-    pushState = true,
     onscroll = () => null,
     onclose = () => null,
   }: Props = $props()
@@ -64,11 +63,7 @@
 
     hasPreviousModal = !!getPreviousModal()
 
-    // Add modal state to the browser history. This allows us to close to modal when using the back button.
-    // Only do this for the very first modal opened in the stack. The back button always fully closes all modals.
-    if (pushState && !hasPreviousModal) window.history.pushState({ modal: true }, '', historyHash)
-
-    requestAnimationFrame(setInitialScrollPosition)
+    requestAnimationFrame(() => requestAnimationFrame(setInitialScrollPosition))
 
     return () => {
       if (!document.querySelector('.modal')) scrollElement.classList.remove('playpilot-modal-open')
@@ -81,7 +76,8 @@
   })
 
   function setInitialScrollPosition(): void {
-    const scrollableElement = window.innerWidth > mobileBreakpoint ? modalElement : dialogElement
+    /** @see utils/modal.ts > saveCurrentModalScrollPosition */
+    const scrollableElement = getPlayPilotWrapperElement().querySelector('[data-modal-scroll-target]') || (window.innerWidth > mobileBreakpoint ? modalElement : dialogElement)
     scrollableElement?.scrollTo(0, initialScrollPosition)
   }
 
@@ -106,7 +102,6 @@
 
 <svelte:window
   onkeydown={({ key }) => { if (key === 'Escape') close() }}
-  onhashchange={close}
   bind:innerWidth={windowWidth} />
 
 {#snippet closeButton()}
@@ -166,7 +161,7 @@
       transition:scaleOrFly|global>
       {#if hasPreviousModal}
         <div class="close back {closeButtonStyle}">
-          <RoundButton onclick={() => goBackToPreviousModal()} aria-label="Back">
+          <RoundButton onclick={goBackToPreviousModal} aria-label="Back">
             <IconArrow direction="left" />
           </RoundButton>
         </div>

package/src/routes/components/Modals/RailModal.svelte

@@ -20,7 +20,6 @@
 
   const { items, initialIndex = 0, onchange = () => null, onclose = () => null, each, ...restProps }: Props = $props()
 
-
   let slider: TinySlider
   let initialized = $state(false)
   let transitionDuration = $state(prefersReducedMotion.current ? 0 : 300)
@@ -74,11 +73,13 @@
       <TinySlider threshold={40} moveThreshold={40} transitionDuration={initialized ? transitionDuration : 0} bind:this={slider}>
         {#snippet children({ currentIndex })}
           {#each items as item, index}
+            {@const active = currentIndex === index}
+
             <!-- svelte-ignore a11y_click_events_have_key_events -->
             <!-- svelte-ignore a11y_no_static_element_interactions -->
-            <div class="item" class:active={index === currentIndex} onclick={() => setSliderIndex(index)}>
-              {#if Math.abs(index - currentIndex) === 1 || currentIndex === index}
-                <div class="content" transition:fade={{ duration: initialized ? transitionDuration : 0 }}>
+            <div class="item" class:active onclick={() => setSliderIndex(index)} data-active-index={active ? index : null}>
+              {#if Math.abs(index - currentIndex) === 1 || active}
+                <div class="content" data-modal-scroll-target={active ? '' : null} transition:fade={{ duration: initialized ? transitionDuration : 0 }}>
                   {@render each(item, currentIndex)}
                 </div>
               {/if}

package/src/routes/components/Rails/ParticipantsRail.svelte

@@ -77,7 +77,12 @@
   {#if participants?.length}
     <Rail {heading}>
       {#each orderParticipantsByPageTextOccurrence(participants).slice(0, 15) as participant}
-        <button class="participant" data-testid="participant" onclick={event => onclick(event, participant)}>
+        <button
+          class="participant"
+          data-testid="participant"
+          onclick={event => onclick(event, participant)}
+          onmouseenter={() => fetchParticipantBySid(participant.sid)}
+          ontouchstart={() => fetchParticipantBySid(participant.sid)}>
           <ParticipantImage {participant} />
 
           <div class="name">{participant.name}</div>

package/vite._mount.config.js

@@ -1,3 +1,4 @@
+import fs from 'fs'
 import path from 'path'
 import * as dotenv from 'dotenv'
 import { defineConfig } from 'vitest/config'
@@ -8,11 +9,13 @@ dotenv.config({ path: '.env' })
 
 export default defineConfig(({ mode }) => {
   const isEditiorial = mode === 'editorial'
+  const fileName = isEditiorial ? 'editorial.mount.js' : 'mount.js'
 
   return {
     plugins: [
       svelte(),
       injectEnvVariables,
+      wrapJsToBeSelfContained(fileName),
     ],
 
     build: {
@@ -21,7 +24,7 @@ export default defineConfig(({ mode }) => {
         input: './src/mount.ts',
         output: {
           name: 'PlayPilotMount',
-          entryFileNames: isEditiorial ? 'editorial.mount.js' : 'mount.js',
+          entryFileNames: fileName,
           assetFileNames: (assetInfo) => assetInfo.name,
         },
       },
@@ -56,3 +59,15 @@ const injectEnvVariables = {
     }
   },
 }
+
+const wrapJsToBeSelfContained = (fileName) => ({
+  name: 'wrap-to-be-self-contained',
+  writeBundle() {
+    const distPath = path.resolve(__dirname, './dist')
+    const targetPath = path.join(distPath, fileName)
+    const originalContent = fs.readFileSync(targetPath, 'utf8')
+    const wrappedContent = `(() => {\n${originalContent}\n})();\n`
+
+    fs.writeFileSync(targetPath, wrappedContent)
+  },
+})