@internetarchive/radio-player 0.0.3 → 0.1.0

package/package.json

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

package/.eslintrc

@@ -1,37 +0,0 @@
-{
-  "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint"],
-  "extends": [
-    "plugin:@typescript-eslint/recommended",
-    "@open-wc",
-    "prettier"
-  ],
-  "rules": {
-    "no-unused-vars": "off",
-    "max-classes-per-file": "off",
-    "@typescript-eslint/no-unused-vars": [
-      "error"
-    ],
-    "no-shadow": "off",
-    "@typescript-eslint/no-shadow": [
-      "error"
-    ],
-    "class-methods-use-this": "off",
-    "import/no-unresolved": "off",
-    "import/extensions": [
-      "off",
-      "ignorePackages",
-      {
-        "js": "never",
-        "ts": "never"
-      }
-    ],
-  },
-  "settings": {
-    "import/resolver": {
-      "node": {
-        "extensions": [".js", ".jsx", ".ts", ".tsx"]
-      }
-    }
-  }
-}

package/.gitignore

@@ -1,11 +0,0 @@
-## testing
-/coverage/
-
-## temp folders
-/.tmp/
-
-# build
-/_site/
-/lib/
-
-*.log

package/.storybook/.babelrc

@@ -1,15 +0,0 @@
-{
-  "plugins": [
-    "@babel/plugin-syntax-dynamic-import",
-    "@babel/plugin-proposal-object-rest-spread"
-  ],
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "useBuiltIns": "entry",
-        "corejs": "2",
-      }
-    ]
-  ]
-}

package/.storybook/addons.js

@@ -1,7 +0,0 @@
-import '@storybook/addon-a11y/register';
-import '@storybook/addon-actions/register';
-import '@storybook/addon-knobs/register';
-import '@storybook/addon-notes/register';
-import '@storybook/addon-links/register';
-import '@storybook/addon-storysource/register';
-import '@storybook/addon-viewport/register';

package/.storybook/config.js

@@ -1,11 +0,0 @@
-import { configure, addDecorator } from '@storybook/polymer';
-import { withA11y } from '@storybook/addon-a11y';
-import '@storybook/addon-console';
-
-const req = require.context('../stories', true, /\.stories\.js$/);
-function loadStories() {
-  req.keys().forEach(filename => req(filename));
-}
-
-addDecorator(withA11y);
-configure(loadStories, module);

package/.storybook/webpack.config.js

@@ -1,5 +0,0 @@
-const defaultConfig = require('@open-wc/demoing-storybook/default-storybook-webpack-config.js');
-
-module.exports = ({ config }) => {
-  return defaultConfig({ config, transpilePackages: ['lit-html', 'lit-element', '@open-wc'] });
-};

package/demo/full-text-search-service.ts

@@ -1,32 +0,0 @@
-import { FullTextSearchServiceInterface } from '../src/search-handler/search-backends/full-text-search-backend/full-text-search-service-interface';
-import { FullTextSearchResponse } from '../src/search-handler/search-backends/full-text-search-backend/full-text-search-response';
-
-/**
- * An example FullTextSearchService that fetches data from the backend and
- * returns a Promise<FullTextSearch> response.
- */
-export class FullTextSearchService implements FullTextSearchServiceInterface {
-  private itemId: string;
-
-  private baseUrl: string;
-
-  private searchServicePath: string;
-
-  constructor(itemId: string, baseUrl: string, searchServicePath: string) {
-    this.itemId = itemId;
-    this.baseUrl = baseUrl;
-    this.searchServicePath = searchServicePath;
-  }
-
-  /** @inheritdoc */
-  async searchRequested(query: string): Promise<FullTextSearchResponse> {
-    const searchUrl = `${this.baseUrl}${this.searchServicePath}`;
-    const queryParams = `?q=${query}&identifier=${this.itemId}&number_of_fragments=1000&scope=all`;
-    const url = `${searchUrl}${queryParams}`;
-    const rawResponse = await fetch(url);
-    const jsonResponse = await rawResponse.json();
-    const modeledResponse = new FullTextSearchResponse(jsonResponse);
-
-    return new Promise(resolve => resolve(modeledResponse));
-  }
-}

package/demo/index.html

