@internetarchive/ia-item-navigator 0.0.0-a10 → 0.0.0-a16

package/dist/test/ia-stub.js

@@ -1,4 +1,35 @@
-"use strict";
-// const parsed = JSON.parse(raw);
-// export default parsed;
+import { html } from 'lit-html';
+export class ItemStub {
+    constructor() {
+        this.rawResponse = '';
+        this.created = 1;
+        this.d1 = 'hello';
+        this.d2 = 'boop';
+        this.dir = 'whee';
+        this.files = [];
+        this.files_count = 0;
+        this.item_last_updated = 2020;
+        this.item_size = 111;
+        this.metadata = { identifier: 'foo' };
+        this.server = 'foo-server';
+        this.uniq = 2;
+        this.workable_servers = ['abc'];
+    }
+}
+export const shortcut = {
+    id: 'fullscreen',
+    icon: html `<i class="fas fullscreen-test"></i>`,
+};
+export const menuProvider = {
+    ...shortcut,
+    label: 'foo',
+    menuDetails: html `<div>foo</div>`,
+    selected: true,
+    followable: false,
+    href: 'https://archive.foo',
+    item: new ItemStub(),
+    baseHost: 'https://archive.foo',
+    subPrefix: 'bar',
+    updated: () => { },
+};
 //# sourceMappingURL=ia-stub.js.map

package/dist/test/ia-stub.js.map

