Update Radio Player and Transcript View with activity indicator and bug fixes

packages/radio-player/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/radio-player",
-  "version": "0.1.0",
+  "version": "0.1.1-alpha.1",
   "description": "A Radio Player LitElement.",
   "license": "AGPL-3.0-only",
   "main": "index.js",
@@ -36,10 +36,10 @@
   "dependencies": {
     "@internetarchive/audio-element": "^0.0.2",
     "@internetarchive/expandable-search-bar": "^0.0.2",
-    "@internetarchive/ia-activity-indicator": "^0.0.4",
+    "@internetarchive/ia-activity-indicator": "^0.0.6",
     "@internetarchive/playback-controls": "0.0.2",
     "@internetarchive/scrubber-bar": "^0.0.2",
-    "@internetarchive/transcript-view": "^0.0.3",
+    "@internetarchive/transcript-view": "0.0.4-alpha.1",
     "@internetarchive/waveform-progress": "^0.0.2",
     "lit": "^2.2.7"
   },

packages/radio-player/src/radio-player.ts

@@ -1,39 +1,35 @@
 /* eslint-disable import/no-duplicates */
+import { AudioElement, AudioSource } from '@internetarchive/audio-element';
+import '@internetarchive/expandable-search-bar';
+import { QuickSearchEntry } from '@internetarchive/expandable-search-bar';
+import '@internetarchive/ia-activity-indicator';
+import '@internetarchive/playback-controls';
+import { PlaybackControls, PlaybackMode } from '@internetarchive/playback-controls';
+import '@internetarchive/scrubber-bar';
+import {
+  TranscriptConfig,
+  TranscriptEntryConfig,
+  TranscriptView,
+} from '@internetarchive/transcript-view';
+import '@internetarchive/waveform-progress';
+import { ZoneOfSilence } from '@internetarchive/waveform-progress';
 import {
-  LitElement,
-  html,
   css,
   CSSResult,
-  TemplateResult,
+  html,
+  LitElement,
   PropertyValues,
+  TemplateResult,
 } from 'lit';
 import {
   customElement,
   property,
 } from 'lit/decorators.js';
-import { AudioElement, AudioSource } from '@internetarchive/audio-element';
-import {
-  TranscriptConfig,
-  TranscriptEntryConfig,
-  TranscriptView,
-} from '@internetarchive/transcript-view';
-
-import '@internetarchive/waveform-progress';
-import '@internetarchive/playback-controls';
-import '@internetarchive/scrubber-bar';
-
-import { QuickSearchEntry } from '@internetarchive/expandable-search-bar';
-import '@internetarchive/expandable-search-bar';
-import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
-
-import './search-results-switcher';
-
-import { ZoneOfSilence } from '@internetarchive/waveform-progress';
-import { PlaybackControls, PlaybackMode } from '@internetarchive/playback-controls';
-import SearchResultsSwitcher from './search-results-switcher';
 import MusicZone from './models/music-zone';
 import RadioPlayerConfig from './models/radio-player-config';
 import { SearchHandlerInterface } from './search-handler/search-handler-interface';
