From d45a0d2fa2e35f3bb26be29d0915502a1625ab15 Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Thu, 12 Dec 2024 13:46:30 +0530
Subject: [PATCH 01/47] Add callbacks to call for fetching data from backend.

---
 .../components/webStories/contentPanel.tsx    | 98 ++++++++++++++++++-
 1 file changed, 94 insertions(+), 4 deletions(-)

diff --git a/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx b/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
index c17507d93..c6da0c962 100644
--- a/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
+++ b/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
@@ -16,15 +16,104 @@
 /**
  * External dependencies.
  */
-import React from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 /**
  * Internal dependencies.
  */
-import { getStoryMarkup } from './createStoryIframe';
-import { STORY_JSON } from './story';
+import { getStoryMarkup, type SingleStoryJSON } from './createStoryIframe';
 
 const WebStories = () => {
-  const storyMarkup = getStoryMarkup(STORY_JSON);
+  const [storyMarkup, setStoryMarkup] = useState('');
+
+  const getAuthorsAndPublisherLogo = useCallback(
+    async (mediaAuthorSet: Record<number, string>) => {
+      const response = await fetch(
+        'https://privacysandbox-stories.com/wp-json/web-stories/v1/users'
+      );
+      const responseJSON = await response.json();
+      const transformedMediaAuthorMap: Record<
+        number,
+        Record<string, string>
+      > = {};
+
+      const authorNameIdMap: Record<number, string> = {};
+
+      responseJSON.forEach((singleResponse: Record<string, any>) => {
+        authorNameIdMap[singleResponse.id] = singleResponse.name;
+      });
+
+      await Promise.all(
+        Object.keys(mediaAuthorSet).map(async (key: string) => {
+          const mediaResponse = await fetch(
+            'https://privacysandbox-stories.com/wp-json/web-stories/v1/media/' +
+              mediaAuthorSet[Number(key)]
+          );
+
+          //Check the media response and get the avif/webp image if available else use source_url.
+          const mediaResponseJSON = await mediaResponse.json();
+          const sourceUrl = mediaResponseJSON.source_url;
+          const splittedUrl = sourceUrl.split('/');
+          const urlWithoutName = sourceUrl.substring(
+            0,
+            sourceUrl.length - splittedUrl[splittedUrl.length - 1].length
+          );
+
+          const avifResource =
+            urlWithoutName +
+            mediaResponseJSON?.media_details?.sources?.['image/avif']?.file;
+          const webpResource =
+            urlWithoutName +
+            mediaResponseJSON?.media_details?.sources?.['image/webp']?.file;
+
+          transformedMediaAuthorMap[Number(key)] = {
+            name: authorNameIdMap[Number(key)],
+            publisherLogo: avifResource ?? webpResource ?? sourceUrl,
+          };
+        })
+      );
+      return transformedMediaAuthorMap;
+    },
+    []
+  );
+
+  useEffect(() => {
+    (async () => {
+      const response = await fetch(
+        'https://privacysandbox-stories.com/wp-json/web-stories/v1/web-story/'
+      );
+
+      const responseJSON = await response.json();
+      let storyJSON: SingleStoryJSON[] = [];
+      const mediaAuthorSet: Record<number, string> = {};
+      responseJSON.forEach((singleResponse: any) => {
+        if (singleResponse?.status === 'publish') {
+          mediaAuthorSet[singleResponse.author] =
+            singleResponse?.meta?.web_stories_publisher_logo;
+
+          storyJSON.push({
+            heroImage: singleResponse?.story_poster?.url ?? '',
+            publisherLogo: singleResponse?.meta?.web_stories_publisher_logo,
+            publisherName: singleResponse?.author,
+            storyTitle: singleResponse?.title?.rendered,
+            storyUrl: `${singleResponse?.link}#embedMode=2`,
+          });
+        }
+      });
+
+      const authorsAndPublisherLogoMap = await getAuthorsAndPublisherLogo(
+        mediaAuthorSet
+      );
+
+      storyJSON = storyJSON.map((story) => {
+        const key = Number(story.publisherName);
+        story.publisherName = authorsAndPublisherLogoMap[key]?.name;
+        story.publisherLogo = authorsAndPublisherLogoMap[key]?.publisherLogo;
+        return story;
+      });
+
+      setStoryMarkup(getStoryMarkup(storyJSON));
+    })();
+  }, [getAuthorsAndPublisherLogo]);
 
   return (
     <div
@@ -32,6 +121,7 @@ const WebStories = () => {
       className="h-full w-full text-raisin-black dark:text-bright-gray overflow-y-auto"
     >
       <iframe
+        scrolling="yes"
         srcDoc={storyMarkup}
         style={{ width: '100%', height: '100vh', border: 'none' }}
       />

From 8b74cc0b04d5d2f4c9c7c6407af953918757ece8 Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Mon, 16 Dec 2024 10:38:13 +0530
Subject: [PATCH 02/47] Fix redundant calls to category and authors.

---
 .../createStoryIframe.tsx                     |   0
 .../components/webStories/contentPanel.tsx    |   6 +-
 .../stateProviders/stories/context.ts         |   2 +
 .../stories/storiesProvider.tsx               | 188 +++++++++++++++++-
 4 files changed, 187 insertions(+), 9 deletions(-)
 rename packages/extension/src/{view/devtools/components/webStories => utils}/createStoryIframe.tsx (100%)

diff --git a/packages/extension/src/view/devtools/components/webStories/createStoryIframe.tsx b/packages/extension/src/utils/createStoryIframe.tsx
similarity index 100%
rename from packages/extension/src/view/devtools/components/webStories/createStoryIframe.tsx
rename to packages/extension/src/utils/createStoryIframe.tsx
diff --git a/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx b/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
index c4765d6b9..5c68d9f01 100644
--- a/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
+++ b/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
@@ -24,8 +24,6 @@ import { noop } from '@google-psat/common';
 /**
  * Internal dependencies.
  */
-import { getStoryMarkup } from './createStoryIframe';
-import { STORY_JSON } from './story';
 import { useStories } from '../../stateProviders';
 
 interface WebStoriesProps {
@@ -33,9 +31,8 @@ interface WebStoriesProps {
 }
 
 const WebStories = ({ storyOpened }: WebStoriesProps) => {
-  const storyMarkup = getStoryMarkup(STORY_JSON);
-
   const {
+    storyMarkup,
     searchValue,
     setSearchValue,
     showFilterSidebar,
@@ -48,6 +45,7 @@ const WebStories = ({ storyOpened }: WebStoriesProps) => {
     selectedFilterValues,
     filters,
   } = useStories(({ state, actions }) => ({
+    storyMarkup: state.storyMarkup,
     searchValue: state.searchValue,
     filters: state.filters,
     sortValue: state.sortValue,
diff --git a/packages/extension/src/view/devtools/stateProviders/stories/context.ts b/packages/extension/src/view/devtools/stateProviders/stories/context.ts
index 5bc3f77c4..4f943c4bc 100644
--- a/packages/extension/src/view/devtools/stateProviders/stories/context.ts
+++ b/packages/extension/src/view/devtools/stateProviders/stories/context.ts
@@ -24,6 +24,7 @@ import type {
 
 export interface StoryContext {
   state: {
+    storyMarkup: string;
     searchValue: string;
     showFilterSidebar: boolean;
     filters: FilterSidebarValue[];
@@ -46,6 +47,7 @@ export interface StoryContext {
 
 const initialState: StoryContext = {
   state: {
+    storyMarkup: '',
     searchValue: '',
     showFilterSidebar: false,
     selectedFilters: [],
diff --git a/packages/extension/src/view/devtools/stateProviders/stories/storiesProvider.tsx b/packages/extension/src/view/devtools/stateProviders/stories/storiesProvider.tsx
index 18bc9da1a..c527866ec 100644
--- a/packages/extension/src/view/devtools/stateProviders/stories/storiesProvider.tsx
+++ b/packages/extension/src/view/devtools/stateProviders/stories/storiesProvider.tsx
@@ -32,15 +32,26 @@ import type {
  * Internal dependencies.
  */
 import Context, { type StoryContext } from './context';
+import {
+  getStoryMarkup,
+  type SingleStoryJSON,
+} from '../../../../utils/createStoryIframe';
 
 const Provider = ({ children }: PropsWithChildren) => {
   const [searchValue, setSearchValue] = useState('');
+  const [storyMarkup, setStoryMarkup] = useState('');
   const [showFilterSidebar, setShowFilterSidebar] = useState(false);
   const [filters, setFilters] = useState<FilterSidebarValue[]>([]);
   const [selectedFilters, setSelectedFilters] = useState<ChipsFilter[]>([]);
   const [selectedFilterValues, setSelectedFilterValues] = useState<
     Record<string, string[]>
   >({});
+  const [authorPublisherLogo, setAuthorPublisherLogo] = useState<
+    Record<number, Record<string, string>>
+  >({});
+  const [storyOpened, setStoryOpened] = useState(false);
+  const [authors, setAuthors] = useState<Record<number, string>>({});
+  const [categories, setCategories] = useState<Record<number, string>>({});
   const [sortValue, setSortValue] =
     useState<StoryContext['state']['sortValue']>('latest');
 
@@ -49,13 +60,13 @@ const Provider = ({ children }: PropsWithChildren) => {
       {
         key: 'category',
         title: 'Category',
-        values: ['Category 1', 'Category 2', 'Category 3'],
+        values: Object.values(categories),
         sortValues: true,
       },
       {
         key: 'author',
         title: 'Author',
-        values: ['Author 1', 'Author 2', 'Author 3'],
+        values: Object.values(authors),
         sortValues: true,
       },
       {
@@ -65,11 +76,9 @@ const Provider = ({ children }: PropsWithChildren) => {
         sortValues: true,
       },
     ]);
-  }, []);
+  }, [authors, categories]);
 
-  const [storyOpened, setStoryOpened] = useState(false);
   //@ts-ignore since this is a custom event.
-
   const webStoriesLightBoxCallback = useCallback((event) => {
     setStoryOpened(() => event.detail.storyOpened);
   }, []);
@@ -146,9 +155,177 @@ const Provider = ({ children }: PropsWithChildren) => {
     setSelectedFilterValues({});
   }, []);
 
+  const fetchCategories = useCallback(async () => {
+    const response = await fetch(
+      'https://privacysandbox-stories.com/wp-json/web-stories/v1/web_story_category'
+    );
+    const responseJson = await response.json();
+    const categoriesMap: Record<number, string> = {};
+    responseJson.forEach((category: any) => {
+      categoriesMap[category.id] = category.name;
+    });
+
+    setCategories(categoriesMap);
+  }, []);
+
+  const fetchAuthors = useCallback(async () => {
+    const response = await fetch(
+      'https://privacysandbox-stories.com/wp-json/web-stories/v1/users'
+    );
+
+    const responseJSON = await response.json();
+
+    const authorNameIdMap: Record<number, string> = {};
+
+    responseJSON.forEach((singleResponse: Record<string, any>) => {
+      authorNameIdMap[singleResponse.id] = singleResponse.name;
+    });
+
+    setAuthors(authorNameIdMap);
+  }, []);
+
+  const getAuthorsAndPublisherLogo = useCallback(
+    async (mediaAuthorSet: Record<number, string>) => {
+      if (authors && Object.keys(authors).length === 0) {
+        return {};
+      }
+
+      const mediaAuthorSetClone = mediaAuthorSet;
+      Object.keys(authorPublisherLogo).forEach((key) => {
+        if (authorPublisherLogo[Number(key)]) {
+          delete mediaAuthorSetClone[Number(key)];
+        }
+      });
+
+      if (Object.keys(mediaAuthorSet).length === 0) {
+        return authorPublisherLogo;
+      }
+
+      const transformedMediaAuthorMap: Record<
+        number,
+        Record<string, string>
+      > = {};
+
+      await Promise.all(
+        Object.keys(mediaAuthorSet).map(async (key: string) => {
+          const mediaResponse = await fetch(
+            'https://privacysandbox-stories.com/wp-json/web-stories/v1/media/' +
+              mediaAuthorSet[Number(key)]
+          );
+
+          //Check the media response and get the avif/webp image if available else use source_url.
+          const mediaResponseJSON = await mediaResponse.json();
+          const sourceUrl = mediaResponseJSON.source_url;
+          const splittedUrl = sourceUrl.split('/');
+          const urlWithoutName = sourceUrl.substring(
+            0,
+            sourceUrl.length - splittedUrl[splittedUrl.length - 1].length
+          );
+
+          const avifResource =
+            urlWithoutName +
+            mediaResponseJSON?.media_details?.sources?.['image/avif']?.file;
+          const webpResource =
+            urlWithoutName +
+            mediaResponseJSON?.media_details?.sources?.['image/webp']?.file;
+
+          transformedMediaAuthorMap[Number(key)] = {
+            name: authors[Number(key)],
+            publisherLogo: avifResource ?? webpResource ?? sourceUrl,
+          };
+        })
+      );
+      setAuthorPublisherLogo(transformedMediaAuthorMap);
+      return transformedMediaAuthorMap;
+    },
+    [authorPublisherLogo, authors]
+  );
+
+  const queryParams = useMemo(() => {
+    const selectedAuthorsID: number[] = [];
+    const selectedCategoriesId: number[] = [];
+
+    Object.keys(authors).forEach((key) => {
+      const keyToUse = Number(key);
+      if (selectedFilterValues?.author?.includes(authors[keyToUse])) {
+        selectedAuthorsID.push(keyToUse);
+      }
+    });
+
+    Object.keys(categories).forEach((key) => {
+      const keyToUse = Number(key);
+      if (selectedFilterValues?.category?.includes(categories[keyToUse])) {
+        selectedCategoriesId.push(keyToUse);
+      }
+    });
+
+    return `${
+      selectedAuthorsID.length > 0
+        ? 'author=' + selectedAuthorsID.join(',')
+        : ''
+    }&${
+      selectedCategoriesId.length > 0
+        ? 'web_story_category=' + selectedCategoriesId.join(',')
+        : ''
+    }`;
+  }, [
+    authors,
+    categories,
+    selectedFilterValues.author,
+    selectedFilterValues?.category,
+  ]);
+
+  const fetchStories = useCallback(async () => {
+    const response = await fetch(
+      `https://privacysandbox-stories.com/wp-json/web-stories/v1/web-story/?${queryParams}`
+    );
+
+    const responseJSON = await response.json();
+    let storyJSON: SingleStoryJSON[] = [];
+    const mediaAuthorSet: Record<number, string> = {};
+
+    responseJSON.forEach((singleResponse: any) => {
+      if (singleResponse?.status === 'publish') {
+        mediaAuthorSet[singleResponse.author] =
+          singleResponse?.meta?.web_stories_publisher_logo;
+
+        storyJSON.push({
+          heroImage: singleResponse?.story_poster?.url ?? '',
+          publisherLogo: singleResponse?.meta?.web_stories_publisher_logo,
+          publisherName: singleResponse?.author,
+          storyTitle: singleResponse?.title?.rendered,
+          storyUrl: `${singleResponse?.link}#embedMode=2`,
+        });
+      }
+    });
+
+    const authorsAndPublisherLogoMap = await getAuthorsAndPublisherLogo(
+      mediaAuthorSet
+    );
+
+    storyJSON = storyJSON.map((story) => {
+      const key = Number(story.publisherName);
+      story.publisherName = authorsAndPublisherLogoMap[key]?.name;
+      story.publisherLogo = authorsAndPublisherLogoMap[key]?.publisherLogo;
+      return story;
+    });
+
+    setStoryMarkup(getStoryMarkup(storyJSON));
+  }, [queryParams, getAuthorsAndPublisherLogo]);
+
+  useEffect(() => {
+    fetchAuthors();
+    fetchCategories();
+  }, [fetchCategories, fetchAuthors]);
+
+  useEffect(() => {
+    fetchStories();
+  }, [fetchStories]);
+
   const memoisedValue = useMemo(() => {
     return {
       state: {
+        storyMarkup,
         searchValue,
         showFilterSidebar,
         selectedFilters,
@@ -167,6 +344,7 @@ const Provider = ({ children }: PropsWithChildren) => {
       },
     };
   }, [
+    storyMarkup,
     filters,
     resetFilters,
     searchValue,

From e0043aabe26e277115925a476d521a672ff2a91f Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Mon, 16 Dec 2024 22:24:33 +0530
Subject: [PATCH 03/47] Add callbacks for tags. Add loading State.

---
 .../stateProviders/stories/context.ts         |  2 +
 .../stories/storiesProvider.tsx               | 58 ++++++++++++++++---
 2 files changed, 53 insertions(+), 7 deletions(-)

diff --git a/packages/extension/src/view/devtools/stateProviders/stories/context.ts b/packages/extension/src/view/devtools/stateProviders/stories/context.ts
index 4f943c4bc..8820d5614 100644
--- a/packages/extension/src/view/devtools/stateProviders/stories/context.ts
+++ b/packages/extension/src/view/devtools/stateProviders/stories/context.ts
@@ -32,6 +32,7 @@ export interface StoryContext {
     selectedFilterValues: Record<string, string[]>;
     sortValue: 'latest' | 'oldest';
     storyOpened: boolean;
+    loadingState: boolean;
   };
   actions: {
     resetFilters: () => void;
@@ -55,6 +56,7 @@ const initialState: StoryContext = {
     selectedFilterValues: {},
     sortValue: 'latest',
     storyOpened: false,
+    loadingState: false,
   },
   actions: {
     resetFilters: noop,
diff --git a/packages/extension/src/view/devtools/stateProviders/stories/storiesProvider.tsx b/packages/extension/src/view/devtools/stateProviders/stories/storiesProvider.tsx
index c527866ec..0c361d937 100644
--- a/packages/extension/src/view/devtools/stateProviders/stories/storiesProvider.tsx
+++ b/packages/extension/src/view/devtools/stateProviders/stories/storiesProvider.tsx
@@ -51,6 +51,8 @@ const Provider = ({ children }: PropsWithChildren) => {
   >({});
   const [storyOpened, setStoryOpened] = useState(false);
   const [authors, setAuthors] = useState<Record<number, string>>({});
+  const [loadingState, setLoadingState] = useState<boolean>(false);
+  const [tags, setTags] = useState<Record<number, string>>({});
   const [categories, setCategories] = useState<Record<number, string>>({});
   const [sortValue, setSortValue] =
     useState<StoryContext['state']['sortValue']>('latest');
@@ -72,11 +74,11 @@ const Provider = ({ children }: PropsWithChildren) => {
       {
         key: 'tag',
         title: 'Tag',
-        values: ['Tag 1', 'Tag 2', 'Tag 3'],
+        values: Object.values(tags),
         sortValues: true,
       },
     ]);
-  }, [authors, categories]);
+  }, [authors, categories, tags]);
 
   //@ts-ignore since this is a custom event.
   const webStoriesLightBoxCallback = useCallback((event) => {
@@ -184,6 +186,22 @@ const Provider = ({ children }: PropsWithChildren) => {
     setAuthors(authorNameIdMap);
   }, []);
 
+  const fetchTags = useCallback(async () => {
+    const response = await fetch(
+      'https://privacysandbox-stories.com/wp-json/web-stories/v1/web_story_tag'
+    );
+
+    const responseJSON = await response.json();
+
+    const tagNameIdMap: Record<number, string> = {};
+
+    responseJSON.forEach((singleResponse: Record<string, any>) => {
+      tagNameIdMap[singleResponse.id] = singleResponse.name;
+    });
+
+    setTags(tagNameIdMap);
+  }, []);
+
   const getAuthorsAndPublisherLogo = useCallback(
     async (mediaAuthorSet: Record<number, string>) => {
       if (authors && Object.keys(authors).length === 0) {
@@ -244,6 +262,7 @@ const Provider = ({ children }: PropsWithChildren) => {
   const queryParams = useMemo(() => {
     const selectedAuthorsID: number[] = [];
     const selectedCategoriesId: number[] = [];
+    const selectedTagId: number[] = [];
 
     Object.keys(authors).forEach((key) => {
       const keyToUse = Number(key);
@@ -259,23 +278,44 @@ const Provider = ({ children }: PropsWithChildren) => {
       }
     });
 
+    Object.keys(tags).forEach((key) => {
+      const keyToUse = Number(key);
+      if (selectedFilterValues?.tag?.includes(tags[keyToUse])) {
+        selectedTagId.push(keyToUse);
+      }
+    });
+
     return `${
       selectedAuthorsID.length > 0
         ? 'author=' + selectedAuthorsID.join(',')
         : ''
-    }&${
+    }${
       selectedCategoriesId.length > 0
-        ? 'web_story_category=' + selectedCategoriesId.join(',')
+        ? '&web_story_category=' + selectedCategoriesId.join(',')
+        : ''
+    }${
+      selectedTagId.length > 0
+        ? '&web_story_tag=' + selectedTagId.join(',')
         : ''
     }`;
   }, [
     authors,
     categories,
-    selectedFilterValues.author,
+    selectedFilterValues?.author,
     selectedFilterValues?.category,
+    selectedFilterValues?.tag,
+    tags,
   ]);
 
   const fetchStories = useCallback(async () => {
+    if (
+      Object.keys(tags).length === 0 ||
+      Object.keys(categories).length === 0 ||
+      Object.keys(authors).length === 0
+    ) {
+      return;
+    }
+    setLoadingState(true);
     const response = await fetch(
       `https://privacysandbox-stories.com/wp-json/web-stories/v1/web-story/?${queryParams}`
     );
@@ -311,12 +351,14 @@ const Provider = ({ children }: PropsWithChildren) => {
     });
 
     setStoryMarkup(getStoryMarkup(storyJSON));
-  }, [queryParams, getAuthorsAndPublisherLogo]);
+    setLoadingState(false);
+  }, [tags, categories, authors, queryParams, getAuthorsAndPublisherLogo]);
 
   useEffect(() => {
     fetchAuthors();
     fetchCategories();
-  }, [fetchCategories, fetchAuthors]);
+    fetchTags();
+  }, [fetchCategories, fetchAuthors, fetchTags]);
 
   useEffect(() => {
     fetchStories();
@@ -333,6 +375,7 @@ const Provider = ({ children }: PropsWithChildren) => {
         selectedFilterValues,
         sortValue,
         storyOpened,
+        loadingState,
       },
       actions: {
         resetFilters,
@@ -344,6 +387,7 @@ const Provider = ({ children }: PropsWithChildren) => {
       },
     };
   }, [
+    loadingState,
     storyMarkup,
     filters,
     resetFilters,

From a08ad7596f52a4d49081f05b04e6da609c3099cc Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Mon, 16 Dec 2024 22:40:27 +0530
Subject: [PATCH 04/47] Add sorting order for stories.

---
 .../src/view/devtools/components/webStories/contentPanel.tsx  | 4 ++--
 .../view/devtools/stateProviders/stories/storiesProvider.tsx  | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx b/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
index 5c68d9f01..a0e7b69f6 100644
--- a/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
+++ b/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
@@ -89,8 +89,8 @@ const WebStories = ({ storyOpened }: WebStoriesProps) => {
                   backgroundPositionY: '4px',
                 }}
               >
-                <option value="Latest">Latest</option>
-                <option value="Oldest">Oldest</option>
+                <option value="latest">Latest</option>
+                <option value="oldest">Oldest</option>
               </select>
             </div>
           </TopBar>
diff --git a/packages/extension/src/view/devtools/stateProviders/stories/storiesProvider.tsx b/packages/extension/src/view/devtools/stateProviders/stories/storiesProvider.tsx
index 0c361d937..df9f3fe21 100644
--- a/packages/extension/src/view/devtools/stateProviders/stories/storiesProvider.tsx
+++ b/packages/extension/src/view/devtools/stateProviders/stories/storiesProvider.tsx
@@ -297,13 +297,14 @@ const Provider = ({ children }: PropsWithChildren) => {
       selectedTagId.length > 0
         ? '&web_story_tag=' + selectedTagId.join(',')
         : ''
-    }`;
+    }${sortValue === 'latest' ? '&order=desc' : '&order=asc'}`;
   }, [
     authors,
     categories,
     selectedFilterValues?.author,
     selectedFilterValues?.category,
     selectedFilterValues?.tag,
+    sortValue,
     tags,
   ]);
 
@@ -315,6 +316,7 @@ const Provider = ({ children }: PropsWithChildren) => {
     ) {
       return;
     }
+
     setLoadingState(true);
     const response = await fetch(
       `https://privacysandbox-stories.com/wp-json/web-stories/v1/web-story/?${queryParams}`

From 1530082ca51e3298a823048ce383a20d01c92759 Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Tue, 17 Dec 2024 11:52:17 +0530
Subject: [PATCH 05/47] Early exit from amp player main.js Add debounce
 capability.

---
 assets/amp/amp-player-main.js                 |  8 +++++++
 .../stories/storiesProvider.tsx               | 23 ++++++++++++-------
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/assets/amp/amp-player-main.js b/assets/amp/amp-player-main.js
index f25831db6..d266b70c9 100644
--- a/assets/amp/amp-player-main.js
+++ b/assets/amp/amp-player-main.js
@@ -47,6 +47,10 @@ function setCardMargin(margin) {
  * Initializes arrows for horizontal scrolling on desktop.
  */
 function initializeArrows() {
+  if(!cards){
+    return;
+  }
+
   const scrollContainer = document.querySelector('.carousel-cards-container');
   const containerPadding =
     parseFloat(
@@ -107,6 +111,10 @@ function resetStyles() {
  * Initializes card click events and sets up their dimensions.
  */
 function initializeCards() {
+  if(!cards){
+    return;
+  }
+
   setCards(document.querySelectorAll('.entry-point-card-container'));
   setCardMargin(parseFloat(getComputedStyle(cards[0]).marginRight));
   setCardWidth(cardMargin + cards[0].offsetWidth);
diff --git a/packages/extension/src/view/devtools/stateProviders/stories/storiesProvider.tsx b/packages/extension/src/view/devtools/stateProviders/stories/storiesProvider.tsx
index df9f3fe21..402679048 100644
--- a/packages/extension/src/view/devtools/stateProviders/stories/storiesProvider.tsx
+++ b/packages/extension/src/view/devtools/stateProviders/stories/storiesProvider.tsx
@@ -27,6 +27,7 @@ import type {
   ChipsFilter,
   FilterSidebarValue,
 } from '@google-psat/design-system';
+import { useDebounce } from 'use-debounce';
 
 /**
  * Internal dependencies.
@@ -38,7 +39,7 @@ import {
 } from '../../../../utils/createStoryIframe';
 
 const Provider = ({ children }: PropsWithChildren) => {
-  const [searchValue, setSearchValue] = useState('');
+  const [_searchValue, setSearchValue] = useState('');
   const [storyMarkup, setStoryMarkup] = useState('');
   const [showFilterSidebar, setShowFilterSidebar] = useState(false);
   const [filters, setFilters] = useState<FilterSidebarValue[]>([]);
@@ -57,6 +58,8 @@ const Provider = ({ children }: PropsWithChildren) => {
   const [sortValue, setSortValue] =
     useState<StoryContext['state']['sortValue']>('latest');
 
+  const [searchValue] = useDebounce(_searchValue, 500);
+
   useEffect(() => {
     setFilters([
       {
@@ -297,8 +300,11 @@ const Provider = ({ children }: PropsWithChildren) => {
       selectedTagId.length > 0
         ? '&web_story_tag=' + selectedTagId.join(',')
         : ''
-    }${sortValue === 'latest' ? '&order=desc' : '&order=asc'}`;
+    }${sortValue === 'latest' ? '&order=desc' : '&order=asc'}${
+      searchValue ? '&search="' + searchValue + '"' : ''
+    }`;
   }, [
+    searchValue,
     authors,
     categories,
     selectedFilterValues?.author,
@@ -370,7 +376,7 @@ const Provider = ({ children }: PropsWithChildren) => {
     return {
       state: {
         storyMarkup,
-        searchValue,
+        searchValue: _searchValue,
         showFilterSidebar,
         selectedFilters,
         filters,
@@ -389,17 +395,18 @@ const Provider = ({ children }: PropsWithChildren) => {
       },
     };
   }, [
-    loadingState,
     storyMarkup,
+    _searchValue,
+    showFilterSidebar,
+    selectedFilters,
     filters,
-    resetFilters,
-    searchValue,
     selectedFilterValues,
-    selectedFilters,
-    showFilterSidebar,
     sortValue,
     storyOpened,
+    loadingState,
+    resetFilters,
     toggleFilterSelection,
+    setSearchValue,
   ]);
 
   return <Context.Provider value={memoisedValue}>{children}</Context.Provider>;

From ca71fecbb112620080fc0a2d843ccd48a4f8478e Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Tue, 17 Dec 2024 12:21:44 +0530
Subject: [PATCH 06/47] Add loader for iframe contents to load.

---
 .../components/webStories/contentPanel.tsx    | 33 +++++++++++++------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx b/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
index a0e7b69f6..ee547567f 100644
--- a/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
+++ b/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
@@ -17,7 +17,12 @@
  * External dependencies.
  */
 import React from 'react';
-import { ChipsBar, FiltersSidebar, TopBar } from '@google-psat/design-system';
+import {
+  ChipsBar,
+  FiltersSidebar,
+  ProgressBar,
+  TopBar,
+} from '@google-psat/design-system';
 import { Resizable } from 're-resizable';
 import { noop } from '@google-psat/common';
 
@@ -32,6 +37,7 @@ interface WebStoriesProps {
 
 const WebStories = ({ storyOpened }: WebStoriesProps) => {
   const {
+    loadingState,
     storyMarkup,
     searchValue,
     setSearchValue,
@@ -45,6 +51,7 @@ const WebStories = ({ storyOpened }: WebStoriesProps) => {
     selectedFilterValues,
     filters,
   } = useStories(({ state, actions }) => ({
+    loadingState: state.loadingState,
     storyMarkup: state.storyMarkup,
     searchValue: state.searchValue,
     filters: state.filters,
@@ -123,15 +130,21 @@ const WebStories = ({ storyOpened }: WebStoriesProps) => {
           data-testid="web-stories-content"
           className="h-full flex-1 text-raisin-black dark:text-bright-gray"
         >
-          <iframe
-            srcDoc={storyMarkup}
-            style={{
-              width: '100%',
-              height: '100%',
-              border: 'none',
-              overflow: 'hidden',
-            }}
-          />
+          {loadingState ? (
+            <div className="h-full w-full flex">
+              <ProgressBar additionalStyles="w-1/3 mx-auto h-full" />
+            </div>
+          ) : (
+            <iframe
+              srcDoc={storyMarkup}
+              style={{
+                width: '100%',
+                height: '100%',
+                border: 'none',
+                overflow: 'hidden',
+              }}
+            />
+          )}
         </div>
       </div>
     </div>

From 28257ede7f9a954bfe45ab4aa2da2868f55f324c Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Tue, 17 Dec 2024 12:32:28 +0530
Subject: [PATCH 07/47] Allow changes E2E run against develop main and release
 branches.

---
 .github/workflows/tests-cli-e2e-tests.yml       | 4 ++++
 .github/workflows/tests-extension-e2e-tests.yml | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/.github/workflows/tests-cli-e2e-tests.yml b/.github/workflows/tests-cli-e2e-tests.yml
index 1e66b3c2c..4d0905e5f 100644
--- a/.github/workflows/tests-cli-e2e-tests.yml
+++ b/.github/workflows/tests-cli-e2e-tests.yml
@@ -6,10 +6,14 @@ on:
   push:
     branches:
       - develop
+      - main
+      - release/*
 
   pull_request:
     branches:
       - develop
+      - main
+      - release/*
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
diff --git a/.github/workflows/tests-extension-e2e-tests.yml b/.github/workflows/tests-extension-e2e-tests.yml
index 6935b4c4e..cf0093cb9 100644
--- a/.github/workflows/tests-extension-e2e-tests.yml
+++ b/.github/workflows/tests-extension-e2e-tests.yml
@@ -6,10 +6,14 @@ on:
   push:
     branches:
       - develop
+      - main
+      - release/*
 
   pull_request:
     branches:
       - develop
+      - main
+      - release/*
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:

From 4a54ae308472c6e31f23e861d9b1ef56ae68884f Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Tue, 17 Dec 2024 14:43:34 +0530
Subject: [PATCH 08/47] Revert change.

---
 assets/amp/amp-player-main.js | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/assets/amp/amp-player-main.js b/assets/amp/amp-player-main.js
index d266b70c9..f25831db6 100644
--- a/assets/amp/amp-player-main.js
+++ b/assets/amp/amp-player-main.js
@@ -47,10 +47,6 @@ function setCardMargin(margin) {
  * Initializes arrows for horizontal scrolling on desktop.
  */
 function initializeArrows() {
-  if(!cards){
-    return;
-  }
-
   const scrollContainer = document.querySelector('.carousel-cards-container');
   const containerPadding =
     parseFloat(
@@ -111,10 +107,6 @@ function resetStyles() {
  * Initializes card click events and sets up their dimensions.
  */
 function initializeCards() {
-  if(!cards){
-    return;
-  }
-
   setCards(document.querySelectorAll('.entry-point-card-container'));
   setCardMargin(parseFloat(getComputedStyle(cards[0]).marginRight));
   setCardWidth(cardMargin + cards[0].offsetWidth);

From b1e8ff00c4c6e6817b5752ba9dceb00276790ea4 Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Tue, 17 Dec 2024 14:46:55 +0530
Subject: [PATCH 09/47] Convert stories to WebStories.

---
 packages/extension/src/view/devtools/index.tsx       |  6 +++---
 .../src/view/devtools/stateProviders/index.ts        |  2 +-
 .../{stories => webStories}/context.ts               |  6 +++---
 .../stateProviders/{stories => webStories}/index.ts  |  6 +++---
 .../useStories.ts => webStories/useWebStories.ts}    | 12 ++++++------
 .../webStoriesProvider.tsx}                          |  4 ++--
 6 files changed, 18 insertions(+), 18 deletions(-)
 rename packages/extension/src/view/devtools/stateProviders/{stories => webStories}/context.ts (93%)
 rename packages/extension/src/view/devtools/stateProviders/{stories => webStories}/index.ts (73%)
 rename packages/extension/src/view/devtools/stateProviders/{stories/useStories.ts => webStories/useWebStories.ts} (73%)
 rename packages/extension/src/view/devtools/stateProviders/{stories/storiesProvider.tsx => webStories/webStoriesProvider.tsx} (98%)

diff --git a/packages/extension/src/view/devtools/index.tsx b/packages/extension/src/view/devtools/index.tsx
index 197796757..4a303663a 100644
--- a/packages/extension/src/view/devtools/index.tsx
+++ b/packages/extension/src/view/devtools/index.tsx
@@ -33,7 +33,7 @@ import {
   CookieProvider,
   SettingsProvider,
   AllowedListProvider,
-  StoriesProvider,
+  WebStoriesProvider,
 } from './stateProviders';
 
 const isDarkMode = chrome.devtools.panels.themeName === 'dark';
@@ -49,9 +49,9 @@ if (root) {
           <TablePersistentSettingsProvider>
             <LibraryDetectionProvider>
               <AllowedListProvider>
-                <StoriesProvider>
+                <WebStoriesProvider>
                   <App />
-                </StoriesProvider>
+                </WebStoriesProvider>
               </AllowedListProvider>
             </LibraryDetectionProvider>
           </TablePersistentSettingsProvider>
diff --git a/packages/extension/src/view/devtools/stateProviders/index.ts b/packages/extension/src/view/devtools/stateProviders/index.ts
index 174d838df..fda71c185 100644
--- a/packages/extension/src/view/devtools/stateProviders/index.ts
+++ b/packages/extension/src/view/devtools/stateProviders/index.ts
@@ -16,4 +16,4 @@
 export * from './cookie';
 export * from './settings';
 export * from './allowedList';
-export * from './stories';
+export * from './webStories';
diff --git a/packages/extension/src/view/devtools/stateProviders/stories/context.ts b/packages/extension/src/view/devtools/stateProviders/webStories/context.ts
similarity index 93%
rename from packages/extension/src/view/devtools/stateProviders/stories/context.ts
rename to packages/extension/src/view/devtools/stateProviders/webStories/context.ts
index 8820d5614..8eb7adc39 100644
--- a/packages/extension/src/view/devtools/stateProviders/stories/context.ts
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/context.ts
@@ -22,7 +22,7 @@ import type {
   FilterSidebarValue,
 } from '@google-psat/design-system';
 
-export interface StoryContext {
+export interface WebStoryContext {
   state: {
     storyMarkup: string;
     searchValue: string;
@@ -46,7 +46,7 @@ export interface StoryContext {
   };
 }
 
-const initialState: StoryContext = {
+const initialState: WebStoryContext = {
   state: {
     storyMarkup: '',
     searchValue: '',
@@ -68,4 +68,4 @@ const initialState: StoryContext = {
   },
 };
 
-export default createContext<StoryContext>(initialState);
+export default createContext<WebStoryContext>(initialState);
diff --git a/packages/extension/src/view/devtools/stateProviders/stories/index.ts b/packages/extension/src/view/devtools/stateProviders/webStories/index.ts
similarity index 73%
rename from packages/extension/src/view/devtools/stateProviders/stories/index.ts
rename to packages/extension/src/view/devtools/stateProviders/webStories/index.ts
index a26e80196..c464723c8 100644
--- a/packages/extension/src/view/devtools/stateProviders/stories/index.ts
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/index.ts
@@ -13,6 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { default as StoriesProvider } from './storiesProvider';
-export { default as StoriesContext, type StoryContext } from './context';
-export { default as useStories } from './useStories';
+export { default as WebStoriesProvider } from './webStoriesProvider';
+export { default as WebStoriesContext, type WebStoryContext } from './context';
+export { default as useWebStories } from './useWebStories';
diff --git a/packages/extension/src/view/devtools/stateProviders/stories/useStories.ts b/packages/extension/src/view/devtools/stateProviders/webStories/useWebStories.ts
similarity index 73%
rename from packages/extension/src/view/devtools/stateProviders/stories/useStories.ts
rename to packages/extension/src/view/devtools/stateProviders/webStories/useWebStories.ts
index 2ac5fea11..c7d0ef80b 100644
--- a/packages/extension/src/view/devtools/stateProviders/stories/useStories.ts
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/useWebStories.ts
@@ -21,20 +21,20 @@ import { useContextSelector } from '@google-psat/common';
 /**
  * Internal dependencies.
  */
-import Context, { type StoryContext } from './context';
+import Context, { type WebStoryContext } from './context';
 
-export function useStories(): StoryContext;
-export function useStories<T>(selector: (state: StoryContext) => T): T;
+export function useWebStories(): WebStoryContext;
+export function useWebStories<T>(selector: (state: WebStoryContext) => T): T;
 
 /**
  * Cookie store hook.
  * @param selector Selector function to partially select state.
  * @returns selected part of the state
  */
-export function useStories<T>(
-  selector: (state: StoryContext) => T | StoryContext = (state) => state
+export function useWebStories<T>(
+  selector: (state: WebStoryContext) => T | WebStoryContext = (state) => state
 ) {
   return useContextSelector(Context, selector);
 }
 
-export default useStories;
+export default useWebStories;
diff --git a/packages/extension/src/view/devtools/stateProviders/stories/storiesProvider.tsx b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
similarity index 98%
rename from packages/extension/src/view/devtools/stateProviders/stories/storiesProvider.tsx
rename to packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
index 402679048..d9d1fa5bd 100644
--- a/packages/extension/src/view/devtools/stateProviders/stories/storiesProvider.tsx
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
@@ -32,7 +32,7 @@ import { useDebounce } from 'use-debounce';
 /**
  * Internal dependencies.
  */
-import Context, { type StoryContext } from './context';
+import Context, { type WebStoryContext } from './context';
 import {
   getStoryMarkup,
   type SingleStoryJSON,
@@ -56,7 +56,7 @@ const Provider = ({ children }: PropsWithChildren) => {
   const [tags, setTags] = useState<Record<number, string>>({});
   const [categories, setCategories] = useState<Record<number, string>>({});
   const [sortValue, setSortValue] =
-    useState<StoryContext['state']['sortValue']>('latest');
+    useState<WebStoryContext['state']['sortValue']>('latest');
 
   const [searchValue] = useDebounce(_searchValue, 500);
 

From 93200748f487c6e1237134ae05dda171762f8f07 Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Tue, 17 Dec 2024 14:53:49 +0530
Subject: [PATCH 10/47] Change references of story to webStory.

---
 .../view/devtools/components/webStories/contentPanel.tsx  | 8 +++++---
 .../src/view/devtools/components/webStories/index.tsx     | 4 ++--
 .../view/devtools/stateProviders/webStories/context.ts    | 2 ++
 .../stateProviders/webStories/webStoriesProvider.tsx      | 4 ++++
 4 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx b/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
index ee547567f..ece2f577d 100644
--- a/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
+++ b/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
@@ -29,7 +29,7 @@ import { noop } from '@google-psat/common';
 /**
  * Internal dependencies.
  */
-import { useStories } from '../../stateProviders';
+import { useWebStories } from '../../stateProviders';
 
 interface WebStoriesProps {
   storyOpened: boolean;
@@ -37,6 +37,7 @@ interface WebStoriesProps {
 
 const WebStories = ({ storyOpened }: WebStoriesProps) => {
   const {
+    storyCount,
     loadingState,
     storyMarkup,
     searchValue,
@@ -50,7 +51,8 @@ const WebStories = ({ storyOpened }: WebStoriesProps) => {
     resetFilters,
     selectedFilterValues,
     filters,
-  } = useStories(({ state, actions }) => ({
+  } = useWebStories(({ state, actions }) => ({
+    storyCount: state.storyCount,
     loadingState: state.loadingState,
     storyMarkup: state.storyMarkup,
     searchValue: state.searchValue,
@@ -78,7 +80,7 @@ const WebStories = ({ storyOpened }: WebStoriesProps) => {
             hideFiltering={false}
             disableFiltering={false}
             hideSearch={false}
-            count={0} // TODO: Add count
+            count={storyCount}
           >
             <div className="flex justify-between items-center min-w-[125px] text-raisin-black dark:text-bright-gray">
               <p>Sort by:</p>
diff --git a/packages/extension/src/view/devtools/components/webStories/index.tsx b/packages/extension/src/view/devtools/components/webStories/index.tsx
index a1df6832e..13ca51410 100644
--- a/packages/extension/src/view/devtools/components/webStories/index.tsx
+++ b/packages/extension/src/view/devtools/components/webStories/index.tsx
@@ -23,10 +23,10 @@ import { LandingPage } from '@google-psat/design-system';
  * Internal dependencies.
  */
 import ContentPanel from './contentPanel';
-import { useStories } from '../../stateProviders';
+import { useWebStories } from '../../stateProviders';
 
 const WebStories = () => {
-  const { storyOpened } = useStories(({ state }) => ({
+  const { storyOpened } = useWebStories(({ state }) => ({
     storyOpened: state.storyOpened,
   }));
 
diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/context.ts b/packages/extension/src/view/devtools/stateProviders/webStories/context.ts
index 8eb7adc39..c5c19a30d 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/context.ts
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/context.ts
@@ -33,6 +33,7 @@ export interface WebStoryContext {
     sortValue: 'latest' | 'oldest';
     storyOpened: boolean;
     loadingState: boolean;
+    storyCount: number;
   };
   actions: {
     resetFilters: () => void;
@@ -57,6 +58,7 @@ const initialState: WebStoryContext = {
     sortValue: 'latest',
     storyOpened: false,
     loadingState: false,
+    storyCount: 0,
   },
   actions: {
     resetFilters: noop,
diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
index d9d1fa5bd..c6f144f27 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
@@ -55,6 +55,7 @@ const Provider = ({ children }: PropsWithChildren) => {
   const [loadingState, setLoadingState] = useState<boolean>(false);
   const [tags, setTags] = useState<Record<number, string>>({});
   const [categories, setCategories] = useState<Record<number, string>>({});
+  const [storyCount, setStoryCount] = useState<number>(0);
   const [sortValue, setSortValue] =
     useState<WebStoryContext['state']['sortValue']>('latest');
 
@@ -358,6 +359,7 @@ const Provider = ({ children }: PropsWithChildren) => {
       return story;
     });
 
+    setStoryCount(storyJSON.length);
     setStoryMarkup(getStoryMarkup(storyJSON));
     setLoadingState(false);
   }, [tags, categories, authors, queryParams, getAuthorsAndPublisherLogo]);
@@ -384,6 +386,7 @@ const Provider = ({ children }: PropsWithChildren) => {
         sortValue,
         storyOpened,
         loadingState,
+        storyCount,
       },
       actions: {
         resetFilters,
@@ -395,6 +398,7 @@ const Provider = ({ children }: PropsWithChildren) => {
       },
     };
   }, [
+    storyCount,
     storyMarkup,
     _searchValue,
     showFilterSidebar,

From 049deef5913826bcd7c10b417f6e3ac07ec5d5de Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Tue, 17 Dec 2024 15:20:21 +0530
Subject: [PATCH 11/47] Change comment of header from 2023 to 2024

---
 .../src/view/devtools/stateProviders/webStories/context.ts      | 2 +-
 .../src/view/devtools/stateProviders/webStories/index.ts        | 2 +-
 .../view/devtools/stateProviders/webStories/useWebStories.ts    | 2 +-
 .../devtools/stateProviders/webStories/webStoriesProvider.tsx   | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/context.ts b/packages/extension/src/view/devtools/stateProviders/webStories/context.ts
index c5c19a30d..857f3be00 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/context.ts
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/context.ts
@@ -1,5 +1,5 @@
 /*
- * Copyright 2023 Google LLC
+ * Copyright 2024 Google LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/index.ts b/packages/extension/src/view/devtools/stateProviders/webStories/index.ts
index c464723c8..7355616ee 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/index.ts
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/index.ts
@@ -1,5 +1,5 @@
 /*
- * Copyright 2023 Google LLC
+ * Copyright 2024 Google LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/useWebStories.ts b/packages/extension/src/view/devtools/stateProviders/webStories/useWebStories.ts
index c7d0ef80b..058545fcd 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/useWebStories.ts
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/useWebStories.ts
@@ -1,5 +1,5 @@
 /*
- * Copyright 2023 Google LLC
+ * Copyright 2024 Google LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
index c6f144f27..3c1d1d87e 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
@@ -1,5 +1,5 @@
 /*
- * Copyright 2023 Google LLC
+ * Copyright 2024 Google LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.

From 2ac98e82530f270a2b2d4acada6989eb0b3c5160 Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Tue, 17 Dec 2024 16:03:37 +0530
Subject: [PATCH 12/47] Remove unused tests.

---
 .../devtools/e2e-tests/landingPages/index.ts  | 90 -------------------
 1 file changed, 90 deletions(-)
 delete mode 100644 packages/extension/src/view/devtools/e2e-tests/landingPages/index.ts

diff --git a/packages/extension/src/view/devtools/e2e-tests/landingPages/index.ts b/packages/extension/src/view/devtools/e2e-tests/landingPages/index.ts
deleted file mode 100644
index 74769885a..000000000
--- a/packages/extension/src/view/devtools/e2e-tests/landingPages/index.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-/*
- * Copyright 2023 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * External dependencies.
- */
-import { Page } from 'puppeteer';
-
-/**
- * Internal dependencies.
- */
-import { PuppeteerManagement } from '../../test-utils/puppeteerManagement';
-import { Interaction } from '../../test-utils/interaction';
-import { selectors } from '../../test-utils/constants';
-
-let page: Page;
-let puppeteer: PuppeteerManagement;
-let interaction: Interaction;
-
-beforeEach(async () => {
-  puppeteer = new PuppeteerManagement();
-  await puppeteer.setup();
-  page = await puppeteer.openPage();
-}, 40000);
-
-afterEach(async () => {
-  await puppeteer.close();
-}, 40000);
-
-test('Should be able to validate the embedded privacy.com page title', async () => {
-  await puppeteer.navigateToURL(page, 'https://bbc.com');
-
-  const devtools = await puppeteer.getDevtools();
-  const key = puppeteer.getCMDKey();
-  interaction = new Interaction(devtools, key);
-
-  // Navigate to Privacy Sandbox Tab
-  const devtoolsTargets = await interaction.navigateToPrivacySandboxTab();
-
-  // Validate the privacy sandbox embedded page title.
-  const outerIframe = await devtoolsTargets.$(selectors.devtoolIframeSelector);
-
-  if (!outerIframe) {
-    throw new Error('Outer iframe not found');
-  }
-
-  const outerFrame = await outerIframe.contentFrame();
-  await new Promise((resolve) => setTimeout(resolve, 4000));
-
-  if (outerFrame) {
-    // Get the privacySandboxEmbedded Iframe.
-    const nestedIframe = await outerFrame.$(
-      selectors.privacySandBoxEmbedIframeSelector
-    );
-
-    if (!nestedIframe) {
-      throw new Error('Nested iframe not found');
-    }
-
-    const nestedFrame = await nestedIframe.contentFrame();
-
-    // Validate the Privacy sandbox page title.
-    if (nestedFrame) {
-      const title = await nestedFrame.title();
-      expect(title).toBe(
-        'The Privacy Sandbox: Technology for a More Private Web'
-      );
-
-      // Check if the iframe is visible
-      const isVisible = await nestedFrame.evaluate(() => {
-        const style = getComputedStyle(document.body);
-        return style.visibility !== 'hidden' && style.display !== 'none';
-      });
-      expect(isVisible).toBe(true);
-    }
-  }
-}, 60000);

From 07a0ed1f4aad595c1f026768095ed3d6f486838a Mon Sep 17 00:00:00 2001
From: Mayank Rana <mayankranax1@gmail.com>
Date: Tue, 17 Dec 2024 18:12:00 +0530
Subject: [PATCH 13/47] Decrease min width for sort by

---
 .../src/view/devtools/components/webStories/contentPanel.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx b/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
index ece2f577d..c418ffada 100644
--- a/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
+++ b/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
@@ -82,7 +82,7 @@ const WebStories = ({ storyOpened }: WebStoriesProps) => {
             hideSearch={false}
             count={storyCount}
           >
-            <div className="flex justify-between items-center min-w-[125px] text-raisin-black dark:text-bright-gray">
+            <div className="flex justify-between items-center min-w-[100px] text-raisin-black dark:text-bright-gray">
               <p>Sort by:</p>
               <select
                 value={sortValue}

From 4d082b41b8c35404afc33b331546cff6efd614f3 Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Wed, 18 Dec 2024 12:36:29 +0530
Subject: [PATCH 14/47] Fix erros and colors.

---
 assets/amp/amp-player-main.js                      | 12 ++++++++++--
 packages/extension/src/utils/createStoryIframe.tsx |  1 -
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/assets/amp/amp-player-main.js b/assets/amp/amp-player-main.js
index f25831db6..9e3ffb217 100644
--- a/assets/amp/amp-player-main.js
+++ b/assets/amp/amp-player-main.js
@@ -47,7 +47,8 @@ function setCardMargin(margin) {
  * Initializes arrows for horizontal scrolling on desktop.
  */
 function initializeArrows() {
-  const scrollContainer = document.querySelector('.carousel-cards-container');
+  try{
+    const scrollContainer = document.querySelector('.carousel-cards-container');
   const containerPadding =
     parseFloat(
       getComputedStyle(scrollContainer.firstElementChild).paddingLeft
@@ -65,6 +66,9 @@ function initializeArrows() {
   if (maxScroll < 0) {
     document.querySelector('.carousel-container').classList.add('overflow-right');
   }
+  }catch(error){
+    //Fail silently
+  }
 }
 
 /**
@@ -107,7 +111,8 @@ function resetStyles() {
  * Initializes card click events and sets up their dimensions.
  */
 function initializeCards() {
-  setCards(document.querySelectorAll('.entry-point-card-container'));
+  try{
+    setCards(document.querySelectorAll('.entry-point-card-container'));
   setCardMargin(parseFloat(getComputedStyle(cards[0]).marginRight));
   setCardWidth(cardMargin + cards[0].offsetWidth);
 
@@ -127,6 +132,9 @@ function initializeCards() {
       player.play();
     });
   });
+  }catch(error){
+    //Fail silently
+  }
 }
 
 /**
diff --git a/packages/extension/src/utils/createStoryIframe.tsx b/packages/extension/src/utils/createStoryIframe.tsx
index ec1b85999..1d391d945 100644
--- a/packages/extension/src/utils/createStoryIframe.tsx
+++ b/packages/extension/src/utils/createStoryIframe.tsx
@@ -67,7 +67,6 @@ export const getStoryMarkup = (storyJson: SingleStoryJSON[]) => {
             height: 488px;
             bottom: 0;
             right: 0;
-            background: linear-gradient(270deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0) 89.96%);
             background-attachment: local, local, scroll, scroll;
         }
 

From d9ce9d432e6569ec07bce28e9e85c021ec180cf5 Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Wed, 18 Dec 2024 13:09:18 +0530
Subject: [PATCH 15/47] use URLSearchParams instead of creating a string.

---
 .../webStories/webStoriesProvider.tsx         | 36 +++++++++++--------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
index 3c1d1d87e..6f020764f 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
@@ -289,21 +289,27 @@ const Provider = ({ children }: PropsWithChildren) => {
       }
     });
 
-    return `${
-      selectedAuthorsID.length > 0
-        ? 'author=' + selectedAuthorsID.join(',')
-        : ''
-    }${
-      selectedCategoriesId.length > 0
-        ? '&web_story_category=' + selectedCategoriesId.join(',')
-        : ''
-    }${
-      selectedTagId.length > 0
-        ? '&web_story_tag=' + selectedTagId.join(',')
-        : ''
-    }${sortValue === 'latest' ? '&order=desc' : '&order=asc'}${
-      searchValue ? '&search="' + searchValue + '"' : ''
-    }`;
+    const urlSearchParams = new URLSearchParams();
+
+    if (selectedAuthorsID.length > 0) {
+      urlSearchParams.append('author', selectedAuthorsID.join(','));
+    }
+
+    if (selectedCategoriesId.length > 0) {
+      urlSearchParams.append('author', selectedCategoriesId.join(','));
+    }
+
+    if (selectedTagId.length > 0) {
+      urlSearchParams.append('author', selectedTagId.join(','));
+    }
+
+    urlSearchParams.append('order', sortValue === 'latest' ? 'desc' : 'asc');
+
+    if (searchValue) {
+      urlSearchParams.append('search', searchValue);
+    }
+
+    return urlSearchParams.toString();
   }, [
     searchValue,
     authors,

From fc989afd73c380737adc0f27f65a728ad492ca31 Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Wed, 18 Dec 2024 15:01:31 +0530
Subject: [PATCH 16/47] Add infinite scroll to the stories loader.

---
 assets/amp/amp-player-main.js                 | 147 +++++++++++++-----
 .../components/webStories/contentPanel.tsx    |  36 +++--
 .../stateProviders/webStories/constants.ts}   |  65 +-------
 .../stateProviders/webStories/context.ts      |   5 +-
 .../webStories/webStoriesProvider.tsx         |  71 ++++++---
 5 files changed, 189 insertions(+), 135 deletions(-)
 rename packages/extension/src/{utils/createStoryIframe.tsx => view/devtools/stateProviders/webStories/constants.ts} (89%)

diff --git a/assets/amp/amp-player-main.js b/assets/amp/amp-player-main.js
index 9e3ffb217..e09927035 100644
--- a/assets/amp/amp-player-main.js
+++ b/assets/amp/amp-player-main.js
@@ -47,26 +47,28 @@ function setCardMargin(margin) {
  * Initializes arrows for horizontal scrolling on desktop.
  */
 function initializeArrows() {
-  try{
+  try {
     const scrollContainer = document.querySelector('.carousel-cards-container');
-  const containerPadding =
-    parseFloat(
-      getComputedStyle(scrollContainer.firstElementChild).paddingLeft
-    ) +
-    parseFloat(
-      getComputedStyle(scrollContainer.firstElementChild).paddingRight
-    );
-
-  maxScroll =
-    scrollContainer.offsetWidth -
-    containerPadding +
-    cardMargin -
-    cards.length * cardWidth;
-
-  if (maxScroll < 0) {
-    document.querySelector('.carousel-container').classList.add('overflow-right');
-  }
-  }catch(error){
+    const containerPadding =
+      parseFloat(
+        getComputedStyle(scrollContainer.firstElementChild).paddingLeft
+      ) +
+      parseFloat(
+        getComputedStyle(scrollContainer.firstElementChild).paddingRight
+      );
+
+    maxScroll =
+      scrollContainer.offsetWidth -
+      containerPadding +
+      cardMargin -
+      cards.length * cardWidth;
+
+    if (maxScroll < 0) {
+      document
+        .querySelector('.carousel-container')
+        .classList.add('overflow-right');
+    }
+  } catch (error) {
     //Fail silently
   }
 }
@@ -75,9 +77,9 @@ function initializeArrows() {
  * Closes the lightbox and resets the player and UI.
  */
 function closePlayer() {
-  const data = { storyOpened: false }
-  const event = new CustomEvent('webStoriesLightBoxEvent', { detail: data })
-  window.parent.document.dispatchEvent(event)
+  const data = { storyOpened: false };
+  const event = new CustomEvent('webStoriesLightBoxEvent', { detail: data });
+  window.parent.document.dispatchEvent(event);
   player.pause();
   document.body.classList.remove('lightbox-open');
   lightboxEl.classList.add('closed');
@@ -111,28 +113,30 @@ function resetStyles() {
  * Initializes card click events and sets up their dimensions.
  */
 function initializeCards() {
-  try{
+  try {
     setCards(document.querySelectorAll('.entry-point-card-container'));
-  setCardMargin(parseFloat(getComputedStyle(cards[0]).marginRight));
-  setCardWidth(cardMargin + cards[0].offsetWidth);
-
-  const stories = player.getStories();
-
-  cards.forEach((card, idx) => {
-    card.addEventListener('click', () => {
-      player.show(stories[idx].href, null, { animate: false });
-      const data = { storyOpened: true }
-      const event = new CustomEvent('webStoriesLightBoxEvent', { detail: data })
-      window.parent.document.dispatchEvent(event)
-
-      document.body.classList.add('lightbox-open');
-      lightboxEl.classList.remove('closed');
-      card.classList.add('hidden');
-      resetStyles();
-      player.play();
+    setCardMargin(parseFloat(getComputedStyle(cards[0]).marginRight));
+    setCardWidth(cardMargin + cards[0].offsetWidth);
+
+    const stories = player.getStories();
+
+    cards.forEach((card, idx) => {
+      card.addEventListener('click', () => {
+        player.show(stories[idx].href, null, { animate: false });
+        const data = { storyOpened: true };
+        const event = new CustomEvent('webStoriesLightBoxEvent', {
+          detail: data,
+        });
+        window.parent.document.dispatchEvent(event);
+
+        document.body.classList.add('lightbox-open');
+        lightboxEl.classList.remove('closed');
+        card.classList.add('hidden');
+        resetStyles();
+        player.play();
+      });
     });
-  });
-  }catch(error){
+  } catch (error) {
     //Fail silently
   }
 }
@@ -146,6 +150,7 @@ function initializeCarousel() {
 
   initializeCards();
   initializeArrows();
+  infiniteScroll();
 
   player.addEventListener('amp-story-player-close', closePlayer);
 }
@@ -178,5 +183,63 @@ function easeOutQuad(t) {
   return --t * t * t + 1;
 }
 
+function infiniteScroll() {
+  window.addEventListener('scroll', () => {
+    if (
+      window.scrollY + window.innerHeight >=
+      document.documentElement.scrollHeight
+    ) {
+      const event = new CustomEvent('loadMoreData');
+      window.parent.document.dispatchEvent(event);
+    }
+  });
+}
+
+const getCardHTML = ({
+  heroImage,
+  publisherLogo,
+  publisherName,
+  storyTitle,
+}) => {
+  return `
+    <div class="entry-point-card-container">
+    <div class="background-cards">
+        <div class="background-card-1"></div>
+        <div class="background-card-2"></div>
+    </div>
+    <img src="${heroImage}" class="entry-point-card-img" alt="A cat">
+    <div class="author-container">
+        <div class="logo-container">
+            <div class="logo-ring"></div>
+            <img class="entry-point-card-logo"
+                src="${publisherLogo}" alt="Publisher logo">
+        </div>
+        <span class="entry-point-card-subtitle"> By ${publisherName} </span>
+        </div>
+
+        <div class="card-headline-container">
+            <span class="entry-point-card-headline"> ${storyTitle} </span>
+        </div>
+    </div>
+    `;
+};
+
+const getStoryAnchorTags = ({ storyUrl }) => {
+  return `
+        <a href="${storyUrl}" class="story"></a>
+    `;
+};
+
+const infiniteScrollDataResponse = ({data}) => {
+  const totalAddedCards = document.querySelectorAll('.entry-point-card-container')?.length ?? 0;
+  const storiesToUse = data.slice(totalAddedCards)
+  console.log(storiesToUse)
+  const cards = storiesToUse.map(getCardHTML);
+  const storyAnchors = storiesToUse.map(getStoryAnchorTags);
+  document.getElementById('anchor-tags-container').innerHTML += storyAnchors;
+  document.getElementById('entry-points').innerHTML += cards;
+}
+
 // Initialize on window load.
 window.addEventListener('load', init);
+window.addEventListener('message', infiniteScrollDataResponse)
diff --git a/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx b/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
index c418ffada..c937069eb 100644
--- a/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
+++ b/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
@@ -16,7 +16,7 @@
 /**
  * External dependencies.
  */
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import {
   ChipsBar,
   FiltersSidebar,
@@ -30,16 +30,18 @@ import { noop } from '@google-psat/common';
  * Internal dependencies.
  */
 import { useWebStories } from '../../stateProviders';
+import { STORY_MARKUP } from '../../stateProviders/webStories/constants';
 
 interface WebStoriesProps {
   storyOpened: boolean;
 }
 
 const WebStories = ({ storyOpened }: WebStoriesProps) => {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
   const {
     storyCount,
     loadingState,
-    storyMarkup,
+    allStoryJSON,
     searchValue,
     setSearchValue,
     showFilterSidebar,
@@ -54,7 +56,7 @@ const WebStories = ({ storyOpened }: WebStoriesProps) => {
   } = useWebStories(({ state, actions }) => ({
     storyCount: state.storyCount,
     loadingState: state.loadingState,
-    storyMarkup: state.storyMarkup,
+    allStoryJSON: state.allStoryJSON,
     searchValue: state.searchValue,
     filters: state.filters,
     sortValue: state.sortValue,
@@ -68,6 +70,18 @@ const WebStories = ({ storyOpened }: WebStoriesProps) => {
     resetFilters: actions.resetFilters,
   }));
 
+  useEffect(() => {
+    if (!iframeRef.current) {
+      return;
+    }
+
+    if (loadingState) {
+      return;
+    }
+
+    iframeRef.current?.contentWindow?.postMessage(allStoryJSON, '*');
+  }, [allStoryJSON, loadingState]);
+
   return (
     <div className="h-full w-full flex flex-col">
       {!storyOpened && (
@@ -132,21 +146,21 @@ const WebStories = ({ storyOpened }: WebStoriesProps) => {
           data-testid="web-stories-content"
           className="h-full flex-1 text-raisin-black dark:text-bright-gray"
         >
-          {loadingState ? (
-            <div className="h-full w-full flex">
+          <div className="h-full w-full flex">
+            {loadingState && (
               <ProgressBar additionalStyles="w-1/3 mx-auto h-full" />
-            </div>
-          ) : (
+            )}
             <iframe
-              srcDoc={storyMarkup}
+              ref={iframeRef}
+              srcDoc={STORY_MARKUP}
               style={{
-                width: '100%',
-                height: '100%',
+                width: loadingState ? '0%' : '100%',
+                height: loadingState ? '0%' : '100%',
                 border: 'none',
                 overflow: 'hidden',
               }}
             />
-          )}
+          </div>
         </div>
       </div>
     </div>
diff --git a/packages/extension/src/utils/createStoryIframe.tsx b/packages/extension/src/view/devtools/stateProviders/webStories/constants.ts
similarity index 89%
rename from packages/extension/src/utils/createStoryIframe.tsx
rename to packages/extension/src/view/devtools/stateProviders/webStories/constants.ts
index 1d391d945..1f760edcf 100644
--- a/packages/extension/src/utils/createStoryIframe.tsx
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/constants.ts
@@ -13,15 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-interface CardProps {
-  heroImage: string;
-  publisherLogo: string;
-  publisherName: string;
-  storyTitle: string;
-}
-interface StoryAnchorProps {
-  storyUrl: string;
-}
+
 export interface SingleStoryJSON {
   heroImage: string;
   publisherLogo: string;
@@ -30,14 +22,7 @@ export interface SingleStoryJSON {
   storyUrl: string;
 }
 
-const getStoryAnchorTags = ({ storyUrl }: StoryAnchorProps) => {
-  return `
-        <a href="${storyUrl}" class="story"></a>
-    `;
-};
-
-export const getStoryMarkup = (storyJson: SingleStoryJSON[]) => {
-  const predefinedStoryHeader = `
+export const STORY_MARKUP = `
 <!DOCTYPE html>
 <html lang="en">
 
@@ -503,10 +488,7 @@ export const getStoryMarkup = (storyJson: SingleStoryJSON[]) => {
     <div class="carousel-section">
         <div class="carousel-container">
             <div class="carousel-cards-container">
-                <div class="entry-points">
-`;
-
-  const predefinedStoryEnder = `
+                <div class="entry-points" id="entry-points">
                 </div>
             </div>
         </div>
@@ -530,49 +512,12 @@ export const getStoryMarkup = (storyJson: SingleStoryJSON[]) => {
           ]
         }
       </script>
-`;
-
-  const getCardHTML = ({
-    heroImage,
-    publisherLogo,
-    publisherName,
-    storyTitle,
-  }: CardProps) => {
-    return `
-      <div class="entry-point-card-container">
-      <div class="background-cards">
-          <div class="background-card-1"></div>
-          <div class="background-card-2"></div>
-      </div>
-      <img src="${heroImage}" class="entry-point-card-img" alt="A cat">
-      <div class="author-container">
-          <div class="logo-container">
-              <div class="logo-ring"></div>
-              <img class="entry-point-card-logo"
-                  src="${publisherLogo}" alt="Publisher logo">
-          </div>
-          <span class="entry-point-card-subtitle"> By ${publisherName} </span>
-          </div>
-  
-          <div class="card-headline-container">
-              <span class="entry-point-card-headline"> ${storyTitle} </span>
-          </div>
+      <div id="anchor-tags-container">
       </div>
-      `;
-  };
-
-  const enderTags = `
-        </amp-story-player>
+      </amp-story-player>
     </div>
 
 </body>
 
 </html>
 `;
-  const cards = storyJson.map(getCardHTML);
-  const storyAnchors = storyJson.map(getStoryAnchorTags);
-
-  return `${predefinedStoryHeader}${cards.join(
-    ''
-  )}${predefinedStoryEnder}${storyAnchors.join('')}${enderTags}`;
-};
diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/context.ts b/packages/extension/src/view/devtools/stateProviders/webStories/context.ts
index 857f3be00..a303570ad 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/context.ts
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/context.ts
@@ -21,10 +21,11 @@ import type {
   ChipsFilter,
   FilterSidebarValue,
 } from '@google-psat/design-system';
+import type { SingleStoryJSON } from './constants';
 
 export interface WebStoryContext {
   state: {
-    storyMarkup: string;
+    allStoryJSON: SingleStoryJSON[];
     searchValue: string;
     showFilterSidebar: boolean;
     filters: FilterSidebarValue[];
@@ -49,7 +50,7 @@ export interface WebStoryContext {
 
 const initialState: WebStoryContext = {
   state: {
-    storyMarkup: '',
+    allStoryJSON: [],
     searchValue: '',
     showFilterSidebar: false,
     selectedFilters: [],
diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
index 6f020764f..5e0cff1f6 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
@@ -22,6 +22,7 @@ import React, {
   useState,
   useCallback,
   useMemo,
+  useRef,
 } from 'react';
 import type {
   ChipsFilter,
@@ -33,29 +34,27 @@ import { useDebounce } from 'use-debounce';
  * Internal dependencies.
  */
 import Context, { type WebStoryContext } from './context';
-import {
-  getStoryMarkup,
-  type SingleStoryJSON,
-} from '../../../../utils/createStoryIframe';
+import { type SingleStoryJSON } from './constants';
 
 const Provider = ({ children }: PropsWithChildren) => {
   const [_searchValue, setSearchValue] = useState('');
-  const [storyMarkup, setStoryMarkup] = useState('');
   const [showFilterSidebar, setShowFilterSidebar] = useState(false);
   const [filters, setFilters] = useState<FilterSidebarValue[]>([]);
   const [selectedFilters, setSelectedFilters] = useState<ChipsFilter[]>([]);
   const [selectedFilterValues, setSelectedFilterValues] = useState<
     Record<string, string[]>
   >({});
-  const [authorPublisherLogo, setAuthorPublisherLogo] = useState<
-    Record<number, Record<string, string>>
-  >({});
+  const authorPublisherLogoRef = useRef<Record<number, Record<string, string>>>(
+    {}
+  );
   const [storyOpened, setStoryOpened] = useState(false);
   const [authors, setAuthors] = useState<Record<number, string>>({});
   const [loadingState, setLoadingState] = useState<boolean>(false);
   const [tags, setTags] = useState<Record<number, string>>({});
   const [categories, setCategories] = useState<Record<number, string>>({});
   const [storyCount, setStoryCount] = useState<number>(0);
+  const [pageNumber, setPageNumber] = useState<number>(1);
+  const [allStoryJSON, setAllStoryJSON] = useState<SingleStoryJSON[]>([]);
   const [sortValue, setSortValue] =
     useState<WebStoryContext['state']['sortValue']>('latest');
 
@@ -89,12 +88,21 @@ const Provider = ({ children }: PropsWithChildren) => {
     setStoryOpened(() => event.detail.storyOpened);
   }, []);
 
+  const webStoriesLoadMoreData = useCallback(() => {
+    setPageNumber((prevState) => prevState + 1);
+  }, []);
+
   useEffect(() => {
     window.document.addEventListener(
       'webStoriesLightBoxEvent',
       webStoriesLightBoxCallback,
       false
     );
+    window.document.addEventListener(
+      'loadMoreData',
+      webStoriesLoadMoreData,
+      false
+    );
 
     return () => {
       window.document.removeEventListener(
@@ -102,8 +110,13 @@ const Provider = ({ children }: PropsWithChildren) => {
         webStoriesLightBoxCallback,
         false
       );
+      window.document.removeEventListener(
+        'loadMoreData',
+        webStoriesLoadMoreData,
+        false
+      );
     };
-  }, [webStoriesLightBoxCallback]);
+  }, [webStoriesLightBoxCallback, webStoriesLoadMoreData]);
 
   const toggleFilterSelection = useCallback(
     (filterKey: string, filterValue: string) => {
@@ -213,14 +226,14 @@ const Provider = ({ children }: PropsWithChildren) => {
       }
 
       const mediaAuthorSetClone = mediaAuthorSet;
-      Object.keys(authorPublisherLogo).forEach((key) => {
-        if (authorPublisherLogo[Number(key)]) {
+      Object.keys(authorPublisherLogoRef.current).forEach((key) => {
+        if (authorPublisherLogoRef.current[Number(key)]) {
           delete mediaAuthorSetClone[Number(key)];
         }
       });
 
       if (Object.keys(mediaAuthorSet).length === 0) {
-        return authorPublisherLogo;
+        return authorPublisherLogoRef.current;
       }
 
       const transformedMediaAuthorMap: Record<
@@ -257,10 +270,11 @@ const Provider = ({ children }: PropsWithChildren) => {
           };
         })
       );
-      setAuthorPublisherLogo(transformedMediaAuthorMap);
+
+      authorPublisherLogoRef.current = transformedMediaAuthorMap;
       return transformedMediaAuthorMap;
     },
-    [authorPublisherLogo, authors]
+    [authors]
   );
 
   const queryParams = useMemo(() => {
@@ -291,6 +305,9 @@ const Provider = ({ children }: PropsWithChildren) => {
 
     const urlSearchParams = new URLSearchParams();
 
+    urlSearchParams.append('per_page', '4');
+    urlSearchParams.append('page', pageNumber.toString());
+
     if (selectedAuthorsID.length > 0) {
       urlSearchParams.append('author', selectedAuthorsID.join(','));
     }
@@ -311,6 +328,7 @@ const Provider = ({ children }: PropsWithChildren) => {
 
     return urlSearchParams.toString();
   }, [
+    pageNumber,
     searchValue,
     authors,
     categories,
@@ -330,16 +348,22 @@ const Provider = ({ children }: PropsWithChildren) => {
       return;
     }
 
-    setLoadingState(true);
+    if (pageNumber === 1) {
+      setLoadingState(true);
+    }
+
     const response = await fetch(
       `https://privacysandbox-stories.com/wp-json/web-stories/v1/web-story/?${queryParams}`
     );
 
     const responseJSON = await response.json();
+    if (responseJSON?.data?.status === 400) {
+      return;
+    }
     let storyJSON: SingleStoryJSON[] = [];
     const mediaAuthorSet: Record<number, string> = {};
 
-    responseJSON.forEach((singleResponse: any) => {
+    responseJSON?.forEach((singleResponse: any) => {
       if (singleResponse?.status === 'publish') {
         mediaAuthorSet[singleResponse.author] =
           singleResponse?.meta?.web_stories_publisher_logo;
@@ -366,9 +390,16 @@ const Provider = ({ children }: PropsWithChildren) => {
     });
 
     setStoryCount(storyJSON.length);
-    setStoryMarkup(getStoryMarkup(storyJSON));
     setLoadingState(false);
-  }, [tags, categories, authors, queryParams, getAuthorsAndPublisherLogo]);
+    setAllStoryJSON((prevState) => [...prevState, ...storyJSON]);
+  }, [
+    tags,
+    categories,
+    authors,
+    pageNumber,
+    queryParams,
+    getAuthorsAndPublisherLogo,
+  ]);
 
   useEffect(() => {
     fetchAuthors();
@@ -383,7 +414,7 @@ const Provider = ({ children }: PropsWithChildren) => {
   const memoisedValue = useMemo(() => {
     return {
       state: {
-        storyMarkup,
+        allStoryJSON,
         searchValue: _searchValue,
         showFilterSidebar,
         selectedFilters,
@@ -404,8 +435,8 @@ const Provider = ({ children }: PropsWithChildren) => {
       },
     };
   }, [
+    allStoryJSON,
     storyCount,
-    storyMarkup,
     _searchValue,
     showFilterSidebar,
     selectedFilters,

From 8117b97076b7a6c22519c46db292e94919ba13f5 Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Wed, 18 Dec 2024 15:05:00 +0530
Subject: [PATCH 17/47] Change per page fetch to 12.

---
 .../devtools/stateProviders/webStories/webStoriesProvider.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
index 5e0cff1f6..2edcf8664 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
@@ -305,7 +305,7 @@ const Provider = ({ children }: PropsWithChildren) => {
 
     const urlSearchParams = new URLSearchParams();
 
-    urlSearchParams.append('per_page', '4');
+    urlSearchParams.append('per_page', '12');
     urlSearchParams.append('page', pageNumber.toString());
 
     if (selectedAuthorsID.length > 0) {

From b0d89eb95be780f31e953d8fc4b7f7fe17a8a5ee Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Fri, 20 Dec 2024 13:41:49 +0530
Subject: [PATCH 18/47] Fix sort by width.

---
 .../src/view/devtools/components/webStories/contentPanel.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx b/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
index c937069eb..856c45341 100644
--- a/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
+++ b/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
@@ -97,7 +97,7 @@ const WebStories = ({ storyOpened }: WebStoriesProps) => {
             count={storyCount}
           >
             <div className="flex justify-between items-center min-w-[100px] text-raisin-black dark:text-bright-gray">
-              <p>Sort by:</p>
+              <p className="min-w-fit">Sort by:</p>
               <select
                 value={sortValue}
                 onChange={(e) =>

From 8f2d2cb98debfa06714fecfcd56367fc797901a6 Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Fri, 20 Dec 2024 14:49:24 +0530
Subject: [PATCH 19/47] Modify init to add stories programatically

---
 assets/amp/amp-player-main.js                 | 22 ++++++++++--------
 .../components/webStories/contentPanel.tsx    |  8 ++++---
 .../stateProviders/webStories/constants.ts    |  3 +--
 .../stateProviders/webStories/context.ts      |  4 +++-
 .../webStories/webStoriesProvider.tsx         | 23 ++++++++++++++++++-
 5 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/assets/amp/amp-player-main.js b/assets/amp/amp-player-main.js
index e09927035..dac0a863d 100644
--- a/assets/amp/amp-player-main.js
+++ b/assets/amp/amp-player-main.js
@@ -138,6 +138,7 @@ function initializeCards() {
     });
   } catch (error) {
     //Fail silently
+    console.log(error);
   }
 }
 
@@ -152,6 +153,9 @@ function initializeCarousel() {
   initializeArrows();
   infiniteScroll();
 
+  const event = new CustomEvent('iframeLoaded');
+  window.parent.document.dispatchEvent(event);
+
   player.addEventListener('amp-story-player-close', closePlayer);
 }
 
@@ -224,20 +228,20 @@ const getCardHTML = ({
     `;
 };
 
-const getStoryAnchorTags = ({ storyUrl }) => {
-  return `
-        <a href="${storyUrl}" class="story"></a>
-    `;
-};
 
 const infiniteScrollDataResponse = ({data}) => {
   const totalAddedCards = document.querySelectorAll('.entry-point-card-container')?.length ?? 0;
   const storiesToUse = data.slice(totalAddedCards)
-  console.log(storiesToUse)
-  const cards = storiesToUse.map(getCardHTML);
-  const storyAnchors = storiesToUse.map(getStoryAnchorTags);
-  document.getElementById('anchor-tags-container').innerHTML += storyAnchors;
+
+  const cards = storiesToUse.map(getCardHTML).join('');
+  const storyAnchors = storiesToUse.map(({storyUrl}) => ({href: storyUrl}) );
+
   document.getElementById('entry-points').innerHTML += cards;
+  player.add(storyAnchors)
+
+  initializeCards();
+  initializeArrows();
+  infiniteScroll();
 }
 
 // Initialize on window load.
diff --git a/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx b/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
index 856c45341..c6aa2b8c6 100644
--- a/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
+++ b/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
@@ -53,7 +53,9 @@ const WebStories = ({ storyOpened }: WebStoriesProps) => {
     resetFilters,
     selectedFilterValues,
     filters,
+    iframeLoaded,
   } = useWebStories(({ state, actions }) => ({
+    iframeLoaded: state.iframeLoaded,
     storyCount: state.storyCount,
     loadingState: state.loadingState,
     allStoryJSON: state.allStoryJSON,
@@ -75,12 +77,12 @@ const WebStories = ({ storyOpened }: WebStoriesProps) => {
       return;
     }
 
-    if (loadingState) {
+    if (loadingState || !iframeLoaded) {
       return;
     }
 
     iframeRef.current?.contentWindow?.postMessage(allStoryJSON, '*');
-  }, [allStoryJSON, loadingState]);
+  }, [allStoryJSON, loadingState, iframeLoaded]);
 
   return (
     <div className="h-full w-full flex flex-col">
@@ -147,7 +149,7 @@ const WebStories = ({ storyOpened }: WebStoriesProps) => {
           className="h-full flex-1 text-raisin-black dark:text-bright-gray"
         >
           <div className="h-full w-full flex">
-            {loadingState && (
+            {loadingState && !iframeLoaded && (
               <ProgressBar additionalStyles="w-1/3 mx-auto h-full" />
             )}
             <iframe
diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/constants.ts b/packages/extension/src/view/devtools/stateProviders/webStories/constants.ts
index 1f760edcf..e1d329247 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/constants.ts
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/constants.ts
@@ -512,8 +512,7 @@ export const STORY_MARKUP = `
           ]
         }
       </script>
-      <div id="anchor-tags-container">
-      </div>
+
       </amp-story-player>
     </div>
 
diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/context.ts b/packages/extension/src/view/devtools/stateProviders/webStories/context.ts
index a303570ad..bba01d95d 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/context.ts
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/context.ts
@@ -35,6 +35,7 @@ export interface WebStoryContext {
     storyOpened: boolean;
     loadingState: boolean;
     storyCount: number;
+    iframeLoaded: boolean;
   };
   actions: {
     resetFilters: () => void;
@@ -58,7 +59,8 @@ const initialState: WebStoryContext = {
     selectedFilterValues: {},
     sortValue: 'latest',
     storyOpened: false,
-    loadingState: false,
+    loadingState: true,
+    iframeLoaded: false,
     storyCount: 0,
   },
   actions: {
diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
index 2edcf8664..bdf39bf5f 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
@@ -49,7 +49,8 @@ const Provider = ({ children }: PropsWithChildren) => {
   );
   const [storyOpened, setStoryOpened] = useState(false);
   const [authors, setAuthors] = useState<Record<number, string>>({});
-  const [loadingState, setLoadingState] = useState<boolean>(false);
+  const [loadingState, setLoadingState] = useState<boolean>(true);
+  const [iframeLoaded, setIframeLoaded] = useState<boolean>(false);
   const [tags, setTags] = useState<Record<number, string>>({});
   const [categories, setCategories] = useState<Record<number, string>>({});
   const [storyCount, setStoryCount] = useState<number>(0);
@@ -92,12 +93,23 @@ const Provider = ({ children }: PropsWithChildren) => {
     setPageNumber((prevState) => prevState + 1);
   }, []);
 
+  const iframeLoadedCallback = useCallback(() => {
+    setIframeLoaded(true);
+  }, []);
+
   useEffect(() => {
     window.document.addEventListener(
       'webStoriesLightBoxEvent',
       webStoriesLightBoxCallback,
       false
     );
+
+    window.document.addEventListener(
+      'iframeLoaded',
+      iframeLoadedCallback,
+      false
+    );
+
     window.document.addEventListener(
       'loadMoreData',
       webStoriesLoadMoreData,
@@ -105,11 +117,18 @@ const Provider = ({ children }: PropsWithChildren) => {
     );
 
     return () => {
+      window.document.removeEventListener(
+        'iframeLoaded',
+        iframeLoadedCallback,
+        false
+      );
+
       window.document.removeEventListener(
         'webStoriesLightBoxEvent',
         webStoriesLightBoxCallback,
         false
       );
+
       window.document.removeEventListener(
         'loadMoreData',
         webStoriesLoadMoreData,
@@ -424,6 +443,7 @@ const Provider = ({ children }: PropsWithChildren) => {
         storyOpened,
         loadingState,
         storyCount,
+        iframeLoaded,
       },
       actions: {
         resetFilters,
@@ -435,6 +455,7 @@ const Provider = ({ children }: PropsWithChildren) => {
       },
     };
   }, [
+    iframeLoaded,
     allStoryJSON,
     storyCount,
     _searchValue,

From 48efe0ca0fd9692046e3a8811db3d018ea1cbbae Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Fri, 20 Dec 2024 16:05:04 +0530
Subject: [PATCH 20/47] Fix bugs of filter not working.

---
 assets/amp/amp-player-main.js                 | 16 +++++---
 .../components/webStories/contentPanel.tsx    | 16 +++++---
 .../stateProviders/webStories/context.ts      |  4 +-
 .../webStories/webStoriesProvider.tsx         | 39 ++++++++++++++-----
 4 files changed, 53 insertions(+), 22 deletions(-)

diff --git a/assets/amp/amp-player-main.js b/assets/amp/amp-player-main.js
index dac0a863d..60c120ca8 100644
--- a/assets/amp/amp-player-main.js
+++ b/assets/amp/amp-player-main.js
@@ -22,6 +22,7 @@ let maxScroll;
 let scaleVal = 1;
 let scalingDown = false;
 let deltaY = 0;
+let previousStories = [];
 
 function setPlayer(playerEl) {
   player = playerEl;
@@ -229,14 +230,17 @@ const getCardHTML = ({
 };
 
 
-const infiniteScrollDataResponse = ({data}) => {
-  const totalAddedCards = document.querySelectorAll('.entry-point-card-container')?.length ?? 0;
-  const storiesToUse = data.slice(totalAddedCards)
+const infiniteScrollDataResponse = ({data: {story}}) => {
+  const cards = story.map(getCardHTML).join('');
+  const storyAnchors = story.map(({storyUrl}) => ({href: storyUrl}) );
 
-  const cards = storiesToUse.map(getCardHTML).join('');
-  const storyAnchors = storiesToUse.map(({storyUrl}) => ({href: storyUrl}) );
+  if(JSON.stringify(story) === JSON.stringify(previousStories)){
+    return;
+  }
+
+  document.getElementById('entry-points').innerHTML = cards;
 
-  document.getElementById('entry-points').innerHTML += cards;
+  previousStories = story;
   player.add(storyAnchors)
 
   initializeCards();
diff --git a/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx b/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
index c6aa2b8c6..8a26174a2 100644
--- a/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
+++ b/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
@@ -39,7 +39,6 @@ interface WebStoriesProps {
 const WebStories = ({ storyOpened }: WebStoriesProps) => {
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const {
-    storyCount,
     loadingState,
     allStoryJSON,
     searchValue,
@@ -54,9 +53,10 @@ const WebStories = ({ storyOpened }: WebStoriesProps) => {
     selectedFilterValues,
     filters,
     iframeLoaded,
+    pageNumber,
   } = useWebStories(({ state, actions }) => ({
     iframeLoaded: state.iframeLoaded,
-    storyCount: state.storyCount,
+    pageNumber: state.pageNumber,
     loadingState: state.loadingState,
     allStoryJSON: state.allStoryJSON,
     searchValue: state.searchValue,
@@ -81,8 +81,14 @@ const WebStories = ({ storyOpened }: WebStoriesProps) => {
       return;
     }
 
-    iframeRef.current?.contentWindow?.postMessage(allStoryJSON, '*');
-  }, [allStoryJSON, loadingState, iframeLoaded]);
+    iframeRef.current?.contentWindow?.postMessage(
+      {
+        story: allStoryJSON,
+        infiniteScroll: pageNumber === 2,
+      },
+      '*'
+    );
+  }, [allStoryJSON, loadingState, iframeLoaded, pageNumber]);
 
   return (
     <div className="h-full w-full flex flex-col">
@@ -96,7 +102,7 @@ const WebStories = ({ storyOpened }: WebStoriesProps) => {
             hideFiltering={false}
             disableFiltering={false}
             hideSearch={false}
-            count={storyCount}
+            count={allStoryJSON.length}
           >
             <div className="flex justify-between items-center min-w-[100px] text-raisin-black dark:text-bright-gray">
               <p className="min-w-fit">Sort by:</p>
diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/context.ts b/packages/extension/src/view/devtools/stateProviders/webStories/context.ts
index bba01d95d..62946a9a3 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/context.ts
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/context.ts
@@ -34,7 +34,7 @@ export interface WebStoryContext {
     sortValue: 'latest' | 'oldest';
     storyOpened: boolean;
     loadingState: boolean;
-    storyCount: number;
+    pageNumber: number;
     iframeLoaded: boolean;
   };
   actions: {
@@ -61,7 +61,7 @@ const initialState: WebStoryContext = {
     storyOpened: false,
     loadingState: true,
     iframeLoaded: false,
-    storyCount: 0,
+    pageNumber: 1,
   },
   actions: {
     resetFilters: noop,
diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
index bdf39bf5f..871eb0ba0 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
@@ -53,8 +53,8 @@ const Provider = ({ children }: PropsWithChildren) => {
   const [iframeLoaded, setIframeLoaded] = useState<boolean>(false);
   const [tags, setTags] = useState<Record<number, string>>({});
   const [categories, setCategories] = useState<Record<number, string>>({});
-  const [storyCount, setStoryCount] = useState<number>(0);
   const [pageNumber, setPageNumber] = useState<number>(1);
+  const [doesHaveMorePages, setDoesHaveMorePages] = useState<boolean>(true);
   const [allStoryJSON, setAllStoryJSON] = useState<SingleStoryJSON[]>([]);
   const [sortValue, setSortValue] =
     useState<WebStoryContext['state']['sortValue']>('latest');
@@ -90,8 +90,12 @@ const Provider = ({ children }: PropsWithChildren) => {
   }, []);
 
   const webStoriesLoadMoreData = useCallback(() => {
-    setPageNumber((prevState) => prevState + 1);
-  }, []);
+    if (!doesHaveMorePages) {
+      return;
+    }
+
+    setPageNumber(pageNumber + 1);
+  }, [pageNumber, doesHaveMorePages]);
 
   const iframeLoadedCallback = useCallback(() => {
     setIframeLoaded(true);
@@ -135,7 +139,11 @@ const Provider = ({ children }: PropsWithChildren) => {
         false
       );
     };
-  }, [webStoriesLightBoxCallback, webStoriesLoadMoreData]);
+  }, [
+    iframeLoadedCallback,
+    webStoriesLightBoxCallback,
+    webStoriesLoadMoreData,
+  ]);
 
   const toggleFilterSelection = useCallback(
     (filterKey: string, filterValue: string) => {
@@ -184,6 +192,8 @@ const Provider = ({ children }: PropsWithChildren) => {
 
         return newSelectedFilterValues;
       });
+
+      setPageNumber(1);
     },
     [filters]
   );
@@ -191,6 +201,7 @@ const Provider = ({ children }: PropsWithChildren) => {
   const resetFilters = useCallback(() => {
     setSelectedFilters([]);
     setSelectedFilterValues({});
+    setPageNumber(1);
   }, []);
 
   const fetchCategories = useCallback(async () => {
@@ -324,7 +335,7 @@ const Provider = ({ children }: PropsWithChildren) => {
 
     const urlSearchParams = new URLSearchParams();
 
-    urlSearchParams.append('per_page', '12');
+    urlSearchParams.append('per_page', '4');
     urlSearchParams.append('page', pageNumber.toString());
 
     if (selectedAuthorsID.length > 0) {
@@ -376,9 +387,14 @@ const Provider = ({ children }: PropsWithChildren) => {
     );
 
     const responseJSON = await response.json();
+    const totalPages = Number(response.headers.get('X-Wp-Totalpages'));
+
+    setDoesHaveMorePages(pageNumber <= totalPages);
+
     if (responseJSON?.data?.status === 400) {
       return;
     }
+
     let storyJSON: SingleStoryJSON[] = [];
     const mediaAuthorSet: Record<number, string> = {};
 
@@ -408,9 +424,14 @@ const Provider = ({ children }: PropsWithChildren) => {
       return story;
     });
 
-    setStoryCount(storyJSON.length);
     setLoadingState(false);
-    setAllStoryJSON((prevState) => [...prevState, ...storyJSON]);
+    setAllStoryJSON((prevState) => {
+      if (pageNumber === 1) {
+        return [...storyJSON];
+      } else {
+        return [...prevState, ...storyJSON];
+      }
+    });
   }, [
     tags,
     categories,
@@ -442,8 +463,8 @@ const Provider = ({ children }: PropsWithChildren) => {
         sortValue,
         storyOpened,
         loadingState,
-        storyCount,
         iframeLoaded,
+        pageNumber,
       },
       actions: {
         resetFilters,
@@ -455,9 +476,9 @@ const Provider = ({ children }: PropsWithChildren) => {
       },
     };
   }, [
+    pageNumber,
     iframeLoaded,
     allStoryJSON,
-    storyCount,
     _searchValue,
     showFilterSidebar,
     selectedFilters,

From 4c6944c5ddac0092cc1595219e7809ad2b51de10 Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Mon, 23 Dec 2024 11:33:15 +0530
Subject: [PATCH 21/47] Change condition to reduce the number of api calls.

---
 .../stateProviders/webStories/webStoriesProvider.tsx      | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
index 871eb0ba0..39d6bc98d 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
@@ -54,7 +54,7 @@ const Provider = ({ children }: PropsWithChildren) => {
   const [tags, setTags] = useState<Record<number, string>>({});
   const [categories, setCategories] = useState<Record<number, string>>({});
   const [pageNumber, setPageNumber] = useState<number>(1);
-  const [doesHaveMorePages, setDoesHaveMorePages] = useState<boolean>(true);
+  const doesHaveMorePagesRef = useRef<boolean>(true);
   const [allStoryJSON, setAllStoryJSON] = useState<SingleStoryJSON[]>([]);
   const [sortValue, setSortValue] =
     useState<WebStoryContext['state']['sortValue']>('latest');
@@ -90,12 +90,12 @@ const Provider = ({ children }: PropsWithChildren) => {
   }, []);
 
   const webStoriesLoadMoreData = useCallback(() => {
-    if (!doesHaveMorePages) {
+    if (!doesHaveMorePagesRef.current) {
       return;
     }
 
     setPageNumber(pageNumber + 1);
-  }, [pageNumber, doesHaveMorePages]);
+  }, [pageNumber]);
 
   const iframeLoadedCallback = useCallback(() => {
     setIframeLoaded(true);
@@ -389,7 +389,7 @@ const Provider = ({ children }: PropsWithChildren) => {
     const responseJSON = await response.json();
     const totalPages = Number(response.headers.get('X-Wp-Totalpages'));
 
-    setDoesHaveMorePages(pageNumber <= totalPages);
+    doesHaveMorePagesRef.current = pageNumber < totalPages;
 
     if (responseJSON?.data?.status === 400) {
       return;

From a1a8b7ef5b3aa15df0f072b1369d1001d834eb70 Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Mon, 23 Dec 2024 12:50:01 +0530
Subject: [PATCH 22/47] Fix errors on extension page. Reduce postmessage from
 parent.

---
 assets/amp/amp-player-main.js                 | 33 ++++++++++---------
 .../components/webStories/contentPanel.tsx    |  7 ++--
 .../webStories/webStoriesProvider.tsx         |  8 +++--
 3 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/assets/amp/amp-player-main.js b/assets/amp/amp-player-main.js
index 60c120ca8..903155aae 100644
--- a/assets/amp/amp-player-main.js
+++ b/assets/amp/amp-player-main.js
@@ -229,25 +229,28 @@ const getCardHTML = ({
     `;
 };
 
+const infiniteScrollDataResponse = ({ data: { story } }) => {
+  try {
+    const cards = story.map(getCardHTML).join('');
+    const storyAnchors = story.map(({ storyUrl }) => ({ href: storyUrl }));
 
-const infiniteScrollDataResponse = ({data: {story}}) => {
-  const cards = story.map(getCardHTML).join('');
-  const storyAnchors = story.map(({storyUrl}) => ({href: storyUrl}) );
-
-  if(JSON.stringify(story) === JSON.stringify(previousStories)){
-    return;
-  }
+    if (JSON.stringify(story) === JSON.stringify(previousStories)) {
+      return;
+    }
 
-  document.getElementById('entry-points').innerHTML = cards;
+    document.getElementById('entry-points').innerHTML = cards;
 
-  previousStories = story;
-  player.add(storyAnchors)
+    previousStories = story;
+    player.add(storyAnchors);
 
-  initializeCards();
-  initializeArrows();
-  infiniteScroll();
-}
+    initializeCards();
+    initializeArrows();
+    infiniteScroll();
+  } catch (error) {
+    //Fail silently
+  }
+};
 
 // Initialize on window load.
 window.addEventListener('load', init);
-window.addEventListener('message', infiniteScrollDataResponse)
+window.addEventListener('message', infiniteScrollDataResponse);
diff --git a/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx b/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
index 8a26174a2..9c930fedb 100644
--- a/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
+++ b/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
@@ -53,10 +53,8 @@ const WebStories = ({ storyOpened }: WebStoriesProps) => {
     selectedFilterValues,
     filters,
     iframeLoaded,
-    pageNumber,
   } = useWebStories(({ state, actions }) => ({
     iframeLoaded: state.iframeLoaded,
-    pageNumber: state.pageNumber,
     loadingState: state.loadingState,
     allStoryJSON: state.allStoryJSON,
     searchValue: state.searchValue,
@@ -77,18 +75,17 @@ const WebStories = ({ storyOpened }: WebStoriesProps) => {
       return;
     }
 
-    if (loadingState || !iframeLoaded) {
+    if (loadingState || !iframeLoaded || !allStoryJSON) {
       return;
     }
 
     iframeRef.current?.contentWindow?.postMessage(
       {
         story: allStoryJSON,
-        infiniteScroll: pageNumber === 2,
       },
       '*'
     );
-  }, [allStoryJSON, loadingState, iframeLoaded, pageNumber]);
+  }, [allStoryJSON, loadingState, iframeLoaded]);
 
   return (
     <div className="h-full w-full flex flex-col">
diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
index 39d6bc98d..a25565c87 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
@@ -343,11 +343,14 @@ const Provider = ({ children }: PropsWithChildren) => {
     }
 
     if (selectedCategoriesId.length > 0) {
-      urlSearchParams.append('author', selectedCategoriesId.join(','));
+      urlSearchParams.append(
+        'web_story_category',
+        selectedCategoriesId.join(',')
+      );
     }
 
     if (selectedTagId.length > 0) {
-      urlSearchParams.append('author', selectedTagId.join(','));
+      urlSearchParams.append('web_story_tag', selectedTagId.join(','));
     }
 
     urlSearchParams.append('order', sortValue === 'latest' ? 'desc' : 'asc');
@@ -392,6 +395,7 @@ const Provider = ({ children }: PropsWithChildren) => {
     doesHaveMorePagesRef.current = pageNumber < totalPages;
 
     if (responseJSON?.data?.status === 400) {
+      setLoadingState(false);
       return;
     }
 

From 55fb8d0870dffe97ae39d621a2307ffe14526770 Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Mon, 23 Dec 2024 14:03:02 +0530
Subject: [PATCH 23/47] Add appropriate names to listeners. Initialize listener
 at the bottom of the script.

---
 assets/amp/amp-player-main.js | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/assets/amp/amp-player-main.js b/assets/amp/amp-player-main.js
index 903155aae..c08e7ff2c 100644
--- a/assets/amp/amp-player-main.js
+++ b/assets/amp/amp-player-main.js
@@ -188,16 +188,14 @@ function easeOutQuad(t) {
   return --t * t * t + 1;
 }
 
-function infiniteScroll() {
-  window.addEventListener('scroll', () => {
-    if (
-      window.scrollY + window.innerHeight >=
-      document.documentElement.scrollHeight
-    ) {
-      const event = new CustomEvent('loadMoreData');
-      window.parent.document.dispatchEvent(event);
-    }
-  });
+function scrollListner() {
+  if (
+    window.scrollY + window.innerHeight >=
+    document.documentElement.scrollHeight
+  ) {
+    const event = new CustomEvent('loadMoreData');
+    window.parent.document.dispatchEvent(event);
+  }
 }
 
 const getCardHTML = ({
@@ -229,7 +227,7 @@ const getCardHTML = ({
     `;
 };
 
-const infiniteScrollDataResponse = ({ data: { story } }) => {
+const messageListener = ({ data: { story } }) => {
   try {
     const cards = story.map(getCardHTML).join('');
     const storyAnchors = story.map(({ storyUrl }) => ({ href: storyUrl }));
@@ -253,4 +251,5 @@ const infiniteScrollDataResponse = ({ data: { story } }) => {
 
 // Initialize on window load.
 window.addEventListener('load', init);
-window.addEventListener('message', infiniteScrollDataResponse);
+window.addEventListener('scroll', scrollListner);
+window.addEventListener('message', messageListener);

From a65f8f466e42a00d921c1a273124d80b5896daa9 Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Mon, 23 Dec 2024 14:16:25 +0530
Subject: [PATCH 24/47] Add no-sandbox to tests.

---
 .../src/view/devtools/test-utils/puppeteerManagement.ts          | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/extension/src/view/devtools/test-utils/puppeteerManagement.ts b/packages/extension/src/view/devtools/test-utils/puppeteerManagement.ts
index 37f5c099c..67e9e87a9 100644
--- a/packages/extension/src/view/devtools/test-utils/puppeteerManagement.ts
+++ b/packages/extension/src/view/devtools/test-utils/puppeteerManagement.ts
@@ -39,6 +39,7 @@ const puppeteerArgs = [
   '--disable-features=DialMediaRouteProvider',
   '--auto-open-devtools-for-tabs',
   '--start-maximized',
+  '--no-sandbox',
 ];
 
 /**

From 893b701ea5bc3783bba28ea1b898758c622dd013 Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Mon, 23 Dec 2024 14:31:40 +0530
Subject: [PATCH 25/47] Fix failing test and add some fixes.

---
 assets/amp/amp-player-main.js                                | 2 --
 .../src/view/devtools/components/webStories/contentPanel.tsx | 4 ++--
 .../src/view/devtools/stateProviders/webStories/context.ts   | 2 +-
 .../webStories/{constants.ts => getStaticStoryMarkup.ts}     | 5 +++--
 .../stateProviders/webStories/webStoriesProvider.tsx         | 4 ++--
 5 files changed, 8 insertions(+), 9 deletions(-)
 rename packages/extension/src/view/devtools/stateProviders/webStories/{constants.ts => getStaticStoryMarkup.ts} (99%)

diff --git a/assets/amp/amp-player-main.js b/assets/amp/amp-player-main.js
index c08e7ff2c..dc6edbc75 100644
--- a/assets/amp/amp-player-main.js
+++ b/assets/amp/amp-player-main.js
@@ -152,7 +152,6 @@ function initializeCarousel() {
 
   initializeCards();
   initializeArrows();
-  infiniteScroll();
 
   const event = new CustomEvent('iframeLoaded');
   window.parent.document.dispatchEvent(event);
@@ -243,7 +242,6 @@ const messageListener = ({ data: { story } }) => {
 
     initializeCards();
     initializeArrows();
-    infiniteScroll();
   } catch (error) {
     //Fail silently
   }
diff --git a/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx b/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
index 9c930fedb..a72458385 100644
--- a/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
+++ b/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
@@ -30,7 +30,7 @@ import { noop } from '@google-psat/common';
  * Internal dependencies.
  */
 import { useWebStories } from '../../stateProviders';
-import { STORY_MARKUP } from '../../stateProviders/webStories/constants';
+import { getStaticStoryMarkup } from '../../stateProviders/webStories/getStaticStoryMarkup';
 
 interface WebStoriesProps {
   storyOpened: boolean;
@@ -157,7 +157,7 @@ const WebStories = ({ storyOpened }: WebStoriesProps) => {
             )}
             <iframe
               ref={iframeRef}
-              srcDoc={STORY_MARKUP}
+              srcDoc={getStaticStoryMarkup()}
               style={{
                 width: loadingState ? '0%' : '100%',
                 height: loadingState ? '0%' : '100%',
diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/context.ts b/packages/extension/src/view/devtools/stateProviders/webStories/context.ts
index 62946a9a3..9ed41f406 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/context.ts
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/context.ts
@@ -21,7 +21,7 @@ import type {
   ChipsFilter,
   FilterSidebarValue,
 } from '@google-psat/design-system';
-import type { SingleStoryJSON } from './constants';
+import type { SingleStoryJSON } from './getStaticStoryMarkup';
 
 export interface WebStoryContext {
   state: {
diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/constants.ts b/packages/extension/src/view/devtools/stateProviders/webStories/getStaticStoryMarkup.ts
similarity index 99%
rename from packages/extension/src/view/devtools/stateProviders/webStories/constants.ts
rename to packages/extension/src/view/devtools/stateProviders/webStories/getStaticStoryMarkup.ts
index e1d329247..5d9ba46d8 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/constants.ts
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/getStaticStoryMarkup.ts
@@ -21,8 +21,8 @@ export interface SingleStoryJSON {
   storyTitle: string;
   storyUrl: string;
 }
-
-export const STORY_MARKUP = `
+export const getStaticStoryMarkup = () => {
+  return `
 <!DOCTYPE html>
 <html lang="en">
 
@@ -520,3 +520,4 @@ export const STORY_MARKUP = `
 
 </html>
 `;
+};
diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
index a25565c87..79a5838fd 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
@@ -34,7 +34,7 @@ import { useDebounce } from 'use-debounce';
  * Internal dependencies.
  */
 import Context, { type WebStoryContext } from './context';
-import { type SingleStoryJSON } from './constants';
+import { type SingleStoryJSON } from './getStaticStoryMarkup';
 
 const Provider = ({ children }: PropsWithChildren) => {
   const [_searchValue, setSearchValue] = useState('');
@@ -335,7 +335,7 @@ const Provider = ({ children }: PropsWithChildren) => {
 
     const urlSearchParams = new URLSearchParams();
 
-    urlSearchParams.append('per_page', '4');
+    urlSearchParams.append('per_page', '12');
     urlSearchParams.append('page', pageNumber.toString());
 
     if (selectedAuthorsID.length > 0) {

From b9f4e161ef90eebbdda5cf5a01630023d6a042a2 Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Tue, 24 Dec 2024 14:00:57 +0530
Subject: [PATCH 26/47] Add arrow to show scroll more.

---
 assets/amp/amp-player-main.js                 | 13 ++++++-
 .../components/webStories/contentPanel.tsx    |  8 +++--
 .../stateProviders/webStories/context.ts      |  2 ++
 .../webStories/getStaticStoryMarkup.ts        | 34 +++++++++++++++++--
 .../webStories/webStoriesProvider.tsx         |  3 +-
 5 files changed, 54 insertions(+), 6 deletions(-)

diff --git a/assets/amp/amp-player-main.js b/assets/amp/amp-player-main.js
index dc6edbc75..8f3292d51 100644
--- a/assets/amp/amp-player-main.js
+++ b/assets/amp/amp-player-main.js
@@ -23,6 +23,7 @@ let scaleVal = 1;
 let scalingDown = false;
 let deltaY = 0;
 let previousStories = [];
+let doesHaveMorePages = false;
 
 function setPlayer(playerEl) {
   player = playerEl;
@@ -192,6 +193,9 @@ function scrollListner() {
     window.scrollY + window.innerHeight >=
     document.documentElement.scrollHeight
   ) {
+    if(!doesHaveMorePages) {
+      document.getElementById('show-more-indicator').style.rotate = '180deg';
+    }
     const event = new CustomEvent('loadMoreData');
     window.parent.document.dispatchEvent(event);
   }
@@ -226,7 +230,7 @@ const getCardHTML = ({
     `;
 };
 
-const messageListener = ({ data: { story } }) => {
+const messageListener = ({ data: { story, doesHaveMorePages: _doesHaveMorePages } }) => {
   try {
     const cards = story.map(getCardHTML).join('');
     const storyAnchors = story.map(({ storyUrl }) => ({ href: storyUrl }));
@@ -242,6 +246,13 @@ const messageListener = ({ data: { story } }) => {
 
     initializeCards();
     initializeArrows();
+    doesHaveMorePages = _doesHaveMorePages;
+
+    document.getElementById('show-more-indicator').classList.add('bounce');
+
+    setTimeout(() => {
+      document.getElementById('show-more-indicator').classList.remove('bounce');
+    }, 2000);
   } catch (error) {
     //Fail silently
   }
diff --git a/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx b/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
index a72458385..0f55a422b 100644
--- a/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
+++ b/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
@@ -38,6 +38,7 @@ interface WebStoriesProps {
 
 const WebStories = ({ storyOpened }: WebStoriesProps) => {
   const iframeRef = useRef<HTMLIFrameElement>(null);
+
   const {
     loadingState,
     allStoryJSON,
@@ -53,9 +54,11 @@ const WebStories = ({ storyOpened }: WebStoriesProps) => {
     selectedFilterValues,
     filters,
     iframeLoaded,
+    doesHaveMorePages,
   } = useWebStories(({ state, actions }) => ({
     iframeLoaded: state.iframeLoaded,
     loadingState: state.loadingState,
+    doesHaveMorePages: state.doesHaveMorePages,
     allStoryJSON: state.allStoryJSON,
     searchValue: state.searchValue,
     filters: state.filters,
@@ -82,10 +85,11 @@ const WebStories = ({ storyOpened }: WebStoriesProps) => {
     iframeRef.current?.contentWindow?.postMessage(
       {
         story: allStoryJSON,
+        doesHaveMorePages,
       },
       '*'
     );
-  }, [allStoryJSON, loadingState, iframeLoaded]);
+  }, [allStoryJSON, loadingState, iframeLoaded, doesHaveMorePages]);
 
   return (
     <div className="h-full w-full flex flex-col">
@@ -152,7 +156,7 @@ const WebStories = ({ storyOpened }: WebStoriesProps) => {
           className="h-full flex-1 text-raisin-black dark:text-bright-gray"
         >
           <div className="h-full w-full flex">
-            {loadingState && !iframeLoaded && (
+            {loadingState && (
               <ProgressBar additionalStyles="w-1/3 mx-auto h-full" />
             )}
             <iframe
diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/context.ts b/packages/extension/src/view/devtools/stateProviders/webStories/context.ts
index 9ed41f406..77266a445 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/context.ts
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/context.ts
@@ -36,6 +36,7 @@ export interface WebStoryContext {
     loadingState: boolean;
     pageNumber: number;
     iframeLoaded: boolean;
+    doesHaveMorePages: boolean;
   };
   actions: {
     resetFilters: () => void;
@@ -62,6 +63,7 @@ const initialState: WebStoryContext = {
     loadingState: true,
     iframeLoaded: false,
     pageNumber: 1,
+    doesHaveMorePages: true,
   },
   actions: {
     resetFilters: noop,
diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/getStaticStoryMarkup.ts b/packages/extension/src/view/devtools/stateProviders/webStories/getStaticStoryMarkup.ts
index 5d9ba46d8..a2fd85007 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/getStaticStoryMarkup.ts
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/getStaticStoryMarkup.ts
@@ -38,6 +38,31 @@ export const getStaticStoryMarkup = () => {
     <link href="https://cdn.ampproject.org/amp-story-player-v0.css" rel="stylesheet" type="text/css">
 
     <style>
+        .arrow {
+            left: calc(100% - 30px);
+            position: sticky;
+            bottom: 50px;
+            width: fit-content;
+        }
+        
+        .bounce {
+            -moz-animation: bounce 2s infinite;
+            -webkit-animation: bounce 2s infinite;
+            animation: bounce 2s infinite;
+        }
+
+        @keyframes bounce {
+            0%, 20%, 50%, 80%, 100% {
+                transform: translateY(0);
+            }
+            40% {
+                transform: translateY(-30px);
+            }
+            60% {
+                transform: translateY(-15px);
+            }
+        }
+
         .carousel-container {
             position: relative;
 						padding: 16px 0;
@@ -216,8 +241,8 @@ export const getStaticStoryMarkup = () => {
 
         amp-story-player.my-player {
             /*   width: 360px;
-  height: 600px;
-  margin: 70px auto; */
+            height: 600px;
+            margin: 70px auto; */
             width: 100%;
             height: 100%;
 
@@ -515,6 +540,11 @@ export const getStaticStoryMarkup = () => {
 
       </amp-story-player>
     </div>
+    <div id="show-more-indicator" class="arrow">
+        <svg width="14" height="14" viewBox="0 0 7 5" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M6.59998 0H0.0999756L3.59998 5L6.59998 0Z" fill="#6E6E6E"/>
+        </svg>
+    </div>
 
 </body>
 
diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
index 79a5838fd..60bd541d6 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
@@ -335,7 +335,7 @@ const Provider = ({ children }: PropsWithChildren) => {
 
     const urlSearchParams = new URLSearchParams();
 
-    urlSearchParams.append('per_page', '12');
+    urlSearchParams.append('per_page', '4');
     urlSearchParams.append('page', pageNumber.toString());
 
     if (selectedAuthorsID.length > 0) {
@@ -469,6 +469,7 @@ const Provider = ({ children }: PropsWithChildren) => {
         loadingState,
         iframeLoaded,
         pageNumber,
+        doesHaveMorePages: doesHaveMorePagesRef.current,
       },
       actions: {
         resetFilters,

From 233dad3f170d904de85aa9c02ed8292d0e2ea1cc Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Tue, 24 Dec 2024 16:42:07 +0530
Subject: [PATCH 27/47] Change icon for dark mode.

---
 assets/amp/amp-player-main.js                              | 1 +
 .../stateProviders/webStories/getStaticStoryMarkup.ts      | 7 +++++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/assets/amp/amp-player-main.js b/assets/amp/amp-player-main.js
index 8f3292d51..1206cefd6 100644
--- a/assets/amp/amp-player-main.js
+++ b/assets/amp/amp-player-main.js
@@ -193,6 +193,7 @@ function scrollListner() {
     window.scrollY + window.innerHeight >=
     document.documentElement.scrollHeight
   ) {
+
     if(!doesHaveMorePages) {
       document.getElementById('show-more-indicator').style.rotate = '180deg';
     }
diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/getStaticStoryMarkup.ts b/packages/extension/src/view/devtools/stateProviders/webStories/getStaticStoryMarkup.ts
index a2fd85007..9a2861d9c 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/getStaticStoryMarkup.ts
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/getStaticStoryMarkup.ts
@@ -22,6 +22,7 @@ export interface SingleStoryJSON {
   storyUrl: string;
 }
 export const getStaticStoryMarkup = () => {
+  const isDark = document.body.classList.contains('dark');
   return `
 <!DOCTYPE html>
 <html lang="en">
@@ -541,8 +542,10 @@ export const getStaticStoryMarkup = () => {
       </amp-story-player>
     </div>
     <div id="show-more-indicator" class="arrow">
-        <svg width="14" height="14" viewBox="0 0 7 5" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M6.59998 0H0.0999756L3.59998 5L6.59998 0Z" fill="#6E6E6E"/>
+        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="${
+          isDark ? '#E8EAED' : '#6E6E6E'
+        }">
+            <path d="M440-800v487L216-537l-56 57 320 320 320-320-56-57-224 224v-487h-80Z"/>
         </svg>
     </div>
 

From 746ef2bd6eb2e7346966281a23b3788ea4787daa Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Wed, 25 Dec 2024 16:08:11 +0530
Subject: [PATCH 28/47] Add event listeners to the down and to button. Add no
 stories found.

---
 assets/amp/amp-player-main.js                 | 15 +++++++++--
 .../components/webStories/contentPanel.tsx    | 27 +++++++++++--------
 .../webStories/getStaticStoryMarkup.ts        |  1 +
 .../webStories/webStoriesProvider.tsx         |  8 +++++-
 4 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/assets/amp/amp-player-main.js b/assets/amp/amp-player-main.js
index 1206cefd6..a7b73715a 100644
--- a/assets/amp/amp-player-main.js
+++ b/assets/amp/amp-player-main.js
@@ -188,6 +188,11 @@ function easeOutQuad(t) {
   return --t * t * t + 1;
 }
 
+const sendEventToParent = () => {
+  const event = new CustomEvent('loadMoreData');
+  window.parent.document.dispatchEvent(event);
+}
+
 function scrollListner() {
   if (
     window.scrollY + window.innerHeight >=
@@ -196,9 +201,12 @@ function scrollListner() {
 
     if(!doesHaveMorePages) {
       document.getElementById('show-more-indicator').style.rotate = '180deg';
+      document.getElementById('show-more-indicator').onclick = () => {
+        document.body.scrollIntoView();
+      }
+      return;
     }
-    const event = new CustomEvent('loadMoreData');
-    window.parent.document.dispatchEvent(event);
+    sendEventToParent();
   }
 }
 
@@ -250,6 +258,9 @@ const messageListener = ({ data: { story, doesHaveMorePages: _doesHaveMorePages
     doesHaveMorePages = _doesHaveMorePages;
 
     document.getElementById('show-more-indicator').classList.add('bounce');
+    document.getElementById('show-more-indicator').onclick = () => {
+      sendEventToParent();
+    }
 
     setTimeout(() => {
       document.getElementById('show-more-indicator').classList.remove('bounce');
diff --git a/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx b/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
index 0f55a422b..8f2410db3 100644
--- a/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
+++ b/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
@@ -156,19 +156,24 @@ const WebStories = ({ storyOpened }: WebStoriesProps) => {
           className="h-full flex-1 text-raisin-black dark:text-bright-gray"
         >
           <div className="h-full w-full flex">
-            {loadingState && (
+            {loadingState ? (
               <ProgressBar additionalStyles="w-1/3 mx-auto h-full" />
+            ) : allStoryJSON.length > 0 ? (
+              <iframe
+                ref={iframeRef}
+                srcDoc={getStaticStoryMarkup()}
+                style={{
+                  width: loadingState ? '0%' : '100%',
+                  height: loadingState ? '0%' : '100%',
+                  border: 'none',
+                  overflow: 'hidden',
+                }}
+              />
+            ) : (
+              <div className="flex-1 flex items-center justify-center text-raisin-black dark:text-bright-gray">
+                No stories found with given filters.
+              </div>
             )}
-            <iframe
-              ref={iframeRef}
-              srcDoc={getStaticStoryMarkup()}
-              style={{
-                width: loadingState ? '0%' : '100%',
-                height: loadingState ? '0%' : '100%',
-                border: 'none',
-                overflow: 'hidden',
-              }}
-            />
           </div>
         </div>
       </div>
diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/getStaticStoryMarkup.ts b/packages/extension/src/view/devtools/stateProviders/webStories/getStaticStoryMarkup.ts
index 9a2861d9c..2d9a43eab 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/getStaticStoryMarkup.ts
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/getStaticStoryMarkup.ts
@@ -40,6 +40,7 @@ export const getStaticStoryMarkup = () => {
 
     <style>
         .arrow {
+            cursor: pointer;
             left: calc(100% - 30px);
             position: sticky;
             bottom: 50px;
diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
index 60bd541d6..c02869b22 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
@@ -335,7 +335,7 @@ const Provider = ({ children }: PropsWithChildren) => {
 
     const urlSearchParams = new URLSearchParams();
 
-    urlSearchParams.append('per_page', '4');
+    urlSearchParams.append('per_page', '8');
     urlSearchParams.append('page', pageNumber.toString());
 
     if (selectedAuthorsID.length > 0) {
@@ -402,6 +402,12 @@ const Provider = ({ children }: PropsWithChildren) => {
     let storyJSON: SingleStoryJSON[] = [];
     const mediaAuthorSet: Record<number, string> = {};
 
+    if (responseJSON.length === 0 && pageNumber === 1) {
+      setLoadingState(false);
+      setAllStoryJSON([]);
+      return;
+    }
+
     responseJSON?.forEach((singleResponse: any) => {
       if (singleResponse?.status === 'publish') {
         mediaAuthorSet[singleResponse.author] =

From 954c44877b652e73bd893aa74d5a57eb0fdd3b27 Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Wed, 25 Dec 2024 16:44:45 +0530
Subject: [PATCH 29/47] Reduce placement from right for arrow.

---
 assets/amp/amp-player-main.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/assets/amp/amp-player-main.js b/assets/amp/amp-player-main.js
index a7b73715a..5c345df5a 100644
--- a/assets/amp/amp-player-main.js
+++ b/assets/amp/amp-player-main.js
@@ -257,7 +257,11 @@ const messageListener = ({ data: { story, doesHaveMorePages: _doesHaveMorePages
     initializeArrows();
     doesHaveMorePages = _doesHaveMorePages;
 
+    const entryPointRect = document.getElementById('entry-points').getBoundingClientRect()
+
     document.getElementById('show-more-indicator').classList.add('bounce');
+
+    document.getElementById('show-more-indicator').style.left = `${entryPointRect.right - 72}px`;
     document.getElementById('show-more-indicator').onclick = () => {
       sendEventToParent();
     }

From d617441b5e75160ed569daab4e51071015868f93 Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Wed, 25 Dec 2024 16:56:29 +0530
Subject: [PATCH 30/47] Fix spelling mistake.

---
 assets/amp/amp-player-main.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/assets/amp/amp-player-main.js b/assets/amp/amp-player-main.js
index 5c345df5a..f4edb281e 100644
--- a/assets/amp/amp-player-main.js
+++ b/assets/amp/amp-player-main.js
@@ -193,7 +193,7 @@ const sendEventToParent = () => {
   window.parent.document.dispatchEvent(event);
 }
 
-function scrollListner() {
+function scrollListener() {
   if (
     window.scrollY + window.innerHeight >=
     document.documentElement.scrollHeight
@@ -260,7 +260,6 @@ const messageListener = ({ data: { story, doesHaveMorePages: _doesHaveMorePages
     const entryPointRect = document.getElementById('entry-points').getBoundingClientRect()
 
     document.getElementById('show-more-indicator').classList.add('bounce');
-
     document.getElementById('show-more-indicator').style.left = `${entryPointRect.right - 72}px`;
     document.getElementById('show-more-indicator').onclick = () => {
       sendEventToParent();
@@ -276,5 +275,5 @@ const messageListener = ({ data: { story, doesHaveMorePages: _doesHaveMorePages
 
 // Initialize on window load.
 window.addEventListener('load', init);
-window.addEventListener('scroll', scrollListner);
+window.addEventListener('scroll', scrollListener);
 window.addEventListener('message', messageListener);

From b2068b267e034bb221812d3633ae333ffc61aa55 Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Wed, 25 Dec 2024 18:21:22 +0530
Subject: [PATCH 31/47] Fix wrong story display bug

---
 assets/amp/amp-player-main.js                 |  6 ++--
 .../components/webStories/contentPanel.tsx    | 21 +++++------
 .../webStories/getStaticStoryMarkup.ts        | 36 +++++++++----------
 3 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/assets/amp/amp-player-main.js b/assets/amp/amp-player-main.js
index f4edb281e..a43170e39 100644
--- a/assets/amp/amp-player-main.js
+++ b/assets/amp/amp-player-main.js
@@ -124,7 +124,7 @@ function initializeCards() {
 
     cards.forEach((card, idx) => {
       card.addEventListener('click', () => {
-        player.show(stories[idx].href, null, { animate: false });
+        player.show(card.dataset.storyUrl, null, { animate: false });
         const data = { storyOpened: true };
         const event = new CustomEvent('webStoriesLightBoxEvent', {
           detail: data,
@@ -166,6 +166,7 @@ function initializeCarousel() {
 function init() {
   const playerEl = document.body.querySelector('amp-story-player');
   setPlayer(playerEl);
+  previousStories = [];
 
   if (player.isReady) {
     initializeCarousel();
@@ -215,9 +216,10 @@ const getCardHTML = ({
   publisherLogo,
   publisherName,
   storyTitle,
+  storyUrl
 }) => {
   return `
-    <div class="entry-point-card-container">
+    <div class="entry-point-card-container" data-story-url="${storyUrl}">
     <div class="background-cards">
         <div class="background-card-1"></div>
         <div class="background-card-2"></div>
diff --git a/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx b/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
index 8f2410db3..082d81448 100644
--- a/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
+++ b/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
@@ -159,21 +159,22 @@ const WebStories = ({ storyOpened }: WebStoriesProps) => {
             {loadingState ? (
               <ProgressBar additionalStyles="w-1/3 mx-auto h-full" />
             ) : allStoryJSON.length > 0 ? (
-              <iframe
-                ref={iframeRef}
-                srcDoc={getStaticStoryMarkup()}
-                style={{
-                  width: loadingState ? '0%' : '100%',
-                  height: loadingState ? '0%' : '100%',
-                  border: 'none',
-                  overflow: 'hidden',
-                }}
-              />
+              <></>
             ) : (
               <div className="flex-1 flex items-center justify-center text-raisin-black dark:text-bright-gray">
                 No stories found with given filters.
               </div>
             )}
+            <iframe
+              ref={iframeRef}
+              srcDoc={getStaticStoryMarkup()}
+              style={{
+                width: loadingState ? '0%' : '100%',
+                height: loadingState ? '0%' : '100%',
+                border: 'none',
+                overflow: 'hidden',
+              }}
+            />
           </div>
         </div>
       </div>
diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/getStaticStoryMarkup.ts b/packages/extension/src/view/devtools/stateProviders/webStories/getStaticStoryMarkup.ts
index 2d9a43eab..554f9d68b 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/getStaticStoryMarkup.ts
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/getStaticStoryMarkup.ts
@@ -520,27 +520,25 @@ export const getStaticStoryMarkup = () => {
             </div>
         </div>
     </div>
-        <div class="lightbox closed">
+    <div class="lightbox closed">
         <amp-story-player class="my-player">
             <script type="application/json">
-        {
-          "behavior": {
-            "pageScroll": false,
-            "autoplay": false,
-            "action": "circular-wrapping"
-          },
-          "controls": [{
-              "name": "close",
-              "position": "start"
-            },
-            {
-              "name": "skip-to-next"
-            }
-          ]
-        }
-      </script>
-
-      </amp-story-player>
+                {
+                    "behavior": {
+                        "pageScroll": false,
+                        "autoplay": false,
+                        "action": "circular-wrapping"
+                    },
+                    "controls": [{
+                        "name": "close",
+                        "position": "start"
+                    },
+                    {
+                        "name": "skip-to-next"
+                    }]
+                }
+            </script>
+        </amp-story-player>
     </div>
     <div id="show-more-indicator" class="arrow">
         <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="${

From 08a5204b343fb6e248bfdee74d9d8741d0b2b5e5 Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Thu, 26 Dec 2024 14:05:04 +0530
Subject: [PATCH 32/47] Fix feedbacks: No Stories found text is not styled. The
 arrow is still on the extreme right in the vertical mode. Click on the arrow
 down is loading more stories, but it would be good if we also scroll to the
 bottom to show new stories. After new stories are loaded and there are no
 more stories left, we should hide the arrow down. After the we click on arrow
 up and the user scrolls to the top, arrow up should update as the user can no
 longer scroll up.

---
 assets/amp/amp-player-main.js                 | 86 ++++++++++++++-----
 .../components/webStories/contentPanel.tsx    | 40 +++++----
 .../stateProviders/webStories/context.ts      |  2 +
 .../webStories/webStoriesProvider.tsx         |  4 +-
 4 files changed, 89 insertions(+), 43 deletions(-)

diff --git a/assets/amp/amp-player-main.js b/assets/amp/amp-player-main.js
index a43170e39..1d5fe8e5e 100644
--- a/assets/amp/amp-player-main.js
+++ b/assets/amp/amp-player-main.js
@@ -192,19 +192,22 @@ function easeOutQuad(t) {
 const sendEventToParent = () => {
   const event = new CustomEvent('loadMoreData');
   window.parent.document.dispatchEvent(event);
-}
+};
 
 function scrollListener() {
   if (
     window.scrollY + window.innerHeight >=
     document.documentElement.scrollHeight
   ) {
-
-    if(!doesHaveMorePages) {
+    if (!doesHaveMorePages) {
+      if(window.scrollY > 0){
+        document.getElementById('show-more-indicator').style.cursor = 'pointer';
+      }
       document.getElementById('show-more-indicator').style.rotate = '180deg';
       document.getElementById('show-more-indicator').onclick = () => {
         document.body.scrollIntoView();
-      }
+        document.getElementById('show-more-indicator').style.cursor = 'default';
+      };
       return;
     }
     sendEventToParent();
@@ -216,42 +219,42 @@ const getCardHTML = ({
   publisherLogo,
   publisherName,
   storyTitle,
-  storyUrl
+  storyUrl,
 }) => {
   return `
     <div class="entry-point-card-container" data-story-url="${storyUrl}">
-    <div class="background-cards">
+      <div class="background-cards">
         <div class="background-card-1"></div>
         <div class="background-card-2"></div>
-    </div>
-    <img src="${heroImage}" class="entry-point-card-img" alt="A cat">
-    <div class="author-container">
+      </div>
+      <img src="${heroImage}" class="entry-point-card-img" alt="A cat">
+      <div class="author-container">
         <div class="logo-container">
             <div class="logo-ring"></div>
-            <img class="entry-point-card-logo"
-                src="${publisherLogo}" alt="Publisher logo">
+            <img class="entry-point-card-logo" src="${publisherLogo}" alt="Publisher logo">
         </div>
         <span class="entry-point-card-subtitle"> By ${publisherName} </span>
-        </div>
-
-        <div class="card-headline-container">
-            <span class="entry-point-card-headline"> ${storyTitle} </span>
-        </div>
+      </div>
+      <div class="card-headline-container">
+          <span class="entry-point-card-headline"> ${storyTitle} </span>
+      </div>
     </div>
     `;
 };
 
-const messageListener = ({ data: { story, doesHaveMorePages: _doesHaveMorePages } }) => {
+const messageListener = ({
+  data: { story, doesHaveMorePages: _doesHaveMorePages },
+}) => {
   try {
-    const cards = story.map(getCardHTML).join('');
+    const _cards = story.map(getCardHTML).join('');
     const storyAnchors = story.map(({ storyUrl }) => ({ href: storyUrl }));
 
     if (JSON.stringify(story) === JSON.stringify(previousStories)) {
       return;
     }
 
-    document.getElementById('entry-points').innerHTML = cards;
-
+    document.getElementById('entry-points').innerHTML = _cards;
+    const scrollToNext = previousStories.length;
     previousStories = story;
     player.add(storyAnchors);
 
@@ -259,13 +262,16 @@ const messageListener = ({ data: { story, doesHaveMorePages: _doesHaveMorePages
     initializeArrows();
     doesHaveMorePages = _doesHaveMorePages;
 
-    const entryPointRect = document.getElementById('entry-points').getBoundingClientRect()
+    cards[scrollToNext].scrollIntoView()
 
     document.getElementById('show-more-indicator').classList.add('bounce');
-    document.getElementById('show-more-indicator').style.left = `${entryPointRect.right - 72}px`;
+    const distanceToRight = calculateDistanceBetweenLastItemAndBox();
+    document.getElementById('show-more-indicator').style.left = `calc(100% - ${
+      distanceToRight / 2
+    }px)`;
     document.getElementById('show-more-indicator').onclick = () => {
       sendEventToParent();
-    }
+    };
 
     setTimeout(() => {
       document.getElementById('show-more-indicator').classList.remove('bounce');
@@ -275,6 +281,40 @@ const messageListener = ({ data: { story, doesHaveMorePages: _doesHaveMorePages
   }
 };
 
+const calculateDistanceBetweenLastItemAndBox = () => {
+  const flexContainer = document.querySelector('.entry-points');
+  const flexItems = Array.from(flexContainer.children);
+
+  let lastItemFirstRow = null;
+
+  let firstRowBottom = 0;
+
+  for (let i = 0; i < flexItems.length; i++) {
+    const itemRect = flexItems[i].getBoundingClientRect();
+
+    if (i === 0) {
+      firstRowBottom = itemRect.bottom;
+    }
+
+    if (itemRect.bottom <= firstRowBottom) {
+      lastItemFirstRow = flexItems[i];
+    } else {
+      break;
+    }
+  }
+
+  // Get the position of the container
+  const containerRect = flexContainer.getBoundingClientRect();
+
+  // Calculate the distance from the rightmost part of the container to the last item in the first row
+  if (lastItemFirstRow) {
+    const lastItemRect = lastItemFirstRow.getBoundingClientRect();
+    const distanceToRight = containerRect.right - lastItemRect.right;
+    return distanceToRight + 36;
+  }
+  return null;
+};
+
 // Initialize on window load.
 window.addEventListener('load', init);
 window.addEventListener('scroll', scrollListener);
diff --git a/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx b/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
index 082d81448..d3dfc9635 100644
--- a/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
+++ b/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
@@ -43,18 +43,19 @@ const WebStories = ({ storyOpened }: WebStoriesProps) => {
     loadingState,
     allStoryJSON,
     searchValue,
-    setSearchValue,
     showFilterSidebar,
-    setShowFilterSidebar,
-    setSortValue,
     sortValue,
     selectedFilters,
-    toggleFilterSelection,
-    resetFilters,
     selectedFilterValues,
     filters,
     iframeLoaded,
     doesHaveMorePages,
+    setSearchValue,
+    setShowFilterSidebar,
+    setSortValue,
+    toggleFilterSelection,
+    resetFilters,
+    setIframeLoaded,
   } = useWebStories(({ state, actions }) => ({
     iframeLoaded: state.iframeLoaded,
     loadingState: state.loadingState,
@@ -64,11 +65,12 @@ const WebStories = ({ storyOpened }: WebStoriesProps) => {
     filters: state.filters,
     sortValue: state.sortValue,
     selectedFilterValues: state.selectedFilterValues,
-    setSearchValue: actions.setSearchValue,
     showFilterSidebar: state.showFilterSidebar,
+    selectedFilters: state.selectedFilters,
+    setSearchValue: actions.setSearchValue,
+    setIframeLoaded: actions.setIframeLoaded,
     setShowFilterSidebar: actions.setShowFilterSidebar,
     setSortValue: actions.setSortValue,
-    selectedFilters: state.selectedFilters,
     toggleFilterSelection: actions.toggleFilterSelection,
     resetFilters: actions.resetFilters,
   }));
@@ -159,22 +161,22 @@ const WebStories = ({ storyOpened }: WebStoriesProps) => {
             {loadingState ? (
               <ProgressBar additionalStyles="w-1/3 mx-auto h-full" />
             ) : allStoryJSON.length > 0 ? (
-              <></>
+              <iframe
+                ref={iframeRef}
+                onLoad={() => setIframeLoaded(true)}
+                srcDoc={getStaticStoryMarkup()}
+                style={{
+                  width: '100%',
+                  height: '100%',
+                  border: 'none',
+                  overflow: 'hidden',
+                }}
+              />
             ) : (
-              <div className="flex-1 flex items-center justify-center text-raisin-black dark:text-bright-gray">
+              <div className="flex-1 h-full w-full flex items-center justify-center text-raisin-black dark:text-bright-gray">
                 No stories found with given filters.
               </div>
             )}
-            <iframe
-              ref={iframeRef}
-              srcDoc={getStaticStoryMarkup()}
-              style={{
-                width: loadingState ? '0%' : '100%',
-                height: loadingState ? '0%' : '100%',
-                border: 'none',
-                overflow: 'hidden',
-              }}
-            />
           </div>
         </div>
       </div>
diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/context.ts b/packages/extension/src/view/devtools/stateProviders/webStories/context.ts
index 77266a445..36dcf7396 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/context.ts
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/context.ts
@@ -39,6 +39,7 @@ export interface WebStoryContext {
     doesHaveMorePages: boolean;
   };
   actions: {
+    setIframeLoaded: React.Dispatch<React.SetStateAction<boolean>>;
     resetFilters: () => void;
     toggleFilterSelection: (filterKey: string, filterValue: string) => void;
     setSearchValue: React.Dispatch<React.SetStateAction<string>>;
@@ -66,6 +67,7 @@ const initialState: WebStoryContext = {
     doesHaveMorePages: true,
   },
   actions: {
+    setIframeLoaded: noop,
     resetFilters: noop,
     toggleFilterSelection: noop,
     setSearchValue: noop,
diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
index c02869b22..445b868ee 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
@@ -382,6 +382,7 @@ const Provider = ({ children }: PropsWithChildren) => {
     }
 
     if (pageNumber === 1) {
+      setIframeLoaded(false);
       setLoadingState(true);
     }
 
@@ -403,8 +404,8 @@ const Provider = ({ children }: PropsWithChildren) => {
     const mediaAuthorSet: Record<number, string> = {};
 
     if (responseJSON.length === 0 && pageNumber === 1) {
-      setLoadingState(false);
       setAllStoryJSON([]);
+      setLoadingState(false);
       return;
     }
 
@@ -478,6 +479,7 @@ const Provider = ({ children }: PropsWithChildren) => {
         doesHaveMorePages: doesHaveMorePagesRef.current,
       },
       actions: {
+        setIframeLoaded,
         resetFilters,
         toggleFilterSelection,
         setSearchValue,

From 81e4632bcf088ce4fdd362d3a0b2a80ea2d57498 Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Thu, 26 Dec 2024 15:18:51 +0530
Subject: [PATCH 33/47] Move iframe contents to a new component.. Add loader to
 display loader for load more.

---
 .../components/webStories/contentPanel.tsx    | 59 +-----------
 .../webStories/mainContentContainer.tsx       | 90 +++++++++++++++++++
 .../webStories/webStoriesProvider.tsx         |  3 +-
 3 files changed, 96 insertions(+), 56 deletions(-)
 create mode 100644 packages/extension/src/view/devtools/components/webStories/mainContentContainer.tsx

diff --git a/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx b/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
index d3dfc9635..0850af6aa 100644
--- a/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
+++ b/packages/extension/src/view/devtools/components/webStories/contentPanel.tsx
@@ -16,13 +16,8 @@
 /**
  * External dependencies.
  */
-import React, { useEffect, useRef } from 'react';
-import {
-  ChipsBar,
-  FiltersSidebar,
-  ProgressBar,
-  TopBar,
-} from '@google-psat/design-system';
+import React from 'react';
+import { ChipsBar, FiltersSidebar, TopBar } from '@google-psat/design-system';
 import { Resizable } from 're-resizable';
 import { noop } from '@google-psat/common';
 
@@ -30,17 +25,14 @@ import { noop } from '@google-psat/common';
  * Internal dependencies.
  */
 import { useWebStories } from '../../stateProviders';
-import { getStaticStoryMarkup } from '../../stateProviders/webStories/getStaticStoryMarkup';
+import { MainContentContainer } from './mainContentContainer';
 
 interface WebStoriesProps {
   storyOpened: boolean;
 }
 
 const WebStories = ({ storyOpened }: WebStoriesProps) => {
-  const iframeRef = useRef<HTMLIFrameElement>(null);
-
   const {
-    loadingState,
     allStoryJSON,
     searchValue,
     showFilterSidebar,
@@ -48,18 +40,12 @@ const WebStories = ({ storyOpened }: WebStoriesProps) => {
     selectedFilters,
     selectedFilterValues,
     filters,
-    iframeLoaded,
-    doesHaveMorePages,
     setSearchValue,
     setShowFilterSidebar,
     setSortValue,
     toggleFilterSelection,
     resetFilters,
-    setIframeLoaded,
   } = useWebStories(({ state, actions }) => ({
-    iframeLoaded: state.iframeLoaded,
-    loadingState: state.loadingState,
-    doesHaveMorePages: state.doesHaveMorePages,
     allStoryJSON: state.allStoryJSON,
     searchValue: state.searchValue,
     filters: state.filters,
@@ -68,31 +54,12 @@ const WebStories = ({ storyOpened }: WebStoriesProps) => {
     showFilterSidebar: state.showFilterSidebar,
     selectedFilters: state.selectedFilters,
     setSearchValue: actions.setSearchValue,
-    setIframeLoaded: actions.setIframeLoaded,
     setShowFilterSidebar: actions.setShowFilterSidebar,
     setSortValue: actions.setSortValue,
     toggleFilterSelection: actions.toggleFilterSelection,
     resetFilters: actions.resetFilters,
   }));
 
-  useEffect(() => {
-    if (!iframeRef.current) {
-      return;
-    }
-
-    if (loadingState || !iframeLoaded || !allStoryJSON) {
-      return;
-    }
-
-    iframeRef.current?.contentWindow?.postMessage(
-      {
-        story: allStoryJSON,
-        doesHaveMorePages,
-      },
-      '*'
-    );
-  }, [allStoryJSON, loadingState, iframeLoaded, doesHaveMorePages]);
-
   return (
     <div className="h-full w-full flex flex-col">
       {!storyOpened && (
@@ -158,25 +125,7 @@ const WebStories = ({ storyOpened }: WebStoriesProps) => {
           className="h-full flex-1 text-raisin-black dark:text-bright-gray"
         >
           <div className="h-full w-full flex">
-            {loadingState ? (
-              <ProgressBar additionalStyles="w-1/3 mx-auto h-full" />
-            ) : allStoryJSON.length > 0 ? (
-              <iframe
-                ref={iframeRef}
-                onLoad={() => setIframeLoaded(true)}
-                srcDoc={getStaticStoryMarkup()}
-                style={{
-                  width: '100%',
-                  height: '100%',
-                  border: 'none',
-                  overflow: 'hidden',
-                }}
-              />
-            ) : (
-              <div className="flex-1 h-full w-full flex items-center justify-center text-raisin-black dark:text-bright-gray">
-                No stories found with given filters.
-              </div>
-            )}
+            <MainContentContainer />
           </div>
         </div>
       </div>
diff --git a/packages/extension/src/view/devtools/components/webStories/mainContentContainer.tsx b/packages/extension/src/view/devtools/components/webStories/mainContentContainer.tsx
new file mode 100644
index 000000000..5b406d4de
--- /dev/null
+++ b/packages/extension/src/view/devtools/components/webStories/mainContentContainer.tsx
@@ -0,0 +1,90 @@
+/*
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * External dependencies.
+ */
+import { ProgressBar } from '@google-psat/design-system';
+import React, { useEffect, useRef } from 'react';
+/**
+ * Internal dependencies
+ */
+import { useWebStories } from '../../stateProviders';
+import { getStaticStoryMarkup } from '../../stateProviders/webStories/getStaticStoryMarkup';
+
+export const MainContentContainer = () => {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  const {
+    loadingState,
+    allStoryJSON,
+    iframeLoaded,
+    doesHaveMorePages,
+    setIframeLoaded,
+  } = useWebStories(({ state, actions }) => ({
+    iframeLoaded: state.iframeLoaded,
+    loadingState: state.loadingState,
+    doesHaveMorePages: state.doesHaveMorePages,
+    allStoryJSON: state.allStoryJSON,
+    setIframeLoaded: actions.setIframeLoaded,
+  }));
+
+  useEffect(() => {
+    if (!iframeRef.current) {
+      return;
+    }
+
+    if (loadingState || !iframeLoaded || !allStoryJSON) {
+      return;
+    }
+
+    iframeRef.current?.contentWindow?.postMessage(
+      {
+        story: allStoryJSON,
+        doesHaveMorePages,
+      },
+      '*'
+    );
+  }, [allStoryJSON, loadingState, iframeLoaded, doesHaveMorePages]);
+
+  if (loadingState && allStoryJSON.length === 0) {
+    return <ProgressBar additionalStyles="w-1/3 mx-auto h-full" />;
+  } else if (allStoryJSON.length > 0) {
+    return (
+      <div className="flex-1 h-full w-full flex-col">
+        {loadingState && allStoryJSON.length > 0 && (
+          <ProgressBar additionalStyles="w-full mx-auto" />
+        )}
+        <iframe
+          ref={iframeRef}
+          onLoad={() => setIframeLoaded(true)}
+          srcDoc={getStaticStoryMarkup()}
+          style={{
+            width: '100%',
+            height: '100%',
+            border: 'none',
+            overflow: 'hidden',
+          }}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 h-full w-full flex items-center justify-center text-raisin-black dark:text-bright-gray">
+      No stories found with given filters.
+    </div>
+  );
+};
diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
index 445b868ee..16cd8d6e5 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
@@ -383,9 +383,10 @@ const Provider = ({ children }: PropsWithChildren) => {
 
     if (pageNumber === 1) {
       setIframeLoaded(false);
-      setLoadingState(true);
     }
 
+    setLoadingState(true);
+
     const response = await fetch(
       `https://privacysandbox-stories.com/wp-json/web-stories/v1/web-story/?${queryParams}`
     );

From deeb0d2cb11e5f58de3d7847230b708938fe4b56 Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Thu, 26 Dec 2024 15:26:10 +0530
Subject: [PATCH 34/47] Hide up arrow when user reaches the top.

---
 assets/amp/amp-player-main.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/assets/amp/amp-player-main.js b/assets/amp/amp-player-main.js
index 1d5fe8e5e..6397e85c2 100644
--- a/assets/amp/amp-player-main.js
+++ b/assets/amp/amp-player-main.js
@@ -200,9 +200,6 @@ function scrollListener() {
     document.documentElement.scrollHeight
   ) {
     if (!doesHaveMorePages) {
-      if(window.scrollY > 0){
-        document.getElementById('show-more-indicator').style.cursor = 'pointer';
-      }
       document.getElementById('show-more-indicator').style.rotate = '180deg';
       document.getElementById('show-more-indicator').onclick = () => {
         document.body.scrollIntoView();
@@ -212,6 +209,14 @@ function scrollListener() {
     }
     sendEventToParent();
   }
+
+  if(window.scrollY > 0){
+    document.getElementById('show-more-indicator').style.display = 'block';
+  }
+
+  if(window.scrollY === 0){
+    document.getElementById('show-more-indicator').style.display = 'none';
+  }
 }
 
 const getCardHTML = ({

From 7b96a06c3b92651c3d97d0a02a90255f7de5bf03 Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Thu, 26 Dec 2024 15:30:57 +0530
Subject: [PATCH 35/47] Add smooth to scrollIntoView.

---
 assets/amp/amp-player-main.js                             | 8 ++++----
 .../components/webStories/mainContentContainer.tsx        | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/assets/amp/amp-player-main.js b/assets/amp/amp-player-main.js
index 6397e85c2..3800f887d 100644
--- a/assets/amp/amp-player-main.js
+++ b/assets/amp/amp-player-main.js
@@ -202,7 +202,7 @@ function scrollListener() {
     if (!doesHaveMorePages) {
       document.getElementById('show-more-indicator').style.rotate = '180deg';
       document.getElementById('show-more-indicator').onclick = () => {
-        document.body.scrollIntoView();
+        document.body.scrollIntoView({behavior: 'smooth'});
         document.getElementById('show-more-indicator').style.cursor = 'default';
       };
       return;
@@ -210,11 +210,11 @@ function scrollListener() {
     sendEventToParent();
   }
 
-  if(window.scrollY > 0){
+  if(window.scrollY > 0 && !doesHaveMorePages){
     document.getElementById('show-more-indicator').style.display = 'block';
   }
 
-  if(window.scrollY === 0){
+  if(window.scrollY === 0 && !doesHaveMorePages){
     document.getElementById('show-more-indicator').style.display = 'none';
   }
 }
@@ -267,7 +267,7 @@ const messageListener = ({
     initializeArrows();
     doesHaveMorePages = _doesHaveMorePages;
 
-    cards[scrollToNext].scrollIntoView()
+    cards[scrollToNext].scrollIntoView({behavior: 'smooth'});
 
     document.getElementById('show-more-indicator').classList.add('bounce');
     const distanceToRight = calculateDistanceBetweenLastItemAndBox();
diff --git a/packages/extension/src/view/devtools/components/webStories/mainContentContainer.tsx b/packages/extension/src/view/devtools/components/webStories/mainContentContainer.tsx
index 5b406d4de..f210e1a4b 100644
--- a/packages/extension/src/view/devtools/components/webStories/mainContentContainer.tsx
+++ b/packages/extension/src/view/devtools/components/webStories/mainContentContainer.tsx
@@ -83,7 +83,7 @@ export const MainContentContainer = () => {
   }
 
   return (
-    <div className="flex-1 h-full w-full flex items-center justify-center text-raisin-black dark:text-bright-gray">
+    <div className="flex-1 text-base h-full w-full flex items-center justify-center text-raisin-black dark:text-bright-gray">
       No stories found with given filters.
     </div>
   );

From 336d44827c83e383b4cc639ef2ec5ed8b1b0bcec Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Thu, 26 Dec 2024 16:16:07 +0530
Subject: [PATCH 36/47] Remove cursor css. Fix bug

---
 assets/amp/amp-player-main.js                      |  4 +++-
 .../src/components/progressBar/index.tsx           |  8 ++++++--
 .../components/webStories/mainContentContainer.tsx | 14 ++++++--------
 .../webStories/webStoriesProvider.tsx              |  1 +
 4 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/assets/amp/amp-player-main.js b/assets/amp/amp-player-main.js
index 3800f887d..1b3e799a2 100644
--- a/assets/amp/amp-player-main.js
+++ b/assets/amp/amp-player-main.js
@@ -203,7 +203,6 @@ function scrollListener() {
       document.getElementById('show-more-indicator').style.rotate = '180deg';
       document.getElementById('show-more-indicator').onclick = () => {
         document.body.scrollIntoView({behavior: 'smooth'});
-        document.getElementById('show-more-indicator').style.cursor = 'default';
       };
       return;
     }
@@ -279,6 +278,9 @@ const messageListener = ({
     };
 
     setTimeout(() => {
+      if(!doesHaveMorePages){
+        document.getElementById('show-more-indicator').style.rotate = '180deg';
+      }
       document.getElementById('show-more-indicator').classList.remove('bounce');
     }, 2000);
   } catch (error) {
diff --git a/packages/design-system/src/components/progressBar/index.tsx b/packages/design-system/src/components/progressBar/index.tsx
index ef7d10992..1016c3340 100644
--- a/packages/design-system/src/components/progressBar/index.tsx
+++ b/packages/design-system/src/components/progressBar/index.tsx
@@ -20,14 +20,18 @@ import React from 'react';
 
 interface ProgressBarProps {
   additionalStyles?: string;
+  barAdditionalStyles?: string;
 }
-const ProgressBar = ({ additionalStyles = '' }: ProgressBarProps) => {
+const ProgressBar = ({
+  additionalStyles = '',
+  barAdditionalStyles = 'bg-gainsboro dark:bg-neutral-600',
+}: ProgressBarProps) => {
   return (
     <div
       data-testid="progress-bar"
       className={`${additionalStyles} flex justify-center flex-col gap-2 relative overflow-hidden`}
     >
-      <div className="mb-6 h-1 w-full bg-gainsboro dark:bg-neutral-600 overflow-hidden">
+      <div className={`${barAdditionalStyles} mb-6 h-1 w-full overflow-hidden`}>
         <div className="h-1 w-1/2 bg-royal-blue absolute animate-horizontal-spinner"></div>
       </div>
     </div>
diff --git a/packages/extension/src/view/devtools/components/webStories/mainContentContainer.tsx b/packages/extension/src/view/devtools/components/webStories/mainContentContainer.tsx
index f210e1a4b..7b01c6364 100644
--- a/packages/extension/src/view/devtools/components/webStories/mainContentContainer.tsx
+++ b/packages/extension/src/view/devtools/components/webStories/mainContentContainer.tsx
@@ -63,20 +63,18 @@ export const MainContentContainer = () => {
     return <ProgressBar additionalStyles="w-1/3 mx-auto h-full" />;
   } else if (allStoryJSON.length > 0) {
     return (
-      <div className="flex-1 h-full w-full flex-col">
+      <div className="flex-1 h-full w-full relative">
         {loadingState && allStoryJSON.length > 0 && (
-          <ProgressBar additionalStyles="w-full mx-auto" />
+          <ProgressBar
+            additionalStyles="z-20 w-full mx-auto absolute top-0"
+            barAdditionalStyles="dark:bg-raisin-black"
+          />
         )}
         <iframe
           ref={iframeRef}
           onLoad={() => setIframeLoaded(true)}
           srcDoc={getStaticStoryMarkup()}
-          style={{
-            width: '100%',
-            height: '100%',
-            border: 'none',
-            overflow: 'hidden',
-          }}
+          className="w-full h-full overflow-hidden absolute top-0 border-none z-10"
         />
       </div>
     );
diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
index 16cd8d6e5..3d7319594 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
@@ -383,6 +383,7 @@ const Provider = ({ children }: PropsWithChildren) => {
 
     if (pageNumber === 1) {
       setIframeLoaded(false);
+      setAllStoryJSON([]);
     }
 
     setLoadingState(true);

From f1d95887ce1cbf8a82ad571e6b754614627de918 Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Thu, 26 Dec 2024 16:47:09 +0530
Subject: [PATCH 37/47] Fix bug of switching tabs and story disappearence.

---
 .../devtools/components/webStories/mainContentContainer.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/extension/src/view/devtools/components/webStories/mainContentContainer.tsx b/packages/extension/src/view/devtools/components/webStories/mainContentContainer.tsx
index 7b01c6364..95ecf4316 100644
--- a/packages/extension/src/view/devtools/components/webStories/mainContentContainer.tsx
+++ b/packages/extension/src/view/devtools/components/webStories/mainContentContainer.tsx
@@ -59,6 +59,12 @@ export const MainContentContainer = () => {
     );
   }, [allStoryJSON, loadingState, iframeLoaded, doesHaveMorePages]);
 
+  useEffect(() => {
+    return () => {
+      setIframeLoaded(false);
+    };
+  }, [setIframeLoaded]);
+
   if (loadingState && allStoryJSON.length === 0) {
     return <ProgressBar additionalStyles="w-1/3 mx-auto h-full" />;
   } else if (allStoryJSON.length > 0) {

From c110120fc5f63a0081f7339232a256c2538a0fde Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Fri, 27 Dec 2024 12:47:42 +0530
Subject: [PATCH 38/47] Redefine logic of scrolling.

---
 assets/amp/amp-player-main.js | 36 +++++++++++++++++------------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/assets/amp/amp-player-main.js b/assets/amp/amp-player-main.js
index 1b3e799a2..3f69afbe4 100644
--- a/assets/amp/amp-player-main.js
+++ b/assets/amp/amp-player-main.js
@@ -120,8 +120,6 @@ function initializeCards() {
     setCardMargin(parseFloat(getComputedStyle(cards[0]).marginRight));
     setCardWidth(cardMargin + cards[0].offsetWidth);
 
-    const stories = player.getStories();
-
     cards.forEach((card, idx) => {
       card.addEventListener('click', () => {
         player.show(card.dataset.storyUrl, null, { animate: false });
@@ -199,18 +197,15 @@ function scrollListener() {
     window.scrollY + window.innerHeight >=
     document.documentElement.scrollHeight
   ) {
-    if (!doesHaveMorePages) {
-      document.getElementById('show-more-indicator').style.rotate = '180deg';
-      document.getElementById('show-more-indicator').onclick = () => {
-        document.body.scrollIntoView({behavior: 'smooth'});
-      };
-      return;
-    }
     sendEventToParent();
   }
 
   if(window.scrollY > 0 && !doesHaveMorePages){
     document.getElementById('show-more-indicator').style.display = 'block';
+    document.getElementById('show-more-indicator').style.rotate = '180deg';
+    document.getElementById('show-more-indicator').onclick = () => {
+      document.body.scrollIntoView({behavior: 'smooth'});
+    };
   }
 
   if(window.scrollY === 0 && !doesHaveMorePages){
@@ -268,21 +263,26 @@ const messageListener = ({
 
     cards[scrollToNext].scrollIntoView({behavior: 'smooth'});
 
-    document.getElementById('show-more-indicator').classList.add('bounce');
     const distanceToRight = calculateDistanceBetweenLastItemAndBox();
     document.getElementById('show-more-indicator').style.left = `calc(100% - ${
       distanceToRight / 2
     }px)`;
-    document.getElementById('show-more-indicator').onclick = () => {
-      sendEventToParent();
-    };
-
-    setTimeout(() => {
-      if(!doesHaveMorePages){
+  
+    if(!doesHaveMorePages){
+      if(window.scrollY > 0){
         document.getElementById('show-more-indicator').style.rotate = '180deg';
+      }else{
+        document.getElementById('show-more-indicator').style.display = 'none';
       }
-      document.getElementById('show-more-indicator').classList.remove('bounce');
-    }, 2000);
+    }else{
+      document.getElementById('show-more-indicator').classList.add('bounce');
+      document.getElementById('show-more-indicator').onclick = () => {
+        sendEventToParent();
+      };
+      setTimeout(() => {
+        document.getElementById('show-more-indicator').classList.remove('bounce');
+      }, 2000);
+    }
   } catch (error) {
     //Fail silently
   }

From 0d51798974c9616b7601eb890ae8052443e3743e Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Fri, 27 Dec 2024 15:07:11 +0530
Subject: [PATCH 39/47] Fix searchValue using old page number.

---
 .../devtools/stateProviders/webStories/webStoriesProvider.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
index 3d7319594..e2b5d3041 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
@@ -61,6 +61,10 @@ const Provider = ({ children }: PropsWithChildren) => {
 
   const [searchValue] = useDebounce(_searchValue, 500);
 
+  useEffect(() => {
+    setPageNumber(1);
+  }, [searchValue]);
+
   useEffect(() => {
     setFilters([
       {

From 31e193ab4362ee8969b0e16f2105384fd4cb9cf6 Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Fri, 27 Dec 2024 21:14:44 +0530
Subject: [PATCH 40/47] Move amp-player-main to custom scripts

---
 .../{ => custom-scripts}/amp-player-main.js   | 110 ++++++++++--------
 1 file changed, 59 insertions(+), 51 deletions(-)
 rename assets/amp/{ => custom-scripts}/amp-player-main.js (76%)

diff --git a/assets/amp/amp-player-main.js b/assets/amp/custom-scripts/amp-player-main.js
similarity index 76%
rename from assets/amp/amp-player-main.js
rename to assets/amp/custom-scripts/amp-player-main.js
index 3f69afbe4..4e470409e 100644
--- a/assets/amp/amp-player-main.js
+++ b/assets/amp/custom-scripts/amp-player-main.js
@@ -13,36 +13,38 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-let cards;
-let cardMargin;
-let cardWidth;
-let player;
-let lightboxEl;
-let maxScroll;
-let scaleVal = 1;
-let scalingDown = false;
-let deltaY = 0;
-let previousStories = [];
-let doesHaveMorePages = false;
+let stateObject = {
+  cards: null,
+  cardMargin: null,
+  cardWidth: null,
+  player: null,
+  lightboxEl: null,
+  maxScroll: null,
+  scaleVal: 1,
+  scalingDown: false,
+  deltaY: 0,
+  doesHaveMorePages: false,
+  previousStories: [],
+};
 
 function setPlayer(playerEl) {
-  player = playerEl;
+  stateObject.player = playerEl;
 }
 
 function setLightbox(lightbox) {
-  lightboxEl = lightbox;
+  stateObject.lightboxEl = lightbox;
 }
 
 function setCards(cardEls) {
-  cards = cardEls;
+  stateObjectcards = cardEls;
 }
 
 function setCardWidth(width) {
-  cardWidth = width;
+  stateObject.cardWidth = width;
 }
 
 function setCardMargin(margin) {
-  cardMargin = margin;
+  stateObject.cardMargin = margin;
 }
 
 /**
@@ -59,13 +61,13 @@ function initializeArrows() {
         getComputedStyle(scrollContainer.firstElementChild).paddingRight
       );
 
-    maxScroll =
+    stateObject.maxScroll =
       scrollContainer.offsetWidth -
       containerPadding +
-      cardMargin -
-      cards.length * cardWidth;
+      stateObject.cardMargin -
+      stateObject.cards.length * stateObject.cardWidth;
 
-    if (maxScroll < 0) {
+    if (stateObject.maxScroll < 0) {
       document
         .querySelector('.carousel-container')
         .classList.add('overflow-right');
@@ -82,10 +84,12 @@ function closePlayer() {
   const data = { storyOpened: false };
   const event = new CustomEvent('webStoriesLightBoxEvent', { detail: data });
   window.parent.document.dispatchEvent(event);
+
   player.pause();
+
   document.body.classList.remove('lightbox-open');
-  lightboxEl.classList.add('closed');
-  cards.forEach((card) => card.classList.remove('hidden'));
+  stateObject.lightboxEl.classList.add('closed');
+  stateObject.cards.forEach((card) => card.classList.remove('hidden'));
 }
 
 /**
@@ -93,8 +97,8 @@ function closePlayer() {
  */
 function animateScale(val) {
   if (val < 1 && scalingDown) {
-    scaleVal = lerp(easeOutQuad(val), 1, 0.95);
-    lightboxEl.style.transform = `translate3d(0px, ${Math.pow(
+    stateObject.scaleVal = lerp(easeOutQuad(val), 1, 0.95);
+    stateObject.lightboxEl.style.transform = `translate3d(0px, ${Math.pow(
       -deltaY,
       0.6
     )}px, 0) scale3d(${scaleVal}, ${scaleVal}, 1)`;
@@ -106,9 +110,9 @@ function animateScale(val) {
  * Resets scaling animation styles.
  */
 function resetStyles() {
-  scalingDown = false;
-  scaleVal = 1;
-  lightboxEl.style.transform = `translate3d(0, 0, 0) scale3d(1, 1, 1)`;
+  stateObject.scalingDown = false;
+  stateObject.scaleVal = 1;
+  stateObject.lightboxEl.style.transform = `translate3d(0, 0, 0) scale3d(1, 1, 1)`;
 }
 
 /**
@@ -117,10 +121,12 @@ function resetStyles() {
 function initializeCards() {
   try {
     setCards(document.querySelectorAll('.entry-point-card-container'));
-    setCardMargin(parseFloat(getComputedStyle(cards[0]).marginRight));
-    setCardWidth(cardMargin + cards[0].offsetWidth);
+    setCardMargin(
+      parseFloat(getComputedStyle(stateObject.cards[0]).marginRight)
+    );
+    setCardWidth(stateObject.cardMargin + stateObject.cards[0].offsetWidth);
 
-    cards.forEach((card, idx) => {
+    stateObject.cards.forEach((card) => {
       card.addEventListener('click', () => {
         player.show(card.dataset.storyUrl, null, { animate: false });
         const data = { storyOpened: true };
@@ -130,10 +136,10 @@ function initializeCards() {
         window.parent.document.dispatchEvent(event);
 
         document.body.classList.add('lightbox-open');
-        lightboxEl.classList.remove('closed');
+        stateObject.lightboxEl.classList.remove('closed');
         card.classList.add('hidden');
         resetStyles();
-        player.play();
+        stateObject.player.play();
       });
     });
   } catch (error) {
@@ -155,7 +161,7 @@ function initializeCarousel() {
   const event = new CustomEvent('iframeLoaded');
   window.parent.document.dispatchEvent(event);
 
-  player.addEventListener('amp-story-player-close', closePlayer);
+  stateObject.player.addEventListener('amp-story-player-close', closePlayer);
 }
 
 /**
@@ -164,12 +170,12 @@ function initializeCarousel() {
 function init() {
   const playerEl = document.body.querySelector('amp-story-player');
   setPlayer(playerEl);
-  previousStories = [];
+  stateObject.previousStories = [];
 
-  if (player.isReady) {
+  if (stateObject.player.isReady) {
     initializeCarousel();
   } else {
-    player.addEventListener('ready', initializeCarousel);
+    stateObject.player.addEventListener('ready', initializeCarousel);
   }
 }
 
@@ -200,15 +206,15 @@ function scrollListener() {
     sendEventToParent();
   }
 
-  if(window.scrollY > 0 && !doesHaveMorePages){
+  if (window.scrollY > 0 && !stateObject.doesHaveMorePages) {
     document.getElementById('show-more-indicator').style.display = 'block';
     document.getElementById('show-more-indicator').style.rotate = '180deg';
     document.getElementById('show-more-indicator').onclick = () => {
-      document.body.scrollIntoView({behavior: 'smooth'});
+      document.body.scrollIntoView({ behavior: 'smooth' });
     };
   }
 
-  if(window.scrollY === 0 && !doesHaveMorePages){
+  if (window.scrollY === 0 && !stateObject.doesHaveMorePages) {
     document.getElementById('show-more-indicator').style.display = 'none';
   }
 }
@@ -248,39 +254,41 @@ const messageListener = ({
     const _cards = story.map(getCardHTML).join('');
     const storyAnchors = story.map(({ storyUrl }) => ({ href: storyUrl }));
 
-    if (JSON.stringify(story) === JSON.stringify(previousStories)) {
+    if (JSON.stringify(story) === JSON.stringify(stateObject.previousStories)) {
       return;
     }
 
     document.getElementById('entry-points').innerHTML = _cards;
-    const scrollToNext = previousStories.length;
-    previousStories = story;
-    player.add(storyAnchors);
+    const scrollToNext = stateObject.previousStories.length;
+    stateObject.previousStories = story;
+    stateObject.player.add(storyAnchors);
 
     initializeCards();
     initializeArrows();
-    doesHaveMorePages = _doesHaveMorePages;
+    stateObject.doesHaveMorePages = _doesHaveMorePages;
 
-    cards[scrollToNext].scrollIntoView({behavior: 'smooth'});
+    stateObject.cards[scrollToNext].scrollIntoView({ behavior: 'smooth' });
 
     const distanceToRight = calculateDistanceBetweenLastItemAndBox();
     document.getElementById('show-more-indicator').style.left = `calc(100% - ${
       distanceToRight / 2
     }px)`;
-  
-    if(!doesHaveMorePages){
-      if(window.scrollY > 0){
+
+    if (!stateObject.doesHaveMorePages) {
+      if (window.scrollY > 0) {
         document.getElementById('show-more-indicator').style.rotate = '180deg';
-      }else{
+      } else {
         document.getElementById('show-more-indicator').style.display = 'none';
       }
-    }else{
+    } else {
       document.getElementById('show-more-indicator').classList.add('bounce');
       document.getElementById('show-more-indicator').onclick = () => {
         sendEventToParent();
       };
       setTimeout(() => {
-        document.getElementById('show-more-indicator').classList.remove('bounce');
+        document
+          .getElementById('show-more-indicator')
+          .classList.remove('bounce');
       }, 2000);
     }
   } catch (error) {

From 8efc77d2fa82a3907464e2f58de78bf9ef14127d Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Fri, 27 Dec 2024 22:01:49 +0530
Subject: [PATCH 41/47] Move api fetching logic to separate functions.

---
 .../stateProviders/webStories/apiFetchers.ts  |  76 +++++++++++
 .../webStories/webStoriesProvider.tsx         | 123 +++---------------
 2 files changed, 93 insertions(+), 106 deletions(-)
 create mode 100644 packages/extension/src/view/devtools/stateProviders/webStories/apiFetchers.ts

diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/apiFetchers.ts b/packages/extension/src/view/devtools/stateProviders/webStories/apiFetchers.ts
new file mode 100644
index 000000000..1cf259e0c
--- /dev/null
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/apiFetchers.ts
@@ -0,0 +1,76 @@
+/*
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * External dependencies
+ */
+import React from 'react';
+
+export const BASE_API_URL =
+  'https://privacysandbox-stories.com/wp-json/web-stories/v1';
+
+export const apiDataFetcher = async (
+  endpoint: string,
+  stateSetter: React.Dispatch<React.SetStateAction<Record<number, string>>>
+) => {
+  const response = await fetch(BASE_API_URL + endpoint);
+
+  const responseJson = await response.json();
+  const objectIdNameMap: Record<number, string> = {};
+
+  responseJson.forEach((singleObject: any) => {
+    objectIdNameMap[singleObject.id] = singleObject.name;
+  });
+
+  stateSetter(objectIdNameMap);
+};
+
+export const getMediaUrl = async (
+  mediaAuthorSet: Record<number, string>,
+  authors: Record<number, string>
+) => {
+  const transformedMediaAuthorMap: Record<number, Record<string, string>> = {};
+
+  await Promise.all(
+    Object.keys(mediaAuthorSet).map(async (key: string) => {
+      const mediaResponse = await fetch(
+        `${BASE_API_URL}/media/${mediaAuthorSet[Number(key)]}`
+      );
+
+      //Check the media response and get the avif/webp image if available else use source_url.
+      const mediaResponseJSON = await mediaResponse.json();
+      const sourceUrl = mediaResponseJSON.source_url;
+      const splittedUrl = sourceUrl.split('/');
+      const urlWithoutName = sourceUrl.substring(
+        0,
+        sourceUrl.length - splittedUrl[splittedUrl.length - 1].length
+      );
+
+      const avifResource =
+        urlWithoutName +
+        mediaResponseJSON?.media_details?.sources?.['image/avif']?.file;
+      const webpResource =
+        urlWithoutName +
+        mediaResponseJSON?.media_details?.sources?.['image/webp']?.file;
+
+      transformedMediaAuthorMap[Number(key)] = {
+        name: authors[Number(key)],
+        publisherLogo: avifResource ?? webpResource ?? sourceUrl,
+      };
+    })
+  );
+
+  return transformedMediaAuthorMap;
+};
diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
index e2b5d3041..ed9802a1b 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
@@ -35,6 +35,7 @@ import { useDebounce } from 'use-debounce';
  */
 import Context, { type WebStoryContext } from './context';
 import { type SingleStoryJSON } from './getStaticStoryMarkup';
+import { apiDataFetcher, BASE_API_URL, getMediaUrl } from './apiFetchers';
 
 const Provider = ({ children }: PropsWithChildren) => {
   const [_searchValue, setSearchValue] = useState('');
@@ -88,11 +89,6 @@ const Provider = ({ children }: PropsWithChildren) => {
     ]);
   }, [authors, categories, tags]);
 
-  //@ts-ignore since this is a custom event.
-  const webStoriesLightBoxCallback = useCallback((event) => {
-    setStoryOpened(() => event.detail.storyOpened);
-  }, []);
-
   const webStoriesLoadMoreData = useCallback(() => {
     if (!doesHaveMorePagesRef.current) {
       return;
@@ -101,20 +97,17 @@ const Provider = ({ children }: PropsWithChildren) => {
     setPageNumber(pageNumber + 1);
   }, [pageNumber]);
 
-  const iframeLoadedCallback = useCallback(() => {
-    setIframeLoaded(true);
-  }, []);
-
   useEffect(() => {
     window.document.addEventListener(
       'webStoriesLightBoxEvent',
-      webStoriesLightBoxCallback,
+      //@ts-ignore since this is a custom event.
+      (event) => setStoryOpened(event.detail.storyOpened),
       false
     );
 
     window.document.addEventListener(
       'iframeLoaded',
-      iframeLoadedCallback,
+      () => setIframeLoaded(true),
       false
     );
 
@@ -127,13 +120,14 @@ const Provider = ({ children }: PropsWithChildren) => {
     return () => {
       window.document.removeEventListener(
         'iframeLoaded',
-        iframeLoadedCallback,
+        () => setIframeLoaded(true),
         false
       );
 
       window.document.removeEventListener(
         'webStoriesLightBoxEvent',
-        webStoriesLightBoxCallback,
+        //@ts-ignore since this is a custom event.
+        (event) => setStoryOpened(event.detail.storyOpened),
         false
       );
 
@@ -143,11 +137,7 @@ const Provider = ({ children }: PropsWithChildren) => {
         false
       );
     };
-  }, [
-    iframeLoadedCallback,
-    webStoriesLightBoxCallback,
-    webStoriesLoadMoreData,
-  ]);
+  }, [webStoriesLoadMoreData]);
 
   const toggleFilterSelection = useCallback(
     (filterKey: string, filterValue: string) => {
@@ -208,51 +198,6 @@ const Provider = ({ children }: PropsWithChildren) => {
     setPageNumber(1);
   }, []);
 
-  const fetchCategories = useCallback(async () => {
-    const response = await fetch(
-      'https://privacysandbox-stories.com/wp-json/web-stories/v1/web_story_category'
-    );
-    const responseJson = await response.json();
-    const categoriesMap: Record<number, string> = {};
-    responseJson.forEach((category: any) => {
-      categoriesMap[category.id] = category.name;
-    });
-
-    setCategories(categoriesMap);
-  }, []);
-
-  const fetchAuthors = useCallback(async () => {
-    const response = await fetch(
-      'https://privacysandbox-stories.com/wp-json/web-stories/v1/users'
-    );
-
-    const responseJSON = await response.json();
-
-    const authorNameIdMap: Record<number, string> = {};
-
-    responseJSON.forEach((singleResponse: Record<string, any>) => {
-      authorNameIdMap[singleResponse.id] = singleResponse.name;
-    });
-
-    setAuthors(authorNameIdMap);
-  }, []);
-
-  const fetchTags = useCallback(async () => {
-    const response = await fetch(
-      'https://privacysandbox-stories.com/wp-json/web-stories/v1/web_story_tag'
-    );
-
-    const responseJSON = await response.json();
-
-    const tagNameIdMap: Record<number, string> = {};
-
-    responseJSON.forEach((singleResponse: Record<string, any>) => {
-      tagNameIdMap[singleResponse.id] = singleResponse.name;
-    });
-
-    setTags(tagNameIdMap);
-  }, []);
-
   const getAuthorsAndPublisherLogo = useCallback(
     async (mediaAuthorSet: Record<number, string>) => {
       if (authors && Object.keys(authors).length === 0) {
@@ -270,43 +215,11 @@ const Provider = ({ children }: PropsWithChildren) => {
         return authorPublisherLogoRef.current;
       }
 
-      const transformedMediaAuthorMap: Record<
-        number,
-        Record<string, string>
-      > = {};
-
-      await Promise.all(
-        Object.keys(mediaAuthorSet).map(async (key: string) => {
-          const mediaResponse = await fetch(
-            'https://privacysandbox-stories.com/wp-json/web-stories/v1/media/' +
-              mediaAuthorSet[Number(key)]
-          );
-
-          //Check the media response and get the avif/webp image if available else use source_url.
-          const mediaResponseJSON = await mediaResponse.json();
-          const sourceUrl = mediaResponseJSON.source_url;
-          const splittedUrl = sourceUrl.split('/');
-          const urlWithoutName = sourceUrl.substring(
-            0,
-            sourceUrl.length - splittedUrl[splittedUrl.length - 1].length
-          );
-
-          const avifResource =
-            urlWithoutName +
-            mediaResponseJSON?.media_details?.sources?.['image/avif']?.file;
-          const webpResource =
-            urlWithoutName +
-            mediaResponseJSON?.media_details?.sources?.['image/webp']?.file;
-
-          transformedMediaAuthorMap[Number(key)] = {
-            name: authors[Number(key)],
-            publisherLogo: avifResource ?? webpResource ?? sourceUrl,
-          };
-        })
+      authorPublisherLogoRef.current = await getMediaUrl(
+        mediaAuthorSet,
+        authors
       );
-
-      authorPublisherLogoRef.current = transformedMediaAuthorMap;
-      return transformedMediaAuthorMap;
+      return authorPublisherLogoRef.current;
     },
     [authors]
   );
@@ -392,9 +305,7 @@ const Provider = ({ children }: PropsWithChildren) => {
 
     setLoadingState(true);
 
-    const response = await fetch(
-      `https://privacysandbox-stories.com/wp-json/web-stories/v1/web-story/?${queryParams}`
-    );
+    const response = await fetch(`${BASE_API_URL}/web-story/?${queryParams}`);
 
     const responseJSON = await response.json();
     const totalPages = Number(response.headers.get('X-Wp-Totalpages'));
@@ -459,10 +370,10 @@ const Provider = ({ children }: PropsWithChildren) => {
   ]);
 
   useEffect(() => {
-    fetchAuthors();
-    fetchCategories();
-    fetchTags();
-  }, [fetchCategories, fetchAuthors, fetchTags]);
+    apiDataFetcher('/users', setAuthors);
+    apiDataFetcher('/web_story_category', setCategories);
+    apiDataFetcher('/web-story_tag', setTags);
+  }, []);
 
   useEffect(() => {
     fetchStories();

From 03c388df4512824d618cbdf7df261901a9d83615 Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Fri, 27 Dec 2024 22:04:55 +0530
Subject: [PATCH 42/47] Change API path.

---
 .../devtools/stateProviders/webStories/webStoriesProvider.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
index ed9802a1b..5bee3d3fa 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
@@ -372,7 +372,7 @@ const Provider = ({ children }: PropsWithChildren) => {
   useEffect(() => {
     apiDataFetcher('/users', setAuthors);
     apiDataFetcher('/web_story_category', setCategories);
-    apiDataFetcher('/web-story_tag', setTags);
+    apiDataFetcher('/web_story_tag', setTags);
   }, []);
 
   useEffect(() => {

From e2e34ad7f0a33daaab24abe0709c2717a8889122 Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Fri, 27 Dec 2024 22:10:16 +0530
Subject: [PATCH 43/47] Fix bugs in fetcher.

---
 assets/amp/custom-scripts/amp-player-main.js                    | 2 +-
 .../devtools/stateProviders/webStories/getStaticStoryMarkup.ts  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/assets/amp/custom-scripts/amp-player-main.js b/assets/amp/custom-scripts/amp-player-main.js
index 4e470409e..76a9fb05a 100644
--- a/assets/amp/custom-scripts/amp-player-main.js
+++ b/assets/amp/custom-scripts/amp-player-main.js
@@ -36,7 +36,7 @@ function setLightbox(lightbox) {
 }
 
 function setCards(cardEls) {
-  stateObjectcards = cardEls;
+  stateObject.cards = cardEls;
 }
 
 function setCardWidth(width) {
diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/getStaticStoryMarkup.ts b/packages/extension/src/view/devtools/stateProviders/webStories/getStaticStoryMarkup.ts
index 554f9d68b..bfc60709f 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/getStaticStoryMarkup.ts
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/getStaticStoryMarkup.ts
@@ -31,7 +31,7 @@ export const getStaticStoryMarkup = () => {
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <script async src="${chrome?.runtime?.getURL(
-      'assets/amp/amp-player-main.js'
+      'assets/amp/custom-scripts/amp-player-main.js'
     )}" type="module"></script>
     <script async src="${chrome?.runtime?.getURL(
       'assets/amp/amp-story-player-v0.js'

From b14f1e2a1e16a50cfc805216ad666308fff270fd Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Fri, 27 Dec 2024 22:13:06 +0530
Subject: [PATCH 44/47] Move BASE_API_URL to constants file.

---
 .../stateProviders/webStories/apiFetchers.ts    |  6 ++++--
 .../stateProviders/webStories/constants.ts      | 17 +++++++++++++++++
 .../webStories/webStoriesProvider.tsx           |  3 ++-
 3 files changed, 23 insertions(+), 3 deletions(-)
 create mode 100644 packages/extension/src/view/devtools/stateProviders/webStories/constants.ts

diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/apiFetchers.ts b/packages/extension/src/view/devtools/stateProviders/webStories/apiFetchers.ts
index 1cf259e0c..64b124e39 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/apiFetchers.ts
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/apiFetchers.ts
@@ -18,8 +18,10 @@
  */
 import React from 'react';
 
-export const BASE_API_URL =
-  'https://privacysandbox-stories.com/wp-json/web-stories/v1';
+/**
+ * Internal dependencies
+ */
+import { BASE_API_URL } from './constants';
 
 export const apiDataFetcher = async (
   endpoint: string,
diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/constants.ts b/packages/extension/src/view/devtools/stateProviders/webStories/constants.ts
new file mode 100644
index 000000000..630453078
--- /dev/null
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/constants.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export const BASE_API_URL =
+  'https://privacysandbox-stories.com/wp-json/web-stories/v1';
diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
index 5bee3d3fa..104064c2a 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
@@ -35,7 +35,8 @@ import { useDebounce } from 'use-debounce';
  */
 import Context, { type WebStoryContext } from './context';
 import { type SingleStoryJSON } from './getStaticStoryMarkup';
-import { apiDataFetcher, BASE_API_URL, getMediaUrl } from './apiFetchers';
+import { apiDataFetcher, getMediaUrl } from './apiFetchers';
+import { BASE_API_URL } from './constants';
 
 const Provider = ({ children }: PropsWithChildren) => {
   const [_searchValue, setSearchValue] = useState('');

From 887f54869c122a480ffc289106ab0ca2fb7e6919 Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Fri, 27 Dec 2024 22:20:32 +0530
Subject: [PATCH 45/47] Use math.ceil for calculation.

---
 assets/amp/custom-scripts/amp-player-main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/amp/custom-scripts/amp-player-main.js b/assets/amp/custom-scripts/amp-player-main.js
index 76a9fb05a..f52b25edd 100644
--- a/assets/amp/custom-scripts/amp-player-main.js
+++ b/assets/amp/custom-scripts/amp-player-main.js
@@ -200,7 +200,7 @@ const sendEventToParent = () => {
 
 function scrollListener() {
   if (
-    window.scrollY + window.innerHeight >=
+    Math.ceil(window.scrollY + window.innerHeight) >=
     document.documentElement.scrollHeight
   ) {
     sendEventToParent();

From 3b4d7f9b413657f537cb0cdf8d2d82ce61b4d9df Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Fri, 27 Dec 2024 22:21:05 +0530
Subject: [PATCH 46/47] Use document insetad of window.document.

---
 .../webStories/webStoriesProvider.tsx            | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
index 104064c2a..1ab72bd65 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
@@ -99,40 +99,36 @@ const Provider = ({ children }: PropsWithChildren) => {
   }, [pageNumber]);
 
   useEffect(() => {
-    window.document.addEventListener(
+    document.addEventListener(
       'webStoriesLightBoxEvent',
       //@ts-ignore since this is a custom event.
       (event) => setStoryOpened(event.detail.storyOpened),
       false
     );
 
-    window.document.addEventListener(
+    document.addEventListener(
       'iframeLoaded',
       () => setIframeLoaded(true),
       false
     );
 
-    window.document.addEventListener(
-      'loadMoreData',
-      webStoriesLoadMoreData,
-      false
-    );
+    document.addEventListener('loadMoreData', webStoriesLoadMoreData, false);
 
     return () => {
-      window.document.removeEventListener(
+      document.removeEventListener(
         'iframeLoaded',
         () => setIframeLoaded(true),
         false
       );
 
-      window.document.removeEventListener(
+      document.removeEventListener(
         'webStoriesLightBoxEvent',
         //@ts-ignore since this is a custom event.
         (event) => setStoryOpened(event.detail.storyOpened),
         false
       );
 
-      window.document.removeEventListener(
+      document.removeEventListener(
         'loadMoreData',
         webStoriesLoadMoreData,
         false

From bd2f9b3a438c51bde047ffb723d4298962db9f5e Mon Sep 17 00:00:00 2001
From: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>
Date: Fri, 27 Dec 2024 22:34:41 +0530
Subject: [PATCH 47/47] Move utilities to utils folder.

---
 .../getStaticStoryMarkup.ts                   |  8 --
 .../webStories/mainContentContainer.tsx       |  2 +-
 .../stateProviders/webStories/context.ts      |  5 +-
 .../stateProviders/webStories/types.ts        | 22 +++++
 .../webStories/{ => utils}/apiFetchers.ts     |  2 +-
 .../webStories/utils/createQueryParams.ts     | 76 ++++++++++++++++
 .../webStories/webStoriesProvider.tsx         | 90 +++++--------------
 7 files changed, 128 insertions(+), 77 deletions(-)
 rename packages/extension/src/{view/devtools/stateProviders/webStories => utils}/getStaticStoryMarkup.ts (99%)
 create mode 100644 packages/extension/src/view/devtools/stateProviders/webStories/types.ts
 rename packages/extension/src/view/devtools/stateProviders/webStories/{ => utils}/apiFetchers.ts (98%)
 create mode 100644 packages/extension/src/view/devtools/stateProviders/webStories/utils/createQueryParams.ts

diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/getStaticStoryMarkup.ts b/packages/extension/src/utils/getStaticStoryMarkup.ts
similarity index 99%
rename from packages/extension/src/view/devtools/stateProviders/webStories/getStaticStoryMarkup.ts
rename to packages/extension/src/utils/getStaticStoryMarkup.ts
index bfc60709f..aa0da3440 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/getStaticStoryMarkup.ts
+++ b/packages/extension/src/utils/getStaticStoryMarkup.ts
@@ -13,14 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-export interface SingleStoryJSON {
-  heroImage: string;
-  publisherLogo: string;
-  publisherName: string;
-  storyTitle: string;
-  storyUrl: string;
-}
 export const getStaticStoryMarkup = () => {
   const isDark = document.body.classList.contains('dark');
   return `
diff --git a/packages/extension/src/view/devtools/components/webStories/mainContentContainer.tsx b/packages/extension/src/view/devtools/components/webStories/mainContentContainer.tsx
index 95ecf4316..bff00230f 100644
--- a/packages/extension/src/view/devtools/components/webStories/mainContentContainer.tsx
+++ b/packages/extension/src/view/devtools/components/webStories/mainContentContainer.tsx
@@ -22,7 +22,7 @@ import React, { useEffect, useRef } from 'react';
  * Internal dependencies
  */
 import { useWebStories } from '../../stateProviders';
-import { getStaticStoryMarkup } from '../../stateProviders/webStories/getStaticStoryMarkup';
+import { getStaticStoryMarkup } from '../../../../utils/getStaticStoryMarkup';
 
 export const MainContentContainer = () => {
   const iframeRef = useRef<HTMLIFrameElement>(null);
diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/context.ts b/packages/extension/src/view/devtools/stateProviders/webStories/context.ts
index 36dcf7396..9ffa5c819 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/context.ts
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/context.ts
@@ -21,7 +21,10 @@ import type {
   ChipsFilter,
   FilterSidebarValue,
 } from '@google-psat/design-system';
-import type { SingleStoryJSON } from './getStaticStoryMarkup';
+/**
+ * Internal dependencies.
+ */
+import type { SingleStoryJSON } from './types';
 
 export interface WebStoryContext {
   state: {
diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/types.ts b/packages/extension/src/view/devtools/stateProviders/webStories/types.ts
new file mode 100644
index 000000000..65c0b2783
--- /dev/null
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/types.ts
@@ -0,0 +1,22 @@
+/*
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export interface SingleStoryJSON {
+  heroImage: string;
+  publisherLogo: string;
+  publisherName: string;
+  storyTitle: string;
+  storyUrl: string;
+}
diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/apiFetchers.ts b/packages/extension/src/view/devtools/stateProviders/webStories/utils/apiFetchers.ts
similarity index 98%
rename from packages/extension/src/view/devtools/stateProviders/webStories/apiFetchers.ts
rename to packages/extension/src/view/devtools/stateProviders/webStories/utils/apiFetchers.ts
index 64b124e39..bb6a901b1 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/apiFetchers.ts
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/utils/apiFetchers.ts
@@ -21,7 +21,7 @@ import React from 'react';
 /**
  * Internal dependencies
  */
-import { BASE_API_URL } from './constants';
+import { BASE_API_URL } from '../constants';
 
 export const apiDataFetcher = async (
   endpoint: string,
diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/utils/createQueryParams.ts b/packages/extension/src/view/devtools/stateProviders/webStories/utils/createQueryParams.ts
new file mode 100644
index 000000000..7c15157ac
--- /dev/null
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/utils/createQueryParams.ts
@@ -0,0 +1,76 @@
+/*
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export const createQueryParams = (
+  selectedFilterValues: Record<string, string[]>,
+  authors: Record<number, string>,
+  categories: Record<number, string>,
+  tags: Record<number, string>,
+  searchValue: string,
+  pageNumber: number,
+  sortValue: string
+) => {
+  const selectedAuthorsID: number[] = [];
+  const selectedCategoriesId: number[] = [];
+  const selectedTagId: number[] = [];
+
+  Object.keys(authors).forEach((key) => {
+    const keyToUse = Number(key);
+    if (selectedFilterValues?.author?.includes(authors[keyToUse])) {
+      selectedAuthorsID.push(keyToUse);
+    }
+  });
+
+  Object.keys(categories).forEach((key) => {
+    const keyToUse = Number(key);
+    if (selectedFilterValues?.category?.includes(categories[keyToUse])) {
+      selectedCategoriesId.push(keyToUse);
+    }
+  });
+
+  Object.keys(tags).forEach((key) => {
+    const keyToUse = Number(key);
+    if (selectedFilterValues?.tag?.includes(tags[keyToUse])) {
+      selectedTagId.push(keyToUse);
+    }
+  });
+
+  const urlSearchParams = new URLSearchParams();
+
+  urlSearchParams.append('per_page', '8');
+  urlSearchParams.append('page', pageNumber.toString());
+
+  if (selectedAuthorsID.length > 0) {
+    urlSearchParams.append('author', selectedAuthorsID.join(','));
+  }
+
+  if (selectedCategoriesId.length > 0) {
+    urlSearchParams.append(
+      'web_story_category',
+      selectedCategoriesId.join(',')
+    );
+  }
+
+  if (selectedTagId.length > 0) {
+    urlSearchParams.append('web_story_tag', selectedTagId.join(','));
+  }
+
+  urlSearchParams.append('order', sortValue === 'latest' ? 'desc' : 'asc');
+
+  if (searchValue) {
+    urlSearchParams.append('search', searchValue);
+  }
+  return urlSearchParams.toString();
+};
diff --git a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
index 1ab72bd65..380c27ede 100644
--- a/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
+++ b/packages/extension/src/view/devtools/stateProviders/webStories/webStoriesProvider.tsx
@@ -34,9 +34,10 @@ import { useDebounce } from 'use-debounce';
  * Internal dependencies.
  */
 import Context, { type WebStoryContext } from './context';
-import { type SingleStoryJSON } from './getStaticStoryMarkup';
-import { apiDataFetcher, getMediaUrl } from './apiFetchers';
+import type { SingleStoryJSON } from './types';
+import { apiDataFetcher, getMediaUrl } from './utils/apiFetchers';
 import { BASE_API_URL } from './constants';
+import { createQueryParams } from './utils/createQueryParams';
 
 const Provider = ({ children }: PropsWithChildren) => {
   const [_searchValue, setSearchValue] = useState('');
@@ -221,70 +222,27 @@ const Provider = ({ children }: PropsWithChildren) => {
     [authors]
   );
 
-  const queryParams = useMemo(() => {
-    const selectedAuthorsID: number[] = [];
-    const selectedCategoriesId: number[] = [];
-    const selectedTagId: number[] = [];
-
-    Object.keys(authors).forEach((key) => {
-      const keyToUse = Number(key);
-      if (selectedFilterValues?.author?.includes(authors[keyToUse])) {
-        selectedAuthorsID.push(keyToUse);
-      }
-    });
-
-    Object.keys(categories).forEach((key) => {
-      const keyToUse = Number(key);
-      if (selectedFilterValues?.category?.includes(categories[keyToUse])) {
-        selectedCategoriesId.push(keyToUse);
-      }
-    });
-
-    Object.keys(tags).forEach((key) => {
-      const keyToUse = Number(key);
-      if (selectedFilterValues?.tag?.includes(tags[keyToUse])) {
-        selectedTagId.push(keyToUse);
-      }
-    });
-
-    const urlSearchParams = new URLSearchParams();
-
-    urlSearchParams.append('per_page', '8');
-    urlSearchParams.append('page', pageNumber.toString());
-
-    if (selectedAuthorsID.length > 0) {
-      urlSearchParams.append('author', selectedAuthorsID.join(','));
-    }
-
-    if (selectedCategoriesId.length > 0) {
-      urlSearchParams.append(
-        'web_story_category',
-        selectedCategoriesId.join(',')
-      );
-    }
-
-    if (selectedTagId.length > 0) {
-      urlSearchParams.append('web_story_tag', selectedTagId.join(','));
-    }
-
-    urlSearchParams.append('order', sortValue === 'latest' ? 'desc' : 'asc');
-
-    if (searchValue) {
-      urlSearchParams.append('search', searchValue);
-    }
-
-    return urlSearchParams.toString();
-  }, [
-    pageNumber,
-    searchValue,
-    authors,
-    categories,
-    selectedFilterValues?.author,
-    selectedFilterValues?.category,
-    selectedFilterValues?.tag,
-    sortValue,
-    tags,
-  ]);
+  const queryParams = useMemo(
+    () =>
+      createQueryParams(
+        selectedFilterValues,
+        authors,
+        categories,
+        tags,
+        searchValue,
+        pageNumber,
+        sortValue
+      ),
+    [
+      pageNumber,
+      searchValue,
+      authors,
+      categories,
+      selectedFilterValues,
+      sortValue,
+      tags,
+    ]
+  );
 
   const fetchStories = useCallback(async () => {
     if (