@@ -1 +1 @@
-{"version":3,"file":"ia-stub.js","sourceRoot":"","sources":["../../test/ia-stub.ts"],"names":[],"mappings":";AAAA,kCAAkC;AAElC,yBAAyB","sourcesContent":["// const parsed = JSON.parse(raw);\n\n// export default parsed;\n"]}
+{"version":3,"file":"ia-stub.js","sourceRoot":"","sources":["../../test/ia-stub.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAMhC,MAAM,OAAO,QAAQ;IACnB;QACE,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;QACtB,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;QACjB,IAAI,CAAC,EAAE,GAAG,OAAO,CAAC;QAClB,IAAI,CAAC,EAAE,GAAG,MAAM,CAAC;QACjB,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC;QAClB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;QACrB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;QAC9B,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC;QACrB,IAAI,CAAC,QAAQ,GAAG,EAAE,UAAU,EAAE,KAAK,EAAc,CAAC;QAClD,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC;QAC3B,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;QACd,IAAI,CAAC,gBAAgB,GAAG,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC;CA+BF;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,EAAE,EAAE,YAAY;IAChB,IAAI,EAAE,IAAI,CAAA,qCAAqC;CACvB,CAAC;AAE3B,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,GAAG,QAAQ;IACX,KAAK,EAAE,KAAK;IACZ,WAAW,EAAE,IAAI,CAAA,gBAAgB;IACjC,QAAQ,EAAE,IAAI;IACd,UAAU,EAAE,KAAK;IACjB,IAAI,EAAE,qBAAqB;IAC3B,IAAI,EAAE,IAAI,QAAQ,EAAE;IACpB,QAAQ,EAAE,qBAAqB;IAC/B,SAAS,EAAE,KAAK;IAChB,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;CACO,CAAC","sourcesContent":["/* eslint-disable camelcase */\nimport {\n  MetadataResponse,\n  Metadata,\n  File,\n  Review,\n  SpeechMusicASREntry,\n} from '@internetarchive/search-service';\nimport { html } from 'lit-html';\nimport {\n  MenuShortcutInterface,\n  MenuProviderInterface,\n} from '../src/interfaces/menu-interfaces';\n\nexport class ItemStub implements MetadataResponse {\n  constructor() {\n    this.rawResponse = '';\n    this.created = 1;\n    this.d1 = 'hello';\n    this.d2 = 'boop';\n    this.dir = 'whee';\n    this.files = [];\n    this.files_count = 0;\n    this.item_last_updated = 2020;\n    this.item_size = 111;\n    this.metadata = { identifier: 'foo' } as Metadata;\n    this.server = 'foo-server';\n    this.uniq = 2;\n    this.workable_servers = ['abc'];\n  }\n\n  rawResponse: any;\n\n  created: number;\n\n  d1: string;\n\n  d2: string;\n\n  dir: string;\n\n  files: File[];\n\n  files_count: number;\n\n  item_last_updated: number;\n\n  item_size: number;\n\n  metadata: Metadata;\n\n  server: string;\n\n  uniq: number;\n\n  workable_servers: string[];\n\n  speech_vs_music_asr?: SpeechMusicASREntry[] | undefined;\n\n  reviews?: Review[] | undefined;\n}\n\nexport const shortcut = {\n  id: 'fullscreen',\n  icon: html`<i class=\"fas fullscreen-test\"></i>`,\n} as MenuShortcutInterface;\n\nexport const menuProvider = {\n  ...shortcut,\n  label: 'foo',\n  menuDetails: html`<div>foo</div>`,\n  selected: true,\n  followable: false,\n  href: 'https://archive.foo',\n  item: new ItemStub(),\n  baseHost: 'https://archive.foo',\n  subPrefix: 'bar',\n  updated: () => {},\n} as MenuProviderInterface;\n"]}

package/dist/test/no-theater-available.test.d.ts

@@ -0,0 +1 @@
+import '../src/no-theater-available';

package/dist/test/no-theater-available.test.js

@@ -0,0 +1,27 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import '../src/no-theater-available';
+describe('IANoTheaterAvailable', () => {
+    it('Fires `loadingStateUpdated` on identifier change', async () => {
+        const el = await fixture(html `<ia-no-theater-available
+        .identifier=${`foo`}
+      ></ia-no-theater-available>`);
+        let eventFired = false;
+        el.addEventListener('loadingStateUpdated', () => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            eventFired = true;
+        });
+        expect(eventFired).to.be.false;
+        el.identifier = 'bar';
+        await el.updateComplete;
+        expect(eventFired).to.be.true;
+    });
+    it('Has link to item download page', async () => {
+        var _a, _b;
+        const el = await fixture(html `<ia-no-theater-available
+        .identifier=${`foo`}
+      ></ia-no-theater-available>`);
+        expect(el.downloadUrl).to.equal('/download/foo');
+        expect((_b = (_a = el === null || el === void 0 ? void 0 : el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('a')) === null || _b === void 0 ? void 0 : _b.href).to.contain(el.downloadUrl);
+    });
+});
+//# sourceMappingURL=no-theater-available.test.js.map

package/dist/test/no-theater-available.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"no-theater-available.test.js","sourceRoot":"","sources":["../../test/no-theater-available.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,6BAA6B,CAAC;AAErC,QAAQ,CAAC,sBAAsB,EAAE,GAAG,EAAE;IACpC,EAAE,CAAC,kDAAkD,EAAE,KAAK,IAAI,EAAE;QAChE,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,IAAI,CAAA;sBACY,KAAK;kCACO,CAC7B,CAAC;QACF,IAAI,UAAU,GAAG,KAAK,CAAC;QACvB,EAAE,CAAC,gBAAgB,CAAC,qBAAqB,EAAE,GAAG,EAAE;YAC9C,6DAA6D;YAC7D,UAAU,GAAG,IAAI,CAAC;QACpB,CAAC,CAAC,CAAC;QACH,MAAM,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;QAE/B,EAAE,CAAC,UAAU,GAAG,KAAK,CAAC;QACtB,MAAM,EAAE,CAAC,cAAc,CAAC;QACxB,MAAM,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;IAChC,CAAC,CAAC,CAAC;IACH,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;;QAC9C,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,IAAI,CAAA;sBACY,KAAK;kCACO,CAC7B,CAAC;QACF,MAAM,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;QACjD,MAAM,CAAC,MAAA,MAAA,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,UAAU,0CAAE,aAAa,CAAC,GAAG,CAAC,0CAAE,IAAI,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC;IAC9E,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { html, fixture, expect } from '@open-wc/testing';\nimport { IANoTheaterAvailable } from '../src/no-theater-available';\nimport '../src/no-theater-available';\n\ndescribe('IANoTheaterAvailable', () => {\n  it('Fires `loadingStateUpdated` on identifier change', async () => {\n    const el = await fixture<IANoTheaterAvailable>(\n      html`<ia-no-theater-available\n        .identifier=${`foo`}\n      ></ia-no-theater-available>`\n    );\n    let eventFired = false;\n    el.addEventListener('loadingStateUpdated', () => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      eventFired = true;\n    });\n    expect(eventFired).to.be.false;\n\n    el.identifier = 'bar';\n    await el.updateComplete;\n    expect(eventFired).to.be.true;\n  });\n  it('Has link to item download page', async () => {\n    const el = await fixture<IANoTheaterAvailable>(\n      html`<ia-no-theater-available\n        .identifier=${`foo`}\n      ></ia-no-theater-available>`\n    );\n    expect(el.downloadUrl).to.equal('/download/foo');\n    expect(el?.shadowRoot?.querySelector('a')?.href).to.contain(el.downloadUrl);\n  });\n});\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-item-navigator",
-  "version": "0.0.0-a10",
+  "version": "0.0.0-a16",
   "description": "Internet Archive's Item Navigator, visually eplore an item's contents.",
   "author": "Internet Archive",
   "license": "AGPL-3.0-only",
@@ -21,7 +21,7 @@
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
   },
   "dependencies": {
-    "@internetarchive/ia-menu-slider": "^1.1.0",
+    "@internetarchive/ia-menu-slider": "^1.1.1",
     "@internetarchive/ia-sharing-options": "^0.1.3-alpha2",
     "@internetarchive/icon-ellipses": "^1.1.3",
     "@internetarchive/icon-share": "^1.1.3",
@@ -78,7 +78,8 @@
           "js": "never",
           "ts": "never"
         }
-      ]
+      ],
+      "import/no-duplicates": "off"
     }
   },
   "prettier": {

package/src/interfaces/custom-theater-interface.ts

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit-element';
+import { MetadataResponse } from '@internetarchive/search-service';
+import { ModalManager } from '@internetarchive/modal-manager';
+import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
+import {
+  MenuProviderInterface,
+  MenuShortcutInterface,
+} from './menu-interfaces';
+
+export interface CustomTheaterInterface extends LitElement {
+  baseHost?: string;
+  itemMD?: MetadataResponse;
+  menuProviders?: MenuProviderInterface[];
+  menuShortcuts?: MenuShortcutInterface[];
+  sideMenuOpen: boolean;
+
+  signedIn?: boolean | null;
+
+  sharedObserver?: SharedResizeObserver;
+  modal?: ModalManager;
+
+  emitLoadingStatusUpdate: (loaded: boolean) => void;
+
+  addMenuShortcut: (menuId: string) => void;
+  removeMenuShortcut: (menuId: string) => void;
+  sortMenuShortcuts: () => void;
+  emitMenuShortcutsUpdated: () => void;
+}

package/src/interfaces/event-interfaces.ts

@@ -1,36 +1,40 @@
-import { IntMenuProvider, IntMenuShortcut } from './menu-interfaces';
+import {
+  MenuProviderInterface,
+  MenuShortcutInterface,
+  MenuId,
+} from './menu-interfaces';
 
 /** Toggles Menu && Sets open panel */
-export interface IntManageSideMenuEvent extends CustomEvent {
+export interface ToggleSideMenuOpenEvent extends CustomEvent {
   type: 'updateSideMenu';
   detail: {
-    menuId: string | undefined | '';
+    menuId: MenuId | undefined | '';
     action: 'open' | 'toggle' | '';
   };
 }
 
 /** Sets open panel */
-export interface IntSetOpenMenuEvent extends CustomEvent {
+export interface ToggleSidePanelOpenEvent extends CustomEvent {
   type: 'menuTypeSelected';
   detail: {
-    id: string /** name of menu to open */;
+    id: MenuId | '';
   };
 }
 
 /** Sets menu order that is displayed */
-export interface IntSetMenuContentsEvent extends CustomEvent {
+export interface SetSideMenuContentsEvent extends CustomEvent {
   type: 'menuUpdated';
-  detail: IntMenuProvider[];
+  detail: MenuProviderInterface[];
 }
 
 /** Sets menu shortcuts that is displayed */
-export interface IntSetMenuShortcutsEvent extends CustomEvent {
+export interface SetSideMenuShortcutsEvent extends CustomEvent {
   type: 'menuUpdated';
-  detail: IntMenuShortcut[];
+  detail: MenuShortcutInterface[];
 }
 
 /** Toggles fullscreen mode */
-export interface IntManageFullscreenEvent extends CustomEvent {
+export interface ManageFullscreenEvent extends CustomEvent {
   type: 'ViewportInFullScreen';
   detail: {
     isFullScreen: boolean;
@@ -38,7 +42,7 @@ export interface IntManageFullscreenEvent extends CustomEvent {
 }
 
 /** Toggles loading view */
-export interface IntLoadingStateUpdatedEvent extends CustomEvent {
+export interface loadingStateUpdatedEvent extends CustomEvent {
   type: 'loadingStateUpdated';
   detail: {
     loaded: boolean;

package/src/interfaces/menu-interfaces.ts

@@ -1,14 +1,13 @@
 import { TemplateResult } from 'lit-html';
 import { MetadataResponse } from '@internetarchive/search-service';
 
-export interface IntMenuShortcut {
+export type MenuId = string;
+export interface MenuShortcutInterface {
   icon: TemplateResult;
-  id: string;
+  id: MenuId;
 }
 
-export interface IntMenuIconAndDetails extends IntMenuShortcut {
-  icon: TemplateResult;
-  id: string;
+export interface MenuDetailsInterface extends MenuShortcutInterface {
   label: string;
   menuDetails?: TemplateResult;
   selected?: boolean;
@@ -16,13 +15,13 @@ export interface IntMenuIconAndDetails extends IntMenuShortcut {
   href?: string;
 }
 
-export interface IntProviderArgs {
+export interface MenuProviderBaseConfigInterface {
   item: MetadataResponse;
   baseHost: string;
   subPrefix: string;
   updated?: any;
 }
-export interface IntMenuProvider
-  extends IntProviderArgs,
-    IntMenuIconAndDetails,
-    IntMenuShortcut {}
+export interface MenuProviderInterface
+  extends MenuProviderBaseConfigInterface,
+    MenuDetailsInterface,
+    MenuShortcutInterface {}

package/src/item-navigator.ts

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-duplicates */
 import {
   css,
   html,
@@ -8,33 +7,39 @@ import {
   state,
   query,
   PropertyValues,
+  CSSResult,
 } from 'lit-element';
 import { nothing, TemplateResult } from 'lit-html';
 import { MetadataResponse } from '@internetarchive/search-service';
 import {
   SharedResizeObserver,
-  SharedResizeObserverInterface,
   SharedResizeObserverResizeHandlerInterface,
 } from '@internetarchive/shared-resize-observer';
-// @ts-ignore
-import { IAMenuSlider } from '@internetarchive/ia-menu-slider';
 import '@internetarchive/ia-menu-slider';
 
-import { ModalManagerInterface } from '@internetarchive/modal-manager';
+import { ModalManager } from '@internetarchive/modal-manager';
 import '@internetarchive/icon-ellipses/icon-ellipses';
 import './loader';
 
 import {
-  IntManageSideMenuEvent,
-  IntSetOpenMenuEvent,
-  IntSetMenuContentsEvent,
-  IntSetMenuShortcutsEvent,
-  IntLoadingStateUpdatedEvent,
-  IntManageFullscreenEvent,
+  ToggleSideMenuOpenEvent,
+  ToggleSidePanelOpenEvent,
+  SetSideMenuContentsEvent,
+  SetSideMenuShortcutsEvent,
+  loadingStateUpdatedEvent,
+  ManageFullscreenEvent,
 } from './interfaces/event-interfaces';
 
-import { IntMenuProvider, IntMenuShortcut } from './interfaces/menu-interfaces';
-
+import {
+  MenuProviderInterface,
+  MenuShortcutInterface,
+  MenuId,
+} from './interfaces/menu-interfaces';
+import './no-theater-available';
+
+export enum ItemType {
+  BOOK = 'bookreader',
+}
 @customElement('ia-item-navigator')
 export class ItemNavigator
   extends LitElement
@@ -48,9 +53,9 @@ export class ItemNavigator
       return value as MetadataResponse;
     },
   })
-  item: MetadataResponse | undefined = undefined;
+  item?: MetadataResponse;
 
-  @property({ type: String }) itemType = '';
+  @property({ type: String }) itemType?: ItemType;
 
   @property({ type: String }) baseHost = 'archive.org';
 
@@ -64,66 +69,44 @@ export class ItemNavigator
   })
   signedIn = false;
 
-  @property({
-    type: Array,
-    hasChanged: (newVal: Array<object>, oldVal: Array<object>) => {
-      if (newVal !== oldVal) {
-        return true;
-      }
-      return false;
-    },
-  })
-  @property({ type: Array })
-  menuContents: IntMenuProvider[] = [];
+  @property({ type: Array }) menuContents: MenuProviderInterface[] = [];
 
-  @property({ type: Array }) menuShortcuts: IntMenuShortcut[] = [];
+  @property({ type: Array }) menuShortcuts: MenuShortcutInterface[] = [];
 
-  @property({ type: Boolean, reflect: true }) viewportInFullscreen = false;
+  @property({ type: Boolean, reflect: true, attribute: true })
+  viewportInFullscreen: boolean | null = null;
 
   @property({ type: Boolean }) menuOpened = false;
 
-  @property({ type: String }) openMenu = '';
+  @property({ type: String }) openMenu?: MenuId;
 
-  @property({ attribute: false }) modal?: ModalManagerInterface;
+  @property({ attribute: false }) modal?: ModalManager;
 
-  @property({ attribute: false })
-  sharedObserver?: SharedResizeObserverInterface;
+  @property({ attribute: false }) sharedObserver?: SharedResizeObserver;
 
-  @property({ type: Boolean, reflect: true }) loaded: boolean = false;
+  @property({ type: Boolean, reflect: true, attribute: true }) loaded:
+    | true
+    | null = null;
 
   @state() openMenuState: 'overlay' | 'shift' = 'shift';
 
   @query('#frame') private frame!: HTMLDivElement;
 
-  disconnectedCallback() {
-    this.sharedObserver?.removeObserver({
-      handler: this,
-      target: this.frame,
-    });
-  }
-
-  firstUpdated(pp: any): void {
-    console.log('first updated item-nav', this.modal, pp);
-    if (!this.modal) {
-      this.createModal();
-    }
+  @query('slot[name="theater-header"]') private headerSlot!: HTMLDivElement;
 
-    this.startResizeObserver();
+  disconnectedCallback() {
+    this.removeResizeObserver();
   }
 
   updated(changed: PropertyValues) {
-    if (changed.has('modal')) {
-      if (!this.modal) {
-        this.createModal();
-      }
-    }
     if (changed.has('sharedObserver')) {
-      if (!this.sharedObserver) {
-        this.startResizeObserver();
-      }
+      const oldObserver = changed.get('sharedObserver') as SharedResizeObserver;
+      oldObserver?.removeObserver(this.resizeObserverConfig);
+      this.setResizeObserver();
     }
   }
 
+  /** Shared observer */
   handleResize(entry: ResizeObserverEntry): void {
     const { width } = entry.contentRect;
     if (width <= 600) {
@@ -133,52 +116,87 @@ export class ItemNavigator
     this.openMenuState = 'shift';
   }
 
-  private startResizeObserver(): void {
-    if (!this.sharedObserver) {
-      this.sharedObserver = new SharedResizeObserver();
-    }
-    this.sharedObserver.addObserver({
+  private setResizeObserver(): void {
+    this.sharedObserver?.addObserver(this.resizeObserverConfig);
+  }
+
+  private removeResizeObserver(): void {
+    this.sharedObserver?.removeObserver(this.resizeObserverConfig);
+  }
+
+  get resizeObserverConfig(): {
+    handler: SharedResizeObserverResizeHandlerInterface;
+    target: Element;
+  } {
+    return {
       handler: this,
       target: this.frame,
-    });
+    };
   }
+  /** End shared observer */
 
   get loaderTitle() {
     return this.viewportInFullscreen ? 'Internet Archive' : '';
   }
 
+  get readerHeightStyle(): string {
+    const calcFSHeight = `calc(100vh - ${this.headerSlot?.offsetHeight}px)`;
+    return this.viewportInFullscreen ? `height: ${calcFSHeight}` : '';
+  }
+
+  get loadingArea() {
+    return html`
+      <div class="loading-area">
+        <div class="loading-view">
+          <ia-itemnav-loader .title=${this.loaderTitle}></ia-itemnav-loader>
+        </div>
+      </div>
+    `;
+  }
+
   render(): TemplateResult {
     const displayReaderClass = this.loaded ? '' : 'hide';
+    console.log('render selectedMenuId', this.selectedMenuId);
+    console.log('render openMenu', this.openMenu);
     return html`
       <div id="frame" class=${`${this.menuClass}`}>
-        <slot name="theater-header"></slot>
         <div class="menu-and-reader">
           ${this.shouldRenderMenu ? this.renderSideMenu : nothing}
-          <div id="reader" class=${displayReaderClass}>
+          <slot name="theater-header"></slot>
+          <div
+            id="reader"
+            class=${displayReaderClass}
+            style=${this.readerHeightStyle}
+          >
             ${this.renderViewport}
           </div>
-          ${!this.loaded
-            ? html` <div class="loading-area">
-                <div class="loading-view">
-                  <ia-itemnav-loader
-                    .title=${this.loaderTitle}
-                  ></ia-itemnav-loader>
-                </div>
-              </div>`
-            : nothing}
+          ${!this.loaded ? this.loadingArea : nothing}
         </div>
       </div>
     `;
   }
 
-  get BooksViewer(): TemplateResult {
+  get noTheaterView() {
+    return html`<ia-no-theater-available
+      .identifier=${this.item?.metadata?.identifier}
+      @loadingStateUpdated=${this.loadingStateUpdated}
+    ></ia-no-theater-available>`;
+  }
+
+  get theaterSlot() {
+    return html`
+      <slot name="theater-main" style=${this.readerHeightStyle}></slot>
+    `;
+  }
+
+  get booksViewer(): TemplateResult {
     const slotVisibility = !this.loaded ? 'opacity: 0;' : 'opacity: 1;';
 
     return html`
       <book-navigator
         .modal=${this.modal}
         .baseHost=${this.baseHost}
-        .book=${this.item}
+        .itemMD=${this.item}
         ?signedIn=${this.signedIn}
         ?sideMenuOpen=${this.menuOpened}
         .sharedObserver=${this.sharedObserver}
@@ -189,7 +207,7 @@ export class ItemNavigator
         @menuShortcutsUpdated=${this.setMenuShortcuts}
       >
         <div slot="theater-main" style=${slotVisibility}>
-          <slot name="theater-main"></slot>
+          ${this.theaterSlot}
         </div>
       </book-navigator>
     `;
@@ -199,35 +217,27 @@ export class ItemNavigator
     if (!this.item) {
       return nothing;
     }
-    if (this.itemType === 'bookreader') {
-      return this.BooksViewer;
+    if (this.itemType === ItemType.BOOK) {
+      return this.booksViewer;
     }
-    return nothing;
+    return this.noTheaterView;
   }
 
-  loadingStateUpdated(e: IntLoadingStateUpdatedEvent): void {
+  loadingStateUpdated(e: loadingStateUpdatedEvent): void {
     const { loaded } = e.detail;
-    this.loaded = !!loaded;
-    console.log('******loadingStateUpdated', e.detail);
-  }
-
-  /** Creates modal DOM & attaches to `<body>` */
-  private createModal(): void {
-    this.modal = document.createElement(
-      'modal-manager'
-    ) as ModalManagerInterface;
-    document.body.appendChild(this.modal);
+    this.loaded = loaded || null;
   }
-  /* End Modal management */
 
   /** Fullscreen Management */
-  manageViewportFullscreen(e: IntManageFullscreenEvent): void {
-    this.viewportInFullscreen = !!e.detail.isFullScreen;
-    this.dispatchEvent(
-      new CustomEvent('ViewportInFullScreen', {
-        detail: e.detail,
-      }) as IntManageFullscreenEvent
-    );
+  manageViewportFullscreen(e: ManageFullscreenEvent): void {
+    const fullscreenStatus = !!e.detail.isFullScreen;
+    this.viewportInFullscreen = !fullscreenStatus ? null : fullscreenStatus;
+
+    const event = new CustomEvent('fullscreenToggled', {
+      detail: e.detail,
+    }) as ManageFullscreenEvent;
+
+    this.dispatchEvent(event);
   }
   /** End Fullscreen Management */
 
@@ -244,22 +254,22 @@ export class ItemNavigator
     this.menuOpened = false;
   }
 
-  setOpenMenu(e: IntSetOpenMenuEvent): void {
+  setOpenMenu(e: ToggleSidePanelOpenEvent): void {
     const { id } = e.detail;
-    this.openMenu = id === this.openMenu ? '' : id;
+    this.openMenu = id !== this.openMenu ? id : undefined;
   }
 
-  setMenuContents(e: IntSetMenuContentsEvent): void {
+  setMenuContents(e: SetSideMenuContentsEvent): void {
     const updatedContents = [...e.detail];
     this.menuContents = updatedContents;
   }
 
-  setMenuShortcuts(e: IntSetMenuShortcutsEvent) {
+  setMenuShortcuts(e: SetSideMenuShortcutsEvent) {
     this.menuShortcuts = [...e.detail];
   }
 
   /** Toggles Side Menu & Sets viewable subpanel  */
-  manageSideMenuEvents(e: IntManageSideMenuEvent): void {
+  manageSideMenuEvents(e: ToggleSideMenuOpenEvent): void {
     const { menuId, action } = e.detail;
     if (!menuId) {
       return;
@@ -274,7 +284,6 @@ export class ItemNavigator
   }
 
   get menuToggleButton() {
-    // <ia-icon icon="ellipses" style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon>
     return html`
       <button
         class="toggle-menu"
@@ -290,16 +299,19 @@ export class ItemNavigator
     `;
   }
 
+  get selectedMenuId(): MenuId | '' {
+    return this.openMenu || '';
+  }
+
   get renderSideMenu(): TemplateResult {
     const drawerState = this.menuOpened ? '' : 'hidden';
-
     return html`
       <nav>
         <div class="minimized">${this.shortcuts} ${this.menuToggleButton}</div>
         <div id="menu" class=${drawerState}>
           <ia-menu-slider
             .menus=${this.menuContents}
-            .selectedMenu=${this.openMenu}
+            .selectedMenu=${this.selectedMenuId}
             @menuTypeSelected=${this.setOpenMenu}
             @menuSliderClosed=${this.closeMenu}
             manuallyHandleClose
@@ -312,7 +324,7 @@ export class ItemNavigator
   /** End Side menu */
 
   /** Menu Shortcuts */
-  openShortcut(selectedMenuId = ''): void {
+  openShortcut(selectedMenuId: MenuId = ''): void {
     this.openMenu = selectedMenuId;
     this.menuOpened = true;
   }
@@ -340,7 +352,7 @@ export class ItemNavigator
     return `${drawerState} ${fullscreenState} ${this.openMenuState}`;
   }
 
-  static get styles() {
+  static get styles(): CSSResult {
     const subnavWidth = css`var(--menuWidth, 320px)`;
     const transitionTiming = css`var(--animationTiming, 200ms)`;
     const transitionEffect = css`transform ${transitionTiming} ease-out`;
@@ -350,7 +362,6 @@ export class ItemNavigator
     return css`
       :host,
       #frame,
-      #reader,
       .menu-and-reader {
         min-height: inherit;
         height: inherit;
@@ -359,6 +370,11 @@ export class ItemNavigator
         display: block;
       }
 
+      slot {
+        display: block;
+        overflow: hidden;
+      }
+
       #frame {
         background-color: ${theaterBg};
         color-scheme: dark;
@@ -373,11 +389,6 @@ export class ItemNavigator
         z-index: 9;
       }
 
-      #frame.fullscreen,
-      #frame.fullscreen #reader {
-        height: 100vh;
-      }
-
       .loading-area {
         position: absolute;
         top: 0;
@@ -494,6 +505,7 @@ export class ItemNavigator
         transition: ${transitionEffect};
       }
 
+      .open.shift slot[name='theater-header'],
       .open.shift #reader {
         width: calc(100% - var(--menuWidth));
         float: right;
@@ -502,5 +514,3 @@ export class ItemNavigator
     `;
   }
 }
-
-customElements.define('ia-menu-slider', IAMenuSlider);