@playpilot/tpi 8.0.0-beta.explore-home.11 → 8.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@playpilot/tpi",
3
- "version": "8.0.0-beta.explore-home.11",
3
+ "version": "8.0.0",
4
4
  "type": "module",
5
5
  "scripts": {
6
6
  "dev": "vite dev",
@@ -195,6 +195,7 @@
195
195
  bottom: 0;
196
196
  left: 0;
197
197
  background: theme(detail-backdrop, rgba(0, 0, 0, 0.65));
198
+ backdrop-filter: blur(1.5rem);
198
199
 
199
200
  @include desktop() {
200
201
  overflow-y: auto;
@@ -115,41 +115,43 @@
115
115
  {/each}
116
116
  </Rail>
117
117
  {:then titles}
118
- <Rail
119
- bind:slider
120
- {heading}
121
- onchange={(index) => setTimeout(() => openTitle(null, titles, index), 250)}
122
- onresize={() => slider?.reposition()}>
123
- {#each titles as title, index}
124
- {@const expanded = isExpanded(title)}
125
- {@const href = titleUrl(title)}
126
- {@const onclick = (event: MouseEvent): void => openTitle(event, titles, index)}
127
-
128
- <div class="title" class:expanded data-testid="title">
129
- <div class="media">
130
- {#if expanded}
131
- <div class="video" out:fade={{ delay: 200, duration: 200 }}>
132
- <a class="video-overlay" title="" {href} {onclick}></a>
133
-
134
- {#if !!title.embeddable_url}
135
- <YouTubeEmbed embeddable_url={title.embeddable_url!} muted loop />
136
- {:else}
137
- <img class="video-fallback" src={title.medium_poster} alt="" />
138
- {/if}
139
- </div>
140
- {:else}
141
- <a class="poster" {href} {onclick}>
142
- <TitlePoster {title} width={96} height={144} />
143
- </a>
144
- {/if}
118
+ {#if titles?.length}
119
+ <Rail
120
+ bind:slider
121
+ {heading}
122
+ onchange={(index) => setTimeout(() => openTitle(null, titles, index), 250)}
123
+ onresize={() => slider?.reposition()}>
124
+ {#each titles as title, index}
125
+ {@const expanded = isExpanded(title)}
126
+ {@const href = titleUrl(title)}
127
+ {@const onclick = (event: MouseEvent): void => openTitle(event, titles, index)}
128
+
129
+ <div class="title" class:expanded data-testid="title">
130
+ <div class="media">
131
+ {#if expanded}
132
+ <div class="video" out:fade={{ delay: 200, duration: 200 }}>
133
+ <a class="video-overlay" title="" {href} {onclick}></a>
134
+
135
+ {#if !!title.embeddable_url}
136
+ <YouTubeEmbed embeddable_url={title.embeddable_url!} muted loop />
137
+ {:else}
138
+ <img class="video-fallback" src={title.medium_poster} alt="" />
139
+ {/if}
140
+ </div>
141
+ {:else}
142
+ <a class="poster" {href} {onclick}>
143
+ <TitlePoster {title} width={96} height={144} />
144
+ </a>
145
+ {/if}
146
+ </div>
147
+
148
+ <a class="heading" {href} {onclick} data-testid="heading">
149
+ {title.title}
150
+ </a>
145
151
  </div>
146
-
147
- <a class="heading" {href} {onclick} data-testid="heading">
148
- {title.title}
149
- </a>
150
- </div>
151
- {/each}
152
- </Rail>
152
+ {/each}
153
+ </Rail>
154
+ {/if}
153
155
  {/await}
154
156
  </div>
155
157
 
@@ -163,6 +163,7 @@
163
163
  "poster info"
164
164
  "actions actions";
165
165
  grid-template-columns: $poster-width auto;
166
+ grid-template-rows: 1fr;
166
167
  align-items: flex-end;
167
168
  gap: 0 margin(0.75);
168
169
  }