@streamscloud/embeddable 6.3.7 → 6.3.9

package/dist/ads/ad-card/cmp.ad-card.svelte

@@ -34,15 +34,17 @@ let { ad, inert = false } = $props();
     </div>
     <div class="ad-card__button-container">
       {#if ad.ctaButton}
-        <Button
-          size={ButtonSize.Standard}
-          on={{ click: () => ad.ctaButton && window.open(ad.ctaButton.url, '_blank') }}
-          --button--font--size="1em"
-          --button--font--color={ad.ctaButton.textColor}
-          --button--background={ad.ctaButton.background}
-          --button--min-width="100%">
-          <span class="ad-card__button-text">{ad.ctaButton.text}</span>
-        </Button>
+        <div class="ad-card__button">
+          <Button
+            size={ButtonSize.Standard}
+            on={{ click: () => ad.ctaButton && window.open(ad.ctaButton.url, '_blank') }}
+            --button--font--size="1em"
+            --button--font--color={ad.ctaButton.textColor}
+            --button--background={ad.ctaButton.background}
+            --button--min-width="100%">
+            <span class="ad-card__button-text">{ad.ctaButton.text}</span>
+          </Button>
+        </div>
       {/if}
     </div>
   </div>
@@ -60,13 +62,16 @@ let { ad, inert = false } = $props();
   }
 }
 .ad-card {
+  --image--object-fit: cover;
+  --image--width: auto;
+  --image--height: auto;
   width: 100%;
   height: max-content;
   display: flex;
   flex-direction: column;
   position: relative;
   container-type: inline-size;
-  aspect-ratio: 10/16;
+  aspect-ratio: 9/16;
   color: #000000;
   background-color: rgba(255, 255, 255, 0.9);
   border: 0.038125rem solid #f2f2f3;
@@ -93,7 +98,6 @@ let { ad, inert = false } = $props();
   width: 100%;
   --image--width: 100%;
   --image--height: 100%;
-  --image--object-fit: cover;
 }
 .ad-card__info {
   display: grid;
@@ -128,6 +132,8 @@ let { ad, inert = false } = $props();
   justify-content: flex-end;
   align-items: center;
   min-height: 3rem;
+  overflow: hidden;
+  min-width: 0;
   /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < 230px) {
@@ -142,6 +148,7 @@ let { ad, inert = false } = $props();
   align-items: end;
   min-height: 2.5rem;
   margin-top: 0.125rem;
+  min-width: 0px;
   /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < 230px) {
@@ -187,12 +194,15 @@ let { ad, inert = false } = $props();
   }
 }
 .ad-card__price {
-  font-size: 1.875rem;
+  font-size: 1.6875rem;
   font-weight: 700;
   text-align: right;
   display: flex;
   align-items: end;
   gap: 0.625rem;
+  width: 100%;
+  min-width: 0;
+  white-space: nowrap;
   /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < 230px) {
@@ -205,11 +215,15 @@ let { ad, inert = false } = $props();
   font-weight: 400;
   font-style: normal;
   font-size: 0.75rem;
-  line-height: 1.125rem;
+  line-height: 1.09125rem;
   letter-spacing: 0;
   text-align: right;
   color: #6b7280;
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1 1 auto;
+  min-width: 0;
   /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < 230px) {
@@ -217,4 +231,11 @@ let { ad, inert = false } = $props();
     font-size: 0.625rem;
     line-height: 0.875rem;
   }
+}
+.ad-card__button {
+  width: 100%;
+}
+.ad-card__button :global(*) {
+  width: 100%;
+  --button--min-width: 100%;
 }</style>

package/dist/short-videos/short-videos-player/internal-short-video-player-provider.d.ts

@@ -3,6 +3,7 @@ import type { IPlayerItemsProvider } from '../../ui/player';
 export declare class InternalShortVideoPlayerProvider implements IPlayerItemsProvider<ShortVideoViewerModel> {
     initialData: IPlayerItemsProvider<ShortVideoViewerModel>['initialData'];
     private ids;
+    private idOrder;
     private initialId?;
     private graphql;
     private dataLoader;

package/dist/short-videos/short-videos-player/internal-short-video-player-provider.js

@@ -4,21 +4,25 @@ import { CursorDataLoader } from '../../core/data-loaders';
 import { createLocalGQLClient } from '../../core/graphql';
 import { mapToShortVideoViewerModel } from '../short-video-viewer';
 import { GetShortVideosDocument } from './operations.generated';
+const CHUNK_SIZE = 20;
 export class InternalShortVideoPlayerProvider {
     initialData;
     ids;
+    idOrder = new Map();
     initialId;
     graphql;
     dataLoader = new CursorDataLoader({
         loadPage: async (continuationToken) => {
+            const startIdIndex = continuationToken.value ? parseInt(continuationToken.value, 10) : 0;
+            const endIdIndex = Math.min(startIdIndex + CHUNK_SIZE, this.ids.length);
+            const idsChunk = this.ids.slice(startIdIndex, endIdIndex);
             try {
                 const payload = await this.graphql
                     .query(GetShortVideosDocument, {
                     input: {
-                        limit: 20,
-                        continuationToken,
+                        limit: idsChunk.length,
                         filter: {
-                            ids: this.ids
+                            ids: idsChunk
                         }
                     },
                     image_scale: ImageScale.OriginalEncoded
@@ -28,9 +32,14 @@ export class InternalShortVideoPlayerProvider {
                 if (!data) {
                     return null;
                 }
+                const items = data.items.map(mapToShortVideoViewerModel).sort((a, b) => {
+                    const ia = this.idOrder.get(a.id) ?? Number.MAX_SAFE_INTEGER;
+                    const ib = this.idOrder.get(b.id) ?? Number.MAX_SAFE_INTEGER;
+                    return ia - ib;
+                });
                 return {
-                    items: data.items.map(mapToShortVideoViewerModel),
-                    continuationToken: ContinuationToken.fromPayload(data.continuationToken)
+                    items,
+                    continuationToken: ContinuationToken.fromPayload(endIdIndex < this.ids.length ? endIdIndex.toString() : null)
                 };
             }
             catch {
@@ -42,6 +51,7 @@ export class InternalShortVideoPlayerProvider {
         const { ids, graphqlOrigin, initiator, initialId } = input;
         this.graphql = createLocalGQLClient(graphqlOrigin, initiator ? { 'x-initiator': initiator } : undefined);
         this.ids = ids;
+        ids.forEach((id, idx) => this.idOrder.set(id, idx));
         this.initialId = initialId;
         this.initialData = { prefetchedItems: [], startIndex: 0 };
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "6.3.7",
+  "version": "6.3.9",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -10,7 +10,9 @@
   "scripts": {
     "dev": "vite dev --port 3010",
     "build": "svelte-package --tsconfig ./tsconfig.app.json  && prettier --write --plugin prettier-plugin-svelte . && eslint --fix .",
-    "build-publish": "npm run build && npm publish --access public",
+    "publish:prod": "npm run build && npm publish --access public --tag latest",
+    "version:dev": "node -e \"const fs=require('fs');const pkg=require('./package.json');const base=(pkg.version.includes('-')?pkg.version.split('-')[0]:pkg.version);pkg.version=base+'-'+Date.now();fs.writeFileSync('package.json',JSON.stringify(pkg,null,2)+'\\n');\"",
+    "publish:dev": "npm run build && npm run version:dev && npm publish --tag next && git checkout -- package.json",
     "pack": "npm run build && npm pack",
     "preview": "vite preview",
     "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json",