+import './search-results-switcher';
+import SearchResultsSwitcher from './search-results-switcher';
 
 /**
  * A Radio Player element to play back transcribed audio.

packages/radio-player/yarn.lock

@@ -843,12 +843,12 @@
   dependencies:
     lit "^2.2.7"
 
-"@internetarchive/ia-activity-indicator@^0.0.4":
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/@internetarchive/ia-activity-indicator/-/ia-activity-indicator-0.0.4.tgz#22fa19b072e4084799cf4c71ab73e4973c2670c3"
-  integrity sha512-nJFs3uAnPyDLqtkEVV4vMD1dli+eOyovd5rY/un9nOahu2elTHOHrIfNH0YvBkLXR7C9GVCeI9H8BD8BXq+rhg==
+"@internetarchive/ia-activity-indicator@^0.0.6":
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/@internetarchive/ia-activity-indicator/-/ia-activity-indicator-0.0.6.tgz#46bc71620b3a7630f18bc0b8e883a52443af1016"
+  integrity sha512-Llut9sdsmmVqgxASqSlCqoiXSNb4M7xWY3/O7QUh3NnuR7WMfAcYBqNRDsLve7t/VkbVVBOVyeVAROnjvYHGNQ==
   dependencies:
-    lit "^2.2.2"
+    lit "^2.8.0"
 
 "@internetarchive/[email protected]":
   version "0.0.2"
@@ -864,10 +864,10 @@
   dependencies:
     lit "^2.2.7"
 
-"@internetarchive/transcript-view@^0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@internetarchive/transcript-view/-/transcript-view-0.0.3.tgz#4c141abe2a88811ac0c635a9e881c4eeb97c7c34"
-  integrity sha512-qKfd098Q7frubJqD/G50TKHd7WAc1Fyi3Yge1d0Fp5C4rv/T7XZIQ6/42lTVcA99hspdF7tQhNZ8ZTp1TGxL+A==
+"@internetarchive/[email protected].4-alpha.1":
+  version "0.0.4-alpha.1"
+  resolved "https://registry.yarnpkg.com/@internetarchive/transcript-view/-/transcript-view-0.0.4-alpha.1.tgz#ae7d79b1dedb617245ea1b1d4b60379c3ea0249f"
+  integrity sha512-oWt8mBqFacEVJn3F4dJjmCiu2mYRCvWz/jY1zYtIcKRflDdU+91Hhxdv1QyBlcqthom7TMTY+SRyWDlUD38l0Q==
   dependencies:
     lit "^2.2.7"
 
@@ -878,11 +878,23 @@
   dependencies:
     lit "^2.2.7"
 
+"@lit-labs/ssr-dom-shim@^1.0.0", "@lit-labs/ssr-dom-shim@^1.1.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.3.0.tgz#a28799c463177d1a0b0e5cefdc173da5ac859eb4"
+  integrity sha512-nQIWonJ6eFAvUUrSlwyHDm/aE8PBDu5kRpL0vHMg6K8fK3Diq1xdPjTnsJSwxABhaZ+5eBi1btQB5ShUTKo4nQ==
+
 "@lit/reactive-element@^1.0.0", "@lit/reactive-element@^1.3.0":
   version "1.3.3"
   resolved "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.3.3.tgz"
   integrity sha512-ukelZ49tzUqgOAEbVujl/U62JNK3wdn5kKtXVqrjKND4QvHACZOMOYaZI6/5Jd8vsg+Fq9HDwiib70FBLydOiQ==
 
+"@lit/reactive-element@^1.6.0":
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/@lit/reactive-element/-/reactive-element-1.6.3.tgz#25b4eece2592132845d303e091bad9b04cdcfe03"
+  integrity sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==
+  dependencies:
+    "@lit-labs/ssr-dom-shim" "^1.0.0"
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz"
@@ -8835,14 +8847,30 @@ lit-element@^3.2.0:
     "@lit/reactive-element" "^1.3.0"
     lit-html "^2.2.0"
 
+lit-element@^3.3.0:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-3.3.3.tgz#10bc19702b96ef5416cf7a70177255bfb17b3209"
+  integrity sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==
+  dependencies:
+    "@lit-labs/ssr-dom-shim" "^1.1.0"
+    "@lit/reactive-element" "^1.3.0"
+    lit-html "^2.8.0"
+
 lit-html@^2.0.0, lit-html@^2.2.0:
   version "2.2.6"
   resolved "https://registry.npmjs.org/lit-html/-/lit-html-2.2.6.tgz"
   integrity sha512-xOKsPmq/RAKJ6dUeOxhmOYFjcjf0Q7aSdfBJgdJkOfCUnkmmJPxNrlZpRBeVe1Gg50oYWMlgm6ccAE/SpJgSdw==
   dependencies:
     "@types/trusted-types" "^2.0.2"
 
-lit@^2.0.0, lit@^2.2.2, lit@^2.2.7:
+lit-html@^2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-2.8.0.tgz#96456a4bb4ee717b9a7d2f94562a16509d39bffa"
+  integrity sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==
+  dependencies:
+    "@types/trusted-types" "^2.0.2"
+
+lit@^2.0.0, lit@^2.2.7:
   version "2.2.7"
   resolved "https://registry.npmjs.org/lit/-/lit-2.2.7.tgz"
   integrity sha512-WXYujlKFwme5ZqXOZoWuRVZQAwy7scbcVT3wCbAOHefOxyscqjywWGlF2e6nnC9E64yP9l2ZQlN8wZcRlrjUMQ==
@@ -8851,6 +8879,15 @@ lit@^2.0.0, lit@^2.2.2, lit@^2.2.7:
     lit-element "^3.2.0"
     lit-html "^2.2.0"
 
+lit@^2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/lit/-/lit-2.8.0.tgz#4d838ae03059bf9cafa06e5c61d8acc0081e974e"
+  integrity sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==
+  dependencies:
+    "@lit/reactive-element" "^1.6.0"
+    lit-element "^3.3.0"
+    lit-html "^2.8.0"
+
 load-json-file@^1.0.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz"

packages/transcript-view/dev_tools/search-results-switcher.ts

@@ -2,7 +2,7 @@
 /* eslint-disable lit-a11y/click-events-have-key-events */
 
 import { LitElement, html, css, CSSResult, TemplateResult } from 'lit';