@@ -1,53 +0,0 @@
-<!doctype html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-
-  <style>
-    body {
-      background: #000;
-      font-family: sans-serif;
-    }
-
-    radio-player-controller {
-      display: block;
-      border-bottom: 1px solid white;
-      line-height: 1.5rem;
-      color: white;
-
-      --timeColor: white;
-      --timeColumnWidth: 3rem;
-      --transcriptHeight: 400px;
-
-      --autoScrollButtonFontColor: black;
-      --autoScrollButtonBackgroundColor: white;
-
-      --normalTextColor: gray;
-      --activeTextColor: white;
-      --searchResultInactiveBorderColor: gray;
-      --searchResultActiveBorderColor: green;
-
-      --trackColor: black;
-      --trackBorder: 1px solid white;
-    }
-  </style>
-</head>
-<body>
-  <div id="demo">
-  </div>
-
-  <script type="module">
-    import { html, render } from 'lit';
-    import '../lib/demo/radio-player-controller.js';
-
-    render(
-      html`
-        <radio-player-controller>
-        </radio-player-controller>
-      `,
-      document.querySelector('#demo')
-    );
-  </script>
-</body>
-</html>

package/demo/radio-player-controller.ts

@@ -1,237 +0,0 @@
-/* eslint-disable import/no-duplicates */
-import {
-  LitElement,
-  html,
-  TemplateResult,
-  PropertyValues,
-} from 'lit';
-import {
-  customElement,
-  property,
-} from 'lit/decorators.js';
-
-import { AudioSource } from '@internetarchive/audio-element';
-import { TranscriptConfig, TranscriptEntryConfig } from '@internetarchive/transcript-view';
-
-import '../src/radio-player';
-import RadioPlayer from '../src/radio-player';
-import RadioPlayerConfig from '../src/models/radio-player-config';
-import { SearchHandler } from '../src/search-handler/search-handler';
-import { SearchHandlerInterface } from '../src/search-handler/search-handler-interface';
-import { TranscriptIndex } from '../src/search-handler/transcript-index';
-import { FullTextSearchBackend } from '../src/search-handler/search-backends/full-text-search-backend/full-text-search-backend';
-import { SearchBackendInterface } from '../src/search-handler/search-backends/search-backend-interface';
-import { FullTextSearchService } from './full-text-search-service';
-import { FullTextSearchServiceInterface } from '../src/search-handler/search-backends/full-text-search-backend/full-text-search-service-interface';
-// import { LocalSearchBackend } from '../src/search-handler/search-indices/local-search-index';
-
-@customElement('radio-player-controller')
-export default class RadioPlayerController extends LitElement {
-  @property({ type: Object }) radioPlayerConfig: RadioPlayerConfig | undefined = undefined;
-
-  @property({ type: Object }) transcriptConfig: TranscriptConfig | undefined = undefined;
-
-  @property({ type: String }) itemId: string | undefined = 'Euronews_Radio_English_20171029_030000';
-
-  /**
-   * The Search Handler
-   *
-   * @type {(SearchHandlerInterface | undefined)}
-   * @memberof RadioPlayer
-   */
-  @property({ type: Object }) searchHandler: SearchHandlerInterface | undefined = undefined;
-
-  private startPlaybackAt: number | undefined = undefined;
-
-  private currentTime = 0;
-
-  private fileName = '';
-
-  private baseUrl = 'https://archive.org';
-
-  private searchServicePath = '/services/radio-archive/search/service.php';
-
-  private searchBackend: SearchBackendInterface | undefined;
-
-  private searchService: FullTextSearchServiceInterface | undefined;
-
-  render(): TemplateResult {
-    return html`
-      <radio-player
-        .config=${this.radioPlayerConfig}
-        .transcriptConfig=${this.transcriptConfig}
-        .searchHandler=${this.searchHandler}
-        @searchTermChanged=${this.searchTermChanged}
-        @playbackPaused=${this.playbackPaused}
-        @currentTimeChanged=${this.currentTimeChanged}
-        @timeChangedFromScrub=${this.timeChangedFromScrub}
-        @transcriptEntrySelected=${this.transcriptEntrySelected}
-        @canplay=${this.canplay}
-      >
-      </radio-player>
-    `;
-  }
-
-  /* eslint-disable @typescript-eslint/no-explicit-any */
-  async loadItemMetadata(): Promise<any> {
-    const url = `https://archive.org/metadata/${this.itemId}`;
-    const response = await fetch(url);
-    const data = await response.json();
-
-    this.handleMetadataResponse(data);
-  }
-
-  async fetchTranscript(): Promise<any> {
-    const srtUrl = `https://archive.org/cors/${this.itemId}/${this.fileName}`;
-
-    const response = await fetch(srtUrl);
-    const json = await response.json();
-
-    const transcriptEntries = json.map(
-      (entry: any) => new TranscriptEntryConfig(
-        entry.id,
-        entry.start,
-        entry.end,
-        entry.text,
-        entry.is_music,
-        entry.search_match_index,
-      ),
-    );
-
-    this.transcriptConfig = new TranscriptConfig(transcriptEntries);
-  }
-
-  async setup(): Promise<any> {
-    await this.loadItemMetadata();
-    await this.fetchTranscript();
-
-    const searchParams = new URLSearchParams(window.location.search);
-    const searchTerm = searchParams.get('q');
-    const startTime = searchParams.get('start');
-
-    if (searchTerm && this.radioPlayer) {
-      this.radioPlayer.searchTerm = searchTerm;
-    }
-
-    if (startTime) {
-      this.startPlaybackAt = parseFloat(startTime);
-    }
-  }
-
-  handleMetadataResponse(response: any): void {
-    const metadata = response;
-    const collectionIdentifier = metadata.metadata.collection[0];
-    const srtFile = metadata.files.find((file: any) => file.format === 'JSON SRT');
-    this.fileName = srtFile.name;
-
-    const originalAudioFile = metadata.files.find(
-      (file: any) => file.source === 'original'
-      && ['vbr mp3', 'ogg vorbis', 'advanced audio coding'].includes(file.format.toLowerCase()),
-    );
-
-    const audioFiles = metadata.files.filter((file: any) => [
-      'vbr mp3', 'ogg vorbis'].includes(file.format.toLowerCase()),);
-
-    const audioSources = audioFiles.map((file: any) => {
-      const url = `https://archive.org/download/${this.itemId}/${file.name}`;
-      const mimetype = file.format.toLowerCase() === 'ogg vorbis' ? 'audio/ogg' : 'audio/mpeg';
-      return new AudioSource(url, mimetype);
-    });
-
-    const waveFormImageFile = metadata.files.find(
-      (file: any) => file.format.toLowerCase() === 'png'
-      && file.original === originalAudioFile.name,
-    );
-
-    let waveFormImageUrl;
-
-    if (waveFormImageFile) {
-      waveFormImageUrl = `https://archive.org/download/${this.itemId}/${waveFormImageFile.name}`;
-    }
-
-    this.radioPlayerConfig = new RadioPlayerConfig(
-      metadata.metadata.contributor,
-      metadata.metadata.start_localtime || metadata.metadata.start_time,
-      `https://archive.org/services/img/${collectionIdentifier}`,
-      waveFormImageUrl,
-      audioSources,
-    );
-  }
-  /* eslint-enable @typescript-eslint/no-explicit-any */
-
-  private get radioPlayer(): RadioPlayer | null {
-    return this.shadowRoot ? (this.shadowRoot.querySelector('radio-player') as RadioPlayer) : null;
-  }
-
-  firstUpdated(): void {
-    this.setup();
-  }
-
-  updated(changedProperties: PropertyValues): void {
-    if (changedProperties.has('transcriptConfig')) {
-      this.setupSearchHandler();
-    }
-  }
-
-  private setupSearchHandler(): void {
-    if (!this.transcriptConfig || !this.itemId) {
-      return;
-    }
-    const transcriptIndex = new TranscriptIndex(this.transcriptConfig);
-    // const searchBackend = new LocalSearchBackend();
-    this.searchService = new FullTextSearchService(
-      this.itemId, this.baseUrl, this.searchServicePath
-    );
-    const searchBackend = new FullTextSearchBackend(this.searchService);
-    this.searchBackend = searchBackend;
-    const searchHandler = new SearchHandler(searchBackend, transcriptIndex);
-    this.searchHandler = searchHandler;
-  }
-
-  private canplay(): void {
-    if (this.startPlaybackAt && this.radioPlayer) {
-      this.radioPlayer.seekTo(this.startPlaybackAt);
-      this.startPlaybackAt = undefined;
-    }
-  }
-
-  private searchTermChanged(e: CustomEvent): void {
-    const { searchTerm } = e.detail;
-    this.updateSearchQueryParam(searchTerm);
-  }
-
-  private currentTimeChanged(e: CustomEvent): void {
-    this.currentTime = e.detail.currentTime;
-  }
-
-  private playbackPaused(): void {
-    this.updateStartTimeQueryParam();
-  }
-
-  private timeChangedFromScrub(e: CustomEvent): void {
-    this.currentTime = e.detail.newTime;
-    this.updateStartTimeQueryParam();
-  }
-
-  private transcriptEntrySelected(e: CustomEvent): void {
-    this.currentTime = e.detail.newTime;
-    this.updateStartTimeQueryParam();
-  }
-
-  private updateStartTimeQueryParam(): void {
-    const searchParams = new URLSearchParams(window.location.search);
-    searchParams.set('start', `${this.currentTime}`);
-    window.history.replaceState({}, '', `?${searchParams.toString()}`);
-  }
-
-  /* eslint-disable-next-line class-methods-use-this */
-  private updateSearchQueryParam(searchTerm: string): void {
-    const searchParams = new URLSearchParams(window.location.search);
-    if (searchTerm === '') {
-      searchParams.delete('q');
-    } else {
-      searchParams.set('q', `${searchTerm}`);
-    }
-    window.history.replaceState({}, '', `?${searchParams.toString()}`);
-  }
-}

