@internetarchive/ia-item-navigator 1.1.1 → 2.0.0-alpha2

package/demo/app-root.ts

@@ -8,17 +8,123 @@ import {
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
 import { ModalManager } from '@internetarchive/modal-manager';
 import '@internetarchive/modal-manager';
-import { ItemNavigator } from '../src/item-navigator';
-import '../src/item-navigator';
+import type { ItemNavigator } from '../src/iaux-item-navigator';
+import '../src/iaux-item-navigator';
+import '../src/menus/iaux-sharing-options';
 import {
   MenuShortcutInterface,
   MenuProviderInterface,
 } from '../src/interfaces/menu-interfaces';
-
+import { iauxShareIcon } from '../src/menus/iaux-sharing-options';
+import { viewableFilesIcon } from '../src/menus/iaux-viewable-files';
+
+const fileList = [
+  {
+    url_path: '/details/masterbookofamericanfolksong00shep',
+    file_subprefix: '01-The Master Book of American Folk Song',
+    title: 'The Master Book of American Folk Song',
+    file_source: '/01-The Master Book of American Folk Song_jp2.zip',
+    orig_sort: 0,
+  },
+  {
+    url_path:
+      '/details/masterbookofamericanfolksong00shep/02-Encyclopedia%20of%20the%20Traditional%20Music%20and%20Folk%20Songs%20of%20the%20United%20States%20Index%20A%20through%20M',
+    file_subprefix:
+      '02-Encyclopedia of the Traditional Music and Folk Songs of the United States Index A through M',
+    title:
+      'Encyclopedia of the Traditional Music and Folk Songs of the United States Index A through M',
+    file_source:
+      '/02-Encyclopedia of the Traditional Music and Folk Songs of the United States Index A through M_jp2.zip',
+    orig_sort: 1,
+  },
+  {
+    url_path:
+      '/details/masterbookofamericanfolksong00shep/03-Encyclopedia%20of%20the%20Traditional%20Music%20and%20Folk%20Songs%20of%20the%20United%20States%20Index%20N%20through%20Z',
+    file_subprefix:
+      '03-Encyclopedia of the Traditional Music and Folk Songs of the United States Index N through Z',
+    title:
+      'Encyclopedia of the Traditional Music and Folk Songs of the United States Index N through Z',
+    file_source:
+      '/03-Encyclopedia of the Traditional Music and Folk Songs of the United States Index N through Z_jp2.zip',
+    orig_sort: 2,
+  },
+  {
+    url_path:
+      '/details/masterbookofamericanfolksong00shep/04-Letters%20to%20Riley%20Shepard',
+    file_subprefix: '04-Letters to Riley Shepard',
+    title: 'Letters to Riley Shepard',
+    file_source: '/04-Letters to Riley Shepard_jp2.zip',
+    orig_sort: 3,
+  },
+  {
+    url_path:
+      '/details/masterbookofamericanfolksong00shep/Master%20Book%20of%20American%20Folk%20Song%20Vol.%201',
+    file_subprefix: 'Master Book of American Folk Song Vol. 1',
+    title: 'Master Book of American Folk Song Vol. 1.pdf',
+    file_source: '/Master Book of American Folk Song Vol. 1_jp2.zip',
+    orig_sort: 4,
+  },
+  {
+    url_path:
+      '/details/masterbookofamericanfolksong00shep/Master%20Book%20of%20American%20Folk%20Song%20Vol.%202',
+    file_subprefix: 'Master Book of American Folk Song Vol. 2',
+    title: 'Master Book of American Folk Song Vol. 2.pdf',
+    file_source: '/Master Book of American Folk Song Vol. 2_jp2.zip',
+    orig_sort: 5,
+  },
+  {
+    url_path:
+      '/details/masterbookofamericanfolksong00shep/Master%20Book%20of%20American%20Folk%20Song%20Vol.%203',
+    file_subprefix: 'Master Book of American Folk Song Vol. 3',
+    title: 'Master Book of American Folk Song Vol. 3.pdf',
+    file_source: '/Master Book of American Folk Song Vol. 3_jp2.zip',
+    orig_sort: 6,
+  },
+  {
+    url_path:
+      '/details/masterbookofamericanfolksong00shep/Master%20Book%20of%20American%20Folk%20Song%20Vol.%204',
+    file_subprefix: 'Master Book of American Folk Song Vol. 4',
+    title: 'Master Book of American Folk Song Vol. 4.pdf',
+    file_source: '/Master Book of American Folk Song Vol. 4_jp2.zip',
+    orig_sort: 7,
+  },
+  {
+    url_path:
+      '/details/masterbookofamericanfolksong00shep/Master%20Book%20of%20American%20Folk%20Song%20Vol.%205',
+    file_subprefix: 'Master Book of American Folk Song Vol. 5',
+    title: 'Master Book of American Folk Song Vol. 5',
+    file_source: '/Master Book of American Folk Song Vol. 5_jp2.zip',
+    orig_sort: 8,
+  },
+  {
+    url_path:
+      '/details/masterbookofamericanfolksong00shep/Master%20Book%20of%20American%20Folk%20Song%20Vol.%206',
+    file_subprefix: 'Master Book of American Folk Song Vol. 6',
+    title: 'Master Book of American Folk Song Vol. 6.pdf',
+    file_source: '/Master Book of American Folk Song Vol. 6_jp2.zip',
+    orig_sort: 9,
+  },
+  {
+    url_path:
+      '/details/masterbookofamericanfolksong00shep/Master%20Book%20of%20American%20Folk%20Song%20Vol.%207',
+    file_subprefix: 'Master Book of American Folk Song Vol. 7',
+    title: 'Master Book of American Folk Song Vol. 7.pdf',
+    file_source: '/Master Book of American Folk Song Vol. 7_jp2.zip',
+    orig_sort: 10,
+  },
+  {
+    url_path:
+      '/details/masterbookofamericanfolksong00shep/Master%20Book%20of%20American%20Folk%20Song%20Vol.%208',
+    file_subprefix: 'Master Book of American Folk Song Vol. 8',
+    title: 'Master Book of American Folk Song Vol. 8.pdf',
+    file_source: '/Master Book of American Folk Song Vol. 8_jp2.zip',
+    orig_sort: 11,
+  },
+];
 @customElement('app-root')
 export class AppRoot extends LitElement {
   /**
-   * Example controller to connect to `<ia-item-navigator>`
+   * Example controller to connect to `<iaux-item-navigator>`
    */
   @property({ type: Object }) itemMD?: MetadataResponse;
 
@@ -32,21 +138,28 @@ export class AppRoot extends LitElement {
   @property({ type: Array, attribute: false })
   menuShortcuts: MenuShortcutInterface[] = [];
 
-  @property({ reflect: true, attribute: true }) fullscreen: boolean | null =
-    null;
-
-  @property({ reflect: true, attribute: true }) headerOn: true | null = null;
+  @property({ reflect: true, attribute: true, type: Boolean }) fullscreen:
+    | boolean
+    | null = null;
 
-  @property({ reflect: true, attribute: true }) loaded: true | null = true;
+  @property({ reflect: true, attribute: true, type: Boolean }) headerOn:
+    | true
+    | null = null;
 
-  @property({ reflect: true, attribute: true }) showPlaceholder: true | null =
-    null;
+  @property({ reflect: true, attribute: true, type: Boolean }) loaded:
+    | true
+    | null = null;
 
-  @property({ reflect: true, attribute: true }) showTheaterExample:
+  @property({ reflect: true, attribute: true, type: Boolean }) showPlaceholder:
     | true
-    | null = true;
+    | null = null;
 
-  @query('ia-item-navigator') private itemNav!: ItemNavigator;
+  @property({ reflect: true, attribute: true, type: Boolean })
+  showTheaterExample: true | null = null;
+
+  @property({ type: Array }) fileListToDisplay: any[] = fileList;
+
+  @query('iaux-item-navigator') private itemNav!: ItemNavigator;
 
   @query('modal-manager') modalMgr!: ModalManager;
 
@@ -66,11 +179,20 @@ export class AppRoot extends LitElement {
     if (changed.has('itemMD')) {
       this.fullscreenCheck();
     }
+
+    if (changed.has('fileList')) {
+      this.drawMenus();
+    }
   }
 
   async fetchItemMD() {
     const searchService = SearchService.default;
-    const mdResponse = await searchService.fetchMetadata('ux-team-books');
+
+    // masterbookofamericanfolksong00shep => multiple files
+    // ux-team-books => item
+    const mdResponse = await searchService.fetchMetadata(
+      'masterbookofamericanfolksong00shep',
+    );
 
     if (mdResponse.error) {
       console.log('MD Fetch error: ', mdResponse.error);
@@ -82,6 +204,7 @@ export class AppRoot extends LitElement {
 
     console.log('mdResponse.success', JSON.stringify(mdResponse.success));
     this.itemMD = mdResponse.success;
+    this.toggleTheaterExample();
   }
 
   get theaterReady(): boolean {
@@ -106,7 +229,7 @@ export class AppRoot extends LitElement {
     }
   }
 
-  /** toggles attr: `<ia-item-navigator viewportinfullscreen>` */
+  /** toggles attr: `<iaux-item-navigator viewportinfullscreen>` */
   fullscreenCheck(): void {
     if (this.showFullscreen && this.itemNav) {
       this.fullscreen = true;
@@ -182,15 +305,54 @@ export class AppRoot extends LitElement {
     // turn off placeholder
     this.showPlaceholder = null;
     this.showTheaterExample = true;
+    this.drawMenus();
+  }
+
+  drawMenus() {
+    const shareMenu = {
+      icon: iauxShareIcon,
+      label: 'Share this item',
+      id: 'share',
+      component: html`<iaux-sharing-options
+        .identifier=${this.itemMD?.metadata.identifier || 'ux-team-books'}
+        .type=${`book`}
+        .creator=${`UX Team`}
+        .description=${'list of test books'}
+        .baseHost=${'archive.org'}
+        .fileSubPrefix=${''}
+      ></iaux-sharing-options>`,
+    } as unknown as MenuProviderInterface;
+
+    const filesNewArr = [...fileList];
+    const viewableFilesMenu = {
+      id: 'viewable-files',
+      icon: viewableFilesIcon,
+      label: `Viewable Files (${fileList.length})`,
+      baseHost: 'archive.org',
+      item: this.itemMD as MetadataResponse,
+      subPrefix: '',
+      // sorter
+      actionButton: html`<iaux-sort-viewable-files
+        @fileListSorted=${(e: CustomEvent) => this.sortFilesCallback(e)}
+        .fileListRaw=${fileList}
+      ></iaux-sort-viewable-files>`,
+      component: html`<iaux-viewable-files
+        .fileList=${filesNewArr}
+      ></iaux-viewable-files> `,
+    };
+
+    this.menuContents = [viewableFilesMenu, shareMenu];
+    this.menuShortcuts = [viewableFilesMenu, shareMenu];
+  }
 
-    const x = {
-      icon: html`<p style="color: red">Allo</p>`,
-      id: 'a',
-      label: 'Hello world',
-      menuDetails: html`<h3>Wheee!</h3>`,
-    } as any;
-    this.menuContents = [x];
-    this.menuShortcuts = [x];
+  async sortFilesCallback(e: CustomEvent) {
+    const { sortType, sortedFiles } = e.detail;
+    this.fileListToDisplay = sortedFiles;
+    console.log('fileListSorted', { sortType, sortedFiles });
+    await this.updateComplete;
+    console.log('fileListSortedasyncd', { sortType, sortedFiles });
+    this.drawMenus();
+    // debugger;
   }
 
   /** Views */
@@ -200,7 +362,7 @@ export class AppRoot extends LitElement {
         <div class="theater-example">
           <img
             alt="cat theater"
-            src="https://archive.org/download/encyclopediaofca0000poll_t2e2/__ia_thumb.jpg"
+            src="https://archive.org/download/masterbookofamericanfolksong00shep/__ia_thumb.jpg"
           />
           <h3>Welcome to Cat Theater</h3>
         </div>
@@ -256,7 +418,7 @@ export class AppRoot extends LitElement {
     return html`
       <h1>theater, in page</h1>
       <section>
-        <ia-item-navigator
+        <iaux-item-navigator
           baseHost="https://archive.org"
           .item=${this.itemMD}
           .modal=${this.modalMgr}
@@ -269,7 +431,7 @@ export class AppRoot extends LitElement {
         >
           ${this.headerOn ? this.headerExample : ''}
           ${this.showTheaterExample ? this.theaterExample : ''}
-        </ia-item-navigator>
+        </iaux-item-navigator>
       </section>
       <div>
         <button @click=${this.toggleHeader}>toggle header</button>
@@ -304,7 +466,7 @@ export class AppRoot extends LitElement {
     }
 
     :host,
-    ia-item-navigator {
+    iaux-item-navigator {
       display: block;
       position: relative;
       width: 100%;

package/dist/demo/app-root.d.ts

@@ -3,11 +3,12 @@ import { MetadataResponse } from '@internetarchive/search-service';
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
 import { ModalManager } from '@internetarchive/modal-manager';
 import '@internetarchive/modal-manager';
-import '../src/item-navigator';
+import '../src/iaux-item-navigator';
+import '../src/menus/iaux-sharing-options';
 import { MenuShortcutInterface, MenuProviderInterface } from '../src/interfaces/menu-interfaces';
 export declare class AppRoot extends LitElement {
     /**
-     * Example controller to connect to `<ia-item-navigator>`
+     * Example controller to connect to `<iaux-item-navigator>`
      */
     itemMD?: MetadataResponse;
     encodedManifest: string;
@@ -19,6 +20,7 @@ export declare class AppRoot extends LitElement {
     loaded: true | null;
     showPlaceholder: true | null;
     showTheaterExample: true | null;
+    fileListToDisplay: any[];
     private itemNav;
     modalMgr: ModalManager;
     firstUpdated(): void;
@@ -30,7 +32,7 @@ export declare class AppRoot extends LitElement {
     get showFullscreen(): boolean;
     /** sets url query param `view=theater` to toggle fullscreen */
     toggleFS(): void;
-    /** toggles attr: `<ia-item-navigator viewportinfullscreen>` */
+    /** toggles attr: `<iaux-item-navigator viewportinfullscreen>` */
     fullscreenCheck(): void;
     /** End fullscreen */
     toggleHeader(): void;
@@ -38,6 +40,8 @@ export declare class AppRoot extends LitElement {
     togglePlaceholder(): void;
     toggleImmersion(): void;
     toggleTheaterExample(): void;
+    drawMenus(): void;
+    sortFilesCallback(e: CustomEvent): Promise<void>;
     /** Views */
     get theaterExample(): TemplateResult;
     get headerExample(): TemplateResult;

package/dist/demo/app-root.js

@@ -5,7 +5,96 @@ import { customElement, property, query } from 'lit/decorators.js';
 import { SearchService, } from '@internetarchive/search-service';
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
 import '@internetarchive/modal-manager';
-import '../src/item-navigator';
+import '../src/iaux-item-navigator';
+import '../src/menus/iaux-sharing-options';
+import { iauxShareIcon } from '../src/menus/iaux-sharing-options';
+import { viewableFilesIcon } from '../src/menus/iaux-viewable-files';
+const fileList = [
+    {
+        url_path: '/details/masterbookofamericanfolksong00shep',
+        file_subprefix: '01-The Master Book of American Folk Song',
+        title: 'The Master Book of American Folk Song',
+        file_source: '/01-The Master Book of American Folk Song_jp2.zip',
+        orig_sort: 0,
+    },
+    {
+        url_path: '/details/masterbookofamericanfolksong00shep/02-Encyclopedia%20of%20the%20Traditional%20Music%20and%20Folk%20Songs%20of%20the%20United%20States%20Index%20A%20through%20M',
+        file_subprefix: '02-Encyclopedia of the Traditional Music and Folk Songs of the United States Index A through M',
+        title: 'Encyclopedia of the Traditional Music and Folk Songs of the United States Index A through M',
+        file_source: '/02-Encyclopedia of the Traditional Music and Folk Songs of the United States Index A through M_jp2.zip',
+        orig_sort: 1,
+    },
+    {
+        url_path: '/details/masterbookofamericanfolksong00shep/03-Encyclopedia%20of%20the%20Traditional%20Music%20and%20Folk%20Songs%20of%20the%20United%20States%20Index%20N%20through%20Z',
+        file_subprefix: '03-Encyclopedia of the Traditional Music and Folk Songs of the United States Index N through Z',
+        title: 'Encyclopedia of the Traditional Music and Folk Songs of the United States Index N through Z',
+        file_source: '/03-Encyclopedia of the Traditional Music and Folk Songs of the United States Index N through Z_jp2.zip',
+        orig_sort: 2,
+    },
+    {
+        url_path: '/details/masterbookofamericanfolksong00shep/04-Letters%20to%20Riley%20Shepard',
+        file_subprefix: '04-Letters to Riley Shepard',
+        title: 'Letters to Riley Shepard',
+        file_source: '/04-Letters to Riley Shepard_jp2.zip',
+        orig_sort: 3,
+    },
+    {
+        url_path: '/details/masterbookofamericanfolksong00shep/Master%20Book%20of%20American%20Folk%20Song%20Vol.%201',
+        file_subprefix: 'Master Book of American Folk Song Vol. 1',
+        title: 'Master Book of American Folk Song Vol. 1.pdf',
+        file_source: '/Master Book of American Folk Song Vol. 1_jp2.zip',
+        orig_sort: 4,
+    },
+    {
+        url_path: '/details/masterbookofamericanfolksong00shep/Master%20Book%20of%20American%20Folk%20Song%20Vol.%202',
+        file_subprefix: 'Master Book of American Folk Song Vol. 2',
+        title: 'Master Book of American Folk Song Vol. 2.pdf',
+        file_source: '/Master Book of American Folk Song Vol. 2_jp2.zip',
+        orig_sort: 5,
+    },
+    {
+        url_path: '/details/masterbookofamericanfolksong00shep/Master%20Book%20of%20American%20Folk%20Song%20Vol.%203',
+        file_subprefix: 'Master Book of American Folk Song Vol. 3',
+        title: 'Master Book of American Folk Song Vol. 3.pdf',
+        file_source: '/Master Book of American Folk Song Vol. 3_jp2.zip',
+        orig_sort: 6,
+    },
+    {
+        url_path: '/details/masterbookofamericanfolksong00shep/Master%20Book%20of%20American%20Folk%20Song%20Vol.%204',
+        file_subprefix: 'Master Book of American Folk Song Vol. 4',
+        title: 'Master Book of American Folk Song Vol. 4.pdf',
+        file_source: '/Master Book of American Folk Song Vol. 4_jp2.zip',
+        orig_sort: 7,
+    },
+    {
+        url_path: '/details/masterbookofamericanfolksong00shep/Master%20Book%20of%20American%20Folk%20Song%20Vol.%205',
+        file_subprefix: 'Master Book of American Folk Song Vol. 5',
+        title: 'Master Book of American Folk Song Vol. 5',
+        file_source: '/Master Book of American Folk Song Vol. 5_jp2.zip',
+        orig_sort: 8,
+    },
+    {
+        url_path: '/details/masterbookofamericanfolksong00shep/Master%20Book%20of%20American%20Folk%20Song%20Vol.%206',
+        file_subprefix: 'Master Book of American Folk Song Vol. 6',
+        title: 'Master Book of American Folk Song Vol. 6.pdf',
+        file_source: '/Master Book of American Folk Song Vol. 6_jp2.zip',
+        orig_sort: 9,
+    },
+    {
+        url_path: '/details/masterbookofamericanfolksong00shep/Master%20Book%20of%20American%20Folk%20Song%20Vol.%207',
+        file_subprefix: 'Master Book of American Folk Song Vol. 7',
+        title: 'Master Book of American Folk Song Vol. 7.pdf',
+        file_source: '/Master Book of American Folk Song Vol. 7_jp2.zip',
+        orig_sort: 10,
+    },
+    {
+        url_path: '/details/masterbookofamericanfolksong00shep/Master%20Book%20of%20American%20Folk%20Song%20Vol.%208',
+        file_subprefix: 'Master Book of American Folk Song Vol. 8',
+        title: 'Master Book of American Folk Song Vol. 8.pdf',
+        file_source: '/Master Book of American Folk Song Vol. 8_jp2.zip',
+        orig_sort: 11,
+    },
+];
 let AppRoot = class AppRoot extends LitElement {
     constructor() {
         super(...arguments);
@@ -15,9 +104,10 @@ let AppRoot = class AppRoot extends LitElement {
         this.menuShortcuts = [];
         this.fullscreen = null;
         this.headerOn = null;
-        this.loaded = true;
+        this.loaded = null;
         this.showPlaceholder = null;
-        this.showTheaterExample = true;
+        this.showTheaterExample = null;
+        this.fileListToDisplay = fileList;
     }
     firstUpdated() {
         this.fetchItemMD();
@@ -29,10 +119,15 @@ let AppRoot = class AppRoot extends LitElement {
         if (changed.has('itemMD')) {
             this.fullscreenCheck();
         }
+        if (changed.has('fileList')) {
+            this.drawMenus();
+        }
     }
     async fetchItemMD() {
         const searchService = SearchService.default;
-        const mdResponse = await searchService.fetchMetadata('ux-team-books');
+        // masterbookofamericanfolksong00shep => multiple files
+        // ux-team-books => item
+        const mdResponse = await searchService.fetchMetadata('masterbookofamericanfolksong00shep');
         if (mdResponse.error) {
             console.log('MD Fetch error: ', mdResponse.error);
             window.confirm('There was an error fetching response, please check dev console');
@@ -40,6 +135,7 @@ let AppRoot = class AppRoot extends LitElement {
         }
         console.log('mdResponse.success', JSON.stringify(mdResponse.success));
         this.itemMD = mdResponse.success;
+        this.toggleTheaterExample();
     }
     get theaterReady() {
         return this.modalMgr && this.sharedObserver && !!this.itemMD;
@@ -60,7 +156,7 @@ let AppRoot = class AppRoot extends LitElement {
             location.search = 'view=theater';
         }
     }
-    /** toggles attr: `<ia-item-navigator viewportinfullscreen>` */
+    /** toggles attr: `<iaux-item-navigator viewportinfullscreen>` */
     fullscreenCheck() {
         if (this.showFullscreen && this.itemNav) {
             this.fullscreen = true;
@@ -128,14 +224,51 @@ let AppRoot = class AppRoot extends LitElement {
         // turn off placeholder
         this.showPlaceholder = null;
         this.showTheaterExample = true;
-        const x = {
-            icon: html `<p style="color: red">Allo</p>`,
-            id: 'a',
-            label: 'Hello world',
-            menuDetails: html `<h3>Wheee!</h3>`,
+        this.drawMenus();
+    }
+    drawMenus() {
+        var _a;
+        const shareMenu = {
+            icon: iauxShareIcon,
+            label: 'Share this item',
+            id: 'share',
+            component: html `<iaux-sharing-options
+        .identifier=${((_a = this.itemMD) === null || _a === void 0 ? void 0 : _a.metadata.identifier) || 'ux-team-books'}
+        .type=${`book`}
+        .creator=${`UX Team`}
+        .description=${'list of test books'}
+        .baseHost=${'archive.org'}
+        .fileSubPrefix=${''}
+      ></iaux-sharing-options>`,
         };
-        this.menuContents = [x];
-        this.menuShortcuts = [x];
+        const filesNewArr = [...fileList];
+        const viewableFilesMenu = {
+            id: 'viewable-files',
+            icon: viewableFilesIcon,
+            label: `Viewable Files (${fileList.length})`,
+            baseHost: 'archive.org',
+            item: this.itemMD,
+            subPrefix: '',
+            // sorter
+            actionButton: html `<iaux-sort-viewable-files
+        @fileListSorted=${(e) => this.sortFilesCallback(e)}
+        .fileListRaw=${fileList}
+      ></iaux-sort-viewable-files>`,
+            component: html `<iaux-viewable-files
+        .fileList=${filesNewArr}
+      ></iaux-viewable-files> `,
+        };
+        this.menuContents = [viewableFilesMenu, shareMenu];
+        this.menuShortcuts = [viewableFilesMenu, shareMenu];
+    }
+    async sortFilesCallback(e) {
+        const { sortType, sortedFiles } = e.detail;
+        this.fileListToDisplay = sortedFiles;
+        console.log('fileListSorted', { sortType, sortedFiles });
+        await this.updateComplete;
+        console.log('fileListSortedasyncd', { sortType, sortedFiles });
+        this.drawMenus();
+        // debugger;
     }
     /** Views */
     get theaterExample() {
@@ -144,7 +277,7 @@ let AppRoot = class AppRoot extends LitElement {
         <div class="theater-example">
           <img
             alt="cat theater"
-            src="https://archive.org/download/encyclopediaofca0000poll_t2e2/__ia_thumb.jpg"
+            src="https://archive.org/download/masterbookofamericanfolksong00shep/__ia_thumb.jpg"
           />
           <h3>Welcome to Cat Theater</h3>
         </div>
@@ -188,7 +321,7 @@ let AppRoot = class AppRoot extends LitElement {
         return html `
       <h1>theater, in page</h1>
       <section>
-        <ia-item-navigator
+        <iaux-item-navigator
           baseHost="https://archive.org"
           .item=${this.itemMD}
           .modal=${this.modalMgr}
@@ -201,7 +334,7 @@ let AppRoot = class AppRoot extends LitElement {
         >
           ${this.headerOn ? this.headerExample : ''}
           ${this.showTheaterExample ? this.theaterExample : ''}
-        </ia-item-navigator>
+        </iaux-item-navigator>
       </section>
       <div>
         <button @click=${this.toggleHeader}>toggle header</button>
@@ -236,7 +369,7 @@ AppRoot.styles = css `
     }
 
     :host,
-    ia-item-navigator {
+    iaux-item-navigator {
       display: block;
       position: relative;
       width: 100%;
@@ -289,22 +422,25 @@ __decorate([
     property({ type: Array, attribute: false })
 ], AppRoot.prototype, "menuShortcuts", void 0);
 __decorate([
-    property({ reflect: true, attribute: true })
+    property({ reflect: true, attribute: true, type: Boolean })
 ], AppRoot.prototype, "fullscreen", void 0);
 __decorate([
-    property({ reflect: true, attribute: true })
+    property({ reflect: true, attribute: true, type: Boolean })
 ], AppRoot.prototype, "headerOn", void 0);
 __decorate([
-    property({ reflect: true, attribute: true })
+    property({ reflect: true, attribute: true, type: Boolean })
 ], AppRoot.prototype, "loaded", void 0);
 __decorate([
-    property({ reflect: true, attribute: true })
+    property({ reflect: true, attribute: true, type: Boolean })
 ], AppRoot.prototype, "showPlaceholder", void 0);
 __decorate([
-    property({ reflect: true, attribute: true })
+    property({ reflect: true, attribute: true, type: Boolean })
 ], AppRoot.prototype, "showTheaterExample", void 0);
 __decorate([
-    query('ia-item-navigator')
+    property({ type: Array })
+], AppRoot.prototype, "fileListToDisplay", void 0);
+__decorate([
+    query('iaux-item-navigator')
 ], AppRoot.prototype, "itemNav", void 0);
 __decorate([
     query('modal-manager')