@internetarchive/radio-player 0.0.4-alpha.1 → 0.1.1-alpha.1

package/lib/src/radio-player.js

@@ -1,1339 +1,1338 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-/* eslint-disable import/no-duplicates */
-import { LitElement, html, css, } from 'lit';
-import { customElement, property, } from 'lit/decorators.js';
-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 { PlaybackMode } from '@internetarchive/playback-controls';
-import MusicZone from './models/music-zone';
-/**
- * A Radio Player element to play back transcribed audio.
- *
- * It is responsible for orchestrating all of the other components like:
- * - Waveform Progress
- * - Scrubber Bar
- * - Playback Controls
- * - Transcript View
- * - Audio Element
- * - Search Bar
- *
- * @export
- * @class RadioPlayer
- * @extends {LitElement}
- */
-let RadioPlayer = class RadioPlayer extends LitElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * Radio player configuration
-         *
-         * @type {(RadioPlayerConfig | undefined)}
-         * @memberof RadioPlayer
-         */
-        this.config = undefined;
-        /**
-         * The Search Handler
-         *
-         * @type {(SearchHandlerInterface | undefined)}
-         * @memberof RadioPlayer
-         */
-        this.searchHandler = undefined;
-        /**
-         * Transcript configuration
-         *
-         * @type {(TranscriptConfig | undefined)}
-         * @memberof RadioPlayer
-         */
-        this.transcriptConfig = undefined;
-        /**
-         * Search result transcript. It's also a `TranscriptConfig` object, but is broken up by
-         * transcript entries as well as search results.
-         *
-         * If this is set, the transcript view, uses this, otherwise it uses `transcriptConfig`
-         *
-         * @type {(TranscriptConfig | undefined)}
-         * @memberof RadioPlayer
-         */
-        this.searchResultsTranscript = undefined;
-        /**
-         * Current playback time
-         *
-         * @type {number}
-         * @memberof RadioPlayer
-         */
-        this.currentTime = 0;
-        /**
-         * Current search term
-         *
-         * @type {string}
-         * @memberof RadioPlayer
-         */
-        this.searchTerm = '';
-        /**
-         * Flag to determine whether or not to skip the music sections
-         *
-         * @type {boolean}
-         * @memberof RadioPlayer
-         */
-        this.skipMusicSections = false;
-        /**
-         * Percent of playback that is complete
-         *
-         * @private
-         * @type {number}
-         * @memberof RadioPlayer
-         */
-        this.percentComplete = 0;
-        /**
-         * Flag for whether or not the radio player is playing
-         *
-         * @private
-         * @type {boolean}
-         * @memberof RadioPlayer
-         */
-        this.isPlaying = false;
-        /**
-         * Duration of the audio file
-         *
-         * @private
-         * @type {number}
-         * @memberof RadioPlayer
-         */
-        this.duration = 0;
-        /**
-         * The playback rate where 1 is "normal", 0 is paused, 2 is twice as fase
-         *
-         * @private
-         * @type {number}
-         * @memberof RadioPlayer
-         */
-        this.playbackRate = 1;
-        /**
-         * Volume from 0 to 1
-         *
-         * @private
-         * @type {number}
-         * @memberof RadioPlayer
-         */
-        this.volume = 1;
-        /**
-         * Flag for whether we should show the search results switcher
-         *
-         * @private
-         * @type {boolean}
-         * @memberof RadioPlayer
-         */
-        this.shouldShowSearchResultSwitcher = false;
-        /**
-         * Flag for whether we should show the 'no results' message
-         *
-         * @private
-         * @type {boolean}
-         * @memberof RadioPlayer
-         */
-        this.shouldShowNoSearchResultMessage = false;
-        /**
-         * Are we searching or not?
-         *
-         * @private
-         * @type {boolean}
-         * @memberof RadioPlayer
-         */
-        this.isSearching = false;
-        this.musicZones = [];
-    }
-    /**
-     * LitElement lifecycle main render method
-     *
-     * @returns {TemplateResult}
-     * @memberof RadioPlayer
-     */
-    render() {
-        return html `
-      ${this.audioElementTemplate}
-      <section role="main">
-        ${this.titleDateTemplate} ${this.collectionLogoTemplate} ${this.playbackControlsTemplate}
-        <div class="waveform-scrubber-container">
-          ${this.waveFormProgressTemplate} ${this.scrubberBarTemplate}
-        </div>
-        ${this.searchSectionTemplate} ${this.transcriptViewTemplate}
-      </section>
-    `;
-    }
-    /**
-     * Start playback
-     *
-     * @memberof RadioPlayer
-     */
-    play() {
-        /* istanbul ignore else */
-        if (this.audioElement)
-            this.audioElement.play();
-    }
-    /**
-     * Pause playback
-     *
-     * @memberof RadioPlayer
-     */
-    pause() {
-        /* istanbul ignore else */
-        if (this.audioElement)
-            this.audioElement.pause();
-    }
-    /**
-     * Seek audio to given number of seconds
-     *
-     * @param {number} seconds
-     * @memberof RadioPlayer
-     */
-    seekTo(seconds) {
-        /* istanbul ignore else */
-        if (this.audioElement)
-            this.audioElement.seekTo(seconds);
-    }
-    /**
-     * Generate markup for the title and date view sections
-     *
-     * @readonly
-     * @private
-     * @type {TemplateResult}
-     * @memberof RadioPlayer
-     */
-    get titleDateTemplate() {
-        return html `
-      <div class="title-date">
-        <div class="title">
-          ${this.config ? this.config.title : ''}
-        </div>
-
-        <div class="date">
-          ${this.config ? this.config.date : ''}
-        </div>
-      </div>
-    `;
-    }
-    /**
-     * Generate markup for the logo element
-     *
-     * @readonly
-     * @private
-     * @type {TemplateResult}
-     * @memberof RadioPlayer
-     */
-    get collectionLogoTemplate() {
-        return html `
-      <img class="collection-logo" src=${this.logoUrl} alt="collection logo" />
-    `;
-    }
-    /**
-     * Return the logoUrl from the config if provided
-     *
-     * @readonly
-     * @private
-     * @type {string}
-     * @memberof RadioPlayer
-     */
-    get logoUrl() {
-        return this.config ? this.config.logoUrl : '';
-    }
-    /**
-     * Generate the markup for the waveform progress element
-     *
-     * @readonly
-     * @private
-     * @type {TemplateResult}
-     * @memberof RadioPlayer
-     */
-    get waveFormProgressTemplate() {
-        return this.waveformUrl
-            ? html `
-          <waveform-progress
-            interactive="true"
-            .waveformUrl=${this.waveformUrl}
-            .percentComplete=${this.percentComplete}
-            @valuechange=${this.valueChangedFromScrub}
-          >
-          </waveform-progress>
-        `
-            : undefined;
-    }
-    /**
-     * Generate an array of `ZoneOfSilence` models for the waveform progress element
-     *
-     * It does this by parsing the transcript for music sections and converting
-     * those music sections to zones of silence.
-     *
-     * @readonly
-     * @private
-     * @type {ZoneOfSilence[]}
-     * @memberof RadioPlayer
-     */
-    get zonesOfSilence() {
-        /* istanbul ignore else */
-        if (this.duration === 0) {
-            return [];
-        }
-        // eslint-disable-next-line max-len
-        const musicEntries = this.transcriptEntries.filter((entry) => entry.isMusic === true);
-        const zonesOfSilence = musicEntries.map((entry) => {
-            const startPercent = (entry.start / this.duration) * 100;
-            const endPercent = (entry.end / this.duration) * 100;
-            return new ZoneOfSilence(startPercent, endPercent);
-        });
-        return zonesOfSilence;
-    }
-    /**
-     * Return the waveform url from the configuration
-     *
-     * @readonly
-     * @private
-     * @type {string}
-     * @memberof RadioPlayer
-     */
-    get waveformUrl() {
-        return this.config ? this.config.waveformUrl : '';
-    }
-    /**
-     * Generate the audio element markup
-     *
-     * @readonly
-     * @private
-     * @type {TemplateResult}
-     * @memberof RadioPlayer
-     */
-    get audioElementTemplate() {
-        return html `
-      <audio-element
-        .sources=${this.audioSources}
-        .playbackRate=${this.playbackRate}
-        .volume=${this.volume}
-        @timeupdate=${this.handleTimeChange}
-        @durationchange=${this.handleDurationChange}
-        @playbackStarted=${this.playbackStarted}
-        @playbackPaused=${this.playbackPaused}
-        @canplay=${this.canplay}
-      >
-      </audio-element>
-    `;
-    }
-    /**
-     * Return the audio sources from the configuration
-     *
-     * @readonly
-     * @private
-     * @type {AudioSource[]}
-     * @memberof RadioPlayer
-     */
-    get audioSources() {
-        return this.config ? this.config.audioSources : [];
-    }
-    /**
-     * Generate markup for the playback controls
-     *
-     * @readonly
-     * @private
-     * @type {TemplateResult}
-     * @memberof RadioPlayer
-     */
-    get playbackControlsTemplate() {
-        return html `
-      <playback-controls
-        @back-button-pressed=${this.backButtonHandler}
-        @play-pause-button-pressed=${this.playPauseButtonHandler}
-        @forward-button-pressed=${this.forwardButtonHandler}
-        @volumeChange=${this.volumeChanged}
-        @playbackRateChange=${this.changePlaybackRate}
-        @next-section-button-pressed=${this.nextSectionButtonHandler}
-        @prev-section-button-pressed=${this.prevSectionButtonHandler}
-      >
-      </playback-controls>
-    `;
-    }
-    /**
-     * Generate an array of start and end points for each of the music zones.
-     * This allows us to show the markers on the scrubber bar and optionally skip those sections.
-     *
-     * @readonly
-     * @private
-     * @type {number[]}
-     * @memberof RadioPlayer
-     */
-    get scrubberBarMarkerPercentages() {
-        const percentages = [0];
-        this.zonesOfSilence.forEach((zone) => {
-            percentages.push(zone.startPercent);
-            percentages.push(zone.endPercent);
-        });
-        percentages.push(100);
-        return percentages;
-    }
-    /**
-     * Generate markup for the scrubber bar
-     *
-     * @readonly
-     * @private
-     * @type {TemplateResult}
-     * @memberof RadioPlayer
-     */
-    get scrubberBarTemplate() {
-        return html `
-      <scrubber-bar
-        .sectionMarkerPercentages=${this.scrubberBarMarkerPercentages}
-        .value=${this.percentComplete}
-        @valuechange=${this.valueChangedFromScrub}
-      >
-      </scrubber-bar>
-    `;
-    }
-    /**
-     * Generate markup for the transcript view
-     *
-     * @readonly
-     * @private
-     * @type {TemplateResult}
-     * @memberof RadioPlayer
-     */
-    get transcriptViewTemplate() {
-        return html `
-      <div class="transcript-container">
-        <transcript-view
-          .config=${this.currentTranscript}
-          .currentTime=${this.currentTime}
-          @transcriptEntrySelected=${this.transcriptEntrySelected}
-        >
-        </transcript-view>
-      </div>
-    `;
-    }
-    get currentTranscript() {
-        return this.searchResultsTranscript || this.transcriptConfig;
-    }
-    /**
-     * Generate markup for search section
-     *
-     * @readonly
-     * @private
-     * @type {TemplateResult}
-     * @memberof RadioPlayer
-     */
-    get searchSectionTemplate() {
-        return html `
-      <div class="search-section">
-        <expandable-search-bar
-          searchTerm=${this.searchTerm}
-          .quickSearches=${this.quickSearches}
-          @inputchange=${this.updateSearchTerm}
-          @enterKeyPressed=${this.searchEnterKeyPressed}
-          @searchCleared=${this.searchCleared}
-        >
-        </expandable-search-bar>
-        <div class="search-results-info">
-          ${this.searchActivityIndicator}
-          ${this.searchResultsSwitcherTemplate}
-          ${this.noSearchResultsTemplate}
-        </div>
-      </div>
-    `;
-    }
-    /**
-     * Generate markup for the search results switcher
-     *
-     * @readonly
-     * @private
-     * @type {TemplateResult}
-     * @memberof RadioPlayer
-     */
-    get searchResultsSwitcherTemplate() {
-        return html `
-      <search-results-switcher
-        class="${this.shouldShowSearchResultSwitcher && !this.isSearching ? '' : 'hidden'}"
-        @searchResultIndexChanged=${this.searchResultIndexChanged}
-      >
-      </search-results-switcher>
-    `;
-    }
-    /**
-     * Search activity indicator template
-     *
-     * @readonly
-     * @private
-     * @type {TemplateResult}
-     * @memberof RadioPlayer
-     */
-    get searchActivityIndicator() {
-        return html `
-      <ia-activity-indicator
-        class="${this.isSearching ? '' : 'hidden'}">
-      </ia-activity-indicator>
-    `;
-    }
-    /**
-     * Generate markup for the "No Search Results" message
-     *
-     * @readonly
-     * @private
-     * @type {TemplateResult}
-     * @memberof RadioPlayer
-     */
-    get noSearchResultsTemplate() {
-        return html `
-      <div
-        class="
-          no-search-results-message
-          ${this.shouldShowNoSearchResultMessage && !this.isSearching ? '' : 'hidden'}"
-      >
-        No search results.
-      </div>
-    `;
-    }
-    /**
-     * Generate an array of `QuickSearchEntry` objects based on the quick search
-     * configuration passed in.
-     *
-     * @readonly
-     * @private
-     * @type {QuickSearchEntry[]}
-     * @memberof RadioPlayer
-     */
-    get quickSearches() {
-        if (!this.config) {
-            return [];
-        }
-        const entries = this.config.quickSearches.map(entry => new QuickSearchEntry(entry));
-        return entries;
-    }
-    /**
-     * Update the local search term when the SearchBar widget gets updated and emits the event
-     *
-     * @private
-     * @param {CustomEvent} e
-     * @returns {void}
-     * @memberof RadioPlayer
-     */
-    updateSearchTerm(e) {
-        const detail = e.detail || {};
-        if (!detail.value) {
-            return;
-        }
-        const searchTerm = detail.value;
-        this.searchTerm = searchTerm;
-        this.emitSearchTermChangedEvent(searchTerm);
-    }
-    /**
-     * Triggered when the user clicks the clear search button in the search bar.
-     * Clean up all of the search info and reset to the base transcript.
-     *
-     * @private
-     * @memberof RadioPlayer
-     */
-    searchCleared() {
-        this.searchTerm = '';
-        this.searchResultsTranscript = undefined;
-        this.emitSearchClearedEvent();
-        this.emitSearchTermChangedEvent('');
-        /* istanbul ignore else */
-        if (this.transcriptView) {
-            this.transcriptView.selectedSearchResultIndex = 0;
-        }
-        /* istanbul ignore else */
-        if (this.searchResultsSwitcher) {
-            this.searchResultsSwitcher.currentResultIndex = 0;
-        }
-    }
-    /**
-     * Triggered when the user scrubs through search result indices so we can coordinate
-     * the UI updates like scrolling the transcript view
-     *
-     * @private
-     * @param {CustomEvent} e
-     * @returns {void}
-     * @memberof RadioPlayer
-     */
-    searchResultIndexChanged(e) {
-        const detail = e.detail || {};
-        const { searchResultIndex } = detail;
-        if (searchResultIndex === undefined || !this.transcriptView) {
-            return;
-        }
-        this.transcriptView.selectedSearchResultIndex = searchResultIndex;
-        this.transcriptView.scrollToSelectedSearchResult();
-        const event = new CustomEvent('highlightedSearchResultChanged', {
-            detail: { searchResultIndex },
-        });
-        this.dispatchEvent(event);
-    }
-    /**
-     * Triggered when the user presses enter in the search bar so we can trigger a search.
-     *
-     * @private
-     * @param {CustomEvent} e
-     * @memberof RadioPlayer
-     */
-    searchEnterKeyPressed(e) {
-        const detail = e.detail || {};
-        if (!detail.value) {
-            return;
-        }
-        this.executeSearch(detail.value);
-    }
-    executeSearch(term) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.searchHandler || term.length < 2) {
-                this.searchResultsTranscript = undefined;
-                return;
-            }
-            this.searchTerm = term;
-            this.isSearching = true;
-            const event = new Event('searchExecuted');
-            this.dispatchEvent(event);
-            this.searchResultsTranscript = yield this.searchHandler.search(term);
-            this.isSearching = false;
-        });
-    }
-    /**
-     * Return transcript entries from the transcript configuration
-     *
-     * @readonly
-     * @private
-     * @type {TranscriptEntryConfig[]}
-     * @memberof RadioPlayer
-     */
-    get transcriptEntries() {
-        return this.currentTranscript ? this.currentTranscript.entries : [];
-    }
-    /**
-     * Return the transcript view DOM element
-     *
-     * @readonly
-     * @private
-     * @type {(TranscriptView | null)}
-     * @memberof RadioPlayer
-     */
-    get transcriptView() {
-        /* istanbul ignore next */
-        return this.shadowRoot
-            ? this.shadowRoot.querySelector('transcript-view')
-            : null;
-    }
-    /**
-     * Return the audio element DOM element
-     *
-     * @readonly
-     * @private
-     * @type {(AudioElement | null)}
-     * @memberof RadioPlayer
-     */
-    get audioElement() {
-        /* istanbul ignore next */
-        return this.shadowRoot
-            ? this.shadowRoot.querySelector('audio-element')
-            : null;
-    }
-    /**
-     * Return the playback controls DOM element
-     *
-     * @readonly
-     * @private
-     * @type {(PlaybackControls | null)}
-     * @memberof RadioPlayer
-     */
-    get playbackControls() {
-        /* istanbul ignore next */
-        return this.shadowRoot
-            ? this.shadowRoot.querySelector('playback-controls')
-            : null;
-    }
-    /**
-     * Return the search results switcher DOM element
-     *
-     * @readonly
-     * @private
-     * @type {(SearchResultsSwitcher | null)}
-     * @memberof RadioPlayer
-     */
-    get searchResultsSwitcher() {
-        /* istanbul ignore next */
-        return this.shadowRoot
-            ? this.shadowRoot.querySelector('search-results-switcher')
-            : null;
-    }
-    /**
-     * Triggered when the user changes the playback rate so we can update the audio element
-     *
-     * @private
-     * @param {CustomEvent} e
-     * @returns {void}
-     * @memberof RadioPlayer
-     */
-    changePlaybackRate(e) {
-        const detail = e.detail || {};
-        if (!detail.playbackRate) {
-            return;
-        }
-        this.playbackRate = detail.playbackRate;
-        const event = new CustomEvent('playbackRateChanged', {
-            detail: { playbackRate: this.playbackRate },
-        });
-        this.dispatchEvent(event);
-    }
-    /**
-     * Triggered when the user changes the volume from the playback controls
-     *
-     * @private
-     * @param {CustomEvent} e
-     * @returns {void}
-     * @memberof RadioPlayer
-     */
-    volumeChanged(e) {
-        const detail = e.detail || {};
-        if (detail.volume === undefined) {
-            return;
-        }
-        this.volume = e.detail.volume;
-        const event = new CustomEvent('volumeChanged', {
-            detail: { volume: this.volume },
-        });
-        this.dispatchEvent(event);
-    }
-    /**
-     * Triggered when the user presses the back button in the playback controls
-     *
-     * @private
-     * @memberof RadioPlayer
-     */
-    backButtonHandler() {
-        /* istanbul ignore else */
-        if (this.audioElement) {
-            this.audioElement.seekBy(-10);
-        }
-        const event = new Event('jumpBackButtonPressed');
-        this.dispatchEvent(event);
-    }
-    /**
-     * Triggered when the user presses the play/pause button
-     *
-     * @private
-     * @returns {void}
-     * @memberof RadioPlayer
-     */
-    playPauseButtonHandler() {
-        this.isPlaying = !this.isPlaying;
-        /* istanbul ignore if */
-        if (!this.audioElement) {
-            return;
-        }
-        if (this.isPlaying) {
-            this.audioElement.play();
-        }
-        else {
-            this.audioElement.pause();
-        }
-        const event = new CustomEvent('playPauseButtonPressed', {
-            detail: { isPlaying: this.isPlaying },
-        });
-        this.dispatchEvent(event);
-    }
-    /**
-     * Triggered when the user presses the forward button in the playback controls
-     *
-     * @private
-     * @memberof RadioPlayer
-     */
-    forwardButtonHandler() {
-        /* istanbul ignore else */
-        if (this.audioElement) {
-            this.audioElement.seekBy(10);
-        }
-        const event = new Event('jumpForwardButtonPressed');
-        this.dispatchEvent(event);
-    }
-    /**
-     * Skip to the next section
-     *
-     * @private
-     * @returns {void}
-     * @memberof RadioPlayer
-     */
-    nextSectionButtonHandler() {
-        /* istanbul ignore if */
-        if (!this.audioElement) {
-            return;
-        }
-        const percentsGreaterThanValue = this.scrubberBarMarkerPercentages.filter(value => value > this.percentComplete + 0.1);
-        const closestUpper = Math.min(...percentsGreaterThanValue);
-        const seekTo = this.duration * (closestUpper / 100) + 0.1;
-        this.audioElement.seekTo(seekTo);
-        const event = new Event('nextSectionButtonPressed');
-        this.dispatchEvent(event);
-    }
-    /**
-     * Jump to the previous section
-     *
-     * @private
-     * @returns {void}
-     * @memberof RadioPlayer
-     */
-    prevSectionButtonHandler() {
-        /* istanbul ignore if */
-        if (!this.audioElement) {
-            return;
-        }
-        const percentsLessThanValue = this.scrubberBarMarkerPercentages.filter(value => value < this.percentComplete - 0.1);
-        const closestLower = Math.max(...percentsLessThanValue);
-        const seekTo = this.duration * (closestLower / 100) - 0.1;
-        this.audioElement.seekTo(seekTo);
-        const event = new Event('prevSectionButtonPressed');
-        this.dispatchEvent(event);
-    }
-    /**
-     * Handle the duration change event like when the audio file first loads
-     *
-     * @private
-     * @param {CustomEvent} e
-     * @returns {void}
-     * @memberof RadioPlayer
-     */
-    handleDurationChange(e) {
-        const detail = e.detail || {};
-        if (!detail.duration) {
-            return;
-        }
-        this.duration = detail.duration;
-    }
-    /**
-     * Triggered as the playback progresses in the audio element
-     *
-     * @private
-     * @param {CustomEvent} e
-     * @returns {void}
-     * @memberof RadioPlayer
-     */
-    handleTimeChange(e) {
-        const detail = e.detail || {};
-        if (!detail.currentTime) {
-            return;
-        }
-        this.currentTime = detail.currentTime;
-        const percent = this.currentTime / this.duration;
-        this.percentComplete = percent * 100;
-    }
-    /**
-     * Update any consumers that the current time has changed
-     *
-     * @private
-     * @memberof RadioPlayer
-     */
-    emitCurrentTimeChangedEvent() {
-        const event = new CustomEvent('currentTimeChanged', {
-            detail: { currentTime: this.currentTime },
-        });
-        this.dispatchEvent(event);
-    }
-    /**
-     * When the user clears the search, we want to bubble up the event to other consumers.
-     *
-     * @private
-     * @memberof RadioPlayer
-     */
-    emitSearchClearedEvent() {
-        const event = new Event('searchCleared');
-        this.dispatchEvent(event);
-    }
-    emitSearchTermChangedEvent(term) {
-        const event = new CustomEvent('searchTermChanged', {
-            detail: { searchTerm: term },
-        });
-        this.dispatchEvent(event);
-    }
-    /**
-     * Handle the playback paused event
-     *
-     * @private
-     * @memberof RadioPlayer
-     */
-    playbackPaused() {
-        this.isPlaying = false;
-        /* istanbul ignore else */
-        if (this.playbackControls) {
-            this.playbackControls.playbackMode = PlaybackMode.paused;
-        }
-        const event = new Event('playbackPaused');
-        this.dispatchEvent(event);
-    }
-    /**
-     * Handle the playback started event
-     *
-     * @private
-     * @memberof RadioPlayer
-     */
-    playbackStarted() {
-        this.isPlaying = true;
-        /* istanbul ignore else */
-        if (this.playbackControls) {
-            this.playbackControls.playbackMode = PlaybackMode.playing;
-        }
-        const event = new Event('playbackStarted');
-        this.dispatchEvent(event);
-    }
-    /**
-     * Emits a `canplay` event when the media is ready to be played
-     *
-     * @private
-     * @memberof RadioPlayer
-     */
-    canplay() {
-        const event = new Event('canplay');
-        this.dispatchEvent(event);
-    }
-    /**
-     * Triggered when the user scrubs the scrubber bar or waveform progress bar
-     *
-     * Handles updating the audioElement to the new time and emitting an event
-     * that the time changed
-     *
-     * @private
-     * @param {CustomEvent} e
-     * @returns {void}
-     * @memberof RadioPlayer
-     */
-    valueChangedFromScrub(e) {
-        const detail = e.detail || {};
-        if (!detail.value) {
-            return;
-        }
-        const percentage = detail.value;
-        const newTime = this.duration * (percentage / 100);
-        this.currentTime = newTime;
-        /* istanbul ignore else */
-        if (this.audioElement) {
-            this.audioElement.seekTo(newTime);
-        }
-        this.percentComplete = percentage;
-        const event = new CustomEvent('timeChangedFromScrub', {
-            detail: { newTime: this.currentTime },
-        });
-        this.dispatchEvent(event);
-    }
-    /**
-     * Triggered when the user selects a transcript entry.
-     * Allows it to jump to that spot in the playback.
-     *
-     * @private
-     * @param {CustomEvent} e
-     * @returns {void}
-     * @memberof RadioPlayer
-     */
-    transcriptEntrySelected(e) {
-        const detail = e.detail || {};
-        const entry = detail.entry || {};
-        if (!entry.start) {
-            return;
-        }
-        const newTime = entry.start;
-        this.currentTime = newTime;
-        /* istanbul ignore else */
-        if (this.audioElement) {
-            this.audioElement.seekTo(newTime);
-            this.audioElement.play();
-        }
-        const event = new CustomEvent('transcriptEntrySelected', {
-            detail: { newTime: this.currentTime },
-        });
-        this.dispatchEvent(event);
-    }
-    /**
-     * Creates the music zones based on the transcript so we know when to skip past sections
-     *
-     * @private
-     * @memberof RadioPlayer
-     */
-    updateMusicZones() {
-        // eslint-disable-next-line max-len
-        const musicEntries = this.transcriptEntries.filter((entry) => entry.isMusic === true);
-        // eslint-disable-next-line max-len
-        const musicZones = musicEntries.map((entry) => new MusicZone(entry.start, entry.end));
-        this.musicZones = musicZones;
-    }
-    /**
-     * Skips a music zone if enabled
-     *
-     * @private
-     * @memberof RadioPlayer
-     */
-    skipMusicZone() {
-        // eslint-disable-next-line max-len
-        const activeMusicZone = this.musicZones.find((zone) => this.currentTime > zone.start && this.currentTime < zone.end);
-        if (activeMusicZone && this.audioElement) {
-            this.audioElement.seekTo(activeMusicZone.end + 0.1);
-        }
-    }
-    /**
-     * Updates the search results switcher numbers
-     *
-     * @private
-     * @returns {void}
-     * @memberof RadioPlayer
-     */
-    updateSearchResultSwitcher() {
-        this.shouldShowNoSearchResultMessage = false;
-        this.shouldShowSearchResultSwitcher = false;
-        if (this.searchTerm.length === 0) {
-            return;
-        }
-        const resultCount = this.searchResults.length;
-        if (resultCount === 0) {
-            this.shouldShowNoSearchResultMessage = true;
-        }
-        else {
-            this.shouldShowSearchResultSwitcher = true;
-            /* istanbul ignore else */
-            if (this.searchResultsSwitcher) {
-                this.searchResultsSwitcher.numberOfResults = resultCount;
-            }
-        }
-    }
-    /**
-     * Returns the search result template entries from the transcript config
-     *
-     * @readonly
-     * @private
-     * @type {TranscriptEntryConfig[]}
-     * @memberof RadioPlayer
-     */
-    get searchResults() {
-        return this.searchResultsTranscript ? this.searchResultsTranscript.searchResults : [];
-    }
-    /**
-     * LitElement life cycle event when any reactive property gets updated
-     *
-     * @param {PropertyValues} changedProperties
-     * @memberof RadioPlayer
-     */
-    updated(changedProperties) {
-        // when the transcriptConfig gets changed, reload the music zones and search results switcher
-        if (changedProperties.has('transcriptConfig')) {
-            this.updateMusicZones();
-        }
-        if (changedProperties.has('searchResultsTranscript')) {
-            this.updateSearchResultSwitcher();
-        }
-        if (changedProperties.has('searchHandler') && this.searchTerm) {
-            this.executeSearch(this.searchTerm);
-        }
-        // as the currentTime gets updated, emit an event and skip the music zone if enabled
-        if (changedProperties.has('currentTime')) {
-            this.emitCurrentTimeChangedEvent();
-            if (this.skipMusicSections) {
-                this.skipMusicZone();
-            }
-        }
-    }
-    /**
-     * Component styles
-     *
-     * @readonly
-     * @static
-     * @type {CSSResult}
-     * @memberof RadioPlayer
-     */
-    static get styles() {
-        const collectionLogoMaxHeightCss = css `var(--collectionLogoMaxHeight, 8rem)`;
-        const titleColorCss = css `var(--titleColor, white)`;
-        const titleFontCss = css `var(--titleFont, 1.5em sans-serif)`;
-        const dateColorCss = css `var(--dateColor, white)`;
-        const dateFontCss = css `var(--dateFont, 1em sans-serif)`;
-        const waveformProgressHeightCss = css `var(--waveformProgressHeight, 5rem)`;
-        return css `
-      section[role='main'] {
-        display: -ms-grid;
-        display: grid;
-        grid-gap: 0.5rem;
-      }
-
-      ia-activity-indicator {
-        width: 1.5em;
-        height: 1.5em;
-        display: block;
-        margin: auto;
-        --activityIndicatorLoadingRingColor: #999;
-        --activityIndicatorLoadingDotColor: #999;
-      }
-
-      /* mobile view */
-      @media (max-width: 770px) {
-        section[role='main'] {
-          -ms-grid-columns: 25% 0.5rem 1fr;
-          -ms-grid-rows: auto 0.5rem auto 0.5rem auto 0.5rem auto 0.5rem auto;
-          grid-template-columns: 25% 1fr;
-          grid-template-areas:
-            'collection-logo title-date'
-            'waveform-scrubber waveform-scrubber'
-            'playback-controls playback-controls'
-            'search-section search-section'
-            'transcript-container transcript-container';
-        }
-        .date {
-          text-align: left;
-        }
-        transcript-view {
-          --timeDisplay: none;
-        }
-        playback-controls {
-          width: 75%;
-          margin: auto;
-          grid-row: 5;
-          grid-column: 1;
-          -ms-grid-row: 5;
-          -ms-grid-column: 1;
-          -ms-grid-column-span: 3;
-        }
-        .title-date {
-          grid-row: 1;
-          grid-column: 3;
-          -ms-grid-row: 1;
-          -ms-grid-column: 3;
-        }
-        .transcript-container {
-          grid-row: 9;
-          grid-column: 1;
-          -ms-grid-row: 9;
-          -ms-grid-column: 1;
-          -ms-grid-column-span: 3;
-        }
-        .collection-logo {
-          grid-row: 1;
-          grid-column: 1;
-          -ms-grid-row: 1;
-          -ms-grid-column: 1;
-        }
-        .waveform-scrubber-container {
-          grid-row: 3;
-          grid-column: 1;
-          -ms-grid-row: 3;
-          -ms-grid-column: 1;
-          -ms-grid-column-span: 3;
-        }
-        .search-section {
-          grid-row: 7;
-          grid-column: 1;
-          -ms-grid-row: 7;
-          -ms-grid-column: 1;
-          -ms-grid-column-span: 3;
-          width: 75%;
-          margin: auto;
-        }
-        expandable-search-bar {
-          width: 100%;
-        }
-      }
-
-      /* wide view */
-      @media (min-width: 770px) {
-        section[role='main'] {
-          -ms-grid-columns: 192px 0.5rem 0 0.5rem 250px 0.5rem 1fr;
-          -ms-grid-rows: auto 0.5rem auto 0.5rem auto;
-          grid-template-columns: 192px 0 250px 1fr;
-          grid-template-areas:
-            'title-date title-date title-date title-date'
-            'collection-logo 1 playback-controls waveform-scrubber'
-            'search-section transcript-container transcript-container transcript-container';
-        }
-        .title-date {
-          display: flex;
-          justify-content: space-between;
-          align-items: baseline;
-          grid-row: 1;
-          grid-column: 1;
-          -ms-grid-row: 1;
-          -ms-grid-column: 1;
-          -ms-grid-column-span: 7;
-        }
-        transcript-view {
-          --timeDisplay: block;
-        }
-        playback-controls {
-          grid-row: 3;
-          grid-column: 5;
-          -ms-grid-row: 3;
-          -ms-grid-column: 5;
-          -ms-grid-column-span: 1;
-        }
-        .transcript-container {
-          grid-row: 5;
-          grid-column: 3;
-          -ms-grid-row: 5;
-          -ms-grid-column: 3;
-          -ms-grid-column-span: 5;
-        }
-        .collection-logo {
-          grid-row: 3;
-          grid-column: 1;
-          -ms-grid-row: 3;
-          -ms-grid-column: 1;
-        }
-        .waveform-scrubber-container {
-          grid-row: 3;
-          grid-column: 7;
-          -ms-grid-row: 3;
-          -ms-grid-column: 7;
-          -ms-grid-column-span: 1;
-        }
-        .search-section {
-          grid-row: 5;
-          grid-column: 1;
-          -ms-grid-row: 5;
-          -ms-grid-column: 1;
-          -ms-grid-column-span: 1;
-        }
-      }
-
-      .title-date {
-        grid-area: title-date;
-      }
-
-      .title {
-        color: ${titleColorCss};
-        font: ${titleFontCss};
-      }
-
-      .date {
-        color: ${dateColorCss};
-        font: ${dateFontCss};
-      }
-
-      waveform-progress {
-        width: 100%;
-        height: ${waveformProgressHeightCss};
-      }
-
-      playback-controls {
-        grid-area: playback-controls;
-      }
-
-      .transcript-container {
-        grid-area: transcript-container;
-      }
-
-      transcript-view {
-        max-width: 600px;
-        display: block;
-      }
-
-      .collection-logo {
-        width: 100%;
-        max-height: ${collectionLogoMaxHeightCss};
-        object-fit: contain;
-        grid-area: collection-logo;
-        align-self: center;
-      }
-
-      .waveform-scrubber-container {
-        width: 100%;
-        height: 100%;
-        grid-area: waveform-scrubber;
-      }
-
-      .search-section {
-        grid-area: search-section;
-      }
-
-      .search-results-info {
-        margin-top: 0.5em;
-      }
-
-      .quick-search-container {
-        max-height: 150px;
-        overflow-y: scroll;
-        scrollbar-width: none;
-        margin: 0 0.5em;
-      }
-
-      .quick-search-container::-webkit-scrollbar {
-        display: none;
-      }
-
-      expandable-search-bar {
-        display: block;
-        margin: auto;
-      }
-
-      .no-search-results-message {
-        text-align: center;
-      }
-
-      .hidden {
-        display: none;
-      }
-    `;
-    }
-};
-__decorate([
-    property({ type: Object })
-], RadioPlayer.prototype, "config", void 0);
-__decorate([
-    property({ type: Object })
-], RadioPlayer.prototype, "searchHandler", void 0);
-__decorate([
-    property({ type: Object })
-], RadioPlayer.prototype, "transcriptConfig", void 0);
-__decorate([
-    property({ type: Object })
-], RadioPlayer.prototype, "searchResultsTranscript", void 0);
-__decorate([
-    property({ type: Number })
-], RadioPlayer.prototype, "currentTime", void 0);
-__decorate([
-    property({ type: String })
-], RadioPlayer.prototype, "searchTerm", void 0);
-__decorate([
-    property({ type: Boolean })
-], RadioPlayer.prototype, "skipMusicSections", void 0);
-__decorate([
-    property({ type: Number })
-], RadioPlayer.prototype, "percentComplete", void 0);
-__decorate([
-    property({ type: Boolean })
-], RadioPlayer.prototype, "isPlaying", void 0);
-__decorate([
-    property({ type: Number })
-], RadioPlayer.prototype, "duration", void 0);
-__decorate([
-    property({ type: Number })
-], RadioPlayer.prototype, "playbackRate", void 0);
-__decorate([
-    property({ type: Number })
-], RadioPlayer.prototype, "volume", void 0);
-__decorate([
-    property({ type: Boolean })
-], RadioPlayer.prototype, "shouldShowSearchResultSwitcher", void 0);
-__decorate([
-    property({ type: Boolean })
-], RadioPlayer.prototype, "shouldShowNoSearchResultMessage", void 0);
-__decorate([
-    property({ type: Boolean })
-], RadioPlayer.prototype, "isSearching", void 0);
-RadioPlayer = __decorate([
-    customElement('radio-player')
-], RadioPlayer);
-export default RadioPlayer;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import '@internetarchive/expandable-search-bar';
+import { QuickSearchEntry } from '@internetarchive/expandable-search-bar';
+import '@internetarchive/ia-activity-indicator';
+import '@internetarchive/playback-controls';
+import { PlaybackMode } from '@internetarchive/playback-controls';
+import '@internetarchive/scrubber-bar';
+import '@internetarchive/waveform-progress';
+import { ZoneOfSilence } from '@internetarchive/waveform-progress';
+import { css, html, LitElement, } from 'lit';
+import { customElement, property, } from 'lit/decorators.js';
+import MusicZone from './models/music-zone';
+import './search-results-switcher';
+/**
+ * A Radio Player element to play back transcribed audio.
+ *
+ * It is responsible for orchestrating all of the other components like:
+ * - Waveform Progress
+ * - Scrubber Bar
+ * - Playback Controls
+ * - Transcript View
+ * - Audio Element
+ * - Search Bar
+ *
+ * @export
+ * @class RadioPlayer
+ * @extends {LitElement}
+ */
+let RadioPlayer = class RadioPlayer extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Radio player configuration
+         *
+         * @type {(RadioPlayerConfig | undefined)}
+         * @memberof RadioPlayer
+         */
+        this.config = undefined;
+        /**
+         * The Search Handler
+         *
+         * @type {(SearchHandlerInterface | undefined)}
+         * @memberof RadioPlayer
+         */
+        this.searchHandler = undefined;
+        /**
+         * Transcript configuration
+         *
+         * @type {(TranscriptConfig | undefined)}
+         * @memberof RadioPlayer
+         */
+        this.transcriptConfig = undefined;
+        /**
+         * Search result transcript. It's also a `TranscriptConfig` object, but is broken up by
+         * transcript entries as well as search results.
+         *
+         * If this is set, the transcript view, uses this, otherwise it uses `transcriptConfig`
+         *
+         * @type {(TranscriptConfig | undefined)}
+         * @memberof RadioPlayer
+         */
+        this.searchResultsTranscript = undefined;
+        /**
+         * Current playback time
+         *
+         * @type {number}
+         * @memberof RadioPlayer
+         */
+        this.currentTime = 0;
+        /**
+         * Current search term
+         *
+         * @type {string}
+         * @memberof RadioPlayer
+         */
+        this.searchTerm = '';
+        /**
+         * Flag to determine whether or not to skip the music sections
+         *
+         * @type {boolean}
+         * @memberof RadioPlayer
+         */
+        this.skipMusicSections = false;
+        /**
+         * Percent of playback that is complete
+         *
+         * @private
+         * @type {number}
+         * @memberof RadioPlayer
+         */
+        this.percentComplete = 0;
+        /**
+         * Flag for whether or not the radio player is playing
+         *
+         * @private
+         * @type {boolean}
+         * @memberof RadioPlayer
+         */
+        this.isPlaying = false;
+        /**
+         * Duration of the audio file
+         *
+         * @private
+         * @type {number}
+         * @memberof RadioPlayer
+         */
+        this.duration = 0;
+        /**
+         * The playback rate where 1 is "normal", 0 is paused, 2 is twice as fase
+         *
+         * @private
+         * @type {number}
+         * @memberof RadioPlayer
+         */
+        this.playbackRate = 1;
+        /**
+         * Volume from 0 to 1
+         *
+         * @private
+         * @type {number}
+         * @memberof RadioPlayer
+         */
+        this.volume = 1;
+        /**
+         * Flag for whether we should show the search results switcher
+         *
+         * @private
+         * @type {boolean}
+         * @memberof RadioPlayer
+         */
+        this.shouldShowSearchResultSwitcher = false;
+        /**
+         * Flag for whether we should show the 'no results' message
+         *
+         * @private
+         * @type {boolean}
+         * @memberof RadioPlayer
+         */
+        this.shouldShowNoSearchResultMessage = false;
+        /**
+         * Are we searching or not?
+         *
+         * @private
+         * @type {boolean}
+         * @memberof RadioPlayer
+         */
+        this.isSearching = false;
+        this.musicZones = [];
+    }
+    /**
+     * LitElement lifecycle main render method
+     *
+     * @returns {TemplateResult}
+     * @memberof RadioPlayer
+     */
+    render() {
+        return html `
+      ${this.audioElementTemplate}
+      <section role="main">
+        ${this.titleDateTemplate} ${this.collectionLogoTemplate} ${this.playbackControlsTemplate}
+        <div class="waveform-scrubber-container">
+          ${this.waveFormProgressTemplate} ${this.scrubberBarTemplate}
+        </div>
+        ${this.searchSectionTemplate} ${this.transcriptViewTemplate}
+      </section>
+    `;
+    }
+    /**
+     * Start playback
+     *
+     * @memberof RadioPlayer
+     */
+    play() {
+        /* istanbul ignore else */
+        if (this.audioElement)
+            this.audioElement.play();
+    }
+    /**
+     * Pause playback
+     *
+     * @memberof RadioPlayer
+     */
+    pause() {
+        /* istanbul ignore else */
+        if (this.audioElement)
+            this.audioElement.pause();
+    }
+    /**
+     * Seek audio to given number of seconds
+     *
+     * @param {number} seconds
+     * @memberof RadioPlayer
+     */
+    seekTo(seconds) {
+        /* istanbul ignore else */
+        if (this.audioElement)
+            this.audioElement.seekTo(seconds);
+    }
+    /**
+     * Generate markup for the title and date view sections
+     *
+     * @readonly
+     * @private
+     * @type {TemplateResult}
+     * @memberof RadioPlayer
+     */
+    get titleDateTemplate() {
+        return html `
+      <div class="title-date">
+        <div class="title">
+          ${this.config ? this.config.title : ''}
+        </div>
+
+        <div class="date">
+          ${this.config ? this.config.date : ''}
+        </div>
+      </div>
+    `;
+    }
+    /**
+     * Generate markup for the logo element
+     *
+     * @readonly
+     * @private
+     * @type {TemplateResult}
+     * @memberof RadioPlayer
+     */
+    get collectionLogoTemplate() {
+        return html `
+      <img class="collection-logo" src=${this.logoUrl} alt="collection logo" />
+    `;
+    }
+    /**
+     * Return the logoUrl from the config if provided
+     *
+     * @readonly
+     * @private
+     * @type {string}
+     * @memberof RadioPlayer
+     */
+    get logoUrl() {
+        return this.config ? this.config.logoUrl : '';
+    }
+    /**
+     * Generate the markup for the waveform progress element
+     *
+     * @readonly
+     * @private
+     * @type {TemplateResult}
+     * @memberof RadioPlayer
+     */
+    get waveFormProgressTemplate() {
+        return this.waveformUrl
+            ? html `
+          <waveform-progress
+            interactive="true"
+            .waveformUrl=${this.waveformUrl}
+            .percentComplete=${this.percentComplete}
+            @valuechange=${this.valueChangedFromScrub}
+          >
+          </waveform-progress>
+        `
+            : undefined;
+    }
+    /**
+     * Generate an array of `ZoneOfSilence` models for the waveform progress element
+     *
+     * It does this by parsing the transcript for music sections and converting
+     * those music sections to zones of silence.
+     *
+     * @readonly
+     * @private
+     * @type {ZoneOfSilence[]}
+     * @memberof RadioPlayer
+     */
+    get zonesOfSilence() {
+        /* istanbul ignore else */
+        if (this.duration === 0) {
+            return [];
+        }
+        // eslint-disable-next-line max-len
+        const musicEntries = this.transcriptEntries.filter((entry) => entry.isMusic === true);
+        const zonesOfSilence = musicEntries.map((entry) => {
+            const startPercent = (entry.start / this.duration) * 100;
+            const endPercent = (entry.end / this.duration) * 100;
+            return new ZoneOfSilence(startPercent, endPercent);
+        });
+        return zonesOfSilence;
+    }
+    /**
+     * Return the waveform url from the configuration
+     *
+     * @readonly
+     * @private
+     * @type {string}
+     * @memberof RadioPlayer
+     */
+    get waveformUrl() {
+        return this.config ? this.config.waveformUrl : '';
+    }
+    /**
+     * Generate the audio element markup
+     *
+     * @readonly
+     * @private
+     * @type {TemplateResult}
+     * @memberof RadioPlayer
+     */
+    get audioElementTemplate() {
+        return html `
+      <audio-element
+        .sources=${this.audioSources}
+        .playbackRate=${this.playbackRate}
+        .volume=${this.volume}
+        @timeupdate=${this.handleTimeChange}
+        @durationchange=${this.handleDurationChange}
+        @playbackStarted=${this.playbackStarted}
+        @playbackPaused=${this.playbackPaused}
+        @canplay=${this.canplay}
+      >
+      </audio-element>
+    `;
+    }
+    /**
+     * Return the audio sources from the configuration
+     *
+     * @readonly
+     * @private
+     * @type {AudioSource[]}
+     * @memberof RadioPlayer
+     */
+    get audioSources() {
+        return this.config ? this.config.audioSources : [];
+    }
+    /**
+     * Generate markup for the playback controls
+     *
+     * @readonly
+     * @private
+     * @type {TemplateResult}
+     * @memberof RadioPlayer
+     */
+    get playbackControlsTemplate() {
+        return html `
+      <playback-controls
+        @back-button-pressed=${this.backButtonHandler}
+        @play-pause-button-pressed=${this.playPauseButtonHandler}
+        @forward-button-pressed=${this.forwardButtonHandler}
+        @volumeChange=${this.volumeChanged}
+        @playbackRateChange=${this.changePlaybackRate}
+        @next-section-button-pressed=${this.nextSectionButtonHandler}
+        @prev-section-button-pressed=${this.prevSectionButtonHandler}
+      >
+      </playback-controls>
+    `;
+    }
+    /**
+     * Generate an array of start and end points for each of the music zones.
+     * This allows us to show the markers on the scrubber bar and optionally skip those sections.
+     *
+     * @readonly
+     * @private
+     * @type {number[]}
+     * @memberof RadioPlayer
+     */
+    get scrubberBarMarkerPercentages() {
+        const percentages = [0];
+        this.zonesOfSilence.forEach((zone) => {
+            percentages.push(zone.startPercent);
+            percentages.push(zone.endPercent);
+        });
+        percentages.push(100);
+        return percentages;
+    }
+    /**
+     * Generate markup for the scrubber bar
+     *
+     * @readonly
+     * @private
+     * @type {TemplateResult}
+     * @memberof RadioPlayer
+     */
+    get scrubberBarTemplate() {
+        return html `
+      <scrubber-bar
+        .sectionMarkerPercentages=${this.scrubberBarMarkerPercentages}
+        .value=${this.percentComplete}
+        @valuechange=${this.valueChangedFromScrub}
+      >
+      </scrubber-bar>
+    `;
+    }
+    /**
+     * Generate markup for the transcript view
+     *
+     * @readonly
+     * @private
+     * @type {TemplateResult}
+     * @memberof RadioPlayer
+     */
+    get transcriptViewTemplate() {
+        return html `
+      <div class="transcript-container">
+        <transcript-view
+          .config=${this.currentTranscript}
+          .currentTime=${this.currentTime}
+          @transcriptEntrySelected=${this.transcriptEntrySelected}
+        >
+        </transcript-view>
+      </div>
+    `;
+    }
+    get currentTranscript() {
+        return this.searchResultsTranscript || this.transcriptConfig;
+    }
+    /**
+     * Generate markup for search section
+     *
+     * @readonly
+     * @private
+     * @type {TemplateResult}
+     * @memberof RadioPlayer
+     */
+    get searchSectionTemplate() {
+        return html `
+      <div class="search-section">
+        <expandable-search-bar
+          searchTerm=${this.searchTerm}
+          .quickSearches=${this.quickSearches}
+          @inputchange=${this.updateSearchTerm}
+          @enterKeyPressed=${this.searchEnterKeyPressed}
+          @searchCleared=${this.searchCleared}
+        >
+        </expandable-search-bar>
+        <div class="search-results-info">
+          ${this.searchActivityIndicator}
+          ${this.searchResultsSwitcherTemplate}
+          ${this.noSearchResultsTemplate}
+        </div>
+      </div>
+    `;
+    }
+    /**
+     * Generate markup for the search results switcher
+     *
+     * @readonly
+     * @private
+     * @type {TemplateResult}
+     * @memberof RadioPlayer
+     */
+    get searchResultsSwitcherTemplate() {
+        return html `
+      <search-results-switcher
+        class="${this.shouldShowSearchResultSwitcher && !this.isSearching ? '' : 'hidden'}"
+        @searchResultIndexChanged=${this.searchResultIndexChanged}
+      >
+      </search-results-switcher>
+    `;
+    }
+    /**
+     * Search activity indicator template
+     *
+     * @readonly
+     * @private
+     * @type {TemplateResult}
+     * @memberof RadioPlayer
+     */
+    get searchActivityIndicator() {
+        return html `
+      <ia-activity-indicator
+        class="${this.isSearching ? '' : 'hidden'}">
+      </ia-activity-indicator>
+    `;
+    }
+    /**
+     * Generate markup for the "No Search Results" message
+     *
+     * @readonly
+     * @private
+     * @type {TemplateResult}
+     * @memberof RadioPlayer
+     */
+    get noSearchResultsTemplate() {
+        return html `
+      <div
+        class="
+          no-search-results-message
+          ${this.shouldShowNoSearchResultMessage && !this.isSearching ? '' : 'hidden'}"
+      >
+        No search results.
+      </div>
+    `;
+    }
+    /**
+     * Generate an array of `QuickSearchEntry` objects based on the quick search
+     * configuration passed in.
+     *
+     * @readonly
+     * @private
+     * @type {QuickSearchEntry[]}
+     * @memberof RadioPlayer
+     */
+    get quickSearches() {
+        if (!this.config) {
+            return [];
+        }
+        const entries = this.config.quickSearches.map(entry => new QuickSearchEntry(entry));
+        return entries;
+    }
+    /**
+     * Update the local search term when the SearchBar widget gets updated and emits the event
+     *
+     * @private
+     * @param {CustomEvent} e
+     * @returns {void}
+     * @memberof RadioPlayer
+     */
+    updateSearchTerm(e) {
+        const detail = e.detail || {};
+        if (!detail.value) {
+            return;
+        }
+        const searchTerm = detail.value;
+        this.searchTerm = searchTerm;
+        this.emitSearchTermChangedEvent(searchTerm);
+    }
+    /**
+     * Triggered when the user clicks the clear search button in the search bar.
+     * Clean up all of the search info and reset to the base transcript.
+     *
+     * @private
+     * @memberof RadioPlayer
+     */
+    searchCleared() {
+        this.searchTerm = '';
+        this.searchResultsTranscript = undefined;
+        this.emitSearchClearedEvent();
+        this.emitSearchTermChangedEvent('');
+        /* istanbul ignore else */
+        if (this.transcriptView) {
+            this.transcriptView.selectedSearchResultIndex = 0;
+        }
+        /* istanbul ignore else */
+        if (this.searchResultsSwitcher) {
+            this.searchResultsSwitcher.currentResultIndex = 0;
+        }
+    }
+    /**
+     * Triggered when the user scrubs through search result indices so we can coordinate
+     * the UI updates like scrolling the transcript view
+     *
+     * @private
+     * @param {CustomEvent} e
+     * @returns {void}
+     * @memberof RadioPlayer
+     */
+    searchResultIndexChanged(e) {
+        const detail = e.detail || {};
+        const { searchResultIndex } = detail;
+        if (searchResultIndex === undefined || !this.transcriptView) {
+            return;
+        }
+        this.transcriptView.selectedSearchResultIndex = searchResultIndex;
+        this.transcriptView.scrollToSelectedSearchResult();
+        const event = new CustomEvent('highlightedSearchResultChanged', {
+            detail: { searchResultIndex },
+        });
+        this.dispatchEvent(event);
+    }
+    /**
+     * Triggered when the user presses enter in the search bar so we can trigger a search.
+     *
+     * @private
+     * @param {CustomEvent} e
+     * @memberof RadioPlayer
+     */
+    searchEnterKeyPressed(e) {
+        const detail = e.detail || {};
+        if (!detail.value) {
+            return;
+        }
+        this.executeSearch(detail.value);
+    }
+    executeSearch(term) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.searchHandler || term.length < 2) {
+                this.searchResultsTranscript = undefined;
+                return;
+            }
+            this.searchTerm = term;
+            this.isSearching = true;
+            const event = new Event('searchExecuted');
+            this.dispatchEvent(event);
+            this.searchResultsTranscript = yield this.searchHandler.search(term);
+            this.isSearching = false;
+        });
+    }
+    /**
+     * Return transcript entries from the transcript configuration
+     *
+     * @readonly
+     * @private
+     * @type {TranscriptEntryConfig[]}
+     * @memberof RadioPlayer
+     */
+    get transcriptEntries() {
+        return this.currentTranscript ? this.currentTranscript.entries : [];
+    }
+    /**
+     * Return the transcript view DOM element
+     *
+     * @readonly
+     * @private
+     * @type {(TranscriptView | null)}
+     * @memberof RadioPlayer
+     */
+    get transcriptView() {
+        /* istanbul ignore next */
+        return this.shadowRoot
+            ? this.shadowRoot.querySelector('transcript-view')
+            : null;
+    }
+    /**
+     * Return the audio element DOM element
+     *
+     * @readonly
+     * @private
+     * @type {(AudioElement | null)}
+     * @memberof RadioPlayer
+     */
+    get audioElement() {
+        /* istanbul ignore next */
+        return this.shadowRoot
+            ? this.shadowRoot.querySelector('audio-element')
+            : null;
+    }
+    /**
+     * Return the playback controls DOM element
+     *
+     * @readonly
+     * @private
+     * @type {(PlaybackControls | null)}
+     * @memberof RadioPlayer
+     */
+    get playbackControls() {
+        /* istanbul ignore next */
+        return this.shadowRoot
+            ? this.shadowRoot.querySelector('playback-controls')
+            : null;
+    }
+    /**
+     * Return the search results switcher DOM element
+     *
+     * @readonly
+     * @private
+     * @type {(SearchResultsSwitcher | null)}
+     * @memberof RadioPlayer
+     */
+    get searchResultsSwitcher() {
+        /* istanbul ignore next */
+        return this.shadowRoot
+            ? this.shadowRoot.querySelector('search-results-switcher')
+            : null;
+    }
+    /**
+     * Triggered when the user changes the playback rate so we can update the audio element
+     *
+     * @private
+     * @param {CustomEvent} e
+     * @returns {void}
+     * @memberof RadioPlayer
+     */
+    changePlaybackRate(e) {
+        const detail = e.detail || {};
+        if (!detail.playbackRate) {
+            return;
+        }
+        this.playbackRate = detail.playbackRate;
+        const event = new CustomEvent('playbackRateChanged', {
+            detail: { playbackRate: this.playbackRate },
+        });
+        this.dispatchEvent(event);
+    }
+    /**
+     * Triggered when the user changes the volume from the playback controls
+     *
+     * @private
+     * @param {CustomEvent} e
+     * @returns {void}
+     * @memberof RadioPlayer
+     */
+    volumeChanged(e) {
+        const detail = e.detail || {};
+        if (detail.volume === undefined) {
+            return;
+        }
+        this.volume = e.detail.volume;
+        const event = new CustomEvent('volumeChanged', {
+            detail: { volume: this.volume },
+        });
+        this.dispatchEvent(event);
+    }
+    /**
+     * Triggered when the user presses the back button in the playback controls
+     *
+     * @private
+     * @memberof RadioPlayer
+     */
+    backButtonHandler() {
+        /* istanbul ignore else */
+        if (this.audioElement) {
+            this.audioElement.seekBy(-10);
+        }
+        const event = new Event('jumpBackButtonPressed');
+        this.dispatchEvent(event);
+    }
+    /**
+     * Triggered when the user presses the play/pause button
+     *
+     * @private
+     * @returns {void}
+     * @memberof RadioPlayer
+     */
+    playPauseButtonHandler() {
+        this.isPlaying = !this.isPlaying;
+        /* istanbul ignore if */
+        if (!this.audioElement) {
+            return;
+        }
+        if (this.isPlaying) {
+            this.audioElement.play();
+        }
+        else {
+            this.audioElement.pause();
+        }
+        const event = new CustomEvent('playPauseButtonPressed', {
+            detail: { isPlaying: this.isPlaying },
+        });
+        this.dispatchEvent(event);
+    }
+    /**
+     * Triggered when the user presses the forward button in the playback controls
+     *
+     * @private
+     * @memberof RadioPlayer
+     */
+    forwardButtonHandler() {
+        /* istanbul ignore else */
+        if (this.audioElement) {
+            this.audioElement.seekBy(10);
+        }
+        const event = new Event('jumpForwardButtonPressed');
+        this.dispatchEvent(event);
+    }
+    /**
+     * Skip to the next section
+     *
+     * @private
+     * @returns {void}
+     * @memberof RadioPlayer
+     */
+    nextSectionButtonHandler() {
+        /* istanbul ignore if */
+        if (!this.audioElement) {
+            return;
+        }
+        const percentsGreaterThanValue = this.scrubberBarMarkerPercentages.filter(value => value > this.percentComplete + 0.1);
+        const closestUpper = Math.min(...percentsGreaterThanValue);
+        const seekTo = this.duration * (closestUpper / 100) + 0.1;
+        this.audioElement.seekTo(seekTo);
+        const event = new Event('nextSectionButtonPressed');
+        this.dispatchEvent(event);
+    }
+    /**
+     * Jump to the previous section
+     *
+     * @private
+     * @returns {void}
+     * @memberof RadioPlayer
+     */
+    prevSectionButtonHandler() {
+        /* istanbul ignore if */
+        if (!this.audioElement) {
+            return;
+        }
+        const percentsLessThanValue = this.scrubberBarMarkerPercentages.filter(value => value < this.percentComplete - 0.1);
+        const closestLower = Math.max(...percentsLessThanValue);
+        const seekTo = this.duration * (closestLower / 100) - 0.1;
+        this.audioElement.seekTo(seekTo);
+        const event = new Event('prevSectionButtonPressed');
+        this.dispatchEvent(event);
+    }
+    /**
+     * Handle the duration change event like when the audio file first loads
+     *
+     * @private
+     * @param {CustomEvent} e
+     * @returns {void}
+     * @memberof RadioPlayer
+     */
+    handleDurationChange(e) {
+        const detail = e.detail || {};
+        if (!detail.duration) {
+            return;
+        }
+        this.duration = detail.duration;
+    }
+    /**
+     * Triggered as the playback progresses in the audio element
+     *
+     * @private
+     * @param {CustomEvent} e
+     * @returns {void}
+     * @memberof RadioPlayer
+     */
+    handleTimeChange(e) {
+        const detail = e.detail || {};
+        if (!detail.currentTime) {
+            return;
+        }
+        this.currentTime = detail.currentTime;
+        const percent = this.currentTime / this.duration;
+        this.percentComplete = percent * 100;
+    }
+    /**
+     * Update any consumers that the current time has changed
+     *
+     * @private
+     * @memberof RadioPlayer
+     */
+    emitCurrentTimeChangedEvent() {
+        const event = new CustomEvent('currentTimeChanged', {
+            detail: { currentTime: this.currentTime },
+        });
+        this.dispatchEvent(event);
+    }
+    /**
+     * When the user clears the search, we want to bubble up the event to other consumers.
+     *
+     * @private
+     * @memberof RadioPlayer
+     */
+    emitSearchClearedEvent() {
+        const event = new Event('searchCleared');
+        this.dispatchEvent(event);
+    }
+    emitSearchTermChangedEvent(term) {
+        const event = new CustomEvent('searchTermChanged', {
+            detail: { searchTerm: term },
+        });
+        this.dispatchEvent(event);
+    }
+    /**
+     * Handle the playback paused event
+     *
+     * @private
+     * @memberof RadioPlayer
+     */
+    playbackPaused() {
+        this.isPlaying = false;
+        /* istanbul ignore else */
+        if (this.playbackControls) {
+            this.playbackControls.playbackMode = PlaybackMode.paused;
+        }
+        const event = new Event('playbackPaused');
+        this.dispatchEvent(event);
+    }
+    /**
+     * Handle the playback started event
+     *
+     * @private
+     * @memberof RadioPlayer
+     */
+    playbackStarted() {
+        this.isPlaying = true;
+        /* istanbul ignore else */
+        if (this.playbackControls) {
+            this.playbackControls.playbackMode = PlaybackMode.playing;
+        }
+        const event = new Event('playbackStarted');
+        this.dispatchEvent(event);
+    }
+    /**
+     * Emits a `canplay` event when the media is ready to be played
+     *
+     * @private
+     * @memberof RadioPlayer
+     */
+    canplay() {
+        const event = new Event('canplay');
+        this.dispatchEvent(event);
+    }
+    /**
+     * Triggered when the user scrubs the scrubber bar or waveform progress bar
+     *
+     * Handles updating the audioElement to the new time and emitting an event
+     * that the time changed
+     *
+     * @private
+     * @param {CustomEvent} e
+     * @returns {void}
+     * @memberof RadioPlayer
+     */
+    valueChangedFromScrub(e) {
+        const detail = e.detail || {};
+        if (!detail.value) {
+            return;
+        }
+        const percentage = detail.value;
+        const newTime = this.duration * (percentage / 100);
+        this.currentTime = newTime;
+        /* istanbul ignore else */
+        if (this.audioElement) {
+            this.audioElement.seekTo(newTime);
+        }
+        this.percentComplete = percentage;
+        const event = new CustomEvent('timeChangedFromScrub', {
+            detail: { newTime: this.currentTime },
+        });
+        this.dispatchEvent(event);
+    }
+    /**
+     * Triggered when the user selects a transcript entry.
+     * Allows it to jump to that spot in the playback.
+     *
+     * @private
+     * @param {CustomEvent} e
+     * @returns {void}
+     * @memberof RadioPlayer
+     */
+    transcriptEntrySelected(e) {
+        const detail = e.detail || {};
+        const entry = detail.entry || {};
+        if (!entry.start) {
+            return;
+        }
+        const newTime = entry.start;
+        this.currentTime = newTime;
+        /* istanbul ignore else */
+        if (this.audioElement) {
+            this.audioElement.seekTo(newTime);
+            this.audioElement.play();
+        }
+        const event = new CustomEvent('transcriptEntrySelected', {
+            detail: { newTime: this.currentTime },
+        });
+        this.dispatchEvent(event);
+    }
+    /**
+     * Creates the music zones based on the transcript so we know when to skip past sections
+     *
+     * @private
+     * @memberof RadioPlayer
+     */
+    updateMusicZones() {
+        // eslint-disable-next-line max-len
+        const musicEntries = this.transcriptEntries.filter((entry) => entry.isMusic === true);
+        // eslint-disable-next-line max-len
+        const musicZones = musicEntries.map((entry) => new MusicZone(entry.start, entry.end));
+        this.musicZones = musicZones;
+    }
+    /**
+     * Skips a music zone if enabled
+     *
+     * @private
+     * @memberof RadioPlayer
+     */
+    skipMusicZone() {
+        // eslint-disable-next-line max-len
+        const activeMusicZone = this.musicZones.find((zone) => this.currentTime > zone.start && this.currentTime < zone.end);
+        if (activeMusicZone && this.audioElement) {
+            this.audioElement.seekTo(activeMusicZone.end + 0.1);
+        }
+    }
+    /**
+     * Updates the search results switcher numbers
+     *
+     * @private
+     * @returns {void}
+     * @memberof RadioPlayer
+     */
+    updateSearchResultSwitcher() {
+        this.shouldShowNoSearchResultMessage = false;
+        this.shouldShowSearchResultSwitcher = false;
+        if (this.searchTerm.length === 0) {
+            return;
+        }
+        const resultCount = this.searchResults.length;
+        if (resultCount === 0) {
+            this.shouldShowNoSearchResultMessage = true;
+        }
+        else {
+            this.shouldShowSearchResultSwitcher = true;
+            /* istanbul ignore else */
+            if (this.searchResultsSwitcher) {
+                this.searchResultsSwitcher.numberOfResults = resultCount;
+            }
+        }
+    }
+    /**
+     * Returns the search result template entries from the transcript config
+     *
+     * @readonly
+     * @private
+     * @type {TranscriptEntryConfig[]}
+     * @memberof RadioPlayer
+     */
+    get searchResults() {
+        return this.searchResultsTranscript ? this.searchResultsTranscript.searchResults : [];
+    }
+    /**
+     * LitElement life cycle event when any reactive property gets updated
+     *
+     * @param {PropertyValues} changedProperties
+     * @memberof RadioPlayer
+     */
+    updated(changedProperties) {
+        // when the transcriptConfig gets changed, reload the music zones and search results switcher
+        if (changedProperties.has('transcriptConfig')) {
+            this.updateMusicZones();
+        }
+        if (changedProperties.has('searchResultsTranscript')) {
+            this.updateSearchResultSwitcher();
+        }
+        if (changedProperties.has('searchHandler') && this.searchTerm) {
+            this.executeSearch(this.searchTerm);
+        }
+        // as the currentTime gets updated, emit an event and skip the music zone if enabled
+        if (changedProperties.has('currentTime')) {
+            this.emitCurrentTimeChangedEvent();
+            if (this.skipMusicSections) {
+                this.skipMusicZone();
+            }
+        }
+    }
+    /**
+     * Component styles
+     *
+     * @readonly
+     * @static
+     * @type {CSSResult}
+     * @memberof RadioPlayer
+     */
+    static get styles() {
+        const collectionLogoMaxHeightCss = css `var(--collectionLogoMaxHeight, 8rem)`;
+        const titleColorCss = css `var(--titleColor, white)`;
+        const titleFontCss = css `var(--titleFont, 1.5em sans-serif)`;
+        const dateColorCss = css `var(--dateColor, white)`;
+        const dateFontCss = css `var(--dateFont, 1em sans-serif)`;
+        const waveformProgressHeightCss = css `var(--waveformProgressHeight, 5rem)`;
+        return css `
+      section[role='main'] {
+        display: -ms-grid;
+        display: grid;
+        grid-gap: 0.5rem;
+      }
+
+      ia-activity-indicator {
+        width: 1.5em;
+        height: 1.5em;
+        display: block;
+        margin: auto;
+        --activityIndicatorLoadingRingColor: #999;
+        --activityIndicatorLoadingDotColor: #999;
+      }
+
+      /* mobile view */
+      @media (max-width: 770px) {
+        section[role='main'] {
+          -ms-grid-columns: 25% 0.5rem 1fr;
+          -ms-grid-rows: auto 0.5rem auto 0.5rem auto 0.5rem auto 0.5rem auto;
+          grid-template-columns: 25% 1fr;
+          grid-template-areas:
+            'collection-logo title-date'
+            'waveform-scrubber waveform-scrubber'
+            'playback-controls playback-controls'
+            'search-section search-section'
+            'transcript-container transcript-container';
+        }
+        .date {
+          text-align: left;
+        }
+        transcript-view {
+          --timeDisplay: none;
+        }
+        playback-controls {
+          width: 75%;
+          margin: auto;
+          grid-row: 5;
+          grid-column: 1;
+          -ms-grid-row: 5;
+          -ms-grid-column: 1;
+          -ms-grid-column-span: 3;
+        }
+        .title-date {
+          grid-row: 1;
+          grid-column: 3;
+          -ms-grid-row: 1;
+          -ms-grid-column: 3;
+        }
+        .transcript-container {
+          grid-row: 9;
+          grid-column: 1;
+          -ms-grid-row: 9;
+          -ms-grid-column: 1;
+          -ms-grid-column-span: 3;
+        }
+        .collection-logo {
+          grid-row: 1;
+          grid-column: 1;
+          -ms-grid-row: 1;
+          -ms-grid-column: 1;
+        }
+        .waveform-scrubber-container {
+          grid-row: 3;
+          grid-column: 1;
+          -ms-grid-row: 3;
+          -ms-grid-column: 1;
+          -ms-grid-column-span: 3;
+        }
+        .search-section {
+          grid-row: 7;
+          grid-column: 1;
+          -ms-grid-row: 7;
+          -ms-grid-column: 1;
+          -ms-grid-column-span: 3;
+          width: 75%;
+          margin: auto;
+        }
+        expandable-search-bar {
+          width: 100%;
+        }
+      }
+
+      /* wide view */
+      @media (min-width: 770px) {
+        section[role='main'] {
+          -ms-grid-columns: 192px 0.5rem 0 0.5rem 250px 0.5rem 1fr;
+          -ms-grid-rows: auto 0.5rem auto 0.5rem auto;
+          grid-template-columns: 192px 0 250px 1fr;
+          grid-template-areas:
+            'title-date title-date title-date title-date'
+            'collection-logo 1 playback-controls waveform-scrubber'
+            'search-section transcript-container transcript-container transcript-container';
+        }
+        .title-date {
+          display: flex;
+          justify-content: space-between;
+          align-items: baseline;
+          grid-row: 1;
+          grid-column: 1;
+          -ms-grid-row: 1;
+          -ms-grid-column: 1;
+          -ms-grid-column-span: 7;
+        }
+        transcript-view {
+          --timeDisplay: block;
+        }
+        playback-controls {
+          grid-row: 3;
+          grid-column: 5;
+          -ms-grid-row: 3;
+          -ms-grid-column: 5;
+          -ms-grid-column-span: 1;
+        }
+        .transcript-container {
+          grid-row: 5;
+          grid-column: 3;
+          -ms-grid-row: 5;
+          -ms-grid-column: 3;
+          -ms-grid-column-span: 5;
+        }
+        .collection-logo {
+          grid-row: 3;
+          grid-column: 1;
+          -ms-grid-row: 3;
+          -ms-grid-column: 1;
+        }
+        .waveform-scrubber-container {
+          grid-row: 3;
+          grid-column: 7;
+          -ms-grid-row: 3;
+          -ms-grid-column: 7;
+          -ms-grid-column-span: 1;
+        }
+        .search-section {
+          grid-row: 5;
+          grid-column: 1;
+          -ms-grid-row: 5;
+          -ms-grid-column: 1;
+          -ms-grid-column-span: 1;
+        }
+      }
+
+      .title-date {
+        grid-area: title-date;
+      }
+
+      .title {
+        color: ${titleColorCss};
+        font: ${titleFontCss};
+      }
+
+      .date {
+        color: ${dateColorCss};
+        font: ${dateFontCss};
+      }
+
+      waveform-progress {
+        width: 100%;
+        height: ${waveformProgressHeightCss};
+      }
+
+      playback-controls {
+        grid-area: playback-controls;
+      }
+
+      .transcript-container {
+        grid-area: transcript-container;
+      }
+
+      transcript-view {
+        max-width: 600px;
+        display: block;
+      }
+
+      .collection-logo {
+        width: 100%;
+        max-height: ${collectionLogoMaxHeightCss};
+        object-fit: contain;
+        grid-area: collection-logo;
+        align-self: center;
+      }
+
+      .waveform-scrubber-container {
+        width: 100%;
+        height: 100%;
+        grid-area: waveform-scrubber;
+      }
+
+      .search-section {
+        grid-area: search-section;
+      }
+
+      .search-results-info {
+        margin-top: 0.5em;
+      }
+
+      .quick-search-container {
+        max-height: 150px;
+        overflow-y: scroll;
+        scrollbar-width: none;
+        margin: 0 0.5em;
+      }
+
+      .quick-search-container::-webkit-scrollbar {
+        display: none;
+      }
+
+      expandable-search-bar {
+        display: block;
+        margin: auto;
+      }
+
+      .no-search-results-message {
+        text-align: center;
+      }
+
+      .hidden {
+        display: none;
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: Object })
+], RadioPlayer.prototype, "config", void 0);
+__decorate([
+    property({ type: Object })
+], RadioPlayer.prototype, "searchHandler", void 0);
+__decorate([
+    property({ type: Object })
+], RadioPlayer.prototype, "transcriptConfig", void 0);
+__decorate([
+    property({ type: Object })
+], RadioPlayer.prototype, "searchResultsTranscript", void 0);
+__decorate([
+    property({ type: Number })
+], RadioPlayer.prototype, "currentTime", void 0);
+__decorate([
+    property({ type: String })
+], RadioPlayer.prototype, "searchTerm", void 0);
+__decorate([
+    property({ type: Boolean })
+], RadioPlayer.prototype, "skipMusicSections", void 0);
+__decorate([
+    property({ type: Number })
+], RadioPlayer.prototype, "percentComplete", void 0);
+__decorate([
+    property({ type: Boolean })
+], RadioPlayer.prototype, "isPlaying", void 0);
+__decorate([
+    property({ type: Number })
+], RadioPlayer.prototype, "duration", void 0);
+__decorate([
+    property({ type: Number })
+], RadioPlayer.prototype, "playbackRate", void 0);
+__decorate([
+    property({ type: Number })
+], RadioPlayer.prototype, "volume", void 0);
+__decorate([
+    property({ type: Boolean })
+], RadioPlayer.prototype, "shouldShowSearchResultSwitcher", void 0);
+__decorate([
+    property({ type: Boolean })
+], RadioPlayer.prototype, "shouldShowNoSearchResultMessage", void 0);
+__decorate([
+    property({ type: Boolean })
+], RadioPlayer.prototype, "isSearching", void 0);
+RadioPlayer = __decorate([
+    customElement('radio-player')
+], RadioPlayer);
+export default RadioPlayer;
 //# sourceMappingURL=radio-player.js.map