@quintype/framework 7.9.0 → 7.10.1-custom-infinite-scroll.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [7.10.0](https://github.com/quintype/quintype-node-framework/compare/v7.7.7...v7.10.0) (2022-10-03)
+
+
+### Features
+
+* add video support to web stories ([#322](https://github.com/quintype/quintype-node-framework/issues/322)) ([f41b82b](https://github.com/quintype/quintype-node-framework/commit/f41b82be8285b555970527204ec6478f21c47782))
+* **SW:** Disable sw shell  ([#321](https://github.com/quintype/quintype-node-framework/issues/321)) ([6d04bc8](https://github.com/quintype/quintype-node-framework/commit/6d04bc87dd42c647ec9763eca430ada2f4a4d8ea))
+
 ## [7.9.0](https://github.com/quintype/quintype-node-framework/compare/v7.8.0...v7.9.0) (2022-10-03)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/framework",
-  "version": "7.9.0",
+  "version": "7.10.1-custom-infinite-scroll.0",
   "description": "Libraries to help build Quintype Node.js apps",
   "main": "index.js",
   "engines": {
@@ -31,8 +31,8 @@
   "homepage": "https://github.com/quintype/quintype-node-framework#readme",
   "dependencies": {
     "@ampproject/toolbox-optimizer": "2.8.3",
-    "@quintype/amp": "^2.5.0",
-    "@quintype/backend": "^2.3.1",
+    "@quintype/amp": "^2.6.0",
+    "@quintype/backend": "^2.3.2",
     "@quintype/components": "^3.0.0",
     "@quintype/prerender-node": "^3.2.26",
     "@quintype/seo": "^1.39.0",

package/server/amp/handlers/infinite-scroll.js

@@ -1,18 +1,23 @@
 const { AmpConfig } = require("../../impl/api-client-impl");
 const InfiniteScrollAmp = require("../helpers/infinite-scroll");
 const { setCorsHeaders } = require("../helpers");
+const get = require("lodash/get");
+const cloneDeep = require("lodash/cloneDeep");
 
 // eslint-disable-next-line consistent-return
-async function storyPageInfiniteScrollHandler(req, res, next, { client, config }) {
+async function storyPageInfiniteScrollHandler(req, res, next, { client, config, ...rest }) {
   const ampConfig = await config.memoizeAsync("amp-config", async () => await AmpConfig.getAmpConfig(client));
+  const opts = cloneDeep(rest);
+  const infiniteScrollSource = get(opts, ["featureConfig", "infiniteScroll", "source"], "collection");
 
   const infiniteScrollAmp = new InfiniteScrollAmp({
     ampConfig,
     publisherConfig: config,
     client,
     queryParams: req.query,
+    infiniteScrollSource,
   });
-  const jsonResponse = await infiniteScrollAmp.getResponse({ itemsTaken: 5 }); // itemsTaken has to match with itemsToTake in ampStoryPageHandler
+  const jsonResponse = await infiniteScrollAmp.getResponse();
   if (jsonResponse instanceof Error) return next(jsonResponse);
   res.set("Content-Type", "application/json; charset=utf-8");
   setCorsHeaders({ req, res, next, publisherConfig: config });

package/server/amp/handlers/story-page.js

@@ -86,15 +86,28 @@ async function ampStoryPageHandler(
     const seoTags =
       seoInstance && seoInstance.getMetaTags(config, "story-page-amp", { data: { story, timezone }, config }, { url });
 
-    const infiniteScrollAmp = new InfiniteScrollAmp({
-      ampConfig,
-      publisherConfig: config,
-      client,
-    });
-    const infiniteScrollInlineConfig = await infiniteScrollAmp.getInitialInlineConfig({
-      itemsToTake: 5,
-      storyId: story["story-content-id"],
-    });
+    const infiniteScrollConfig = get(opts, ["featureConfig", "infiniteScroll"], "");
+    const infiniteScrollSource = get(infiniteScrollConfig, ["source"], "collection");
+    const inlineConfig = get(infiniteScrollConfig, ["inlineConfig"], "");
+    const remoteConfigEndpoint = get(infiniteScrollConfig, ["remoteConfigEndpoint"], "");
+
+    let infiniteScrollInlineConfig = [];
+
+    if (infiniteScrollSource === "custom") {
+      if (!inlineConfig || !remoteConfigEndpoint)
+        throw new Error("Required params of 'custom' source (inlineConfig /remoteConfigEndpoint) is missing!!");
+      infiniteScrollInlineConfig = await inlineConfig();
+    } else {
+      const infiniteScrollAmp = new InfiniteScrollAmp({
+        ampConfig,
+        publisherConfig: config,
+        client,
+        infiniteScrollSource,
+      });
+      infiniteScrollInlineConfig = await infiniteScrollAmp.getInitialInlineConfig({
+        storyId: story["story-content-id"],
+      });
+    }
     if (infiniteScrollInlineConfig instanceof Error) return next(infiniteScrollInlineConfig);
     if (infiniteScrollInlineConfig) {
       set(

package/server/amp/helpers/infinite-scroll.js

@@ -1,9 +1,9 @@
 class InfiniteScrollAmp {
-  constructor({ ampConfig, client, publisherConfig, queryParams }) {
+  constructor({ ampConfig, client, publisherConfig, queryParams, infiniteScrollSource }) {
     this.client = client;
     this.publisherConfig = publisherConfig;
     this.queryParams = queryParams;
-    this.collSlug = "amp-infinite-scroll"; // this is hardcoded to "amp-infinite-scroll" temporarily. Ideally it should come from ampConfig from platform
+    this.infiniteScrollSource = infiniteScrollSource;
   }
 
   // eslint-disable-next-line class-methods-use-this
@@ -17,12 +17,20 @@ class InfiniteScrollAmp {
     );
   }
 
+  getFilteredApiItems(relatedStories) {
+    return relatedStories.filter(
+      (story) =>
+        story.access !== "subscription" &&
+        story["story-template"] !== "visual-story"
+    );
+  }
+
   formatData({ itemsArr, type }) {
     // formats configuration as per need of amp infinite scroll
     const arr = itemsArr.map((item) => ({
       image: this.getImagePath(item),
-      title: item.story.headline,
-      url: `/amp/story/${item.story.slug}`,
+      title: item.headline,
+      url: `/amp/story/${item.slug}`,
     }));
     switch (type) {
       case "inline":
@@ -36,39 +44,54 @@ class InfiniteScrollAmp {
 
   getImagePath(item) {
     const cdnImage = this.publisherConfig["cdn-image"];
-    const s3Key = item.story["hero-image-s3-key"];
+    const s3Key = item["hero-image-s3-key"];
     const hostWithProtocol = /^https:\/\//.test(cdnImage) ? cdnImage : `https://${cdnImage}`;
     return `${hostWithProtocol}/${s3Key}?format=webp&w=250`;
   }
 
-  async getResponse({ itemsTaken }) {
+  async getInfiniteScrollList({ storyId, type, offset = 0, limit = null }) {
+    let filteredItems = [];
+    const params = {
+      ...(offset && { offset }),
+      ...(limit && { limit }),
+    };
+    if (this.infiniteScrollSource === "relatedStoriesApi") {
+      const relatedStoriesList = await this.client.getRelatedStories(storyId, null, params);
+      if (!relatedStoriesList)
+        return new Error();
+      return filteredItems = this.getFilteredApiItems(relatedStoriesList["related-stories"]);
+    } else {
+      const collection = await this.client.getCollectionBySlug("amp-infinite-scroll");
+      if (!collection || (collection.items && !collection.items.length) || collection.error || collection === null)
+        return new Error();
+      const collectionItems = this.getFilteredCollItems(collection, storyId).map(items => items.story);
+      return filteredItems = type === "inlineConfig"
+        ? collectionItems.slice(0, 5)
+        : collectionItems.slice(5);
+    }
+  }
+
+  async getResponse() {
     const { "story-id": storyId } = this.queryParams;
     if (!storyId) return new Error(`Query param "story-id" missing`);
-
-    const collection = await this.client.getCollectionBySlug(this.collSlug);
-    if (!collection || collection.error)
-      return new Error(`Infinite scroll collection ${this.collSlug} returned falsy value`);
-    const filteredItems = this.getFilteredCollItems(collection, storyId);
-    const slicedItems = filteredItems.slice(itemsTaken);
-    const formattedData = this.formatData({ itemsArr: slicedItems });
-
+    const filteredItems =
+      await this.getInfiniteScrollList({ storyId, type: "remoteConfig", offset: 5 });
+    if (filteredItems instanceof Error) return new Error(`Infinite scroll collection amp-infinite-scroll returned falsy value`);
+    const formattedData = this.formatData({ itemsArr: filteredItems });
     return JSON.stringify(formattedData);
   }
 
-  async getInitialInlineConfig({ itemsToTake, storyId }) {
-    if (!itemsToTake || !storyId) return new Error("Required params for getInitialInlineConfig missing");
+  async getInitialInlineConfig({ storyId }) {
+    if (!storyId) return new Error("Required params for getInitialInlineConfig missing");
+    const filteredItems =
+      await this.getInfiniteScrollList({ storyId, type: "inlineConfig", offset: 0, limit: 5 });
 
-    const collection = await this.client.getCollectionBySlug(this.collSlug);
-    if (!collection || (collection.items && !collection.items.length) || collection.error) return null;
-    const filteredItems = this.getFilteredCollItems(collection, storyId);
-    const slicedItems = filteredItems.slice(0, itemsToTake);
-    const formattedData = this.formatData({
-      itemsArr: slicedItems,
+    if (filteredItems instanceof Error) return null;
+    const formattedData = filteredItems.length > 0 && this.formatData({
+      itemsArr: filteredItems,
       type: "inline",
     });
-
     return JSON.stringify(formattedData);
   }
 }
-
 module.exports = InfiniteScrollAmp;

package/test/unit/amp/infinite-scroll-helper.js

@@ -3,8 +3,17 @@
 
 const assert = require("assert");
 const InfiniteScrollAmp = require("../../../server/amp/helpers/infinite-scroll");
+const { getTextStory } = require("../../data/amp-test-data");
 
 function getClientStub({
+  getStoryById = (id) =>
+    new Promise((resolve) => {
+      if (id === "4444")
+        resolve({
+          story: getTextStory({ "story-content-id": "7f3d5bdb-ec52-4047-ac0d-df4036ec974b" }),
+        });
+      resolve(null);
+    }),
   getCollectionBySlug = (slug) =>
     new Promise((resolve) => {
       if (slug === "amp-infinite-scroll")
@@ -19,6 +28,7 @@ function getClientStub({
                 "story-content-id": 1111,
                 slug: "sports/aa",
                 "hero-image-s3-key": "aa/a.jpg",
+                access: "public",
               },
             },
             {
@@ -30,6 +40,7 @@ function getClientStub({
                 "story-content-id": 2222,
                 slug: "sports/bb",
                 "hero-image-s3-key": "bb/b.jpg",
+                access: "public",
               },
             },
             {
@@ -41,6 +52,7 @@ function getClientStub({
                 "story-content-id": 3333,
                 slug: "sports/cc",
                 "hero-image-s3-key": "cc/c.jpg",
+                access: "public",
               },
             },
             {
@@ -52,6 +64,7 @@ function getClientStub({
                 "story-content-id": 4444,
                 slug: "sports/dd",
                 "hero-image-s3-key": "dd/d.jpg",
+                access: "public",
               },
             },
             {
@@ -63,6 +76,7 @@ function getClientStub({
                 "story-content-id": 5555,
                 slug: "sports/ee",
                 "hero-image-s3-key": "ee/e.jpg",
+                access: "public",
               },
             },
             {
@@ -74,6 +88,31 @@ function getClientStub({
                 "story-content-id": 6666,
                 slug: "sports/ff",
                 "hero-image-s3-key": "ff/f.jpg",
+                access: "public",
+              },
+            },
+            {
+              type: "story",
+              id: 7777,
+              story: {
+                "story-template": "text",
+                headline: "ggg",
+                "story-content-id": 7777,
+                slug: "sports/gg",
+                "hero-image-s3-key": "gg/g.jpg",
+                access: "public",
+              },
+            },
+            {
+              type: "story",
+              id: 8888,
+              story: {
+                "story-template": "text",
+                headline: "hhh",
+                "story-content-id": 8888,
+                slug: "sports/hh",
+                "hero-image-s3-key": "hh/h.jpg",
+                access: "public",
               },
             },
           ],
@@ -83,6 +122,7 @@ function getClientStub({
 } = {}) {
   return {
     getCollectionBySlug,
+    getStoryById
   };
 }
 const dummyPublisherConfig = {
@@ -96,9 +136,7 @@ describe("getInitialInlineConfig method of InfiniteScrollAmp helper function", f
       client: getClientStub(),
       publisherConfig: dummyPublisherConfig,
     });
-    const inlineConfig = await infiniteScrollAmp.getInitialInlineConfig({
-      itemsToTake: 5,
-    });
+    const inlineConfig = await infiniteScrollAmp.getInitialInlineConfig({ storyId: "" });
     assert.strictEqual(inlineConfig instanceof Error, true);
     assert.throws(() => {
       throw new Error("Required params for getInitialInlineConfig missing");
@@ -117,8 +155,7 @@ describe("getInitialInlineConfig method of InfiniteScrollAmp helper function", f
       publisherConfig: dummyPublisherConfig,
     });
     const inlineConfig = await infiniteScrollAmp.getInitialInlineConfig({
-      itemsToTake: 5,
-      storyId: 2222,
+      storyId: 1111,
     });
     assert.strictEqual(inlineConfig, null);
   });
@@ -137,8 +174,7 @@ describe("getInitialInlineConfig method of InfiniteScrollAmp helper function", f
       publisherConfig: dummyPublisherConfig,
     });
     const inlineConfig = await infiniteScrollAmp.getInitialInlineConfig({
-      itemsToTake: 5,
-      storyId: 2222,
+      storyId: 1111,
     });
     assert.strictEqual(inlineConfig, null);
   });
@@ -150,8 +186,7 @@ describe("getInitialInlineConfig method of InfiniteScrollAmp helper function", f
       publisherConfig: dummyPublisherConfig,
     });
     const inlineConfig = await infiniteScrollAmp.getInitialInlineConfig({
-      itemsToTake: 5,
-      storyId: 2222,
+      storyId: 1111,
     });
     assert.strictEqual(false, /sports\/bb/.test(inlineConfig));
     assert.strictEqual(false, /bb\/b.jpg/.test(inlineConfig));
@@ -164,8 +199,7 @@ describe("getInitialInlineConfig method of InfiniteScrollAmp helper function", f
       publisherConfig: dummyPublisherConfig,
     });
     const inlineConfig = await infiniteScrollAmp.getInitialInlineConfig({
-      itemsToTake: 5,
-      storyId: 3333,
+      storyId: 1111,
     });
     assert.strictEqual(false, /sports\/bb/.test(inlineConfig));
     assert.strictEqual(false, /bb\/b.jpg/.test(inlineConfig));
@@ -179,8 +213,7 @@ describe("getInitialInlineConfig method of InfiniteScrollAmp helper function", f
       publisherConfig: dummyPublisherConfig,
     });
     const inlineConfig = await infiniteScrollAmp.getInitialInlineConfig({
-      itemsToTake: 5,
-      storyId: 2222,
+      storyId: 1111,
     });
     function isInlineConfigStructureValid(jsonStr) {
       const stories = JSON.parse(jsonStr);
@@ -207,7 +240,7 @@ describe("getResponse method of InfiniteScrollAmp helper function", function ()
       publisherConfig: dummyPublisherConfig,
       queryParams: { foo: "bar" },
     });
-    const jsonResponse = await infiniteScrollAmp.getResponse({ itemsTaken: 2 });
+    const jsonResponse = await infiniteScrollAmp.getResponse();
     assert.strictEqual(jsonResponse instanceof Error, true);
     assert.throws(() => {
       throw new Error(`Query param "story-id" missing`);
@@ -226,7 +259,7 @@ describe("getResponse method of InfiniteScrollAmp helper function", function ()
       publisherConfig: dummyPublisherConfig,
       queryParams: { "story-id": 2222 },
     });
-    const jsonResponse = await infiniteScrollAmp.getResponse({ itemsTaken: 2 });
+    const jsonResponse = await infiniteScrollAmp.getResponse();
     assert.strictEqual(jsonResponse instanceof Error, true);
   });
   it("should remove current story from response", async function () {
@@ -237,7 +270,7 @@ describe("getResponse method of InfiniteScrollAmp helper function", function ()
       publisherConfig: dummyPublisherConfig,
       queryParams: { "story-id": 4444 },
     });
-    const jsonResponse = await infiniteScrollAmp.getResponse({ itemsTaken: 2 });
+    const jsonResponse = await infiniteScrollAmp.getResponse();
     assert.strictEqual(false, /sports\/dd/.test(jsonResponse));
     assert.strictEqual(false, /dd\/d.jpg/.test(jsonResponse));
   });
@@ -249,7 +282,7 @@ describe("getResponse method of InfiniteScrollAmp helper function", function ()
       publisherConfig: dummyPublisherConfig,
       queryParams: { "story-id": 4444 },
     });
-    const jsonResponse = await infiniteScrollAmp.getResponse({ itemsTaken: 2 });
+    const jsonResponse = await infiniteScrollAmp.getResponse();
     assert.strictEqual(false, /sports\/bb/.test(jsonResponse));
     assert.strictEqual(false, /bb\/b.jpg/.test(jsonResponse));
   });
@@ -262,7 +295,8 @@ describe("getResponse method of InfiniteScrollAmp helper function", function ()
       publisherConfig: dummyPublisherConfig,
       queryParams: { "story-id": 4444 },
     });
-    const jsonResponse = await infiniteScrollAmp.getResponse({ itemsTaken: 2 });
+    const jsonResponse = await infiniteScrollAmp.getResponse();
+
     function isJsonConfigStructureValid(jsonStr) {
       const parsed = JSON.parse(jsonStr);
       const stories = parsed.pages;