Remove / Move Reader component

In the new architecture, `Reader` is now a standalone app.

Additionally I also found that there is no reason to wrap the stories in `Store`

src/apps/material/material.tsx

@@ -40,7 +40,7 @@ import {
 import MaterialDisclosure from "./MaterialDisclosure";
 import ReservationFindOnShelfModals from "./ReservationFindOnShelfModals";
 import ReaderModal from "../../components/material/Reader-modal/ReaderModal";
-import { hasReaderTeaser } from "../../components/reader-player/helper";
+import { hasReaderTeaser } from "../reader/helper";
 
 export interface MaterialProps {
   wid: WorkId;

src/apps/reader/Reader.entry.tsx

@@ -2,13 +2,10 @@ import React from "react";
 import { withConfig } from "../../core/utils/config";
 import { withUrls } from "../../core/utils/url";
 import { withText } from "../../core/utils/text";
-import Reader from "./Reader";
+import Reader, { ReaderType } from "./Reader";
 
-// interface ReaderEntryTextProps {}
-// interface ReaderEntryConfigProps {}
-
-const ReaderEntry: React.FC = () => {
-  return <Reader />;
+const ReaderEntry: React.FC<ReaderType> = ({ identifier, orderId }) => {
+  return <Reader identifier={identifier} orderId={orderId} />;
 };
 
 export default withConfig(withUrls(withText(ReaderEntry)));

src/apps/reader/Reader.stories.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import Reader from "./Reader.entry";
 
@@ -18,8 +19,11 @@ export default meta;
 
 type Story = StoryObj<typeof Reader>;
 
-export const Primary: Story = {
-  args: {
-    ...serviceUrlArgs
-  }
+export const WithIdentifier: Story = {
+  render: () => <Reader identifier="9788793681095" />
+};
+
+// Works only if the matrial is reserved
+export const WithOrderId: Story = {
+  render: () => <Reader orderId="97cb3a6f-e23b-41ad-97ca-e939541feba7" />
 };

src/apps/reader/Reader.tsx

@@ -1,7 +1,55 @@
-import React from "react";
+import React, { CSSProperties, useEffect } from "react";
+import { appendAsset, readerAssets, removeAppendedAssets } from "./helper";
 
-const Reader = () => {
-  return <div>Reader React</div>;
+export type ReaderType = {
+  identifier?: string;
+  orderId?: string;
+};
+
+const Reader: React.FC<ReaderType> = ({ identifier, orderId }: ReaderType) => {
+  useEffect(() => {
+    readerAssets.forEach(appendAsset);
+
+    return () => {
+      removeAppendedAssets();
+    };
+  }, [identifier, orderId]);
+
+  const readerStyles: CSSProperties = {
+    height: "100vh"
+  };
+
+  if (orderId) {
+    return (
+      <div
+        style={readerStyles}
+        id="pubhub-reader"
+        // eslint-disable-next-line react/no-unknown-property
+        order-id={orderId}
+        // eslint-disable-next-line react/no-unknown-property, no-script-url
+        close-href="javascript:window.history.back()"
+      />
+    );
+  }
+
+  if (identifier) {
+    return (
+      <div
+        style={readerStyles}
+        id="pubhub-reader"
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        // eslint-disable-next-line react/no-unknown-property
+        identifier={identifier}
+        // eslint-disable-next-line react/no-unknown-property, no-script-url
+        close-href="javascript:window.history.back()"
+      />
+    );
+  }
+
+  // eslint-disable-next-line no-console
+  console.warn("No identifier or orderId provided for the Reader app.");
+  return null;
 };
 
 export default Reader;

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

@@ -12,7 +12,7 @@ import { ManifestationMaterialType } from "../../../../core/utils/types/material
 import LinkButton from "../../../Buttons/LinkButton";
 import MaterialButtonReaderTeaser from "./MaterialButtonReaderTeaser";
 import { getManifestationIsbn } from "../../../../apps/material/helper";
-import { hasReaderTeaser } from "../../../reader-player/helper";
+import { hasReaderTeaser } from "../../../../apps/reader/helper";
 
 export interface MaterialButtonOnlineExternalProps {
   externalUrl: string;