Feature: Dynamic web stories from backend

assets/amp/amp-player-main.js

@@ -22,6 +22,8 @@ let maxScroll;
 let scaleVal = 1;
 let scalingDown = false;
 let deltaY = 0;
+let previousStories = [];
+let doesHaveMorePages = false;
 
 function setPlayer(playerEl) {
   player = playerEl;
@@ -47,33 +49,39 @@ function setCardMargin(margin) {
  * Initializes arrows for horizontal scrolling on desktop.
  */
 function initializeArrows() {
-  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');
+  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) {
+    //Fail silently
   }
 }
 
 /**
  * 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');
@@ -107,26 +115,31 @@ function resetStyles() {
  * Initializes card click events and sets up their dimensions.
  */
 function initializeCards() {
-  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();
+  try {
+    setCards(document.querySelectorAll('.entry-point-card-container'));
+    setCardMargin(parseFloat(getComputedStyle(cards[0]).marginRight));
+    setCardWidth(cardMargin + cards[0].offsetWidth);
+
+    cards.forEach((card, idx) => {
+      card.addEventListener('click', () => {
+        player.show(card.dataset.storyUrl, 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) {
+    //Fail silently
+    console.log(error);
+  }
 }
 
 /**
@@ -139,6 +152,9 @@ function initializeCarousel() {
   initializeCards();
   initializeArrows();
 
+  const event = new CustomEvent('iframeLoaded');
+  window.parent.document.dispatchEvent(event);
+
   player.addEventListener('amp-story-player-close', closePlayer);
 }
 
@@ -148,6 +164,7 @@ function initializeCarousel() {
 function init() {
   const playerEl = document.body.querySelector('amp-story-player');
   setPlayer(playerEl);
+  previousStories = [];
 
   if (player.isReady) {
     initializeCarousel();
@@ -170,5 +187,142 @@ function easeOutQuad(t) {
   return --t * t * t + 1;
 }
 
+const sendEventToParent = () => {
+  const event = new CustomEvent('loadMoreData');
+  window.parent.document.dispatchEvent(event);
+};
+
+function scrollListener() {
+  if (
+    window.scrollY + window.innerHeight >=
+    document.documentElement.scrollHeight
+  ) {
+    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){
+    document.getElementById('show-more-indicator').style.display = 'none';
+  }
+}
+
+const getCardHTML = ({
+  heroImage,
+  publisherLogo,
+  publisherName,
+  storyTitle,
+  storyUrl,
+}) => {
+  return `
+    <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>
+      </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 messageListener = ({
+  data: { story, doesHaveMorePages: _doesHaveMorePages },
+}) => {
+  try {
+    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;
+    const scrollToNext = previousStories.length;
+    previousStories = story;
+    player.add(storyAnchors);
+
+    initializeCards();
+    initializeArrows();
+    doesHaveMorePages = _doesHaveMorePages;
+
+    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){
+        document.getElementById('show-more-indicator').style.rotate = '180deg';
+      }else{
+        document.getElementById('show-more-indicator').style.display = 'none';
+      }
+    }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
+  }
+};
+
+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);
+window.addEventListener('message', messageListener);

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>

packages/extension/src/view/devtools/components/webStories/contentPanel.tsx

@@ -24,39 +24,38 @@ import { noop } from '@google-psat/common';
 /**
  * Internal dependencies.
  */
-import { getStoryMarkup } from './createStoryIframe';
-import { STORY_JSON } from './story';
-import { useStories } from '../../stateProviders';
+import { useWebStories } from '../../stateProviders';
+import { MainContentContainer } from './mainContentContainer';
 
 interface WebStoriesProps {
   storyOpened: boolean;
 }
 
 const WebStories = ({ storyOpened }: WebStoriesProps) => {
-  const storyMarkup = getStoryMarkup(STORY_JSON);
-
   const {
+    allStoryJSON,
     searchValue,
-    setSearchValue,
     showFilterSidebar,
-    setShowFilterSidebar,
-    setSortValue,
     sortValue,
     selectedFilters,
-    toggleFilterSelection,
-    resetFilters,
     selectedFilterValues,
     filters,
-  } = useStories(({ state, actions }) => ({
+    setSearchValue,
+    setShowFilterSidebar,
+    setSortValue,
+    toggleFilterSelection,
+    resetFilters,
+  } = useWebStories(({ state, actions }) => ({
+    allStoryJSON: state.allStoryJSON,
     searchValue: state.searchValue,
     filters: state.filters,
     sortValue: state.sortValue,
     selectedFilterValues: state.selectedFilterValues,
-    setSearchValue: actions.setSearchValue,
     showFilterSidebar: state.showFilterSidebar,
+    selectedFilters: state.selectedFilters,
+    setSearchValue: actions.setSearchValue,
     setShowFilterSidebar: actions.setShowFilterSidebar,
     setSortValue: actions.setSortValue,
-    selectedFilters: state.selectedFilters,
     toggleFilterSelection: actions.toggleFilterSelection,
     resetFilters: actions.resetFilters,
   }));
@@ -73,10 +72,10 @@ const WebStories = ({ storyOpened }: WebStoriesProps) => {
             hideFiltering={false}
             disableFiltering={false}
             hideSearch={false}
-            count={0} // TODO: Add count
+            count={allStoryJSON.length}
           >
-            <div className="flex justify-between items-center min-w-[125px] text-raisin-black dark:text-bright-gray">
-              <p>Sort by:</p>
+            <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>
               <select
                 value={sortValue}
                 onChange={(e) =>
@@ -91,8 +90,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>
@@ -125,15 +124,9 @@ 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',
-            }}
-          />
+          <div className="h-full w-full flex">
+            <MainContentContainer />
+          </div>
         </div>
       </div>
     </div>