Reader / Player

src/apps/loan-list/modal/material-details-modal.tsx

@@ -1,3 +1,5 @@
+//  Todo: Fix infinite loop in MaterialDetailsModal
+//  Please see https://reload.atlassian.net/browse/DDFBRA-303
 import React, { FC, ReactNode } from "react";
 import Modal from "../../../core/utils/modal";
 import { useText } from "../../../core/utils/text";

src/apps/loan-list/modal/material-details.tsx

@@ -22,6 +22,8 @@ import { RequestStatus } from "../../../core/utils/types/request";
 import { RenewedLoanV2 } from "../../../core/fbs/model";
 import RenewalModalMessage from "../../../components/renewal/RenewalModalMessage";
 import { formatDate } from "../../../core/utils/helpers/date";
+import useGetWorkUrlFromPublizonIdentifier from "../../../core/utils/useGetWorkUrlFromPublizonIdentifier";
+import featureFlag from "../../../core/utils/featureFlag";
 
 interface MaterialDetailsProps {
   loan: LoanType | null;
@@ -33,14 +35,14 @@ const MaterialDetails: FC<MaterialDetailsProps & MaterialProps> = ({
   material,
   modalId
 }) => {
+  const { workUrl } = useGetWorkUrlFromPublizonIdentifier(loan?.identifier);
   const [renewingStatus, setRenewingStatus] = useState<RequestStatus>("idle");
   const [renewingResponse, setRenewingResponse] = useState<
     RenewedLoanV2[] | null
   >(null);
 
   const t = useText();
   const u = useUrls();
-  const ereolenMyPageUrl = u("ereolenMyPageUrl");
   const viewFeesAndCompensationRatesUrl = u("viewFeesAndCompensationRatesUrl");
 
   if (!loan) {
@@ -119,20 +121,34 @@ const MaterialDetails: FC<MaterialDetailsProps & MaterialProps> = ({
               renewalStatusList={renewalStatusList}
             />
           )}
-          {isDigital(loan) && (
+          {featureFlag.isActive("readerPlayer") &&
+          isDigital(loan) &&
+          workUrl ? (
             <div className="modal-details__buttons modal-details__buttons--hide-on-mobile">
               <Link
-                href={ereolenMyPageUrl}
+                href={workUrl}
                 className="btn-primary btn-filled btn-small arrow__hover--right-small"
               >
-                {t("materialDetailsGoToEreolenText")}
-                <img
-                  src={ExternalLinkIcon}
-                  className="btn-icon invert"
-                  alt=""
-                />
+                {t("materialDetailsGoToMaterialText")}
               </Link>
             </div>
+          ) : (
+            // Todo: Delete this else block after the readerPlayer feature flag is removed
+            isDigital(loan) && (
+              <div className="modal-details__buttons modal-details__buttons--hide-on-mobile">
+                <Link
+                  href={new URL("https://ereolen.dk/user/me")}
+                  className="btn-primary btn-filled btn-small arrow__hover--right-small"
+                >
+                  Gå til eReolen
+                  <img
+                    src={ExternalLinkIcon}
+                    className="btn-icon invert"
+                    alt=""
+                  />
+                </Link>
+              </div>
+            )
           )}
           {dueDate && materialIsOverdue(dueDate) && (
             <div className="modal-details__warning">
@@ -186,20 +202,35 @@ const MaterialDetails: FC<MaterialDetailsProps & MaterialProps> = ({
               renewalStatusList={renewalStatusList}
             />
           )}
-          {isDigital(loan) && (
+          {featureFlag.isActive("readerPlayer") &&
+          isDigital(loan) &&
+          workUrl ? (
             <div className="modal-details__buttons">
               <Link
-                href={ereolenMyPageUrl}
+                href={workUrl}
                 className="btn-primary btn-filled btn-small arrow__hover--right-small modal-details__buttons__full-width"
               >
-                {t("materialDetailsGoToEreolenText")}
-                <img
-                  src={ExternalLinkIcon}
-                  className="btn-icon invert"
-                  alt=""
-                />
+                {t("materialDetailsGoToMaterialText")}
               </Link>
             </div>
+          ) : (
+            // Todo: Delete this else block after the readerPlayer feature flag is removed
+            !featureFlag.isActive("readerPlayer") &&
+            isDigital(loan) && (
+              <div className="modal-details__buttons">
+                <Link
+                  href={new URL("https://ereolen.dk/user/me")}
+                  className="btn-primary btn-filled btn-small arrow__hover--right-small modal-details__buttons__full-width"
+                >
+                  Gå til eReolen test
+                  <img
+                    src={ExternalLinkIcon}
+                    className="btn-icon invert"
+                    alt=""
+                  />
+                </Link>
+              </div>
+            )
           )}
         </div>
       )}

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,9 @@ interface MaterialEntryTextProps {
   okButtonText: string;
   onlineLimitMonthAudiobookInfoText: string;
   onlineLimitMonthEbookInfoText: string;
+  onlineMaterialPlayerText: string;
+  onlineMaterialReaderText: string;
+  onlineMaterialTeaserText: string;
   openOrderAuthenticationErrorText: string;
   openOrderErrorMissingPincodeText: string;
   openOrderInvalidOrderText: string;
@@ -144,13 +149,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,26 @@ const meta: Meta<typeof MaterialEntry> = {
       description: "Online limit info text",
       control: { type: "text" }
     },
+    onlineMaterialPlayerText: {
+      description: "Material button online player text",
+      control: { type: "text" }
+    },
+    onlineMaterialReaderText: {
+      description: "Material button online reader 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 +720,7 @@ const meta: Meta<typeof MaterialEntry> = {
     ...serviceUrlArgs,
     ...globalTextArgs,
     ...globalConfigArgs,
+    audiobookText: "Audiobook",
     searchUrl: "/search",
     materialUrl: "/work/:workid",
     wid: "work-of:870970-basis:52557240",
@@ -708,6 +737,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 +759,7 @@ const meta: Meta<typeof MaterialEntry> = {
     editionsText: "Editions",
     fictionNonfictionText: "Fictional",
     detailsText: "Details",
+    ebookText: "E-book",
     reviewsText: "Reviews",
     detailsListTypeText: "Type",
     detailsListLanguageText: "Language",
@@ -771,6 +803,9 @@ 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",
+    onlineMaterialPlayerText: "Listen to @materialType",
+    onlineMaterialReaderText: "Read @materialType",
+    onlineMaterialTeaserText: "Try @materialType",
     approveReservationText: "Approve reservation",
     shiftText: "Change",
     reservationDetailsPickUpAtTitleText: "Pick up at",

src/apps/material/material.tsx

@@ -38,6 +38,9 @@ import {
 } from "./helper";
 import MaterialDisclosure from "./MaterialDisclosure";
 import ReservationFindOnShelfModals from "./ReservationFindOnShelfModals";
+import PlayerModal from "../../components/material/player-modal/PlayerModal";
+import useReaderPlayer from "../../core/utils/useReaderPlayer";
+import featureFlag from "../../core/utils/featureFlag";
 
 export interface MaterialProps {
   wid: WorkId;
@@ -54,6 +57,11 @@ const Material: React.FC<MaterialProps> = ({ wid }) => {
   const { data: userData } = usePatronData();
   const [isUserBlocked, setIsUserBlocked] = useState<boolean | null>(null);
   const { track } = useStatistics();
+  const {
+    type: readerPlayerType,
+    identifier,
+    orderId
+  } = useReaderPlayer(selectedManifestations);
 
   useEffect(() => {
     setIsUserBlocked(!!(userData?.patron && isBlocked(userData.patron)));
@@ -170,7 +178,6 @@ const Material: React.FC<MaterialProps> = ({ wid }) => {
             setSelectedPeriodical={setSelectedPeriodical}
           />
         ))}
-
         {infomediaIds.length > 0 && !isAnonymous() && !isUserBlocked && (
           <InfomediaModal
             selectedManifestations={selectedManifestations}
@@ -193,6 +200,13 @@ const Material: React.FC<MaterialProps> = ({ wid }) => {
             setSelectedPeriodical={setSelectedPeriodical}
           />
         )}
+        {featureFlag.isActive("readerPlayer") &&
+          readerPlayerType === "player" && (
+            <>
+              {identifier && <PlayerModal identifier={identifier} />}
+              {orderId && <PlayerModal orderId={orderId} />}
+            </>
+          )}
       </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/MaterialAvailabilityText/online/MaterialAvailabilityTextOnline.tsx

@@ -9,6 +9,7 @@ import { useText } from "../../../../core/utils/text";
 import MaterialAvailabilityTextParagraph from "../generic/MaterialAvailabilityTextParagraph";
 import { ManifestationMaterialType } from "../../../../core/utils/types/material-type";
 import { AvailabilityTextMap, getAvailabilityText } from "./helper";
+import { playerTypes, readerTypes } from "../../../reader-player/helper";
 
 interface MaterialAvailabilityTextOnlineProps {
   isbns: string[];
@@ -43,16 +44,26 @@ const MaterialAvailabilityTextOnline: React.FC<
   } = libraryProfileData;
 
   const availabilityTextMap: AvailabilityTextMap = {
-    [ManifestationMaterialType.ebook]: {
-      text: "onlineLimitMonthEbookInfoText",
-      count: totalEbookLoans,
-      limit: maxConcurrentEbookLoansPerBorrower
-    },
-    [ManifestationMaterialType.audioBook]: {
-      text: "onlineLimitMonthAudiobookInfoText",
-      count: totalAudioLoans,
-      limit: maxConcurrentAudioLoansPerBorrower
-    },
+    ...readerTypes.reduce((acc, type) => {
+      return {
+        ...acc,
+        [type]: {
+          text: "onlineLimitMonthEbookInfoText",
+          count: totalEbookLoans,
+          limit: maxConcurrentEbookLoansPerBorrower
+        }
+      };
+    }, {}),
+    ...playerTypes.reduce((acc, type) => {
+      return {
+        ...acc,
+        [type]: {
+          text: "onlineLimitMonthAudiobookInfoText",
+          count: totalAudioLoans,
+          limit: maxConcurrentAudioLoansPerBorrower
+        }
+      };
+    }, {}),
     materialIsIncluded: {
       text: "materialIsIncludedText"
     }