@playpilot/tpi 6.6.0 → 6.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "6.6.0",
+	"version": "6.6.2",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
@@ -23,6 +23,7 @@
 		"@types/node": "^25.2.0",
 		"@typescript-eslint/eslint-plugin": "^8.32.1",
 		"@typescript-eslint/parser": "^8.32.1",
+		"dotenv": "^16.4.7",
 		"eslint": "^9.27.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^3.15.0",

package/src/routes/components/Playlinks/Playlink.svelte

@@ -27,6 +27,8 @@
     RENT: t('Rent'),
     TVOD: t('Rent Or Buy'),
   }
+
+  let actionWidth = $state(0)
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -44,7 +46,7 @@
   data-playlink={name}
   rel="sponsored">
 
-  <div class="playlink-content">
+  <div class="playlink-content" style:--action-width={actionWidth ? `${actionWidth}px` : null}>
     <img src={removeImageUrlPrefix(logo_url)} alt="" height="36" width="36" />
 
     <span class="name">{name}</span>
@@ -57,7 +59,7 @@
       <span class="cta">{cta_text}</span>
     {/if}
 
-    <div class="action">
+    <div class="action" bind:clientWidth={actionWidth}>
       {action_text || t('Watch')}
     </div>
 
@@ -161,7 +163,7 @@
     z-index: 5;
     display: grid;
     grid-template-areas: "image name action" "image category action";
-    grid-template-columns: $image-size auto margin(6);
+    grid-template-columns: $image-size auto var(--action-width, margin(6));
     align-items: center;
     gap: 0 margin(0.75);
     padding: margin(0.75);

package/vite.config.js

@@ -1,14 +1,18 @@
 import path from 'path'
+import * as dotenv from 'dotenv'
 import { defineConfig } from 'vitest/config'
 import { sveltekit } from '@sveltejs/kit/vite'
 import { svelte } from '@sveltejs/vite-plugin-svelte'
 import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
 import packageJson from './package.json'
 
+dotenv.config({ path: '.env' })
+
 export default defineConfig(({ command }) => ({
   plugins: [
     command === 'build' ? svelte() : sveltekit(),
     command === 'build' && cssInjectedByJsPlugin(),
+    command === 'build' && injectEnvVariables,
   ],
 
   build: {
@@ -19,7 +23,6 @@ export default defineConfig(({ command }) => ({
         name: 'PlayPilotLinkInjections',
         entryFileNames: 'link-injections.js',
       },
-      external: ['$env/static/public'],
     },
   },
 
@@ -44,3 +47,20 @@ export default defineConfig(({ command }) => ({
     __SCRIPT_VERSION__: JSON.stringify(packageJson.version),
   },
 }))
+
+const injectEnvVariables = {
+  name: 'resolve-env-variables',
+  /** @param {string} id */
+  resolveId(id) {
+    if (id === '$env/static/public') return '\0$env/static/public'
+  },
+  /** @param {string} id */
+  load(id) {
+    if (id === '\0$env/static/public') {
+      return Object.entries(process.env)
+        .filter(([key]) => key.startsWith('PUBLIC_'))
+        .map(([key, value]) => `export const ${key} = ${JSON.stringify(value)};`)
+        .join('\n')
+    }
+  },
+}