DDFBRA-183 - Anonymous and logged in user can try ebook

src/apps/material/material.entry.tsx

@@ -11,6 +11,7 @@ import { GlobalEntryTextProps } from "../../core/storybook/globalTextArgs";
 interface MaterialEntryTextProps {
   alreadyReservedText: string;
   approveReservationText: string;
+  audiobookText: string;
   blockedButtonText: string;
   cantReserveText: string;
   cantViewReviewText: string;
@@ -43,6 +44,7 @@ interface MaterialEntryTextProps {
   detailsListTypeText: string;
   detailsOfTheMaterialText: string;
   detailsText: string;
+  ebookText: string;
   editionsText: string;
   editionText: string;
   etAlText: string;
@@ -100,6 +102,7 @@ interface MaterialEntryTextProps {
   okButtonText: string;
   onlineLimitMonthAudiobookInfoText: string;
   onlineLimitMonthEbookInfoText: string;
+  onlineMaterialTeaserText: string;
   openOrderAuthenticationErrorText: string;
   openOrderErrorMissingPincodeText: string;
   openOrderInvalidOrderText: string;
@@ -144,13 +147,15 @@ interface MaterialEntryTextProps {
   outOfText: string;
   periodicalSelectEditionText: string;
   periodicalSelectYearText: string;
-  reservationDetailsPickUpAtTitleText: string;
+  playerModalCloseButtonText: string;
+  playerModalDescriptionText: string;
   queueText: string;
   ratingIsText: string;
   readArticleText: string;
   receiveEmailWhenMaterialReadyText: string;
   receiveSmsWhenMaterialReadyText: string;
   reservableFromAnotherLibraryText: string;
+  reservationDetailsPickUpAtTitleText: string;
   reservationErrorsDescriptionText: string;
   reservationErrorsTitleText: string;
   reservationModalCloseModalAriaLabelText: string;

src/apps/material/material.stories.tsx

@@ -67,6 +67,14 @@ const meta: Meta<typeof MaterialEntry> = {
       description: "Edition/Week",
       control: { type: "text" }
     },
+    playerModalCloseButtonText: {
+      description: "Close",
+      control: { type: "text" }
+    },
+    playerModalDescriptionText: {
+      description: "Player modal description text",
+      control: { type: "text" }
+    },
     reserveBookText: {
       description: "Reserve",
       control: { type: "text" }
@@ -143,6 +151,10 @@ const meta: Meta<typeof MaterialEntry> = {
       description: "Details",
       control: { type: "text" }
     },
+    ebookText: {
+      description: "Ebook",
+      control: { type: "text" }
+    },
     reviewsText: {
       description: "Reviews",
       control: { type: "text" }
@@ -291,10 +303,18 @@ const meta: Meta<typeof MaterialEntry> = {
       description: "Online limit info text",
       control: { type: "text" }
     },
+    onlineMaterialTeaserText: {
+      description: "Material button online teaser text",
+      control: { type: "text" }
+    },
     approveReservationText: {
       description: "Approve reservation",
       control: { type: "text" }
     },
+    audiobookText: {
+      description: "Audiobook",
+      control: { type: "text" }
+    },
     shiftText: {
       description: "Change",
       control: { type: "text" }
@@ -692,6 +712,7 @@ const meta: Meta<typeof MaterialEntry> = {
     ...serviceUrlArgs,
     ...globalTextArgs,
     ...globalConfigArgs,
+    audiobookText: "Audiobook",
     searchUrl: "/search",
     materialUrl: "/work/:workid",
     wid: "work-of:870970-basis:52557240",
@@ -708,6 +729,8 @@ const meta: Meta<typeof MaterialEntry> = {
     materialHeaderAuthorByText: "By",
     periodicalSelectYearText: "Year",
     periodicalSelectEditionText: "Edition",
+    playerModalDescriptionText: "Modal for player",
+    playerModalCloseButtonText: "Close",
     reserveBookText: "Reserve book",
     reserveText: "Reserve",
     reserveWithMaterialTypeText: "Reserve @materialType",
@@ -728,6 +751,7 @@ const meta: Meta<typeof MaterialEntry> = {
     editionsText: "Editions",
     fictionNonfictionText: "Fictional",
     detailsText: "Details",
+    ebookText: "E-book",
     reviewsText: "Reviews",
     detailsListTypeText: "Type",
     detailsListLanguageText: "Language",
@@ -771,6 +795,7 @@ const meta: Meta<typeof MaterialEntry> = {
       "You have borrowed @count out of @limit possible e-books this month",
     onlineLimitMonthAudiobookInfoText:
       "You have borrowed @count out of @limit possible audio-books this month",
+    onlineMaterialTeaserText: "Try @materialType",
     approveReservationText: "Approve reservation",
     shiftText: "Change",
     reservationDetailsPickUpAtTitleText: "Pick up at",

src/apps/material/material.tsx

@@ -33,11 +33,14 @@ import {
   getBestMaterialTypeForWork,
   getDetailsListData,
   getInfomediaIds,
+  getManifestationIsbn,
   getManifestationsOrderByTypeAndYear,
   isParallelReservation
 } from "./helper";
 import MaterialDisclosure from "./MaterialDisclosure";
 import ReservationFindOnShelfModals from "./ReservationFindOnShelfModals";
+import PlayerModal from "../../components/material/player-modal/PlayerModal";
+import { hasPlayerManifestation } from "../../components/reader-player/helper";
 
 export interface MaterialProps {
   wid: WorkId;
@@ -193,6 +196,11 @@ const Material: React.FC<MaterialProps> = ({ wid }) => {
             setSelectedPeriodical={setSelectedPeriodical}
           />
         )}
+        {hasPlayerManifestation(selectedManifestations) && (
+          <PlayerModal
+            identifier={getManifestationIsbn(selectedManifestations[0])}
+          />
+        )}
       </MaterialHeader>
       <MaterialDescription pid={pid} work={work} />
       {/* Since we cannot trust the editions for global manifestations */}

src/apps/reader/Reader.entry.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { withConfig } from "../../core/utils/config";
+import { withUrls } from "../../core/utils/url";
+import { withText } from "../../core/utils/text";
+import Reader, { ReaderType } from "../../components/reader-player/Reader";
+
+const ReaderEntry: React.FC<ReaderType> = ({ identifier, orderid }) => {
+  return <Reader identifier={identifier} orderid={orderid} />;
+};
+
+export default withConfig(withUrls(withText(ReaderEntry)));

src/apps/reader/Reader.mount.ts

@@ -0,0 +1,4 @@
+import addMount from "../../core/addMount";
+import Reader from "./Reader.entry";
+
+addMount({ appName: "reader", app: Reader });

src/components/Buttons/Button.tsx

@@ -18,6 +18,7 @@ export type ButtonProps = {
   id?: string;
   classNames?: string;
   dataCy?: string;
+  ariaDescribedBy?: string;
 };
 
 export const Button: React.FC<ButtonProps> = ({
@@ -31,7 +32,8 @@ export const Button: React.FC<ButtonProps> = ({
   iconClassNames,
   id,
   classNames,
-  dataCy
+  dataCy,
+  ariaDescribedBy
 }) => {
   return (
     <button
@@ -43,6 +45,7 @@ export const Button: React.FC<ButtonProps> = ({
       disabled={disabled}
       onClick={onClick}
       id={id}
+      aria-describedby={ariaDescribedBy}
     >
       {label}
       <ButtonIcon

src/components/material/material-buttons/generic/MaterialSecondaryButton.tsx

@@ -0,0 +1,58 @@
+import React, { FC } from "react";
+import { Button } from "../../../Buttons/Button";
+import { ButtonSize } from "../../../../core/utils/types/button";
+
+interface MaterialSecondaryButtonProps {
+  label: string;
+  size: ButtonSize;
+  onClick: () => void;
+  dataCy?: string;
+  ariaDescribedBy: string;
+}
+
+const MaterialSecondaryButton: FC<MaterialSecondaryButtonProps> = ({
+  label,
+  size,
+  onClick,
+  dataCy,
+  ariaDescribedBy
+}) => {
+  // If element is currently focused on, we would like to let users open it using enter
+  const handleKeyUp = (key: string) => {
+    if (key === "Enter") {
+      onClick();
+    }
+  };
+
+  if (size !== "small") {
+    return (
+      <Button
+        label={label}
+        buttonType="none"
+        variant="outline"
+        disabled={false}
+        collapsible={false}
+        size="large"
+        onClick={onClick}
+        dataCy={dataCy}
+        ariaDescribedBy={ariaDescribedBy}
+      />
+    );
+  }
+
+  return (
+    <button
+      className="link-tag text-small-caption material-manifestation-item__find capitalize-all btn-ui"
+      aria-describedby={ariaDescribedBy}
+      onClick={onClick}
+      onKeyUp={(e) => handleKeyUp(e.key)}
+      tabIndex={0}
+      type="button"
+      data-cy={dataCy}
+    >
+      {label}
+    </button>
+  );
+};
+
+export default MaterialSecondaryButton;

src/components/material/material-buttons/generic/MaterialSecondaryLink.tsx

@@ -0,0 +1,43 @@
+import React, { FC } from "react";
+import { ButtonSize } from "../../../../core/utils/types/button";
+import LinkButton from "../../../Buttons/LinkButton";
+
+interface MaterialSecondaryLinkProps {
+  label: string;
+  size: ButtonSize;
+  url: URL;
+  dataCy?: string;
+}
+
+const MaterialSecondaryLink: FC<MaterialSecondaryLinkProps> = ({
+  label,
+  size,
+  url,
+  dataCy
+}) => {
+  if (size !== "small") {
+    return (
+      <LinkButton
+        url={url}
+        buttonType="none"
+        variant="outline"
+        size="large"
+        dataCy={dataCy}
+      >
+        {label}
+      </LinkButton>
+    );
+  }
+
+  return (
+    <a
+      href={url.toString()}
+      className="link-tag text-small-caption material-manifestation-item__find capitalize-all btn-ui"
+      data-cy={dataCy}
+    >
+      {label}
+    </a>
+  );
+};
+
+export default MaterialSecondaryLink;

src/components/material/material-buttons/online/MaterialButtonOnlineExternal.tsx

@@ -1,3 +1,4 @@
+// TODO: Remember to clean this up for all paths that refer to eReolen
 import React, { useState, FC, useEffect } from "react";
 import {
   AccessUrl,
@@ -90,6 +91,7 @@ const MaterialButtonOnlineExternal: FC<MaterialButtonOnlineExternalProps> = ({
         return t("seeOnlineText");
     }
   };
+
   return (
     <LinkButton
       url={translatedUrl}

src/components/material/material-buttons/online/MaterialButtonsOnline.tsx

@@ -13,6 +13,7 @@ import MaterialButtonOnlineDigitalArticle from "./MaterialButtonOnlineDigitalArt
 import MaterialButtonOnlineExternal from "./MaterialButtonOnlineExternal";
 import MaterialButtonOnlineInfomediaArticle from "./MaterialButtonOnlineInfomediaArticle";
 import { ManifestationMaterialType } from "../../../../core/utils/types/material-type";
+import MaterialButtonsOnlineInternal from "./MaterialButtonsOnlineInternal";
 
 export interface MaterialButtonsOnlineProps {
   manifestations: Manifestation[];
@@ -38,6 +39,11 @@ const MaterialButtonsOnline: FC<MaterialButtonsOnlineProps> = ({
     });
   };
 
+  // Todo: Move logic for Player / Reader buttons / Links to here.
+  // if (condition) {
+  //   return <MaterialButtonsOnlineInternal manifestations={manifestations} />;
+  // }
+
   // Find 'Ereol' object or default to the first 'access' object
   const accessElement =
     manifestations[0].access.find((item) => item.__typename === "Ereol") ||
@@ -58,15 +64,23 @@ const MaterialButtonsOnline: FC<MaterialButtonsOnlineProps> = ({
     }
 
     return (
-      <MaterialButtonOnlineExternal
-        externalUrl={externalUrl}
-        origin={origin}
-        size={size}
-        trackOnlineView={trackOnlineView}
-        manifestations={manifestations}
-        dataCy={`${dataCy}-external`}
-        ariaLabelledBy={ariaLabelledBy}
-      />
+      <>
+        <MaterialButtonOnlineExternal
+          externalUrl={externalUrl}
+          origin={origin}
+          size={size}
+          trackOnlineView={trackOnlineView}
+          manifestations={manifestations}
+          dataCy={`${dataCy}-external`}
+          ariaLabelledBy={ariaLabelledBy}
+        />
+        {/* Todo: MaterialButtonsOnlineInternal should be in the todo at line 44  */}
+        <MaterialButtonsOnlineInternal
+          size={size}
+          manifestations={manifestations}
+          dataCy={`${dataCy}-publizon`}
+        />
+      </>
     );
   }