@internetarchive/transcript-view
TypeScript icon, indicating that this package has built-in type declarations

0.0.3 • Public • Published

<transcript-view>

A transcript view that handles closed captioning and search results.

Transcript View

Installation

yarn add @internetarchive/transcript-view

Usage

// transcript-view.js
import TranscriptView from '@internetarchive/transcript-view';
export default TranscriptView;
<!-- index.html -->
<script type="module">
  import './transcript-view.js';
</script>

<style>
  transcript-view {
    display: block;
    --timeColor: white;
    --timeColumnWidth: 5rem;
    --transcriptHeight: 200px;

    --autoScrollButtonFontColor: black;
    --autoScrollButtonBackgroundColor: white;

    --normalTextColor: gray;
    --activeTextColor: white;
    --searchResultInactiveBorderColor: gray;
    --searchResultActiveBorderColor: green;
  }
</style>

<transcript-view
  currentTime=10
  showContextZones=true
  topContextHeight=50
  bottomContextHeight=50
  selectedSearchResultIndex=1
  .entries=${transcript}>
</transcript-view>

<script>
  const transcriptView = document.querySelector('transcript-view');

  // change the current time and the transcript view
  // will scroll to the proper entry
  transcriptView.currentTime = 50;
</script>

Development

Prerequisite

yarn install

Start Development Server

yarn start  // start development server and typescript compiler

Testing

yarn test

Testing via browserstack

yarn test:bs

Demoing using storybook

yarn storybook

Linting

yarn lint

/@internetarchive/transcript-view/

    Package Sidebar

    Install

    npm i @internetarchive/transcript-view

    Weekly Downloads

    60

    Version

    0.0.3

    License

    AGPL-3.0-only

    Unpacked Size

    122 kB

    Total Files

    38

    Last publish

    Collaborators

    • jeffwklein
    • jim-at-ia
    • tracey.pooh
    • latonv
    • markcarranza
    • ibnesayeed
    • bfalling
    • mitraardron
    • vbanos
    • kngenie
    • iisa
    • cdrini
    • nsharma123
    • dualcnhq