package/karma.bs.config.js

@@ -1,16 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-const merge = require('deepmerge');
-const bsSettings = require('@open-wc/testing-karma-bs/bs-settings.js');
-const createBaseConfig = require('./karma.conf.js');
-
-module.exports = (config) => {
-  config.set(
-    merge(bsSettings(config), createBaseConfig(config), {
-      browserStack: {
-        project: 'radio-player',
-      },
-    }),
-  );
-
-  return config;
-};

package/karma.conf.js

@@ -1,66 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-const { createDefaultConfig } = require('@open-wc/testing-karma');
-const merge = require('deepmerge');
-
-module.exports = (config) => {
-  config.set(
-    merge(createDefaultConfig(config), {
-      files: [
-        // runs all files ending with .test in the test folder,
-        // can be overwritten by passing a --grep flag. examples:
-        //
-        // npm run test -- --grep test/foo/bar.test.js
-        // npm run test -- --grep test/bar/*
-        {
-          pattern: 'test/**/*.mp3', watched: false, included: false, served: true
-        },
-        { pattern: config.grep ? config.grep : 'test/**/*.test.js', type: 'module' },
-      ],
-
-      customLaunchers: {
-        ChromeHeadlessAutoplayAllowed: {
-          base: 'ChromeHeadless',
-          flags: [
-            // needed to test playback via javascript since the browser
-            // doesn't allow automated playback without user interaction
-            '--autoplay-policy=no-user-gesture-required',
-            '--no-sandbox',
-            '--disable-setuid-sandbox'
-          ],
-        },
-      },
-
-      esm: {
-        preserveSymlinks: true,
-        nodeResolve: true
-      },
-
-      proxies: {
-        '/assets/': '/base/test/assets/'
-      },
-
-      reporters: [
-        // Reference: https://github.com/karma-runner/karma-coverage
-        // Output code coverage files
-        'coverage'
-      ],
-
-      // Configure code coverage reporter
-      coverageReporter: {
-        reporters: [
-          // generates ./coverage/lcov.info
-          { type: 'lcovonly', subdir: '.' },
-          // generates ./coverage/coverage-final.json
-          { type: 'json', subdir: '.' },
-        ]
-      },
-
-      plugins: [
-        require.resolve('@open-wc/karma-esm'),
-        'karma-coverage'
-      ],
-    }),
-  );
-  config.browsers = ['ChromeHeadlessAutoplayAllowed'];
-  return config;
-};