-import { customElement, property } from 'lit/decorators';
+import { customElement, property } from 'lit/decorators.js';
 
 @customElement('search-results-switcher')
 export default class SearchResultsSwitcher extends LitElement {

packages/transcript-view/dev_tools/transcript-view-dev-options.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, css, TemplateResult, CSSResult } from 'lit';
-import { customElement, property } from 'lit/decorators';
+import { customElement, property } from 'lit/decorators.js';
 
 import './search-results-switcher';
 
@@ -96,7 +96,7 @@ export default class TranscriptViewDevOptions extends LitElement {
           type="range"
           min="0"
           max=${this.totalTime}
-          .value=${this.currentTime}
+          value=${this.currentTime}
           @input=${this.handleCurrentTimeSlide}
           @change=${this.handleCurrentTimeSlide}
         />
@@ -117,7 +117,7 @@ export default class TranscriptViewDevOptions extends LitElement {
           type="range"
           min="100"
           max="400"
-          .value=${this.transcriptHeight}
+          value=${this.transcriptHeight}
           @input=${this.handleTranscriptSizeSlide}
           @change=${this.handleTranscriptSizeSlide}
         />
@@ -147,7 +147,7 @@ export default class TranscriptViewDevOptions extends LitElement {
           type="range"
           min="10"
           max="100"
-          .value=${this.topContextHeight}
+          value=${this.topContextHeight}
           @input=${this.handleTopContextSlide}
           @change=${this.handleTopContextSlide}
         />
@@ -164,7 +164,7 @@ export default class TranscriptViewDevOptions extends LitElement {
           type="range"
           min="10"
           max="100"
-          .value=${this.bottomContextHeight}
+          value=${this.bottomContextHeight}
           @input=${this.handleBottomContextSlide}
           @change=${this.handleBottomContextSlide}
         />

packages/transcript-view/src/duration-formatter.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, TemplateResult } from 'lit';
-import { customElement, property } from 'lit/decorators';
+import { customElement, property } from 'lit/decorators.js';
 
 @customElement('duration-formatter')
 export default class DurationFormatter extends LitElement {

packages/transcript-view/src/transcript-view.ts

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-duplicates */
 
 import { LitElement, html, css, PropertyValues, TemplateResult, CSSResult } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 
 import './transcript-entry';
 import TranscriptEntry from './transcript-entry';
@@ -12,7 +12,7 @@ import TranscriptConfig from './models/transcript-config';
 
 @customElement('transcript-view')
 export default class TranscriptView extends LitElement {
-  @property({ type: TranscriptConfig }) config: TranscriptConfig | undefined = undefined;
+  @property({ type: Object }) config: TranscriptConfig | undefined = undefined;
 
   @property({ type: Number }) currentTime = 0;
 
@@ -26,9 +26,9 @@ export default class TranscriptView extends LitElement {
 
   @property({ type: Boolean }) showContextZones = false;
 
-  @property({ type: Number }) private timeScrollTop = 0;
+  @state() private timeScrollTop = 0;
 
-  @property({ type: Array }) private currentEntries: TranscriptEntryConfig[] = [];
+  @state() private currentEntries: TranscriptEntryConfig[] = [];
 
   private scrollTimerDelay = 15000;
 
@@ -102,8 +102,8 @@ export default class TranscriptView extends LitElement {
         ?isActive=${active}
         ?isSearchResult=${isSearchResult}
         ?isMusicEntry=${isMusicEntry}
-        isClickable="true"
-        data-search-result-index=${entry.searchMatchIndex}
+        ?isClickable=${true}
+        .data-search-result-index=${entry.searchMatchIndex}
         data-identifier=${entry.id}
         @click=${this.transcriptEntrySelected}
       >