DDFBRA-184 - Anonymous and logged in user can try audiobook

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;
@@ -145,14 +147,16 @@ interface MaterialEntryTextProps {
   outOfText: string;
   periodicalSelectEditionText: string;
   periodicalSelectYearText: string;
-  reservationDetailsPickUpAtTitleText: string;
+  playerModalCloseButtonText: string;
+  playerModalDescriptionText: string;
   queueText: string;
   ratingIsText: string;
   readArticleText: string;
   readerModalDescriptionText: 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" }
@@ -303,6 +315,10 @@ const meta: Meta<typeof MaterialEntry> = {
       description: "Approve reservation",
       control: { type: "text" }
     },
+    audiobookText: {
+      description: "Audiobook",
+      control: { type: "text" }
+    },
     shiftText: {
       description: "Change",
       control: { type: "text" }
@@ -700,6 +716,7 @@ const meta: Meta<typeof MaterialEntry> = {
     ...serviceUrlArgs,
     ...globalTextArgs,
     ...globalConfigArgs,
+    audiobookText: "Audiobook",
     searchUrl: "/search",
     materialUrl: "/work/:workid",
     wid: "work-of:870970-basis:52557240",
@@ -716,6 +733,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",
@@ -736,6 +755,7 @@ const meta: Meta<typeof MaterialEntry> = {
     editionsText: "Editions",
     fictionNonfictionText: "Fictional",
     detailsText: "Details",
+    ebookText: "E-book",
     reviewsText: "Reviews",
     detailsListTypeText: "Type",
     detailsListLanguageText: "Language",
@@ -780,7 +800,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 e-book",
+    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

@@ -2,7 +2,7 @@ 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 "./Reader";
+import Reader, { ReaderType } from "../../components/reader-player/Reader";
 
 const ReaderEntry: React.FC<ReaderType> = ({ identifier, orderId }) => {
   return <Reader identifier={identifier} orderId={orderId} />;

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

@@ -12,7 +12,13 @@ import { ManifestationMaterialType } from "../../../../core/utils/types/material
 import LinkButton from "../../../Buttons/LinkButton";
 import MaterialSecondaryLink from "../generic/MaterialSecondaryLink";
 import { getManifestationIsbn } from "../../../../apps/material/helper";
-import { hasReaderTeaser } from "../../../../apps/reader/helper";
+import {
+  hasPlayerManifestation,
+  hasReaderManifestation
+} from "../../../reader-player/helper";
+import { useModalButtonHandler } from "../../../../core/utils/modal";
+import MaterialSecondaryButton from "../generic/MaterialSecondaryButton";
+import { playerModalId } from "../../player-modal/helper";
 
 export interface MaterialButtonOnlineExternalProps {
   externalUrl: string;
@@ -53,6 +59,7 @@ const MaterialButtonOnlineExternal: FC<MaterialButtonOnlineExternalProps> = ({
   dataCy = "material-button-online-external",
   ariaLabelledBy
 }) => {
+  const { open } = useModalButtonHandler();
   const [translatedUrl, setTranslatedUrl] = useState<URL>(new URL(externalUrl));
   const [urlWasTranslated, setUrlWasTranslated] = useState<boolean | null>(
     null
@@ -93,6 +100,7 @@ const MaterialButtonOnlineExternal: FC<MaterialButtonOnlineExternalProps> = ({
         return t("seeOnlineText");
     }
   };
+
   return (
     <>
       <LinkButton
@@ -108,9 +116,11 @@ const MaterialButtonOnlineExternal: FC<MaterialButtonOnlineExternalProps> = ({
         {label(origin, getMaterialTypes(manifestations))}
       </LinkButton>
 
-      {hasReaderTeaser(manifestations) && (
+      {hasReaderManifestation(manifestations) && (
         <MaterialSecondaryLink
-          label={t("onlineMaterialTeaserText")}
+          label={t("onlineMaterialTeaserText", {
+            placeholders: { "@materialType": t("ebookText") }
+          })}
           size={size || "large"}
           url={
             new URL(
@@ -121,6 +131,20 @@ const MaterialButtonOnlineExternal: FC<MaterialButtonOnlineExternalProps> = ({
           dataCy={`${dataCy}-teaser`}
         />
       )}
+
+      {hasPlayerManifestation(manifestations) && (
+        <MaterialSecondaryButton
+          label={t("onlineMaterialTeaserText", {
+            placeholders: { "@materialType": t("audiobookText") }
+          })}
+          size={size || "large"}
+          onClick={() => {
+            open(playerModalId(getManifestationIsbn(manifestations[0])));
+          }}
+          dataCy={dataCy}
+          ariaDescribedBy={t("onlineMaterialTeaserText")}
+        />
+      )}
     </>
   );
 };

src/components/material/player-modal/PlayerModal.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import Modal from "../../../core/utils/modal";
+import { useText } from "../../../core/utils/text";
+import Player, { PlayerType } from "../../reader-player/Player";
+import { playerModalId } from "./helper";
+
+const PlayerModal = ({ identifier, orderId }: PlayerType) => {
+  const t = useText();
+
+  return (
+    <Modal
+      dataCy="player-modal"
+      // Todo: Find a better way to generate the modalId
+      modalId={playerModalId(identifier || orderId || "")}
+      screenReaderModalDescriptionText={t("playerModalDescriptionText")}
+      closeModalAriaLabelText={t("playerModalCloseButtonText")}
+    >
+      <Player identifier={identifier} />
+    </Modal>
+  );
+};
+
+export default PlayerModal;

src/components/material/player-modal/helper.ts

@@ -0,0 +1,7 @@
+import { constructModalId } from "../../../core/utils/helpers/modal-helpers";
+
+export const playerModalId = (id: string) => {
+  return constructModalId("player-modal", [id]);
+};
+
+export default {};

src/components/reader-player/Player.stories.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import Player from "./Player";
+
+const meta: Meta<typeof Player> = {
+  title: "ReaderPlayer / Player",
+  component: Player,
+  argTypes: {
+    identifier: {
+      control: { type: "text" }
+    },
+    orderId: {
+      control: { type: "text" }
+    }
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Player>;
+
+export const WithIdentifier: Story = {
+  render: () => <Player identifier="9788702366600" />
+};
+
+// Works only if the matrial is reserved
+export const WithOrderId: Story = {
+  render: () => <Player orderId="" />
+};

src/components/reader-player/Player.tsx

@@ -0,0 +1,48 @@
+import React, { useEffect } from "react";
+import { appendAsset, playerAssets, removeAppendedAssets } from "./helper";
+
+export type PlayerType =
+  | {
+      identifier?: string;
+      orderId?: never;
+    }
+  | {
+      identifier?: never;
+      orderId?: string;
+    };
+
+const Player: React.FC<PlayerType> = ({ identifier, orderId }) => {
+  useEffect(() => {
+    playerAssets.forEach(appendAsset);
+
+    return () => {
+      removeAppendedAssets();
+    };
+  }, [identifier, orderId]);
+
+  if (orderId) {
+    return (
+      <iframe
+        title="Player"
+        className="player"
+        src={`https://play.pubhub.dk/index141.html?o=${orderId}`}
+      />
+    );
+  }
+
+  if (identifier) {
+    return (
+      <iframe
+        title="Player"
+        className="player"
+        src={`https://play.pubhub.dk/index141.html?i=${identifier}`}
+      />
+    );
+  }
+
+  // eslint-disable-next-line no-console
+  console.warn("No identifier or orderId provided for the Player app.");
+  return null;
+};
+
+export default Player;

src/apps/reader/Reader.stories.tsx → src/components/reader-player/Reader.stories.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import Reader from "./Reader.entry";
+import Reader from "./Reader";
 
 const meta: Meta<typeof Reader> = {
-  title: "Apps / Reader",
+  title: "ReaderPlayer / Reader",
   component: Reader,
   argTypes: {
     identifier: {

src/apps/reader/helper.ts → src/components/reader-player/helper.ts

@@ -8,6 +8,14 @@ type AssetType = {
   id: string;
 };
 
+export const playerAssets: AssetType[] = [
+  {
+    src: "https://play.pubhub.dk/1.3.0/js/player-kernel.min.js",
+    type: "script",
+    id: "player-kernel-js"
+  }
+];
+
 export const readerAssets: AssetType[] = [
   {
     src: "https://reader.pubhub.dk/2.2.0/js/chunk-vendors.js",
@@ -64,7 +72,7 @@ export const removeAppendedAssets = () => {
   });
 };
 
-export const hasReaderTeaser = (manifestations: Manifestation[]) => {
+export const hasReaderManifestation = (manifestations: Manifestation[]) => {
   const materialTypes = getMaterialTypes(manifestations);
   return materialTypes.some(
     (type) =>
@@ -75,4 +83,15 @@ export const hasReaderTeaser = (manifestations: Manifestation[]) => {
   );
 };
 
+export const hasPlayerManifestation = (manifestations: Manifestation[]) => {
+  const materialTypes = getMaterialTypes(manifestations);
+  return materialTypes.some(
+    (type) =>
+      type === ManifestationMaterialType.audioBook ||
+      type === ManifestationMaterialType.podcast ||
+      type === ManifestationMaterialType.musicOnline ||
+      type === ManifestationMaterialType.audioBookTape
+  );
+};
+
 export default {};

src/core/utils/types/material-type.ts

@@ -16,7 +16,10 @@ export const enum ManifestationMaterialType {
   magazine = "tidsskrift",
   pictureBookOnline = "billedbog (online)",
   animatedSeriesOnline = "tegneserie (online)",
-  yearBookOnline = "årbog (online)"
+  yearBookOnline = "årbog (online)",
+  podcast = "podcast",
+  musicOnline = "musik (online)",
+  audioBookTape = "lydbog (bånd)"
 }
 
 export const enum AutosuggestCategory {